From 3a113693a8e5faf9667fa22468aee8bd34302e04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=8D=E5=81=9A=E7=A0=81=E5=86=9C?= <599854767@qq.com>
Date: Sun, 15 May 2022 20:16:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/element-ui.scss       | 61 ++++---------------------
 src/assets/styles/sidebar.scss          | 30 ++----------
 src/assets/styles/variables.module.scss |  3 +-
 src/layout/components/Navbar.vue        | 12 ++---
 src/layout/components/Sidebar/index.vue | 38 ++-------------
 5 files changed, 28 insertions(+), 116 deletions(-)

diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index e75a925..54a6a00 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -45,51 +45,10 @@
     }
   }
 }
-
-// to fixed https://github.com/ElemeFE/element/issues/2461
-// .el-dialog {
-//   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;
-// }
+// fix 2.2.0 版本label标签不居中
+.el-form-item--small .el-form-item__label {
+  line-height: 32px !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){
-		margin-top: 0 !important;
-	}
-	.el-drawer{
-		width: 85% !important;
-	}
+  .el-dialog:not(.is-fullscreen) {
+    margin-top: 0 !important;
+  }
+  .el-drawer {
+    width: 85% !important;
+  }
 }
 
 /** 表格更多操作下拉样式 */
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 99ef3b0..fff1a07 100644
--- a/src/assets/styles/sidebar.scss
+++ b/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;
-    }
   }
 }
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 797b330..05a75b9 100644
--- a/src/assets/styles/variables.module.scss
+++ b/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'] {
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 8aea750..e10be75 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -94,12 +94,12 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-.el-menu {
-  // display: inline-table;
-  .el-menu-item {
-    vertical-align: center;
-  }
-}
+// .el-menu {
+//   // display: inline-table;
+//   .el-menu-item {
+//     vertical-align: center;
+//   }
+// }
 .navbar {
   height: 50px;
   overflow: hidden;
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index d24568d..4577c8e 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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;
   }
-
-  a {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
-  }
-
+  // 去掉el-menu边框
   .el-menu {
     border: none;
-    height: 100%;
-    width: 100% !important;
   }
-
-  // menu hover
-  .submenu-title-noDropdown,
-  .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;
-    }
+	
+  .el-sub-menu .el-menu-item {
+    padding-right: 0 !important;
   }
 }
 </style>