fresh-mint-pl-plan-load-section-layout-demo.html 44 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030
  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>运输计划 · 装货信息布局方案 Demo</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com" />
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  10. <style>
  11. :root {
  12. --primary: #10b981;
  13. --primary-dark: #059669;
  14. --primary-bg: #ecfdf5;
  15. --text: #1e293b;
  16. --text-muted: #64748b;
  17. --border: #d9e8e2;
  18. --surface: #ffffff;
  19. --table-head: #f8fafc;
  20. --row-alt: #fafafa;
  21. --bg-page: #f1f5f9;
  22. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  23. --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);
  24. --radius: 10px;
  25. --warn: #d97706;
  26. --warn-bg: #fffbeb;
  27. --danger: #dc2626;
  28. --info: #0284c7;
  29. --info-bg: #f0f9ff;
  30. --dialog-max: calc(100vw - 48px);
  31. }
  32. * { box-sizing: border-box; }
  33. body {
  34. margin: 0;
  35. min-height: 100vh;
  36. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  37. font-size: 14px;
  38. line-height: 1.5;
  39. color: var(--text);
  40. background: var(--bg-page);
  41. }
  42. .page { max-width: 1440px; margin: 0 auto; padding: 24px 20px 80px; }
  43. .hero {
  44. background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%, #f0f9ff 100%);
  45. border: 1px solid var(--border);
  46. border-radius: var(--radius);
  47. padding: 22px 24px;
  48. margin-bottom: 18px;
  49. box-shadow: var(--shadow);
  50. }
  51. .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
  52. .hero h1 em { font-style: normal; color: var(--primary-dark); }
  53. .hero p { margin: 0; color: var(--text-muted); max-width: 960px; }
  54. .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  55. .pill {
  56. display: inline-flex; align-items: center; gap: 6px;
  57. padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  58. background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
  59. }
  60. .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
  61. .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
  62. .toolbar {
  63. display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  64. background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  65. padding: 12px 14px; margin-bottom: 14px; box-shadow: var(--shadow);
  66. }
  67. .toolbar label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
  68. .toolbar select {
  69. height: 34px; border: 1px solid var(--border); border-radius: 8px;
  70. padding: 0 10px; font: inherit; color: var(--text); background: #fff;
  71. }
  72. .scheme-tabs {
  73. display: flex; flex-wrap: wrap; gap: 6px;
  74. background: #fff; border: 1px solid var(--border);
  75. border-radius: var(--radius) var(--radius) 0 0;
  76. padding: 10px 12px 0;
  77. }
  78. .scheme-tab {
  79. border: none; background: transparent; cursor: pointer;
  80. padding: 10px 14px; font-size: 13px; font-weight: 600;
  81. color: var(--text-muted); border-bottom: 2px solid transparent;
  82. font-family: inherit;
  83. }
  84. .scheme-tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
  85. .scheme-tab.recommended::after {
  86. content: "推荐";
  87. margin-left: 6px;
  88. font-size: 10px;
  89. font-weight: 700;
  90. color: #fff;
  91. background: var(--primary-dark);
  92. padding: 1px 6px;
  93. border-radius: 999px;
  94. vertical-align: middle;
  95. }
  96. .scheme-panel {
  97. display: none;
  98. background: #fff;
  99. border: 1px solid var(--border);
  100. border-top: none;
  101. border-radius: 0 0 var(--radius) var(--radius);
  102. padding: 16px 18px 22px;
  103. box-shadow: var(--shadow);
  104. }
  105. .scheme-panel.active { display: block; }
  106. .scheme-desc {
  107. margin: 0 0 14px;
  108. padding: 10px 12px;
  109. border-radius: 8px;
  110. font-size: 12px;
  111. border: 1px solid #bae6fd;
  112. background: var(--info-bg);
  113. color: #0369a1;
  114. }
  115. .scheme-desc.warn {
  116. border-color: rgba(217,119,6,.3);
  117. background: var(--warn-bg);
  118. color: #92400e;
  119. }
  120. .scheme-desc.ok {
  121. border-color: #a7f3d0;
  122. background: var(--primary-bg);
  123. color: var(--primary-dark);
  124. }
  125. /* 模拟弹窗宽度(与 pl-plan-form-dialog 一致) */
  126. .dialog-sim {
  127. width: var(--dialog-max);
  128. max-width: 100%;
  129. margin: 0 auto;
  130. border: 1px solid var(--border);
  131. border-radius: var(--radius);
  132. background: #fff;
  133. box-shadow: var(--shadow-lg);
  134. overflow: hidden;
  135. }
  136. .dialog-sim__hd {
  137. padding: 14px 18px;
  138. border-bottom: 1px solid var(--border);
  139. font-weight: 700;
  140. font-size: 15px;
  141. display: flex;
  142. align-items: center;
  143. justify-content: space-between;
  144. gap: 12px;
  145. }
  146. .dialog-sim__bd {
  147. padding: 16px 18px 20px;
  148. background: #fafcfb;
  149. }
  150. .section-title {
  151. margin: 0 0 12px;
  152. font-size: 14px;
  153. font-weight: 700;
  154. display: flex;
  155. align-items: center;
  156. gap: 8px;
  157. }
  158. .section-title::before {
  159. content: "";
  160. width: 3px;
  161. height: 14px;
  162. border-radius: 2px;
  163. background: var(--primary);
  164. }
  165. .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  166. .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  167. .span-2 { grid-column: span 2; }
  168. .field label {
  169. display: block;
  170. font-size: 11px;
  171. color: var(--text-muted);
  172. margin-bottom: 4px;
  173. font-weight: 500;
  174. }
  175. .field .ctrl, .field input, .field select {
  176. width: 100%;
  177. height: 36px;
  178. border: 1px solid var(--border);
  179. border-radius: 8px;
  180. padding: 0 10px;
  181. background: #fff;
  182. color: var(--text);
  183. font: inherit;
  184. }
  185. .field .ctrl.muted { background: #f8fafc; color: var(--text-muted); }
  186. .party-row {
  187. display: grid;
  188. grid-template-columns: 1.4fr 1fr;
  189. gap: 12px;
  190. margin-bottom: 8px;
  191. }
  192. .split {
  193. display: grid;
  194. grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.15fr);
  195. gap: 16px 20px;
  196. align-items: start;
  197. }
  198. .split.wide-right {
  199. grid-template-columns: minmax(300px, 0.36fr) minmax(480px, 1.64fr);
  200. }
  201. .split > * { min-width: 0; }
  202. .products-head {
  203. display: flex;
  204. align-items: center;
  205. justify-content: space-between;
  206. gap: 12px;
  207. margin-bottom: 8px;
  208. }
  209. .products-head__title {
  210. font-size: 13px;
  211. font-weight: 600;
  212. color: var(--text);
  213. }
  214. .btn {
  215. display: inline-flex;
  216. align-items: center;
  217. gap: 6px;
  218. height: 32px;
  219. padding: 0 12px;
  220. border-radius: 8px;
  221. border: 1px solid var(--border);
  222. background: #fff;
  223. color: var(--text);
  224. font: inherit;
  225. font-weight: 600;
  226. font-size: 12px;
  227. cursor: pointer;
  228. }
  229. .btn.ghost { background: #fff; }
  230. .table-wrap {
  231. border: 1px solid var(--border);
  232. border-radius: 8px;
  233. background: #fff;
  234. overflow: hidden;
  235. }
  236. .table-wrap.scroll-x {
  237. overflow-x: auto;
  238. }
  239. .table-wrap.scroll-x::after {
  240. content: "← 横向滚动 →";
  241. display: block;
  242. text-align: center;
  243. font-size: 11px;
  244. color: var(--warn);
  245. background: var(--warn-bg);
  246. padding: 4px 8px;
  247. border-top: 1px dashed rgba(217,119,6,.35);
  248. }
  249. table.data {
  250. width: 100%;
  251. border-collapse: collapse;
  252. font-size: 13px;
  253. table-layout: fixed;
  254. }
  255. table.data.wide { min-width: 1180px; table-layout: auto; }
  256. table.data th, table.data td {
  257. border-bottom: 1px solid var(--border);
  258. padding: 8px 10px;
  259. text-align: left;
  260. vertical-align: middle;
  261. }
  262. table.data th {
  263. background: var(--table-head);
  264. color: var(--text-muted);
  265. font-weight: 600;
  266. font-size: 12px;
  267. white-space: nowrap;
  268. }
  269. table.data tr:last-child td { border-bottom: none; }
  270. table.data tr:nth-child(even) td { background: var(--row-alt); }
  271. table.data input, table.data select {
  272. width: 100%;
  273. height: 32px;
  274. border: 1px solid var(--border);
  275. border-radius: 6px;
  276. padding: 0 8px;
  277. font: inherit;
  278. }
  279. .num { text-align: right; }
  280. .center { text-align: center; }
  281. .hazard {
  282. display: inline-flex;
  283. align-items: center;
  284. gap: 4px;
  285. flex-wrap: wrap;
  286. }
  287. .tag {
  288. display: inline-flex;
  289. align-items: center;
  290. padding: 1px 6px;
  291. border-radius: 4px;
  292. font-size: 11px;
  293. font-weight: 600;
  294. white-space: nowrap;
  295. }
  296. .tag.danger { background: var(--danger); color: #fff; }
  297. .tag.warn { background: var(--warn); color: #fff; }
  298. .tag.info { background: #f1f5f9; color: var(--text); border: 1px solid #e2e8f0; }
  299. .subline {
  300. display: block;
  301. font-size: 12px;
  302. color: var(--text-muted);
  303. margin-top: 2px;
  304. line-height: 1.35;
  305. }
  306. .dibang-row {
  307. display: flex;
  308. align-items: center;
  309. flex-wrap: wrap;
  310. gap: 12px;
  311. font-size: 13px;
  312. }
  313. .dibang-row input { accent-color: var(--primary); width: 16px; height: 16px; }
  314. /* 方案 B:产品卡片 */
  315. .product-cards { display: flex; flex-direction: column; gap: 10px; }
  316. .product-card {
  317. border: 1px solid var(--border);
  318. border-radius: 8px;
  319. background: #fff;
  320. overflow: hidden;
  321. }
  322. .product-card__hd {
  323. display: flex;
  324. align-items: flex-start;
  325. justify-content: space-between;
  326. gap: 12px;
  327. padding: 10px 12px;
  328. background: var(--table-head);
  329. border-bottom: 1px solid var(--border);
  330. }
  331. .product-card__idx {
  332. width: 22px;
  333. height: 22px;
  334. border-radius: 50%;
  335. background: var(--primary-bg);
  336. color: var(--primary-dark);
  337. font-size: 12px;
  338. font-weight: 700;
  339. display: inline-flex;
  340. align-items: center;
  341. justify-content: center;
  342. flex-shrink: 0;
  343. }
  344. .product-card__name {
  345. font-weight: 600;
  346. font-size: 13px;
  347. flex: 1;
  348. min-width: 0;
  349. }
  350. .product-card__qty {
  351. width: 120px;
  352. flex-shrink: 0;
  353. }
  354. .product-card__qty label {
  355. display: block;
  356. font-size: 10px;
  357. color: var(--text-muted);
  358. margin-bottom: 3px;
  359. }
  360. .product-card__bd {
  361. padding: 10px 12px 12px;
  362. display: grid;
  363. grid-template-columns: repeat(4, 1fr);
  364. gap: 10px 12px;
  365. }
  366. .product-card__bd .field label { font-size: 10px; }
  367. .product-card__bd .field .ctrl,
  368. .product-card__bd .field input,
  369. .product-card__bd .field select { height: 32px; font-size: 12px; }
  370. .product-card__bd .span-all { grid-column: 1 / -1; }
  371. /* 方案 D:紧凑段内表 */
  372. .seg-table .col-idx { width: 36px; }
  373. .seg-table .col-product { width: auto; }
  374. .seg-table .col-qty { width: 88px; }
  375. .seg-table .col-pkg { width: 96px; }
  376. .seg-table .col-method { width: 96px; }
  377. .seg-table .col-remark { width: 72px; }
  378. .seg-table td, .seg-table th { padding: 7px 8px; }
  379. .seg-table input, .seg-table select { height: 30px; font-size: 12px; padding: 0 6px; }
  380. /* 方案 E:产品条(更省高度) */
  381. .product-strips { display: flex; flex-direction: column; gap: 8px; }
  382. .product-strip {
  383. border: 1px solid var(--border);
  384. border-radius: 8px;
  385. background: #fff;
  386. padding: 8px 10px;
  387. font-size: 12px;
  388. }
  389. .product-strip__row1 {
  390. display: flex;
  391. align-items: center;
  392. gap: 8px;
  393. margin-bottom: 6px;
  394. }
  395. .product-strip__row1 .idx {
  396. width: 20px; height: 20px; border-radius: 50%;
  397. background: var(--primary-bg); color: var(--primary-dark);
  398. font-size: 11px; font-weight: 700;
  399. display: inline-flex; align-items: center; justify-content: center;
  400. flex-shrink: 0;
  401. }
  402. .product-strip__row1 .name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; }
  403. .product-strip__row1 .qty { width: 88px; flex-shrink: 0; }
  404. .product-strip__row1 .qty label { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
  405. .product-strip__row1 .qty input { width: 100%; height: 30px; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font: inherit; }
  406. .product-strip__row2 {
  407. display: grid;
  408. grid-template-columns: 1fr 1fr 1fr;
  409. gap: 6px 8px;
  410. }
  411. .product-strip__row2 .field label { font-size: 10px; color: var(--text-muted); display: block; margin-bottom: 2px; }
  412. .product-strip__row2 .field select,
  413. .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; }
  414. .product-strip__meta { color: var(--text-muted); font-size: 11px; margin-bottom: 6px; line-height: 1.4; }
  415. /* 方案 C:紧凑表 */
  416. .col-product { width: 26%; }
  417. .col-spec { width: 12%; }
  418. .col-unit { width: 8%; }
  419. .col-qty { width: 11%; }
  420. .col-pkg { width: 14%; }
  421. .col-method { width: 14%; }
  422. .col-remark { width: 15%; }
  423. .pros-cons {
  424. display: grid;
  425. grid-template-columns: 1fr 1fr;
  426. gap: 12px;
  427. margin-top: 14px;
  428. }
  429. @media (max-width: 800px) { .pros-cons { grid-template-columns: 1fr; } }
  430. .pros-cons > div {
  431. border: 1px solid var(--border);
  432. border-radius: 8px;
  433. padding: 10px 12px;
  434. font-size: 12px;
  435. }
  436. .pros-cons h4 { margin: 0 0 6px; font-size: 12px; }
  437. .pros-cons ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
  438. .pros-cons li { margin-bottom: 4px; }
  439. @media (max-width: 1100px) {
  440. .split { grid-template-columns: 1fr; }
  441. .product-card__bd { grid-template-columns: repeat(2, 1fr); }
  442. }
  443. @media (max-width: 640px) {
  444. .grid-2, .party-row, .product-card__bd { grid-template-columns: 1fr; }
  445. .span-2 { grid-column: span 1; }
  446. }
  447. </style>
  448. </head>
  449. <body>
  450. <div class="page">
  451. <header class="hero">
  452. <h1>装货信息 · <em>布局方案对比</em></h1>
  453. <p>
  454. 左右分栏的<strong>初衷是横向利用宽度、节约纵向高度</strong>——这点完全正确。
  455. 问题不在分栏本身,而是右侧仍套用了「产品信息」的 10 列宽表(合计约 1180px min-width),塞进约 52% 宽的右栏必然横向滚动。
  456. </p>
  457. <div class="pills">
  458. <span class="pill warn">根因:右栏 ≈ 640px,表格却要 1180px</span>
  459. <span class="pill">方向:保留左右分栏,右栏用「段内紧凑表」</span>
  460. <span class="pill muted">完整 10 列仍在上方「产品信息」;段内只展示 + 可编辑段级字段</span>
  461. </div>
  462. </header>
  463. <div class="toolbar">
  464. <label for="viewport">模拟视口宽度</label>
  465. <select id="viewport">
  466. <option value="1440">1440px(大屏)</option>
  467. <option value="1280" selected>1280px(常见笔记本)</option>
  468. <option value="1100">1100px(分栏断点)</option>
  469. <option value="1024">1024px(小屏)</option>
  470. </select>
  471. <span style="font-size:12px;color:var(--text-muted)">调整后可观察各方案是否仍出现横向滚动</span>
  472. </div>
  473. <div class="scheme-tabs" role="tablist">
  474. <button class="scheme-tab" data-scheme="current" type="button">现状 · 10 列宽表</button>
  475. <button class="scheme-tab" data-scheme="stack" type="button">方案 A · 上下结构(省宽费高)</button>
  476. <button class="scheme-tab recommended active" data-scheme="seg-compact" type="button">方案 D · 加宽右栏 + 段内紧凑表</button>
  477. <button class="scheme-tab" data-scheme="strips" type="button">方案 E · 产品条(最省高度)</button>
  478. <button class="scheme-tab" data-scheme="cards" type="button">方案 B · 产品卡片</button>
  479. </div>
  480. <!-- 现状 -->
  481. <section class="scheme-panel" id="panel-current" aria-label="现状">
  482. <p class="scheme-desc warn">
  483. <strong>当前实现示意:</strong>左侧装货表单 + 右侧 10 列产品表。右侧容器被限制在约一半弹窗宽,表格 min-width 叠加后出现横向滚动条。
  484. </p>
  485. <div class="dialog-sim">
  486. <div class="dialog-sim__hd">
  487. <span>编辑运输计划</span>
  488. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息区块</span>
  489. </div>
  490. <div class="dialog-sim__bd">
  491. <h3 class="section-title">装货信息</h3>
  492. <div class="split">
  493. <div>
  494. <div class="party-row">
  495. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  496. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  497. </div>
  498. <div class="grid-2">
  499. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  500. <div class="field"><label>装货地址</label><input value="安庆市迎江区 … 供应商仓库" /></div>
  501. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  502. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  503. <div class="field span-2">
  504. <label>地磅单</label>
  505. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  506. </div>
  507. </div>
  508. </div>
  509. <div>
  510. <div class="products-head">
  511. <span class="products-head__title">装货产品</span>
  512. <button class="btn ghost" type="button">从计划产品同步</button>
  513. </div>
  514. <div class="table-wrap scroll-x">
  515. <table class="data wide">
  516. <thead>
  517. <tr>
  518. <th style="width:48px">序号</th>
  519. <th style="min-width:140px">产品名称</th>
  520. <th style="min-width:120px">别名</th>
  521. <th style="min-width:120px">品牌</th>
  522. <th style="min-width:110px">型号/规格</th>
  523. <th style="min-width:80px">单位</th>
  524. <th style="min-width:100px">计划数量</th>
  525. <th style="min-width:130px">包装规格</th>
  526. <th style="min-width:130px">送货方式</th>
  527. <th style="min-width:110px">备注</th>
  528. </tr>
  529. </thead>
  530. <tbody>
  531. <tr>
  532. <td class="center">1</td>
  533. <td><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></td>
  534. <td class="center">工业硫酸</td>
  535. <td class="center">不限品牌</td>
  536. <td>CP级</td>
  537. <td class="center">吨</td>
  538. <td class="num"><input value="20.000" /></td>
  539. <td class="center"><select><option>槽罐</option></select></td>
  540. <td class="center"><select><option>一票制</option></select></td>
  541. <td><input placeholder="备注" /></td>
  542. </tr>
  543. <tr>
  544. <td class="center">2</td>
  545. <td><span class="hazard">30% 液碱</span></td>
  546. <td class="center">—</td>
  547. <td class="center">指定 · 天原</td>
  548. <td>国标</td>
  549. <td class="center">吨</td>
  550. <td class="num"><input value="10.000" /></td>
  551. <td class="center"><select><option>散装</option></select></td>
  552. <td class="center"><select><option>山峡自提</option></select></td>
  553. <td><input value="含量30%" /></td>
  554. </tr>
  555. </tbody>
  556. </table>
  557. </div>
  558. </div>
  559. </div>
  560. </div>
  561. </div>
  562. <div class="pros-cons">
  563. <div><h4>优点</h4><ul><li>表单与产品同屏,纵向不算太高</li><li>与「产品信息」表头完全一致</li></ul></div>
  564. <div><h4>缺点</h4><ul><li><strong>右侧必出横向滚动</strong>,无法一屏看全</li><li>用户需左右拖动才能改包装/送货方式</li></ul></div>
  565. </div>
  566. </section>
  567. <!-- 方案 A -->
  568. <section class="scheme-panel" id="panel-stack" aria-label="方案 A">
  569. <p class="scheme-desc warn">
  570. <strong>不推荐(费高度):</strong>虽能放下 10 列,但把产品表挪到表单下方,区块纵向变长,与「左右分栏省高度」的初衷相反。仅作对照。
  571. </p>
  572. <div class="dialog-sim">
  573. <div class="dialog-sim__hd">
  574. <span>编辑运输计划</span>
  575. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 A</span>
  576. </div>
  577. <div class="dialog-sim__bd">
  578. <h3 class="section-title">装货信息</h3>
  579. <div class="party-row">
  580. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  581. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  582. </div>
  583. <div class="grid-2" style="margin-bottom:14px">
  584. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  585. <div class="field"><label>装货地址</label><input value="安庆市迎江区 … 供应商仓库" /></div>
  586. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  587. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  588. <div class="field span-2">
  589. <label>地磅单</label>
  590. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  591. </div>
  592. </div>
  593. <div class="products-head">
  594. <span class="products-head__title">装货产品</span>
  595. <button class="btn ghost" type="button">从计划产品同步</button>
  596. </div>
  597. <div class="table-wrap">
  598. <table class="data">
  599. <thead>
  600. <tr>
  601. <th style="width:5%">序号</th>
  602. <th style="width:16%">产品名称</th>
  603. <th style="width:12%">别名</th>
  604. <th style="width:12%">品牌</th>
  605. <th style="width:10%">型号/规格</th>
  606. <th style="width:7%">单位</th>
  607. <th style="width:10%">计划数量</th>
  608. <th style="width:11%">包装规格</th>
  609. <th style="width:11%">送货方式</th>
  610. <th style="width:6%">备注</th>
  611. </tr>
  612. </thead>
  613. <tbody>
  614. <tr>
  615. <td class="center">1</td>
  616. <td><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></td>
  617. <td class="center">工业硫酸</td>
  618. <td class="center">不限品牌</td>
  619. <td>CP级</td>
  620. <td class="center">吨</td>
  621. <td class="num"><input value="20.000" /></td>
  622. <td class="center"><select><option>槽罐</option></select></td>
  623. <td class="center"><select><option>一票制</option></select></td>
  624. <td><input placeholder="备注" /></td>
  625. </tr>
  626. <tr>
  627. <td class="center">2</td>
  628. <td>30% 液碱</td>
  629. <td class="center">—</td>
  630. <td class="center">指定 · 天原</td>
  631. <td>国标</td>
  632. <td class="center">吨</td>
  633. <td class="num"><input value="10.000" /></td>
  634. <td class="center"><select><option>散装</option></select></td>
  635. <td class="center"><select><option>山峡自提</option></select></td>
  636. <td><input value="含量30%" /></td>
  637. </tr>
  638. </tbody>
  639. </table>
  640. </div>
  641. </div>
  642. </div>
  643. <div class="pros-cons">
  644. <div><h4>优点</h4><ul><li>无横向滚动,10 列全可见</li></ul></div>
  645. <div><h4>缺点</h4><ul><li><strong>纵向占用大</strong>,浪费左右分栏的设计意图</li></ul></div>
  646. </div>
  647. </section>
  648. <!-- 方案 D -->
  649. <section class="scheme-panel active" id="panel-seg-compact" aria-label="方案 D">
  650. <p class="scheme-desc ok">
  651. <strong>推荐:</strong>保留左右分栏,左栏略收窄(约 36%)、右栏加宽(约 64%)。
  652. 右侧改用<strong>段内紧凑表(6 列)</strong>:产品列内叠放名称/别名/品牌/规格/单位(只读,来自计划同步);
  653. 独立可编辑列仅保留<strong>计划数量、包装规格、送货方式、备注</strong>——这些是段级真正要改的字段。
  654. 完整 10 列仍在上方「产品信息」,段内不必重复平铺。
  655. </p>
  656. <div class="dialog-sim">
  657. <div class="dialog-sim__hd">
  658. <span>编辑运输计划</span>
  659. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 D</span>
  660. </div>
  661. <div class="dialog-sim__bd">
  662. <h3 class="section-title">装货信息</h3>
  663. <div class="split wide-right">
  664. <div>
  665. <div class="party-row">
  666. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  667. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  668. </div>
  669. <div class="grid-2">
  670. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  671. <div class="field"><label>装货地址</label><input value="安庆市迎江区 … 供应商仓库" /></div>
  672. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  673. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  674. <div class="field span-2">
  675. <label>地磅单</label>
  676. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  677. </div>
  678. </div>
  679. </div>
  680. <div>
  681. <div class="products-head">
  682. <span class="products-head__title">装货产品</span>
  683. <button class="btn ghost" type="button">从计划产品同步</button>
  684. </div>
  685. <div class="table-wrap">
  686. <table class="data seg-table">
  687. <thead>
  688. <tr>
  689. <th class="col-idx">#</th>
  690. <th class="col-product">产品</th>
  691. <th class="col-qty">计划数量</th>
  692. <th class="col-pkg">包装规格</th>
  693. <th class="col-method">送货方式</th>
  694. <th class="col-remark">备注</th>
  695. </tr>
  696. </thead>
  697. <tbody>
  698. <tr>
  699. <td class="center">1</td>
  700. <td>
  701. <span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
  702. <span class="subline">别名:工业硫酸 · 品牌:不限 · CP级 · 吨</span>
  703. </td>
  704. <td class="num"><input value="20" /></td>
  705. <td><select><option>槽罐</option></select></td>
  706. <td><select><option>一票制</option></select></td>
  707. <td><input placeholder="…" /></td>
  708. </tr>
  709. <tr>
  710. <td class="center">2</td>
  711. <td>
  712. 30% 液碱
  713. <span class="subline">品牌:天原 · 国标 · 吨</span>
  714. </td>
  715. <td class="num"><input value="10" /></td>
  716. <td><select><option>散装</option></select></td>
  717. <td><select><option>山峡自提</option></select></td>
  718. <td><input value="含量30%" /></td>
  719. </tr>
  720. </tbody>
  721. </table>
  722. </div>
  723. <p style="margin:6px 0 0;font-size:11px;color:var(--text-muted)">只读展示字段收进「产品」列副行;与上方产品信息表互补,不重复占列宽</p>
  724. </div>
  725. </div>
  726. </div>
  727. </div>
  728. <div class="pros-cons">
  729. <div><h4>优点</h4><ul><li><strong>保留左右分栏,省高度</strong></li><li>无横向滚动,信息仍完整可见</li><li>段内只突出可编辑字段,认知负担更低</li><li>仍是表格形态,与 B 端习惯一致</li></ul></div>
  730. <div><h4>缺点</h4><ul><li>段内表与「产品信息」列结构不同(有意为之)</li><li>产品列副行在名称很长时需换行</li></ul></div>
  731. </div>
  732. </section>
  733. <!-- 方案 E -->
  734. <section class="scheme-panel" id="panel-strips" aria-label="方案 E">
  735. <p class="scheme-desc ok">
  736. <strong>更省高度:</strong>同样保留左右分栏,右侧每条产品仅占 <strong>2 行</strong>(产品条):
  737. 第 1 行名称 + 计划数量;第 2 行包装/送货/备注。别名品牌等收在一行灰色 meta 里。
  738. 2 条产品的高度 ≈ 紧凑表 2 行,但信息密度更可控。
  739. </p>
  740. <div class="dialog-sim">
  741. <div class="dialog-sim__hd">
  742. <span>编辑运输计划</span>
  743. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 E</span>
  744. </div>
  745. <div class="dialog-sim__bd">
  746. <h3 class="section-title">装货信息</h3>
  747. <div class="split wide-right">
  748. <div>
  749. <div class="party-row">
  750. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  751. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  752. </div>
  753. <div class="grid-2">
  754. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  755. <div class="field"><label>装货地址</label><input value="安庆市迎江区 …" /></div>
  756. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  757. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  758. <div class="field span-2">
  759. <label>地磅单</label>
  760. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  761. </div>
  762. </div>
  763. </div>
  764. <div>
  765. <div class="products-head">
  766. <span class="products-head__title">装货产品</span>
  767. <button class="btn ghost" type="button">从计划产品同步</button>
  768. </div>
  769. <div class="product-strips">
  770. <article class="product-strip">
  771. <div class="product-strip__row1">
  772. <span class="idx">1</span>
  773. <div class="name"><span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span></div>
  774. <div class="qty"><label>计划数量</label><input value="20" /></div>
  775. </div>
  776. <div class="product-strip__meta">别名:工业硫酸 · 品牌:不限 · CP级 · 吨</div>
  777. <div class="product-strip__row2">
  778. <div class="field"><label>包装规格</label><select><option>槽罐</option></select></div>
  779. <div class="field"><label>送货方式</label><select><option>一票制</option></select></div>
  780. <div class="field"><label>备注</label><input placeholder="备注" /></div>
  781. </div>
  782. </article>
  783. <article class="product-strip">
  784. <div class="product-strip__row1">
  785. <span class="idx">2</span>
  786. <div class="name">30% 液碱</div>
  787. <div class="qty"><label>计划数量</label><input value="10" /></div>
  788. </div>
  789. <div class="product-strip__meta">品牌:天原 · 国标 · 吨</div>
  790. <div class="product-strip__row2">
  791. <div class="field"><label>包装规格</label><select><option>散装</option></select></div>
  792. <div class="field"><label>送货方式</label><select><option>山峡自提</option></select></div>
  793. <div class="field"><label>备注</label><input value="含量30%" /></div>
  794. </div>
  795. </article>
  796. </div>
  797. </div>
  798. </div>
  799. </div>
  800. </div>
  801. <div class="pros-cons">
  802. <div><h4>优点</h4><ul><li>左右分栏 + <strong>纵向最省</strong></li><li>无横向滚动,字段全可见</li><li>多产品时比宽表更易扫读</li></ul></div>
  803. <div><h4>缺点</h4><ul><li>非传统表格,需新组件样式</li><li>与产品信息表形态不同</li></ul></div>
  804. </div>
  805. </section>
  806. <!-- 方案 B -->
  807. <section class="scheme-panel" id="panel-cards" aria-label="方案 B">
  808. <p class="scheme-desc">
  809. <strong>保留左右分栏</strong>,产品区不用宽表,改为<strong>每张产品一张卡片</strong>:首行名称+数量,次行 4 列网格放别名/品牌/规格/单位/包装/送货/备注。
  810. 右栏再窄也不会横向滚动。
  811. </p>
  812. <div class="dialog-sim">
  813. <div class="dialog-sim__hd">
  814. <span>编辑运输计划</span>
  815. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 B</span>
  816. </div>
  817. <div class="dialog-sim__bd">
  818. <h3 class="section-title">装货信息</h3>
  819. <div class="split">
  820. <div>
  821. <div class="party-row">
  822. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  823. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  824. </div>
  825. <div class="grid-2">
  826. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  827. <div class="field"><label>装货地址</label><input value="安庆市迎江区 …" /></div>
  828. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  829. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  830. <div class="field span-2">
  831. <label>地磅单</label>
  832. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  833. </div>
  834. </div>
  835. </div>
  836. <div>
  837. <div class="products-head">
  838. <span class="products-head__title">装货产品</span>
  839. <button class="btn ghost" type="button">从计划产品同步</button>
  840. </div>
  841. <div class="product-cards">
  842. <article class="product-card">
  843. <div class="product-card__hd">
  844. <span class="product-card__idx">1</span>
  845. <div class="product-card__name">
  846. <span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
  847. </div>
  848. <div class="product-card__qty">
  849. <label>计划数量</label>
  850. <input value="20.000" />
  851. </div>
  852. </div>
  853. <div class="product-card__bd">
  854. <div class="field"><label>别名</label><div class="ctrl muted">工业硫酸</div></div>
  855. <div class="field"><label>品牌</label><div class="ctrl muted">不限品牌</div></div>
  856. <div class="field"><label>型号/规格</label><div class="ctrl muted">CP级</div></div>
  857. <div class="field"><label>单位</label><div class="ctrl muted">吨</div></div>
  858. <div class="field"><label>包装规格</label><select><option>槽罐</option></select></div>
  859. <div class="field"><label>送货方式</label><select><option>一票制</option></select></div>
  860. <div class="field span-all"><label>备注</label><input placeholder="备注" /></div>
  861. </div>
  862. </article>
  863. <article class="product-card">
  864. <div class="product-card__hd">
  865. <span class="product-card__idx">2</span>
  866. <div class="product-card__name">30% 液碱</div>
  867. <div class="product-card__qty">
  868. <label>计划数量</label>
  869. <input value="10.000" />
  870. </div>
  871. </div>
  872. <div class="product-card__bd">
  873. <div class="field"><label>别名</label><div class="ctrl muted">—</div></div>
  874. <div class="field"><label>品牌</label><div class="ctrl muted">指定 · 天原</div></div>
  875. <div class="field"><label>型号/规格</label><div class="ctrl muted">国标</div></div>
  876. <div class="field"><label>单位</label><div class="ctrl muted">吨</div></div>
  877. <div class="field"><label>包装规格</label><select><option>散装</option></select></div>
  878. <div class="field"><label>送货方式</label><select><option>山峡自提</option></select></div>
  879. <div class="field span-all"><label>备注</label><input value="含量30%" /></div>
  880. </div>
  881. </article>
  882. </div>
  883. </div>
  884. </div>
  885. </div>
  886. </div>
  887. <div class="pros-cons">
  888. <div><h4>优点</h4><ul><li>左右分栏保留,表单与产品同屏</li><li>右栏<strong>零横向滚动</strong></li><li>多产品时信息层次清晰</li></ul></div>
  889. <div><h4>缺点</h4><ul><li>与「产品信息」表格形态不一致</li><li>产品多时右栏纵向较长</li><li>前端需新增卡片组件</li></ul></div>
  890. </div>
  891. </section>
  892. <!-- 方案 C -->
  893. <section class="scheme-panel" id="panel-compact" aria-label="方案 C">
  894. <p class="scheme-desc">
  895. <strong>保留左右分栏 + 表格</strong>,通过<strong>合并列</strong>压缩宽度:「产品」列内叠放名称/别名/品牌;去掉独立备注列或缩短。
  896. 列数从 10 降到 7,右栏可勉强放下,但长文案会换行。
  897. </p>
  898. <div class="dialog-sim">
  899. <div class="dialog-sim__hd">
  900. <span>编辑运输计划</span>
  901. <span style="font-size:12px;font-weight:500;color:var(--text-muted)">装货信息 · 方案 C</span>
  902. </div>
  903. <div class="dialog-sim__bd">
  904. <h3 class="section-title">装货信息</h3>
  905. <div class="split">
  906. <div>
  907. <div class="party-row">
  908. <div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
  909. <div class="field"><label>装货合同 *</label><button class="btn ghost" type="button" style="width:100%;justify-content:center">选择合同</button></div>
  910. </div>
  911. <div class="grid-2">
  912. <div class="field"><label>装货时间</label><input value="2026-08-26" /></div>
  913. <div class="field"><label>装货地址</label><input value="安庆市迎江区 …" /></div>
  914. <div class="field"><label>联系方式</label><input value="张工 138****0001" /></div>
  915. <div class="field"><label>注意事项</label><input value="装货前联系仓库" /></div>
  916. <div class="field span-2">
  917. <label>地磅单</label>
  918. <div class="dibang-row"><input type="checkbox" /> 生成地磅单(出库)</div>
  919. </div>
  920. </div>
  921. </div>
  922. <div>
  923. <div class="products-head">
  924. <span class="products-head__title">装货产品</span>
  925. <button class="btn ghost" type="button">从计划产品同步</button>
  926. </div>
  927. <div class="table-wrap">
  928. <table class="data">
  929. <thead>
  930. <tr>
  931. <th style="width:6%">#</th>
  932. <th class="col-product">产品</th>
  933. <th class="col-spec">型号/规格</th>
  934. <th class="col-unit">单位</th>
  935. <th class="col-qty">计划数量</th>
  936. <th class="col-pkg">包装规格</th>
  937. <th class="col-method">送货方式</th>
  938. </tr>
  939. </thead>
  940. <tbody>
  941. <tr>
  942. <td class="center">1</td>
  943. <td>
  944. <span class="hazard">97% 精制硫酸 <span class="tag danger">易制毒</span></span>
  945. <span class="subline">别名:工业硫酸</span>
  946. <span class="subline">品牌:不限品牌</span>
  947. </td>
  948. <td>CP级</td>
  949. <td class="center">吨</td>
  950. <td class="num"><input value="20.000" /></td>
  951. <td class="center"><select><option>槽罐</option></select></td>
  952. <td class="center"><select><option>一票制</option></select></td>
  953. </tr>
  954. <tr>
  955. <td class="center">2</td>
  956. <td>
  957. 30% 液碱
  958. <span class="subline">品牌:指定 · 天原</span>
  959. </td>
  960. <td>国标</td>
  961. <td class="center">吨</td>
  962. <td class="num"><input value="10.000" /></td>
  963. <td class="center"><select><option>散装</option></select></td>
  964. <td class="center"><select><option>山峡自提</option></select></td>
  965. </tr>
  966. </tbody>
  967. </table>
  968. </div>
  969. <p style="margin:8px 0 0;font-size:11px;color:var(--text-muted)">备注已省略或 hover 展示;产品列内多行换行,行高不统一</p>
  970. </div>
  971. </div>
  972. </div>
  973. </div>
  974. <div class="pros-cons">
  975. <div><h4>优点</h4><ul><li>保留左右分栏 + 表格式编辑</li><li>列数减少,大概率无横向滚动</li></ul></div>
  976. <div><h4>缺点</h4><ul><li>与「产品信息」列结构<strong>不一致</strong></li><li>产品列拥挤,别名/品牌可读性差</li><li>备注字段不好放</li></ul></div>
  977. </div>
  978. </section>
  979. </div>
  980. <script>
  981. const tabs = document.querySelectorAll('.scheme-tab')
  982. const panels = document.querySelectorAll('.scheme-panel')
  983. const viewportSelect = document.getElementById('viewport')
  984. tabs.forEach((tab) => {
  985. tab.addEventListener('click', () => {
  986. const scheme = tab.dataset.scheme
  987. tabs.forEach((t) => t.classList.toggle('active', t === tab))
  988. panels.forEach((p) => p.classList.toggle('active', p.id === `panel-${scheme}`))
  989. })
  990. })
  991. function applyViewport() {
  992. const w = viewportSelect.value
  993. document.documentElement.style.setProperty('--dialog-max', `${w}px`)
  994. }
  995. viewportSelect.addEventListener('change', applyViewport)
  996. applyViewport()
  997. </script>
  998. </body>
  999. </html>