781 lines
34 KiB
HTML
781 lines
34 KiB
HTML
<!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>
|