From e38c0656952f70552170fc4ee72420b0c741919e Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 18 六月 2026 10:04:09 +0800
Subject: [PATCH] 样式修改
---
src/assets/styles/sidebar.scss | 112 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 67 insertions(+), 45 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 677396c..d75e1f2 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -17,14 +17,14 @@
height: 100vh;
position: fixed;
top: 0;
+ padding-top: var(--topbar-height);
left: 0;
z-index: 1001;
overflow: hidden;
- padding: 0;
font-size: 0;
- background: var(--sidebar-bg);
+ background: var(--surface-base);
border-right: 1px solid var(--surface-border);
- box-shadow: var(--shadow-md);
+ box-shadow: none;
> * {
position: relative;
@@ -68,7 +68,7 @@
border: none !important;
height: 100%;
width: 100% !important;
- padding: 12px 0;
+ padding: 8px 0;
background: transparent !important;
}
@@ -88,24 +88,26 @@
.submenu-title-noDropdown,
.el-sub-menu__title,
.el-menu-item {
- width: calc(100% - 16px) !important;
- margin: 4px 8px !important;
+ width: 100% !important;
+ margin: 0 !important;
height: 44px;
line-height: 44px;
- border-radius: var(--radius-md);
- padding-left: 16px !important;
- padding-right: 36px !important; // 棰勭暀绠ご浣嶇疆
+ border-radius: 0;
+ padding-left: 18px !important;
+ padding-right: 18px !important;
box-sizing: border-box;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
- color: var(--sidebar-text);
+ color: var(--el-color-primary);
background: transparent;
border: none !important;
position: relative;
+ font-size: 14px;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.35) !important;
.svg-icon {
margin-right: 12px;
- width: 18px;
- height: 18px;
+ width: 16px;
+ height: 16px;
vertical-align: middle;
flex-shrink: 0;
transition: transform 0.3s ease;
@@ -115,11 +117,12 @@
.el-sub-menu {
&.is-opened {
> .el-sub-menu__title {
- color: var(--menu-active-text) !important;
+ color: var(--el-color-primary) !important;
+ font-weight: 600;
.el-sub-menu__icon-arrow {
transform: rotate(180deg) !important;
- color: var(--menu-active-text) !important;
+ color: var(--el-color-primary) !important;
}
}
}
@@ -134,7 +137,7 @@
font-size: 12px !important;
display: inline-block !important;
transition: transform 0.3s ease !important;
- color: var(--sidebar-text) !important;
+ color: var(--el-color-primary) !important;
z-index: 2;
}
}
@@ -142,37 +145,52 @@
.submenu-title-noDropdown:hover,
.el-sub-menu__title:hover,
.el-menu-item:hover {
- background: var(--menu-hover) !important;
- color: var(--menu-active-text) !important;
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
.svg-icon {
- transform: scale(1.1);
+ color: var(--el-color-primary) !important;
+ }
+
+ .el-sub-menu__icon-arrow {
+ color: var(--el-color-primary) !important;
}
}
.el-menu-item.is-active,
.el-sub-menu.is-active > .el-sub-menu__title {
- color: var(--menu-active-text) !important;
- background: var(--menu-active-bg) !important;
- box-shadow: var(--menu-active-glow);
+ color: var(--el-color-primary) !important;
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ box-shadow: none;
font-weight: 600;
.svg-icon {
- color: var(--menu-active-text) !important;
+ color: var(--el-color-primary) !important;
}
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
- height: 40px;
- line-height: 40px;
- margin: 2px 8px !important;
- padding-left: 44px !important; // 澧炲姞瀛愯彍鍗曠缉杩�
- border-radius: var(--radius-sm);
- font-size: 13px;
+ height: 44px;
+ line-height: 44px;
+ margin: 0 !important;
+ padding-left: 38px !important;
+ border-radius: 0;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.3) !important;
&.is-active {
- background: var(--menu-active-bg) !important;
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ }
+
+ &:hover {
+ background-color: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
+
+ .svg-icon {
+ color: var(--el-color-primary) !important;
+ }
}
}
}
@@ -189,6 +207,7 @@
justify-content: center;
margin: 4px 8px !important;
width: calc(var(--sidebar-collapsed-width) - 16px) !important;
+ border-bottom: none !important;
.svg-icon {
margin-right: 0;
@@ -218,6 +237,8 @@
.sidebar-container {
transition: transform 0.25s;
width: var(--sidebar-width) !important;
+ padding-top: 0;
+ z-index: 1004;
}
&.hideSidebar {
@@ -247,40 +268,41 @@
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
min-width: 0 !important;
- margin: 4px 10px;
- width: calc(100% - 20px);
+ margin: 0;
+ width: 100%;
height: 44px;
line-height: 44px;
- padding-left: 16px !important;
- padding-right: 16px !important;
+ padding-left: 18px !important;
+ padding-right: 18px !important;
box-sizing: border-box;
- border-radius: var(--radius-md);
- color: var(--sidebar-text);
+ border-radius: 0;
+ color: var(--el-color-primary);
background: transparent;
transition: all 0.2s ease;
+ border-bottom: 1px dashed rgba(var(--el-color-primary-rgb), 0.35);
&:hover {
- background: var(--menu-hover) !important;
- color: #fff !important;
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
}
&.is-active {
- background: var(--menu-active-bg) !important;
- color: var(--menu-active-text) !important;
+ background: rgba(var(--el-color-primary-rgb), 0.06) !important;
+ color: var(--el-color-primary) !important;
font-weight: 600;
- box-shadow: var(--menu-active-glow);
+ box-shadow: none;
}
}
> .el-menu--popup {
max-height: 100vh;
overflow: hidden;
- padding: 8px;
- border-radius: var(--radius-lg);
+ padding: 8px 0;
+ border-radius: 0;
border: 1px solid var(--surface-border);
- box-shadow: var(--shadow-menu);
- background: var(--sidebar-bg);
- backdrop-filter: blur(16px);
+ box-shadow: var(--shadow-sm);
+ background: var(--surface-base);
+ backdrop-filter: none;
> .el-menu {
max-height: calc(100vh - 16px);
--
Gitblit v1.9.3