140 lines
4.6 KiB
Markdown
140 lines
4.6 KiB
Markdown
# 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`
|