refactor:refine sidebar css

src/components/ScrollBar/index.vue

@@ -41,14 +41,16 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+@import '../../styles/variables.scss';
+
 .scroll-container {
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: #545c64;
+  background-color: $menuBg;
   .scroll-wrapper {
     position: absolute;
-     width: 100%;
+     width: 100%!important;
   }
 }
 </style>

src/styles/sidebar.scss

+@import './variables.scss';
+
 #app {
   // 主体区域
   .main-container {
@@ -61,7 +63,7 @@
           text-align: left;
           text-indent: 20px;
           top: 0px;
-          background-color: #2B2C2D!important;
+          background-color: $subMenuBg!important;
           opacity: 1;
         }
       }
@@ -89,9 +91,12 @@
   .nest-menu .el-submenu>.el-submenu__title,
   .el-submenu .el-menu-item {
     min-width: 180px!important;
-    background-color: #2B2C2D!important;
+    background-color: $subMenuBg!important;
     &:hover {
-      background-color: rgb(67, 74, 80)!important;
+      background-color: $menuHover!important;
     }
   }
+  .el-menu--collapse .el-menu .el-submenu{
+    min-width: 180px!important;
+  }
 }

src/styles/variables.scss

@@ -6,3 +6,8 @@ $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
 $panGreen: #30B08F;
+
+//sidebar
+$menuBg:#304156;
+$subMenuBg:#1f2d3d;
+$menuHover:#001528;

src/views/layout/components/Sidebar/index.vue

 <template>
   <scroll-bar>
-    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#545c64" text-color="#fff"
-      active-text-color="#ffd04b">
+    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
       <sidebar-item :routes='permission_routers'></sidebar-item>
     </el-menu>
   </scroll-bar>