From acd6bbae394c997523b5051d019e584db1845c4c Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期三, 17 六月 2026 14:29:04 +0800
Subject: [PATCH] 样式修改
---
src/layout/components/Sidebar/index.vue | 97 ++++++++----------------------------------------
1 files changed, 16 insertions(+), 81 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 2a58c29..8f9fb89 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -67,100 +67,35 @@
border: none !important;
height: 100%;
width: 100% !important;
- border-radius: 0;
background: transparent !important;
- .el-menu-item,
- .el-sub-menu__title {
- margin-bottom: 8px;
- border-radius: 14px;
- color: v-bind(getMenuTextColor);
+ :deep(.el-menu-item),
+ :deep(.el-sub-menu__title) {
+ margin-bottom: 4px;
+ border-radius: var(--radius-md);
+ color: var(--sidebar-text);
font-size: 14px;
- letter-spacing: 0;
- transition:
- transform 0.18s ease,
- background 0.2s ease,
- box-shadow 0.2s ease,
- color 0.2s ease;
- border: none !important;
+ transition: all 0.2s ease;
display: flex;
align-items: center;
&:hover {
- background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.28), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.08)) !important;
- transform: translate3d(2px, 0, 0);
+ background: var(--menu-hover) !important;
+ color: #fff !important;
}
- }
-
- .el-menu-item {
- color: var(--sidebar-text);
-
- &.is-active {
- background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
- color: var(--menu-active-text) !important;
- font-weight: 500;
- border-radius: 14px;
- box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
-
- .svg-icon {
- color: var(--menu-active-text) !important;
- }
- }
- }
-
- .el-sub-menu__title {
- color: v-bind(getMenuTextColor);
- }
-
- :deep(.el-sub-menu__icon-arrow) {
- display: inline-flex !important;
- align-items: center;
- justify-content: center;
- width: 14px;
- height: 14px;
- margin-top: -7px;
- right: 14px;
- font-size: 14px !important;
- color: currentColor !important;
- opacity: 0.7;
- transition: transform 0.2s ease, opacity 0.2s ease;
- }
-
- :deep(.el-sub-menu.is-opened .el-sub-menu__icon-arrow) {
- transform: rotate(180deg);
- }
-
- :deep(.el-sub-menu.is-active > .el-sub-menu__title) {
- color: var(--menu-active-text) !important;
- font-weight: 500;
- border-radius: 12px;
- margin: 0 12px 6px !important;
- padding-left: 14px !important;
- padding-right: 34px !important;
- box-sizing: border-box;
- overflow: hidden;
- background-clip: padding-box;
- background: var(--menu-active-bg) !important;
- box-shadow: var(--menu-active-glow);
- border: none !important;
}
:deep(.el-menu-item.is-active) {
- margin: 0 12px 6px !important;
- width: calc(100% - 24px) !important;
- padding-left: 14px !important;
- padding-right: 34px !important;
- box-sizing: border-box;
- overflow: hidden;
- background-clip: padding-box;
- border-radius: 12px;
+ background: var(--menu-active-bg) !important;
+ color: var(--menu-active-text) !important;
+ font-weight: 600;
+ box-shadow: var(--menu-active-glow);
+
+ .svg-icon {
+ color: var(--menu-active-text) !important;
+ }
}
- :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) {
- color: var(--menu-active-text) !important;
- }
}
}
</style>
--
Gitblit v1.9.3