侧边栏样式整理

vue/src/asset/style/element-ui.scss

@@ -93,6 +93,38 @@
     color: $--color-primary;
 }
 
+.el-menu {
+    border: none;
+    height: 100%;
+    width: 100%;
+
+    &::-webkit-scrollbar {
+        width: 0;
+    }
+
+    .icon {
+        margin-right: 16px;
+    }
+
+    //子级菜单激活时，父级同样高亮
+    .el-menu-item.is-active,
+    .is-active > .el-submenu__title {
+        color: $--color-primary !important;
+    }
+
+    //箭头图标与字体同色
+    .el-submenu__title i {
+        color: inherit;
+    }
+
+    //弹出菜单
+    &.el-menu--popup {
+        max-height: 88vh;
+        margin-bottom: 0.5vh;
+        overflow-y: overlay;
+    }
+}
+
 .el-message {
     @include deep-shadow;
     @include max-mobile-width;

vue/src/asset/style/index.scss

@@ -1,10 +1,10 @@
-@import "variables";
+@import "./variables";
 @import "~element-ui/packages/theme-chalk/src/index";
-@import 'display';
-@import "transition";
-@import "element-ui";
 @import "~@ele/style/index.scss";
-@import "nprogress";
+@import "./element-ui";
+@import './display';
+@import "./transition";
+@import "./nprogress";
 
 body {
     height: 100%;

vue/src/asset/style/variables.scss

@@ -5,6 +5,12 @@ $--color-warning: #FF5722;
 $--color-danger: #F44336;
 $--color-info: #009688;
 
+//覆盖el-menu的hover背景颜色
+$--menu-item-hover-fill: none;
+
+//引入element的scss时需要覆盖字体路径
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
 @mixin clearfix {
     &::after {
         visibility: hidden;
@@ -26,19 +32,19 @@ $--color-info: #009688;
     }
 }
 
-//el-sub-menu的背景色
+//侧边菜单icon的大小
-$sub-menu-background: #1f2d3d;
+$aside-icon-size: 16px;
-//覆盖el-menu的背景色
+//侧边栏菜单的背景色
-$--menu-background-color: #304156;
+$aside-menu-background: #304156;
-//覆盖el-menu的文字颜色
+//侧边栏子菜单的背景色
-$--menu-item-font-color: hsla(0, 0%, 99.6%, .65);
+$aside-sub-menu-background: #1f2d3d;
-//el-menu的文字hover颜色
+//侧边栏菜单文字的颜色
-$--menu-item-hover-color: #fefefe;
+$aside-menu-item-color: hsla(0, 0%, 99.6%, .65);
-//覆盖el-menu的文字hover背景颜色
+//侧边栏菜单文字的hover颜色
-$--menu-item-hover-fill: none;
+$aside-menu-item-hover-color: #fefefe;
 
 //侧边栏宽度
-$side-bar-width: 208px;
+$aside-width: 208px;
 //头部导航栏高度
 $nav-height: 50px;
 //头部多页签栏高度
@@ -47,9 +53,6 @@ $tags-view-height: 40px;
 //路由页面的margin
 $page-view-margin: 15px;
 
-//引入element的scss时需要覆盖字体路径
-$--font-path: '~element-ui/lib/theme-chalk/fonts';
-
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {

vue/src/component/ContextMenu/index.vue

@@ -67,7 +67,7 @@ export default {
 
 .contextmenu {
     margin: 0;
-    background: $--menu-background-color;
+    background: $aside-menu-background;
     z-index: 10;
     position: absolute;
     list-style-type: none;

vue/src/layout/component/Aside/index.vue

@@ -57,6 +57,7 @@ export default {
         asideClass() {
             return {
                 'aside': true,
+                'el-menu--vertical': true,
                 'mobile': this.device === 'mobile',
                 'collapse': this.collapse,
                 'hide': this.hideSidebar

vue/src/layout/component/Aside/style.scss

@@ -1,12 +1,11 @@
 @import "~@/asset/style/variables.scss";
 
-$iconSize: 16px;
+//侧边栏
-
 .aside {
     display: flex;
     flex-direction: column;
-    width: $side-bar-width;
+    width: $aside-width;
-    background-color: $--menu-background-color;
+    background-color: $aside-menu-background;
     font-size: 0;
     flex-shrink: 0;
     height: 100vh;
@@ -19,20 +18,20 @@ $iconSize: 16px;
         position: fixed;
     }
 
-    //折叠设置
+    //折叠状态
     &.collapse {
-        width: $iconSize + 20px * 2;
+        width: $aside-icon-size + 20px * 2;
 
         .sidebar-item-content {
             display: none;
         }
     }
 
-    //自动隐藏
+    //隐藏状态
     &.hide {
         width: 0;
         pointer-events: none;
-        transform: translateX(-$side-bar-width);
+        transform: translateX(-$aside-width);
     }
 
     .sidebar-logo-container {
@@ -81,37 +80,25 @@ $iconSize: 16px;
     }
 }
 
-.el-menu {
+//垂直菜单
-    border: none;
+.el-menu--vertical .el-menu {
-    height: 100%;
+    background-color: $aside-menu-background;
-    width: 100%;
     overflow-y: auto;
 
-    &::-webkit-scrollbar {
+    //菜单的文字以及hover颜色
-        width: 0;
+    .el-menu-item,
-    }
+    .el-submenu__title {
+        color: $aside-menu-item-color;
 
-    .icon {
+        &:hover {
-        margin-right: 16px;
+            color: $aside-menu-item-hover-color;
-    }
+        }
-
-    //菜单hover
-    .el-menu-item:hover,
-    .el-submenu__title:hover {
-        color: $--menu-item-hover-color;
-
-    }
-
-    //子级菜单激活时，父级同样高亮
-    .el-menu-item.is-active,
-    .is-active > .el-submenu__title {
-        color: $--color-primary !important;
     }
 
     //子级菜单的背景颜色
     &.el-menu--inline,
     .el-submenu .el-submenu > .el-submenu__title {
-        background-color: $sub-menu-background;
+        background-color: $aside-sub-menu-background;
     }
 
     //子级菜单内阴影
@@ -119,26 +106,16 @@ $iconSize: 16px;
         box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
     }
 
-    //箭头图标与字体同色
+    //设置了显示弹出菜单的父级
-    .el-submenu__title i {
+    &.el-menu--popup .popover-menu__title {
-        color: inherit;
+        cursor: auto;
-    }
+        color: $aside-menu-item-hover-color;
-
+        text-align: center;
-    //折叠时的弹出菜单
+        border-bottom: 1px solid $aside-sub-menu-background;
-    &.el-menu--popup {
-        max-height: 88vh;
-        margin-bottom: 0.5vh;
-        overflow-y: overlay;
-
-        .popover-menu__title {
-            cursor: auto;
-            color: $--menu-item-hover-color;
-            text-align: center;
-            border-bottom: 1px solid $sub-menu-background;
-        }
     }
 }
 
+//移动端侧边栏展开时的遮罩
 .aside-hidden-mask {
     background: rgba(0, 0, 0, .5);
     backdrop-filter: blur(10px);