Files
shanxia2.0/docs/fresh-mint-pl-plan-load-delivery-split-demo.html
T
2026-08-27 14:23:18 +08:00

797 lines
39 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>&lt;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>