| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780 |
- <!doctype html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Fresh Mint · 运输计划「运输信息」Tab 美化 Demo</title>
- <link rel="preconnect" href="https://fonts.googleapis.com" />
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
- <style>
- :root {
- --primary: #10b981;
- --primary-dark: #059669;
- --primary-bg: #ecfdf5;
- --text: #1e293b;
- --text-muted: #64748b;
- --border: #d9e8e2;
- --surface: #ffffff;
- --table-head: #f8fafc;
- --bg-page: #f8fafc;
- --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
- --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);
- --radius: 10px;
- --warn: #d97706;
- --warn-bg: #fffbeb;
- --danger: #dc2626;
- --info: #0284c7;
- --info-bg: #f0f9ff;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- min-height: 100vh;
- font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
- font-size: 14px;
- line-height: 1.5;
- color: var(--text);
- background: var(--bg-page);
- }
- .demo-page { max-width: 1180px; margin: 0 auto; padding: 28px 24px 80px; }
- .demo-head { margin-bottom: 28px; }
- .demo-head h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
- .demo-head h1 span { color: var(--primary); }
- .demo-head p { margin: 0 0 10px; color: var(--text-muted); max-width: 820px; }
- .demo-head .meta {
- display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
- }
- .pill {
- display: inline-flex; align-items: center; gap: 6px;
- padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
- background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
- }
- .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
- .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
- .analysis {
- display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-bottom: 28px;
- }
- @media (max-width: 900px) { .analysis { grid-template-columns: 1fr; } }
- .panel {
- background: var(--surface); border: 1px solid var(--border);
- border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
- }
- .panel h2 {
- margin: 0 0 12px; font-size: 15px; font-weight: 600;
- padding-left: 10px; border-left: 3px solid var(--primary);
- color: var(--primary-dark); line-height: 1.2;
- }
- .panel ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
- .panel li { margin: 6px 0; }
- .panel li strong { color: var(--text); font-weight: 600; }
- .approach-grid {
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px;
- }
- @media (max-width: 980px) { .approach-grid { grid-template-columns: 1fr; } }
- .approach {
- background: var(--surface); border: 1px solid var(--border);
- border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
- position: relative;
- }
- .approach.rec { border-color: #6ee7b7; box-shadow: 0 0 0 2px rgba(16,185,129,.12); }
- .approach .badge {
- position: absolute; top: 12px; right: 12px;
- font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
- background: var(--primary); color: #fff;
- }
- .approach h3 { margin: 0 0 8px; font-size: 15px; }
- .approach p { margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
- .approach .pros { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text-muted); }
- .approach .pros li { margin: 4px 0; }
- .scheme-tabs {
- display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
- }
- .scheme-tab {
- appearance: none; border: 1px solid var(--border); background: #fff;
- padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
- color: var(--text-muted); cursor: pointer;
- }
- .scheme-tab.active {
- color: var(--primary-dark); border-color: #6ee7b7; background: var(--primary-bg);
- }
- .scheme-pane { display: none; }
- .scheme-pane.active { display: block; }
- /* ── 模拟弹窗壳 ── */
- .dialog-shell {
- background: #fff; border: 1px solid var(--border); border-radius: 12px;
- box-shadow: var(--shadow-lg); overflow: hidden; max-width: 1080px;
- }
- .dialog-head {
- display: flex; align-items: center; justify-content: space-between;
- padding: 14px 20px; border-bottom: 1px solid #eef2f6;
- }
- .dialog-head h2 { margin: 0; font-size: 16px; font-weight: 600; }
- .dialog-head .x { color: var(--text-muted); font-size: 18px; }
- .dialog-tabs {
- display: flex; gap: 24px; padding: 0 20px;
- border-bottom: 1px solid #eef2f6;
- }
- .dialog-tabs span {
- padding: 12px 0; font-size: 14px; color: var(--text-muted); position: relative;
- }
- .dialog-tabs .on {
- color: var(--primary-dark); font-weight: 600;
- }
- .dialog-tabs .on::after {
- content: ""; position: absolute; left: 0; right: 0; bottom: 0;
- height: 2px; background: var(--primary); border-radius: 2px;
- }
- .dialog-body {
- padding: 18px 20px 22px;
- max-height: 640px; overflow: auto;
- background: #fafbfc;
- }
- .sec-title {
- margin: 0 0 12px; padding-left: 10px; font-size: 14px; font-weight: 600;
- color: var(--primary-dark); border-left: 3px solid var(--primary); line-height: 1;
- }
- .sec { margin-bottom: 18px; }
- .sec:last-child { margin-bottom: 0; }
- .tag {
- display: inline-flex; align-items: center; padding: 2px 8px;
- border-radius: 6px; font-size: 12px; font-weight: 500;
- }
- .tag.ok { background: var(--primary-bg); color: var(--primary-dark); }
- .tag.warn { background: var(--warn-bg); color: var(--warn); }
- .tag.info { background: var(--info-bg); color: var(--info); }
- .tag.muted { background: var(--table-head); color: var(--text-muted); }
- .btn {
- display: inline-flex; align-items: center; gap: 6px;
- height: 32px; padding: 0 12px; border-radius: 8px;
- border: 1px solid var(--border); background: #fff;
- font-size: 13px; color: var(--text); cursor: pointer;
- }
- .btn.primary {
- background: var(--primary); border-color: var(--primary); color: #fff;
- }
- .btn.ghost { background: #fff; }
- /* ===== 方案 A:旅程主轴 + 摘要卡 + 折叠明细 ===== */
- .journey {
- display: grid; grid-template-columns: 1.1fr 88px 1.1fr; gap: 0;
- background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
- overflow: hidden; margin-bottom: 14px;
- }
- .journey-side { padding: 14px 16px; }
- .journey-side .kicker {
- font-size: 12px; font-weight: 600; color: var(--primary-dark);
- margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
- }
- .journey-side .kicker .dot {
- width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
- }
- .journey-side .place {
- font-size: 14px; font-weight: 600; margin-bottom: 6px;
- }
- .journey-side .meta-line {
- font-size: 12px; color: var(--text-muted); margin: 2px 0;
- }
- .journey-bridge {
- display: flex; flex-direction: column; align-items: center; justify-content: center;
- gap: 8px; background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
- border-left: 1px solid #eef2f6; border-right: 1px solid #eef2f6;
- }
- .journey-bridge .chip {
- font-size: 11px; font-weight: 600; color: var(--primary-dark);
- background: #e6f8ed; border: 1px solid #a8e0b8;
- padding: 3px 10px; border-radius: 999px;
- }
- .journey-bridge .arrow { color: var(--primary); font-size: 18px; font-weight: 700; }
- .vehicle-bar {
- display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
- padding: 12px 14px; background: #fff; border: 1px solid var(--border);
- border-radius: var(--radius); margin-bottom: 14px;
- }
- .plate {
- font-size: 16px; font-weight: 700; letter-spacing: 0.04em;
- padding: 4px 10px; border-radius: 6px;
- background: #111827; color: #fbbf24; border: 2px solid #fbbf24;
- }
- .vehicle-bar .v-meta { font-size: 13px; color: var(--text-muted); }
- .vehicle-bar .v-meta b { color: var(--text); font-weight: 600; }
- .vehicle-bar .spacer { flex: 1; }
- .metric-row {
- display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px;
- }
- @media (max-width: 720px) { .metric-row { grid-template-columns: 1fr 1fr; } }
- .metric {
- background: #fff; border: 1px solid var(--border); border-radius: 8px;
- padding: 12px 14px;
- }
- .metric .label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
- .metric .value { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
- .metric .value.money { color: var(--primary-dark); }
- .metric .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
- .link-row {
- display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center;
- margin-bottom: 8px;
- }
- .link-row label { font-size: 13px; color: var(--text-muted); }
- .link-row input {
- height: 36px; border: 1px solid var(--border); border-radius: 8px;
- padding: 0 12px; font-size: 13px; color: var(--text); background: #fff; width: 100%;
- }
- .accordion {
- background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
- overflow: hidden; margin-bottom: 10px;
- }
- .accordion summary {
- list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
- padding: 12px 14px; user-select: none;
- }
- .accordion summary::-webkit-details-marker { display: none; }
- .accordion summary .title { font-weight: 600; font-size: 14px; flex: 1; }
- .accordion summary .chev {
- color: var(--text-muted); transition: transform .2s; font-size: 12px;
- }
- .accordion[open] summary .chev { transform: rotate(90deg); }
- .accordion summary:hover { background: #f8fafc; }
- .accordion .body { padding: 0 14px 14px; border-top: 1px solid #eef2f6; }
- .kv {
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px;
- padding-top: 12px;
- }
- @media (max-width: 720px) { .kv { grid-template-columns: 1fr 1fr; } }
- .kv .item .l { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
- .kv .item .v { font-size: 13px; font-weight: 600; word-break: break-word; }
- .mini-table {
- width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px;
- }
- .mini-table th {
- text-align: left; background: var(--table-head); color: var(--text-muted);
- font-weight: 500; padding: 8px 10px; border-bottom: 1px solid #eef2f6;
- }
- .mini-table td {
- padding: 8px 10px; border-bottom: 1px solid #eef2f6; font-weight: 500;
- }
- .mini-table tr:last-child td { border-bottom: none; }
- .feedback-card {
- display: grid; grid-template-columns: 1fr auto; gap: 8px 16px;
- padding: 12px; background: #f8fafc; border-radius: 8px; margin-top: 10px;
- }
- .feedback-card .big { font-size: 20px; font-weight: 700; color: var(--primary-dark); }
- .feedback-card .note { font-size: 13px; color: var(--text); grid-column: 1 / -1; }
- .thumbs { display: flex; gap: 8px; }
- .thumb {
- width: 48px; height: 48px; border-radius: 6px; background: #e2e8f0;
- border: 1px solid var(--border);
- }
- .dibang-card {
- margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
- }
- .dibang-card .head {
- display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f8fafc;
- }
- .dibang-card .head .name { font-weight: 600; flex: 1; }
- .weight-strip {
- display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
- border-top: 1px solid #eef2f6;
- }
- .weight-strip .cell {
- padding: 10px 12px; border-right: 1px solid #eef2f6;
- }
- .weight-strip .cell:last-child { border-right: none; }
- .weight-strip .l { font-size: 11px; color: var(--text-muted); }
- .weight-strip .v { font-size: 14px; font-weight: 700; }
- .weight-strip .v.hl { color: var(--primary-dark); }
- /* ===== 方案 B:左侧锚点导航 ===== */
- .split {
- display: grid; grid-template-columns: 148px 1fr; gap: 16px;
- }
- @media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
- .toc {
- position: sticky; top: 0; align-self: start;
- background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px;
- }
- .toc a {
- display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none;
- color: var(--text-muted); font-size: 13px;
- }
- .toc a:hover, .toc a.on { background: var(--primary-bg); color: var(--primary-dark); font-weight: 600; }
- .toc-content .block {
- background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
- padding: 14px; margin-bottom: 12px;
- }
- /* ===== 方案 C:现状压平(对照组) ===== */
- .flat-kv {
- display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
- border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff;
- }
- .flat-kv .cell { padding: 8px 6px; border-right: 1px solid #eef2f6; min-width: 0; }
- .flat-kv .cell:last-child { border-right: none; }
- .flat-kv .l { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
- .flat-kv .v { font-size: 12px; font-weight: 600; margin-top: 2px; word-break: break-all; }
- .dense-note {
- margin: 8px 0 16px; padding: 10px 12px; background: #fff7ed; border: 1px solid #fed7aa;
- border-radius: 8px; font-size: 12px; color: #9a3412;
- }
- .legend {
- margin-top: 20px; padding: 14px 16px; background: #fff;
- border: 1px dashed #a7f3d0; border-radius: var(--radius); font-size: 13px; color: var(--text-muted);
- }
- .legend strong { color: var(--primary-dark); }
- </style>
- </head>
- <body>
- <div class="demo-page">
- <header class="demo-head">
- <h1>运输计划 · <span>运输信息</span> Tab 美化 Demo</h1>
- <p>
- 针对「查看运输计划」弹窗中运输信息 tab 信息密度过高的问题:当前约 7 个同级区块纵向堆叠,
- 含多组 KV 栅格与宽表,扫读成本高。本页给出需求分析与三套展示方案(含推荐方案可交互 Demo)。
- </p>
- <div class="meta">
- <span class="pill">Fresh Mint · #10b981</span>
- <span class="pill muted">仅 Demo,未改业务代码</span>
- <span class="pill warn">推荐:方案 A 旅程主轴</span>
- </div>
- </header>
- <section class="analysis">
- <div class="panel">
- <h2>现状与痛点</h2>
- <ul>
- <li><strong>信息块过多</strong>:运输链接 / 车辆 / 物流节点 / 运费 / 司机回传 / 出库回传 / 地磅,一屏难扫完。</li>
- <li><strong>视觉权重平均</strong>:全部同级绿色竖条标题,缺少「先看什么」的叙事。</li>
- <li><strong>列表过宽过密</strong>:地磅单表列多、出入库明细表列多,横向压迫感强。</li>
- <li><strong>业务本是一条链路</strong>:取货 → 运输 → 送达 → 回传 → 过磅,但 UI 未体现旅程感。</li>
- </ul>
- </div>
- <div class="panel">
- <h2>美化目标</h2>
- <ul>
- <li><strong>先摘要、后明细</strong>:关键指标(车牌、运费、状态)一眼可见。</li>
- <li><strong>用业务旅程组织</strong>:取货/送货成对呈现,回传与地磅可折叠。</li>
- <li><strong>表变卡、列变指标</strong>:单行回传、过磅重量用卡片/指标条,少用「全宽大表」。</li>
- <li><strong>不换色系</strong>:仍遵守 Fresh Mint,不引入多饱和色。</li>
- </ul>
- </div>
- </section>
- <div class="approach-grid">
- <article class="approach rec">
- <span class="badge">推荐</span>
- <h3>A. 旅程主轴 + 摘要卡 + 折叠</h3>
- <p>顶部车辆条 + 取货/送货旅程卡 + 运费指标条;回传/地磅默认折叠,按需展开。</p>
- <ul class="pros">
- <li>首屏信息密度下降约 40%</li>
- <li>符合「运输」业务心智</li>
- <li>落地成本中等,可渐进改造</li>
- </ul>
- </article>
- <article class="approach">
- <h3>B. 左侧锚点导航</h3>
- <p>保留现有区块内容,左侧 sticky 目录快速跳转;适合坚持「全部展开」的用户。</p>
- <ul class="pros">
- <li>改动最小</li>
- <li>仍偏长,美化感弱</li>
- <li>适合信息必须全展的场景</li>
- </ul>
- </article>
- <article class="approach">
- <h3>C. 现状压平对照</h3>
- <p>当前风格:多段同级标题 + 宽 KV + 宽表,作为「改前」对照,方便评审对比。</p>
- <ul class="pros">
- <li>信息完整</li>
- <li>扫读成本最高</li>
- <li>客户吐槽的形态</li>
- </ul>
- </article>
- </div>
- <div class="scheme-tabs" role="tablist">
- <button class="scheme-tab active" data-tab="a" type="button">方案 A · 推荐</button>
- <button class="scheme-tab" data-tab="b" type="button">方案 B · 锚点</button>
- <button class="scheme-tab" data-tab="c" type="button">方案 C · 现状对照</button>
- </div>
- <!-- ════════════ 方案 A ════════════ -->
- <div class="scheme-pane active" id="pane-a">
- <div class="dialog-shell">
- <div class="dialog-head">
- <h2>查看运输计划 · YSJH20260720001</h2>
- <span class="x">×</span>
- </div>
- <div class="dialog-tabs">
- <span>计划概况</span>
- <span class="on">运输信息</span>
- <span>合同信息</span>
- </div>
- <div class="dialog-body">
- <!-- 车辆摘要 -->
- <div class="vehicle-bar">
- <span class="plate">渝A·D1234</span>
- <span class="v-meta">车型 <b>半挂牵引车</b></span>
- <span class="v-meta">司机 <b>张三</b> 138****8000</span>
- <span class="v-meta">承运商 <b>山峡物流有限公司</b></span>
- <span class="spacer"></span>
- <button class="btn ghost" type="button">查看车辆</button>
- </div>
- <!-- 物流旅程 -->
- <div class="sec">
- <h3 class="sec-title">物流旅程</h3>
- <div class="journey">
- <div class="journey-side">
- <div class="kicker"><span class="dot"></span>取货</div>
- <div class="place">重庆市江北区港城工业园 A 区</div>
- <div class="meta-line">联系人:李四 · 139****6611</div>
- <div class="meta-line">取货时间:2026-07-21 09:00</div>
- <div class="meta-line">注意:需带危化品通行证</div>
- </div>
- <div class="journey-bridge">
- <span class="chip">运输中</span>
- <span class="arrow">→</span>
- <span style="font-size:11px;color:var(--text-muted)">286 km</span>
- </div>
- <div class="journey-side">
- <div class="kicker"><span class="dot" style="background:#0284c7"></span>送达</div>
- <div class="place">成都市青白江区物流大道 88 号</div>
- <div class="meta-line">联系人:王五 · 137****2299</div>
- <div class="meta-line">送达时间:2026-07-21 18:30</div>
- <div class="meta-line">注意:卸货需提前预约</div>
- </div>
- </div>
- </div>
- <!-- 运费指标 -->
- <div class="sec">
- <h3 class="sec-title">运费摘要</h3>
- <div class="metric-row">
- <div class="metric">
- <div class="label">运费金额</div>
- <div class="value money">¥ 4,860.00</div>
- <div class="sub">按重量 · 已开票</div>
- </div>
- <div class="metric">
- <div class="label">运输量</div>
- <div class="value">32.400 <span style="font-size:12px;font-weight:500;color:var(--text-muted)">吨</span></div>
- <div class="sub">单价 ¥150 / 吨</div>
- </div>
- <div class="metric">
- <div class="label">运输公里数</div>
- <div class="value">286</div>
- <div class="sub">km</div>
- </div>
- <div class="metric">
- <div class="label">费用状态</div>
- <div class="value" style="font-size:15px;padding-top:4px"><span class="tag ok">有运输费用</span></div>
- <div class="sub">计算方式:按重量</div>
- </div>
- </div>
- </div>
- <!-- 链接 -->
- <div class="sec">
- <h3 class="sec-title">运输链接</h3>
- <div class="link-row">
- <label>司机链接</label>
- <input readonly value="https://example.com/m/driver/abc123" />
- <button class="btn" type="button">复制</button>
- </div>
- <div class="link-row">
- <label>现场链接</label>
- <input readonly value="https://example.com/m/site/xyz789" />
- <button class="btn" type="button">复制</button>
- </div>
- </div>
- <!-- 折叠:司机回传 -->
- <details class="accordion" open>
- <summary>
- <span class="tag ok">已回传</span>
- <span class="title">司机回传信息</span>
- <span class="tag muted">2026-07-21 19:12</span>
- <span class="chev">▶</span>
- </summary>
- <div class="body">
- <div class="feedback-card">
- <div>
- <div class="label" style="font-size:12px;color:var(--text-muted)">回传数量</div>
- <div class="big">32.400 吨</div>
- </div>
- <button class="btn" type="button">编辑</button>
- <div class="note">备注:车辆已到站,卸货顺利,无异常。</div>
- <div class="thumbs">
- <div class="thumb" title="附件1"></div>
- <div class="thumb" title="附件2"></div>
- </div>
- </div>
- </div>
- </details>
- <!-- 折叠:出库回传 -->
- <details class="accordion" open>
- <summary>
- <span class="tag info">出库单</span>
- <span class="title">出库单回传</span>
- <span class="tag ok">已确认</span>
- <span class="chev">▶</span>
- </summary>
- <div class="body">
- <div style="display:flex;justify-content:flex-end;gap:8px;padding-top:10px">
- <button class="btn" type="button">复制现场链接</button>
- <button class="btn" type="button">编辑</button>
- </div>
- <div class="kv">
- <div class="item"><div class="l">单据号</div><div class="v">CK20260721008</div></div>
- <div class="item"><div class="l">业务类型</div><div class="v"><span class="tag info">出库</span></div></div>
- <div class="item"><div class="l">往来单位</div><div class="v">成都某某实业</div></div>
- <div class="item"><div class="l">计划合计</div><div class="v">32.400 吨</div></div>
- <div class="item"><div class="l">实际合计</div><div class="v">32.180 吨</div></div>
- <div class="item"><div class="l">现场备注</div><div class="v">磅差在允许范围</div></div>
- </div>
- <table class="mini-table">
- <thead>
- <tr>
- <th>产品</th>
- <th>规格</th>
- <th>计划</th>
- <th>实际</th>
- <th>单位</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>盐酸(31%)</td>
- <td>工业级</td>
- <td>20.000</td>
- <td>19.860</td>
- <td>吨</td>
- </tr>
- <tr>
- <td>烧碱(液碱)</td>
- <td>32%</td>
- <td>12.400</td>
- <td>12.320</td>
- <td>吨</td>
- </tr>
- </tbody>
- </table>
- </div>
- </details>
- <!-- 折叠:地磅 -->
- <details class="accordion">
- <summary>
- <span class="tag warn">过磅</span>
- <span class="title">地磅单信息</span>
- <span class="tag muted">1 条关联</span>
- <span class="chev">▶</span>
- </summary>
- <div class="body">
- <div class="dibang-card">
- <div class="head">
- <span class="name">盐酸(31%)</span>
- <span class="tag ok">已完成</span>
- <span class="tag muted">RK20260721015</span>
- </div>
- <div class="kv" style="padding:12px">
- <div class="item"><div class="l">业务类型</div><div class="v">入库</div></div>
- <div class="item"><div class="l">往来单位</div><div class="v">成都某某实业</div></div>
- <div class="item"><div class="l">车牌号</div><div class="v">渝A·D1234</div></div>
- <div class="item"><div class="l">产品</div><div class="v">盐酸(31%)</div></div>
- <div class="item"><div class="l">数量</div><div class="v">19.860 吨</div></div>
- <div class="item"><div class="l">出入库单号</div><div class="v">RK20260721015</div></div>
- </div>
- <div class="weight-strip">
- <div class="cell"><div class="l">毛重</div><div class="v">48,620 kg</div></div>
- <div class="cell"><div class="l">皮重</div><div class="v">28,760 kg</div></div>
- <div class="cell"><div class="l">扣杂</div><div class="v">0 kg</div></div>
- <div class="cell"><div class="l">净重</div><div class="v hl">19,860 kg</div></div>
- </div>
- </div>
- </div>
- </details>
- </div>
- </div>
- </div>
- <!-- ════════════ 方案 B ════════════ -->
- <div class="scheme-pane" id="pane-b">
- <div class="dialog-shell">
- <div class="dialog-head">
- <h2>查看运输计划 · YSJH20260720001</h2>
- <span class="x">×</span>
- </div>
- <div class="dialog-tabs">
- <span>计划概况</span>
- <span class="on">运输信息</span>
- <span>合同信息</span>
- </div>
- <div class="dialog-body">
- <div class="split">
- <nav class="toc">
- <a class="on" href="#b-link">运输链接</a>
- <a href="#b-vehicle">车辆信息</a>
- <a href="#b-node">物流节点</a>
- <a href="#b-freight">运费信息</a>
- <a href="#b-driver">司机回传</a>
- <a href="#b-io">出库单回传</a>
- <a href="#b-db">地磅单</a>
- </nav>
- <div class="toc-content">
- <div class="block" id="b-link">
- <h3 class="sec-title">运输链接</h3>
- <div class="link-row">
- <label>司机链接</label>
- <input readonly value="https://example.com/m/driver/abc123" />
- <button class="btn" type="button">复制</button>
- </div>
- </div>
- <div class="block" id="b-vehicle">
- <h3 class="sec-title">车辆信息</h3>
- <div class="vehicle-bar" style="margin:0;border:none;padding:0">
- <span class="plate">渝A·D1234</span>
- <span class="v-meta">司机 <b>张三</b></span>
- <span class="v-meta">承运商 <b>山峡物流</b></span>
- </div>
- </div>
- <div class="block" id="b-node">
- <h3 class="sec-title">物流节点</h3>
- <div class="journey" style="margin:0">
- <div class="journey-side">
- <div class="kicker"><span class="dot"></span>取货</div>
- <div class="place">江北区港城工业园</div>
- <div class="meta-line">2026-07-21 09:00</div>
- </div>
- <div class="journey-bridge"><span class="chip">运输</span><span class="arrow">→</span></div>
- <div class="journey-side">
- <div class="kicker"><span class="dot" style="background:#0284c7"></span>送达</div>
- <div class="place">青白江区物流大道</div>
- <div class="meta-line">2026-07-21 18:30</div>
- </div>
- </div>
- </div>
- <div class="block" id="b-freight">
- <h3 class="sec-title">运费信息</h3>
- <div class="metric-row" style="margin:0">
- <div class="metric"><div class="label">金额</div><div class="value money">¥4,860</div></div>
- <div class="metric"><div class="label">运量</div><div class="value">32.4t</div></div>
- <div class="metric"><div class="label">里程</div><div class="value">286</div></div>
- <div class="metric"><div class="label">开票</div><div class="value" style="font-size:14px">是</div></div>
- </div>
- </div>
- <div class="block" id="b-driver">
- <h3 class="sec-title">司机回传</h3>
- <p style="margin:0;color:var(--text-muted);font-size:13px">内容同方案 A 卡片,此处略。</p>
- </div>
- <div class="block" id="b-io">
- <h3 class="sec-title">出库单回传</h3>
- <p style="margin:0;color:var(--text-muted);font-size:13px">明细表可保留,配合锚点跳转。</p>
- </div>
- <div class="block" id="b-db">
- <h3 class="sec-title">地磅单信息</h3>
- <p style="margin:0;color:var(--text-muted);font-size:13px">过磅指标条展示,减少宽表。</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ════════════ 方案 C ════════════ -->
- <div class="scheme-pane" id="pane-c">
- <div class="dialog-shell">
- <div class="dialog-head">
- <h2>查看运输计划 · YSJH20260720001</h2>
- <span class="x">×</span>
- </div>
- <div class="dialog-tabs">
- <span>计划概况</span>
- <span class="on">运输信息</span>
- <span>合同信息</span>
- </div>
- <div class="dialog-body" style="background:#fff">
- <div class="dense-note">对照:以下为当前「同级标题 + 宽 KV / 宽表」的信息压迫感示意(非最终稿)。</div>
- <div class="sec">
- <h3 class="sec-title">运输链接</h3>
- <div class="link-row">
- <label>司机链接</label>
- <input readonly value="https://example.com/m/driver/abc123" />
- <button class="btn" type="button">复制链接</button>
- </div>
- </div>
- <div class="sec">
- <h3 class="sec-title">车辆信息</h3>
- <p style="margin:0;color:var(--text-muted)">车辆条组件(现状)</p>
- </div>
- <div class="sec">
- <h3 class="sec-title">物流节点</h3>
- <p style="margin:0 0 8px;color:var(--text-muted);font-size:12px">左取货 KV 四列 · 右送货 KV 四列</p>
- </div>
- <div class="sec">
- <h3 class="sec-title">运费信息</h3>
- <div class="flat-kv">
- <div class="cell"><div class="l">是否有运输费用</div><div class="v">是</div></div>
- <div class="cell"><div class="l">运输公里数</div><div class="v">286</div></div>
- <div class="cell"><div class="l">运费计算方式</div><div class="v">按重量</div></div>
- <div class="cell"><div class="l">运输量(吨)</div><div class="v">32.4</div></div>
- <div class="cell"><div class="l">运输单价(元/吨)</div><div class="v">150.00</div></div>
- <div class="cell"><div class="l">运费金额(元)</div><div class="v">4860.00</div></div>
- <div class="cell"><div class="l">是否开票</div><div class="v">是</div></div>
- </div>
- </div>
- <div class="sec">
- <h3 class="sec-title">司机回传信息</h3>
- <p style="margin:0;color:var(--text-muted);font-size:12px">宽表格:序号 / 时间 / 数量 / 备注 / 附件…</p>
- </div>
- <div class="sec">
- <h3 class="sec-title">出库单回传</h3>
- <p style="margin:0;color:var(--text-muted);font-size:12px">KV 五行 + 产品明细宽表 + 备注附件</p>
- </div>
- <div class="sec">
- <h3 class="sec-title">地磅单信息</h3>
- <p style="margin:0;color:var(--text-muted);font-size:12px">基础 KV 六列 + 地磅宽表(毛重/皮重/净重/时间…十余列)</p>
- </div>
- </div>
- </div>
- </div>
- <div class="legend">
- <strong>评审建议:</strong>
- 优先确认是否采用方案 A(旅程主轴 + 指标卡 + 折叠明细)。
- 若业务要求「运输信息必须全部默认展开、不可折叠」,可改用方案 B,或 A 的折叠默认全部 <code>open</code>。
- 确认后我再按选定方案落到 <code>pl-plan-view-tabs</code> 实现。
- </div>
- </div>
- <script>
- document.querySelectorAll('.scheme-tab').forEach((btn) => {
- btn.addEventListener('click', () => {
- document.querySelectorAll('.scheme-tab').forEach((b) => b.classList.remove('active'))
- document.querySelectorAll('.scheme-pane').forEach((p) => p.classList.remove('active'))
- btn.classList.add('active')
- document.getElementById('pane-' + btn.dataset.tab).classList.add('active')
- })
- })
- </script>
- </body>
- </html>
|