smt/docs/design-system.md

戒烟助手 - 设计语言文档

所有页面和组件必须遵循此文档，确保视觉一致性。

---

1. 色彩体系

品牌色 — 薄荷绿

用途	色值	示例场景
主色	#34C8A0	按钮、进度条、选中态边框
主色深	#1a8c62	选中文字、强调文字
主色最深	#0D3D2E	页面标题、数值文字
辅助文字	#52806E	副标题
次要文字	#7aA898	说明文字、标签、单位
淡底色	#9CC5B5	placeholder 文字

功能色

用途	色值	场景
成功/正向	#1a8c62	下降趋势、达成状态
警告	#B45309	上升趋势、需注意
警告背景	rgba(251, 191, 36, 0.14)	警告标签底色
危险	#DC2626	高数值指标
信息蓝	#2563EB	对比数据（实际值）

背景与表面

用途	色值
页面背景渐变	linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%)
卡片底色	rgba(255, 255, 255, 0.88)
卡片边框	rgba(52, 200, 160, 0.14)
卡片阴影	0 4rpx 18rpx rgba(52, 200, 160, 0.07)
浅底色块	rgba(52, 200, 160, 0.06)
选中底色	rgba(52, 200, 160, 0.09)
选中边框	rgba(52, 200, 160, 0.45)

---

2. 字体规范

字体栈

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

字号层级

级别	字号	字重	颜色	用途
H1	38rpx	700	#0D3D2E	页面大标题
H2	28rpx	600	#0D3D2E	卡片标题
H3	26rpx	600	#1a5c45	区块标签（section-label）
数值大	52rpx	700	#0D3D2E	核心指标数字
数值中	38-42rpx	700	#0D3D2E	次要指标数字
正文	25rpx	400	#52806E	描述文字
辅助	21-22rpx	400	#7aA898	标签、单位、说明
小字	20rpx	500	#7aA898	注释、补充信息

---

3. 间距与圆角

间距

级别	数值	用途
xs	6-8rpx	元素内部微间距
sm	14-16rpx	标签之间、紧凑元素间距
md	20rpx	卡片之间、区块之间
lg	28rpx	页面侧边距

圆角

元素	圆角
卡片	24rpx
选项卡片	20rpx
标签（pill）	999rpx
按钮	48rpx（大按钮）/ 999rpx（小标签）
输入框/选择器	12-14rpx
圆形按钮/圆环	50%
数据色块	14rpx

---

4. 组件样式规范

4.1 卡片（Card）

所有独立内容区域使用卡片包裹。

.card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24rpx;
  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
  box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
  padding: 24rpx;
  margin-bottom: 20rpx;
}

禁止：使用旧版灰蓝阴影 rgba(15, 23, 42, 0.06)，统一使用薄荷绿阴影。

4.2 选择卡片（Mode Card / Option Card）

/* 默认态 */
.option-card {
  background: rgba(255, 255, 255, 0.72);
  border: 2rpx solid rgba(52, 200, 160, 0.1);
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(52, 200, 160, 0.04);
}

/* 选中态 */
.option-card-active {
  background: rgba(52, 200, 160, 0.09);
  border-color: rgba(52, 200, 160, 0.45);
  box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.14);
}

4.3 标签选项（Pill Tag）

/* 默认态 */
.tag {
  padding: 14rpx 26rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.9);
  font-size: 25rpx;
  color: #4a7a66;
  border: 1.5rpx solid rgba(52, 200, 160, 0.18);
}

/* 选中态 */
.tag-active {
  background: rgba(52, 200, 160, 0.12);
  border-color: rgba(52, 200, 160, 0.45);
  color: #1a7f61;
  font-weight: 600;
}

4.4 按钮

