refine css

src/layout/Layout.vue

@@ -66,11 +66,13 @@ export default {
     position: relative;
     height: 100%;
     width: 100%;
-    &.mobile.openSidebar{
+
+    &.mobile.openSidebar {
       position: fixed;
       top: 0;
     }
   }
+
   .drawer-bg {
     background: #000;
     opacity: 0.3;
@@ -80,18 +82,21 @@ export default {
     position: absolute;
     z-index: 999;
   }
-  .fixed-header{
+
+  .fixed-header {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 9;
     width: calc(100% - #{$sideBarWidth});
-     transition: width 0.28s;
+    transition: width 0.28s;
   }
-  .hideSidebar .fixed-header{
-     width: calc(100% - 54px)
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
   }
-  .mobile .fixed-header{
+
+  .mobile .fixed-header {
     width: 100%;
   }
 </style>

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ export default {
 
 <style rel="stylesheet/scss" lang="scss" scoped>
 .app-main {
-  /*50= navbar  50  */
+  /* 50= navbar  50  */
   min-height: calc(100vh - 50px);
   width: 100%;
   position: relative;
@@ -32,17 +32,17 @@ export default {
 }
 
 .fixed-header+.app-main {
-  margin-top: 50px;
+  padding-top: 50px;
 }
 
 .hasTagsView {
   .app-main {
-    /*84 = navbar + tags-view = 50 + 34 */
+    /* 84 = navbar + tags-view = 50 + 34 */
     min-height: calc(100vh - 84px);
   }
 
   .fixed-header+.app-main {
-    margin-top: 80px;
+    padding-top: 80px;
   }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,18 +1,20 @@
 <template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
+  <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-menu
-      :default-active="$route.path"
-      :collapse="isCollapse"
-      :background-color="variables.menuBg"
-      :text-color="variables.menuText"
-      :active-text-color="variables.menuActiveText"
-      :collapse-transition="false"
-      mode="vertical"
-    >
-      <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
-    </el-menu>
-  </el-scrollbar>
+    <el-scrollbar wrap-class="scrollbar-wrapper">
+      <el-menu
+        :default-active="$route.path"
+        :collapse="isCollapse"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :collapse-transition="false"
+        mode="vertical"
+      >
+        <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
+      </el-menu>
+    </el-scrollbar>
+  </div>
 </template>
 
 <script>

src/styles/sidebar.scss

@@ -38,6 +38,16 @@
       right: 0px;
     }
 
+    .el-scrollbar {
+      height: 100%;
+    }
+
+    &.has-logo {
+      .el-scrollbar {
+        height: calc(100% - 50px);
+      }
+    }
+
     .is-horizontal {
       display: none;
     }
@@ -100,6 +110,7 @@
 
       .el-tooltip {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }
@@ -111,6 +122,7 @@
 
       &>.el-submenu__title {
         padding: 0 !important;
+
         .svg-icon {
           margin-left: 20px;
         }