1

src/assets/styles/sidebar.scss

@@ -15,8 +15,8 @@
     -webkit-transition: width .28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
-    background-color: $base-menu-background;
-    height: 100%;
+    background: $base-menu-background;
+    height: 100vh;
     position: fixed;
     font-size: 0px;
     top: 0;
@@ -24,6 +24,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    border-radius: 0 24px 0 0;
     -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
     box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
@@ -46,7 +47,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 50px);
+        height: calc(100% - 60px);
       }
     }
 
@@ -64,23 +65,25 @@
       margin-right: 16px;
     }
 
-    .el-menu {
-      border: none;
-      height: 100%;
-      width: 100% !important;
-    }
+         .el-menu {
+       border: none;
+       height: 100%;
+       width: 100% !important;
+       font-size: 15px; // 增加菜单字体大小
+     }
 
-    .el-menu-item, .el-submenu__title {
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-      white-space: nowrap !important;
-    }
+         .el-menu-item, .el-submenu__title {
+       overflow: hidden !important;
+       text-overflow: ellipsis !important;
+       white-space: nowrap !important;
+       font-size: 15px; // 确保菜单项字体大小一致
+     }
 
     // menu hover
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important;
       }
     }
 
@@ -93,7 +96,7 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: rgba(255, 255, 255, 0.1) !important;
       }
     }
 
@@ -202,7 +205,7 @@
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      background-color: rgba(58, 164, 239, 0.1) !important;
     }
   }