perf: 优化菜单左侧视图对接

src/layout/components/NavLeft/index.vue

@@ -12,8 +12,10 @@
         />
         <span
           v-show="!isCollapse"
-          style="margin-left: 3px;"
-        >{{ isRouteMeta.title || '' }}</span>
+          style="margin-left: 10px;"
+        >
+          {{ isRouteMeta.title || '' }}
+        </span>
         <span v-show="!isCollapse" class="switch-view">
           <el-popover
             placement="right-start"
@@ -123,6 +125,7 @@ export default {
 </script>
 <style lang="scss" scoped>
   @import "~@/styles/variables.scss";
+
   .nav-header {
     overflow: hidden;
     background-color: var(--color-primary);
@@ -143,15 +146,18 @@ export default {
     white-space: nowrap;
     cursor: pointer;
     background-color: var(--menu-bg);
+
     .switch-view {
       position: absolute;
       top: 50%;
       right: 0;
       transform: translateY(-50%);
       z-index: 1;
+
       &:hover {
         color: var(--color-primary);
       }
+
       .icon {
         &:hover {
           color: var(--color-primary);
@@ -194,20 +200,25 @@ export default {
       background-color: $subMenuHover;
     }
   }
+
   .active-mobile {
     display: none;
-    &>>> .organization {
+
+    & > > > .organization {
       padding-left: 8px;
       background: transparent;
       color: #fff;
     }
-    &>>> .menu-main {
+
+    & > > > .menu-main {
       margin-left: -10px;
     }
-    &>>> .title-label {
+
+    & > > > .title-label {
       color: white !important;
     }
   }
+
   @media screen and (max-width: 992px) {
     .active-mobile {
       display: block;

src/styles/menu.scss

@@ -1,8 +1,10 @@
 @import "./variables";
+
 .left-menu.el-menu {
   .el-menu--inline {
     background-color: $subMenuBg;
   }
+
   .el-menu-item, .el-submenu {
     font-weight: 600;
   }
@@ -13,9 +15,11 @@
 
     .el-submenu__title {
       color: $menuText;
+
       &:hover {
         color: $menuActiveText;
       }
+
       i {
         color: $menuActiveText;
       }
@@ -30,10 +34,10 @@
     &.submenu-title-noDropdown {
       list-style: none;
     }
-    &.is-active{
+
+    &.is-active {
       color: $subMenuActiveText;
-      background-color: $subMenuHover!important;
-      font-weight: 600;
+      background-color: $subMenuHover !important;
       list-style-type: disc;
     }
 
@@ -42,14 +46,15 @@
       color: $subMenuActiveText;
       list-style-type: disc;
     }
+
     i {
       color: $menuText;
     }
   }
 
-   i.fa {
-     margin-right: 10px;
-     width: 13px;
+  i.fa {
+    margin-right: 10px;
+    width: 13px;
   }
 
   .is-active i.fa {
@@ -98,14 +103,16 @@
   }
 
   .el-submenu-sidebar .el-menu-item {
-    background-color: $subMenuBg ;
+    background-color: $subMenuBg;
   }
 
   .el-submenu.is-opened {
     background-color: $subMenuBg;
+
     .el-submenu__title {
-      background-color: $subMenuBg!important;
+      background-color: $subMenuBg !important;
     }
+
     & .nest-menu {
       background-color: $subMenuBg;
     }