| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032 |
- <!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>
|