页面总览
每张卡片都是 390 × 844 的完整页面，未裁切、页外无任何文字。鼠标移到页面上会浮现引导卡：点「打开页面」整页放大，点「新窗口」单独打开；手机端点按缩略图即可放大。
共 10 个页面模块
设计规范
医疗信任绿为主色，白与浅灰留白为辅；圆角与阴影统一，图表与图标均为同一套线性语言。
品牌色
#047857主色 · 深
#059669主色 · 标准
#10B981品牌绿
#34D399渐变高光
#D1FAE5浅底 / 标签
#F4F8F6兜底底色
文字层级
页面主标题17 / 800
卡片标题15 / 700
正文与数值14 / 400
辅助说明12 / 400
标签 / 注释11 / 400
圆角与间距
卡片圆角20px
控件 / 输入框13–16px
标签胶囊999px
页面左右边距18px
卡片间距12 / 16px
图标与图表
图标栅格24 × 24
描边宽度1.7px
图标风格线性 / 圆角端点
进度条7px · 渐变填充
柱状图圆角 7px · 当日加深
交付说明
文件解压或直接拷贝目录即可使用，不依赖任何在线 CDN、字体服务或构建工具。
1
双击 design-board.html 即可打开本页；单页地址为 h5-preview/index.html，支持 #home 这类 hash 直达。
2
页面为 纯静态实现，所有交互（筛选、搜索、开关、扫码演示）都在浏览器本地完成，不产生任何请求。
3
演示数据集中在 data.js，接后端时替换该文件或改写 app.js 中的数据读取即可。
4
画布基准 390 × 844，同时适配 375 宽机型；小程序端对应 rpx 时建议按 750 设计宽度等比换算。
5
色彩、字号、圆角、间距已在上方规范中固定，后续新增页面请沿用同一套 token。
6
本稿仅作视觉与交互评审，不含真实账号、真实学生数据与后端接口。
miniprogram/
├─ design-board.html // 本看板（交付入口）
├─ logo.png
└─ h5-preview/
├─ index.html // 手机页壳 + 全部样式
├─ app.js // 10 个页面的渲染逻辑
├─ data.js // 模拟数据
└─ logo.png
├─ design-board.html // 本看板（交付入口）
├─ logo.png
└─ h5-preview/
├─ index.html // 手机页壳 + 全部样式
├─ app.js // 10 个页面的渲染逻辑
├─ data.js // 模拟数据
└─ logo.png