1033 lines
35 KiB
HTML
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>
|