From ff609c6ba2f52818dad141407c3265abc883eb4f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 18 五月 2026 17:38:09 +0800
Subject: [PATCH] 进销存pro 1.菜单栏样式修改
---
src/assets/styles/variables.module.scss | 121 ++++++++++++++++++++++++----------------
1 files changed, 73 insertions(+), 48 deletions(-)
diff --git a/src/assets/styles/variables.module.scss b/src/assets/styles/variables.module.scss
index 55b3822..8f96932 100644
--- a/src/assets/styles/variables.module.scss
+++ b/src/assets/styles/variables.module.scss
@@ -8,31 +8,31 @@
$yellow: #fec171;
$panGreen: #30b08f;
-// menu palette
-$menuText: #677287;
-$menuActiveText: #1f7a72;
-$menuBg: #f4f7f4;
-$menuHover: #e7eeea;
+// menu palette - 浣跨敤涓婚鑹�
+$menuText: #5a6478;
+$menuActiveText: #ffffff;
+$menuBg: #f8fafb;
+$menuHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
-// light theme
-$menuLightBg: #f4f7f4;
-$menuLightHover: #e7eeea;
-$menuLightText: #3b4658;
-$menuLightActiveText: #1f7a72;
+// light theme - 浣跨敤涓婚鑹�
+$menuLightBg: #f8fafb;
+$menuLightHover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
+$menuLightText: #3d4858;
+$menuLightActiveText: #ffffff;
// layout
$base-sidebar-width: 216px;
$sideBarWidth: 216px;
-// sidebar
-$base-menu-color: #677287;
-$base-menu-color-active: #1f7a72;
-$base-menu-background: #f4f7f4;
-$base-sub-menu-background: #eef3ef;
+// sidebar - 浼樺寲鍚庣殑渚ц竟鏍忛厤鑹�
+$base-menu-color: #5a6478;
+$base-menu-color-active: #0d9488;
+$base-menu-background: #f8fafb;
+$base-sub-menu-background: #f0f5f4;
$base-sub-menu-hover: #ffffff;
-// component
-$--color-primary: #1f7a72;
+// component - 浼樺寲鍚庣殑涓婚鑹�
+$--color-primary: #0d9488;
$--color-success: #67c23a;
$--color-warning: #d89b41;
$--color-danger: #d25b52;
@@ -66,37 +66,44 @@
:root {
--sidebar-bg: #{$menuBg};
--sidebar-text: #{$menuText};
- --sidebar-muted: #93a0b1;
- --menu-hover: #{$menuHover};
- --menu-active-bg: #dfe9e4;
- --menu-surface: rgba(255, 255, 255, 0.72);
+ --sidebar-muted: #5a6478;
+ --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.08);
+ --menu-active-bg: var(--el-color-primary, #0d9488);
+ --menu-active-text: #ffffff;
+ --menu-surface: #f8fafb;
- --app-bg: #eef2ee;
- --app-bg-accent: #dfe8e2;
+ --app-bg: #f0f4f3;
+ --app-bg-accent: #e0ebe9;
--surface-base: #ffffff;
- --surface-soft: #f7faf8;
- --surface-muted: #eff4f1;
- --surface-border: #d8e1db;
- --surface-border-strong: #c9d5ce;
- --text-primary: #21313f;
- --text-secondary: #5f6d7e;
- --text-tertiary: #8a98a8;
- --shadow-sm: 0 10px 30px rgba(31, 49, 38, 0.06);
- --shadow-md: 0 18px 50px rgba(31, 49, 38, 0.1);
- --radius-lg: 24px;
- --radius-md: 18px;
- --radius-sm: 12px;
+ --surface-soft: #f7faf9;
+ --surface-muted: #eef3f2;
+ --surface-border: #d5e0de;
+ --surface-border-strong: #c5d5d2;
+ --text-primary: #1e293b;
+ --text-secondary: #4a5568;
+ --text-tertiary: #718096;
+ --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
+ --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.1);
+ --shadow-menu: 0 2px 8px rgba(0, 0, 0, 0.05);
+ --radius-lg: 20px;
+ --radius-md: 14px;
+ --radius-sm: 10px;
+ --radius-xs: 6px;
- --navbar-bg: rgba(255, 255, 255, 0.78);
- --navbar-text: #21313f;
- --navbar-hover: rgba(31, 122, 114, 0.08);
+ --navbar-bg: rgba(255, 255, 255, 0.85);
+ --navbar-text: #1e293b;
+ --navbar-hover: rgba(13, 148, 136, 0.08);
--tags-bg: transparent;
- --tags-item-bg: rgba(255, 255, 255, 0.74);
- --tags-item-border: rgba(201, 213, 206, 0.88);
- --tags-item-text: #5f6d7e;
- --tags-item-hover: rgba(31, 122, 114, 0.08);
- --tags-close-hover: rgba(31, 122, 114, 0.18);
+ --tags-item-bg: rgba(255, 255, 255, 0.8);
+ --tags-item-border: rgba(197, 213, 210, 0.9);
+ --tags-item-text: #4a5568;
+ --tags-item-hover: rgba(13, 148, 136, 0.1);
+ --tags-close-hover: rgba(13, 148, 136, 0.2);
+
+ --accent-primary: #0d9488;
+ --accent-light: #14b8a6;
+ --accent-lighter: #5eead4;
--splitpanes-default-bg: #ffffff;
}
@@ -109,10 +116,19 @@
--el-border-color: #434343;
--el-border-color-light: #434343;
- --sidebar-bg: #141414;
- --sidebar-text: #ffffff;
- --menu-hover: #2d2d2d;
- --menu-active-text: #{$menuActiveText};
+ --sidebar-bg: #1a1a1a;
+ --sidebar-text: #d0d0d0;
+ --sidebar-muted: #888888;
+ --menu-hover: rgba(var(--el-color-primary-rgb, 13, 148, 136), 0.12);
+ --menu-active-bg: var(--el-color-primary, #0d9488);
+ --menu-active-text: #ffffff;
+ --menu-surface: #1a1a1a;
+
+ --text-primary: #ffffff;
+ --text-secondary: #d0d0d0;
+ --text-tertiary: #888888;
+ --accent-primary: var(--el-color-primary, #0d9488);
+ --accent-light: var(--el-color-primary-light-3, #14b8a6);
--navbar-bg: #141414;
--navbar-text: #ffffff;
@@ -139,13 +155,22 @@
.sidebar-container {
.el-menu-item,
.menu-title {
- color: var(--el-text-color-regular);
+ color: var(--sidebar-text);
+ }
+
+ .el-menu-item.is-active,
+ .el-menu-item.is-active .menu-title {
+ color: var(--menu-active-text) !important;
}
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
& .theme-dark .el-sub-menu .el-menu-item {
background-color: var(--el-bg-color) !important;
}
+
+ & .theme-dark .el-sub-menu .el-menu-item.is-active {
+ background-color: var(--menu-active-bg) !important;
+ }
}
.el-menu--horizontal {
--
Gitblit v1.9.3