zkxw/docs/mockups/ui-richness-L1-detail-plain.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>L1 · 纯描述列表详情（现状）</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="ui-richness-shared.css" />
  <style>
    .plain-desc {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .plain-desc th, .plain-desc td {
      border: 1px solid var(--border);
      padding: 10px 14px;
      text-align: left;
    }
    .plain-desc th {
      width: 140px;
      background: var(--table-head);
      color: var(--text-muted);
      font-weight: 600;
    }
    .dialog-mock {
      max-width: 720px;
      margin: 0 auto;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(15,23,42,.12);
      overflow: hidden;
    }
    .dialog-hd {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      font-size: 16px;
      font-weight: 600;
    }
    .dialog-body { padding: 20px; }
    .dialog-ft {
      padding: 12px 20px;
      border-top: 1px solid var(--border);
      background: var(--table-head);
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
  </style>
</head>
<body>
  <div class="demo-banner">
    <div>
      <span class="level-tag level-L1">L1 现状</span>
      <strong>纯描述列表详情</strong> — 类似 el-descriptions border 的查看弹窗
    </div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>

  <div class="page-wrap">
    <p class="page-desc" style="margin-bottom:20px">模拟「查看客户」弹窗内容区——字段平铺，无首屏 Hero、无分区、状态为纯文字。</p>

    <div class="dialog-mock">
      <div class="dialog-hd">查看客户</div>
      <div class="dialog-body">
        <table class="plain-desc">
          <tr><th>客户名称</th><td>上海市第一人民医院</td></tr>
          <tr><th>客户编码</th><td>CUS-001</td></tr>
          <tr><th>客户类型</th><td>医院</td></tr>
          <tr><th>状态</th><td>正常</td></tr>
          <tr><th>所属区域</th><td>华东 / 上海 / 黄浦</td></tr>
          <tr><th>联系人</th><td>张医生</td></tr>
          <tr><th>联系电话</th><td>021-63240000</td></tr>
          <tr><th>结算方式</th><td>月结</td></tr>
          <tr><th>创建时间</th><td>2026-01-10 09:00:00</td></tr>
          <tr><th>备注</th><td>重点客户，优先配送</td></tr>
        </table>
      </div>
      <div class="dialog-ft">
        <button class="btn btn-ghost" type="button">关闭</button>
      </div>
    </div>

    <p class="dim-note">
      <strong>此档问题：</strong>所有字段权重相同，扫读时找不到「这是谁、什么状态」；
      状态/类型无 Tag 色；无缩略图/Logo；像 Excel 导出表格。
      <br><strong>对比：</strong><a href="ui-richness-L3-detail-rich.html" style="color:var(--primary-dark)">L3 Hero + 分区详情</a>
    </p>
  </div>
</body>
</html>