603 lines
19 KiB
HTML
603 lines
19 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 · 回传卡片 KV 重设计 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;
|
||
--border-soft: #e2e8f0;
|
||
--surface: #fff;
|
||
--table-head: #f8fafc;
|
||
--danger: #dc2626;
|
||
--warn: #d97706;
|
||
--radius: 10px;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: Inter, -apple-system, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: #eef2f6;
|
||
}
|
||
|
||
.page { max-width: 1200px; margin: 0 auto; padding: 32px 20px 72px; }
|
||
.head { margin-bottom: 28px; }
|
||
.head h1 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
|
||
.head h1 span { color: var(--primary-dark); }
|
||
.head p { margin: 0; color: var(--text-muted); max-width: 760px; }
|
||
|
||
.block { margin-bottom: 36px; }
|
||
.block > h2 {
|
||
margin: 0 0 6px;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
}
|
||
.block > .desc {
|
||
margin: 0 0 14px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
.pick {
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
padding: 1px 8px;
|
||
border-radius: 999px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
vertical-align: middle;
|
||
}
|
||
.pick-1 { background: #ecfdf5; color: var(--primary-dark); }
|
||
.pick-2 { background: #eff6ff; color: #1d4ed8; }
|
||
.pick-3 { background: #fff7ed; color: #c2410c; }
|
||
|
||
.row3 {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 14px;
|
||
}
|
||
@media (max-width: 980px) {
|
||
.row3 { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: var(--radius);
|
||
padding: 14px;
|
||
min-height: 300px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.panel-hd {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.panel-hd h3 {
|
||
margin: 0;
|
||
padding-left: 10px;
|
||
border-left: 3px solid var(--primary);
|
||
color: var(--primary-dark);
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
}
|
||
.ops { display: flex; gap: 6px; }
|
||
.btn {
|
||
height: 28px;
|
||
padding: 0 10px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-soft);
|
||
background: #fff;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text);
|
||
}
|
||
.btn-p { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||
|
||
/* ========== 方案 1：单据表（系统原生 ViewKv 表格式） ========== */
|
||
.kv-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
.kv-table th,
|
||
.kv-table td {
|
||
padding: 9px 12px;
|
||
border-bottom: 1px solid #eef2f6;
|
||
border-right: 1px solid #eef2f6;
|
||
vertical-align: top;
|
||
text-align: left;
|
||
line-height: 1.4;
|
||
}
|
||
.kv-table tr:last-child th,
|
||
.kv-table tr:last-child td { border-bottom: none; }
|
||
.kv-table th {
|
||
width: 78px;
|
||
background: var(--table-head);
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
.kv-table td {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
word-break: break-word;
|
||
}
|
||
.kv-table td.red { color: var(--danger); font-size: 15px; }
|
||
.kv-table .tag {
|
||
display: inline-block;
|
||
padding: 1px 8px;
|
||
border-radius: 4px;
|
||
background: #059669;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
}
|
||
.kv-table .thumbs {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.kv-table .thumb {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 6px;
|
||
background: #ecfdf5;
|
||
border: 1px solid #a7f3d0;
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 11px;
|
||
color: var(--primary-dark);
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* ========== 方案 2：一句摘要 + 次要元信息 ========== */
|
||
.summary-card { display: flex; flex-direction: column; gap: 12px; }
|
||
.summary-hero {
|
||
padding: 14px 14px 12px;
|
||
border-radius: 8px;
|
||
background: #0f172a;
|
||
color: #f8fafc;
|
||
}
|
||
.summary-hero .kicker {
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: #94a3b8;
|
||
margin-bottom: 6px;
|
||
}
|
||
.summary-hero .main {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.25;
|
||
}
|
||
.summary-hero .main strong { color: #fca5a5; font-weight: 700; }
|
||
.summary-hero .sub {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #cbd5e1;
|
||
line-height: 1.45;
|
||
}
|
||
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
max-width: 100%;
|
||
padding: 6px 10px;
|
||
border-radius: 999px;
|
||
background: #f8fafc;
|
||
border: 1px solid var(--border-soft);
|
||
font-size: 12px;
|
||
color: var(--text);
|
||
}
|
||
.chip b { color: var(--text-muted); font-weight: 500; }
|
||
.chip .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
|
||
.media-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding-top: 2px;
|
||
}
|
||
.media-row .lab { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
|
||
.media-row .thumb {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 8px;
|
||
object-fit: cover;
|
||
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
|
||
border: 1px solid #a7f3d0;
|
||
}
|
||
|
||
/* ========== 方案 3：回执 / 小票式 ========== */
|
||
.ticket {
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
}
|
||
.ticket-band {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf4 60%, #fff 100%);
|
||
border-bottom: 1px solid #d1fae5;
|
||
}
|
||
.ticket-band .who {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--primary-dark);
|
||
}
|
||
.ticket-band .when {
|
||
font-size: 12px;
|
||
color: var(--text-muted);
|
||
font-variant-numeric: tabular-nums;
|
||
white-space: nowrap;
|
||
}
|
||
.ticket-qty {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
border-bottom: 1px dashed #e2e8f0;
|
||
}
|
||
.ticket-qty > div {
|
||
padding: 12px;
|
||
text-align: center;
|
||
}
|
||
.ticket-qty > div + div { border-left: 1px dashed #e2e8f0; }
|
||
.ticket-qty .lab {
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 4px;
|
||
}
|
||
.ticket-qty .val {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
color: var(--danger);
|
||
font-variant-numeric: tabular-nums;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.1;
|
||
}
|
||
.ticket-qty .val.sm { font-size: 14px; line-height: 1.35; }
|
||
.ticket-lines { padding: 4px 0; }
|
||
.ticket-line {
|
||
display: grid;
|
||
grid-template-columns: 72px 1fr;
|
||
gap: 8px;
|
||
padding: 7px 12px;
|
||
font-size: 13px;
|
||
}
|
||
.ticket-line .lab { color: var(--text-muted); }
|
||
.ticket-line .val { font-weight: 600; color: var(--text); word-break: break-word; }
|
||
.ticket-foot {
|
||
padding: 10px 12px;
|
||
border-top: 1px dashed #e2e8f0;
|
||
background: #f8fafc;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.ticket-foot .lab { font-size: 12px; color: var(--text-muted); }
|
||
.ticket-foot .thumb {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 6px;
|
||
background: #ecfdf5;
|
||
border: 1px solid #a7f3d0;
|
||
}
|
||
|
||
.footer-note {
|
||
margin-top: 8px;
|
||
padding: 14px 16px;
|
||
background: #fff;
|
||
border: 1px solid var(--border-soft);
|
||
border-radius: 8px;
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
}
|
||
.footer-note strong { color: var(--text); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="head">
|
||
<h1>回传卡片 · <span>重新设计</span></h1>
|
||
<p>
|
||
上一版三种「上下 KV / 指标卡 / 左右行」都不合适。本页换成三种完全不同的语言：
|
||
<b>单据表</b>、<b>摘要优先</b>、<b>回执小票</b>。请直接点名要哪一种（或混搭）。
|
||
</p>
|
||
</header>
|
||
|
||
<!-- 1 -->
|
||
<section class="block">
|
||
<h2>方案 1 · 单据表 <span class="pick pick-1">贴近现有 ViewKvTable</span></h2>
|
||
<p class="desc">放弃「漂浮的上下摆」，改成管理端熟悉的「左标签右值」表格。数量单元格加大、红色。信息密度高、和系统其它查看弹窗一致。</p>
|
||
<div class="row3">
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>司机回传信息</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<table class="kv-table">
|
||
<tr>
|
||
<th>实际数量</th>
|
||
<td class="red">28.5 吨</td>
|
||
<th>品牌数量</th>
|
||
<td class="red">云化 18.5 / 华谊 10</td>
|
||
</tr>
|
||
<tr>
|
||
<th>回传时间</th>
|
||
<td>2026-07-31 14:22</td>
|
||
<th>回传备注</th>
|
||
<td>货已装完，现场确认无误</td>
|
||
</tr>
|
||
<tr>
|
||
<th>回传附件</th>
|
||
<td colspan="3">
|
||
<div class="thumbs"><span class="thumb">图1</span><span class="thumb">图2</span></div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>出库单回传</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<table class="kv-table">
|
||
<tr>
|
||
<th>单号</th>
|
||
<td>CK20260731001</td>
|
||
<th>状态</th>
|
||
<td><span class="tag">已完成</span></td>
|
||
</tr>
|
||
<tr>
|
||
<th>计划号</th>
|
||
<td>PL-202607-088</td>
|
||
<th>车牌</th>
|
||
<td>皖H·D1234</td>
|
||
</tr>
|
||
<tr>
|
||
<th>往来单位</th>
|
||
<td colspan="3">安庆某某化工有限公司</td>
|
||
</tr>
|
||
<tr>
|
||
<th>实际数量</th>
|
||
<td class="red">28.5 吨</td>
|
||
<th>品牌数量</th>
|
||
<td class="red">云化 18.5 / 华谊 10</td>
|
||
</tr>
|
||
<tr>
|
||
<th>现场备注</th>
|
||
<td>过磅完成，单据已签</td>
|
||
<th>现场附件</th>
|
||
<td><div class="thumbs"><span class="thumb">图1</span></div></td>
|
||
</tr>
|
||
</table>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
|
||
<table class="kv-table">
|
||
<tr>
|
||
<th>出入库单号</th>
|
||
<td>RK20260731008</td>
|
||
<th>业务类型</th>
|
||
<td><span class="tag">出库</span></td>
|
||
</tr>
|
||
<tr>
|
||
<th>毛重</th>
|
||
<td>42580 kg</td>
|
||
<th>皮重</th>
|
||
<td>14200 kg</td>
|
||
</tr>
|
||
<tr>
|
||
<th>净重</th>
|
||
<td class="red">28380 kg</td>
|
||
<th>车牌</th>
|
||
<td>皖H·D1234</td>
|
||
</tr>
|
||
</table>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 2 -->
|
||
<section class="block">
|
||
<h2>方案 2 · 摘要优先 <span class="pick pick-2">先看结论</span></h2>
|
||
<p class="desc">卡片顶部用一句「结论句」把数量讲清楚，其余降级成胶囊标签。适合一眼扫量，弱化字段罗列感。</p>
|
||
<div class="row3">
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>司机回传信息</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="summary-hero">
|
||
<div class="kicker">司机已回传</div>
|
||
<div class="main">实际 <strong>28.5</strong> 吨</div>
|
||
<div class="sub">品牌构成：云化 18.5 · 华谊 10</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<span class="chip"><b>时间</b><span class="t">2026-07-31 14:22</span></span>
|
||
<span class="chip"><b>备注</b><span class="t">货已装完，现场确认无误</span></span>
|
||
</div>
|
||
<div class="media-row">
|
||
<span class="lab">附件</span>
|
||
<span class="thumb"></span>
|
||
<span class="thumb"></span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>出库单回传</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<div class="summary-card">
|
||
<div class="summary-hero">
|
||
<div class="kicker">出库单 · 已完成 · CK20260731001</div>
|
||
<div class="main">实际 <strong>28.5</strong> 吨</div>
|
||
<div class="sub">云化 18.5 · 华谊 10 ｜ 皖H·D1234</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<span class="chip"><b>计划</b><span class="t">PL-202607-088</span></span>
|
||
<span class="chip"><b>往来</b><span class="t">安庆某某化工有限公司</span></span>
|
||
<span class="chip"><b>备注</b><span class="t">过磅完成，单据已签</span></span>
|
||
</div>
|
||
<div class="media-row">
|
||
<span class="lab">附件</span>
|
||
<span class="thumb"></span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
|
||
<div class="summary-card">
|
||
<div class="summary-hero">
|
||
<div class="kicker">地磅 · 出库 · RK20260731008</div>
|
||
<div class="main">净重 <strong>28.38</strong> 吨</div>
|
||
<div class="sub">毛重 42.58 · 皮重 14.20 ｜ 皖H·D1234</div>
|
||
</div>
|
||
<div class="chip-row">
|
||
<span class="chip"><b>往来</b><span class="t">安庆某某化工</span></span>
|
||
<span class="chip"><b>状态</b><span class="t">已过磅</span></span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 3 -->
|
||
<section class="block">
|
||
<h2>方案 3 · 回执小票 <span class="pick pick-3">像一张回执</span></h2>
|
||
<p class="desc">顶部条带写时间/身份，中间居中放大数量，下方清单式字段。结构像「装车回执」，不是普通表单字段堆叠。</p>
|
||
<div class="row3">
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>司机回传信息</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<div class="ticket">
|
||
<div class="ticket-band">
|
||
<span class="who">司机回传回执</span>
|
||
<span class="when">2026-07-31 14:22</span>
|
||
</div>
|
||
<div class="ticket-qty">
|
||
<div>
|
||
<div class="lab">实际数量（吨）</div>
|
||
<div class="val">28.5</div>
|
||
</div>
|
||
<div>
|
||
<div class="lab">品牌数量</div>
|
||
<div class="val sm">云化 18.5<br />华谊 10</div>
|
||
</div>
|
||
</div>
|
||
<div class="ticket-lines">
|
||
<div class="ticket-line"><span class="lab">回传备注</span><span class="val">货已装完，现场确认无误</span></div>
|
||
</div>
|
||
<div class="ticket-foot">
|
||
<span class="lab">附件</span>
|
||
<span class="thumb"></span>
|
||
<span class="thumb"></span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd">
|
||
<h3>出库单回传</h3>
|
||
<div class="ops"><button class="btn btn-p" type="button">编辑</button></div>
|
||
</div>
|
||
<div class="ticket">
|
||
<div class="ticket-band">
|
||
<span class="who">出库单 CK20260731001 · 已完成</span>
|
||
<span class="when">PL-202607-088</span>
|
||
</div>
|
||
<div class="ticket-qty">
|
||
<div>
|
||
<div class="lab">实际数量（吨）</div>
|
||
<div class="val">28.5</div>
|
||
</div>
|
||
<div>
|
||
<div class="lab">品牌数量</div>
|
||
<div class="val sm">云化 18.5 / 华谊 10</div>
|
||
</div>
|
||
</div>
|
||
<div class="ticket-lines">
|
||
<div class="ticket-line"><span class="lab">车牌</span><span class="val">皖H·D1234</span></div>
|
||
<div class="ticket-line"><span class="lab">往来单位</span><span class="val">安庆某某化工有限公司</span></div>
|
||
<div class="ticket-line"><span class="lab">现场备注</span><span class="val">过磅完成，单据已签</span></div>
|
||
</div>
|
||
<div class="ticket-foot">
|
||
<span class="lab">附件</span>
|
||
<span class="thumb"></span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="panel">
|
||
<div class="panel-hd"><h3>地磅单信息（示意）</h3></div>
|
||
<div class="ticket">
|
||
<div class="ticket-band">
|
||
<span class="who">地磅回执 · 出库</span>
|
||
<span class="when">RK20260731008</span>
|
||
</div>
|
||
<div class="ticket-qty">
|
||
<div>
|
||
<div class="lab">净重（吨）</div>
|
||
<div class="val">28.38</div>
|
||
</div>
|
||
<div>
|
||
<div class="lab">毛重 / 皮重</div>
|
||
<div class="val sm">42.58 / 14.20</div>
|
||
</div>
|
||
</div>
|
||
<div class="ticket-lines">
|
||
<div class="ticket-line"><span class="lab">车牌</span><span class="val">皖H·D1234</span></div>
|
||
<div class="ticket-line"><span class="lab">往来单位</span><span class="val">安庆某某化工</span></div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="footer-note">
|
||
<strong>怎么选：</strong>
|
||
要和系统其它查看页统一 → 选 <strong>方案 1</strong>；
|
||
归档时最关心「装了多少」→ 选 <strong>方案 2</strong>；
|
||
想强调「这是一份回传凭证」→ 选 <strong>方案 3</strong>。
|
||
也可以说「1 的表格 + 2 的顶部结论」这类混搭。文件：
|
||
<code>docs/fresh-mint-pl-feedback-kv-polish-demo.html</code>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|