zkxw/docs/mockups/ui-richness-L3-detail-rich.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>L3 · Hero + 分区详情（丰富）</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>
    .dialog-mock {
      max-width: 800px;
      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);
      background: linear-gradient(135deg, var(--primary-bg) 0%, var(--surface) 100%);
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dialog-hd svg { width: 18px; height: 18px; color: var(--primary-dark); }
    .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-L3">L3 丰富</span>
      <strong>Hero + 分区卡片详情</strong> — 规范 view-hero + detail-section
    </div>
    <a href="ui-richness-index.html">← 返回对比入口</a>
  </div>

  <div class="page-wrap">
    <p class="page-desc" style="margin-bottom:20px">同一「查看客户」弹窗的 L3 版：首屏 Hero 摘要 + 分区字段，状态用 Tag。</p>

    <div class="dialog-mock">
      <div class="dialog-hd">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
        查看客户
      </div>
      <div class="dialog-body">
        <div class="view-hero">
          <img class="view-hero-img" src="https://picsum.photos/seed/hospital/144/144" alt="" />
          <div class="view-hero-main">
            <h2>上海市第一人民医院</h2>
            <div class="view-hero-tags">
              <span class="tag success">正常</span>
              <span class="tag info">医院</span>
              <span class="tag muted">月结</span>
            </div>
            <p class="view-hero-meta">CUS-001 · 华东 / 上海 / 黄浦 · 创建于 2026-01-10</p>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-section-hd">联系信息</div>
          <div class="detail-grid">
            <div class="detail-item"><div class="lbl">联系人</div><div class="val">张医生</div></div>
            <div class="detail-item"><div class="lbl">联系电话</div><div class="val">021-63240000</div></div>
            <div class="detail-item"><div class="lbl">联系邮箱</div><div class="val">zhang@hospital.sh.cn</div></div>
            <div class="detail-item"><div class="lbl">详细地址</div><div class="val">上海市黄浦区武进路 85 号</div></div>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-section-hd">业务信息</div>
          <div class="detail-grid">
            <div class="detail-item"><div class="lbl">结算方式</div><div class="val">月结（每月 25 日）</div></div>
            <div class="detail-item"><div class="lbl">信用额度</div><div class="val" style="color:var(--primary-dark);font-weight:700">¥500,000</div></div>
            <div class="detail-item"><div class="lbl">累计订单</div><div class="val">128 笔</div></div>
            <div class="detail-item"><div class="lbl">最近下单</div><div class="val">2026-03-12 08:30</div></div>
          </div>
        </div>

        <div class="detail-section">
          <div class="detail-section-hd">备注</div>
          <div style="padding:12px 14px;font-size:13px;color:var(--text-muted)">重点客户，优先配送。节假日需提前 2 天预约。</div>
        </div>
      </div>
      <div class="dialog-ft">
        <button class="btn btn-ghost" type="button">
          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
          关闭
        </button>
        <button class="btn btn-main" type="button">
          <svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
          编辑
        </button>
      </div>
    </div>

    <p class="dim-note">
      <strong>L3 详情新增：</strong>渐变弹窗头、view-hero（缩略图+标题+Tag+元信息）、detail-section 分区、金额高亮、底栏图标按钮。
      首屏 3 秒内能回答「是谁、什么状态、在哪」。
      <br><strong>对比：</strong><a href="ui-richness-L1-detail-plain.html">L1 纯描述列表</a>
    </p>
  </div>
</body>
</html>