refine css

src/layout/Layout.vue

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

src/layout/components/AppMain.vue

@@ -32,7 +32,7 @@ export default {
 }
 
 .fixed-header+.app-main {
-  margin-top: 50px;
+  padding-top: 50px;
 }
 
 .hasTagsView {
@@ -42,7 +42,7 @@ export default {
   }
 
   .fixed-header+.app-main {
-    margin-top: 80px;
+    padding-top: 80px;
   }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-scrollbar wrap-class="scrollbar-wrapper">
+  <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
+    <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="$route.path"
         :collapse="isCollapse"
@@ -13,6 +14,7 @@
         <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;
         }