style:refine sidebar css

src/styles/sidebar.scss

@@ -4,17 +4,7 @@
     min-height: 100%;
     transition: margin-left 0.28s;
     margin-left: 180px;
-  }
+  } // 侧边栏
-  // 侧边栏
-  .hideSidebar {
-    .sidebar-container {
-      width: 36px!important;
-      overflow: inherit;
-    }
-    .main-container {
-      margin-left: 36px;
-    }
-  }
   .sidebar-container {
     transition: width 0.28s;
     width: 180px!important;
@@ -28,72 +18,78 @@
     &::-webkit-scrollbar {
       display: none
     }
-  }
+    a {
-  .sidebar-container>.el-menu {
+      display: inline-block;
-    width: 100%!important;
+      width: 100%;
-    min-height: 100%;
-  }
-  .sidebar-container .svg-icon {
-    margin-right: 16px;
-  }
-  .hideSidebar .el-submenu>.el-submenu__title,
-  .hideSidebar .submenu-title-noDropdown {
-    padding-left: 10px!important;
-  }
-  .hideSidebar .submenu-title-noDropdown span,
-  .hideSidebar .el-submenu>.el-submenu__title>span {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    visibility: hidden;
-    display: inline-block;
-  }
-  .hideSidebar .nest-menu .el-submenu__title {
-    text-align: initial!important;
-    padding-left: 20px!important;
-    span {
-      height: auto;
-      width: auto;
-      visibility: visible;
-      display: inline;
     }
-    .el-submenu__icon-arrow {
+    .svg-icon {
-      display: block!important;
+      margin-right: 16px;
+    }
+    .el-menu {
+      border: none;
     }
   }
-  .hideSidebar .menu-wrapper>.el-menu-item,
+  .hideSidebar {
-  .hideSidebar .submenu-title-noDropdown,
+    .sidebar-container {
-  .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
+      width: 36px!important;
-    text-align: center;
+      overflow: inherit;
-  }
-  .hideSidebar .el-menu-item .el-submenu__icon-arrow,
-  .hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-    display: none;
-  }
-  .hideSidebar .submenu-title-noDropdown {
-    position: relative;
-    span {
-      transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
-      opacity: 0;
     }
-    &:hover {
+    .main-container {
+      margin-left: 36px;
+    }
+  }
+  .hideSidebar {
+    .submenu-title-noDropdown {
+      padding-left: 10px!important;
+      position: relative;
       span {
-        display: block;
+        height: 0;
-        border-radius: 3px;
+        width: 0;
-        z-index: 1002;
+        overflow: hidden;
-        width: 140px;
+        visibility: hidden;
-        height: 56px;
+        transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
-        visibility: visible;
+        opacity: 0;
-        position: absolute;
+        display: inline-block;
-        right: -145px;
+      }
-        text-align: left;
+      &:hover {
-        text-indent: 20px;
+        span {
-        top: 0px;
+          display: block;
-        background-color: #2B2C2D!important;
+          border-radius: 3px;
-        opacity: 1;
+          z-index: 1002;
+          width: 140px;
+          height: 56px;
+          visibility: visible;
+          position: absolute;
+          right: -145px;
+          text-align: left;
+          text-indent: 20px;
+          top: 0px;
+          background-color: #2B2C2D!important;
+          opacity: 1;
+        }
+      }
+    }
+    .el-submenu {
+      &>.el-submenu__title {
+        padding-left: 10px!important;
+        &>span {
+          display: none;
+        }
+        .el-submenu__icon-arrow {
+          display: none;
+        }
+      }
+      .nest-menu {
+        .el-submenu__icon-arrow {
+          display: block!important;
+        }
+        span {
+          display: inline-block!important;
+        }
       }
     }
   }
+  .nest-menu .el-submenu>.el-submenu__title,
   .el-submenu .el-menu-item {
     min-width: 180px!important;
     background-color: #2B2C2D!important;

src/views/layout/components/Sidebar.vue

@@ -4,8 +4,6 @@
   </el-menu>
 </template>
 
-
-
 <script>
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'

src/views/layout/components/SidebarItem.vue

@@ -5,26 +5,25 @@
       <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key='item.children[0].name'>
         <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
           <svg-icon v-if='item.children[0].meta&&item.children[0].meta.icon' :icon-class="item.children[0].meta.icon"></svg-icon>
-          <span>{{item.children[0].meta?generateTitle(item.children[0].meta.title):'no title'}}</span>
+          <span v-if='item.children[0].meta&&item.children[0].meta.title'>{{generateTitle(item.children[0].meta.title)}}</span>
         </el-menu-item>
       </router-link>
 
-      <el-submenu :index="item.name" v-if="item.children&&item.children.length>1&&!item.hidden" :key='item.name'>
+      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name" :key='item.name'>
         <template slot="title">
           <svg-icon v-if='item.meta&&item.meta.icon' :icon-class="item.meta.icon"></svg-icon>
-          <span>{{item.meta?generateTitle(item.meta.title):'no title'}}</span>
+          <span v-if='item.meta&&item.meta.title'>{{generateTitle(item.meta.title)}}</span>
         </template>
-        <template v-for="child in item.children" v-if='!child.hidden'>
 
-          <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'> </sidebar-item>
+        <template v-if='!child.hidden' v-for="child in item.children">
+          <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]' :key='child.path'></sidebar-item>
 
           <router-link v-else :to="item.path+'/'+child.path" :key='child.name'>
             <el-menu-item :index="item.path+'/'+child.path">
               <svg-icon v-if='child.meta&&child.meta.icon' :icon-class="child.meta.icon"></svg-icon>
-              <span v-if='child.meta' >{{generateTitle(child.meta.title)}}</span>
+              <span v-if='child.meta&&child.meta.title'>{{generateTitle(child.meta.title)}}</span>
             </el-menu-item>
           </router-link>
-
         </template>
       </el-submenu>