# Notes 页面 H5 → 小程序 样式对比表

## 快速参考

### 导航栏
| 元素 | H5 Tailwind | H5 CSS px | 小程序 WXSS |
|------|-----------|----------|-----------|
| 导航栏高度 | h-11 | 44px | 44px |
| 导航栏 padding | px-4 | 0 16px | 0 16px |
| 返回按钮大小 | w-5 h-5 | 20px | 44px (容器) |
| 返回 icon 尺寸 | — | — | 24px |
| 标题字号 | text-base | 16px | 16px |
| 标题字重 | font-medium | 500 | 500 |
| 分割线 | border-b border-gray-2 | 1px solid #eeeeee | 1px solid #eeeeee |

### 备注卡片
| 元素 | H5 Tailwind | H5 CSS px | 小程序 WXSS |
|------|-----------|----------|-----------|
| 卡片圆角 | rounded-2xl | 16px | 16px |
| 卡片 padding | p-4 | 16px | 16px |
| 卡片阴影 | shadow-sm | 0 1px 2px rgba(0,0,0,0.05) | 0 1px 2px rgba(0,0,0,0.05) |
| 卡片间距 | space-y-3 | 12px | 12px |
| 背景色 | bg-white | #ffffff | #ffffff |

### 文本样式
| 元素 | H5 Tailwind | H5 CSS px | 小程序 WXSS |
|------|-----------|----------|-----------|
| 备注内容字号 | text-sm | 14px | 14px |
| 备注内容行高 | leading-relaxed | 1.625 (26px) | 20px |
| 备注内容颜色 | text-gray-13 | #242424 | #242424 |
| 备注内容下边距 | mb-3 | 12px | 12px |
| 标签字号 | text-xs | 12px | 12px |
| 标签 padding | px-2.5 py-1 | 10px 4px | 4px 10px |
| 标签圆角 | rounded-lg | 8px | 8px |
| 时间字号 | text-xs | 12px | 12px |
| 时间颜色 | text-gray-6 | #a6a6a6 | #a6a6a6 |

### 颜色
| 用途 | H5 Tailwind | 色值 | 小程序 WXSS |
|------|-----------|------|-----------|
| 页面背景 | bg-gray-1 | #f3f3f3 | #f3f3f3 |
| 卡片背景 | bg-white | #ffffff | #ffffff |
| 正文 | text-gray-13 | #242424 | #242424 |
| 次级文字 | text-gray-6 | #a6a6a6 | #a6a6a6 |
| 分割线 | border-gray-2 | #eeeeee | #eeeeee |
| 客户标签文字 | text-primary | #0052d9 | #0052d9 |
| 客户标签背景 | gradient | linear-gradient(135deg, #ecf2fe, #e8eeff) | linear-gradient(135deg, #ecf2fe, #e8eeff) |
| 客户标签边框 | — | #c5d4f7 | #c5d4f7 |
| 助教标签文字 | text-success | #00a870 | #00a870 |
| 助教标签背景 | gradient | linear-gradient(135deg, #e8faf0, #e0f7ea) | linear-gradient(135deg, #e8faf0, #e0f7ea) |
| 助教标签边框 | — | #b3e6d0 | #b3e6d0 |

### 列表容器
| 元素 | H5 Tailwind | H5 CSS px | 小程序 WXSS |
|------|-----------|----------|-----------|
| 列表 padding | p-4 | 16px | 16px |
| 列表背景 | bg-gray-1 | #f3f3f3 | #f3f3f3 |

### 底部提示
| 元素 | H5 Tailwind | H5 CSS px | 小程序 WXSS |
|------|-----------|----------|-----------|
| 提示字号 | text-xs | 12px | 12px |
| 提示颜色 | text-gray-5 | #c5c5c5 | #c5c5c5 |
| 提示 padding | py-8 pb-16 | 32px 0 64px | 20px 0 40px |

---

## 关键转换规则

### 1. Tailwind spacing → px
```
p-4 (padding: 1rem) → 16px
p-1 (padding: 0.25rem) → 4px
mb-3 (margin-bottom: 0.75rem) → 12px
space-y-3 (gap: 0.75rem) → 12px
```

### 2. Tailwind 字号 → px
```
text-sm (0.875rem) → 14px
text-xs (0.75rem) → 12px
text-base (1rem) → 16px
```

### 3. Tailwind 圆角 → px
```
rounded-2xl (border-radius: 1rem) → 16px
rounded-lg (border-radius: 0.5rem) → 8px
```

### 4. 行高处理
```
H5: leading-relaxed (1.625)
小程序: 在外层 view 上设置 line-height: 20px
原因: text 组件不支持直接设置 line-height
```

---

## 验证方法

### 在 412px 宽设备上对比
1. 打开H5原型：`docs/h5_ui/pages/notes.html`
2. 打开小程序：`pages/notes/notes`
3. 对比以下关键点：
   - 导航栏高度是否一致
   - 卡片圆角是否一致
   - 文字大小是否一致
   - 间距是否一致
   - 颜色是否一致

### 常见问题排查
| 问题 | 排查项 | 参考文档 |
|------|--------|--------|
| 文字高度不对 | 检查 line-height 是否在外层 view 上设置 | 附录B.2.3 |
| 间距不对 | 检查 padding/margin/gap 数值 | 附录A |
| 颜色不对 | 检查色值是否与附录C一致 | 附录C |
| 圆角不对 | 检查 border-radius 数值 | 附录A.5 |
| 阴影不对 | 检查 box-shadow 参数 | 桥文档 §9.2 |

---

## 文件清单

- `notes.wxml` - 页面结构（已更新icon尺寸）
- `notes.wxss` - 页面样式（已调整为px单位）
- `notes.ts` - 页面逻辑（无需修改）
- `notes.json` - 页面配置（无需修改）
- `MIGRATION_NOTES.md` - 迁移说明（本文件）

---

## 参考文档

- 桥文档：`docs/miniprogram-dev/h5-to-mp-bridge-v3.md`
- 附录A：`docs/miniprogram-dev/New/appendix_a_spacing_and_sizing_dictionary_v3.md`
- 附录B：`docs/miniprogram-dev/New/appendix_b_typography_and_text_dictionary_v3.md`
- 附录C：`docs/miniprogram-dev/New/appendix_c_color_dictionary_v3.md`
- H5原型：`docs/h5_ui/pages/notes.html`