797 lines
39 KiB
HTML
797 lines
39 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;
|
||
--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>
|