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

1031 lines
44 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;
--dialog-max: calc(100vw - 48px);
}
* { 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 55%, #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; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--primary-dark); }
.hero p { margin: 0; color: var(--text-muted); max-width: 960px; }
.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.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
.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; color: var(--text); background: #fff;
}
.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;
vertical-align: middle;
}
.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.warn {
border-color: rgba(217,119,6,.3);
background: var(--warn-bg);
color: #92400e;
}
.scheme-desc.ok {
border-color: #a7f3d0;
background: var(--primary-bg);
color: var(--primary-dark);
}
/* 模拟弹窗宽度(与 pl-plan-form-dialog 一致) */
.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;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dialog-sim__bd {
padding: 16px 18px 20px;
background: #fafcfb;
}
.section-title {
margin: 0 0 12px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.section-title::before {
content: "";
width: 3px;
height: 14px;
border-radius: 2px;
background: var(--primary);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.span-2 { grid-column: span 2; }
.field label {
display: block;
font-size: 11px;
color: var(--text-muted);
margin-bottom: 4px;
font-weight: 500;
}
.field .ctrl, .field input, .field select {
width: 100%;
height: 36px;
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 10px;
background: #fff;
color: var(--text);
font: inherit;
}
.field .ctrl.muted { background: #f8fafc; color: var(--text-muted); }
.party-row {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 12px;
margin-bottom: 8px;
}
.split {
display: grid;
grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.15fr);
gap: 16px 20px;
align-items: start;
}
.split.wide-right {
grid-template-columns: minmax(300px, 0.36fr) minmax(480px, 1.64fr);
}
.split > * { min-width: 0; }
.products-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.products-head__title {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px;
border-radius: 8px;
border: 1px solid var(--border);
background: #fff;
color: var(--text);
font: inherit;
font-weight: 600;
font-size: 12px;
cursor: pointer;
}
.btn.ghost { background: #fff; }
.table-wrap {
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.table-wrap.scroll-x {
overflow-x: auto;
}
.table-wrap.scroll-x::after {
content: "← 横向滚动 →";
display: block;
text-align: center;
font-size: 11px;
color: var(--warn);
background: var(--warn-bg);
padding: 4px 8px;
border-top: 1px dashed rgba(217,119,6,.35);
}
table.data {
width: 100%;
border-collapse: collapse;
font-size: 13px;
table-layout: fixed;
}
table.data.wide { min-width: 1180px; table-layout: auto; }
table.data th, table.data td {
border-bottom: 1px solid var(--border);
padding: 8px 10px;
text-align: left;
vertical-align: middle;
}
table.data th {
background: var(--table-head);
color: var(--text-muted);
font-weight: 600;
font-size: 12px;
white-space: nowrap;
}
table.data tr:last-child td { border-bottom: none; }
table.data tr:nth-child(even) td { background: var(--row-alt); }
table.data input, table.data select {
width: 100%;
height: 32px;
border: 1px solid var(--border);
border-radius: 6px;
padding: 0 8px;
font: inherit;
}
.num { text-align: right; }
.center { text-align: center; }
.hazard {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.tag {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.tag.danger { background: var(--danger); color: #fff; }
.tag.warn { background: var(--warn); color: #fff; }
.tag.info { background: #f1f5f9; color: var(--text); border: 1px solid #e2e8f0; }
.subline {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
line-height: 1.35;
}
.dibang-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-size: 13px;
}
.dibang-row input { accent-color: var(--primary); width: 16px; height: 16px; }
/* 方案 B:产品卡片 */
.product-cards { display: flex; flex-direction: column; gap: 10px; }
.product-card {
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
overflow: hidden;
}
.product-card__hd {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: var(--table-head);
border-bottom: 1px solid var(--border);
}
.product-card__idx {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--primary-bg);
color: var(--primary-dark);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.product-card__name {
font-weight: 600;
font-size: 13px;
flex: 1;
min-width: 0;
}
.product-card__qty {
width: 120px;
flex-shrink: 0;
}
.product-card__qty label {
display: block;
font-size: 10px;
color: var(--text-muted);
margin-bottom: 3px;
}
.product-card__bd {
padding: 10px 12px 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px 12px;
}
.product-card__bd .field label { font-size: 10px; }
.product-card__bd .field .ctrl,
.product-card__bd .field input,
.product-card__bd .field select { height: 32px; font-size: 12px; }
.product-card__bd .span-all { grid-column: 1 / -1; }
/* 方案 D:紧凑段内表 */
.seg-table .col-idx { width: 36px; }
.seg-table .col-product { width: auto; }
.seg-table .col-qty { width: 88px; }
.seg-table .col-pkg { width: 96px; }
.seg-table .col-method { width: 96px; }
.seg-table .col-remark { width: 72px; }
.seg-table td, .seg-table th { padding: 7px 8px; }
.seg-table input, .seg-table select { height: 30px; font-size: 12px; padding: 0 6px; }
/* 方案 E:产品条(更省高度) */
.product-strips { display: flex; flex-direction: column; gap: 8px; }
.product-strip {
border: 1px solid var(--border);
border-radius: 8px;
background: #fff;
padding: 8px 10px;
font-size: 12px;
}
.product-strip__row1 {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.product-strip__row1 .idx {
width: 20px; height: 20px; border-radius: 50%;
background: var(--primary-bg); color: var(--primary-dark);
font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.product-strip__row1 .name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; }
.product-strip__row1 .qty { width: 88px; flex-shrink: 0; }
.product-strip__row1 .qty label { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.product-strip__row1 .qty input { width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font: inherit; }
.product-strip__row2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px 8px;
}
.product-strip__row2 .field label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 2px; }
.product-strip__row2 .field select,
.product-strip__row2 .field input { width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font: inherit; font-size: 12px; }
.product-strip__meta { color: var(--text-muted); font-size: 11px; margin-bottom: 6px; line-height: 1.4; }
/* 方案 C:紧凑表 */
.col-product { width: 26%; }
.col-spec { width: 12%; }
.col-unit { width: 8%; }
.col-qty { width: 11%; }
.col-pkg { width: 14%; }
.col-method { width: 14%; }
.col-remark { width: 15%; }
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 14px;
}
@media (max-width: 800px) { .pros-cons { grid-template-columns: 1fr; } }
.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); }
.pros-cons li { margin-bottom: 4px; }
@media (max-width: 1100px) {
.split { grid-template-columns: 1fr; }
.product-card__bd { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.grid-2, .party-row, .product-card__bd { grid-template-columns: 1fr; }
.span-2 { grid-column: span 1; }
}
</style>
</head>
<body>
<div class="page">
<header class="hero">
<h1>装货信息 · <em>布局方案对比</em></h1>
<p>
左右分栏的<strong>初衷是横向利用宽度、节约纵向高度</strong>——这点完全正确。
问题不在分栏本身,而是右侧仍套用了「产品信息」的 10 列宽表(合计约 1180px min-width),塞进约 52% 宽的右栏必然横向滚动。
</p>
<div class="pills">
<span class="pill warn">根因:右栏 ≈ 640px,表格却要 1180px</span>
<span class="pill">方向:保留左右分栏,右栏用「段内紧凑表」</span>
<span class="pill muted">完整 10 列仍在上方「产品信息」;段内只展示 + 可编辑段级字段</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>
<option value="1024">1024px(小屏)</option>
</select>
<span style="font-size:12px;color:var(--text-muted)">调整后可观察各方案是否仍出现横向滚动</span>
</div>
<div class="scheme-tabs" role="tablist">
<button class="scheme-tab" data-scheme="current" type="button">现状 · 10 列宽表</button>
<button class="scheme-tab" data-scheme="stack" type="button">方案 A · 上下结构(省宽费高)</button>
<button class="scheme-tab recommended active" data-scheme="seg-compact" type="button">方案 D · 加宽右栏 + 段内紧凑表</button>
<button class="scheme-tab" data-scheme="strips" type="button">方案 E · 产品条(最省高度)</button>
<button class="scheme-tab" data-scheme="cards" type="button">方案 B · 产品卡片</button>
</div>
<!-- 现状 -->
<section class="scheme-panel" id="panel-current" aria-label="现状">
<p class="scheme-desc warn">
<strong>当前实现示意:</strong>左侧装货表单 + 右侧 10 列产品表。右侧容器被限制在约一半弹窗宽,表格 min-width 叠加后出现横向滚动条。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息区块</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="split">
<div>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</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="安庆市迎江区 … 供应商仓库" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
</div>
<div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="table-wrap scroll-x">
<table class="data wide">
<thead>
<tr>
<th style="width:48px">序号</th>
<th style="min-width:140px">产品名称</th>
<th style="min-width:120px">别名</th>
<th style="min-width:120px">品牌</th>
<th style="min-width:110px">型号/规格</th>
<th style="min-width:80px">单位</th>
<th style="min-width:100px">计划数量</th>
<th style="min-width:130px">包装规格</th>
<th style="min-width:130px">送货方式</th>
<th style="min-width:110px">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></td>
<td class="center">工业硫酸</td>
<td class="center">不限品牌</td>
<td>CP级</td>
<td class="center">吨</td>
<td class="num"><input value="20.000" /></td>
<td class="center"><select><option>槽罐</option></select></td>
<td class="center"><select><option>一票制</option></select></td>
<td><input placeholder="备注" /></td>
</tr>
<tr>
<td class="center">2</td>
<td><span class="hazard">30% 液碱</span></td>
<td class="center">—</td>
<td class="center">指定 · 天原</td>
<td>国标</td>
<td class="center">吨</td>
<td class="num"><input value="10.000" /></td>
<td class="center"><select><option>散装</option></select></td>
<td class="center"><select><option>山峡自提</option></select></td>
<td><input value="含量30%" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li>表单与产品同屏,纵向不算太高</li><li>与「产品信息」表头完全一致</li></ul></div>
<div><h4>缺点</h4><ul><li><strong>右侧必出横向滚动</strong>,无法一屏看全</li><li>用户需左右拖动才能改包装/送货方式</li></ul></div>
</div>
</section>
<!-- 方案 A -->
<section class="scheme-panel" id="panel-stack" aria-label="方案 A">
<p class="scheme-desc warn">
<strong>不推荐(费高度):</strong>虽能放下 10 列,但把产品表挪到表单下方,区块纵向变长,与「左右分栏省高度」的初衷相反。仅作对照。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 A</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
</div>
<div class="grid-2" style="margin-bottom:14px">
<div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
<div class="field"><label>装货地址</label><input value="安庆市迎江区 … 供应商仓库" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th style="width:5%">序号</th>
<th style="width:16%">产品名称</th>
<th style="width:12%">别名</th>
<th style="width:12%">品牌</th>
<th style="width:10%">型号/规格</th>
<th style="width:7%">单位</th>
<th style="width:10%">计划数量</th>
<th style="width:11%">包装规格</th>
<th style="width:11%">送货方式</th>
<th style="width:6%">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></td>
<td class="center">工业硫酸</td>
<td class="center">不限品牌</td>
<td>CP级</td>
<td class="center">吨</td>
<td class="num"><input value="20.000" /></td>
<td class="center"><select><option>槽罐</option></select></td>
<td class="center"><select><option>一票制</option></select></td>
<td><input placeholder="备注" /></td>
</tr>
<tr>
<td class="center">2</td>
<td>30% 液碱</td>
<td class="center">—</td>
<td class="center">指定 · 天原</td>
<td>国标</td>
<td class="center">吨</td>
<td class="num"><input value="10.000" /></td>
<td class="center"><select><option>散装</option></select></td>
<td class="center"><select><option>山峡自提</option></select></td>
<td><input value="含量30%" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li>无横向滚动,10 列全可见</li></ul></div>
<div><h4>缺点</h4><ul><li><strong>纵向占用大</strong>,浪费左右分栏的设计意图</li></ul></div>
</div>
</section>
<!-- 方案 D -->
<section class="scheme-panel active" id="panel-seg-compact" aria-label="方案 D">
<p class="scheme-desc ok">
<strong>推荐:</strong>保留左右分栏,左栏略收窄(约 36%)、右栏加宽(约 64%)。
右侧改用<strong>段内紧凑表(6 列)</strong>:产品列内叠放名称/别名/品牌/规格/单位(只读,来自计划同步);
独立可编辑列仅保留<strong>计划数量、包装规格、送货方式、备注</strong>——这些是段级真正要改的字段。
完整 10 列仍在上方「产品信息」,段内不必重复平铺。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 D</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="split wide-right">
<div>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</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="安庆市迎江区 … 供应商仓库" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
</div>
<div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="table-wrap">
<table class="data seg-table">
<thead>
<tr>
<th class="col-idx">#</th>
<th class="col-product">产品</th>
<th class="col-qty">计划数量</th>
<th class="col-pkg">包装规格</th>
<th class="col-method">送货方式</th>
<th class="col-remark">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td>
<span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
<span class="subline">别名:工业硫酸 · 品牌:不限 · CP级 · 吨</span>
</td>
<td class="num"><input value="20" /></td>
<td><select><option>槽罐</option></select></td>
<td><select><option>一票制</option></select></td>
<td><input placeholder="…" /></td>
</tr>
<tr>
<td class="center">2</td>
<td>
30% 液碱
<span class="subline">品牌:天原 · 国标 · 吨</span>
</td>
<td class="num"><input value="10" /></td>
<td><select><option>散装</option></select></td>
<td><select><option>山峡自提</option></select></td>
<td><input value="含量30%" /></td>
</tr>
</tbody>
</table>
</div>
<p style="margin:6px 0 0;font-size:11px;color:var(--text-muted)">只读展示字段收进「产品」列副行;与上方产品信息表互补,不重复占列宽</p>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li><strong>保留左右分栏,省高度</strong></li><li>无横向滚动,信息仍完整可见</li><li>段内只突出可编辑字段,认知负担更低</li><li>仍是表格形态,与 B 端习惯一致</li></ul></div>
<div><h4>缺点</h4><ul><li>段内表与「产品信息」列结构不同(有意为之)</li><li>产品列副行在名称很长时需换行</li></ul></div>
</div>
</section>
<!-- 方案 E -->
<section class="scheme-panel" id="panel-strips" aria-label="方案 E">
<p class="scheme-desc ok">
<strong>更省高度:</strong>同样保留左右分栏,右侧每条产品仅占 <strong>2 行</strong>(产品条):
第 1 行名称 + 计划数量;第 2 行包装/送货/备注。别名品牌等收在一行灰色 meta 里。
2 条产品的高度 ≈ 紧凑表 2 行,但信息密度更可控。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 E</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="split wide-right">
<div>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</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="安庆市迎江区 …" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
</div>
<div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="product-strips">
<article class="product-strip">
<div class="product-strip__row1">
<span class="idx">1</span>
<div class="name"><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></div>
<div class="qty"><label>计划数量</label><input value="20" /></div>
</div>
<div class="product-strip__meta">别名:工业硫酸 · 品牌:不限 · CP级 · 吨</div>
<div class="product-strip__row2">
<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 placeholder="备注" /></div>
</div>
</article>
<article class="product-strip">
<div class="product-strip__row1">
<span class="idx">2</span>
<div class="name">30% 液碱</div>
<div class="qty"><label>计划数量</label><input value="10" /></div>
</div>
<div class="product-strip__meta">品牌:天原 · 国标 · 吨</div>
<div class="product-strip__row2">
<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="含量30%" /></div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li>左右分栏 + <strong>纵向最省</strong></li><li>无横向滚动,字段全可见</li><li>多产品时比宽表更易扫读</li></ul></div>
<div><h4>缺点</h4><ul><li>非传统表格,需新组件样式</li><li>与产品信息表形态不同</li></ul></div>
</div>
</section>
<!-- 方案 B -->
<section class="scheme-panel" id="panel-cards" aria-label="方案 B">
<p class="scheme-desc">
<strong>保留左右分栏</strong>,产品区不用宽表,改为<strong>每张产品一张卡片</strong>:首行名称+数量,次行 4 列网格放别名/品牌/规格/单位/包装/送货/备注。
右栏再窄也不会横向滚动。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 B</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="split">
<div>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</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="安庆市迎江区 …" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
</div>
<div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="product-cards">
<article class="product-card">
<div class="product-card__hd">
<span class="product-card__idx">1</span>
<div class="product-card__name">
<span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
</div>
<div class="product-card__qty">
<label>计划数量</label>
<input value="20.000" />
</div>
</div>
<div class="product-card__bd">
<div class="field"><label>别名</label><div class="ctrl muted">工业硫酸</div></div>
<div class="field"><label>品牌</label><div class="ctrl muted">不限品牌</div></div>
<div class="field"><label>型号/规格</label><div class="ctrl muted">CP级</div></div>
<div class="field"><label>单位</label><div class="ctrl muted">吨</div></div>
<div class="field"><label>包装规格</label><select><option>槽罐</option></select></div>
<div class="field"><label>送货方式</label><select><option>一票制</option></select></div>
<div class="field span-all"><label>备注</label><input placeholder="备注" /></div>
</div>
</article>
<article class="product-card">
<div class="product-card__hd">
<span class="product-card__idx">2</span>
<div class="product-card__name">30% 液碱</div>
<div class="product-card__qty">
<label>计划数量</label>
<input value="10.000" />
</div>
</div>
<div class="product-card__bd">
<div class="field"><label>别名</label><div class="ctrl muted">—</div></div>
<div class="field"><label>品牌</label><div class="ctrl muted">指定 · 天原</div></div>
<div class="field"><label>型号/规格</label><div class="ctrl muted">国标</div></div>
<div class="field"><label>单位</label><div class="ctrl muted">吨</div></div>
<div class="field"><label>包装规格</label><select><option>散装</option></select></div>
<div class="field"><label>送货方式</label><select><option>山峡自提</option></select></div>
<div class="field span-all"><label>备注</label><input value="含量30%" /></div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li>左右分栏保留,表单与产品同屏</li><li>右栏<strong>零横向滚动</strong></li><li>多产品时信息层次清晰</li></ul></div>
<div><h4>缺点</h4><ul><li>与「产品信息」表格形态不一致</li><li>产品多时右栏纵向较长</li><li>前端需新增卡片组件</li></ul></div>
</div>
</section>
<!-- 方案 C -->
<section class="scheme-panel" id="panel-compact" aria-label="方案 C">
<p class="scheme-desc">
<strong>保留左右分栏 + 表格</strong>,通过<strong>合并列</strong>压缩宽度:「产品」列内叠放名称/别名/品牌;去掉独立备注列或缩短。
列数从 10 降到 7,右栏可勉强放下,但长文案会换行。
</p>
<div class="dialog-sim">
<div class="dialog-sim__hd">
<span>编辑运输计划</span>
<span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 C</span>
</div>
<div class="dialog-sim__bd">
<h3 class="section-title">装货信息</h3>
<div class="split">
<div>
<div class="party-row">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</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="安庆市迎江区 …" /></div>
<div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
<div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
<div class="field span-2">
<label>地磅单</label>
<div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
</div>
</div>
</div>
<div>
<div class="products-head">
<span class="products-head__title">装货产品</span>
<button class="btn ghost" type="button">从计划产品同步</button>
</div>
<div class="table-wrap">
<table class="data">
<thead>
<tr>
<th style="width:6%">#</th>
<th class="col-product">产品</th>
<th class="col-spec">型号/规格</th>
<th class="col-unit">单位</th>
<th class="col-qty">计划数量</th>
<th class="col-pkg">包装规格</th>
<th class="col-method">送货方式</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center">1</td>
<td>
<span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
<span class="subline">别名:工业硫酸</span>
<span class="subline">品牌:不限品牌</span>
</td>
<td>CP级</td>
<td class="center">吨</td>
<td class="num"><input value="20.000" /></td>
<td class="center"><select><option>槽罐</option></select></td>
<td class="center"><select><option>一票制</option></select></td>
</tr>
<tr>
<td class="center">2</td>
<td>
30% 液碱
<span class="subline">品牌:指定 · 天原</span>
</td>
<td>国标</td>
<td class="center">吨</td>
<td class="num"><input value="10.000" /></td>
<td class="center"><select><option>散装</option></select></td>
<td class="center"><select><option>山峡自提</option></select></td>
</tr>
</tbody>
</table>
</div>
<p style="margin:8px 0 0;font-size:11px;color:var(--text-muted)">备注已省略或 hover 展示;产品列内多行换行,行高不统一</p>
</div>
</div>
</div>
</div>
<div class="pros-cons">
<div><h4>优点</h4><ul><li>保留左右分栏 + 表格式编辑</li><li>列数减少,大概率无横向滚动</li></ul></div>
<div><h4>缺点</h4><ul><li>与「产品信息」列结构<strong>不一致</strong></li><li>产品列拥挤,别名/品牌可读性差</li><li>备注字段不好放</li></ul></div>
</div>
</section>
</div>
<script>
const tabs = document.querySelectorAll('.scheme-tab')
const panels = document.querySelectorAll('.scheme-panel')
const viewportSelect = document.getElementById('viewport')
tabs.forEach((tab) => {
tab.addEventListener('click', () => {
const scheme = tab.dataset.scheme
tabs.forEach((t) => t.classList.toggle('active', t === tab))
panels.forEach((p) => p.classList.toggle('active', p.id === `panel-${scheme}`))
})
})
function applyViewport() {
const w = viewportSelect.value
document.documentElement.style.setProperty('--dialog-max', `${w}px`)
}
viewportSelect.addEventListener('change', applyViewport)
applyViewport()
</script>
</body>
</html>