admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面美化：登陆页面优化

Browse Source
This commit is contained in:
sheng
2023-07-25 16:45:47 +08:00
committed by 李强
parent 3b9dc7c171
commit 9cf5d13f1c
2 changed files with 402 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/views/system/login/index.vue
View File

@@ -40,6 +40,19 @@
</div> </div>
</div> </div>
</div> </div>
<div class="login-authorization">
<p>Copyright © 2021-2022 django-vue-admin.com 版权所有</p>
<p class="la-other">
<a href="https://beian.miit.gov.cn" target="_blank">晋ICP备18005113号-3</a>
|
<a href="https://django-vue-admin.com" target="_blank">帮助</a>
|
<a href="#">隐私</a>
|
<a href="#">条款</a>
</p>
</div>
</div> </div>
</template> </template>
@@ -101,7 +114,7 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
span { span {
margin-left: 10px; margin-left: 10px;
font-size: 28px; font-size: 20px;
color: #26a59a; color: #26a59a;
} }
.login-left-logo-text-msg { .login-left-logo-text-msg {
@@ -251,5 +264,20 @@ onMounted(() => {
} }
} }
} }
.login-authorization {
position: fixed;
bottom: 50px;
left: 0;
right: 0;
text-align: center;
p {
font-size: 14px;
}
a {
color: #409eff;
margin: 0 5px;
}
}
} }
</style> </style>

161
web/src/views/system/menu/index.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<fs-page> <fs-page>
<splitpanes> <el-row class="s-el-row">
<pane max-size="20" min-size="16"> <el-col :span="5">
<el-card :body-style="{ height: '100%' }"> <div class="menu-box menu-left-box">
<p class="font-mono font-black text-center text-xl pb-5"> <p class="font-mono font-black text-center text-xl pb-5">
菜单列表 菜单列表
<el-tooltip effect="dark" :content="content" placement="right"> <el-tooltip effect="dark" :content="content" placement="right">
@@ -12,12 +12,9 @@
</el-tooltip> </el-tooltip>
</p> </p>
<el-input v-model="filterText" :placeholder="placeholder" /> <el-input v-model="filterText" :placeholder="placeholder" />
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" <el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
:props="treeProps" :filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" @node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
:allow-drop="allowDrop"
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable
@node-click="handleNodeClick">
<template #default="{ node, data }"> <template #default="{ node, data }">
<span v-if="data.status" class="text-center font-black font-normal"> <span v-if="data.status" class="text-center font-black font-normal">
<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }} <SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
@@ -27,12 +24,11 @@
</span> </span>
</template> </template>
</el-tree> </el-tree>
</el-card> </div>
</pane> </el-col>
<pane min-size="30"> <el-col :span="9">
<el-card :body-style="{ height: '100%' }"> <div class="menu-box menu-center-box">
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" <el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
label-position="right">
<el-alert :title="content" type="success" effect="dark" :closable="false" center /> <el-alert :title="content" type="success" effect="dark" :closable="false" center />
<el-divider> <el-divider>
<strong>菜单配置</strong> <strong>菜单配置</strong>
@@ -47,11 +43,8 @@
<el-input v-model="form.name" /> <el-input v-model="form.name" />
</el-form-item> </el-form-item>
<el-form-item label="组件地址" prop="component"> <el-form-item label="组件地址" prop="component">
<el-autocomplete class="w-full" v-model="form.component" <el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
:fetch-suggestions="querySearch" :trigger-on-focus="false" :trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
clearable
debounce="100"
placeholder="输入组件地址"/>
</el-form-item> </el-form-item>
<el-form-item required label="Url" prop="web_path"> <el-form-item required label="Url" prop="web_path">
<el-input v-model="form.web_path" /> <el-input v-model="form.web_path" />
@@ -82,12 +75,102 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-divider></el-divider> <el-divider></el-divider>
<div> <div class="menus-btns">
<el-button @click="saveMenu()" type="primary" round>保存</el-button>
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
</el-button>
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
</el-button>
</div>
</div>
</el-col>
<el-col :span="10">
<div class="menu-box menu-right-box">
<menuButton :select-menu="form" />
</div>
</el-col>
</el-row>
<!-- <splitpanes>
<pane max-size="30" min-size="30">
<el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5">
菜单列表
<el-tooltip effect="dark" :content="content" placement="right">
<el-icon>
<QuestionFilled />
</el-icon>
</el-tooltip>
</p>
<el-input v-model="filterText" :placeholder="placeholder" />
<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
@node-drop="nodeDrop" lazy icon="ArrowRightBold" :indent="12" draggable @node-click="handleNodeClick">
<template #default="{ node, data }">
<span v-if="data.status" class="text-center font-black font-normal">
<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
</span>
<span v-else class="text-center font-black text-red-700 font-normal">
<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
</span>
</template>
</el-tree>
</el-card>
</pane>
<pane min-size="30">
<el-card :body-style="{ height: '100%' }">
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
<el-alert :title="content" type="success" effect="dark" :closable="false" center />
<el-divider>
<strong>菜单配置</strong>
</el-divider>
<el-form-item label="菜单ID" prop="id">
<el-input v-model="form.id" disabled />
</el-form-item>
<el-form-item label="父级ID" prop="parent">
<el-input v-model="form.parent" />
</el-form-item>
<el-form-item required label="菜单名称" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="组件地址" prop="component">
<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
:trigger-on-focus="false" clearable debounce="100" placeholder="输入组件地址" />
</el-form-item>
<el-form-item required label="Url" prop="web_path">
<el-input v-model="form.web_path" />
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="form.sort" controls-position="right" />
</el-form-item>
<el-form-item label="状态">
<el-radio-group v-model="form.status">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="侧边可见">
<el-radio-group v-model="form.visible">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="缓存">
<el-radio-group v-model="form.cache">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="图标" prop="icon">
<IconSelector clearable v-model="form.icon" />
</el-form-item>
</el-form>
<el-divider></el-divider>
<div class="menus-btns">
<el-button @click="saveMenu()" type="primary" round>保存</el-button> <el-button @click="saveMenu()" type="primary" round>保存</el-button>
<el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button> <el-button @click="newMenu()" type="success" round :disabled="!form.id">新建</el-button>
<el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级 <el-button @click="addChildMenu()" type="warning" round :disabled="!form.id">添加子级
</el-button> </el-button>
<!-- <el-button @click="addSameLevelMenu()" type="warning" round>添加同级</el-button>-->
<el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单 <el-button @click="deleteMenu()" type="danger" round :disabled="!form.id">删除菜单
</el-button> </el-button>
</div> </div>
@@ -98,7 +181,7 @@
<menuButton :select-menu="form" /> <menuButton :select-menu="form" />
</el-card> </el-card>
</pane> </pane>
</splitpanes> </splitpanes> -->
</fs-page> </fs-page>
</template> </template>
@@ -383,17 +466,41 @@ onActivated(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.el-row { .s-el-row {
height: 100%; height: 100%;
overflow: hidden;
.el-col { .el-col {
height: 100%; height: 100%;
padding: 10px 0;
box-sizing: border-box;
} }
} }
.menu-box {
height: 100%;
padding: 10px;
background-color: #fff;
overflow-y: auto;
box-sizing: border-box;
}
.el-card { .menu-left-box {
height: 100%; border-radius: 0 8px 8px 0;
} }
.menu-center-box {
border-radius: 8px;
margin: 0 10px;
}
.menu-right-box {
border-radius: 8px 0 0 8px;
}
.menus-btns {
padding-bottom: 10px;
box-sizing: border-box;
}
.font-normal { .font-normal {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
} }