优化ui布局

src/assets/styles/element-ui.scss

@@ -28,13 +28,6 @@
   }
 }
 
-.fixed-width {
-  .el-button--mini {
-    padding: 7px 10px;
-    width: 60px;
-  }
-}
-
 .status-col {
   .cell {
     padding: 0 10px;
@@ -55,6 +48,14 @@
   vertical-align: middle;
 }
 
+.el-header {
+  --el-header-padding: 0 0px !important;
+  --el-header-height: 50px !important;
+}
+// el 2.2.0 text button
+.el-button.is-text {
+  color: var(--el-color-primary) !important;
+}
 @media screen and (max-width: 500px) {
   .el-message {
     min-width: 300px !important;

src/assets/styles/index.scss

@@ -7,10 +7,6 @@
 @import './waves.scss';
 @import './black.scss';
 
-label {
-  font-weight: 700;
-}
-
 html,
 body,
 #app {
@@ -97,22 +93,18 @@ div:focus {
   }
 }
 
-//main-container全局样式
-.app-container {
-  padding: 20px;
-}
-
 .text-center {
   text-align: center;
 }
 
 .link-type,
 .link-type:focus {
-  color: #337ab7;
+  color: var(--el-color-primary);
   cursor: pointer;
 
   &:hover {
-    color: rgb(32, 160, 255);
+    // color: rgb(32, 160, 255);
+		opacity: 0.3;
   }
 }
 
@@ -270,3 +262,8 @@ div:focus {
 .table-td-thumb {
   width: 56px;
 }
+
+.flex-center {
+  flex-direction: column;
+  overflow: hidden;
+}

src/assets/styles/sidebar.scss

@@ -1,33 +1,45 @@
 #app {
-  .main-container {
-    min-height: 100%;
-    transition: margin-left 0.28s;
-    margin-left: var(--base-sidebar-width);
+  .layout-sidebar__container {
+    transition: width 0.28s ease;
+    background-color: var(--base-menu-background);
+    height: 100%;
     position: relative;
+    font-size: 0px;
+    z-index: 1001;
+    display: flex;
+    flex-direction: column;
+    -webkit-box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
+    box-shadow: 2px 0 14px rgb(0 21 41 / 10%);
+    .scrollbar-wrapper {
+      overflow-x: hidden;
+    }
+
+    .el-scrollbar {
+      flex: 1;
+    }
+
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+    // 去掉el-menu边框
+    .el-menu {
+      border: none;
+    }
   }
 
   // 展开sidebar状态设置svg-icon边距
-  .openSidebar .layout-sidebar__container .svg-icon {
-    margin-right: 10px;
+  .openSidebar {
+    .layout-sidebar__container .svg-icon {
+      margin-right: 10px;
+    }
   }
 
-  .openSidebar .scrollbar-wrapper:not(.el-menu--collapse) {
-    width: var(--base-sidebar-width);
-  }
+  // 隐藏侧边栏样式
   .hideSidebar {
-    .main-container {
-      margin-left: var(--base-sidebar-left);
+    .el-aside {
+      --el-aside-width: 60px;
     }
-
-    .submenu-title-noDropdown {
-      padding: 0 !important;
-      position: relative;
-
-      .el-tooltip {
-        padding: 0 !important;
-      }
-    }
-
+    // 隐藏箭头
     .el-sub-menu {
       overflow: hidden;
 
@@ -47,7 +59,7 @@
       .el-sub-menu {
         & > .el-sub-menu__title {
           & > span {
-            height: 0;
+            height: 3000px;
             width: 0;
             overflow: hidden;
             visibility: hidden;
@@ -66,6 +78,7 @@
 
     .layout-sidebar__container {
       transition: transform 0.28s;
+			position: fixed;
     }
 
     &.hideSidebar {
@@ -74,7 +87,6 @@
       }
     }
   }
-
 }
 
 // when menu collapsed

src/assets/styles/variables.module.scss

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