root/Neo-ZQYY
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
master
Neo-ZQYY/apps/demo-miniprogram/miniprogram/pages/notes/STYLE_COMPARISON.md
Neo 779b2f6d52 chore: v1 整理 — 清理历史文件、DDL 合并、文档归档 
- 清理 1155 个已删除的历史文件（废弃 prompt_logs、tmp、旧 ops 脚本）
- export/ 数据文件从 git 移除（已在 .gitignore）
- demo-miniprogram 从 tmp/ 移入 apps/，添加 CLAUDE.md 注解
- DDL 合并：完整 schema 定义填充到 db/*/schemas/（从 docs/database/ddl/ 复制）
- 39 个 v1 迁移脚本归档到 db/_archived/migrations_v1_merged/
- 4 个迁移变更类 BD_Manual 文档归档到 docs/database/_archived/
- .gitignore 补充 .vite/ 和 apps/*.zip
- settings.json 添加 effortLevel 默认配置
- scripts/ops/ 新增运维脚本入库

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-04-06 00:39:27 +08:00

4.6 KiB
Raw Permalink Blame History

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
Reference in New Issue View Git Blame Copy Permalink