优化ui

src/assets/styles/element-ui.scss

@@ -45,51 +45,10 @@
     }
   }
 }
-
+// fix 2.2.0 版本label标签不居中
-// to fixed https://github.com/ElemeFE/element/issues/2461
+.el-form-item--small .el-form-item__label {
-// .el-dialog {
+  line-height: 32px !important;
-//   transform: none;
+}
-//   left: 0;
-//   position: relative;
-//   margin: 0 auto;
-// }
-
-// refine element ui upload
-// .upload-container {
-//   .el-upload {
-//     width: 100%;
-
-//     .el-upload-dragger {
-//       width: 100%;
-//       height: 200px;
-//     }
-//   }
-// }
-
-// dropdown
-// .el-dropdown-menu {
-//   a {
-//     display: block
-//   }
-// }
-
-// fix date-picker ui bug in filter-item
-// .el-range-editor.el-input__inner {
-//   display: inline-flex !important;
-// }
-
-// to fix el-date-picker css style
-// .el-range-separator {
-//   box-sizing: content-box;
-// }
-
-// .el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
-//   display: none;
-// }
-
-// .el-dropdown .el-dropdown-link {
-//   color: var(--el-color-primary) !important;
-// }
 
 // element ui 移动端组件适配
 .el-icon {
@@ -122,12 +81,12 @@
     --el-dialog-width: 100% !important;
     --el-dialog-margin-top: 0 !important;
   }
-	.el-dialog:not(.is-fullscreen){
+  .el-dialog:not(.is-fullscreen) {
-		margin-top: 0 !important;
+    margin-top: 0 !important;
-	}
+  }
-	.el-drawer{
+  .el-drawer {
-		width: 85% !important;
+    width: 85% !important;
-	}
+  }
 }
 
 /** 表格更多操作下拉样式 */

src/assets/styles/sidebar.scss

@@ -10,13 +10,13 @@
   .openSidebar .layout-sidebar__container .svg-icon {
     margin-right: 10px;
   }
-  .hideSidebar {
-    .layout-sidebar__container {
-      width: 54px !important;
-    }
 
+  .openSidebar .scrollbar-wrapper:not(.el-menu--collapse) {
+    width: var(--base-sidebar-width);
+  }
+  .hideSidebar {
     .main-container {
-      margin-left: 54px;
+      margin-left: var(--base-sidebar-left);
     }
 
     .submenu-title-noDropdown {
@@ -58,10 +58,6 @@
     }
   }
 
-  .el-menu--collapse .el-menu .el-sub-menu {
-    min-width: var(--base-sidebar-width);
-  }
-
   // mobile responsive
   .mobile {
     .main-container {
@@ -70,7 +66,6 @@
 
     .layout-sidebar__container {
       transition: transform 0.28s;
-      width: var(--base-sidebar-width) !important;
     }
 
     &.hideSidebar {
@@ -80,12 +75,6 @@
     }
   }
 
-  // .withoutAnimation {
-  //   .main-container,
-  //   .layout-sidebar__container {
-  //     transition: none;
-  //   }
-  // }
 }
 
 // when menu collapsed
@@ -95,17 +84,8 @@
     max-height: 100vh;
     overflow-y: auto;
 
-    &::-webkit-scrollbar-track-piece {
-      background: #d3dce6;
-    }
-
     &::-webkit-scrollbar {
       width: 6px;
     }
-
-    &::-webkit-scrollbar-thumb {
-      background: #99a9bf;
-      border-radius: 20px;
-    }
   }
 }

src/assets/styles/variables.module.scss

@@ -14,7 +14,8 @@ $panGreen: #30b08f;
   --base-logo-title-color: #ffffff;
   --base-topBar-background: #ffffff;
   --base-topBar-color: #5a5e66;
-  --base-sidebar-width: 210px;
+  --base-sidebar-width: 200px;
+	--base-sidebar-left: 64px;
 }
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {

src/layout/components/Navbar.vue

@@ -94,12 +94,12 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-.el-menu {
+// .el-menu {
-  // display: inline-table;
+//   // display: inline-table;
-  .el-menu-item {
+//   .el-menu-item {
-    vertical-align: center;
+//     vertical-align: center;
-  }
+//   }
-}
+// }
 .navbar {
   height: 50px;
   overflow: hidden;

src/layout/components/Sidebar/index.vue

@@ -10,8 +10,7 @@
         :active-text-color="theme"
         :collapse-transition="false"
         background-color="transparent"
-        mode="vertical"
+        mode="vertical">
-      >
         <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route" :base-path="route.path" />
       </el-menu>
     </el-scrollbar>
@@ -47,7 +46,6 @@ const activeMenu = computed(() => {
 
 .layout-sidebar__container {
   transition: width 0.28s;
-  width: var(--base-sidebar-width);
   background-color: var(--base-menu-background);
   height: 100%;
   position: fixed;
@@ -70,39 +68,13 @@ const activeMenu = computed(() => {
   .el-scrollbar__bar.is-vertical {
     right: 0px;
   }
-
+  // 去掉el-menu边框
-  a {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-  }
-
   .el-menu {
     border: none;
-    height: 100%;
-    width: 100% !important;
   }
-
+	
-  // menu hover
+  .el-sub-menu .el-menu-item {
-  .submenu-title-noDropdown,
+    padding-right: 0 !important;
-  .el-sub-menu__title {
-    &:hover {
-      // background-color: $menuHover !important;
-    }
-  }
-
-  .is-active > .el-sub-menu__title {
-    // color: $subMenuActiveText !important;
-  }
-
-  & .nest-menu .el-sub-menu > .el-sub-menu__title,
-  & .el-sub-menu .el-menu-item {
-    min-width: var(--base-sidebar-width) !important;
-    // background-color: $base-menu-background !important;
-
-    &:hover {
-      // background-color: $base-sub-menu-hover !important;
-    }
   }
 }
 </style>