twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-11-03 13:44:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 左侧菜单导航样式调整，优化有无logo时pc端和移动端不同的展示方式

Browse Source
This commit is contained in:
xiaoxian521 2023-08-30 12:07:02 +08:00
parent 13979ea6c0
commit 9bb8820025
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/sidebar/vertical.vue
View File

@ -80,7 +80,7 @@ onBeforeUnmount(() => {
<template> <template>
<div <div
v-loading="loading" v-loading="loading"
:class="['sidebar-container', showLogo ? 'has-logo' : '']" :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
> >
<Logo v-if="showLogo" :collapse="isCollapse" /> <Logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar <el-scrollbar

16
src/style/sidebar.scss
View File

@ -96,16 +96,24 @@
right: 0; right: 0;
} }
.el-scrollbar {
height: calc(100% - 44px);
}
&.has-logo { &.has-logo {
.el-scrollbar.pc { .el-scrollbar.pc {
/* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */ /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
height: calc(100% - 92px); height: calc(100% - 92px);
} }
/* logo: 48px */
.el-scrollbar.mobile {
height: calc(100% - 48px);
}
}
&.no-logo {
.el-scrollbar.pc {
/* leftCollapse: 40px、leftCollapse-shadow: 4px */
height: calc(100% - 44px);
}
.el-scrollbar.mobile { .el-scrollbar.mobile {
height: 100%; height: 100%;
} }