Files
shanxia2.0/docs/demos/pl-plan-contract-display-modes.html
T
2026-08-09 14:51:41 +08:00

1033 lines
35 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>运输计划 · 已选合同展示模式 Demo</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-bg: #ecfdf5;
--text: #1e293b;
--text-muted: #64748b;
--border: #d9e8e2;
--bg-page: #f5f7f6;
--surface: #ffffff;
--table-head: #f8fafc;
--row-alt: #fafafa;
--danger: #dc2626;
--warning: #d97706;
--radius: 10px;
--radius-sm: 8px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg-page);
}
.page {
max-width: 1180px;
margin: 0 auto;
padding: 28px 24px 80px;
}
.hero {
margin-bottom: 28px;
padding: 22px 24px;
background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%, #f8fafc 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.hero h1 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.hero p {
margin: 0;
color: var(--text-muted);
max-width: 720px;
}
.hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--primary-bg);
color: var(--primary-dark);
border: 1px solid #a7f3d0;
}
.toc {
position: sticky;
top: 0;
z-index: 10;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
padding: 12px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.toc a {
text-decoration: none;
color: var(--text);
font-size: 13px;
font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: #fff;
}
.toc a:hover {
border-color: var(--primary);
color: var(--primary-dark);
background: var(--primary-bg);
}
.mode {
margin-bottom: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.mode-head {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: #fbfdfe;
}
.mode-head h2 {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
}
.mode-head h2 .code {
display: inline-block;
margin-right: 8px;
padding: 2px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: var(--primary-dark);
}
.mode-head p {
margin: 0;
color: var(--text-muted);
font-size: 13px;
}
.mode-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
padding: 3px 8px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
border: 1px solid #e2e8f0;
color: var(--text-muted);
background: #fff;
}
.tag.good {
color: var(--primary-dark);
border-color: #a7f3d0;
background: var(--primary-bg);
}
.tag.warn {
color: var(--warning);
border-color: #fde68a;
background: #fffbeb;
}
.mode-body {
padding: 18px 20px 20px;
}
/* 模拟供需块上下文 */
.party-mock {
padding: 14px;
border: 1px solid #e2e8f0;
border-radius: var(--radius-sm);
background: #f8fafc;
}
.party-mock__title {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
}
.select-row {
display: flex;
gap: 12px;
margin-bottom: 12px;
}
.fake-field {
flex: 1;
min-width: 0;
}
.fake-field label {
display: block;
margin-bottom: 6px;
font-size: 12px;
color: var(--text-muted);
}
.fake-control {
height: 36px;
display: flex;
align-items: center;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text);
font-size: 13px;
}
.fake-btn {
height: 36px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
color: var(--text);
font-size: 13px;
font-weight: 500;
white-space: nowrap;
}
table.data {
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
table.data th,
table.data td {
padding: 8px 10px;
border-bottom: 1px solid #eef2f7;
text-align: left;
font-size: 13px;
vertical-align: top;
}
table.data th {
background: var(--table-head);
font-weight: 600;
color: #334155;
white-space: nowrap;
}
table.data tr:last-child td { border-bottom: none; }
table.data .center { text-align: center; }
table.data .right { text-align: right; }
.link-btn {
border: none;
background: none;
color: var(--danger);
font-size: 13px;
cursor: pointer;
padding: 0;
}
.muted { color: var(--text-muted); }
.status-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: var(--primary-dark);
}
/* Mode A: 当前嵌套表 */
.nested-in-cell {
width: 100%;
border-collapse: collapse;
border: 1px solid #e2e8f0;
background: #fff;
}
.nested-in-cell th,
.nested-in-cell td {
padding: 4px 6px;
border: 1px solid #eef2f7;
font-size: 12px;
}
.nested-in-cell th {
background: #f1f5f9;
font-weight: 600;
}
/* Mode B: 卡片 */
.contract-cards { display: flex; flex-direction: column; gap: 10px; }
.contract-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
overflow: hidden;
}
.contract-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--primary-bg);
border-bottom: 1px solid #a7f3d0;
}
.contract-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
min-width: 0;
}
.contract-card__no {
font-weight: 700;
color: var(--primary-dark);
}
.contract-card__body { padding: 0; }
.contract-card table {
width: 100%;
border-collapse: collapse;
}
.contract-card table th,
.contract-card table td {
padding: 8px 10px;
border-bottom: 1px solid #eef2f7;
font-size: 12px;
text-align: left;
}
.contract-card table th {
background: var(--table-head);
font-weight: 600;
}
.contract-card table tr:last-child td { border-bottom: none; }
/* Mode C: 展开行 */
.expand-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary-dark);
font-weight: 600;
cursor: pointer;
user-select: none;
}
.expand-panel {
margin: 0;
padding: 10px 12px 12px 36px;
background: #f8fafc;
border-top: 1px dashed #d9e8e2;
}
/* Mode D: 摘要 chips + 明细 */
.summary-line {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 6px;
}
.chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
background: #f1f5f9;
color: #334155;
border: 1px solid #e2e8f0;
}
/* Mode E: 分组清单 */
.group-list { display: flex; flex-direction: column; gap: 12px; }
.group-block {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
}
.group-block__bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: #fff;
}
.kv {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
}
.kv b { font-weight: 600; }
.product-rows {
display: flex;
flex-direction: column;
}
.product-row {
display: grid;
grid-template-columns: 1.4fr 0.9fr 0.7fr 0.9fr 0.6fr 0.5fr 0.9fr 0.8fr 1fr;
gap: 8px;
padding: 8px 12px;
border-bottom: 1px solid #f1f5f9;
font-size: 12px;
}
.product-row:last-child { border-bottom: none; }
.product-row.head {
background: var(--table-head);
font-weight: 600;
color: #475569;
}
.product-row .label-mobile { display: none; }
/* Mode F: 紧凑两行文本 */
.compact-list { display: flex; flex-direction: column; gap: 8px; }
.compact-item {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: #fff;
}
.compact-item__top {
display: flex;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.compact-item__products {
margin: 0;
padding-left: 18px;
color: var(--text-muted);
font-size: 12px;
}
.compact-item__products li { margin: 2px 0; }
.pick-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
}
.pick-bar label {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
cursor: pointer;
}
.pick-bar input { accent-color: var(--primary-dark); width: 16px; height: 16px; }
.note {
font-size: 12px;
color: var(--text-muted);
}
.footer-choice {
position: sticky;
bottom: 12px;
margin-top: 12px;
padding: 14px 16px;
border-radius: var(--radius);
border: 1px solid #a7f3d0;
background: rgba(236, 253, 245, 0.96);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.footer-choice strong { color: var(--primary-dark); }
@media (max-width: 900px) {
.select-row { flex-direction: column; }
.product-row {
grid-template-columns: 1fr 1fr;
}
.product-row.head { display: none; }
.product-row .label-mobile {
display: block;
color: var(--text-muted);
font-size: 11px;
}
}
</style>
</head>
<body>
<div class="page">
<header class="hero">
<h1>运输计划 · 已选合同信息展示模式</h1>
<p>
场景:新增/编辑弹窗中,供方或需方已选择客户与合同后,下方如何展示「合同 + 合同内产品」。
以下用同一份示例数据,提供 6 种展示模式。请勾选倾向方案,回复模式编号即可落地。
</p>
<div class="hero-meta">
<span class="pill">Fresh Mint</span>
<span class="pill">示例:供方 · 2 份合同</span>
<span class="pill">产品字段:名称/别名/品牌/规格/数量/单位/包装/送货/备注</span>
</div>
</header>
<nav class="toc">
<a href="#mode-a">A 单元格嵌套表</a>
<a href="#mode-b">B 合同卡片</a>
<a href="#mode-c">C 主表可展开</a>
<a href="#mode-d">D 摘要 + 明细表</a>
<a href="#mode-e">E 分组清单</a>
<a href="#mode-f">F 紧凑文本</a>
</nav>
<!-- ========== MODE A ========== -->
<section class="mode" id="mode-a">
<div class="mode-head">
<div>
<h2><span class="code">A</span>单元格内嵌套产品表(当前实现接近)</h2>
<p>外层合同行 + 「产品信息」列里再放一张小表。信息全,但单元格拥挤、行高失控。</p>
</div>
<div class="mode-tags">
<span class="tag warn">易显乱</span>
<span class="tag">信息完整</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<table class="data">
<thead>
<tr>
<th style="width: 140px">合同编号</th>
<th>产品信息</th>
<th class="center" style="width: 100px">合同类型</th>
<th class="center" style="width: 72px">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>HT2026080001</td>
<td>
<table class="nested-in-cell">
<thead>
<tr>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th>数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
<td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
<tr>
<td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
<td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
</tr>
</tbody>
</table>
</td>
<td class="center"><span class="status-tag">销售合同</span></td>
<td class="center"><button class="link-btn" type="button">移除</button></td>
</tr>
<tr>
<td>HT2026080018</td>
<td>
<table class="nested-in-cell">
<thead>
<tr>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th>数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
<td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
</tbody>
</table>
</td>
<td class="center"><span class="status-tag">框架合同</span></td>
<td class="center"><button class="link-btn" type="button">移除</button></td>
</tr>
</tbody>
</table>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="A" /> 选择模式 A</label>
<span class="note">适合:合同很少、产品字段少时</span>
</div>
</div>
</section>
<!-- ========== MODE B ========== -->
<section class="mode" id="mode-b">
<div class="mode-head">
<div>
<h2><span class="code">B</span>合同卡片(推荐候选)</h2>
<p>每份合同一张卡片:顶部合同编号/类型/移除,下方独立产品明细表。层次清晰,半宽供需块里也较稳。</p>
</div>
<div class="mode-tags">
<span class="tag good">推荐候选</span>
<span class="tag good">层次清晰</span>
<span class="tag">易扫读</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<div class="contract-cards">
<article class="contract-card">
<div class="contract-card__head">
<div class="contract-card__meta">
<span class="contract-card__no">HT2026080001</span>
<span class="status-tag">销售合同</span>
<span class="muted">2 个产品</span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<div class="contract-card__body">
<table>
<thead>
<tr>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
<td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
<tr>
<td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
<td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
</tr>
</tbody>
</table>
</div>
</article>
<article class="contract-card">
<div class="contract-card__head">
<div class="contract-card__meta">
<span class="contract-card__no">HT2026080018</span>
<span class="status-tag">框架合同</span>
<span class="muted">1 个产品</span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<div class="contract-card__body">
<table>
<thead>
<tr>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
<td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="B" checked /> 选择模式 B</label>
<span class="note">适合:默认推荐;合同 1~N 份、产品字段较多</span>
</div>
</div>
</section>
<!-- ========== MODE C ========== -->
<section class="mode" id="mode-c">
<div class="mode-head">
<div>
<h2><span class="code">C</span>主表 + 展开行(行中行)</h2>
<p>默认只看合同概要;点击展开后显示产品明细表。列表紧凑,适合合同多、平时不看产品细节。</p>
</div>
<div class="mode-tags">
<span class="tag good">列表紧凑</span>
<span class="tag">需二次点击</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<table class="data">
<thead>
<tr>
<th style="width: 48px"></th>
<th>合同编号</th>
<th>产品摘要</th>
<th class="center">合同类型</th>
<th class="center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">▾</td>
<td>
<span class="expand-toggle">HT2026080001</span>
</td>
<td>硫酸、盐酸 · 共 2 项</td>
<td class="center"><span class="status-tag">销售合同</span></td>
<td class="center"><button class="link-btn" type="button">移除</button></td>
</tr>
<tr>
<td colspan="5" style="padding: 0; border-bottom: 1px solid #eef2f7;">
<div class="expand-panel">
<table class="data" style="border: none;">
<thead>
<tr>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
<td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
<tr>
<td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
<td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td class="center">▸</td>
<td>HT2026080018</td>
<td>液碱 · 共 1 项</td>
<td class="center"><span class="status-tag">框架合同</span></td>
<td class="center"><button class="link-btn" type="button">移除</button></td>
</tr>
</tbody>
</table>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="C" /> 选择模式 C</label>
<span class="note">适合:合同较多,产品明细按需查看</span>
</div>
</div>
</section>
<!-- ========== MODE D ========== -->
<section class="mode" id="mode-d">
<div class="mode-head">
<div>
<h2><span class="code">D</span>合同摘要条 + 下方统一产品明细表</h2>
<p>上方用 Tag 展示已选合同;下方一张「合同编号 + 产品字段」合并表。扫产品方便,但合同边界弱一些。</p>
</div>
<div class="mode-tags">
<span class="tag good">产品横向对比好</span>
<span class="tag warn">合同边界弱</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<div class="summary-line">
<span class="chip">HT2026080001 · 销售合同 ✕</span>
<span class="chip">HT2026080018 · 框架合同 ✕</span>
</div>
<table class="data">
<thead>
<tr>
<th>合同编号</th>
<th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
<th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>HT2026080001</td>
<td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
<td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
<tr>
<td>HT2026080001</td>
<td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
<td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
</tr>
<tr>
<td>HT2026080018</td>
<td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
<td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
</tr>
</tbody>
</table>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="D" /> 选择模式 D</label>
<span class="note">适合:更关心产品清单,而不是按合同分组</span>
</div>
</div>
</section>
<!-- ========== MODE E ========== -->
<section class="mode" id="mode-e">
<div class="mode-head">
<div>
<h2><span class="code">E</span>分组清单(轻卡片 + 网格行)</h2>
<p>无外层大表;每份合同一条标题栏 + 产品网格行。比 B 更轻,比 A 更整齐。</p>
</div>
<div class="mode-tags">
<span class="tag good">轻量</span>
<span class="tag">半宽友好</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<div class="group-list">
<div class="group-block">
<div class="group-block__bar">
<div class="kv">
<span><b>合同编号</b> HT2026080001</span>
<span><b>类型</b> <span class="status-tag">销售合同</span></span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<div class="product-rows">
<div class="product-row head">
<span>产品名称</span><span>别名</span><span>品牌</span><span>型号/规格</span>
<span>数量</span><span>单位</span><span>包装规格</span><span>送货方式</span><span>备注</span>
</div>
<div class="product-row">
<span><span class="label-mobile">产品名称</span>硫酸</span>
<span><span class="label-mobile">别名</span>工业硫酸</span>
<span><span class="label-mobile">品牌</span>—</span>
<span><span class="label-mobile">型号/规格</span>98%</span>
<span><span class="label-mobile">数量</span>30</span>
<span><span class="label-mobile">单位</span>吨</span>
<span><span class="label-mobile">包装规格</span>散水</span>
<span><span class="label-mobile">送货方式</span>送到</span>
<span><span class="label-mobile">备注</span>—</span>
</div>
<div class="product-row">
<span><span class="label-mobile">产品名称</span>盐酸</span>
<span><span class="label-mobile">别名</span>—</span>
<span><span class="label-mobile">品牌</span>山峡</span>
<span><span class="label-mobile">型号/规格</span>31%</span>
<span><span class="label-mobile">数量</span>20</span>
<span><span class="label-mobile">单位</span>吨</span>
<span><span class="label-mobile">包装规格</span>吨桶</span>
<span><span class="label-mobile">送货方式</span>自提</span>
<span><span class="label-mobile">备注</span>注意防腐蚀</span>
</div>
</div>
</div>
<div class="group-block">
<div class="group-block__bar">
<div class="kv">
<span><b>合同编号</b> HT2026080018</span>
<span><b>类型</b> <span class="status-tag">框架合同</span></span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<div class="product-rows">
<div class="product-row head">
<span>产品名称</span><span>别名</span><span>品牌</span><span>型号/规格</span>
<span>数量</span><span>单位</span><span>包装规格</span><span>送货方式</span><span>备注</span>
</div>
<div class="product-row">
<span><span class="label-mobile">产品名称</span>液碱</span>
<span><span class="label-mobile">别名</span>烧碱</span>
<span><span class="label-mobile">品牌</span>—</span>
<span><span class="label-mobile">型号/规格</span>32%</span>
<span><span class="label-mobile">数量</span>15</span>
<span><span class="label-mobile">单位</span>吨</span>
<span><span class="label-mobile">包装规格</span>散水</span>
<span><span class="label-mobile">送货方式</span>送到</span>
<span><span class="label-mobile">备注</span>—</span>
</div>
</div>
</div>
</div>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="E" /> 选择模式 E</label>
<span class="note">适合:半宽布局,想弱化「表中表」感</span>
</div>
</div>
</section>
<!-- ========== MODE F ========== -->
<section class="mode" id="mode-f">
<div class="mode-head">
<div>
<h2><span class="code">F</span>紧凑文本清单</h2>
<p>合同一行标题,产品用短文本多行展示。最省空间,但字段对齐弱、不适合字段很多时核对。</p>
</div>
<div class="mode-tags">
<span class="tag good">最省空间</span>
<span class="tag warn">不利于核对</span>
</div>
</div>
<div class="mode-body">
<div class="party-mock">
<h3 class="party-mock__title">供方信息</h3>
<div class="select-row">
<div class="fake-field">
<label>供方客户 *</label>
<div class="fake-control">安庆某某化工有限公司</div>
</div>
<div class="fake-field" style="flex: 0.7">
<label>供方合同 *</label>
<button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
</div>
</div>
<div class="compact-list">
<div class="compact-item">
<div class="compact-item__top">
<div>
<b>HT2026080001</b>
<span class="status-tag" style="margin-left: 8px">销售合同</span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<ol class="compact-item__products">
<li>硫酸 / 别名工业硫酸 / — / 98% / 30吨 / 散水 / 送到</li>
<li>盐酸 / — / 山峡 / 31% / 20吨 / 吨桶 / 自提 / 注意防腐蚀</li>
</ol>
</div>
<div class="compact-item">
<div class="compact-item__top">
<div>
<b>HT2026080018</b>
<span class="status-tag" style="margin-left: 8px">框架合同</span>
</div>
<button class="link-btn" type="button">移除</button>
</div>
<ol class="compact-item__products">
<li>液碱 / 别名烧碱 / — / 32% / 15吨 / 散水 / 送到</li>
</ol>
</div>
</div>
</div>
<div class="pick-bar">
<label><input type="radio" name="choice" value="F" /> 选择模式 F</label>
<span class="note">适合:仅需快速确认选了什么,不在弹窗内细核字段</span>
</div>
</div>
</section>
<div class="footer-choice" id="footer-choice">
当前勾选:<strong id="choice-label">B · 合同卡片</strong>
—— 请直接回复模式编号(如「用 B」或「用 E」),我按选定方案改正式页面。
</div>
</div>
<script>
const labels = {
A: 'A · 单元格嵌套表',
B: 'B · 合同卡片',
C: 'C · 主表可展开',
D: 'D · 摘要 + 明细表',
E: 'E · 分组清单',
F: 'F · 紧凑文本'
};
const labelEl = document.getElementById('choice-label');
document.querySelectorAll('input[name="choice"]').forEach((el) => {
el.addEventListener('change', () => {
labelEl.textContent = labels[el.value] || el.value;
});
});
</script>
</body>
</html>