117 lines
5.1 KiB
HTML
117 lines
5.1 KiB
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>
|