/* 主按钮 */
.btn-primary {
  height: 96rpx;
  background: linear-gradient(180deg, #3DD9AE 0%, #34C8A0 100%);
  border-radius: 48rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 12rpx 28rpx rgba(52, 200, 160, 0.28);
}

/* 圆形操作按钮（+/-） */
.btn-circle {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(52, 200, 160, 0.1);
  color: #34C8A0;
  font-size: 38rpx;
  border: 1.5rpx solid rgba(52, 200, 160, 0.25);
}

4.5 输入框

.input {
  background: rgba(52, 200, 160, 0.06);
  border: 1.5rpx solid rgba(52, 200, 160, 0.2);
  border-radius: 12rpx;
  color: #0D3D2E;
  font-weight: 600;
}

/* placeholder */
placeholder-style: "color: #9CC5B5"

4.6 进度条

.progress-bar {
  height: 10rpx;
  background: rgba(52, 200, 160, 0.1);
  border-radius: 999rpx;
}

.progress-fill {
  background: linear-gradient(90deg, #34C8A0, #3DD9AE);
  border-radius: 999rpx;
}

/* 未完成态 */
.progress-fill-pending {
  background: rgba(52, 200, 160, 0.3);
}

4.7 圆环指标（Ring）

.ring {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  /* 使用 conic-gradient 动态渲染 */
  /* 主色: #34C8A0, 底色: #E8F8F3 */
}

.ring-inner {
  width: 82rpx;
  height: 82rpx;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.1);
}

4.8 状态标签（Chip）

/* 正向 */
.chip-good {
  background: rgba(52, 200, 160, 0.12);
  color: #1a8c62;
}

/* 警告 */
.chip-warn {
  background: rgba(251, 191, 36, 0.14);
  color: #B45309;
}

/* 中性 */
.chip-neutral {
  background: rgba(52, 200, 160, 0.06);
  color: #7aA898;
}

4.9 Segment（Tab 切换）

.segment {
  background: rgba(255, 255, 255, 0.82);
  padding: 6rpx;
  border-radius: 22rpx;
  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
  box-shadow: 0 4rpx 16rpx rgba(52, 200, 160, 0.07);
}

.segment-item {
  font-size: 24rpx;
  font-weight: 600;
  color: #7aA898;
  border-radius: 16rpx;
}

.segment-active {
  background: #FFFFFF;
  color: #0D3D2E;
  box-shadow: 0 4rpx 12rpx rgba(52, 200, 160, 0.12);
}

4.10 空状态

.empty-block {
  padding: 32rpx;
  border-radius: 16rpx;
  background: rgba(52, 200, 160, 0.04);
}

/* 虚线边框变体 */
.empty-block-dashed {
  border: 2rpx dashed rgba(52, 200, 160, 0.2);
  background: transparent;
}

.empty-text {
  font-size: 24rpx;
  color: #7aA898;
}

4.11 底部安全区

.bottom-safe {
  height: calc(32rpx + env(safe-area-inset-bottom));
}

/* 固定底部按钮区域 */
.footer-fixed {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 20rpx 28rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, rgba(240, 251, 247, 0.97) 35%);
}

---

5. 数据可视化配色

数据类型	色值/色阶
0 / 无数据	rgba(52, 200, 160, 0.06)
低（1-3）	rgba(52, 200, 160, 0.18)
中（4-8）	rgba(251, 191, 36, 0.2)
高（9+）	rgba(239, 68, 68, 0.15)
圆环已完成	#34C8A0
圆环未完成	#E8F8F3

---

6. 禁止事项

禁止	替代方案
灰蓝色阴影 rgba(15, 23, 42, *)	薄荷绿阴影 rgba(52, 200, 160, *)
旧主色 #1AA37A / #1aa37a	新主色 #34C8A0（按钮/进度条）或 #1a8c62（文字）
灰色文字 #6B7280 / #94A3B8	绿调文字 #7aA898 / #52806E
灰色背景 #F1F5F9 / #F8FAFC	绿调背景 rgba(52, 200, 160, 0.06)
纯白卡片背景 #FFFFFF	半透明白 rgba(255, 255, 255, 0.88)
backdrop-filter: blur()	不再使用模糊滤镜（性能考虑），用不透明度代替
旧页面背景渐变 #edf2f8 → #fbfdff	薄荷绿渐变 #E6F7F2 → #FAFFFE

---

7. 快速参考

开发新页面时复制此基础结构：

<template>
  <view class="page">
    <view class="status-bar" :style="{ height: navBarHeight + 'px' }"></view>

    <view class="card">
      <text class="card-title">标题</text>
      <!-- 内容 -->
    </view>

    <view class="bottom-safe"></view>
  </view>
</template>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #E6F7F2 0%, #F0FBF7 40%, #FAFFFE 100%);
  padding: 0 28rpx;
  box-sizing: border-box;
}

.status-bar {
  background: transparent;
}

.card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 24rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  border: 1.5rpx solid rgba(52, 200, 160, 0.14);
  box-shadow: 0 4rpx 18rpx rgba(52, 200, 160, 0.07);
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #0D3D2E;
}

.bottom-safe {
  height: calc(32rpx + env(safe-area-inset-bottom));
}
</style>