卡片

卡片默认无阴影，仅保留 ink-100 描边；hover 时才出现向上位移与柔和阴影。指标卡强调数字，业务卡强调图标与入口。

返回组件库
06 · CARDS · 卡片
Metric Card（B 端 KPI 卡片）
数据资产总量
874,200
较上月 +12.4%
治理完成率
96.7%
活跃患者
32,847
7 日活跃
Modality Card（B 端模态卡片）
检验 · LAB
检验数据治理
覆盖 2,400+ 检验项目标准化映射
标准化率 98.2%
查看详情
病理 · PATH
病理报告结构化
NLP 驱动的病理报告自动解析
解析准确率 94.8%
查看详情
Stat Card（管理端统计卡）
总患者数
12,847 ↑ 3.2%
本月新增
342 ↓ 1.8%
待审核
28
异常告警
5
App Card（应用入口卡片）
数据治理
质量报告
患者管理
安全审计
随访计划
<section id="cards" class="section">
    <div class="section-title">06 · CARDS · 卡片</div>

    <div class="demo-sub">Metric Card（B 端 KPI 卡片）</div>
    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="metric-card rounded-lg">
        <div class="text-[11px] font-bold tracking-[0.16em] uppercase text-ink-500 mb-3">数据资产总量</div>
        <div class="font-num text-[2.2rem] font-medium text-cdx-700 leading-none tracking-tight">874,200</div>
        <div class="mt-3 text-[12px] text-ink-500">较上月 <span class="text-[#3F8F5C] font-semibold">+12.4%</span></div>
      </div>
      <div class="metric-card rounded-lg">
        <div class="text-[11px] font-bold tracking-[0.16em] uppercase text-ink-500 mb-3">治理完成率</div>
        <div class="font-num text-[2.2rem] font-medium text-cdx-700 leading-none tracking-tight">96.7%</div>
        <div class="mt-3"><div class="progress-track"><div class="progress-bar" style="width:96.7%"></div></div></div>
      </div>
      <div class="metric-card rounded-lg">
        <div class="text-[11px] font-bold tracking-[0.16em] uppercase text-ink-500 mb-3">活跃患者</div>
        <div class="font-num text-[2.2rem] font-medium text-cdx-700 leading-none tracking-tight">32,847</div>
        <div class="mt-3 text-[12px] text-ink-500">7 日活跃</div>
      </div>
    </div>

    <div class="demo-sub">Modality Card（B 端模态卡片）</div>
    <div class="grid grid-cols-2 gap-4 mb-8">
      <div class="modality-card">
        <div class="modality-card-icon"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 2v4M17 2v4M3 10h18M5 4h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V6a2 2 0 012-2z"/><path d="M10 14l2 2 4-4"/></svg></div>
        <div class="text-[11px] font-bold tracking-[0.14em] uppercase text-ink-500 mb-2">检验 · LAB</div>
        <div class="text-[18px] font-bold text-ink-900 mb-2">检验数据治理</div>
        <div class="text-[13px] text-ink-600 leading-relaxed max-w-[75%]">覆盖 2,400+ 检验项目标准化映射</div>
        <div class="mini-stat mt-4">
          <span class="text-[12px] text-ink-600">标准化率</span>
          <span class="font-num text-[14px] font-semibold text-cdx-700">98.2%</span>
        </div>
        <div class="cta-link">查看详情 <svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 6h8M7 3l3 3-3 3"/></svg></div>
      </div>
      <div class="modality-card">
        <div class="modality-card-icon"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2h6v2H9zM12 8v8"/><path d="M8 12h8"/><rect x="5" y="4" width="14" height="16" rx="2"/><path d="M5 20h14"/></svg></div>
        <div class="text-[11px] font-bold tracking-[0.14em] uppercase text-ink-500 mb-2">病理 · PATH</div>
        <div class="text-[18px] font-bold text-ink-900 mb-2">病理报告结构化</div>
        <div class="text-[13px] text-ink-600 leading-relaxed max-w-[75%]">NLP 驱动的病理报告自动解析</div>
        <div class="mini-stat warm mt-4">
          <span class="text-[12px] text-ink-600">解析准确率</span>
          <span class="font-num text-[14px] font-semibold" style="color:#6E582C">94.8%</span>
        </div>
        <div class="cta-link">查看详情 <svg class="w-3 h-3" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 6h8M7 3l3 3-3 3"/></svg></div>
      </div>
    </div>

    <div class="demo-sub">Stat Card（管理端统计卡）</div>
    <div class="grid grid-cols-4 gap-4 mb-8">
      <div class="stat-card">
        <div class="text-[12px] text-ink-500 mb-2">总患者数</div>
        <div class="flex items-baseline gap-2">
          <span class="font-num text-[24px] font-semibold text-ink-900">12,847</span>
          <span class="text-[12px] text-[#3F8F5C] font-medium">↑ 3.2%</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="text-[12px] text-ink-500 mb-2">本月新增</div>
        <div class="flex items-baseline gap-2">
          <span class="font-num text-[24px] font-semibold text-ink-900">342</span>
          <span class="text-[12px] text-[#A8453B] font-medium">↓ 1.8%</span>
        </div>
      </div>
      <div class="stat-card">
        <div class="text-[12px] text-ink-500 mb-2">待审核</div>
        <div class="font-num text-[24px] font-semibold text-ink-900">28</div>
      </div>
      <div class="stat-card">
        <div class="text-[12px] text-ink-500 mb-2">异常告警</div>
        <div class="font-num text-[24px] font-semibold text-[#A8453B]">5</div>
      </div>
    </div>

    <div class="demo-sub">App Card（应用入口卡片）</div>
    <div class="grid grid-cols-5 gap-3">
      <div class="app-card">
        <div class="app-icon bg-cdx-50 text-cdx-700 mx-auto"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3v18M3 12h18" stroke-linecap="round"/></svg></div>
        <div class="text-[13px] font-medium text-ink-900">数据治理</div>
      </div>
      <div class="app-card">
        <div class="app-icon bg-amber-50 text-amber-700 mx-auto"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="text-[13px] font-medium text-ink-900">质量报告</div>
      </div>
      <div class="app-card">
        <div class="app-icon bg-violet-50 text-violet-700 mx-auto"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="text-[13px] font-medium text-ink-900">患者管理</div>
      </div>
      <div class="app-card">
        <div class="app-icon bg-rose-50 text-rose-700 mx-auto"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        <div class="text-[13px] font-medium text-ink-900">安全审计</div>
      </div>
      <div class="app-card">
        <div class="app-icon bg-emerald-50 text-emerald-700 mx-auto"><svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7C5 4 4 5 4 7z" stroke-linecap="round"/><path d="M9 2v3M15 2v3M4 9h16" stroke-linecap="round"/></svg></div>
        <div class="text-[13px] font-medium text-ink-900">随访计划</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 检查清单逐项核对。