健康提醒卡

面向医疗健康场景的提醒信息流。以染色图标圆区分提醒类型，日期胶囊浮于行右上角；异常项遵循「危急值三重编码」（颜色 + 图标 + 文字），关键指标带单位与参考区间。信息流可滚动，顶部在滚动后淡出遮罩。

返回组件库
HEALTH ALERTS · 健康提醒卡
Important Alerts Card（重要提醒 · 滚动信息流）
重要提醒
12 本周
06-29 — 07-05
高心率 危急
自 06-12 08:59 起约 10 分钟内处于静息状态，但心率升至 120 BPM（参考 60–100）。
06-12
医疗 ID 已更新
您的紧急联系人与过敏史信息已在医疗 ID 中更新，请核对无误。
06-09
实验室结果已出
马修斯·克拉克森医生开具的最新血检报告已返回——胆固醇与血糖均在正常范围。
06-09
服药提醒
您错过了上午 09:00 的美托洛尔剂量，如距离下次服药时间尚早，请尽快补服。
06-08
睡眠不规律
过去 7 晚中有 3 晚就寝时间波动超过 2 小时，可能影响睡眠评分。
06-06
低血氧 危急
06-04 夜间睡眠期间血氧饱和度短暂下降至 93%（参考 ≥ 95%）。
06-05
静态胶囊 · 周区间（无交互）
06-29 — 07-05 周区间胶囊用于标识提醒所属周期，左右箭头为装饰性图标。 
<div class="health-alerts">
  <div class="health-alerts-head">
    <div class="health-alerts-head-main">
      <div class="health-alerts-title">重要提醒</div>
      <div class="flex items-baseline gap-1.5">
        <span class="font-num text-[26px] font-medium text-ink-900 leading-none tracking-tight">12</span>
        <span class="text-[12px] text-ink-500">本周</span>
      </div>
    </div>
    <div class="week-range-pill">…</div>
  </div>
  <div class="health-alerts-feed">
    <div class="health-alert-item">
      <span class="health-alert-icon bg-danger">…</span>
      <div class="health-alert-body">
        <div class="health-alert-title">高心率 <span class="health-alert-crit">危急</span></div>
        <div class="health-alert-desc">…</div>
      </div>
      <span class="health-alert-date">06-12</span>
    </div>
    …
  </div>
</div>

安装

在页面中引入组件样式与 Tailwind 配置即可。健康提醒卡额外依赖 design-system/assets/health-alerts.css（含滚动信息流与顶部淡出遮罩）。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<link rel="stylesheet" href="design-system/assets/health-alerts.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。提醒类型通过 health-alert-icon 的背景类区分：

  • bg-danger — 危急异常（高心率、低血氧），须配合 health-alert-crit「危急」标签实现三重编码。
  • bg-warn — 需关注（信息变更、用药提醒）。
  • bg-success — 正常/完成（实验室结果正常）。
  • bg-cdx / bg-violet — 中性信息（用药、睡眠）。

异常指标必须带单位与参考区间；危急值需同时出现颜色、图标、文字，禁止仅靠颜色表达异常（见 DESIGN.md §0.5 医疗行业使用约定）。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。