|
|
@@ -3,18 +3,19 @@
|
|
|
* 浠艾福 (XAF) Design System — UniApp SCSS Variables
|
|
|
* ============================================================
|
|
|
*
|
|
|
- * 色彩体系: 柔和天蓝 + 珊瑚暖色 (信任专业 + 家庭温暖)
|
|
|
- * 风格: 极简扁平圆角 (全角色统一)
|
|
|
+ * 色彩体系: 品牌橙 + 珊瑚暖色 (活力关怀 + 家庭温暖)
|
|
|
+ * 风格: 极简扁平圆角 (全角色统一)
|
|
|
* Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
|
|
|
- *
|
|
|
+ *
|
|
|
* 设计原则:
|
|
|
* - 扁平圆角:全端统一,无Claymorphism
|
|
|
- * - 蓝色为品牌色:传递信任/专业/平静
|
|
|
+ * - 品牌橙 #F97316 为主色:与 pages.json tabBar.selectedColor 一致(线上真值)
|
|
|
* - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀"
|
|
|
* - 心形符号:品牌识别元素
|
|
|
* - 减少装饰动效,聚焦内容可读性
|
|
|
*
|
|
|
- * v3.0 — 2026-06-06
|
|
|
+ * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
|
|
|
+ * (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明)
|
|
|
* ============================================================
|
|
|
*/
|
|
|
|
|
|
@@ -22,11 +23,12 @@
|
|
|
// 1. 品牌色彩 (Brand Colors)
|
|
|
// ============================================================
|
|
|
|
|
|
-// 主色调 - 柔和天蓝 (Logo蓝色)
|
|
|
-$uni-primary: #5B9BD5; // Logo中蓝 - 主品牌色
|
|
|
-$uni-primary-light: #8FC5E8; // 浅蓝
|
|
|
-$uni-primary-dark: #3A7CC4; // 深蓝
|
|
|
-$uni-primary-pale: #D6EAF8; // 极浅蓝 (Logo背景色)
|
|
|
+// 主色调 - 品牌橙(2026-10 令牌收敛:原 #5B9BD5 旧蓝与线上实际主色不一致,已翻转;
|
|
|
+// 现值与 $brand-primary / tabBar.selectedColor 三方一致,见 §12)
|
|
|
+$uni-primary: #F97316; // 品牌主色
|
|
|
+$uni-primary-light: #FB923C; // 浅橙
|
|
|
+$uni-primary-dark: #EA580C; // 深橙
|
|
|
+$uni-primary-pale: #FFF7ED; // 极浅橙 (品牌淡底)
|
|
|
|
|
|
// 辅助暖色 - 珊瑚粉 (家庭温暖)
|
|
|
$uni-warm: #F08A7A; // 心形暖色 - 保留"关爱"感
|
|
|
@@ -40,7 +42,7 @@ $uni-warning: #FFB74D;
|
|
|
$uni-warning-light: #FFD54F;
|
|
|
$uni-error: #EF5350;
|
|
|
$uni-error-light: #E57373;
|
|
|
-$uni-info: #5B9BD5; // 复用了品牌蓝
|
|
|
+$uni-info: #0EA5E9; // 信息蓝(2026-10 起独立于品牌色,不再复用主色)
|
|
|
|
|
|
// 中性色 (Neutral) — 冷调中性,匹配蓝色系
|
|
|
$uni-bg-color: #F5F9FC; // 极浅蓝灰背景
|
|
|
@@ -110,9 +112,9 @@ $uni-radius-round: 9999rpx;
|
|
|
// 5. 阴影 (Shadows) — 极简风格,轻微阴影
|
|
|
// ============================================================
|
|
|
|
|
|
-$uni-shadow-sm: 0 2rpx 8rpx rgba(91, 155, 213, 0.06);
|
|
|
-$uni-shadow-md: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
|
|
|
-$uni-shadow-lg: 0 8rpx 32rpx rgba(91, 155, 213, 0.10);
|
|
|
+$uni-shadow-sm: 0 2rpx 8rpx rgba(249, 115, 22, 0.06);
|
|
|
+$uni-shadow-md: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
|
|
|
+$uni-shadow-lg: 0 8rpx 32rpx rgba(249, 115, 22, 0.10);
|
|
|
$uni-shadow-inner: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
|
|
|
|
|
|
// ============================================================
|
|
|
@@ -128,11 +130,12 @@ $uni-transition-slow: 0.3s ease;
|
|
|
// ============================================================
|
|
|
|
|
|
:root {
|
|
|
- // 品牌色
|
|
|
- --color-primary: #5B9BD5;
|
|
|
- --color-primary-light: #8FC5E8;
|
|
|
- --color-primary-dark: #3A7CC4;
|
|
|
- --color-primary-pale: #D6EAF8;
|
|
|
+ // 品牌色(2026-10 由旧蓝 #5B9BD5 系翻转为品牌橙,与 §1 SCSS 变量同值;
|
|
|
+ // 注意 mp-weixin 对 :root 支持不稳,页面实际渲染以各处 var() 兜底值为准)
|
|
|
+ --color-primary: #F97316;
|
|
|
+ --color-primary-light: #FB923C;
|
|
|
+ --color-primary-dark: #EA580C;
|
|
|
+ --color-primary-pale: #FFF7ED;
|
|
|
--color-warm: #F08A7A;
|
|
|
--color-warm-light: #F4B0A5;
|
|
|
|
|
|
@@ -165,10 +168,10 @@ $uni-transition-slow: 0.3s ease;
|
|
|
--radius-lg: 12px;
|
|
|
--radius-xl: 16px;
|
|
|
|
|
|
- // 阴影 — 极简风格
|
|
|
- --shadow-sm: 0 1px 4px rgba(91, 155, 213, 0.06);
|
|
|
- --shadow-md: 0 2px 8px rgba(91, 155, 213, 0.08);
|
|
|
- --shadow-lg: 0 4px 16px rgba(91, 155, 213, 0.10);
|
|
|
+ // 阴影 — 极简风格(色调随品牌色翻转为橙,2026-10)
|
|
|
+ --shadow-sm: 0 1px 4px rgba(249, 115, 22, 0.06);
|
|
|
+ --shadow-md: 0 2px 8px rgba(249, 115, 22, 0.08);
|
|
|
+ --shadow-lg: 0 4px 16px rgba(249, 115, 22, 0.10);
|
|
|
}
|
|
|
|
|
|
// ============================================================
|