From 1c829f9177eab675b22be4d20ef2761ed1bbb423 Mon Sep 17 00:00:00 2001
From: 云 <2163098428@qq.com>
Date: 星期二, 15 九月 2026 16:15:48 +0800
Subject: [PATCH] refactor(layout): 调整布局样式并优化轮播卡片组件
---
src/assets/styles/sidebar.scss | 58 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 31 insertions(+), 27 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 8534448..5f35ac8 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -22,8 +22,8 @@
left: 0;
z-index: 1001;
overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 2px 0 8px rgba(0, 21, 41, 0.12);
+ box-shadow: 2px 0 8px rgba(0, 21, 41, 0.12);
// reset element-ui css
.horizontal-collapse-transition {
@@ -45,7 +45,7 @@
&.has-logo {
.el-scrollbar {
- height: calc(100% - 50px);
+ height: calc(100% - 60px);
}
}
@@ -80,46 +80,48 @@
display: inline-block !important;
}
- // menu hover
+ // menu hover锛氱粺涓�璧版繁搴曚寒鑹� token
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
- background-color: rgba(212, 221, 255, 0.8) !important;
+ background-color: var(--menu-hover) !important;
}
}
- & .theme-light .is-active > .el-sub-menu__title {
- color: #fff !important;
+
+ .is-active > .el-sub-menu__title {
+ color: var(--menu-active-text) !important;
}
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: $base-sidebar-width !important;
+ background-color: var(--sidebar-sub-bg) !important;
&:hover {
- background-color: rgba(212, 221, 255, 0.8) !important;
+ background-color: var(--menu-hover) !important;
}
&.is-active {
- background-color: #fff !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: rgba(212, 221, 255, 0.8) !important;
+ background-color: var(--menu-active-bg) !important;
+ color: var(--menu-active-text) !important;
}
}
}
.hideSidebar {
.sidebar-container {
- width: 54px !important;
+ width: 64px !important;
}
.main-container {
- margin-left: 54px;
+ margin-left: 64px;
+ }
+
+ // 鎶樺彔鎬佽彍鍗曢」鏀瑰渾瑙掑潡銆佸浘鏍囧眳涓�
+ .el-menu-item,
+ .el-sub-menu__title {
+ margin: 4px 8px;
+ border-radius: 8px;
+ text-align: center;
}
.sub-menu-title-noDropdown {
@@ -130,7 +132,7 @@
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ margin-left: 16px;
}
}
}
@@ -141,7 +143,7 @@
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ margin-left: 16px;
}
}
}
@@ -208,14 +210,15 @@
}
}
+ // 鎶樺彔寮瑰嚭鐨勪簩绾ц彍鍗曪細璺熼殢渚ф爮娣卞簳
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
- // you can use $sub-menuHover
- background-color: rgba(212, 221, 255, 0.56) !important;
+ background-color: var(--menu-hover) !important;
}
&.is-active {
- background-color: rgba(212, 221, 255, 0.56) !important;
+ background-color: var(--menu-active-bg) !important;
+ color: var(--menu-active-text) !important;
}
}
@@ -223,9 +226,10 @@
> .el-menu--popup {
max-height: 100vh;
overflow-y: auto;
+ background-color: var(--sidebar-bg) !important;
&::-webkit-scrollbar-track-piece {
- background: #d3dce6;
+ background: transparent;
}
&::-webkit-scrollbar {
@@ -233,7 +237,7 @@
}
&::-webkit-scrollbar-thumb {
- background: #99a9bf;
+ background: rgba(255, 255, 255, 0.18);
border-radius: 20px;
}
}
--
Gitblit v1.9.3