KPI 与数字

大数字统一使用 Urbanist Medium（font-num）与 tabular-nums。Hero 数字层级用于首屏核心指标，KPI 数字用于卡片，hover 可显示计算口径提示。

返回组件库
10 · KPI · 数字展示
Hero Number + Tooltip
CLINICAL DATA ASSETS
874,200 数据资产总量：包含检验、检查、病理、用药等全部结构化临床数据条目。统计截止 2026-05-12。
条结构化临床数据 · 覆盖 7 大模态
Progress Bar + Ring
治理进度 78%
质量评分 96.7%
78%
完成率
50%
审核率
<section id="kpi" class="section">
    <div class="section-title">10 · KPI · 数字展示</div>

    <div class="demo-sub">Hero Number + Tooltip</div>
    <div class="demo-box text-center py-12">
      <div class="text-[11px] font-bold tracking-[0.16em] uppercase text-cdx-700 mb-4">CLINICAL DATA ASSETS</div>
      <div class="kpi-info inline-flex">
        <span class="font-num font-normal text-cdx-700 countup" style="font-size:clamp(3.5rem,6vw,5.5rem);line-height:1;letter-spacing:-0.035em">874,200</span>
        <span class="kpi-tip">数据资产总量：包含检验、检查、病理、用药等全部结构化临床数据条目。统计截止 2026-05-12。</span>
      </div>
      <div class="text-[14px] text-ink-500 mt-4">条结构化临床数据 · 覆盖 <span class="font-semibold text-ink-700">7</span> 大模态</div>
    </div>

    <div class="demo-sub">Progress Bar + Ring</div>
    <div class="demo-box">
      <div class="grid grid-cols-2 gap-8 items-center">
        <div>
          <div class="flex justify-between text-[12px] mb-2">
            <span class="text-ink-600">治理进度</span>
            <span class="font-num font-semibold text-cdx-700">78%</span>
          </div>
          <div class="progress-track"><div class="progress-bar" style="width:78%"></div></div>
          <div class="flex justify-between text-[12px] mt-4 mb-2">
            <span class="text-ink-600">质量评分</span>
            <span class="font-num font-semibold text-cdx-700">96.7%</span>
          </div>
          <div class="progress-track"><div class="progress-bar" style="width:96.7%"></div></div>
        </div>
        <div class="flex items-center justify-center gap-8">
          <div class="text-center">
            <svg width="80" height="80" viewBox="0 0 80 80">
              <circle cx="40" cy="40" r="34" fill="none" stroke="#F4F4F5" stroke-width="8"/>
              <circle cx="40" cy="40" r="34" fill="none" stroke="#185058" stroke-width="8" stroke-linecap="round" stroke-dasharray="213.6" stroke-dashoffset="48" transform="rotate(-90 40 40)" style="transition:stroke-dashoffset 1s"/>
            </svg>
            <div class="font-num text-[14px] font-semibold text-cdx-700 mt-2">78%</div>
            <div class="text-[11px] text-ink-500">完成率</div>
          </div>
          <div class="text-center">
            <svg width="80" height="80" viewBox="0 0 80 80">
              <circle cx="40" cy="40" r="34" fill="none" stroke="#F4F4F5" stroke-width="8"/>
              <circle cx="40" cy="40" r="34" fill="none" stroke="#C28A2C" stroke-width="8" stroke-linecap="round" stroke-dasharray="213.6" stroke-dashoffset="107" transform="rotate(-90 40 40)" style="transition:stroke-dashoffset 1s"/>
            </svg>
            <div class="font-num text-[14px] font-semibold" style="color:#6E582C">50%</div>
            <div class="text-[11px] text-ink-500">审核率</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 检查清单逐项核对。