# 数字能量学 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 个人中心
```
┌─────────────────────────┐
│ 我的 │
├─────────────────────────┤
│ │
│ ┌─────────────────┐ │
│ │ (头像/64px) │ │ 区域一：用户卡片
│ │ 张三 │ │ 白色16px bold
│ │ 能量师 🌟 │ │ (暗金)C9A84C 标签
│ │ 北京 · 射手座 │ │ 社交摘要(可选)
│ │ ✏️ 编辑资料 │ │ 灰色12px
│ │ │ │ 背景: #1E3A5F 渐变
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 能量师会员 │ │ 区域二：会员状态卡片
│ │ 有效期至 2027-05 │ │ (按角色动态展示)
│ │ [续费] [升级] │ │ (暗金渐变/橙色/紫色/灰色)
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 种子价专属标记 │ │ 仅种子价会员显示
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │
│ │ 种子价专属标记 │ │ 仅种子价会员显示
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │ 区域三：统计卡片（按角色展示）
│ │ 咨询 12次 │ │ (大号数字+标签, 水平等宽排列)
│ │ 推广收益 ¥860 │ │ 浅灰蓝背景 #F7F8FC
│ │ 推广人数 6人 │ │ 圆角 12px 内边距 16px
│ └─────────────────┘ │ 普通用户仅"咨询次数"
│ │
│ ┌─────────────────┐ │ 区域四：功能菜单（分组卡片）
│ │ 📋 我的分析 ›│ │ 「我的服务」
│ │ 💰 我的推广 ›│ │ 仅付费用户可见
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 🔗 ABC123 │ │ 「推广工具」(仅付费用户)
│ │ [复制推广码] │ │ 金色背景条 #FEF3C7
│ └─────────────────┘ │
│ ┌─────────────────┐ │
│ │ 🏷 我的标签 ›│ │ 「更多」(能量师)
│ │ ℹ️ 关于我们 ›│ │ 所有用户
│ └─────────────────┘ │
│ │
│ ┌─────────────────┐ │ 区域五：退出登录
│ │ 退出登录(红色) │ │
│ └─────────────────┘ │
│ │
├─────────────────────────┤
│ TabBar │
└─────────────────────────┘
```
**设计要点：**
- 头像使用大圆角（50%），带 2px `#C9A84C` 边框（VIP 用户）
- 功能菜单每个 item 使用 1px 底部分割线
- 右侧箭头 `#A0AEC0`
- VIP 标记使用 `#FFF6E0` 背景 + `#C9A84C` 文字
- 统计卡片区（区域三）：背景 `#F7F8FC`，圆角 `12px`，内边距 `16px`，统计数字 `20px` 加粗，标签 `12px` 灰色 `#4A5568`
- 统计项按角色动态展示（后端返回，前端仅渲染）：
- 普通用户：累计咨询次数
- C端会员：累计咨询次数 / 累计推广收益 / 推广人数
- 超级会员：累计咨询次数 / 累计推广收益 / 关系人数
- 能量师：累计咨询次数 / 累计推广收益 / 客户数 / 本月收入
---
## 七、交互动效规范
### 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 |
| 号码分析 | 号码能量分析 | `#1E3A5F` | white |
| 分销面板 | 分销中心 | `#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/relations/index", "text": "关系", "iconPath": "static/tab/relation.png", "selectedIconPath": "static/tab/relation-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" }
]
}
}
```
> **能量盘页面**（`pages/chart/index`）已从 tabBar 移除，通过首页"开始咨询"或分析记录"查看详情"跳转访问。
### 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;
}
```
### 8.5 关系页签专属规范
**8.5.1 非会员付费引导页（`pages/relations/index.vue`）**
```
┌─────────────────────────────┐
│ 🔗 数字能量关系 │
│ │
│ 了解你与TA的数字能量匹配度 │
│ │
│ ┌── 功能预览 ─────────┐ │
│ │ 👫 夫妻/伴侣 │ │
│ │ 👶 子女 · 👨👧 父母 │ │
│ │ 👴 祖父母 · 👼 孙子女 │ │
│ │ 👔 同事 · 🤝 朋友 │ │
│ │ 📊 上级 · 📊 下级 │ │
│ │ 🔢 号码能量 │ │
│ └──────────────────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ 开通超级会员 ¥1,314/年│ │
│ │ 解锁全部关系分析功能 │ │
│ └─────────────────────┘ │
│ 💡 含无限AI解读+PDF导出 │
└─────────────────────────────┘
```
- 背景色：`#F7F8FC`（浅灰蓝）
- 功能图标尺寸：`48px × 48px`，圆角 `12px`
- 网格间距：`16px`
- 底部CTA按钮：品牌色渐变 `linear-gradient(135deg, #1E3A5F, #2C5282)`，白色文字，圆角 `24px`
**8.5.2 超级会员关系首页（`pages/relations/index.vue`，超级会员可见）**
```
┌─────────────────────────────┐
│ ← 数字能量关系 │
├─────────────────────────────┤
│ 我的能量盘 │ ← 用户能量盘卡片
│ 张三 · 主性格 8 │ 品牌色背景 #1E3A5F
│ ┌──简版三角图──┐ │ 白色文字，圆角12px
│ │ 8(O) │ │ margin: 16px
│ └────────────┘ │ 点击→查看完整能量盘
├─────────────────────────────┤
│ ＋ 添加新关系人 │ ← 大号CTA按钮
├─────────────────────────────┤
│ 📋 关系人 📝 分析记录 │ ← Tab 切换
├─────────────────────────────┤
│ ── 夫妻/伴侣 ── │ ← 关系人列表（/关系人Tab）
│ 👫 李四 │ [新增分析] ▶
│ ── 子女 ── │
│ 👶 小明 · 小宝 │ [分析] [分析]
│ ── 号码 ── │
│ 🔢 138****5678 │ [分析] ▶
│ │
│ 或（分析记录Tab）： │
│ ── 11月20日 ── │
│ 💬 我俩事业发展互补吗？ │ 3人参与 · 10:30 ▶
│ ── 11月19日 ── │
│ 💬 孩子天赋方向分析 │ 2人参与 · 昨天 ▶
└─────────────────────────────┘
```
- 顶部用户卡片：品牌色背景 `#1E3A5F`，白色文字，圆角 `12px`，`margin: 16px`
- "添加关系人"按钮：品牌色 `#1E3A5F`，白色加粗文字，圆角 `24px`，高度 `48px`
- Tab 切换：激活态品牌色 `#1E3A5F` 下划线 + 加粗，未激活 `#4A5568`
- 关系人列表项：`16px` 圆角，`12px` 内边距，左侧关系类型图标
- 「分析」按钮：浅色品牌色 `#EBF4FF` 背景，`#1E3A5F` 文字，圆角 `16px`，紧凑排列
- 分析记录项：问题摘要加粗，参与人数+时间灰色小字
**8.5.3 多人分析选择页（`pages/relations/analysis-select.vue`）**
```
┌─────────────────────────────┐
│ ← 发起分析 │
│ │
│ 您想咨询的问题 │
│ ┌─────────────────────┐ │
│ │ 我俩在事业发展上 │ │ ← 输入框，必填
│ │ 是否互补？ │ │ 占位符："输入您想咨询的问题"
│ └─────────────────────┘ │
│ │
│ 选择分析成员（至少2人） │
│ ┌─ ☑️ 我（张三 · 主性格8）─┐ │ ← 默认选中，不可取消
│ ├─ ☐ 李四 · 夫妻/伴侣 ────┤ │
│ ├─ ☐ 小明 · 子女 ────────┤ │
│ └─ ☐ 王总 · 上级 ────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ 开始分析（2人选中） │ │ ← 品牌色渐变，至少2人启用
│ └─────────────────────┘ │
└─────────────────────────────┘
```
- 问题输入框：`height: 48px`，字号 `16px`，`border-radius: 12px`
- 成员勾选框：`18px × 18px`，选中态品牌色 `#1E3A5F`
- 成员项：左侧勾选框 + 头像占位 `32px` + 姓名 + 关系类型标签（`12px` 灰色圆角标签）
- 我自己默认选中且不可取消，显示锁定图标或置灰不可操作
- 底部按钮在选中 <2 人时置灰禁用
**8.5.4 分析对话页（`pages/relations/analysis-chat.vue`）**
```
┌─────────────────────────────┐
│ ← 关系能量分析 👥 3人 │ ← 导航栏，点击👥查看成员
├─────────────────────────────┤
│ │
│ ┌─────────────────────┐ │
│ │ 💬 AI 分析回复... │ │
│ │ · 张三(主性格8) │ │
│ │ · 李四(主性格5) │ │ ← 分析结果（自然语言）
│ │ │
│ │ 8号领导型与5号自由型 │
│ │ 在事业发展上的组合... │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ 用户追问... │ │ ← 继续追问，保持上下文
│ └─────────────────────┘ │
│ │
│ ┌──────────────────────┐ │
│ │ 输入你的追问... [发送]│ │ ← 输入框+发送按钮
│ └──────────────────────┘ │
└─────────────────────────────┘
```
- 导航栏标题 + 成员数标签（品牌色圆角标签 `12px`）
- 点击成员图标 → 底部弹出成员列表浮层（姓名+关系类型+生日，只读）
- 消息区域与 AI 问答页（US-6.7）样式一致
- 成员不可在对话中修改（提示"如需更改成员，请结束当前分析重新选择"）
**8.5.5 号码能量分析页（`pages/relations/number-analysis.vue`）**
```
┌─────────────────────────────┐
│ ← 号码能量分析 │
│ [📱 手机号] [🚗 车牌号] │ ← 选项卡
│ │
│ 输入手机号 │
│ ┌─────────────────────┐ │
│ │ 138 1234 5678 │ │
│ └─────────────────────┘ │
│ │
│ [ 🔍 分析 ] │
│ │
│ ─── 分析结果 ─── │
│ 综合评分：78/100 ⭐ 中上 │
│ │
│ 能量分布： │
│ 💰 天医 ████████░░ 2次 │
│ 🏆 延年 ████░░░░░░ 1次 │
│ 🌱 生气 ██████░░░░ 1次 │
│ 🔒 伏位 ██████████ 3次 │
│ │
│ 【AI解读】 │
│ 此号码天医双现... │
│ │
│ 📤 分享 💾 保存 │
└─────────────────────────────┘
```
- 选项卡：激活态品牌色下划线 + 加粗，未激活灰色
- 输入框：`height: 48px`，字号 `18px`，居中对齐，`letter-spacing: 4px`
- 分析按钮：品牌色 `#1E3A5F`，白色文字，`border-radius: 24px`
- 能量条：`height: 16px`，`border-radius: 8px`，颜色按星位区分（天医=绿/延年=蓝/生气=橙/伏位=灰/凶星=红渐变）
- 号码自动格式化：每4位加空格
---
## 九、组件库（参考实现）
### 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 统一墨蓝底色白色文字
- [ ] 能量盘数字使用九色体系着色