From 1760668d0f0a791e1b1c5bcf9d3e031b969c37b8 Mon Sep 17 00:00:00 2001 From: Yuzhiran Dev Date: Sat, 11 Jul 2026 17:04:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=AE=E8=89=B2=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E5=BD=BB=E5=BA=95=E9=87=8D=E5=81=9A-=E6=B8=85=E7=88=BD?= =?UTF-8?q?=E7=99=BD=E5=BA=95+=E5=93=81=E7=89=8C=E8=89=B2=E7=82=B9?= =?UTF-8?q?=E7=BC=80+=E5=8D=A1=E7=89=87=E9=98=B4=E5=BD=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.vue | 105 ++++++++++++++++++----------------- client/src/pages.json | 14 ++--- client/src/styles/theme.scss | 2 +- 3 files changed, 63 insertions(+), 58 deletions(-) diff --git a/client/src/App.vue b/client/src/App.vue index 07b2caf..6805314 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: #e8ecf8; - --bg-secondary: #eef1fa; - --bg-tertiary: #dee3f2; + /* 基础色 — 清爽中性 */ + --bg-primary: #f8f9fc; + --bg-secondary: #ffffff; + --bg-tertiary: #f0f1f5; - /* 玻璃拟态 — 蓝紫玻璃 */ - --glass-bg: rgba(99, 102, 241, 0.08); - --glass-border: rgba(99, 102, 241, 0.12); - --glass-hover: rgba(99, 102, 241, 0.12); - --glass-hover-border: rgba(99, 102, 241, 0.18); - --glass-strong: rgba(99, 102, 241, 0.1); - --glass-dim-bg: rgba(99, 102, 241, 0.04); + /* 玻璃拟态 — 白底+阴影，不用有色玻璃 */ + --glass-bg: #ffffff; + --glass-border: rgba(0, 0, 0, 0.06); + --glass-hover: #f8f9ff; + --glass-hover-border: rgba(99, 102, 241, 0.15); + --glass-strong: #ffffff; + --glass-dim-bg: #f0f1ff; - /* 文字 — 深色高对比 */ - --text-primary: #0f0f23; - --text-secondary: rgba(15, 15, 35, 0.7); - --text-tertiary: rgba(15, 15, 35, 0.5); - --text-muted: rgba(15, 15, 35, 0.32); - --text-disabled: rgba(15, 15, 35, 0.2); + /* 文字 — 高对比 */ + --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); - /* 品牌色 — 蓝紫 */ + /* 品牌色 — Indigo */ --color-brand: #6366f1; --color-brand-light: #818cf8; --color-brand-dark: #4f46e5; - --color-brand-bg: rgba(99, 102, 241, 0.1); - --color-brand-glow: rgba(99, 102, 241, 0.12); + --color-brand-bg: rgba(99, 102, 241, 0.06); + --color-brand-glow: rgba(99, 102, 241, 0.08); - /* 维度色 — 保持可识别性，亮色模式加饱和度 */ + /* 维度色 — 保持高饱和度，在白色背景上更鲜明 */ --dim1-color: #6366f1; - --dim1-bg: rgba(99, 102, 241, 0.08); - --dim1-icon-bg: rgba(99, 102, 241, 0.14); - --dim1-border: rgba(99, 102, 241, 0.16); - --dim1-glow: rgba(99, 102, 241, 0.05); + --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); --dim2-color: #0891b2; - --dim2-bg: rgba(8, 145, 178, 0.08); - --dim2-icon-bg: rgba(8, 145, 178, 0.14); - --dim2-border: rgba(8, 145, 178, 0.16); - --dim2-glow: rgba(8, 145, 178, 0.05); + --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); --dim3-color: #059669; - --dim3-bg: rgba(5, 150, 105, 0.08); - --dim3-icon-bg: rgba(5, 150, 105, 0.14); - --dim3-border: rgba(5, 150, 105, 0.16); - --dim3-glow: rgba(5, 150, 105, 0.05); + --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); --dim4-color: #d97706; - --dim4-bg: rgba(217, 119, 6, 0.08); - --dim4-icon-bg: rgba(217, 119, 6, 0.14); - --dim4-border: rgba(217, 119, 6, 0.16); - --dim4-glow: rgba(217, 119, 6, 0.05); + --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); --dim5-color: #dc2626; - --dim5-bg: rgba(220, 38, 38, 0.08); - --dim5-icon-bg: rgba(220, 38, 38, 0.14); - --dim5-border: rgba(220, 38, 38, 0.16); - --dim5-glow: rgba(220, 38, 38, 0.05); + --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); /* 功能色 */ --color-free: #059669; - --color-free-bg: rgba(5, 150, 105, 0.1); + --color-free-bg: rgba(5, 150, 105, 0.08); --color-pro: #d97706; - --color-pro-bg: rgba(217, 119, 6, 0.1); + --color-pro-bg: rgba(217, 119, 6, 0.08); --color-vip: #dc2626; - --color-vip-bg: rgba(220, 38, 38, 0.1); + --color-vip-bg: rgba(220, 38, 38, 0.08); --color-hot: #dc2626; - --color-hot-bg: rgba(220, 38, 38, 0.12); + --color-hot-bg: rgba(220, 38, 38, 0.1); --color-new: #0891b2; - --color-new-bg: rgba(8, 145, 178, 0.12); + --color-new-bg: rgba(8, 145, 178, 0.1); --color-pick: #6366f1; - --color-pick-bg: rgba(99, 102, 241, 0.12); + --color-pick-bg: rgba(99, 102, 241, 0.1); /* 圆角/间距/过渡 */ --radius-sm: 8px; @@ -161,8 +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.08); - --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.12); + --glow-brand: 0 0 20px rgba(99, 102, 241, 0.06); + --glow-brand-strong: 0 0 30px rgba(99, 102, 241, 0.1); + + /* 亮色专属：卡片阴影 */ + --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); } /* ---- 暗色模式 ---- */ @@ -280,6 +284,7 @@ view { border-radius: var(--radius-lg); backdrop-filter: blur(var(--blur-bg)); -webkit-backdrop-filter: blur(var(--blur-bg)); + box-shadow: var(--card-shadow, none); transition: all var(--transition-normal); } diff --git a/client/src/pages.json b/client/src/pages.json index 15e4107..da354c9 100644 --- a/client/src/pages.json +++ b/client/src/pages.json @@ -20,18 +20,18 @@ "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "宇之然AI维度", - "navigationBarBackgroundColor": "#e8ecf8", - "backgroundColor": "#e8ecf8", - "backgroundColorTop": "#e8ecf8", - "backgroundColorBottom": "#e8ecf8", + "navigationBarBackgroundColor": "#f8f9fc", + "backgroundColor": "#f8f9fc", + "backgroundColorTop": "#f8f9fc", + "backgroundColorBottom": "#f8f9fc", "app-plus": { - "background": "#e8ecf8" + "background": "#f8f9fc" } }, "tabBar": { - "color": "rgba(99,102,241,0.4)", + "color": "rgba(0,0,0,0.3)", "selectedColor": "#6366f1", - "backgroundColor": "#e8ecf8", + "backgroundColor": "#ffffff", "borderStyle": "white", "list": [ {"pagePath": "pages/index/index", "text": "探索"}, diff --git a/client/src/styles/theme.scss b/client/src/styles/theme.scss index b3e3b7c..4a20567 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: #e8ecf8; +$color-bg-primary: #f8f9fc; $color-bg-dark: #14141e; $dim1-color: #6366f1;