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,53 +18,38 @@
     &::-webkit-scrollbar {
       display: none
     }
+    a {
+      display: inline-block;
+      width: 100%;
     }
-  .sidebar-container>.el-menu {
+    .svg-icon {
-    width: 100%!important;
-    min-height: 100%;
-  }
-  .sidebar-container .svg-icon {
       margin-right: 16px;
     }
-  .hideSidebar .el-submenu>.el-submenu__title,
+    .el-menu {
-  .hideSidebar .submenu-title-noDropdown {
+      border: none;
-    padding-left: 10px!important;
     }
-  .hideSidebar .submenu-title-noDropdown span,
+  }
-  .hideSidebar .el-submenu>.el-submenu__title>span {
+  .hideSidebar {
+    .sidebar-container {
+      width: 36px!important;
+      overflow: inherit;
+    }
+    .main-container {
+      margin-left: 36px;
+    }
+  }
+  .hideSidebar {
+    .submenu-title-noDropdown {
+      padding-left: 10px!important;
+      position: relative;
+      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 {
-      display: block!important;
-    }
-  }
-  .hideSidebar .menu-wrapper>.el-menu-item,
-  .hideSidebar .submenu-title-noDropdown,
-  .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
-    text-align: center;
-  }
-  .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;
+        display: inline-block;
       }
       &:hover {
         span {
@@ -94,6 +69,27 @@
         }
       }
     }
+    .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>