From 896d6b7d1962ccd56ce1e30ccc6b68bf2e54b05c Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 08 四月 2026 11:36:20 +0800
Subject: [PATCH] 1.样式修改
---
src/layout/components/Sidebar/index.vue | 61 +++++++++++++++++++-----------
1 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 0732505..92f49c4 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -30,14 +30,14 @@
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
-console.log(44444, settingsStore.isDark, sideTheme.value)
// 鑾峰彇鑿滃崟鑳屾櫙鑹�
const getMenuBackground = computed(() => {
if (settingsStore.isDark) {
return 'var(--sidebar-bg)'
}
- return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg
+ // 娴呰壊涓婚鏃讹紝鐩存帴鐢ㄤ富棰樿壊
+ return sideTheme.value === 'theme-dark' ? variables.menuBg : settingsStore.theme
})
// 鑾峰彇鑿滃崟鏂囧瓧棰滆壊
@@ -70,25 +70,40 @@
height: 100%;
width: 100% !important;
- .el-menu-item,
- .el-sub-menu__title {
- &:hover {
- background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
- }
- }
+ .el-menu-item,
+ .el-sub-menu__title {
+ margin-bottom: 6px;
+ border-radius: 14px;
+ color: v-bind(getMenuTextColor);
+
+ &:hover {
+ background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
+ }
+ }
+
+ .el-menu-item {
+ &.is-active {
+ color: v-bind(theme);
+ background-color: var(--menu-active-bg, rgba(0, 0, 0, 0.06)) !important;
+ font-weight: 600;
+ }
+ }
- .el-menu-item {
- color: v-bind(getMenuTextColor);
-
- &.is-active {
- color: var(--menu-active-text, #409eff);
- background-color: var(--menu-hover, rgba(0, 0, 0, 0.06)) !important;
- }
- }
-
- .el-sub-menu__title {
- color: v-bind(getMenuTextColor);
- }
- }
-}
-</style>
+ .el-sub-menu__title {
+ color: v-bind(getMenuTextColor);
+ }
+
+ :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
+ color: v-bind(theme) !important;
+ font-weight: 600;
+ }
+
+ :deep(.el-sub-menu.is-active > .el-sub-menu__title .menu-title),
+ :deep(.el-sub-menu.is-active > .el-sub-menu__title .svg-icon),
+ :deep(.el-menu-item.is-active .menu-title),
+ :deep(.el-menu-item.is-active .svg-icon) {
+ color: v-bind(theme) !important;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3