From c7566bba45e6f90594d36ec4b80ac4ff89f577ee Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 08 十月 2026 14:19:36 +0800
Subject: [PATCH] 项目重构
---
src/assets/styles/sidebar.scss | 111 +++++++++++++++++++++++++++++++++----------------------
1 files changed, 67 insertions(+), 44 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 613420f..0ebeae2 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -19,13 +19,13 @@
height: 100%;
position: fixed;
font-size: 0px;
- top: 0;
+ /* 涓氬姟瀹氬埗锛氫晶杈规爮浠� 50px 椤舵爮涓嬫柟寮�濮� */
+ top: 50px;
bottom: 0;
left: 0;
z-index: 1001;
overflow: hidden;
- -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
- box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ box-shadow: var(--lims-shadow);
// reset element-ui css
.horizontal-collapse-transition {
@@ -86,7 +86,7 @@
.sub-menu-title-noDropdown,
.el-sub-menu__title {
&:hover {
- background-color: rgba(0, 0, 0, 0.06);
+ background-color: var(--menu-hover);
}
}
@@ -99,7 +99,7 @@
min-width: vars.$base-sidebar-width !important;
&:hover {
- background-color: rgba(0, 0, 0, 0.06);
+ background-color: var(--menu-hover);
}
}
@@ -124,14 +124,14 @@
content: '';
position: absolute;
inset: 0;
- background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+ background-color: var(--current-color-dark-bg, rgba(13, 148, 136, 0.2));
pointer-events: none;
z-index: 1;
}
}
.el-sub-menu.is-active > .el-sub-menu__title {
- color: var(--current-color, #409eff) !important;
+ color: var(--current-color, var(--el-color-primary)) !important;
}
.el-menu-item:not(.is-active),
@@ -150,52 +150,66 @@
}
&:hover::before {
- background-color: var(--current-color-dark-bg, rgba(64, 158, 255, 0.2));
+ background-color: var(--current-color-dark-bg, rgba(13, 148, 136, 0.2));
}
}
}
- // theme-light 娴呰壊涓婚
+ // theme-light 娴呰壊涓婚锛堝疄楠屽闈掔豢锛氱櫧搴� + 闈掔豢閫変腑 + 宸︿晶 3px 绔栨潯锛�
&.theme-light {
- border-right: 1px solid #e8eaf0;
- box-shadow: none;
+ border-right: 1px solid var(--sidebar-border, #eef1f1);
+ box-shadow: var(--lims-shadow);
.el-menu-item,
.el-sub-menu__title {
- color: rgba(0, 0, 0, 0.65);
+ position: relative;
+ color: var(--sidebar-text, #{vars.$base-menu-color});
}
- .el-menu-item.is-active {
- color: var(--current-color, #409eff) !important;
- position: relative;
+ // 浜岀骇鑿滃崟灞曞紑绠ご璺熼殢鏂囧瓧鑹诧紙element-plus 榛樿涓哄崰浣嶇伆锛�
+ .el-sub-menu__title .el-sub-menu__icon-arrow {
+ color: inherit !important;
+ }
- &::before {
- content: '';
- position: absolute;
- inset: 0;
- background-color: var(--current-color-light, #ecf5ff);
- pointer-events: none;
- z-index: 1;
- }
+ // 閫変腑锛氭祬闈掑簳 + 涓昏壊鏂囧瓧
+ .el-menu-item.is-active {
+ color: var(--el-color-primary) !important;
+ background-color: var(--menu-active-bg, #e4f2ef) !important;
+ font-weight: 600;
+ }
+
+ // 閫変腑椤瑰乏渚х珫鏉�
+ .el-menu-item.is-active::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 3px;
+ background-color: var(--el-color-primary);
+ border-radius: 0 2px 2px 0;
}
.el-sub-menu.is-active > .el-sub-menu__title {
- color: var(--current-color, #409eff) !important;
+ color: var(--el-color-primary) !important;
+ font-weight: 600;
+ background-color: transparent !important;
}
.el-menu-item:not(.is-active):hover,
.submenu-title-noDropdown:hover,
.el-sub-menu__title:hover {
- background-color: #f5f7fa;
- color: rgba(0, 0, 0, 0.85) !important;
+ background-color: var(--menu-hover) !important;
+ color: var(--el-color-primary) !important;
}
+ // 浜岀骇鑿滃崟灞曞紑闈細鏋佹祬鐏板簳锛屼笌涓�绾ц彍鍗曞尯鍒嗗眰娆�
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-sub-menu .el-menu-item {
- background-color: #fafafa;
+ background-color: var(--sidebar-sub-bg, #{vars.$base-sub-menu-background});
&:hover {
- background-color: #f0f5ff;
+ background-color: var(--sidebar-sub-hover, #{vars.$base-sub-menu-hover}) !important;
}
}
}
@@ -203,11 +217,11 @@
.hideSidebar {
.sidebar-container {
- width: 54px !important;
+ width: 70px !important;
}
.main-container {
- margin-left: 54px;
+ margin-left: 70px;
}
.sub-menu-title-noDropdown {
@@ -218,9 +232,17 @@
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ width: 1.5em;
+ height: 1.5em;
+ margin-left: 25px;
}
}
+ }
+
+ // 鎶樺彔鎬侊細閫変腑椤逛笉閾哄簳鑹诧紝閬垮厤绐勬潯涓婂嚭鐜拌壊鍧楋紙涓氬姟瀹氬埗锛�
+ .el-menu-item.is-active,
+ .el-sub-menu.is-active > .el-sub-menu__title {
+ background-color: transparent !important;
}
.el-sub-menu {
@@ -230,28 +252,29 @@
padding: 0 !important;
.svg-icon {
- margin-left: 20px;
+ width: 1.5em;
+ height: 1.5em;
+ margin-left: 25px;
}
}
}
+ // 鎶樺彔鎬侊細鍥炬爣鍦ㄤ笂銆佹枃瀛楀湪涓嬶紙涓氬姟瀹氬埗锛屼笌鏃х増涓�鑷达級
.el-menu--collapse {
.el-sub-menu {
&>.el-sub-menu__title {
+ height: auto;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 10px;
+
&>span {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
- }
- &>i {
- height: 0;
- width: 0;
- overflow: hidden;
- visibility: hidden;
- display: inline-block;
+ display: block !important;
+ visibility: visible !important;
+ white-space: normal;
+ text-align: center;
+ line-height: normal;
}
}
}
--
Gitblit v1.9.3