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