Neo-ZQYY/apps/DEMO-miniprogram/miniprogram/pages/notes/STYLE_COMPARISON.md

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