时间轴

时间轴节点按事件类型分为深青、琥珀、红与绿四色，节点带白色描边。事件卡片 hover 时切换为 cdx-50 背景。

返回组件库
12 · TIMELINE · 时间轴
2026-05-12 09:30 检验
血常规检验报告
WBC 8.2×10⁹/L · HGB 142g/L · PLT 218×10⁹/L
2026-05-11 14:20 用药
用药方案调整
阿托伐他汀 20mg → 40mg qd
2026-05-10 08:15 危急值
血钾异常
K⁺ 6.8 mmol/L（参考 3.5-5.5）
2026-05-09 10:00 诊断
入院诊断确认
冠状动脉粥样硬化性心脏病 · 不稳定型心绞痛
<section id="timeline" class="section">
    <div class="section-title">12 · TIMELINE · 时间轴</div>
    <div class="demo-box">
      <div class="vtl">
        <div class="vtl-item">
          <span class="vtl-node teal"></span>
          <div class="vtl-card">
            <div class="flex items-center gap-3 mb-1">
              <span class="font-mono text-[11px] text-ink-400">2026-05-12 09:30</span>
              <span class="inline-block px-2 py-0.5 text-[10px] bg-cdx-50 text-cdx-700 rounded font-medium">检验</span>
            </div>
            <div class="text-[14px] font-medium text-ink-900">血常规检验报告</div>
            <div class="text-[12px] text-ink-500 mt-1">WBC 8.2×10⁹/L · HGB 142g/L · PLT 218×10⁹/L</div>
          </div>
        </div>
        <div class="vtl-item">
          <span class="vtl-node gold"></span>
          <div class="vtl-card">
            <div class="flex items-center gap-3 mb-1">
              <span class="font-mono text-[11px] text-ink-400">2026-05-11 14:20</span>
              <span class="inline-block px-2 py-0.5 text-[10px] bg-[#FEF3C7] text-[#92400E] rounded font-medium">用药</span>
            </div>
            <div class="text-[14px] font-medium text-ink-900">用药方案调整</div>
            <div class="text-[12px] text-ink-500 mt-1">阿托伐他汀 20mg → 40mg qd</div>
          </div>
        </div>
        <div class="vtl-item">
          <span class="vtl-node red"></span>
          <div class="vtl-card">
            <div class="flex items-center gap-3 mb-1">
              <span class="font-mono text-[11px] text-ink-400">2026-05-10 08:15</span>
              <span class="inline-block px-2 py-0.5 text-[10px] bg-[#FEF2F2] text-[#991B1B] rounded font-medium">危急值</span>
            </div>
            <div class="text-[14px] font-medium text-ink-900">血钾异常</div>
            <div class="text-[12px] text-[#A8453B] mt-1 font-medium">K⁺ 6.8 mmol/L（参考 3.5-5.5）</div>
          </div>
        </div>
        <div class="vtl-item" style="padding-bottom:0">
          <span class="vtl-node green"></span>
          <div class="vtl-card">
            <div class="flex items-center gap-3 mb-1">
              <span class="font-mono text-[11px] text-ink-400">2026-05-09 10:00</span>
              <span class="inline-block px-2 py-0.5 text-[10px] bg-[#F0FDF4] text-[#065F46] rounded font-medium">诊断</span>
            </div>
            <div class="text-[14px] font-medium text-ink-900">入院诊断确认</div>
            <div class="text-[12px] text-ink-500 mt-1">冠状动脉粥样硬化性心脏病 · 不稳定型心绞痛</div>
          </div>
        </div>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

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

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

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