数字能量学 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：

// 中文
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 基准间距

$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：

.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`	链接、跳转

交互反馈：

button:active {
  transform: scale(0.97);
  opacity: 0.9;
}

所有按钮的 :active 状态必须有视觉反馈（缩小 + 透明度变化），模拟物理按压感。

禁用态：

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 骨架屏规范

@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 │    │  (按角色动态展示)
│  │  [续费] [升级]     │    │  (暗金渐变/橙色/紫色/灰色)
│  └─────────────────┘    │
│  ┌─────────────────┐    │
│  │  种子价专属标记    │    │  仅种子价会员显示
│  └─────────────────┘    │
│                         │
│  ┌─────────────────┐    │  区域三：功能菜单（分组卡片）
│  │  📋 我的分析    ›│    │  「我的服务」
│  │  💰 我的推广    ›│    │  仅付费用户可见
│  └─────────────────┘    │
│  ┌─────────────────┐    │
│  │  🔗 ABC123       │    │  「推广工具」(仅付费用户)
│  │  [复制推广码]     │    │  金色背景条 #FEF3C7
│  └─────────────────┘    │
│  ┌─────────────────┐    │
│  │  🏷 我的标签    ›│    │  「更多」(能量师)
│  │  ℹ️ 关于我们    ›│    │  所有用户
│  └─────────────────┘    │
│                         │
│  ┌─────────────────┐    │  区域四：退出登录
│  │  退出登录(红色)   │    │
│  └─────────────────┘    │
│                         │
├─────────────────────────┤
│  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 配置：

{
  "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：

{
  "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（标签栏）

{
  "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 安全区域适配

// 使用 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的数字能量匹配度    │
│                              │
│  ┌── 功能预览（6网格） ──┐   │
│  │ 👫 夫妻合盘           │   │
│  │ 👨‍👩‍👧‍👦 亲子匹配       │   │
│  │ 👔 同事合作           │   │
│  │ 🤝 朋友兼容           │   │
│  │ 📊 上下级关系         │   │
│  │ 🔢 号码能量           │   │
│  └──────────────────────┘   │
│                              │
│  ┌─────────────────────┐     │
│  │ 开通超级会员 ¥1,314/年│     │
│  │ 解锁全部关系分析功能   │     │
│  └─────────────────────┘     │
│  💡 含无限AI解读+PDF导出     │
└─────────────────────────────┘

背景色：#F7F8FC（浅灰蓝）
功能图标尺寸：48px × 48px，圆角 12px
网格间距：16px
底部CTA按钮：品牌色渐变 linear-gradient(135deg, #1E3A5F, #2C5282)，白色文字，圆角 24px

8.5.2 超级会员关系首页（pages/relations/index.vue，超级会员可见）

┌─────────────────────────────┐
│  我的命盘  张三 · 主性格 8    │  ← 用户卡片
│  📊 查看完整命盘              │
├─────────────────────────────┤
│  ＋ 添加新关系人              │  ← 大号CTA按钮
├─────────────────────────────┤
│  关系分类（6网格）            │
│  👫 夫妻  👨‍👩‍👧‍👦 亲子       │
│  👔 同事  🤝 朋友           │
│  📊 上下级 🔢 号码           │
├─────────────────────────────┤
│  最近分析                     │
│  ── 夫妻 ──                  │
│  李四 · 匹配 85%  ▶          │
│  ── 亲子 ──                  │
│  小明 · 匹配 72%  ▶          │
│  ── 号码 ──                  │
│  138****5678 · 78分  ▶       │
└─────────────────────────────┘

顶部用户卡片：品牌色背景 #1E3A5F，白色文字，圆角 12px，margin: 16px
"添加关系人"按钮：品牌色 #1E3A5F，白色加粗文字，圆角 24px，高度 48px
关系人列表项：16px 圆角，12px 内边距，左侧关系类型图标
匹配度颜色：≥80% #38A169（绿） / 60-79% #3182CE（蓝） / 40-59% #D69E2E（黄） / <40% #DD6B20（橙）

8.5.3 双命盘对比页（pages/relations/chart-compare.vue）

┌─────────────────────────────┐
│  ← 关系分析                   │
│                              │
│  张三 · 主性格8   李四 · 主性格5│
│  ┌──命盘──┐  ┌──命盘──┐      │
│  │   O    │  │   O    │      │
│  │ M    N │  │ M    N │      │
│  │I J K L │  │I J K L │      │
│  └────────┘  └────────┘      │
│                              │
│  ═══ 能量匹配度 ═══          │
│  ┌─────────────────┐         │
│  │      ╭───╮      │         │
│  │      │85%│      │         │  ← 环形进度条
│  │      ╰───╯      │         │
│  │  👫 夫妻关系     │         │
│  └─────────────────┘         │
│                              │
│  【AI解读】                   │
│  💬 核心互动                  │
│  8号领导型与5号自由型...      │
│                              │
│  ✅ 优势                      │
│  · 互相欣赏对方的能力         │
│  · 共同追求事业成就           │
│  · 价值观高度一致             │
│                              │
│  ⚠️ 注意点                   │
│  · 8号控制欲vs5号自由需求     │
│  · ...                       │
│                              │
│  💡 相处建议                  │
│  ...                        │
└─────────────────────────────┘

8.5.4 号码能量分析页（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 — 按钮组件

<template>
  <button
    class="btn"
    :class="[`btn--${type}`, `btn--${size}`, { 'btn--block': block, 'btn--disabled': disabled }]"
    :disabled="disabled"
    @click="$emit('click', $event)"
  >
    <slot />
  </button>
</template>

<style scoped lang="scss">
.btn {
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.97);
    opacity: 0.9;
  }

  &--primary {
    background: #1E3A5F;
    color: #FFFFFF;
    height: 48px;
    padding: 0 24px;
  }

  &--gold {
    background: #C9A84C;
    color: #FFFFFF;
    height: 44px;
    padding: 0 20px;
  }

  &--outline {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #1A1A2E;
    height: 40px;
  }

  &--text {
    background: transparent;
    color: #4A90D9;
    height: auto;
    padding: 0;
  }

  &--block {
    width: 100%;
  }

  &--large { height: 48px; font-size: 16px; }
  &--medium { height: 44px; font-size: 15px; border-radius: 10px; }
  &--small { height: 36px; font-size: 13px; border-radius: 8px; padding: 0 16px; }

  &--disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
</style>

十、图片与图标

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 变量更新

/* ========================================
   数字能量学 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 统一墨蓝底色白色文字
命盘数字使用九色体系着色

style-guide.md 36 KB Historia Raaka

数字能量学 AI 智能体 — 前端样式指南

一、品牌定位

二、色彩系统

2.1 主色调

2.2 辅助色

2.3 中性色

2.4 命盘数字色

2.5 色值使用约束

三、字体系统

3.1 字族

3.2 字号层级

3.3 字号规范

四、间距与布局

4.1 基准间距

4.2 页面布局规范

4.3 卡片规范

4.4 布局模式

五、组件视觉规范

5.1 按钮

5.2 输入框

5.3 标签（Tag）

5.4 状态指示

5.5 骨架屏规范

六、各页面视觉设计

6.1 首页 — 信息输入

6.2 命盘解读页

6.3 AI 解读页

6.4 分销面板

6.5 个人中心

七、交互动效规范

7.1 通用动效

7.2 页面过渡

7.3 微交互

八、微信小程序专项规范

8.1 NavBar（导航栏）

8.2 TabBar（标签栏）

8.3 触摸区域

8.4 安全区域适配

8.5 关系页签专属规范

九、组件库（参考实现）

Button.vue — 按钮组件

十、图片与图标

10.1 命盘分享海报

10.2 推广海报

10.3 TabBar 图标

十一、现有的 uni.scss 变量更新

十二、设计检查清单

style-guide.md 36 KB

Historia Raaka