fresh-mint-pl-plan-transport-tab-demo.html 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  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>Fresh Mint · 运输计划「运输信息」Tab 美化 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. --bg-page: #f8fafc;
  21. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  22. --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
  23. --radius: 10px;
  24. --warn: #d97706;
  25. --warn-bg: #fffbeb;
  26. --danger: #dc2626;
  27. --info: #0284c7;
  28. --info-bg: #f0f9ff;
  29. }
  30. * { box-sizing: border-box; }
  31. body {
  32. margin: 0;
  33. min-height: 100vh;
  34. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  35. font-size: 14px;
  36. line-height: 1.5;
  37. color: var(--text);
  38. background: var(--bg-page);
  39. }
  40. .demo-page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; }
  41. .demo-head { margin-bottom: 28px; }
  42. .demo-head h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
  43. .demo-head h1 span { color: var(--primary); }
  44. .demo-head p { margin: 0 0 10px; color: var(--text-muted); max-width: 820px; }
  45. .demo-head .meta {
  46. display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  47. }
  48. .pill {
  49. display: inline-flex; align-items: center; gap: 6px;
  50. padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  51. background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
  52. }
  53. .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
  54. .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
  55. .analysis {
  56. display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-bottom: 28px;
  57. }
  58. @media (max-width: 900px) { .analysis { grid-template-columns: 1fr; } }
  59. .panel {
  60. background: var(--surface); border: 1px solid var(--border);
  61. border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
  62. }
  63. .panel h2 {
  64. margin: 0 0 12px; font-size: 15px; font-weight: 600;
  65. padding-left: 10px; border-left: 3px solid var(--primary);
  66. color: var(--primary-dark); line-height: 1.2;
  67. }
  68. .panel ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
  69. .panel li { margin: 6px 0; }
  70. .panel li strong { color: var(--text); font-weight: 600; }
  71. .approach-grid {
  72. display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px;
  73. }
  74. @media (max-width: 980px) { .approach-grid { grid-template-columns: 1fr; } }
  75. .approach {
  76. background: var(--surface); border: 1px solid var(--border);
  77. border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
  78. position: relative;
  79. }
  80. .approach.rec { border-color: #6ee7b7; box-shadow: 0 0 0 2px rgba(16,185,129,.12); }
  81. .approach .badge {
  82. position: absolute; top: 12px; right: 12px;
  83. font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  84. background: var(--primary); color: #fff;
  85. }
  86. .approach h3 { margin: 0 0 8px; font-size: 15px; }
  87. .approach p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
  88. .approach .pros { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-muted); }
  89. .approach .pros li { margin: 4px 0; }
  90. .scheme-tabs {
  91. display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
  92. }
  93. .scheme-tab {
  94. appearance: none; border: 1px solid var(--border); background: #fff;
  95. padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
  96. color: var(--text-muted); cursor: pointer;
  97. }
  98. .scheme-tab.active {
  99. color: var(--primary-dark); border-color: #6ee7b7; background: var(--primary-bg);
  100. }
  101. .scheme-pane { display: none; }
  102. .scheme-pane.active { display: block; }
  103. /* ── 模拟弹窗壳 ── */
  104. .dialog-shell {
  105. background: #fff; border: 1px solid var(--border); border-radius: 12px;
  106. box-shadow: var(--shadow-lg); overflow: hidden; max-width: 1080px;
  107. }
  108. .dialog-head {
  109. display: flex; align-items: center; justify-content: space-between;
  110. padding: 14px 20px; border-bottom: 1px solid #eef2f6;
  111. }
  112. .dialog-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
  113. .dialog-head .x { color: var(--text-muted); font-size: 18px; }
  114. .dialog-tabs {
  115. display: flex; gap: 24px; padding: 0 20px;
  116. border-bottom: 1px solid #eef2f6;
  117. }
  118. .dialog-tabs span {
  119. padding: 12px 0; font-size: 14px; color: var(--text-muted); position: relative;
  120. }
  121. .dialog-tabs .on {
  122. color: var(--primary-dark); font-weight: 600;
  123. }
  124. .dialog-tabs .on::after {
  125. content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  126. height: 2px; background: var(--primary); border-radius: 2px;
  127. }
  128. .dialog-body {
  129. padding: 18px 20px 22px;
  130. max-height: 640px; overflow: auto;
  131. background: #fafbfc;
  132. }
  133. .sec-title {
  134. margin: 0 0 12px; padding-left: 10px; font-size: 14px; font-weight: 600;
  135. color: var(--primary-dark); border-left: 3px solid var(--primary); line-height: 1;
  136. }
  137. .sec { margin-bottom: 18px; }
  138. .sec:last-child { margin-bottom: 0; }
  139. .tag {
  140. display: inline-flex; align-items: center; padding: 2px 8px;
  141. border-radius: 6px; font-size: 12px; font-weight: 500;
  142. }
  143. .tag.ok { background: var(--primary-bg); color: var(--primary-dark); }
  144. .tag.warn { background: var(--warn-bg); color: var(--warn); }
  145. .tag.info { background: var(--info-bg); color: var(--info); }
  146. .tag.muted { background: var(--table-head); color: var(--text-muted); }
  147. .btn {
  148. display: inline-flex; align-items: center; gap: 6px;
  149. height: 32px; padding: 0 12px; border-radius: 8px;
  150. border: 1px solid var(--border); background: #fff;
  151. font-size: 13px; color: var(--text); cursor: pointer;
  152. }
  153. .btn.primary {
  154. background: var(--primary); border-color: var(--primary); color: #fff;
  155. }
  156. .btn.ghost { background: #fff; }
  157. /* ===== 方案 A:旅程主轴 + 摘要卡 + 折叠明细 ===== */
  158. .journey {
  159. display: grid; grid-template-columns: 1.1fr 88px 1.1fr; gap: 0;
  160. background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  161. overflow: hidden; margin-bottom: 14px;
  162. }
  163. .journey-side { padding: 14px 16px; }
  164. .journey-side .kicker {
  165. font-size: 12px; font-weight: 600; color: var(--primary-dark);
  166. margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
  167. }
  168. .journey-side .kicker .dot {
  169. width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
  170. }
  171. .journey-side .place {
  172. font-size: 14px; font-weight: 600; margin-bottom: 6px;
  173. }
  174. .journey-side .meta-line {
  175. font-size: 12px; color: var(--text-muted); margin: 2px 0;
  176. }
  177. .journey-bridge {
  178. display: flex; flex-direction: column; align-items: center; justify-content: center;
  179. gap: 8px; background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
  180. border-left: 1px solid #eef2f6; border-right: 1px solid #eef2f6;
  181. }
  182. .journey-bridge .chip {
  183. font-size: 11px; font-weight: 600; color: var(--primary-dark);
  184. background: #e6f8ed; border: 1px solid #a8e0b8;
  185. padding: 3px 10px; border-radius: 999px;
  186. }
  187. .journey-bridge .arrow { color: var(--primary); font-size: 18px; font-weight: 700; }
  188. .vehicle-bar {
  189. display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  190. padding: 12px 14px; background: #fff; border: 1px solid var(--border);
  191. border-radius: var(--radius); margin-bottom: 14px;
  192. }
  193. .plate {
  194. font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
  195. padding: 4px 10px; border-radius: 6px;
  196. background: #111827; color: #fbbf24; border: 2px solid #fbbf24;
  197. }
  198. .vehicle-bar .v-meta { font-size: 13px; color: var(--text-muted); }
  199. .vehicle-bar .v-meta b { color: var(--text); font-weight: 600; }
  200. .vehicle-bar .spacer { flex: 1; }
  201. .metric-row {
  202. display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
  203. }
  204. @media (max-width: 720px) { .metric-row { grid-template-columns: 1fr 1fr; } }
  205. .metric {
  206. background: #fff; border: 1px solid var(--border); border-radius: 8px;
  207. padding: 12px 14px;
  208. }
  209. .metric .label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
  210. .metric .value { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
  211. .metric .value.money { color: var(--primary-dark); }
  212. .metric .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  213. .link-row {
  214. display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center;
  215. margin-bottom: 8px;
  216. }
  217. .link-row label { font-size: 13px; color: var(--text-muted); }
  218. .link-row input {
  219. height: 36px; border: 1px solid var(--border); border-radius: 8px;
  220. padding: 0 12px; font-size: 13px; color: var(--text); background: #fff; width: 100%;
  221. }
  222. .accordion {
  223. background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  224. overflow: hidden; margin-bottom: 10px;
  225. }
  226. .accordion summary {
  227. list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  228. padding: 12px 14px; user-select: none;
  229. }
  230. .accordion summary::-webkit-details-marker { display: none; }
  231. .accordion summary .title { font-weight: 600; font-size: 14px; flex: 1; }
  232. .accordion summary .chev {
  233. color: var(--text-muted); transition: transform .2s; font-size: 12px;
  234. }
  235. .accordion[open] summary .chev { transform: rotate(90deg); }
  236. .accordion summary:hover { background: #f8fafc; }
  237. .accordion .body { padding: 0 14px 14px; border-top: 1px solid #eef2f6; }
  238. .kv {
  239. display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px;
  240. padding-top: 12px;
  241. }
  242. @media (max-width: 720px) { .kv { grid-template-columns: 1fr 1fr; } }
  243. .kv .item .l { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
  244. .kv .item .v { font-size: 13px; font-weight: 600; word-break: break-word; }
  245. .mini-table {
  246. width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px;
  247. }
  248. .mini-table th {
  249. text-align: left; background: var(--table-head); color: var(--text-muted);
  250. font-weight: 500; padding: 8px 10px; border-bottom: 1px solid #eef2f6;
  251. }
  252. .mini-table td {
  253. padding: 8px 10px; border-bottom: 1px solid #eef2f6; font-weight: 500;
  254. }
  255. .mini-table tr:last-child td { border-bottom: none; }
  256. .feedback-card {
  257. display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
  258. padding: 12px; background: #f8fafc; border-radius: 8px; margin-top: 10px;
  259. }
  260. .feedback-card .big { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
  261. .feedback-card .note { font-size: 13px; color: var(--text); grid-column: 1 / -1; }
  262. .thumbs { display: flex; gap: 8px; }
  263. .thumb {
  264. width: 48px; height: 48px; border-radius: 6px; background: #e2e8f0;
  265. border: 1px solid var(--border);
  266. }
  267. .dibang-card {
  268. margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  269. }
  270. .dibang-card .head {
  271. display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8fafc;
  272. }
  273. .dibang-card .head .name { font-weight: 600; flex: 1; }
  274. .weight-strip {
  275. display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  276. border-top: 1px solid #eef2f6;
  277. }
  278. .weight-strip .cell {
  279. padding: 10px 12px; border-right: 1px solid #eef2f6;
  280. }
  281. .weight-strip .cell:last-child { border-right: none; }
  282. .weight-strip .l { font-size: 11px; color: var(--text-muted); }
  283. .weight-strip .v { font-size: 14px; font-weight: 700; }
  284. .weight-strip .v.hl { color: var(--primary-dark); }
  285. /* ===== 方案 B:左侧锚点导航 ===== */
  286. .split {
  287. display: grid; grid-template-columns: 148px 1fr; gap: 16px;
  288. }
  289. @media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
  290. .toc {
  291. position: sticky; top: 0; align-self: start;
  292. background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
  293. }
  294. .toc a {
  295. display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none;
  296. color: var(--text-muted); font-size: 13px;
  297. }
  298. .toc a:hover, .toc a.on { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
  299. .toc-content .block {
  300. background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  301. padding: 14px; margin-bottom: 12px;
  302. }
  303. /* ===== 方案 C:现状压平(对照组) ===== */
  304. .flat-kv {
  305. display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
  306. border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
  307. }
  308. .flat-kv .cell { padding: 8px 6px; border-right: 1px solid #eef2f6; min-width: 0; }
  309. .flat-kv .cell:last-child { border-right: none; }
  310. .flat-kv .l { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
  311. .flat-kv .v { font-size: 12px; font-weight: 600; margin-top: 2px; word-break: break-all; }
  312. .dense-note {
  313. margin: 8px 0 16px; padding: 10px 12px; background: #fff7ed; border: 1px solid #fed7aa;
  314. border-radius: 8px; font-size: 12px; color: #9a3412;
  315. }
  316. .legend {
  317. margin-top: 20px; padding: 14px 16px; background: #fff;
  318. border: 1px dashed #a7f3d0; border-radius: var(--radius); font-size: 13px; color: var(--text-muted);
  319. }
  320. .legend strong { color: var(--primary-dark); }
  321. </style>
  322. </head>
  323. <body>
  324. <div class="demo-page">
  325. <header class="demo-head">
  326. <h1>运输计划 · <span>运输信息</span> Tab 美化 Demo</h1>
  327. <p>
  328. 针对「查看运输计划」弹窗中运输信息 tab 信息密度过高的问题:当前约 7 个同级区块纵向堆叠,
  329. 含多组 KV 栅格与宽表,扫读成本高。本页给出需求分析与三套展示方案(含推荐方案可交互 Demo)。
  330. </p>
  331. <div class="meta">
  332. <span class="pill">Fresh Mint · #10b981</span>
  333. <span class="pill muted">仅 Demo,未改业务代码</span>
  334. <span class="pill warn">推荐:方案 A 旅程主轴</span>
  335. </div>
  336. </header>
  337. <section class="analysis">
  338. <div class="panel">
  339. <h2>现状与痛点</h2>
  340. <ul>
  341. <li><strong>信息块过多</strong>:运输链接 / 车辆 / 物流节点 / 运费 / 司机回传 / 出库回传 / 地磅,一屏难扫完。</li>
  342. <li><strong>视觉权重平均</strong>:全部同级绿色竖条标题,缺少「先看什么」的叙事。</li>
  343. <li><strong>列表过宽过密</strong>:地磅单表列多、出入库明细表列多,横向压迫感强。</li>
  344. <li><strong>业务本是一条链路</strong>:取货 → 运输 → 送达 → 回传 → 过磅,但 UI 未体现旅程感。</li>
  345. </ul>
  346. </div>
  347. <div class="panel">
  348. <h2>美化目标</h2>
  349. <ul>
  350. <li><strong>先摘要、后明细</strong>:关键指标(车牌、运费、状态)一眼可见。</li>
  351. <li><strong>用业务旅程组织</strong>:取货/送货成对呈现,回传与地磅可折叠。</li>
  352. <li><strong>表变卡、列变指标</strong>:单行回传、过磅重量用卡片/指标条,少用「全宽大表」。</li>
  353. <li><strong>不换色系</strong>:仍遵守 Fresh Mint,不引入多饱和色。</li>
  354. </ul>
  355. </div>
  356. </section>
  357. <div class="approach-grid">
  358. <article class="approach rec">
  359. <span class="badge">推荐</span>
  360. <h3>A. 旅程主轴 + 摘要卡 + 折叠</h3>
  361. <p>顶部车辆条 + 取货/送货旅程卡 + 运费指标条;回传/地磅默认折叠,按需展开。</p>
  362. <ul class="pros">
  363. <li>首屏信息密度下降约 40%</li>
  364. <li>符合「运输」业务心智</li>
  365. <li>落地成本中等,可渐进改造</li>
  366. </ul>
  367. </article>
  368. <article class="approach">
  369. <h3>B. 左侧锚点导航</h3>
  370. <p>保留现有区块内容,左侧 sticky 目录快速跳转;适合坚持「全部展开」的用户。</p>
  371. <ul class="pros">
  372. <li>改动最小</li>
  373. <li>仍偏长,美化感弱</li>
  374. <li>适合信息必须全展的场景</li>
  375. </ul>
  376. </article>
  377. <article class="approach">
  378. <h3>C. 现状压平对照</h3>
  379. <p>当前风格:多段同级标题 + 宽 KV + 宽表,作为「改前」对照,方便评审对比。</p>
  380. <ul class="pros">
  381. <li>信息完整</li>
  382. <li>扫读成本最高</li>
  383. <li>客户吐槽的形态</li>
  384. </ul>
  385. </article>
  386. </div>
  387. <div class="scheme-tabs" role="tablist">
  388. <button class="scheme-tab active" data-tab="a" type="button">方案 A · 推荐</button>
  389. <button class="scheme-tab" data-tab="b" type="button">方案 B · 锚点</button>
  390. <button class="scheme-tab" data-tab="c" type="button">方案 C · 现状对照</button>
  391. </div>
  392. <!-- ════════════ 方案 A ════════════ -->
  393. <div class="scheme-pane active" id="pane-a">
  394. <div class="dialog-shell">
  395. <div class="dialog-head">
  396. <h2>查看运输计划 · YSJH20260720001</h2>
  397. <span class="x">×</span>
  398. </div>
  399. <div class="dialog-tabs">
  400. <span>计划概况</span>
  401. <span class="on">运输信息</span>
  402. <span>合同信息</span>
  403. </div>
  404. <div class="dialog-body">
  405. <!-- 车辆摘要 -->
  406. <div class="vehicle-bar">
  407. <span class="plate">渝A·D1234</span>
  408. <span class="v-meta">车型 <b>半挂牵引车</b></span>
  409. <span class="v-meta">司机 <b>张三</b> 138****8000</span>
  410. <span class="v-meta">承运商 <b>山峡物流有限公司</b></span>
  411. <span class="spacer"></span>
  412. <button class="btn ghost" type="button">查看车辆</button>
  413. </div>
  414. <!-- 物流旅程 -->
  415. <div class="sec">
  416. <h3 class="sec-title">物流旅程</h3>
  417. <div class="journey">
  418. <div class="journey-side">
  419. <div class="kicker"><span class="dot"></span>取货</div>
  420. <div class="place">重庆市江北区港城工业园 A 区</div>
  421. <div class="meta-line">联系人:李四 · 139****6611</div>
  422. <div class="meta-line">取货时间:2026-07-21 09:00</div>
  423. <div class="meta-line">注意:需带危化品通行证</div>
  424. </div>
  425. <div class="journey-bridge">
  426. <span class="chip">运输中</span>
  427. <span class="arrow">→</span>
  428. <span style="font-size:11px;color:var(--text-muted)">286 km</span>
  429. </div>
  430. <div class="journey-side">
  431. <div class="kicker"><span class="dot" style="background:#0284c7"></span>送达</div>
  432. <div class="place">成都市青白江区物流大道 88 号</div>
  433. <div class="meta-line">联系人:王五 · 137****2299</div>
  434. <div class="meta-line">送达时间:2026-07-21 18:30</div>
  435. <div class="meta-line">注意:卸货需提前预约</div>
  436. </div>
  437. </div>
  438. </div>
  439. <!-- 运费指标 -->
  440. <div class="sec">
  441. <h3 class="sec-title">运费摘要</h3>
  442. <div class="metric-row">
  443. <div class="metric">
  444. <div class="label">运费金额</div>
  445. <div class="value money">¥ 4,860.00</div>
  446. <div class="sub">按重量 · 已开票</div>
  447. </div>
  448. <div class="metric">
  449. <div class="label">运输量</div>
  450. <div class="value">32.400 <span style="font-size:12px;font-weight:500;color:var(--text-muted)">吨</span></div>
  451. <div class="sub">单价 ¥150 / 吨</div>
  452. </div>
  453. <div class="metric">
  454. <div class="label">运输公里数</div>
  455. <div class="value">286</div>
  456. <div class="sub">km</div>
  457. </div>
  458. <div class="metric">
  459. <div class="label">费用状态</div>
  460. <div class="value" style="font-size:15px;padding-top:4px"><span class="tag ok">有运输费用</span></div>
  461. <div class="sub">计算方式:按重量</div>
  462. </div>
  463. </div>
  464. </div>
  465. <!-- 链接 -->
  466. <div class="sec">
  467. <h3 class="sec-title">运输链接</h3>
  468. <div class="link-row">
  469. <label>司机链接</label>
  470. <input readonly value="https://example.com/m/driver/abc123" />
  471. <button class="btn" type="button">复制</button>
  472. </div>
  473. <div class="link-row">
  474. <label>现场链接</label>
  475. <input readonly value="https://example.com/m/site/xyz789" />
  476. <button class="btn" type="button">复制</button>
  477. </div>
  478. </div>
  479. <!-- 折叠:司机回传 -->
  480. <details class="accordion" open>
  481. <summary>
  482. <span class="tag ok">已回传</span>
  483. <span class="title">司机回传信息</span>
  484. <span class="tag muted">2026-07-21 19:12</span>
  485. <span class="chev">▶</span>
  486. </summary>
  487. <div class="body">
  488. <div class="feedback-card">
  489. <div>
  490. <div class="label" style="font-size:12px;color:var(--text-muted)">回传数量</div>
  491. <div class="big">32.400 吨</div>
  492. </div>
  493. <button class="btn" type="button">编辑</button>
  494. <div class="note">备注:车辆已到站,卸货顺利,无异常。</div>
  495. <div class="thumbs">
  496. <div class="thumb" title="附件1"></div>
  497. <div class="thumb" title="附件2"></div>
  498. </div>
  499. </div>
  500. </div>
  501. </details>
  502. <!-- 折叠:出库回传 -->
  503. <details class="accordion" open>
  504. <summary>
  505. <span class="tag info">出库单</span>
  506. <span class="title">出库单回传</span>
  507. <span class="tag ok">已确认</span>
  508. <span class="chev">▶</span>
  509. </summary>
  510. <div class="body">
  511. <div style="display:flex;justify-content:flex-end;gap:8px;padding-top:10px">
  512. <button class="btn" type="button">复制现场链接</button>
  513. <button class="btn" type="button">编辑</button>
  514. </div>
  515. <div class="kv">
  516. <div class="item"><div class="l">单据号</div><div class="v">CK20260721008</div></div>
  517. <div class="item"><div class="l">业务类型</div><div class="v"><span class="tag info">出库</span></div></div>
  518. <div class="item"><div class="l">往来单位</div><div class="v">成都某某实业</div></div>
  519. <div class="item"><div class="l">计划合计</div><div class="v">32.400 吨</div></div>
  520. <div class="item"><div class="l">实际合计</div><div class="v">32.180 吨</div></div>
  521. <div class="item"><div class="l">现场备注</div><div class="v">磅差在允许范围</div></div>
  522. </div>
  523. <table class="mini-table">
  524. <thead>
  525. <tr>
  526. <th>产品</th>
  527. <th>规格</th>
  528. <th>计划</th>
  529. <th>实际</th>
  530. <th>单位</th>
  531. </tr>
  532. </thead>
  533. <tbody>
  534. <tr>
  535. <td>盐酸(31%)</td>
  536. <td>工业级</td>
  537. <td>20.000</td>
  538. <td>19.860</td>
  539. <td>吨</td>
  540. </tr>
  541. <tr>
  542. <td>烧碱(液碱)</td>
  543. <td>32%</td>
  544. <td>12.400</td>
  545. <td>12.320</td>
  546. <td>吨</td>
  547. </tr>
  548. </tbody>
  549. </table>
  550. </div>
  551. </details>
  552. <!-- 折叠:地磅 -->
  553. <details class="accordion">
  554. <summary>
  555. <span class="tag warn">过磅</span>
  556. <span class="title">地磅单信息</span>
  557. <span class="tag muted">1 条关联</span>
  558. <span class="chev">▶</span>
  559. </summary>
  560. <div class="body">
  561. <div class="dibang-card">
  562. <div class="head">
  563. <span class="name">盐酸(31%)</span>
  564. <span class="tag ok">已完成</span>
  565. <span class="tag muted">RK20260721015</span>
  566. </div>
  567. <div class="kv" style="padding:12px">
  568. <div class="item"><div class="l">业务类型</div><div class="v">入库</div></div>
  569. <div class="item"><div class="l">往来单位</div><div class="v">成都某某实业</div></div>
  570. <div class="item"><div class="l">车牌号</div><div class="v">渝A·D1234</div></div>
  571. <div class="item"><div class="l">产品</div><div class="v">盐酸(31%)</div></div>
  572. <div class="item"><div class="l">数量</div><div class="v">19.860 吨</div></div>
  573. <div class="item"><div class="l">出入库单号</div><div class="v">RK20260721015</div></div>
  574. </div>
  575. <div class="weight-strip">
  576. <div class="cell"><div class="l">毛重</div><div class="v">48,620 kg</div></div>
  577. <div class="cell"><div class="l">皮重</div><div class="v">28,760 kg</div></div>
  578. <div class="cell"><div class="l">扣杂</div><div class="v">0 kg</div></div>
  579. <div class="cell"><div class="l">净重</div><div class="v hl">19,860 kg</div></div>
  580. </div>
  581. </div>
  582. </div>
  583. </details>
  584. </div>
  585. </div>
  586. </div>
  587. <!-- ════════════ 方案 B ════════════ -->
  588. <div class="scheme-pane" id="pane-b">
  589. <div class="dialog-shell">
  590. <div class="dialog-head">
  591. <h2>查看运输计划 · YSJH20260720001</h2>
  592. <span class="x">×</span>
  593. </div>
  594. <div class="dialog-tabs">
  595. <span>计划概况</span>
  596. <span class="on">运输信息</span>
  597. <span>合同信息</span>
  598. </div>
  599. <div class="dialog-body">
  600. <div class="split">
  601. <nav class="toc">
  602. <a class="on" href="#b-link">运输链接</a>
  603. <a href="#b-vehicle">车辆信息</a>
  604. <a href="#b-node">物流节点</a>
  605. <a href="#b-freight">运费信息</a>
  606. <a href="#b-driver">司机回传</a>
  607. <a href="#b-io">出库单回传</a>
  608. <a href="#b-db">地磅单</a>
  609. </nav>
  610. <div class="toc-content">
  611. <div class="block" id="b-link">
  612. <h3 class="sec-title">运输链接</h3>
  613. <div class="link-row">
  614. <label>司机链接</label>
  615. <input readonly value="https://example.com/m/driver/abc123" />
  616. <button class="btn" type="button">复制</button>
  617. </div>
  618. </div>
  619. <div class="block" id="b-vehicle">
  620. <h3 class="sec-title">车辆信息</h3>
  621. <div class="vehicle-bar" style="margin:0;border:none;padding:0">
  622. <span class="plate">渝A·D1234</span>
  623. <span class="v-meta">司机 <b>张三</b></span>
  624. <span class="v-meta">承运商 <b>山峡物流</b></span>
  625. </div>
  626. </div>
  627. <div class="block" id="b-node">
  628. <h3 class="sec-title">物流节点</h3>
  629. <div class="journey" style="margin:0">
  630. <div class="journey-side">
  631. <div class="kicker"><span class="dot"></span>取货</div>
  632. <div class="place">江北区港城工业园</div>
  633. <div class="meta-line">2026-07-21 09:00</div>
  634. </div>
  635. <div class="journey-bridge"><span class="chip">运输</span><span class="arrow">→</span></div>
  636. <div class="journey-side">
  637. <div class="kicker"><span class="dot" style="background:#0284c7"></span>送达</div>
  638. <div class="place">青白江区物流大道</div>
  639. <div class="meta-line">2026-07-21 18:30</div>
  640. </div>
  641. </div>
  642. </div>
  643. <div class="block" id="b-freight">
  644. <h3 class="sec-title">运费信息</h3>
  645. <div class="metric-row" style="margin:0">
  646. <div class="metric"><div class="label">金额</div><div class="value money">¥4,860</div></div>
  647. <div class="metric"><div class="label">运量</div><div class="value">32.4t</div></div>
  648. <div class="metric"><div class="label">里程</div><div class="value">286</div></div>
  649. <div class="metric"><div class="label">开票</div><div class="value" style="font-size:14px">是</div></div>
  650. </div>
  651. </div>
  652. <div class="block" id="b-driver">
  653. <h3 class="sec-title">司机回传</h3>
  654. <p style="margin:0;color:var(--text-muted);font-size:13px">内容同方案 A 卡片,此处略。</p>
  655. </div>
  656. <div class="block" id="b-io">
  657. <h3 class="sec-title">出库单回传</h3>
  658. <p style="margin:0;color:var(--text-muted);font-size:13px">明细表可保留,配合锚点跳转。</p>
  659. </div>
  660. <div class="block" id="b-db">
  661. <h3 class="sec-title">地磅单信息</h3>
  662. <p style="margin:0;color:var(--text-muted);font-size:13px">过磅指标条展示,减少宽表。</p>
  663. </div>
  664. </div>
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. <!-- ════════════ 方案 C ════════════ -->
  670. <div class="scheme-pane" id="pane-c">
  671. <div class="dialog-shell">
  672. <div class="dialog-head">
  673. <h2>查看运输计划 · YSJH20260720001</h2>
  674. <span class="x">×</span>
  675. </div>
  676. <div class="dialog-tabs">
  677. <span>计划概况</span>
  678. <span class="on">运输信息</span>
  679. <span>合同信息</span>
  680. </div>
  681. <div class="dialog-body" style="background:#fff">
  682. <div class="dense-note">对照:以下为当前「同级标题 + 宽 KV / 宽表」的信息压迫感示意(非最终稿)。</div>
  683. <div class="sec">
  684. <h3 class="sec-title">运输链接</h3>
  685. <div class="link-row">
  686. <label>司机链接</label>
  687. <input readonly value="https://example.com/m/driver/abc123" />
  688. <button class="btn" type="button">复制链接</button>
  689. </div>
  690. </div>
  691. <div class="sec">
  692. <h3 class="sec-title">车辆信息</h3>
  693. <p style="margin:0;color:var(--text-muted)">车辆条组件(现状)</p>
  694. </div>
  695. <div class="sec">
  696. <h3 class="sec-title">物流节点</h3>
  697. <p style="margin:0 0 8px;color:var(--text-muted);font-size:12px">左取货 KV 四列 · 右送货 KV 四列</p>
  698. </div>
  699. <div class="sec">
  700. <h3 class="sec-title">运费信息</h3>
  701. <div class="flat-kv">
  702. <div class="cell"><div class="l">是否有运输费用</div><div class="v">是</div></div>
  703. <div class="cell"><div class="l">运输公里数</div><div class="v">286</div></div>
  704. <div class="cell"><div class="l">运费计算方式</div><div class="v">按重量</div></div>
  705. <div class="cell"><div class="l">运输量(吨)</div><div class="v">32.4</div></div>
  706. <div class="cell"><div class="l">运输单价(元/吨)</div><div class="v">150.00</div></div>
  707. <div class="cell"><div class="l">运费金额(元)</div><div class="v">4860.00</div></div>
  708. <div class="cell"><div class="l">是否开票</div><div class="v">是</div></div>
  709. </div>
  710. </div>
  711. <div class="sec">
  712. <h3 class="sec-title">司机回传信息</h3>
  713. <p style="margin:0;color:var(--text-muted);font-size:12px">宽表格:序号 / 时间 / 数量 / 备注 / 附件…</p>
  714. </div>
  715. <div class="sec">
  716. <h3 class="sec-title">出库单回传</h3>
  717. <p style="margin:0;color:var(--text-muted);font-size:12px">KV 五行 + 产品明细宽表 + 备注附件</p>
  718. </div>
  719. <div class="sec">
  720. <h3 class="sec-title">地磅单信息</h3>
  721. <p style="margin:0;color:var(--text-muted);font-size:12px">基础 KV 六列 + 地磅宽表(毛重/皮重/净重/时间…十余列)</p>
  722. </div>
  723. </div>
  724. </div>
  725. </div>
  726. <div class="legend">
  727. <strong>评审建议:</strong>
  728. 优先确认是否采用方案 A(旅程主轴 + 指标卡 + 折叠明细)。
  729. 若业务要求「运输信息必须全部默认展开、不可折叠」,可改用方案 B,或 A 的折叠默认全部 <code>open</code>。
  730. 确认后我再按选定方案落到 <code>pl-plan-view-tabs</code> 实现。
  731. </div>
  732. </div>
  733. <script>
  734. document.querySelectorAll('.scheme-tab').forEach((btn) => {
  735. btn.addEventListener('click', () => {
  736. document.querySelectorAll('.scheme-tab').forEach((b) => b.classList.remove('active'))
  737. document.querySelectorAll('.scheme-pane').forEach((p) => p.classList.remove('active'))
  738. btn.classList.add('active')
  739. document.getElementById('pane-' + btn.dataset.tab).classList.add('active')
  740. })
  741. })
  742. </script>
  743. </body>
  744. </html>