diff --git a/client/src/App.vue b/client/src/App.vue index 6805314..43c8df9 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -72,79 +72,79 @@ function applyTabBarTheme(theme) { 默认:亮色模式(蓝紫主题) | .theme-dark:暗色模式 ============================================ */ -/* ---- 亮色模式(默认:清爽中性,品牌色点缀) ---- */ +/* ---- 亮色模式(默认:层次分明,视觉丰富) ---- */ page, .theme-light { - /* 基础色 — 清爽中性 */ - --bg-primary: #f8f9fc; - --bg-secondary: #ffffff; - --bg-tertiary: #f0f1f5; + /* 基础色 — 层次感 */ + --bg-primary: #edeff3; + --bg-secondary: #f5f6f9; + --bg-tertiary: #e2e5ec; - /* 玻璃拟态 — 白底+阴影,不用有色玻璃 */ + /* 卡片 — 纯白+阴影+细边框 */ --glass-bg: #ffffff; - --glass-border: rgba(0, 0, 0, 0.06); - --glass-hover: #f8f9ff; - --glass-hover-border: rgba(99, 102, 241, 0.15); + --glass-border: rgba(0, 0, 0, 0.08); + --glass-hover: #f5f6ff; + --glass-hover-border: rgba(99, 102, 241, 0.2); --glass-strong: #ffffff; - --glass-dim-bg: #f0f1ff; + --glass-dim-bg: #eef0ff; /* 文字 — 高对比 */ - --text-primary: #0a0a1a; - --text-secondary: rgba(10, 10, 26, 0.6); - --text-tertiary: rgba(10, 10, 26, 0.4); - --text-muted: rgba(10, 10, 26, 0.25); - --text-disabled: rgba(10, 10, 26, 0.15); + --text-primary: #0d0d1a; + --text-secondary: rgba(13, 13, 26, 0.65); + --text-tertiary: rgba(13, 13, 26, 0.45); + --text-muted: rgba(13, 13, 26, 0.28); + --text-disabled: rgba(13, 13, 26, 0.15); /* 品牌色 — Indigo */ --color-brand: #6366f1; --color-brand-light: #818cf8; --color-brand-dark: #4f46e5; - --color-brand-bg: rgba(99, 102, 241, 0.06); - --color-brand-glow: rgba(99, 102, 241, 0.08); + --color-brand-bg: rgba(99, 102, 241, 0.08); + --color-brand-glow: rgba(99, 102, 241, 0.1); - /* 维度色 — 保持高饱和度,在白色背景上更鲜明 */ + /* 维度色 — 加饱和度,更鲜明 */ --dim1-color: #6366f1; - --dim1-bg: rgba(99, 102, 241, 0.06); - --dim1-icon-bg: rgba(99, 102, 241, 0.12); - --dim1-border: rgba(99, 102, 241, 0.15); - --dim1-glow: rgba(99, 102, 241, 0.04); + --dim1-bg: rgba(99, 102, 241, 0.08); + --dim1-icon-bg: rgba(99, 102, 241, 0.14); + --dim1-border: rgba(99, 102, 241, 0.18); + --dim1-glow: rgba(99, 102, 241, 0.05); --dim2-color: #0891b2; - --dim2-bg: rgba(8, 145, 178, 0.06); - --dim2-icon-bg: rgba(8, 145, 178, 0.12); - --dim2-border: rgba(8, 145, 178, 0.15); - --dim2-glow: rgba(8, 145, 178, 0.04); + --dim2-bg: rgba(8, 145, 178, 0.08); + --dim2-icon-bg: rgba(8, 145, 178, 0.14); + --dim2-border: rgba(8, 145, 178, 0.18); + --dim2-glow: rgba(8, 145, 178, 0.05); --dim3-color: #059669; - --dim3-bg: rgba(5, 150, 105, 0.06); - --dim3-icon-bg: rgba(5, 150, 105, 0.12); - --dim3-border: rgba(5, 150, 105, 0.15); - --dim3-glow: rgba(5, 150, 105, 0.04); + --dim3-bg: rgba(5, 150, 105, 0.08); + --dim3-icon-bg: rgba(5, 150, 105, 0.14); + --dim3-border: rgba(5, 150, 105, 0.18); + --dim3-glow: rgba(5, 150, 105, 0.05); --dim4-color: #d97706; - --dim4-bg: rgba(217, 119, 6, 0.06); - --dim4-icon-bg: rgba(217, 119, 6, 0.12); - --dim4-border: rgba(217, 119, 6, 0.15); - --dim4-glow: rgba(217, 119, 6, 0.04); + --dim4-bg: rgba(217, 119, 6, 0.08); + --dim4-icon-bg: rgba(217, 119, 6, 0.14); + --dim4-border: rgba(217, 119, 6, 0.18); + --dim4-glow: rgba(217, 119, 6, 0.05); --dim5-color: #dc2626; - --dim5-bg: rgba(220, 38, 38, 0.06); - --dim5-icon-bg: rgba(220, 38, 38, 0.12); - --dim5-border: rgba(220, 38, 38, 0.15); - --dim5-glow: rgba(220, 38, 38, 0.04); + --dim5-bg: rgba(220, 38, 38, 0.08); + --dim5-icon-bg: rgba(220, 38, 38, 0.14); + --dim5-border: rgba(220, 38, 38, 0.18); + --dim5-glow: rgba(220, 38, 38, 0.05); /* 功能色 */ --color-free: #059669; - --color-free-bg: rgba(5, 150, 105, 0.08); + --color-free-bg: rgba(5, 150, 105, 0.1); --color-pro: #d97706; - --color-pro-bg: rgba(217, 119, 6, 0.08); + --color-pro-bg: rgba(217, 119, 6, 0.1); --color-vip: #dc2626; - --color-vip-bg: rgba(220, 38, 38, 0.08); + --color-vip-bg: rgba(220, 38, 38, 0.1); --color-hot: #dc2626; - --color-hot-bg: rgba(220, 38, 38, 0.1); + --color-hot-bg: rgba(220, 38, 38, 0.12); --color-new: #0891b2; - --color-new-bg: rgba(8, 145, 178, 0.1); + --color-new-bg: rgba(8, 145, 178, 0.12); --color-pick: #6366f1; - --color-pick-bg: rgba(99, 102, 241, 0.1); + --color-pick-bg: rgba(99, 102, 241, 0.12); /* 圆角/间距/过渡 */ --radius-sm: 8px; @@ -161,12 +161,12 @@ page, .theme-light { --blur-bg: 20px; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; - --glow-brand: 0 0 20px rgba(99, 102, 241, 0.06); - --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.1); + --glow-brand: 0 0 20px rgba(99, 102, 241, 0.08); + --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12); /* 亮色专属:卡片阴影 */ - --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); - --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06); + --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); + --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08); } /* ---- 暗色模式 ---- */ diff --git a/client/src/pages.json b/client/src/pages.json index da354c9..edd1b22 100644 --- a/client/src/pages.json +++ b/client/src/pages.json @@ -20,16 +20,16 @@ "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "宇之然AI维度", - "navigationBarBackgroundColor": "#f8f9fc", - "backgroundColor": "#f8f9fc", - "backgroundColorTop": "#f8f9fc", - "backgroundColorBottom": "#f8f9fc", + "navigationBarBackgroundColor": "#edeff3", + "backgroundColor": "#edeff3", + "backgroundColorTop": "#edeff3", + "backgroundColorBottom": "#edeff3", "app-plus": { - "background": "#f8f9fc" + "background": "#edeff3" } }, "tabBar": { - "color": "rgba(0,0,0,0.3)", + "color": "rgba(0,0,0,0.35)", "selectedColor": "#6366f1", "backgroundColor": "#ffffff", "borderStyle": "white", diff --git a/client/src/styles/theme.scss b/client/src/styles/theme.scss index 4a20567..9889d33 100644 --- a/client/src/styles/theme.scss +++ b/client/src/styles/theme.scss @@ -12,7 +12,7 @@ /* ---- SCSS 变量(方便组件内使用) ---- */ $color-brand: #6366f1; $color-brand-light: #818cf8; -$color-bg-primary: #f8f9fc; +$color-bg-primary: #edeff3; $color-bg-dark: #14141e; $dim1-color: #6366f1;