Переглянути джерело

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

xiaoxian521 1 рік тому
батько
коміт
9bb8820025
2 змінених файлів з 13 додано та 5 видалено
  1. 1 1
      src/layout/components/sidebar/vertical.vue
  2. 12 4
      src/style/sidebar.scss

+ 1 - 1
src/layout/components/sidebar/vertical.vue

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

+ 12 - 4
src/style/sidebar.scss

@@ -96,16 +96,24 @@
       right: 0;
     }
 
-    .el-scrollbar {
-      height: calc(100% - 44px);
-    }
-
     &.has-logo {
       .el-scrollbar.pc {
         /* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
         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 {
         height: 100%;
       }