From 622c03d32fbb441194e87d7124d9b37c16523639 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 27 五月 2026 16:02:55 +0800
Subject: [PATCH] pro 1.菜单栏样式修改
---
src/assets/styles/sidebar.scss | 37 +++++++-----
src/layout/components/Sidebar/SidebarItem.vue | 107 ++++++++++++++++++++---------------
2 files changed, 81 insertions(+), 63 deletions(-)
diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss
index 685a0eb..5da0e59 100644
--- a/src/assets/styles/sidebar.scss
+++ b/src/assets/styles/sidebar.scss
@@ -216,33 +216,38 @@
& .nest-menu .el-sub-menu > .el-sub-menu__title,
& .el-sub-menu .el-menu-item {
min-width: 0 !important;
- width: calc(100% - 24px) !important;
- margin: 0 12px 8px !important;
- height: 46px;
- line-height: 46px;
- padding-left: 14px !important;
- padding-right: 14px !important;
- border-radius: 12px;
+ width: calc(100% - 32px) !important;
+ margin: 0 16px 6px !important;
+ height: 40px;
+ line-height: 40px;
+ padding-left: 12px !important;
+ padding-right: 12px !important;
+ border-radius: 8px;
transition: all 0.24s ease;
color: var(--sidebar-text);
- border: 1px solid rgba(255, 255, 255, 0.06) !important;
- background: linear-gradient(128deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
+ border: none !important;
+ background: transparent;
+ font-size: 13px;
&:hover {
- background: linear-gradient(128deg, rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.24), rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.07)) !important;
- border-color: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.3) !important;
- transform: translateX(2px);
+ background: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.12) !important;
+ transform: translateX(4px);
}
&.is-active {
- background: var(--menu-active-bg, linear-gradient(135deg, var(--el-color-primary), var(--el-color-primary-light-3))) !important;
- background-size: 180% 180%;
+ background: rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.85) !important;
color: #fff !important;
font-weight: 500;
- box-shadow: var(--menu-active-glow, 0 10px 24px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.34));
- animation: sidebarActiveFlow 4.6s ease infinite;
+ box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb, 37, 99, 235), 0.25);
}
}
+
+ // 瀛愯彍鍗曞鍣ㄦ牱寮� - 澧炲姞缂╄繘鍜岃瑙夊眰娆�
+ & .el-sub-menu .el-menu {
+ padding: 4px 0 8px;
+ margin-left: 8px;
+ border-left: 2px solid rgba(255, 255, 255, 0.08);
+ }
}
.hideSidebar {
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 003b489..3712c68 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -102,57 +102,70 @@
</script>
<style lang="scss" scoped>
-.sidebar-item-wrapper {
- :deep(.menu-icon) {
- width: 26px;
- height: 26px;
- margin-right: 12px;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- flex-shrink: 0;
- transition: color 0.2s ease;
- color: var(--sidebar-text);
- opacity: 0.88;
- }
-
- :deep(.el-menu-item:hover .menu-icon),
- :deep(.el-sub-menu__title:hover .menu-icon) {
- color: #ffffff;
- opacity: 1;
- }
+.sidebar-item-wrapper {
+ :deep(.menu-icon) {
+ width: 26px;
+ height: 26px;
+ margin-right: 12px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ transition: color 0.2s ease;
+ color: var(--sidebar-text);
+ opacity: 0.88;
+ }
+
+ :deep(.el-menu-item:hover .menu-icon),
+ :deep(.el-sub-menu__title:hover .menu-icon) {
+ color: #ffffff;
+ opacity: 1;
+ }
:deep(.el-menu-item.is-active .menu-icon) {
color: var(--menu-active-text) !important;
opacity: 1;
}
- :deep(.menu-title) {
- font-weight: 500;
- transition: color 0.2s ease;
- color: var(--sidebar-text);
- opacity: 0.82;
- }
-
- :deep(.el-menu-item:hover .menu-title),
- :deep(.el-sub-menu__title:hover .menu-title) {
- color: #ffffff;
- opacity: 1;
- }
-
- :deep(.el-menu-item.is-active .menu-title) {
- color: var(--menu-active-text) !important;
- opacity: 1;
- }
-
- :deep(.nest-menu) {
- .menu-icon {
- width: 22px;
- height: 22px;
- margin-right: 10px;
- }
-
- .menu-title { font-size: 13px; }
- }
-}
+ :deep(.menu-title) {
+ font-weight: 500;
+ transition: color 0.2s ease;
+ color: var(--sidebar-text);
+ opacity: 0.82;
+ }
+
+ :deep(.el-menu-item:hover .menu-title),
+ :deep(.el-sub-menu__title:hover .menu-title) {
+ color: #ffffff;
+ opacity: 1;
+ }
+
+ :deep(.el-menu-item.is-active .menu-title) {
+ color: var(--menu-active-text) !important;
+ opacity: 1;
+ }
+
+ :deep(.nest-menu) {
+ .menu-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 8px;
+ opacity: 0.7;
+ }
+
+ .menu-title {
+ font-size: 13px;
+ opacity: 0.85;
+ }
+
+ .el-menu-item.is-active {
+ .menu-icon {
+ opacity: 1;
+ }
+ .menu-title {
+ opacity: 1;
+ }
+ }
+ }
+}
</style>
--
Gitblit v1.9.3