From dc66a9cf53d32bacfcaaf3ab9f91f9254f4a6b2a Mon Sep 17 00:00:00 2001 From: Leo Date: Fri, 16 Jan 2026 21:13:00 +0800 Subject: [PATCH] Autowired --- src/assets/styles/sidebar.scss | 44 ++++++++++++++------------ src/assets/styles/variables.scss | 6 ++-- src/layout/components/Sidebar/Logo.vue | 18 +++++------ 3 files changed, 35 insertions(+), 33 deletions(-) diff --git a/src/assets/styles/sidebar.scss b/src/assets/styles/sidebar.scss index f0a94d0..bf3b2f5 100644 --- a/src/assets/styles/sidebar.scss +++ b/src/assets/styles/sidebar.scss @@ -101,7 +101,7 @@ white-space: nowrap !important; font-size: 14px !important; font-weight: 500; - color: rgba(255, 255, 255, 0.95) !important; + color: rgba(33, 33, 33, 0.85) !important; background: transparent !important; border-radius: 12px; margin: 4px 12px; @@ -122,17 +122,17 @@ } &:hover { - background: rgba(255, 255, 255, 0.15) !important; - color: #ffffff !important; + background: rgba(25, 118, 210, 0.1) !important; + color: #1976d2 !important; transform: translateX(4px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } &.is-active { - background: rgba(255, 255, 255, 0.25) !important; - color: #ffffff !important; + background: rgba(25, 118, 210, 0.15) !important; + color: #1976d2 !important; font-weight: 600; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); + box-shadow: 0 4px 16px rgba(25, 118, 210, 0.2); &::before { content: ''; @@ -142,7 +142,7 @@ transform: translateY(-50%); width: 4px; height: 20px; - background: #ffffff; + background: #1976d2; border-radius: 0 2px 2px 0; } } @@ -158,18 +158,18 @@ line-height: 48px; &:hover { - background: rgba(255, 255, 255, 0.15) !important; - color: #ffffff !important; + background: rgba(25, 118, 210, 0.1) !important; + color: #1976d2 !important; transform: translateX(4px); } } .el-menu { - background: rgba(255, 255, 255, 0.08) !important; + background: rgba(255, 255, 255, 0.3) !important; border-radius: 12px; margin: 8px 12px; padding: 8px 0; - box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05); .el-menu-item { margin: 2px 8px; @@ -189,12 +189,14 @@ } &:hover { - background: rgba(255, 255, 255, 0.12) !important; + background: rgba(25, 118, 210, 0.08) !important; + color: #1976d2 !important; transform: translateX(2px); } &.is-active { - background: rgba(255, 255, 255, 0.2) !important; + background: rgba(25, 118, 210, 0.12) !important; + color: #1976d2 !important; &::before { width: 3px; @@ -207,12 +209,12 @@ // 图标样式优化 .svg-icon { - color: rgba(255, 255, 255, 0.8) !important; + color: rgba(33, 33, 33, 0.7) !important; transition: all 0.3s ease; margin-right: 12px; &:hover { - color: #ffffff !important; + color: #1976d2 !important; transform: scale(1.1); } } @@ -383,20 +385,20 @@ padding: 8px 0; .el-menu-item { - color: rgba(255, 255, 255, 0.95) !important; + color: rgba(33, 33, 33, 0.85) !important; margin: 2px 8px; border-radius: 8px; transition: all 0.3s ease; &:hover { - background: rgba(255, 255, 255, 0.15) !important; - color: #ffffff !important; + background: rgba(25, 118, 210, 0.1) !important; + color: #1976d2 !important; transform: translateX(4px); } &.is-active { - background: rgba(255, 255, 255, 0.25) !important; - color: #ffffff !important; + background: rgba(25, 118, 210, 0.15) !important; + color: #1976d2 !important; } } diff --git a/src/assets/styles/variables.scss b/src/assets/styles/variables.scss index 7c9fc27..600dffb 100644 --- a/src/assets/styles/variables.scss +++ b/src/assets/styles/variables.scss @@ -9,10 +9,10 @@ $yellow:#FEC171; $panGreen: #30B08F; // 默认菜单主题风格 - 现代化渐变主题 -$base-menu-color:rgba(255, 255, 255, 0.95); -$base-menu-color-active:#ffffff; +$base-menu-color:rgba(33, 33, 33, 0.85); +$base-menu-color-active:#1976d2; $base-menu-background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); -$base-logo-title-color: #ffffff; +$base-logo-title-color: #1976d2; $base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-background:#ffffff; diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index b66bebc..39b9c4e 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -90,8 +90,8 @@ export default { justify-content: center; width: 42px; height: 42px; - background: rgba(255, 255, 255, 0.15); - border: 2px solid rgba(255, 255, 255, 0.3); + background: rgba(255, 255, 255, 0.6); + border: 2px solid rgba(25, 118, 210, 0.3); border-radius: 50%; margin-right: 15px; transition: all 0.3s ease; @@ -105,8 +105,8 @@ export default { i { font-size: 22px; - color: #ffffff; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + color: #1976d2; + text-shadow: none; @media (max-width: 768px) { font-size: 18px; @@ -114,10 +114,10 @@ export default { } &:hover { - background: rgba(255, 255, 255, 0.25); - border-color: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.8); + border-color: rgba(25, 118, 210, 0.5); transform: scale(1.05); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px rgba(25, 118, 210, 0.2); } &:active { @@ -128,12 +128,12 @@ export default { & .sidebar-title { display: inline-block; margin: 0; - color: #fff; + color: #1976d2; font-weight: 600; font-size: 16px; font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; vertical-align: middle; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + text-shadow: none; @media (max-width: 768px) { font-size: 14px;