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