pl-plan-contract-display-modes.html 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032
  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. --bg-page: #f5f7f6;
  19. --surface: #ffffff;
  20. --table-head: #f8fafc;
  21. --row-alt: #fafafa;
  22. --danger: #dc2626;
  23. --warning: #d97706;
  24. --radius: 10px;
  25. --radius-sm: 8px;
  26. }
  27. * { box-sizing: border-box; }
  28. body {
  29. margin: 0;
  30. font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  31. font-size: 14px;
  32. line-height: 1.5;
  33. color: var(--text);
  34. background: var(--bg-page);
  35. }
  36. .page {
  37. max-width: 1180px;
  38. margin: 0 auto;
  39. padding: 28px 24px 80px;
  40. }
  41. .hero {
  42. margin-bottom: 28px;
  43. padding: 22px 24px;
  44. background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 55%, #f8fafc 100%);
  45. border: 1px solid var(--border);
  46. border-radius: var(--radius);
  47. }
  48. .hero h1 {
  49. margin: 0 0 8px;
  50. font-size: 22px;
  51. font-weight: 700;
  52. color: var(--text);
  53. }
  54. .hero p {
  55. margin: 0;
  56. color: var(--text-muted);
  57. max-width: 720px;
  58. }
  59. .hero-meta {
  60. display: flex;
  61. flex-wrap: wrap;
  62. gap: 8px;
  63. margin-top: 14px;
  64. }
  65. .pill {
  66. display: inline-flex;
  67. align-items: center;
  68. gap: 6px;
  69. padding: 4px 10px;
  70. border-radius: 999px;
  71. font-size: 12px;
  72. font-weight: 600;
  73. background: var(--primary-bg);
  74. color: var(--primary-dark);
  75. border: 1px solid #a7f3d0;
  76. }
  77. .toc {
  78. position: sticky;
  79. top: 0;
  80. z-index: 10;
  81. display: flex;
  82. flex-wrap: wrap;
  83. gap: 8px;
  84. margin: 0 0 24px;
  85. padding: 12px;
  86. background: rgba(255, 255, 255, 0.92);
  87. backdrop-filter: blur(8px);
  88. border: 1px solid var(--border);
  89. border-radius: var(--radius);
  90. }
  91. .toc a {
  92. text-decoration: none;
  93. color: var(--text);
  94. font-size: 13px;
  95. font-weight: 500;
  96. padding: 6px 12px;
  97. border-radius: 999px;
  98. border: 1px solid var(--border);
  99. background: #fff;
  100. }
  101. .toc a:hover {
  102. border-color: var(--primary);
  103. color: var(--primary-dark);
  104. background: var(--primary-bg);
  105. }
  106. .mode {
  107. margin-bottom: 28px;
  108. background: var(--surface);
  109. border: 1px solid var(--border);
  110. border-radius: var(--radius);
  111. overflow: hidden;
  112. box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  113. }
  114. .mode-head {
  115. display: flex;
  116. flex-wrap: wrap;
  117. align-items: flex-start;
  118. justify-content: space-between;
  119. gap: 12px;
  120. padding: 16px 20px;
  121. border-bottom: 1px solid var(--border);
  122. background: #fbfdfe;
  123. }
  124. .mode-head h2 {
  125. margin: 0 0 6px;
  126. font-size: 16px;
  127. font-weight: 700;
  128. }
  129. .mode-head h2 .code {
  130. display: inline-block;
  131. margin-right: 8px;
  132. padding: 2px 8px;
  133. border-radius: 6px;
  134. font-size: 12px;
  135. font-weight: 700;
  136. color: #fff;
  137. background: var(--primary-dark);
  138. }
  139. .mode-head p {
  140. margin: 0;
  141. color: var(--text-muted);
  142. font-size: 13px;
  143. }
  144. .mode-tags {
  145. display: flex;
  146. flex-wrap: wrap;
  147. gap: 6px;
  148. }
  149. .tag {
  150. padding: 3px 8px;
  151. border-radius: 6px;
  152. font-size: 11px;
  153. font-weight: 600;
  154. border: 1px solid #e2e8f0;
  155. color: var(--text-muted);
  156. background: #fff;
  157. }
  158. .tag.good {
  159. color: var(--primary-dark);
  160. border-color: #a7f3d0;
  161. background: var(--primary-bg);
  162. }
  163. .tag.warn {
  164. color: var(--warning);
  165. border-color: #fde68a;
  166. background: #fffbeb;
  167. }
  168. .mode-body {
  169. padding: 18px 20px 20px;
  170. }
  171. /* 模拟供需块上下文 */
  172. .party-mock {
  173. padding: 14px;
  174. border: 1px solid #e2e8f0;
  175. border-radius: var(--radius-sm);
  176. background: #f8fafc;
  177. }
  178. .party-mock__title {
  179. margin: 0 0 12px;
  180. font-size: 13px;
  181. font-weight: 600;
  182. }
  183. .select-row {
  184. display: flex;
  185. gap: 12px;
  186. margin-bottom: 12px;
  187. }
  188. .fake-field {
  189. flex: 1;
  190. min-width: 0;
  191. }
  192. .fake-field label {
  193. display: block;
  194. margin-bottom: 6px;
  195. font-size: 12px;
  196. color: var(--text-muted);
  197. }
  198. .fake-control {
  199. height: 36px;
  200. display: flex;
  201. align-items: center;
  202. padding: 0 12px;
  203. border: 1px solid var(--border);
  204. border-radius: var(--radius-sm);
  205. background: #fff;
  206. color: var(--text);
  207. font-size: 13px;
  208. }
  209. .fake-btn {
  210. height: 36px;
  211. display: inline-flex;
  212. align-items: center;
  213. gap: 6px;
  214. padding: 0 12px;
  215. border: 1px solid var(--border);
  216. border-radius: var(--radius-sm);
  217. background: #fff;
  218. color: var(--text);
  219. font-size: 13px;
  220. font-weight: 500;
  221. white-space: nowrap;
  222. }
  223. table.data {
  224. width: 100%;
  225. border-collapse: collapse;
  226. background: #fff;
  227. border: 1px solid var(--border);
  228. border-radius: var(--radius-sm);
  229. overflow: hidden;
  230. }
  231. table.data th,
  232. table.data td {
  233. padding: 8px 10px;
  234. border-bottom: 1px solid #eef2f7;
  235. text-align: left;
  236. font-size: 13px;
  237. vertical-align: top;
  238. }
  239. table.data th {
  240. background: var(--table-head);
  241. font-weight: 600;
  242. color: #334155;
  243. white-space: nowrap;
  244. }
  245. table.data tr:last-child td { border-bottom: none; }
  246. table.data .center { text-align: center; }
  247. table.data .right { text-align: right; }
  248. .link-btn {
  249. border: none;
  250. background: none;
  251. color: var(--danger);
  252. font-size: 13px;
  253. cursor: pointer;
  254. padding: 0;
  255. }
  256. .muted { color: var(--text-muted); }
  257. .status-tag {
  258. display: inline-block;
  259. padding: 2px 8px;
  260. border-radius: 6px;
  261. font-size: 12px;
  262. font-weight: 600;
  263. color: #fff;
  264. background: var(--primary-dark);
  265. }
  266. /* Mode A: 当前嵌套表 */
  267. .nested-in-cell {
  268. width: 100%;
  269. border-collapse: collapse;
  270. border: 1px solid #e2e8f0;
  271. background: #fff;
  272. }
  273. .nested-in-cell th,
  274. .nested-in-cell td {
  275. padding: 4px 6px;
  276. border: 1px solid #eef2f7;
  277. font-size: 12px;
  278. }
  279. .nested-in-cell th {
  280. background: #f1f5f9;
  281. font-weight: 600;
  282. }
  283. /* Mode B: 卡片 */
  284. .contract-cards { display: flex; flex-direction: column; gap: 10px; }
  285. .contract-card {
  286. border: 1px solid var(--border);
  287. border-radius: var(--radius-sm);
  288. background: #fff;
  289. overflow: hidden;
  290. }
  291. .contract-card__head {
  292. display: flex;
  293. align-items: center;
  294. justify-content: space-between;
  295. gap: 12px;
  296. padding: 10px 12px;
  297. background: var(--primary-bg);
  298. border-bottom: 1px solid #a7f3d0;
  299. }
  300. .contract-card__meta {
  301. display: flex;
  302. flex-wrap: wrap;
  303. align-items: center;
  304. gap: 8px 14px;
  305. min-width: 0;
  306. }
  307. .contract-card__no {
  308. font-weight: 700;
  309. color: var(--primary-dark);
  310. }
  311. .contract-card__body { padding: 0; }
  312. .contract-card table {
  313. width: 100%;
  314. border-collapse: collapse;
  315. }
  316. .contract-card table th,
  317. .contract-card table td {
  318. padding: 8px 10px;
  319. border-bottom: 1px solid #eef2f7;
  320. font-size: 12px;
  321. text-align: left;
  322. }
  323. .contract-card table th {
  324. background: var(--table-head);
  325. font-weight: 600;
  326. }
  327. .contract-card table tr:last-child td { border-bottom: none; }
  328. /* Mode C: 展开行 */
  329. .expand-toggle {
  330. display: inline-flex;
  331. align-items: center;
  332. gap: 6px;
  333. color: var(--primary-dark);
  334. font-weight: 600;
  335. cursor: pointer;
  336. user-select: none;
  337. }
  338. .expand-panel {
  339. margin: 0;
  340. padding: 10px 12px 12px 36px;
  341. background: #f8fafc;
  342. border-top: 1px dashed #d9e8e2;
  343. }
  344. /* Mode D: 摘要 chips + 明细 */
  345. .summary-line {
  346. display: flex;
  347. flex-wrap: wrap;
  348. gap: 6px;
  349. margin-bottom: 6px;
  350. }
  351. .chip {
  352. display: inline-flex;
  353. align-items: center;
  354. padding: 2px 8px;
  355. border-radius: 999px;
  356. font-size: 12px;
  357. background: #f1f5f9;
  358. color: #334155;
  359. border: 1px solid #e2e8f0;
  360. }
  361. /* Mode E: 分组清单 */
  362. .group-list { display: flex; flex-direction: column; gap: 12px; }
  363. .group-block {
  364. border: 1px solid var(--border);
  365. border-radius: var(--radius-sm);
  366. background: #fff;
  367. }
  368. .group-block__bar {
  369. display: flex;
  370. align-items: center;
  371. justify-content: space-between;
  372. padding: 8px 12px;
  373. border-bottom: 1px solid var(--border);
  374. background: #fff;
  375. }
  376. .kv {
  377. display: flex;
  378. gap: 16px;
  379. flex-wrap: wrap;
  380. font-size: 13px;
  381. }
  382. .kv b { font-weight: 600; }
  383. .product-rows {
  384. display: flex;
  385. flex-direction: column;
  386. }
  387. .product-row {
  388. display: grid;
  389. grid-template-columns: 1.4fr 0.9fr 0.7fr 0.9fr 0.6fr 0.5fr 0.9fr 0.8fr 1fr;
  390. gap: 8px;
  391. padding: 8px 12px;
  392. border-bottom: 1px solid #f1f5f9;
  393. font-size: 12px;
  394. }
  395. .product-row:last-child { border-bottom: none; }
  396. .product-row.head {
  397. background: var(--table-head);
  398. font-weight: 600;
  399. color: #475569;
  400. }
  401. .product-row .label-mobile { display: none; }
  402. /* Mode F: 紧凑两行文本 */
  403. .compact-list { display: flex; flex-direction: column; gap: 8px; }
  404. .compact-item {
  405. padding: 10px 12px;
  406. border: 1px solid var(--border);
  407. border-radius: var(--radius-sm);
  408. background: #fff;
  409. }
  410. .compact-item__top {
  411. display: flex;
  412. justify-content: space-between;
  413. gap: 12px;
  414. margin-bottom: 6px;
  415. }
  416. .compact-item__products {
  417. margin: 0;
  418. padding-left: 18px;
  419. color: var(--text-muted);
  420. font-size: 12px;
  421. }
  422. .compact-item__products li { margin: 2px 0; }
  423. .pick-bar {
  424. display: flex;
  425. align-items: center;
  426. justify-content: space-between;
  427. gap: 12px;
  428. margin-top: 14px;
  429. padding-top: 12px;
  430. border-top: 1px dashed #e2e8f0;
  431. }
  432. .pick-bar label {
  433. display: inline-flex;
  434. align-items: center;
  435. gap: 8px;
  436. font-weight: 600;
  437. cursor: pointer;
  438. }
  439. .pick-bar input { accent-color: var(--primary-dark); width: 16px; height: 16px; }
  440. .note {
  441. font-size: 12px;
  442. color: var(--text-muted);
  443. }
  444. .footer-choice {
  445. position: sticky;
  446. bottom: 12px;
  447. margin-top: 12px;
  448. padding: 14px 16px;
  449. border-radius: var(--radius);
  450. border: 1px solid #a7f3d0;
  451. background: rgba(236, 253, 245, 0.96);
  452. box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  453. }
  454. .footer-choice strong { color: var(--primary-dark); }
  455. @media (max-width: 900px) {
  456. .select-row { flex-direction: column; }
  457. .product-row {
  458. grid-template-columns: 1fr 1fr;
  459. }
  460. .product-row.head { display: none; }
  461. .product-row .label-mobile {
  462. display: block;
  463. color: var(--text-muted);
  464. font-size: 11px;
  465. }
  466. }
  467. </style>
  468. </head>
  469. <body>
  470. <div class="page">
  471. <header class="hero">
  472. <h1>运输计划 · 已选合同信息展示模式</h1>
  473. <p>
  474. 场景:新增/编辑弹窗中,供方或需方已选择客户与合同后,下方如何展示「合同 + 合同内产品」。
  475. 以下用同一份示例数据,提供 6 种展示模式。请勾选倾向方案,回复模式编号即可落地。
  476. </p>
  477. <div class="hero-meta">
  478. <span class="pill">Fresh Mint</span>
  479. <span class="pill">示例:供方 · 2 份合同</span>
  480. <span class="pill">产品字段:名称/别名/品牌/规格/数量/单位/包装/送货/备注</span>
  481. </div>
  482. </header>
  483. <nav class="toc">
  484. <a href="#mode-a">A 单元格嵌套表</a>
  485. <a href="#mode-b">B 合同卡片</a>
  486. <a href="#mode-c">C 主表可展开</a>
  487. <a href="#mode-d">D 摘要 + 明细表</a>
  488. <a href="#mode-e">E 分组清单</a>
  489. <a href="#mode-f">F 紧凑文本</a>
  490. </nav>
  491. <!-- ========== MODE A ========== -->
  492. <section class="mode" id="mode-a">
  493. <div class="mode-head">
  494. <div>
  495. <h2><span class="code">A</span>单元格内嵌套产品表(当前实现接近)</h2>
  496. <p>外层合同行 + 「产品信息」列里再放一张小表。信息全,但单元格拥挤、行高失控。</p>
  497. </div>
  498. <div class="mode-tags">
  499. <span class="tag warn">易显乱</span>
  500. <span class="tag">信息完整</span>
  501. </div>
  502. </div>
  503. <div class="mode-body">
  504. <div class="party-mock">
  505. <h3 class="party-mock__title">供方信息</h3>
  506. <div class="select-row">
  507. <div class="fake-field">
  508. <label>供方客户 *</label>
  509. <div class="fake-control">安庆某某化工有限公司</div>
  510. </div>
  511. <div class="fake-field" style="flex: 0.7">
  512. <label>供方合同 *</label>
  513. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  514. </div>
  515. </div>
  516. <table class="data">
  517. <thead>
  518. <tr>
  519. <th style="width: 140px">合同编号</th>
  520. <th>产品信息</th>
  521. <th class="center" style="width: 100px">合同类型</th>
  522. <th class="center" style="width: 72px">操作</th>
  523. </tr>
  524. </thead>
  525. <tbody>
  526. <tr>
  527. <td>HT2026080001</td>
  528. <td>
  529. <table class="nested-in-cell">
  530. <thead>
  531. <tr>
  532. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  533. <th>数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  534. </tr>
  535. </thead>
  536. <tbody>
  537. <tr>
  538. <td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
  539. <td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  540. </tr>
  541. <tr>
  542. <td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
  543. <td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
  544. </tr>
  545. </tbody>
  546. </table>
  547. </td>
  548. <td class="center"><span class="status-tag">销售合同</span></td>
  549. <td class="center"><button class="link-btn" type="button">移除</button></td>
  550. </tr>
  551. <tr>
  552. <td>HT2026080018</td>
  553. <td>
  554. <table class="nested-in-cell">
  555. <thead>
  556. <tr>
  557. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  558. <th>数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  559. </tr>
  560. </thead>
  561. <tbody>
  562. <tr>
  563. <td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
  564. <td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  565. </tr>
  566. </tbody>
  567. </table>
  568. </td>
  569. <td class="center"><span class="status-tag">框架合同</span></td>
  570. <td class="center"><button class="link-btn" type="button">移除</button></td>
  571. </tr>
  572. </tbody>
  573. </table>
  574. </div>
  575. <div class="pick-bar">
  576. <label><input type="radio" name="choice" value="A" /> 选择模式 A</label>
  577. <span class="note">适合:合同很少、产品字段少时</span>
  578. </div>
  579. </div>
  580. </section>
  581. <!-- ========== MODE B ========== -->
  582. <section class="mode" id="mode-b">
  583. <div class="mode-head">
  584. <div>
  585. <h2><span class="code">B</span>合同卡片(推荐候选)</h2>
  586. <p>每份合同一张卡片:顶部合同编号/类型/移除,下方独立产品明细表。层次清晰,半宽供需块里也较稳。</p>
  587. </div>
  588. <div class="mode-tags">
  589. <span class="tag good">推荐候选</span>
  590. <span class="tag good">层次清晰</span>
  591. <span class="tag">易扫读</span>
  592. </div>
  593. </div>
  594. <div class="mode-body">
  595. <div class="party-mock">
  596. <h3 class="party-mock__title">供方信息</h3>
  597. <div class="select-row">
  598. <div class="fake-field">
  599. <label>供方客户 *</label>
  600. <div class="fake-control">安庆某某化工有限公司</div>
  601. </div>
  602. <div class="fake-field" style="flex: 0.7">
  603. <label>供方合同 *</label>
  604. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  605. </div>
  606. </div>
  607. <div class="contract-cards">
  608. <article class="contract-card">
  609. <div class="contract-card__head">
  610. <div class="contract-card__meta">
  611. <span class="contract-card__no">HT2026080001</span>
  612. <span class="status-tag">销售合同</span>
  613. <span class="muted">2 个产品</span>
  614. </div>
  615. <button class="link-btn" type="button">移除</button>
  616. </div>
  617. <div class="contract-card__body">
  618. <table>
  619. <thead>
  620. <tr>
  621. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  622. <th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  623. </tr>
  624. </thead>
  625. <tbody>
  626. <tr>
  627. <td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
  628. <td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  629. </tr>
  630. <tr>
  631. <td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
  632. <td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
  633. </tr>
  634. </tbody>
  635. </table>
  636. </div>
  637. </article>
  638. <article class="contract-card">
  639. <div class="contract-card__head">
  640. <div class="contract-card__meta">
  641. <span class="contract-card__no">HT2026080018</span>
  642. <span class="status-tag">框架合同</span>
  643. <span class="muted">1 个产品</span>
  644. </div>
  645. <button class="link-btn" type="button">移除</button>
  646. </div>
  647. <div class="contract-card__body">
  648. <table>
  649. <thead>
  650. <tr>
  651. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  652. <th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  653. </tr>
  654. </thead>
  655. <tbody>
  656. <tr>
  657. <td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
  658. <td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  659. </tr>
  660. </tbody>
  661. </table>
  662. </div>
  663. </article>
  664. </div>
  665. </div>
  666. <div class="pick-bar">
  667. <label><input type="radio" name="choice" value="B" checked /> 选择模式 B</label>
  668. <span class="note">适合:默认推荐;合同 1~N 份、产品字段较多</span>
  669. </div>
  670. </div>
  671. </section>
  672. <!-- ========== MODE C ========== -->
  673. <section class="mode" id="mode-c">
  674. <div class="mode-head">
  675. <div>
  676. <h2><span class="code">C</span>主表 + 展开行(行中行)</h2>
  677. <p>默认只看合同概要;点击展开后显示产品明细表。列表紧凑,适合合同多、平时不看产品细节。</p>
  678. </div>
  679. <div class="mode-tags">
  680. <span class="tag good">列表紧凑</span>
  681. <span class="tag">需二次点击</span>
  682. </div>
  683. </div>
  684. <div class="mode-body">
  685. <div class="party-mock">
  686. <h3 class="party-mock__title">供方信息</h3>
  687. <div class="select-row">
  688. <div class="fake-field">
  689. <label>供方客户 *</label>
  690. <div class="fake-control">安庆某某化工有限公司</div>
  691. </div>
  692. <div class="fake-field" style="flex: 0.7">
  693. <label>供方合同 *</label>
  694. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  695. </div>
  696. </div>
  697. <table class="data">
  698. <thead>
  699. <tr>
  700. <th style="width: 48px"></th>
  701. <th>合同编号</th>
  702. <th>产品摘要</th>
  703. <th class="center">合同类型</th>
  704. <th class="center">操作</th>
  705. </tr>
  706. </thead>
  707. <tbody>
  708. <tr>
  709. <td class="center">▾</td>
  710. <td>
  711. <span class="expand-toggle">HT2026080001</span>
  712. </td>
  713. <td>硫酸、盐酸 · 共 2 项</td>
  714. <td class="center"><span class="status-tag">销售合同</span></td>
  715. <td class="center"><button class="link-btn" type="button">移除</button></td>
  716. </tr>
  717. <tr>
  718. <td colspan="5" style="padding: 0; border-bottom: 1px solid #eef2f7;">
  719. <div class="expand-panel">
  720. <table class="data" style="border: none;">
  721. <thead>
  722. <tr>
  723. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  724. <th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  725. </tr>
  726. </thead>
  727. <tbody>
  728. <tr>
  729. <td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
  730. <td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  731. </tr>
  732. <tr>
  733. <td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
  734. <td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
  735. </tr>
  736. </tbody>
  737. </table>
  738. </div>
  739. </td>
  740. </tr>
  741. <tr>
  742. <td class="center">▸</td>
  743. <td>HT2026080018</td>
  744. <td>液碱 · 共 1 项</td>
  745. <td class="center"><span class="status-tag">框架合同</span></td>
  746. <td class="center"><button class="link-btn" type="button">移除</button></td>
  747. </tr>
  748. </tbody>
  749. </table>
  750. </div>
  751. <div class="pick-bar">
  752. <label><input type="radio" name="choice" value="C" /> 选择模式 C</label>
  753. <span class="note">适合:合同较多,产品明细按需查看</span>
  754. </div>
  755. </div>
  756. </section>
  757. <!-- ========== MODE D ========== -->
  758. <section class="mode" id="mode-d">
  759. <div class="mode-head">
  760. <div>
  761. <h2><span class="code">D</span>合同摘要条 + 下方统一产品明细表</h2>
  762. <p>上方用 Tag 展示已选合同;下方一张「合同编号 + 产品字段」合并表。扫产品方便,但合同边界弱一些。</p>
  763. </div>
  764. <div class="mode-tags">
  765. <span class="tag good">产品横向对比好</span>
  766. <span class="tag warn">合同边界弱</span>
  767. </div>
  768. </div>
  769. <div class="mode-body">
  770. <div class="party-mock">
  771. <h3 class="party-mock__title">供方信息</h3>
  772. <div class="select-row">
  773. <div class="fake-field">
  774. <label>供方客户 *</label>
  775. <div class="fake-control">安庆某某化工有限公司</div>
  776. </div>
  777. <div class="fake-field" style="flex: 0.7">
  778. <label>供方合同 *</label>
  779. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  780. </div>
  781. </div>
  782. <div class="summary-line">
  783. <span class="chip">HT2026080001 · 销售合同 ✕</span>
  784. <span class="chip">HT2026080018 · 框架合同 ✕</span>
  785. </div>
  786. <table class="data">
  787. <thead>
  788. <tr>
  789. <th>合同编号</th>
  790. <th>产品名称</th><th>别名</th><th>品牌</th><th>型号/规格</th>
  791. <th class="right">数量</th><th>单位</th><th>包装规格</th><th>送货方式</th><th>备注</th>
  792. </tr>
  793. </thead>
  794. <tbody>
  795. <tr>
  796. <td>HT2026080001</td>
  797. <td>硫酸</td><td>工业硫酸</td><td>—</td><td>98%</td>
  798. <td class="right">30</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  799. </tr>
  800. <tr>
  801. <td>HT2026080001</td>
  802. <td>盐酸</td><td>—</td><td>山峡</td><td>31%</td>
  803. <td class="right">20</td><td>吨</td><td>吨桶</td><td>自提</td><td>注意防腐蚀</td>
  804. </tr>
  805. <tr>
  806. <td>HT2026080018</td>
  807. <td>液碱</td><td>烧碱</td><td>—</td><td>32%</td>
  808. <td class="right">15</td><td>吨</td><td>散水</td><td>送到</td><td>—</td>
  809. </tr>
  810. </tbody>
  811. </table>
  812. </div>
  813. <div class="pick-bar">
  814. <label><input type="radio" name="choice" value="D" /> 选择模式 D</label>
  815. <span class="note">适合:更关心产品清单,而不是按合同分组</span>
  816. </div>
  817. </div>
  818. </section>
  819. <!-- ========== MODE E ========== -->
  820. <section class="mode" id="mode-e">
  821. <div class="mode-head">
  822. <div>
  823. <h2><span class="code">E</span>分组清单(轻卡片 + 网格行)</h2>
  824. <p>无外层大表;每份合同一条标题栏 + 产品网格行。比 B 更轻,比 A 更整齐。</p>
  825. </div>
  826. <div class="mode-tags">
  827. <span class="tag good">轻量</span>
  828. <span class="tag">半宽友好</span>
  829. </div>
  830. </div>
  831. <div class="mode-body">
  832. <div class="party-mock">
  833. <h3 class="party-mock__title">供方信息</h3>
  834. <div class="select-row">
  835. <div class="fake-field">
  836. <label>供方客户 *</label>
  837. <div class="fake-control">安庆某某化工有限公司</div>
  838. </div>
  839. <div class="fake-field" style="flex: 0.7">
  840. <label>供方合同 *</label>
  841. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  842. </div>
  843. </div>
  844. <div class="group-list">
  845. <div class="group-block">
  846. <div class="group-block__bar">
  847. <div class="kv">
  848. <span><b>合同编号</b> HT2026080001</span>
  849. <span><b>类型</b> <span class="status-tag">销售合同</span></span>
  850. </div>
  851. <button class="link-btn" type="button">移除</button>
  852. </div>
  853. <div class="product-rows">
  854. <div class="product-row head">
  855. <span>产品名称</span><span>别名</span><span>品牌</span><span>型号/规格</span>
  856. <span>数量</span><span>单位</span><span>包装规格</span><span>送货方式</span><span>备注</span>
  857. </div>
  858. <div class="product-row">
  859. <span><span class="label-mobile">产品名称</span>硫酸</span>
  860. <span><span class="label-mobile">别名</span>工业硫酸</span>
  861. <span><span class="label-mobile">品牌</span>—</span>
  862. <span><span class="label-mobile">型号/规格</span>98%</span>
  863. <span><span class="label-mobile">数量</span>30</span>
  864. <span><span class="label-mobile">单位</span>吨</span>
  865. <span><span class="label-mobile">包装规格</span>散水</span>
  866. <span><span class="label-mobile">送货方式</span>送到</span>
  867. <span><span class="label-mobile">备注</span>—</span>
  868. </div>
  869. <div class="product-row">
  870. <span><span class="label-mobile">产品名称</span>盐酸</span>
  871. <span><span class="label-mobile">别名</span>—</span>
  872. <span><span class="label-mobile">品牌</span>山峡</span>
  873. <span><span class="label-mobile">型号/规格</span>31%</span>
  874. <span><span class="label-mobile">数量</span>20</span>
  875. <span><span class="label-mobile">单位</span>吨</span>
  876. <span><span class="label-mobile">包装规格</span>吨桶</span>
  877. <span><span class="label-mobile">送货方式</span>自提</span>
  878. <span><span class="label-mobile">备注</span>注意防腐蚀</span>
  879. </div>
  880. </div>
  881. </div>
  882. <div class="group-block">
  883. <div class="group-block__bar">
  884. <div class="kv">
  885. <span><b>合同编号</b> HT2026080018</span>
  886. <span><b>类型</b> <span class="status-tag">框架合同</span></span>
  887. </div>
  888. <button class="link-btn" type="button">移除</button>
  889. </div>
  890. <div class="product-rows">
  891. <div class="product-row head">
  892. <span>产品名称</span><span>别名</span><span>品牌</span><span>型号/规格</span>
  893. <span>数量</span><span>单位</span><span>包装规格</span><span>送货方式</span><span>备注</span>
  894. </div>
  895. <div class="product-row">
  896. <span><span class="label-mobile">产品名称</span>液碱</span>
  897. <span><span class="label-mobile">别名</span>烧碱</span>
  898. <span><span class="label-mobile">品牌</span>—</span>
  899. <span><span class="label-mobile">型号/规格</span>32%</span>
  900. <span><span class="label-mobile">数量</span>15</span>
  901. <span><span class="label-mobile">单位</span>吨</span>
  902. <span><span class="label-mobile">包装规格</span>散水</span>
  903. <span><span class="label-mobile">送货方式</span>送到</span>
  904. <span><span class="label-mobile">备注</span>—</span>
  905. </div>
  906. </div>
  907. </div>
  908. </div>
  909. </div>
  910. <div class="pick-bar">
  911. <label><input type="radio" name="choice" value="E" /> 选择模式 E</label>
  912. <span class="note">适合:半宽布局,想弱化「表中表」感</span>
  913. </div>
  914. </div>
  915. </section>
  916. <!-- ========== MODE F ========== -->
  917. <section class="mode" id="mode-f">
  918. <div class="mode-head">
  919. <div>
  920. <h2><span class="code">F</span>紧凑文本清单</h2>
  921. <p>合同一行标题,产品用短文本多行展示。最省空间,但字段对齐弱、不适合字段很多时核对。</p>
  922. </div>
  923. <div class="mode-tags">
  924. <span class="tag good">最省空间</span>
  925. <span class="tag warn">不利于核对</span>
  926. </div>
  927. </div>
  928. <div class="mode-body">
  929. <div class="party-mock">
  930. <h3 class="party-mock__title">供方信息</h3>
  931. <div class="select-row">
  932. <div class="fake-field">
  933. <label>供方客户 *</label>
  934. <div class="fake-control">安庆某某化工有限公司</div>
  935. </div>
  936. <div class="fake-field" style="flex: 0.7">
  937. <label>供方合同 *</label>
  938. <button class="fake-btn" type="button">选择合同 · 已选 2 份</button>
  939. </div>
  940. </div>
  941. <div class="compact-list">
  942. <div class="compact-item">
  943. <div class="compact-item__top">
  944. <div>
  945. <b>HT2026080001</b>
  946. <span class="status-tag" style="margin-left: 8px">销售合同</span>
  947. </div>
  948. <button class="link-btn" type="button">移除</button>
  949. </div>
  950. <ol class="compact-item__products">
  951. <li>硫酸 / 别名工业硫酸 / — / 98% / 30吨 / 散水 / 送到</li>
  952. <li>盐酸 / — / 山峡 / 31% / 20吨 / 吨桶 / 自提 / 注意防腐蚀</li>
  953. </ol>
  954. </div>
  955. <div class="compact-item">
  956. <div class="compact-item__top">
  957. <div>
  958. <b>HT2026080018</b>
  959. <span class="status-tag" style="margin-left: 8px">框架合同</span>
  960. </div>
  961. <button class="link-btn" type="button">移除</button>
  962. </div>
  963. <ol class="compact-item__products">
  964. <li>液碱 / 别名烧碱 / — / 32% / 15吨 / 散水 / 送到</li>
  965. </ol>
  966. </div>
  967. </div>
  968. </div>
  969. <div class="pick-bar">
  970. <label><input type="radio" name="choice" value="F" /> 选择模式 F</label>
  971. <span class="note">适合:仅需快速确认选了什么,不在弹窗内细核字段</span>
  972. </div>
  973. </div>
  974. </section>
  975. <div class="footer-choice" id="footer-choice">
  976. 当前勾选:<strong id="choice-label">B · 合同卡片</strong>
  977. —— 请直接回复模式编号(如「用 B」或「用 E」),我按选定方案改正式页面。
  978. </div>
  979. </div>
  980. <script>
  981. const labels = {
  982. A: 'A · 单元格嵌套表',
  983. B: 'B · 合同卡片',
  984. C: 'C · 主表可展开',
  985. D: 'D · 摘要 + 明细表',
  986. E: 'E · 分组清单',
  987. F: 'F · 紧凑文本'
  988. };
  989. const labelEl = document.getElementById('choice-label');
  990. document.querySelectorAll('input[name="choice"]').forEach((el) => {
  991. el.addEventListener('change', () => {
  992. labelEl.textContent = labels[el.value] || el.value;
  993. });
  994. });
  995. </script>
  996. </body>
  997. </html>