01/27 14:23 侧边栏样式优化

1

src/layout/components/Sidebar/SidebarItem.vue

@@ -22,6 +22,7 @@
 
     <el-submenu
       v-else
+      class="submenu"
       ref="subMenu"
       :index="resolvePath(item.path)"
       popper-append-to-body

src/layout/components/Sidebar/index.vue

@@ -3,9 +3,10 @@
     <logo v-if="showLogo"
           :collapse="false" />
     <el-scrollbar wrap-class="scrollbar-wrapper">
+      <!--    -->
       <el-menu :default-active="activeMenu"
                :collapse='false'
-               :background-color="variables.menuBg"
+                :background-color="variables.menuBg"
                :text-color="variables.menuText"
                :unique-opened="true"
                :active-text-color="variables.menuActiveText"
@@ -42,7 +43,7 @@ export default {
       const route = this.$route
       const { meta, path } = route
       // if set path, the sidebar will highlight the path you set
-      // 设置高亮的位置   
+      // 设置高亮的位置
       if (meta.activeMenu) {
         return meta.activeMenu
       }

src/styles/sidebar.scss

@@ -88,14 +88,14 @@
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
-      background-color: $subMenuBg;
+      background-color: $subMenuBg!important;
 
       &:hover {
-        background-color: $subMenuHover;
+        background-color: $subMenuHover!important;
       }
     }
   }
-  .el-menu-item.is-active {
+  .el-submenu .el-menu-item.is-active {
     background-color: $subMenuActiveBg!important;
  }
   .hideSidebar {
@@ -200,7 +200,7 @@
       background-color: $menuHover !important;
     }
     .is-active {
-      background-color: #13817A !important;
+      background-color:$subMenuActiveBg !important;
     }
   }
 

src/styles/variables.scss

@@ -7,7 +7,7 @@ $menuBg:#363D55;
 $menuHover:#13817A;
 
 $subMenuBg:#2C3246;
-$subMenuHover:#2C3246;
+$subMenuHover:#13817A;
 $subMenuActiveBg:#13817A;
 
 $sideBarWidth: 165px;