Files
shanxia2.0/docs/fresh-mint-pl-plan-transport-tab-demo.html
T
2026-07-22 21:26:33 +08:00

781 lines
34 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>