描述列表

描述列表是详情页的核心组件。标签 13px / 600，内容 14px / 400；带边框模式使用 ink-100 分隔线，移动端自动降为单列。

返回组件库
19 · DESCRIPTIONS · 描述列表（§12.9）
3 列带边框模式
患者姓名
郑宗范
性别
男
年龄
79 岁
住院号
1708569
入院日期
2017-02-23
主管医生
刘姗姗
无边框模式（垂直布局）
科室
呼吸内科
床号
02003
医保类型
城镇职工医保
<section id="descriptions" class="section">
    <div class="section-title">19 · DESCRIPTIONS · 描述列表（§12.9）</div>

    <div class="demo-sub">3 列带边框模式</div>
    <div class="demo-box">
      <div style="border:1px solid #E4E4E7;border-radius:6px;overflow:hidden">
        <div style="display:grid;grid-template-columns:repeat(3,1fr)">
          <div style="padding:12px 16px;border-bottom:1px solid #E4E4E7;border-right:1px solid #E4E4E7">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">患者姓名</div>
            <div style="font-size:14px;color:#18181B">郑宗范</div>
          </div>
          <div style="padding:12px 16px;border-bottom:1px solid #E4E4E7;border-right:1px solid #E4E4E7">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">性别</div>
            <div style="font-size:14px;color:#18181B">男</div>
          </div>
          <div style="padding:12px 16px;border-bottom:1px solid #E4E4E7">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">年龄</div>
            <div style="font-size:14px;color:#18181B">79 岁</div>
          </div>
          <div style="padding:12px 16px;border-right:1px solid #E4E4E7">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">住院号</div>
            <div style="font-size:14px;color:#18181B;font-family:ui-monospace,monospace">1708569</div>
          </div>
          <div style="padding:12px 16px;border-right:1px solid #E4E4E7">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">入院日期</div>
            <div style="font-size:14px;color:#18181B;font-family:ui-monospace,monospace">2017-02-23</div>
          </div>
          <div style="padding:12px 16px">
            <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;background:#FAFAFA;padding:4px 0;margin-bottom:4px">主管医生</div>
            <div style="font-size:14px;color:#18181B">刘姗姗</div>
          </div>
        </div>
      </div>
    </div>

    <div class="demo-sub">无边框模式（垂直布局）</div>
    <div class="demo-box">
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px">
        <div>
          <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;margin-bottom:6px">科室</div>
          <div style="font-size:14px;color:#18181B">呼吸内科</div>
        </div>
        <div>
          <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;margin-bottom:6px">床号</div>
          <div style="font-size:14px;color:#18181B">02003</div>
        </div>
        <div>
          <div style="font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.02em;color:#71717A;margin-bottom:6px">医保类型</div>
          <div style="font-size:14px;color:#18181B">城镇职工医保</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 检查清单逐项核对。