93 lines
3.1 KiB
HTML
93 lines
3.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>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>
|