| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796 |
- <!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;
- --surface: #ffffff;
- --table-head: #f8fafc;
- --row-alt: #fafafa;
- --bg-page: #f1f5f9;
- --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
- --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);
- --radius: 10px;
- --warn: #d97706;
- --warn-bg: #fffbeb;
- --danger: #dc2626;
- --info: #0284c7;
- --info-bg: #f0f9ff;
- --delivery-accent: #0284c7;
- --delivery-bg: #f0f9ff;
- --dialog-max: 1280px;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- min-height: 100vh;
- font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
- font-size: 14px;
- line-height: 1.5;
- color: var(--text);
- background: var(--bg-page);
- }
- .page { max-width: 1440px; margin: 0 auto; padding: 24px 20px 80px; }
- .hero {
- background: linear-gradient(135deg, #ecfdf5 0%, #fff 50%, #f0f9ff 100%);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 22px 24px;
- margin-bottom: 18px;
- box-shadow: var(--shadow);
- }
- .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
- .hero h1 em { font-style: normal; color: var(--primary-dark); }
- .hero p { margin: 0; color: var(--text-muted); max-width: 980px; }
- .pills { 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: 500;
- background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
- }
- .pill.blue { background: var(--delivery-bg); color: var(--delivery-accent); border-color: #bae6fd; }
- .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
- .toolbar {
- display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
- background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
- padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
- }
- .toolbar label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
- .toolbar select {
- height: 34px; border: 1px solid var(--border); border-radius: 8px;
- padding: 0 10px; font: inherit;
- }
- .scheme-tabs {
- display: flex; flex-wrap: wrap; gap: 6px;
- background: #fff; border: 1px solid var(--border);
- border-radius: var(--radius) var(--radius) 0 0; padding: 10px 12px 0;
- }
- .scheme-tab {
- border: none; background: transparent; cursor: pointer;
- padding: 10px 14px; font-size: 13px; font-weight: 600;
- color: var(--text-muted); border-bottom: 2px solid transparent; font-family: inherit;
- }
- .scheme-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
- .scheme-tab.recommended::after {
- content: "推荐"; margin-left: 6px; font-size: 10px; font-weight: 700;
- color: #fff; background: var(--primary-dark); padding: 1px 6px; border-radius: 999px;
- }
- .scheme-panel {
- display: none; background: #fff; border: 1px solid var(--border); border-top: none;
- border-radius: 0 0 var(--radius) var(--radius); padding: 16px 18px 22px; box-shadow: var(--shadow);
- }
- .scheme-panel.active { display: block; }
- .scheme-desc {
- margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px;
- border: 1px solid #bae6fd; background: var(--info-bg); color: #0369a1;
- }
- .scheme-desc.ok { border-color: #a7f3d0; background: var(--primary-bg); color: var(--primary-dark); }
- /* 模拟弹窗 */
- .dialog-sim {
- width: var(--dialog-max); max-width: 100%; margin: 0 auto;
- border: 1px solid var(--border); border-radius: var(--radius);
- background: #fff; box-shadow: var(--shadow-lg); overflow: hidden;
- }
- .dialog-sim__hd {
- padding: 14px 18px; border-bottom: 1px solid var(--border);
- font-weight: 700; font-size: 15px;
- }
- .dialog-sim__bd { padding: 16px 18px 20px; background: #fafcfb; }
- .section { margin-bottom: 16px; }
- .section-title {
- margin: 0 0 10px; font-size: 14px; font-weight: 700;
- display: flex; align-items: center; justify-content: space-between; gap: 12px;
- }
- .section-title span:first-child { display: flex; align-items: center; gap: 8px; }
- .section-title span:first-child::before {
- content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--primary);
- }
- .grid-5 {
- display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
- }
- .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
- .span-2 { grid-column: span 2; }
- .field label {
- display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500;
- }
- .field input, .field select, .field .ctrl {
- width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px;
- padding: 0 10px; font: inherit; background: #fff;
- }
- .field .ctrl.muted { background: #f8fafc; color: var(--text-muted); }
- .btn {
- display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
- border-radius: 8px; border: 1px solid var(--border); background: #fff;
- font: inherit; font-weight: 600; font-size: 12px; cursor: pointer;
- }
- .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
- .btn.ghost { background: #fff; }
- .btn.sm { height: 28px; padding: 0 10px; font-size: 11px; }
- /* 产品信息简表 */
- .mini-table-wrap {
- border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
- }
- table.mini {
- width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;
- }
- table.mini th, table.mini td {
- border-bottom: 1px solid var(--border); padding: 7px 8px; text-align: left;
- }
- table.mini th { background: var(--table-head); color: var(--text-muted); font-size: 11px; font-weight: 600; }
- table.mini tr:last-child td { border-bottom: none; }
- .tag {
- display: inline-flex; padding: 1px 6px; border-radius: 4px;
- font-size: 10px; font-weight: 600;
- }
- .tag.danger { background: var(--danger); color: #fff; }
- /* ===== 装货左 / 送货右 主分栏 ===== */
- .stops-split {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 0;
- border: 1px solid var(--border);
- border-radius: var(--radius);
- overflow: hidden;
- background: #fff;
- min-height: 420px;
- }
- .stops-split.ratio-46 { grid-template-columns: 0.46fr 0.54fr; }
- .stop-pane {
- display: flex; flex-direction: column; min-width: 0; min-height: 0;
- }
- .stop-pane + .stop-pane { border-left: 1px solid var(--border); }
- .stop-pane__hd {
- display: flex; align-items: center; justify-content: space-between; gap: 10px;
- padding: 10px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0;
- }
- .stop-pane--load .stop-pane__hd { background: linear-gradient(180deg, #ecfdf5 0%, #f8fffc 100%); }
- .stop-pane--delivery .stop-pane__hd { background: linear-gradient(180deg, #f0f9ff 0%, #f8fcff 100%); }
- .stop-pane__title {
- margin: 0; font-size: 13px; font-weight: 700;
- display: flex; align-items: center; gap: 8px;
- }
- .stop-pane__title .dot {
- width: 8px; height: 8px; border-radius: 50%;
- }
- .stop-pane--load .stop-pane__title .dot { background: var(--primary); }
- .stop-pane--delivery .stop-pane__title .dot { background: var(--delivery-accent); }
- .stop-pane__bd {
- padding: 12px; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px;
- }
- .party-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
- .party-row.two { grid-template-columns: 1.2fr 0.8fr; }
- .dibang-row {
- display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 0;
- }
- .dibang-row input { accent-color: var(--primary); width: 15px; height: 15px; }
- .products-head {
- display: flex; align-items: center; justify-content: space-between; gap: 8px;
- margin-top: 4px;
- }
- .products-head__label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
- /* 段内紧凑产品表 */
- table.seg {
- width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;
- }
- table.seg th, table.seg td {
- border-bottom: 1px solid var(--border); padding: 6px 6px; vertical-align: middle;
- }
- table.seg th {
- background: var(--table-head); color: var(--text-muted);
- font-size: 10px; font-weight: 600; white-space: nowrap;
- }
- table.seg tr:last-child td { border-bottom: none; }
- table.seg input, table.seg select {
- width: 100%; height: 28px; border: 1px solid var(--border);
- border-radius: 6px; padding: 0 5px; font: inherit; font-size: 11px;
- }
- .subline { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
- .num { text-align: right; }
- .center { text-align: center; }
- /* 数量平衡条 */
- .balance-bar {
- display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
- padding: 8px 12px; border-top: 1px solid var(--border);
- background: #f8fafc; font-size: 11px; flex-shrink: 0;
- }
- .balance-bar .ok { color: var(--primary-dark); font-weight: 600; }
- .balance-bar .warn { color: var(--warn); font-weight: 600; }
- .balance-item { display: flex; align-items: center; gap: 4px; }
- .balance-item strong { font-weight: 700; }
- /* 送货段 Tab(方案 1) */
- .delivery-tabs {
- display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px;
- }
- .delivery-tab {
- border: 1px solid var(--border); background: #fff; border-radius: 6px;
- padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
- color: var(--text-muted); font-family: inherit;
- }
- .delivery-tab.active {
- border-color: #7dd3fc; background: var(--delivery-bg); color: var(--delivery-accent);
- }
- .delivery-tab .qty { font-weight: 400; color: var(--text-muted); margin-left: 4px; }
- .delivery-panel { display: none; flex-direction: column; gap: 10px; flex: 1; }
- .delivery-panel.active { display: flex; }
- .delivery-actions {
- display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
- }
- /* 送货段堆叠卡片(方案 2) */
- .delivery-stack { display: flex; flex-direction: column; gap: 10px; }
- .delivery-card {
- border: 1px solid #bae6fd; border-radius: 8px; overflow: hidden; background: #fff;
- }
- .delivery-card__hd {
- display: flex; align-items: center; justify-content: space-between; gap: 8px;
- padding: 7px 10px; background: var(--delivery-bg); border-bottom: 1px solid #bae6fd;
- font-size: 12px; font-weight: 700; color: #0369a1;
- }
- .delivery-card__bd { padding: 10px; }
- /* 产品条(备选) */
- .product-strip {
- border: 1px solid var(--border); border-radius: 8px; padding: 7px 8px; background: #fff;
- font-size: 11px; margin-bottom: 6px;
- }
- .product-strip:last-child { margin-bottom: 0; }
- .product-strip__r1 { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
- .product-strip__r1 .name { flex: 1; font-weight: 600; font-size: 12px; min-width: 0; }
- .product-strip__r1 .qty { width: 72px; flex-shrink: 0; }
- .product-strip__r1 .qty input { width: 100%; height: 26px; border: 1px solid var(--border); border-radius: 5px; padding: 0 4px; font: inherit; font-size: 11px; }
- .product-strip__meta { color: var(--text-muted); font-size: 10px; margin-bottom: 5px; }
- .product-strip__r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
- .product-strip__r2 label { display: block; font-size: 9px; color: var(--text-muted); margin-bottom: 1px; }
- .product-strip__r2 select, .product-strip__r2 input {
- width: 100%; height: 26px; border: 1px solid var(--border); border-radius: 5px;
- padding: 0 4px; font: inherit; font-size: 11px;
- }
- .pros-cons {
- display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px;
- }
- .pros-cons > div {
- border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px;
- }
- .pros-cons h4 { margin: 0 0 6px; font-size: 12px; }
- .pros-cons ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
- .flow-arrow {
- text-align: center; font-size: 11px; color: var(--text-muted);
- padding: 4px 0; border-top: 1px dashed var(--border); margin-top: auto;
- }
- @media (max-width: 1100px) {
- .stops-split, .stops-split.ratio-46 { grid-template-columns: 1fr; }
- .stop-pane + .stop-pane { border-left: none; border-top: 1px solid var(--border); }
- .grid-5 { grid-template-columns: repeat(2, 1fr); }
- }
- @media (max-width: 640px) {
- .grid-2, .party-row.two { grid-template-columns: 1fr; }
- .span-2 { grid-column: span 1; }
- }
- </style>
- </head>
- <body>
- <div class="page">
- <header class="hero">
- <h1>运输计划 · <em>装货左 / 送货右</em> 分栏 Demo</h1>
- <p>
- 在保留「基础信息 + 产品信息」全宽的前提下,将<strong>装货与送货并列左右</strong>,
- 形成「起点 → 终点」的视觉对照;每侧内部纵向排布(客户/地址在上,段内紧凑产品在下),
- 避免在 50% 栏宽里再嵌套「表单|产品」横分。
- </p>
- <div class="pills">
- <span class="pill">左:装货(1 段固定)</span>
- <span class="pill blue">右:送货(可多段)</span>
- <span class="pill muted">段内产品:6 列紧凑表 / 产品条,无横向滚动</span>
- </div>
- </header>
- <div class="toolbar">
- <label for="viewport">模拟弹窗宽度</label>
- <select id="viewport">
- <option value="1440">1440px</option>
- <option value="1280" selected>1280px</option>
- <option value="1100">1100px(分栏断点)</option>
- </select>
- </div>
- <div class="scheme-tabs">
- <button class="scheme-tab recommended active" data-scheme="tabs" type="button">方案 1 · 右栏送货 Tab</button>
- <button class="scheme-tab" data-scheme="stack" type="button">方案 2 · 右栏送货堆叠</button>
- <button class="scheme-tab" data-scheme="strips" type="button">方案 3 · 两侧产品条</button>
- </div>
- <!-- 方案 1 -->
- <section class="scheme-panel active" id="panel-tabs">
- <p class="scheme-desc ok">
- <strong>推荐:</strong>装货固定占左栏;右栏多个送货段用 <strong>Tab 切换</strong>,每次只展开一段的表单+产品,
- 避免 3 段送货纵向堆叠把弹窗撑得很高。底部横条展示数量平衡(装货合计 = 送货合计 = 计划总量)。
- </p>
- <div class="dialog-sim">
- <div class="dialog-sim__hd">编辑运输计划</div>
- <div class="dialog-sim__bd">
- <!-- 基础信息 -->
- <div class="section">
- <h3 class="section-title"><span>基础信息</span></h3>
- <div class="grid-5">
- <div class="field"><label>创建日期</label><input value="2026-08-26" readonly /></div>
- <div class="field"><label>计划日期</label><input value="2026-08-26" /></div>
- <div class="field"><label>归属公司</label><select><option>安庆山峡</option></select></div>
- <div class="field"><label>单据类型</label><select><option>直销单</option></select></div>
- <div class="field"><label>跟进人</label><input value="张三" readonly /></div>
- </div>
- </div>
- <!-- 产品信息 -->
- <div class="section">
- <h3 class="section-title">
- <span>产品信息(计划总量)</span>
- <button class="btn primary sm" type="button">+ 添加产品</button>
- </h3>
- <div class="mini-table-wrap">
- <table class="mini">
- <thead>
- <tr>
- <th style="width:4%">#</th>
- <th style="width:18%">产品名称</th>
- <th style="width:12%">别名</th>
- <th style="width:12%">品牌</th>
- <th style="width:10%">规格</th>
- <th style="width:6%">单位</th>
- <th style="width:10%">计划数量</th>
- <th style="width:10%">包装规格</th>
- <th style="width:10%">送货方式</th>
- <th>备注</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="center">1</td>
- <td>97% 精制硫酸 <span class="tag danger">易制毒</span></td>
- <td class="center">工业硫酸</td>
- <td class="center">不限</td>
- <td>CP级</td>
- <td class="center">吨</td>
- <td class="num">30.000</td>
- <td class="center">槽罐</td>
- <td class="center">一票制</td>
- <td>—</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- 装货左 | 送货右 -->
- <div class="section">
- <h3 class="section-title"><span>装卸货信息</span></h3>
- <div class="stops-split">
- <!-- 左:装货 -->
- <div class="stop-pane stop-pane--load">
- <div class="stop-pane__hd">
- <h4 class="stop-pane__title"><span class="dot"></span>装货信息</h4>
- <button class="btn ghost sm" type="button">同步产品</button>
- </div>
- <div class="stop-pane__bd">
- <div class="party-row two">
- <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
- <div class="field"><label>装货合同 *</label><button class="btn ghost sm" type="button" style="width:100%">选合同</button></div>
- </div>
- <div class="grid-2">
- <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
- <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
- <div class="field span-2"><label>装货地址</label><input value="安庆市迎江区 · 供应商仓库" /></div>
- <div class="field span-2"><label>注意事项</label><input value="装货前联系仓库" /></div>
- </div>
- <div class="dibang-row"><input type="checkbox" checked /> 生成地磅单(出库)</div>
- <div class="products-head">
- <span class="products-head__label">装货产品</span>
- </div>
- <div class="mini-table-wrap">
- <table class="seg">
- <thead>
- <tr>
- <th style="width:8%">#</th>
- <th>产品</th>
- <th style="width:22%">计划数量</th>
- <th style="width:22%">包装</th>
- <th style="width:22%">送货方式</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="center">1</td>
- <td>
- 97% 精制硫酸 <span class="tag danger">毒</span>
- <span class="subline">工业硫酸 · 不限 · CP级 · 吨</span>
- </td>
- <td class="num"><input value="30" /></td>
- <td><select><option>槽罐</option></select></td>
- <td><select><option>一票制</option></select></td>
- </tr>
- </tbody>
- </table>
- </div>
- <div class="flow-arrow">↓ 出库 · 一车多卸</div>
- </div>
- </div>
- <!-- 右:送货 -->
- <div class="stop-pane stop-pane--delivery">
- <div class="stop-pane__hd">
- <h4 class="stop-pane__title"><span class="dot"></span>送货信息</h4>
- <button class="btn primary sm" type="button">+ 添加送货段</button>
- </div>
- <div class="stop-pane__bd">
- <div class="delivery-tabs" id="deliveryTabs">
- <button class="delivery-tab active" data-panel="d1" type="button">
- #1 客户甲<span class="qty">10t</span>
- </button>
- <button class="delivery-tab" data-panel="d2" type="button">
- #2 客户乙<span class="qty">15t</span>
- </button>
- <button class="delivery-tab" data-panel="d3" type="button">
- #3 山峡<span class="qty">5t</span>
- </button>
- </div>
- <div class="delivery-panel active" id="panel-d1">
- <div class="delivery-actions">
- <button class="btn ghost sm" type="button">下移</button>
- <button class="btn ghost sm" type="button">删除</button>
- </div>
- <div class="party-row two">
- <div class="field"><label>送货客户 *</label><select><option>客户甲有限公司</option></select></div>
- <div class="field"><label>送货合同 *</label><button class="btn ghost sm" type="button" style="width:100%">选合同</button></div>
- </div>
- <div class="grid-2">
- <div class="field"><label>送货时间</label><input value="2026-08-27" /></div>
- <div class="field"><label>联系方式</label><input value="李经理" /></div>
- <div class="field span-2"><label>送货地址</label><input value="合肥市高新区 …" /></div>
- </div>
- <div class="dibang-row"><input type="checkbox" /> 生成地磅单(入库)</div>
- <div class="products-head"><span class="products-head__label">送货产品</span><button class="btn ghost sm" type="button">同步</button></div>
- <div class="mini-table-wrap">
- <table class="seg">
- <thead><tr><th style="width:8%">#</th><th>产品</th><th style="width:22%">计划数量</th><th style="width:22%">包装</th><th style="width:22%">送货方式</th></tr></thead>
- <tbody>
- <tr>
- <td class="center">1</td>
- <td>97% 精制硫酸<span class="subline">工业硫酸 · CP级 · 吨</span></td>
- <td class="num"><input value="10" /></td>
- <td><select><option>槽罐</option></select></td>
- <td><select><option>一票制</option></select></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="delivery-panel" id="panel-d2">
- <div class="delivery-actions">
- <button class="btn ghost sm" type="button">上移</button>
- <button class="btn ghost sm" type="button">下移</button>
- <button class="btn ghost sm" type="button">删除</button>
- </div>
- <div class="party-row two">
- <div class="field"><label>送货客户 *</label><select><option>客户乙科技</option></select></div>
- <div class="field"><label>送货合同 *</label><button class="btn ghost sm" type="button" style="width:100%">选合同</button></div>
- </div>
- <div class="grid-2">
- <div class="field"><label>送货时间</label><input value="2026-08-27" /></div>
- <div class="field"><label>送货地址</label><input value="芜湖市 …" /></div>
- </div>
- <div class="products-head"><span class="products-head__label">送货产品</span></div>
- <div class="mini-table-wrap">
- <table class="seg">
- <thead><tr><th style="width:8%">#</th><th>产品</th><th style="width:22%">计划数量</th><th style="width:22%">包装</th><th style="width:22%">送货方式</th></tr></thead>
- <tbody>
- <tr>
- <td class="center">1</td>
- <td>97% 精制硫酸</td>
- <td class="num"><input value="15" /></td>
- <td><select><option>槽罐</option></select></td>
- <td><select><option>客户自提</option></select></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="delivery-panel" id="panel-d3">
- <div class="party-row two">
- <div class="field"><label>送货客户 *</label><select><option>安庆市山峡化工有限公司</option></select></div>
- <div class="field"><label>送货合同</label><div class="ctrl muted" style="display:flex;align-items:center">内部 · 免合同</div></div>
- </div>
- <div class="dibang-row"><input type="checkbox" checked /> 生成地磅单(入库)</div>
- <div class="products-head"><span class="products-head__label">送货产品</span></div>
- <div class="mini-table-wrap">
- <table class="seg">
- <thead><tr><th style="width:8%">#</th><th>产品</th><th style="width:22%">计划数量</th><th style="width:22%">包装</th><th style="width:22%">送货方式</th></tr></thead>
- <tbody>
- <tr>
- <td class="center">1</td>
- <td>97% 精制硫酸</td>
- <td class="num"><input value="5" /></td>
- <td><select><option>槽罐</option></select></td>
- <td><select><option>山峡自提</option></select></td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- </div>
- </div>
- <!-- 数量平衡 -->
- <div class="balance-bar" style="grid-column: 1 / -1; border-top: 1px solid var(--border);">
- <span class="balance-item">计划总量 <strong>30t</strong></span>
- <span class="balance-item">装货合计 <strong>30t</strong></span>
- <span class="balance-item">送货合计 <strong>30t</strong></span>
- <span class="ok">✓ 数量平衡</span>
- <span style="margin-left:auto;color:var(--text-muted)">10 + 15 + 5 = 30</span>
- </div>
- </div>
- </div>
- <!-- 运输信息占位 -->
- <div class="section" style="margin-bottom:0">
- <h3 class="section-title"><span>运输信息</span></h3>
- <div class="grid-2">
- <div class="field"><label>车牌号</label><select><option>皖H12345</option></select></div>
- <div class="field"><label>承运商</label><select><option>某某物流</option></select></div>
- </div>
- </div>
- </div>
- </div>
- <div class="pros-cons">
- <div>
- <h4>优点</h4>
- <ul>
- <li>装货↔送货左右对照,符合「起点→终点」心智</li>
- <li>充分利用弹窗宽度,比上下堆叠<strong>省纵向高度</strong></li>
- <li>右栏 Tab 切换多段送货,避免 3 段卡片纵向过长</li>
- <li>段内 5 列紧凑表,50% 栏宽无横向滚动</li>
- </ul>
- </div>
- <div>
- <h4>注意点</h4>
- <ul>
- <li>每侧仅 ~640px,段内不宜再用 10 列宽表</li>
- <li>送货 Tab 需显示客户名 + 数量摘要,方便切换</li>
- <li><1100px 时左右改为上下(装货上、送货下)</li>
- </ul>
- </div>
- </div>
- </section>
- <!-- 方案 2:堆叠 -->
- <section class="scheme-panel" id="panel-stack">
- <p class="scheme-desc">
- 同样装货左 / 送货右,但右栏<strong>多个送货段纵向堆叠</strong>(接近现状)。
- 适合送货段 ≤2 个;3 段以上右栏会很高,需内部滚动。
- </p>
- <div class="dialog-sim">
- <div class="dialog-sim__hd">编辑运输计划 · 方案 2</div>
- <div class="dialog-sim__bd">
- <div class="stops-split ratio-46" style="min-height:480px">
- <div class="stop-pane stop-pane--load">
- <div class="stop-pane__hd">
- <h4 class="stop-pane__title"><span class="dot"></span>装货信息</h4>
- </div>
- <div class="stop-pane__bd">
- <div class="field"><label>装货客户</label><select><option>XX 硫酸供应商</option></select></div>
- <div class="field"><label>装货地址</label><input value="安庆市迎江区 …" /></div>
- <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
- <div class="products-head"><span class="products-head__label">装货产品</span></div>
- <div class="mini-table-wrap">
- <table class="seg">
- <thead><tr><th style="width:8%">#</th><th>产品</th><th style="width:24%">数量</th><th style="width:24%">包装</th></tr></thead>
- <tbody><tr><td class="center">1</td><td>97% 精制硫酸</td><td class="num"><input value="30" /></td><td><select><option>槽罐</option></select></td></tr></tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="stop-pane stop-pane--delivery">
- <div class="stop-pane__hd">
- <h4 class="stop-pane__title"><span class="dot"></span>送货信息</h4>
- <button class="btn primary sm" type="button">+ 添加</button>
- </div>
- <div class="stop-pane__bd" style="overflow-y:auto;max-height:440px">
- <div class="delivery-stack">
- <article class="delivery-card">
- <div class="delivery-card__hd">送货段 #1 · 客户甲 <span style="font-weight:400;color:var(--text-muted)">10t</span></div>
- <div class="delivery-card__bd">
- <div class="field"><label>送货客户</label><select><option>客户甲</option></select></div>
- <div class="field"><label>送货地址</label><input value="合肥市 …" /></div>
- <table class="seg" style="margin-top:6px"><thead><tr><th>#</th><th>产品</th><th style="width:28%">数量</th></tr></thead>
- <tbody><tr><td class="center">1</td><td>硫酸</td><td class="num"><input value="10" /></td></tr></tbody></table>
- </div>
- </article>
- <article class="delivery-card">
- <div class="delivery-card__hd">送货段 #2 · 客户乙 <span style="font-weight:400">15t</span></div>
- <div class="delivery-card__bd">
- <div class="field"><label>送货客户</label><select><option>客户乙</option></select></div>
- <table class="seg" style="margin-top:6px"><thead><tr><th>#</th><th>产品</th><th style="width:28%">数量</th></tr></thead>
- <tbody><tr><td class="center">1</td><td>硫酸</td><td class="num"><input value="15" /></td></tr></tbody></table>
- </div>
- </article>
- <article class="delivery-card">
- <div class="delivery-card__hd">送货段 #3 · 山峡 <span style="font-weight:400">5t</span></div>
- <div class="delivery-card__bd">
- <div class="field"><label>送货客户</label><select><option>山峡化工</option></select></div>
- <table class="seg" style="margin-top:6px"><thead><tr><th>#</th><th>产品</th><th style="width:28%">数量</th></tr></thead>
- <tbody><tr><td class="center">1</td><td>硫酸</td><td class="num"><input value="5" /></td></tr></tbody></table>
- </div>
- </article>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="pros-cons">
- <div><h4>优点</h4><ul><li>所有送货段同屏可见,无需切换 Tab</li><li>与现有送货卡片组件接近</li></ul></div>
- <div><h4>缺点</h4><ul><li>3 段以上右栏过高,通常要内部滚动</li><li>左右两栏高度难对齐</li></ul></div>
- </div>
- </section>
- <!-- 方案 3:产品条 -->
- <section class="scheme-panel" id="panel-strips">
- <p class="scheme-desc ok">
- 装货左 / 送货右 + 右栏 Tab;两侧产品区改用<strong>产品条</strong>(每条 2 行),
- 在 50% 栏宽下比表格更灵活,多产品时也无需横向滚动。
- </p>
- <div class="dialog-sim">
- <div class="dialog-sim__hd">编辑运输计划 · 方案 3</div>
- <div class="dialog-sim__bd">
- <div class="stops-split" style="min-height:380px">
- <div class="stop-pane stop-pane--load">
- <div class="stop-pane__hd"><h4 class="stop-pane__title"><span class="dot"></span>装货信息</h4></div>
- <div class="stop-pane__bd">
- <div class="party-row two">
- <div class="field"><label>装货客户</label><select><option>XX 供应商</option></select></div>
- <div class="field"><label>合同</label><button class="btn ghost sm" type="button" style="width:100%">选合同</button></div>
- </div>
- <div class="field"><label>装货地址</label><input value="安庆市 …" /></div>
- <div class="products-head"><span class="products-head__label">装货产品</span></div>
- <div class="product-strip">
- <div class="product-strip__r1">
- <div class="name">97% 精制硫酸 <span class="tag danger">毒</span></div>
- <div class="qty"><input value="30" title="计划数量" /></div>
- </div>
- <div class="product-strip__meta">工业硫酸 · 不限 · CP级 · 吨</div>
- <div class="product-strip__r2">
- <div><label>包装</label><select><option>槽罐</option></select></div>
- <div><label>送货方式</label><select><option>一票制</option></select></div>
- </div>
- </div>
- <div class="product-strip">
- <div class="product-strip__r1">
- <div class="name">30% 液碱</div>
- <div class="qty"><input value="0" /></div>
- </div>
- <div class="product-strip__meta">天原 · 国标 · 吨</div>
- <div class="product-strip__r2">
- <div><label>包装</label><select><option>散装</option></select></div>
- <div><label>送货方式</label><select><option>自提</option></select></div>
- </div>
- </div>
- </div>
- </div>
- <div class="stop-pane stop-pane--delivery">
- <div class="stop-pane__hd">
- <h4 class="stop-pane__title"><span class="dot"></span>送货信息</h4>
- <button class="btn primary sm" type="button">+ 添加</button>
- </div>
- <div class="stop-pane__bd">
- <div class="delivery-tabs">
- <button class="delivery-tab active" type="button">#1 客户甲 10t</button>
- <button class="delivery-tab" type="button">#2 客户乙 15t</button>
- </div>
- <div class="field"><label>送货客户</label><select><option>客户甲</option></select></div>
- <div class="field"><label>送货地址</label><input value="合肥市 …" /></div>
- <div class="products-head"><span class="products-head__label">送货产品</span></div>
- <div class="product-strip">
- <div class="product-strip__r1">
- <div class="name">97% 精制硫酸</div>
- <div class="qty"><input value="10" /></div>
- </div>
- <div class="product-strip__meta">工业硫酸 · CP级 · 吨</div>
- <div class="product-strip__r2">
- <div><label>包装</label><select><option>槽罐</option></select></div>
- <div><label>送货方式</label><select><option>一票制</option></select></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="pros-cons">
- <div><h4>优点</h4><ul><li>最适配窄栏宽,多产品也清晰</li><li>装货/送货左右对照 + 省高度</li></ul></div>
- <div><h4>缺点</h4><ul><li>非表格形态,与上方产品信息表风格不同</li></ul></div>
- </div>
- </section>
- </div>
- <script>
- document.querySelectorAll('.scheme-tab').forEach((tab) => {
- tab.addEventListener('click', () => {
- const scheme = tab.dataset.scheme
- document.querySelectorAll('.scheme-tab').forEach((t) => t.classList.toggle('active', t === tab))
- document.querySelectorAll('.scheme-panel').forEach((p) => p.classList.toggle('active', p.id === `panel-${scheme}`))
- })
- })
- document.getElementById('viewport').addEventListener('change', (e) => {
- document.documentElement.style.setProperty('--dialog-max', `${e.target.value}px`)
- })
- document.getElementById('deliveryTabs')?.addEventListener('click', (e) => {
- const tab = e.target.closest('.delivery-tab')
- if (!tab) return
- const panelId = tab.dataset.panel
- document.querySelectorAll('#deliveryTabs .delivery-tab').forEach((t) => t.classList.toggle('active', t === tab))
- document.querySelectorAll('.delivery-panel').forEach((p) => p.classList.toggle('active', p.id === `panel-${panelId}`))
- })
- </script>
- </body>
- </html>
|