/** * ============================================================ * 浠艾福 (XAF) Design System — UniApp SCSS Variables * ============================================================ * * 色彩体系: 品牌橙 + 珊瑚暖色 (活力关怀 + 家庭温暖) * 风格: 极简扁平圆角 (全角色统一) * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形 * * 设计原则: * - 扁平圆角:全端统一,无Claymorphism * - 品牌橙 #F97316 为主色:与 pages.json tabBar.selectedColor 一致(线上真值) * - 珊瑚暖色为点缀:保留"家庭温暖"和"关怀" * - 心形符号:品牌识别元素 * - 减少装饰动效,聚焦内容可读性 * * v3.1 — 2026-10-18 品牌令牌收敛:$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙 * (旧蓝与 tabBar.selectedColor / 线上实际主色不一致,详见 §12 背景说明) * v3.2 — 2026-10-18 维度生态共享令牌:新增 §16(B 批 mind-detail 15 兄弟页收敛) * ============================================================ */ // ============================================================ // 1. 品牌色彩 (Brand Colors) // ============================================================ // 主色调 - 品牌橙(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; // 心形暖色 - 保留"关爱"感 $uni-warm-light: #F4B0A5; $uni-warm-dark: #E06A58; // 语义色 (Semantic) $uni-success: #4CAF50; $uni-success-light: #81C784; $uni-warning: #FFB74D; $uni-warning-light: #FFD54F; $uni-error: #EF5350; $uni-error-light: #E57373; $uni-info: #0EA5E9; // 信息蓝(2026-10 起独立于品牌色,不再复用主色) // 中性色 (Neutral) — 冷调中性,匹配蓝色系 $uni-bg-color: #F5F9FC; // 极浅蓝灰背景 $uni-bg-color-grey: #EDF2F7; // 浅灰蓝 $uni-bg-color-dark: #E2E8F0; // 灰蓝 $uni-surface: #FFFFFF; // 卡片/表面 $uni-border-color: #CBD5E1; // 冷灰边框 $uni-border-color-light: #E2E8F0; $uni-text-color: #1E293B; // 深蓝灰 (正文) $uni-text-color-secondary: #64748B; // 次要文字 $uni-text-color-grey: #94A3B8; // 灰色文字 $uni-text-color-placeholder: #94A3B8; $uni-text-color-inverse: #FFFFFF; // ============================================================ // 2. 字体系统 (Typography) // ============================================================ // 字体栈 - 小程序不支持自定义字体 $uni-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif; $uni-font-family-display: $uni-font-family; $uni-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; // 字号 $uni-font-size-xs: 20rpx; $uni-font-size-sm: 24rpx; $uni-font-size-base: 28rpx; $uni-font-size-lg: 32rpx; $uni-font-size-xl: 36rpx; $uni-font-size-2xl: 44rpx; $uni-font-size-3xl: 52rpx; // 字重 $uni-font-weight-normal: 400; $uni-font-weight-medium: 500; $uni-font-weight-bold: 600; $uni-font-weight-black: 700; // ============================================================ // 3. 间距系统 (Spacing) // ============================================================ $uni-spacing-xs: 8rpx; $uni-spacing-sm: 16rpx; $uni-spacing-md: 24rpx; $uni-spacing-lg: 32rpx; $uni-spacing-xl: 48rpx; $uni-spacing-2xl: 64rpx; $uni-page-padding: 32rpx; // ============================================================ // 4. 圆角 (Border Radius) // ============================================================ $uni-radius-sm: 10rpx; $uni-radius-md: 16rpx; $uni-radius-lg: 24rpx; $uni-radius-xl: 32rpx; $uni-radius-full: 50%; $uni-radius-round: 9999rpx; // ============================================================ // 5. 阴影 (Shadows) — 极简风格,轻微阴影 // ============================================================ $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); // ============================================================ // 6. 动画 (Animations) — 节制使用 // ============================================================ $uni-transition-fast: 0.15s ease; $uni-transition-base: 0.25s ease; $uni-transition-slow: 0.3s ease; // ============================================================ // 7. CSS 自定义属性 // ============================================================ :root { // 品牌色(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; // 语义色 --color-success: #4CAF50; --color-warning: #FFB74D; --color-error: #EF5350; // 中性色 --bg: #F5F9FC; --bg-grey: #EDF2F7; --surface: #FFFFFF; --text: #1E293B; --text-secondary: #64748B; --muted: #94A3B8; --border: #CBD5E1; --border-light: #E2E8F0; // 间距 --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-page: 16px; // 圆角 --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; // 阴影 — 极简风格(色调随品牌色翻转为橙,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); } // ============================================================ // 8. 实用工具类 // ============================================================ // --- 文字色彩 --- .text-primary { color: $uni-primary; } .text-warm { color: $uni-warm; } .text-success { color: $uni-success; } .text-warning { color: $uni-warning; } .text-error { color: $uni-error; } .text-muted { color: $uni-text-color-grey; } .text-secondary { color: $uni-text-color-secondary; } .text-bold { font-weight: $uni-font-weight-bold; } .text-black { font-weight: $uni-font-weight-black; } .text-center { text-align: center; } // 正文工具类跟随用户字号系数(--font-scale);使用方式:在根节点 :style="{ '--font-scale': fontScale }" .text-sm { font-size: calc($uni-font-size-sm * var(--font-scale, 1)); } .text-base { font-size: calc($uni-font-size-base * var(--font-scale, 1)); } .text-lg { font-size: calc($uni-font-size-lg * var(--font-scale, 1)); } .text-xl { font-size: calc($uni-font-size-xl * var(--font-scale, 1)); } .text-2xl { font-size: calc($uni-font-size-2xl * var(--font-scale, 1)); } .text-3xl { font-size: calc($uni-font-size-3xl * var(--font-scale, 1)); } // --- 背景 --- .bg-primary { background-color: $uni-primary; } .bg-warm { background-color: $uni-warm; } .bg-surface { background-color: $uni-surface; } .bg-page { background-color: $uni-bg-color; } // --- 圆角 --- .radius-sm { border-radius: $uni-radius-sm; } .radius-md { border-radius: $uni-radius-md; } .radius-lg { border-radius: $uni-radius-lg; } .radius-xl { border-radius: $uni-radius-xl; } // --- 弹性布局 --- .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .gap-xs { gap: $uni-spacing-xs; } .gap-sm { gap: $uni-spacing-sm; } .gap-md { gap: $uni-spacing-md; } .gap-lg { gap: $uni-spacing-lg; } // --- 间距 --- .m-0 { margin: 0; } .p-0 { padding: 0; } .p-sm { padding: $uni-spacing-sm; } .p-md { padding: $uni-spacing-md; } .p-lg { padding: $uni-spacing-lg; } .mt-sm { margin-top: $uni-spacing-sm; } .mt-md { margin-top: $uni-spacing-md; } .mt-lg { margin-top: $uni-spacing-lg; } .mb-sm { margin-bottom: $uni-spacing-sm; } .mb-md { margin-bottom: $uni-spacing-md; } .mb-lg { margin-bottom: $uni-spacing-lg; } // --- 其他 --- .w-full { width: 100%; } .h-full { height: 100%; } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // ============================================================ // 9. 扁平圆角卡片 (Flat Rounded Card) — 全端统一风格 // ============================================================ @mixin flat-card($border-color: $uni-border-color-light) { border-radius: $uni-radius-md; background: $uni-surface; border: 1rpx solid $border-color; box-shadow: $uni-shadow-sm; } @mixin flat-button($bg-color: $uni-primary) { border-radius: $uni-radius-lg; background: $bg-color; color: #FFFFFF; border: none; transition: opacity $uni-transition-fast; &:active { opacity: 0.85; } } .flat-card { @include flat-card; } // ============================================================ // 10. 关键帧动画(精简) // ============================================================ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20rpx); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes pulseSoft { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } // 动画实用类 .animate-fade-in { animation: fadeIn $uni-transition-base both; } .animate-slide-up { animation: slideUp $uni-transition-slow both; } .animate-scale-in { animation: scaleIn $uni-transition-slow both; } .animate-pulse-soft { animation: pulseSoft 3s ease-in-out infinite; } // 交错入场 @for $i from 1 through 20 { .animate-stagger-#{$i} { animation-delay: #{$i * 60}ms; } } // ============================================================ // 11. 骨架屏 // ============================================================ @mixin skeleton { background: linear-gradient( 90deg, $uni-border-color-light 25%, #F5F9FC 50%, $uni-border-color-light 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: $uni-radius-sm; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { @include skeleton; } .skeleton-text { @include skeleton; height: 28rpx; margin-bottom: 12rpx; } .skeleton-block { @include skeleton; height: 160rpx; } // ============================================================ // 12. 五维 + 品牌运行时令牌(对齐真实线上视觉) // ============================================================ // 背景:原 $uni-primary(#5B9BD5 蓝) 与线上实际主色不一致,且五维色长期硬编码在页面里。 // 本段补齐「真实在用」的语义令牌;页面改用这些名字,避免逐个硬编码。 // 注意:mp-weixin 对 CSS var(--x) 运行时解析不稳定,故统一用 SCSS 变量(编译期内联,零运行时风险)。 // 品牌主色 —— 与 pages.json tabBar.selectedColor 一致 $brand-primary: #F97316; $brand-primary-dark: #EA580C; $brand-primary-soft: rgba(249, 115, 22, 0.12); // 五维身份色:页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用 $dim-body: #FF8C42; $dim-mind: #FF6B9D; $dim-wisdom: #6366F1; $dim-action: #10B981; $dim-wealth: #F59E0B; $dim-body-soft: rgba(255, 140, 66, 0.15); $dim-mind-soft: rgba(255, 107, 157, 0.15); $dim-wisdom-soft: rgba(99, 102, 241, 0.15); $dim-action-soft: rgba(16, 185, 129, 0.15); $dim-wealth-soft: rgba(245, 158, 11, 0.15); // 语义角色(与应用真实观感一致) $app-bg: #F5F7FA; $app-surface: #FFFFFF; $app-surface-subtle: #F7F8FA; $app-text: #17181C; $app-text-secondary: #606875; $app-text-muted: #8A94A3; $app-border-subtle: #E7EBF0; $app-border: #CBD5E1; // 状态:按压/禁用用透明度与语言表达,不新增多套颜色 $press-opacity: 0.85; $disabled-opacity: 0.45; // 动效令牌:只声明稳定属性,禁止 transition: all $ease-standard: cubic-bezier(0.4, 0, 0.2, 1); $dur-press: 0.12s; $dur-state: 0.2s; $dur-structural: 0.26s; // 可复用 mixin @mixin dim-card($radius: $uni-radius-md) { background: $app-surface; border-radius: $radius; box-shadow: $uni-shadow-sm; } @mixin press-scale { transition: opacity $dur-press $ease-standard, transform $dur-press $ease-standard; &:active { opacity: $press-opacity; } } @mixin touch-target($size: 88rpx) { min-height: $size; min-width: $size; } // ============================================================ // 13. 状态色阶 / 品牌亮阶 / 维度浅底 // ============================================================ // 状态色只用于传达状态,禁止当装饰使用;浅底为不透明 tint,用于卡片与分区背景。 // 状态色阶 $status-success: #10B981; $status-success-soft: #D1FAE5; $status-success-strong: #065F46; $status-warning: #FBBF24; $status-warning-soft: #FEF3C7; $status-warning-strong: #92400E; $status-danger: #EF4444; $status-danger-soft: #FEE2E2; $status-danger-strong: #B91C1C; // 品牌橙亮阶(渐变/高亮用) $brand-primary-light: #FB923C; // 维度浅底(不透明 tint) $dim-body-tint: #FFF8F0; $dim-mind-tint: #FFF0F5; $dim-wisdom-tint: #F0F0FF; $dim-action-tint: #F0FFF4; $dim-wealth-tint: #FFFBEB; // 边框与文字的次级阶 $app-border-strong: #D1D5DB; $app-text-subtle: #94A3B8; // ============================================================ // 14. 状态深阶 / 品牌深阶(收尾:跨页共性) // ============================================================ // -deep 为色板 600 档,用于状态文字与强调;-tint 为极浅底。 // 仅收录在 2 个及以上页面中复用的色值,单页专有色阶由页面级局部变量承载。 // 状态深阶(文字 / 强调) $status-danger-deep: #DC2626; // 危险态文字:较差 / 已过期 $status-danger-tint: #FEF2F2; // 危险态极浅底 $status-warning-deep: #D97706; // 警示态文字 $status-success-deep: #059669; // 成功态文字 $status-success-text: #16A34A; // 成功态文字(green-600) // 品牌 / 身 深阶文字 $brand-primary-deep: #C2410C; // ============================================================ // 15. 共享门面令牌(A 批 6 个门面页收敛,2026-10-18) // ============================================================ // 来源:index-home / health-main / profile-main / growth-main / cognitive-hall / // service-center 六页原页面级局部调色板中跨页复用(≥2 页同值)的变量。 // 命名:$facade- 前缀与页面局部 $c- 完全隔离,永不同名冲突。 // 同名不同值的处理:$c-text-ghost 曾一页 #BBB / 四页 #CCC,拆为 // $facade-text-ghost(#CCC) 与 $facade-text-ghost-light(#BBB) 两档,保零观感变化。 // $c-text-slate-2 曾 #6B7280×2 / #64748B×1:仅提升 #6B7280 为 $facade-text-slate, // #64748B 为单页专有色,留在页面局部。 // 各页单页专有色阶(维度深/浅阶、Material/Element/Ant 状态色等)仍由页面级局部变量承载。 // 文字阶(6 页门面共用) $facade-text-muted: #999; // 次要文字(6 页复用) $facade-text-body: #666; // 正文灰(5 页复用) $facade-text-faint: #888; // 弱文字(5 页复用) $facade-text-strong: #333; // 强文字(4 页复用) $facade-text-ghost: #CCC; // 幽灵灰(4 页复用) $facade-text-ghost-light: #BBB; // 幽灵灰浅档(index-home + cognitive-hall) $facade-text-deep: #555; // 深灰文字(health-main + growth-main) $facade-text-slate: #6B7280; // gray-500(health-main + profile-main) // 填充阶 $facade-fill: #F0F0F0; // 占位/分隔(4 页复用) $facade-fill-2: #F5F5F5; // 浅灰填充(index-home + growth-main) $facade-fill-cool: #F7F7F7; // 冷灰填充(health-main + growth-main) $facade-fill-warm-gray: #F8F4EF; // 暖灰填充(profile-main + service-center) // 品牌淡底(orange-50/100) $facade-brand-tint: #FFF7ED; // 品牌极浅底(4 页复用) $facade-brand-tint-2: #FFEDD5; // 品牌浅底(index-home + growth-main) // 维度共用色 $facade-violet: #8B5CF6; // violet-500(index-home + cognitive-hall + service-center) // ============================================================ // 16. 维度生态共享令牌(B 批 mind-detail 15 兄弟页收敛,2026-10-18) // ============================================================ // 来源:mind-detail 生态(index.vue 除外,其已全令牌化)15 个兄弟文件 // (articles / duo-compatibility / emotion-checkin / emotion-report / emotion-trend / // family-dashboard / innate-portrait / innate-trajectory / member-mind-detail / // screening / soothe-toolbox / traditional-mirror / training + // components/FamilyTianpanCard / components/PsychCrisisBanner)。 // 收敛规则同 §14:≥2 页同值进全局;同名不同值拆双档;单页专有留 $c- 局部。 // ---- 心理(mind)维度专有族 ---- $dim-mind-light: #FF8CB3; // mind 亮粉·渐变端(emotion-checkin + emotion-trend) $dim-mind-light-2: #FF8FB1; // mind 亮粉·副档(FamilyTianpanCard + family-dashboard,同角色不同值) $dim-mind-tint-2: #FFF0F3; // mind 粉浅底·副档(vs $dim-mind-tint #FFF0F5;FamilyTianpanCard + family-dashboard) $mind-accent: #FF6B35; // 情绪/成就强调橙(emotion-report + member-mind-detail + index.vue 的 $c-accent 同值) // ---- violet 伴生档($facade-violet 的亮阶与浅底)---- $facade-violet-light: #A78BFA; // violet-400(duo-compatibility + emotion-checkin + member-mind-detail) $facade-violet-tint: #F5F0FF; // violet 浅底(emotion-checkin + innate-portrait + traditional-mirror) // ---- 文字补档 ---- $facade-text-deep-2: #444; // 深灰文字·副档(vs $facade-text-deep #555;innate-portrait + innate-trajectory + screening) // ---- tailwind gray 阶(全库高频复用,B 批 family-dashboard 收敛时登记)---- $facade-fill-gray-50: #F9FAFB; // gray-50 页面浅灰底(6 文件) $facade-fill-gray-100: #F3F4F6; // gray-100 发丝分隔/浅填充(13 文件) $facade-gray-200: #E5E7EB; // gray-200 填充/描边兼用(18 文件) $facade-text-gray-400: #9CA3AF; // gray-400 弱文字(18 文件) $facade-text-gray-700: #374151; // gray-700 深文字(12 文件) // ---- 运势五级 ramp(mind-detail index + FamilyTianpanCard 共用,Material 色系)---- $fortune-0-ink: #D32F2F; // 大凶(red-700) $fortune-0-tint: #FFEBEE; // red-50 $fortune-1-ink: #E65100; // 凶(orange-900) $fortune-1-tint: #FFF3E0; // orange-50 $fortune-2-ink: #F9A825; // 平(yellow-800) $fortune-2-tint: #FFFDE7; // yellow-50 $fortune-3-ink: #7B1FA2; // 吉(purple-700) $fortune-3-tint: #F3E5F5; // purple-50 $fortune-4-ink: #B71C1C; // 大吉(red-900) $fortune-4-tint: #FFCDD2; // red-100 // ---- 洞察文案 ---- $mind-insight-ink: #8B6914; // 洞察/宜忌文案棕金(mind-detail index + FamilyTianpanCard) // ---- 全库高频补档(B 批 emotion-report 收敛时登记)---- $accent-gold: #FFD700; // 金(14 文件) $status-success-tint: #ECFDF5; // emerald-50(11 文件;vs $status-success-soft #D1FAE5 深档) $status-info-tint: #EFF6FF; // blue-50(3 文件) $status-danger-tint-2: #FEF2F2; // tailwind red-50(11 文件;vs $status-danger-tint #FFF5F5 自定义浅档) $facade-border-soft: #DDD; // 描边灰(46 文件) $app-ink-night: #1A1A2E; // 深夜蓝黑(17 文件) // ---- 封面渐变 / 提示条(B 批 articles 收敛时登记)---- $accent-indigo: #667EEA; // 靛紫渐变起点(封面/卡片,37 文件) $accent-indigo-deep: #764BA2; // 靛紫渐变终点(26 文件) $tint-info-soft: #E8F4FD; // 信息蓝浅底(article-edit + articles) $hint-cream-bg: #FEF9E7; // 提示条奶油底(articles + shop/index) $hint-cream-border: #F0E6C0; // 提示条奶油描边(articles + shop/index) $hint-gold-ink: #B8860B; // 提示条金褐文字(8 文件) $facade-fill-page: #F8F8F8; // 页面灰底(33 文件;health-main 原 $c-fill-warm 同值收敛于此) // ---- 状态色渐变阶(B 批 soothe-toolbox 收敛时登记)---- $status-success-tint-2: #F0FDF4; // green-50(13 文件;vs $status-success-tint #ECFDF5) $status-success-light: #A7F3D0; // green-200 薄荷渐变浅档(2 文件) $status-success-light-2:#6EE7B7; // green-300 薄荷渐变深档(3 文件) $status-warning-light: #FDE68A; // amber-200(11 文件;vs $status-warning-soft #FEF3C7) $tint-sky-soft: #F0F9FF; // sky-50 浅蓝底(7 文件) $status-info-deep: #2563EB; // blue-600 深信息蓝(9 文件;vs $status-info #3B82F6) $app-ink-night-2: #16213E; // 深夜蓝黑·中档(13 文件) $app-ink-night-3: #0F3460; // 深夜蓝黑·深档(2 文件) // ---- 状态色补档(与 §13 既有令牌同角色不同值,拆档保零观感)---- $status-info: #3B82F6; // 信息蓝(vs $uni-info #0EA5E9;PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox) $status-danger-tint: #FFF5F5; // red-50 浅底(vs $status-danger-soft #FEE2E2;PsychCrisisBanner + emotion-checkin + screening) // ---- 填充补档($facade-fill 系的加深/暖色/近白档)---- $facade-fill-3: #EEEEEE; // 灰填充·深(vs $facade-fill #F0F0F0;articles + emotion-checkin + training) $facade-fill-warm-tint:#F8F6F0; // 暖灰浅底(vs $facade-fill-warm-gray #F8F4EF;duo-compatibility + innate-portrait + innate-trajectory + traditional-mirror) $facade-fill-ghost: #FAFAFA; // 近白填充(duo-compatibility + emotion-checkin + screening) $facade-fill-ghost-2: #F9F9F9; // 近白填充·副档(emotion-checkin + emotion-report + soothe-toolbox,同角色不同值)