nepiedg
397 lines
8.5 KiB
Markdown
397 lines
8.5 KiB
Markdown
# 戒烟助手 - 设计语言文档
|
||
|
||
> 所有页面和组件必须遵循此文档，确保视觉一致性。
|
||
|
||
---
|
||
|
||
## 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. 字体规范
|
||
|
||
### 字体栈
|
||
|
||
```css
|
||
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）
|
||
|
||
所有独立内容区域使用卡片包裹。
|
||
|
||
```css
|
||
.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）
|
||
|
||
```css
|
||
/* 默认态 */
|
||
.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）
|
||
|
||
```css
|
||
/* 默认态 */
|
||
.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 按钮
|
||
|
||
```css
|
||
/* 主按钮 */
|
||
.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 输入框
|
||
|
||
```css
|
||
.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 进度条
|
||
|
||
```css
|
||
.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）
|
||
|
||
```css
|
||
.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）
|
||
|
||
```css
|
||
/* 正向 */
|
||
.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 切换）
|
||
|
||
```css
|
||
.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 空状态
|
||
|
||
```css
|
||
.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 底部安全区
|
||
|
||
```css
|
||
.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. 快速参考
|
||
|
||
开发新页面时复制此基础结构：
|
||
|
||
```vue
|
||
<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>
|
||
```
|