From 10a6a98c217fc09aee8174d6444af80ca762b977 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 14:43:59 +0800
Subject: [PATCH] 1.样式修改
---
src/assets/styles/sidebar.scss | 119 ++++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 76 insertions(+), 43 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 5dd7d5e..be7b7a7 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -65,16 +65,16 @@
margin-right: 16px;
}
- .el-menu {
- border: none;
- height: 100%;
- width: 100% !important;
- padding: 10px 8px 18px;
- border-radius: 0 28px 28px 0;
- background: var(--menu-surface);
- backdrop-filter: blur(18px);
- box-shadow: var(--shadow-sm);
- }
+ .el-menu {
+ border: none;
+ height: 100%;
+ width: 100% !important;
+ padding: 10px 8px 18px;
+ border-radius: 22px;
+ background: var(--menu-surface);
+ backdrop-filter: blur(18px);
+ box-shadow: var(--shadow-sm);
+ }
.el-menu-item,
.menu-title {
@@ -87,43 +87,51 @@
display: inline-block !important;
}
- // menu hover
+ // menu hover
.submenu-title-noDropdown,
.el-sub-menu__title {
&:hover {
background-color: var(--menu-hover) !important;
+ border-radius: 14px;
}
- }
+ }
& .theme-light .is-active > .el-sub-menu__title {
color: var(--current-color) !important;
}
- & .nest-menu .el-sub-menu > .el-sub-menu__title,
- & .el-sub-menu .el-menu-item {
- min-width: $base-sidebar-width !important;
+ & .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .el-sub-menu .el-menu-item {
+ min-width: 0 !important;
+ margin: 0 12px 6px;
+ width: calc(100% - 24px);
+ padding-left: 8px !important;
+ padding-right: 8px !important;
+ box-sizing: border-box;
+
+ &:hover {
+ background-color: var(--menu-hover) !important;
+ }
+ &.is-active {
+ background-color: var(--menu-active-bg) !important;
+ border-radius: 14px;
+ }
+ }
- &:hover {
- background-color: var(--menu-hover) !important;
- }
- &.is-active {
- background-color: var(--menu-active-bg) !important;
- }
- }
-
- & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
- & .theme-light .el-sub-menu .el-menu-item {
- //background-color: transparent;
-
- &:hover {
- background-color: var(--menu-hover) !important;
- }
- }
- }
+ & .theme-light .nest-menu .el-sub-menu > .el-sub-menu__title,
+ & .theme-light .el-sub-menu .el-menu-item {
+ //background-color: transparent;
+
+ &:hover {
+ background-color: var(--menu-hover) !important;
+ border-radius: 14px;
+ }
+ }
+ }
.hideSidebar {
.sidebar-container {
width: 68px !important;
- padding-left: 12px;
+ padding-left: 0;
padding-right: 0;
}
@@ -137,6 +145,10 @@
display: flex !important;
align-items: center;
justify-content: center;
+
+ .svg-icon {
+ margin-right: 0;
+ }
.el-tooltip {
padding: 0 !important;
@@ -175,15 +187,24 @@
.svg-icon {
margin-left: 0;
+ margin-right: 0;
}
}
}
.el-menu--collapse {
+ width: 100% !important;
+ padding: 10px 6px 18px;
+
> .el-menu-item,
.el-sub-menu {
& > .el-sub-menu__title,
&.el-menu-item {
+ margin: 0 0 6px;
+ width: 100%;
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+ box-sizing: border-box;
display: flex !important;
align-items: center;
justify-content: center;
@@ -193,6 +214,10 @@
height: 18px;
margin-right: 0;
flex-shrink: 0;
+ }
+
+ &:hover {
+ border-radius: 14px;
}
& > span {
@@ -254,16 +279,24 @@
}
}
- .nest-menu .el-sub-menu > .el-sub-menu__title,
- .el-menu-item {
- &:hover {
- // you can use $sub-menuHover
- background-color: var(--menu-hover) !important;
- }
- &.is-active {
- background-color: var(--menu-active-bg) !important;
- }
- }
+ .nest-menu .el-sub-menu > .el-sub-menu__title,
+ .el-menu-item {
+ min-width: 0 !important;
+ margin: 0 12px 6px;
+ width: calc(100% - 24px);
+ padding-left: 8px !important;
+ padding-right: 8px !important;
+ box-sizing: border-box;
+
+ &:hover {
+ // you can use $sub-menuHover
+ background-color: var(--menu-hover) !important;
+ }
+ &.is-active {
+ background-color: var(--menu-active-bg) !important;
+ border-radius: 14px;
+ }
+ }
// the scroll bar appears when the sub-menu is too long
> .el-menu--popup {
--
Gitblit v1.9.3