tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加导航栏布局设置

Browse Source 
Former-commit-id: 4de6962c069a780427b9d97344eb2e03de78d018
This commit is contained in:
郝先瑞
2022-06-16 00:49:43 +08:00
parent 321b584f9f
commit 2c7267b655
2 changed files with 83 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/layout/components/Settings/index.vue
View File

@@ -22,6 +22,29 @@
<span>侧边栏 Logo</span>
<el-switch v-model="sidebarLogo" class="drawer-switch" />
</div>
<el-divider>导航栏模式</el-divider>
<ul class="navbar">
<el-tooltip class="item" content="左侧模式" placement="bottom">
<li>
<div />
<div />
</li>
</el-tooltip>
<el-tooltip class="item" content="左侧模式" placement="bottom">
<li>
<div />
<div />
</li>
</el-tooltip>
<el-tooltip class="item" content="左侧模式" placement="bottom">
<li>
<div />
<div />
</li>
</el-tooltip>
</ul>
</div>
</template>
@@ -100,4 +123,44 @@ watch(
bottom: 0;
}
}
.navbar {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: 50px;
padding: 0;
li {
width: 18%;
height: 45px;
background: #f0f2f5;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 4px;
box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
&:nth-child(1) {
div {
&:nth-child(1) {
width: 30%;
height: 100%;
background: #1b2a47;
}
&:nth-child(2) {
width: 70%;
height: 30%;
top: 0;
right: 0;
background: #fff;
box-shadow: 0 0 1px #888;
position: absolute;
}
}
}
}
}
</style>