# 数字能量学 AI 智能体 — 前端样式指南
> 适用于 UniApp (Vue 3) 微信小程序前端
> 对齐 `design-taste-frontend` 参数：DESIGN_VARIANCE=8 / MOTION_INTENSITY=6 / VISUAL_DENSITY=4
---
## 一、品牌定位
**数码能量学** — 用数字能量学 + AI 解读，帮助用户了解自己的命盘。
| 维度 | 描述 |
|------|------|
| **调性** | 神秘、专业、可信赖、不过度玄学 |
| **视觉关键词** | 深邃/金/墨蓝/卡片质感/呼吸感留白/微动效 |
| **目标用户** | 25-45岁，对数字能量学感兴趣，寻求职业/财运/感情指导 |
| **竞品差异** | 专业度（vs 娱乐命理类）+ AI 深度（vs 传统手绘） |
---
## 二、色彩系统
### 2.1 主色调
| 色名 | 色值 | 用途 | 说明 |
|------|------|------|------|
| **墨蓝** | `#1E3A5F` | 品牌主色（深蓝） | 导航栏、标题、品牌背景 |
| **暗金** | `#C9A84C` | 品牌点缀（金色） | 数字能量主题色、VIP标记、CTA强调 |
| **矿白** | `#F8F6F1` | 页面背景（暖白） | 所有页面的主背景色 |
| **纯白** | `#FFFFFF` | 卡片背景 | 所有卡片容器的底色 |
### 2.2 辅助色
| 色名 | 色值 | 用途 |
|------|------|------|
| 翡翠绿 | `#2D8B67` | 成功、已支付、已结算 |
| 琥珀黄 | `#D4A017` | 警告、待支付、种子价标记 |
| 珊瑚红 | `#D94A4A` | 错误、已过期、删除操作 |
| 冰川蓝 | `#4A90D9` | 链接、跳转、次要CTA |
### 2.3 中性色
| 色名 | 色值 | 用途 |
|------|------|------|
| 墨黑 | `#1A1A2E` | 主文字 |
| 石板灰 | `#4A5568` | 次文字、描述 |
| 银灰 | `#A0AEC0` | 占位符、禁用态 |
| 雾白 | `#E2E8F0` | 分割线、边框 |
| 骨白 | `#F7F4EF` | 卡片背景（次） |
### 2.4 命盘数字色
```
1（创造/自主）: #D94A4A · 赤红
2（合作/平衡）: #4A90D9 · 冰蓝
3（表达/创意）: #E8A238 · 琥珀
4（稳定/规则）: #2D8B67 · 翡翠
5（自由/变化）: #D4A017 · 金
6（关怀/责任）: #7B6FA0 · 紫灰
7（分析/灵性）: #4A6FA5 · 靛蓝
8（权力/财富）: #C9A84C · 暗金
9（智慧/完成）: #B85C3A · 铜橙
```
### 2.5 色值使用约束
- **禁止 #000000**：文字使用 `#1A1A2E` 而非纯黑
- **禁止饱和色大面积使用**：主色墨蓝饱和度已控制，避免视觉疲劳
- **AI 蓝紫禁令**：不使用标准 AI 产品的蓝紫色渐变（与竞品拉开差异）
---
## 三、字体系统
### 3.1 字族
微信小程序仅支持系统字体，无法自定义引入 web font：
```scss
// 中文
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue',
'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
// 数字（命盘数据场景）
font-family: 'Georgia', 'Times New Roman', serif;
/* 命盘中的关键数字使用衬线字体，与 UI 文字形成对比，强调"数字"的庄重感 */
```
### 3.2 字号层级
| 层级 | 字号 | 字重 | 行高 | 场景 |
|------|------|------|------|------|
| **H1** | 24px | 700 | 1.3 | 页面标题、命盘页主数字 |
| **H2** | 20px | 700 | 1.4 | 卡片标题、模態標題 |
| **H3** | 18px | 600 | 1.4 | 区块小标题 |
| **Body** | 15px | 400 | 1.6 | 正文、解读内容 |
| **Caption** | 13px | 400 | 1.4 | 辅助文字、标签 |
| **Micro** | 11px | 400 | 1.3 | 角标、时间戳 |
### 3.3 字号规范
- **最小可读字号**：11px（角标场景），正文不低于 15px
- **按钮文字**：16px（主按钮）、14px（次按钮）
- **弹窗标题**：18px bold
- **金额数字**：使用 700 字重，字体加宽强调
---
## 四、间距与布局
### 4.1 基准间距
```scss
$space-xxs: 4px;
$space-xs: 8px;
$space-sm: 12px;
$space-md: 16px;
$space-lg: 24px;
$space-xl: 32px;
$space-2xl: 48px;
```
### 4.2 页面布局规范
```
┌─────────────────────┐
│ NavBar（原生） │ 44px（微信原生）
├─────────────────────┤
│ │
│ 内容区域 │ padding: 0 $space-md
│ ┌───────────────┐ │
│ │ 卡片 1 │ │ margin-bottom: $space-md
│ │ │ │
│ └───────────────┘ │
│ ┌───────────────┐ │
│ │ 卡片 2 │ │
│ └───────────────┘ │
│ │
├─────────────────────┤
│ TabBar（原生） │ 50px（微信原生）
└─────────────────────┘
```
### 4.3 卡片规范
| 属性 | 值 |
|------|-----|
| 背景色 | `#FFFFFF` |
| 圆角 | `16px`（大卡片）/ `12px`（小卡片） |
| 内边距 | `20px`（上下）/ `16px`（左右） |
| 阴影 | `0 2px 12px rgba(26, 26, 46, 0.06)` — 扩散阴影，轻盈 |
| 边框 | 无边框，仅通过阴影和背景分离 |
**卡片容器标准 CSS：**
```scss
.card {
background: #FFFFFF;
border-radius: 16px;
padding: 20px 16px;
margin-bottom: 16px;
box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
}
```
### 4.4 布局模式
根据 DESIGN_VARIANCE = 8，优先使用非对称布局：
- **首页**：输入区域居中（强引导），结果预览区错开排列
- **命盘页**：三角图居中，AI 解读区左对齐，订阅入口通栏
- **分销面板**：顶部统计三列等宽，下方列表通栏（数据密集型简化）
- **个人中心**：头像居中，下方功能列表通栏
---
## 五、组件视觉规范
### 5.1 按钮
| 类型 | 背景 | 文字 | 圆角 | 高度 | 场景 |
|------|------|------|------|------|------|
| **主按钮** | `#1E3A5F` | `#FFFFFF` | `12px` | `48px` | 支付、开通、保存 |
| **行动按钮** | `#C9A84C` | `#FFFFFF` | `12px` | `44px` | 生成命盘、立即推广 |
| **次要按钮** | `#FFFFFF` + 1px `#E2E8F0` 边框 | `#1A1A2E` | `10px` | `40px` | 取消、返回 |
| **文字按钮** | 透明 | `#4A90D9` | — | `auto` | 链接、跳转 |
**交互反馈：**
```scss
button:active {
transform: scale(0.97);
opacity: 0.9;
}
```
所有按钮的 `:active` 状态必须有视觉反馈（缩小 + 透明度变化），模拟物理按压感。
**禁用态：**
```scss
button[disabled] {
opacity: 0.5;
pointer-events: none;
}
```
### 5.2 输入框
```
┌─────────────────────────┐
│ 姓名（选填） │ label(14px, #4A5568)
│ ┌─────────────────────┐ │
│ │ 请输入姓名 │ │ input(16px, 44px height)
│ └─────────────────────┘ │ 8px border-radius, 1px #E2E8F0 border
│ │
│ 出生年份 │
│ ┌─────────────────────┐ │
│ │ 例如 1990 │ │
│ └─────────────────────┘ │
│ │
│ 月份 日期 │ 水平并排
│ ┌─────────┐ ┌─────────┐│
│ │ 1-12 │ │ 1-31 ││
│ └─────────┘ └─────────┘│
└─────────────────────────┘
```
**焦点态：** `border-color: #1E3A5F` + `box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1)`
**错误态：** `border-color: #D94A4A` + 底部红色提示文字
### 5.3 标签（Tag）
| 类型 | 背景 | 文字 | 场景 |
|------|------|------|------|
| 成功 | `#E6F7EE` | `#2D8B67` | 已结算、已支付 |
| 警告 | `#FFF8E6` | `#D4A017` | 待支付、种子价 |
| 信息 | `#EBF2FA` | `#4A90D9` | L1 佣金 |
| 次要 | `#F0EEEA` | `#7B6FA0` | L2 佣金 |
| 金牌 | `#FFF6E0` + `#C9A84C` border | `#8B6914` | VIP、能量师 |
**圆角：** `6px`，内边距 `4px 10px`，字号 `12px`
### 5.4 状态指示
- **加载态**：原生页面级 loading + 区块骨架屏（灰色渐变脉冲动画）
- **空数据态**：居中灰色图标 + 14px 灰文字提示 + 引导操作按钮
- **错误态**：内联红色提示（输入错误）/ 页面级错误重试按钮（网络错误）
- **成功态**：`uni.showToast` success 图标 + 文字
### 5.5 骨架屏规范
```scss
@keyframes shimmer {
0% { background-position: -200px 0; }
100% { background-position: 200px 0; }
}
.skeleton {
background: linear-gradient(90deg, #F0EEEA 25%, #F8F6F1 50%, #F0EEEA 75%);
background-size: 400px 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 8px;
}
```
骨架片尺寸匹配实际内容区域（不额外创建包装盒）。
---
## 六、各页面视觉设计
### 6.1 首页 — 信息输入
```
┌─────────────────────┐
│ 数码能量学 │ NavBar（品牌色 #1E3A5F，白色文字）
├─────────────────────┤
│ │
│ ┌───────────────┐ │
│ │ │ │
│ │ 🔮 输入出生 │ │ 中心卡片（背景白，最大宽度）
│ │ 信息 │ │
│ │ │ │
│ │ 姓名（选填） │ │
│ │ ┌─────────┐ │ │
│ │ │ │ │ │
│ │ └─────────┘ │ │
│ │ 出生年月日 │ │
│ │ ┌──┐ ┌──┐ │ │
│ │ │年│ │月│ │日│ │ │
│ │ └──┘ └──┘ │ │
│ │ │ │
│ │ ┌─────────┐ │ │
│ │ │ 生成命盘 │ │ 行动按钮（金色）
│ │ └─────────┘ │ │
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ ✦ 功能介绍 │ │ 轻量卡片，展示 3 个功能点
│ │ 命盘/AI/分享 │ │ 水平排列，图标+文字
│ └───────────────┘ │
│ │
├─────────────────────┤
│ 首页│命盘│AI│我的 │ TabBar
└─────────────────────┘
```
**设计要点：**
- NavBar 使用墨蓝底色，标题白色，返回箭头白色
- 输入卡片置中，四周留呼吸空间
- 功能引导卡片使用浅灰色圆角图标 + 文字
- 生成命盘按钮使用金色 `#C9A84C`，与品牌名呼应
### 6.2 命盘解读页
```
┌─────────────────────┐
│ ← 数字能量命盘 │ NavBar（透明背景，白色返回箭头）
├─────────────────────┤
│ ┌───────────────┐ │
│ │ O │ │
│ │ J K │ │ 三角图（Canvas居中）
│ │ F G H I │ │ 圆角数字卡片，按类型着色
│ │ A B C D E │ │
│ └───────────────┘ │
│ 姓名：张三 │
│ 1990-01-15 │ 灰色小字
│ │
│ ─── 数字说明 ─── │
│ 主性格 7：分析洞察 │ 可折叠解释区域
│ 1号位：独立 │
│ │
│ ┌───────────────┐ │
│ │ AI 解读 │ │
│ │ ┌─────────┐ │ │ AI 消息气泡
│ │ │ AI文字...│ │ │ 白色气泡（AI）/ 蓝色气泡（用户）
│ │ └─────────┘ │ │
│ │ [职业] [财运] │ │ 快速提问芯片
│ │ ┌─────┐ [发]│ │ 输入框 + 发送按钮
│ │ │输入..│ │ │
│ │ └─────┘ │ │
│ └───────────────┘ │
│ │
│ ═══════════════════ │ 虚线分隔
│ │
│ ┌───────────────┐ │
│ │ 🔮 AI解读会员 │ │ 订阅引导卡片（未付费可见）
│ │ ¥131/年 │ │
│ │ 解锁完整分析 │ │
│ │ ┌─────────┐ │ │
│ │ │ 立即开通 │ │ │ 金色按钮
│ │ └─────────┘ │ │
│ └───────────────┘ │
│ │
│ ─── 数字点击弹窗 ─── │
│ ┌─────────────────┐│
│ │ 7 ││ 底部弹出面板
│ │ 主性格 ││ 圆角顶部，毛玻璃效果
│ │ 分析洞察、... ││
│ │ ───────────── ││
│ │ 1号位：独立自主 ││
│ └─────────────────┘│
├─────────────────────┤
│ 首页│命盘│AI│我的 │
└─────────────────────┘
```
**设计要点：**
- 三角图区域上下留白，不紧贴文字
- AI 解读采用微信消息气泡样式（白色 vs 蓝色）
- 快速提问芯片使用 `#EBF2FA` 背景 + `#1E3A5F` 文字
- 底部订阅卡片与 AI 区域用虚线分隔
- 数字点击弹窗从底部上滑，顶部圆角 20px
### 6.3 AI 解读页
```
┌─────────────────────┐
│ AI 命盘解读 │
├─────────────────────┤
│ │
│ ┌───────────────┐ │
│ │ 主性格 │ │ 章节卡片
│ │ 7 · 分析洞察 │ │ 标题金色小方块标记
│ │ ... │ │ 正文 15px，行高 1.8
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ 左区（0-20岁） │ │ 可折叠
│ │ ... │ │ 展开/收起箭头
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ 中区（20-40岁） │ │
│ └───────────────┘ │
│ │
│ 本解读由 AI 生成， │ 免责声明（11px 灰色居中）
│ 仅供参考 │
│ │
│ ┌───────────────┐ │
│ │ ¥131 开通完整 │ │ 固定底部（未付费）
│ │ 解读 │ │ 金色渐变
│ └───────────────┘ │
│ │
├─────────────────────┤
│ TabBar │
└─────────────────────┘
```
**设计要点：**
- 每章节为一个独立的白色卡片，用阴影分隔
- 章节标题左侧有 3px 宽的 `#C9A84C` 色条（`border-left: 3px solid #C9A84C`）
- 可折叠章节默认展开第一个，其余折叠
- 免费用户底部固定一个金色渐变条
### 6.4 分销面板
```
┌─────────────────────┐
│ 分销中心 ← │
├─────────────────────┤
│ │
│ ┌───────────────┐ │
│ │ 我的推广码 │ │ 推广码卡片
│ │ ABC123 [复制] │ │ 码用 18px 等宽字体
│ │ [生成推广海报 →] │ │
│ └───────────────┘ │
│ │
│ ┌─────┐┌─────┐┌─────┤
│ │总收益││可提现││今日 │ 三列等宽统计卡片
│ │¥500 ││¥500 ││¥0 │ 数字墨黑，标签银灰
│ └─────┘└─────┘└─────┘
│ │
│ 团队统计 │ 标题(14px, #4A5568)
│ 直接 5 间接 12 升级 3│ 三列数字(24px bold) + 标签
│ │
│ ┌───────────────┐ │
│ │ 佣金明细 │ │
│ │ 05-28 用户**** │ │
│ │ L1 +¥500 │ │ L1蓝标签，金额绿色
│ │ 05-27 用户**** │ │
│ │ L2 +¥100 │ │ L2紫标签
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ 📱 生成推广海报 │ │ 按钮列表（通栏）
│ │ 🔗 复制推广链接 │ │ 左边图标+文字，右边箭头
│ │ 📊 提现(即将开放) │ │ 置灰不可点
│ └───────────────┘ │
│ │
├─────────────────────┤
│ TabBar │
└─────────────────────┘
```
**设计要点：**
- 推广码使用等宽字体（`font-family: monospace`），与 UI 文字区分
- 统计数字使用 28px 700 字重，突出数据
- 佣金列表每项用 1px `#E2E8F0` 分割线分隔
- L1 标签蓝色，L2 标签紫色，与佣金等级对应
### 6.5 个人中心
```
┌─────────────────────┐
│ 我的 │
├─────────────────────┤
│ │
│ ┌───────────────┐ │
│ │ (头像) │ │ 用户卡片(居中)
│ │ 张三 │ │ 16px bold
│ │ 🔮 能量师会员 │ │ 金色VIP标记
│ │ 有效期至... │ │
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ 📋 我的分析 ›│ │ 功能菜单列表
│ │ 💰 我的推广 ›│ │ 仅能量师可见
│ │ ℹ️ 关于我们 ›│ │
│ └───────────────┘ │
│ │
│ ┌───────────────┐ │
│ │ 退出登录 │ │ 红色文字
│ └───────────────┘ │
│ │
├─────────────────────┤
│ TabBar │
└─────────────────────┘
```
**设计要点：**
- 头像使用大圆角（50%），带 2px `#C9A84C` 边框（VIP 用户）
- 功能菜单每个 item 使用 1px 底部分割线
- 右侧箭头 `#A0AEC0`
- VIP 标记使用 `#FFF6E0` 背景 + `#C9A84C` 文字
---
## 七、交互动效规范
### 7.1 通用动效
| 场景 | 动效 | 持续时间 | 曲线 |
|------|------|---------|------|
| 页面跳转 | 微信原生 Slide | 300ms | 默认 |
| 按钮按压 | `scale(0.97)` | 100ms | ease-out |
| 弹窗出现 | 底部上滑 + 背景淡入 | 300ms | `cubic-bezier(0.16, 1, 0.3, 1)` |
| 弹窗关闭 | 下滑 + 背景淡出 | 250ms | ease-in |
| Tag 出现 | `scale(0.8→1)` + 淡入 | 200ms | spring(80, 12) |
| 数字变化 | 计数器从旧值滚动到新值 | 400ms | ease-out |
| 骨架屏 | 灰色渐变位移 | 1.5s infinite | ease-in-out |
### 7.2 页面过渡
```
进入: translateX(100%) → 0 300ms ease-out
退出: 0 → translateX(30%) + 淡出 250ms ease-in
```
UniApp 通过 `pages.json` 配置：
```json
{
"globalStyle": {
"navigationBarTitleText": "数字能量学",
"navigationBarBackgroundColor": "#1E3A5F",
"navigationBarTextStyle": "white",
"backgroundColor": "#F8F6F1",
"app-plus": {
"animation": {
"duration": 300,
"type": "slide-in-right"
}
}
}
}
```
### 7.3 微交互
- **数字复制**：点击复制按钮 → 按钮短暂显示"已复制" + 绿色闪烁
- **支付成功**：Toast 后 1.5s 自动跳转
- **下拉刷新**：微信原生下拉刷新，加载完成震动反馈
- **空数据点击**：点击空数据区域 → 提示跳转引导
- **佣金列表加载**：列表项依次淡入（`animation-delay` 级联）
---
## 八、微信小程序专项规范
### 8.1 NavBar（导航栏）
由于微信小程序不支持自定义 NavBar（非侵入式），统一使用原生的 `navigationBar`：
```json
{
"globalStyle": {
"navigationBarBackgroundColor": "#1E3A5F",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "数码能量学"
}
}
```
| 页面 | 标题 | 背景色 | 文字色 |
|------|------|--------|--------|
| 首页 | 数码能量学 | `#1E3A5F` | white |
| 命盘解读 | 数字能量命盘 | `#1E3A5F` | white |
| AI解读 | AI 命盘解读 | 透明（自定义头） | — |
| 分销面板 | 分销中心 | `#1E3A5F` | white |
| 个人中心 | 我的 | `#1E3A5F` | white |
| 支付页 | 确认支付 | `#1E3A5F` | white |
### 8.2 TabBar（标签栏）
```json
{
"tabBar": {
"color": "#A0AEC0",
"selectedColor": "#1E3A5F",
"backgroundColor": "#FFFFFF",
"borderStyle": "white",
"list": [
{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tab/home.png", "selectedIconPath": "static/tab/home-active.png" },
{ "pagePath": "pages/chart/index", "text": "命盘", "iconPath": "static/tab/chart.png", "selectedIconPath": "static/tab/chart-active.png" },
{ "pagePath": "pages/records/index", "text": "分析", "iconPath": "static/tab/records.png", "selectedIconPath": "static/tab/records-active.png" },
{ "pagePath": "pages/profile/index", "text": "我的", "iconPath": "static/tab/profile.png", "selectedIconPath": "static/tab/profile-active.png" }
]
}
}
```
### 8.3 触摸区域
- **最小可点击区域**：`44px × 44px`（微信官方推荐）
- **列表项**：高度至少 `48px`
- **底部按钮**：固定到页面底部时，距离底边 `34px`（适配 Home Indicator）
- **弹窗关闭**：点击弹窗外部灰色遮罩层关闭
### 8.4 安全区域适配
```scss
// 使用 WeChat CSS 变量适配刘海屏 / Home Indicator
.safe-area-bottom {
padding-bottom: constant(safe-area-inset-bottom); // iOS 11.0-11.2
padding-bottom: env(safe-area-inset-bottom); // iOS 11.2+
}
// 底部固定按钮
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 16px;
padding-bottom: calc(16px + constant(safe-area-inset-bottom));
padding-bottom: calc(16px + env(safe-area-inset-bottom));
background: #FFFFFF;
}
```
---
## 九、组件库（参考实现）
### Button.vue — 按钮组件
```vue
```
---
## 十、图片与图标
### 10.1 命盘分享海报
- **尺寸**：`750px × 1000px`（微信分享卡片标准）
- **背景**：深蓝到墨蓝渐变 `linear-gradient(135deg, #1E3A5F, #162A45)`
- **内容**：命盘三角图（金色线框）+ 用户昵称 + 出生日期 + 品牌 Logo + 小程序码
- **文案**：底部"扫码查看你的数字命盘"
### 10.2 推广海报
- **尺寸**：`750px × 1334px`（朋友圈长图）
- **背景**：金色到深蓝渐变 `linear-gradient(180deg, #C9A84C 0%, #1E3A5F 100%)`
- **内容**：用户头像 + 昵称 + 推广码 + 小程序码 + "扫码免费测命盘"
### 10.3 TabBar 图标
- **格式**：PNG，`48px × 48px`（iOS）/ `54px × 54px`（Android）
- **风格**：线性图标，2px 描边，圆角
- **选中态**：填充 + 品牌色 `#1E3A5F`
- **未选中**：线性 + 灰色 `#A0AEC0`
---
## 十一、现有的 uni.scss 变量更新
```scss
/* ========================================
数字能量学 AI 智能体 — SCSS 变量文件
覆盖 uni.scss
======================================== */
/* —— 品牌色 —— */
$brand-dark: #1E3A5F;
$brand-gold: #C9A84C;
$brand-offwhite:#F8F6F1;
/* —— 功能色 —— */
$color-success: #2D8B67;
$color-warning: #D4A017;
$color-danger: #D94A4A;
$color-link: #4A90D9;
/* —— 中性色 —— */
$text-primary: #1A1A2E;
$text-secondary: #4A5568;
$text-tertiary: #A0AEC0;
$border-light: #E2E8F0;
$card-bg: #FFFFFF;
$page-bg: #F8F6F1;
/* —— 字号 —— */
$font-h1: 24px;
$font-h2: 20px;
$font-h3: 18px;
$font-body: 15px;
$font-caption: 13px;
$font-micro: 11px;
/* —— 间距 —— */
$space-xxs: 4px;
$space-xs: 8px;
$space-sm: 12px;
$space-md: 16px;
$space-lg: 24px;
$space-xl: 32px;
$space-2xl: 48px;
/* —— 圆角 —— */
$radius-sm: 6px;
$radius-md: 10px;
$radius-lg: 16px;
$radius-xl: 20px;
$radius-full: 999px;
/* —— 阴影 —— */
$shadow-card: 0 2px 12px rgba(26, 26, 46, 0.06);
$shadow-modal: 0 -4px 20px rgba(26, 26, 46, 0.1);
/* —— 动效曲线 —— */
$ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
$ease-out: ease-out;
$ease-in: ease-in;
/* —— 命盘数字色（9个数字对应色） —— */
$num-colors: (
1: #D94A4A, /* 赤红 — 创造/自主 */
2: #4A90D9, /* 冰蓝 — 合作/平衡 */
3: #E8A238, /* 琥珀 — 表达/创意 */
4: #2D8B67, /* 翡翠 — 稳定/规则 */
5: #D4A017, /* 金 — 自由/变化 */
6: #7B6FA0, /* 紫灰 — 关怀/责任 */
7: #4A6FA5, /* 靛蓝 — 分析/灵性 */
8: #C9A84C, /* 暗金 — 权力/财富 */
9: #B85C3A, /* 铜橙 — 智慧/完成 */
);
```
---
## 十二、设计检查清单
使用此清单确保每个页面的实现符合本指南：
- [ ] 背景色为 `#F8F6F1`（矿白），非纯白
- [ ] 卡片背景 `#FFFFFF`，圆角 16px，使用 `shadow-card` 阴影
- [ ] 主按钮使用 `#1E3A5F`，行动按钮使用 `#C9A84C`（金色仅用于关键行动）
- [ ] 字体未使用 Web Font，全部使用系统字族
- [ ] 字号严格遵循层级规范（15px body / 13px caption / 11px micro）
- [ ] 所有可点击区域 ≥ 44px
- [ ] 按钮有 `:active` 缩放反馈（scale: 0.97）
- [ ] 底部固定内容适配安全区域（safe-area-inset-bottom）
- [ ] 空数据/加载/错误三态均已覆盖
- [ ] 无 `#000000` 纯黑，无饱和度过高的颜色
- [ ] 无 emoji 直接使用（使用图标替代）
- [ ] TabBar 未选中灰色 `#A0AEC0`，选中品牌色 `#1E3A5F`
- [ ] NavBar 统一墨蓝底色白色文字
- [ ] 命盘数字使用九色体系着色