367 lines
13 KiB
HTML
367 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>运输计划 · 无「装/送」文字区分 Demo</title>
|
||
<style>
|
||
:root {
|
||
--load: #059669;
|
||
--delivery: #0284c7;
|
||
--text: #1e293b;
|
||
--muted: #64748b;
|
||
--border: #e2e8f0;
|
||
--page: #f8fafc;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
padding: 32px 24px 64px;
|
||
font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: var(--text);
|
||
background: var(--page);
|
||
}
|
||
h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
|
||
.lead { margin: 0 0 12px; color: var(--muted); max-width: 760px; }
|
||
.hint {
|
||
margin: 0 0 28px;
|
||
padding: 10px 14px;
|
||
max-width: 760px;
|
||
border-radius: 8px;
|
||
background: #ecfdf5;
|
||
border: 1px solid #a7f3d0;
|
||
font-size: 13px;
|
||
color: #065f46;
|
||
}
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
.card {
|
||
background: #fff;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
.card__head {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||
padding: 14px 16px; border-bottom: 1px solid var(--border);
|
||
}
|
||
.card__title { margin: 0; font-size: 15px; font-weight: 700; }
|
||
.badge {
|
||
flex-shrink: 0; padding: 2px 8px; border-radius: 999px;
|
||
font-size: 11px; font-weight: 600;
|
||
}
|
||
.badge--rec { color: #065f46; background: #ecfdf5; border: 1px solid #a7f3d0; }
|
||
.badge--alt { color: #334155; background: #f1f5f9; border: 1px solid #cbd5e1; }
|
||
.card__body { padding: 16px; }
|
||
.card__note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
|
||
.cell {
|
||
padding: 10px 12px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
}
|
||
.name { font-size: 13px; font-weight: 600; line-height: 1.45; word-break: break-word; }
|
||
.sub { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
|
||
.body { flex: 1; min-width: 0; }
|
||
|
||
/* 图例：列头可放小图例 */
|
||
.col-legend {
|
||
display: flex; gap: 12px; margin-bottom: 8px;
|
||
font-size: 11px; color: var(--muted);
|
||
}
|
||
.col-legend span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.col-legend i {
|
||
display: inline-block; width: 10px; height: 10px; border-radius: 2px;
|
||
}
|
||
.col-legend i.load { background: var(--load); }
|
||
.col-legend i.delivery { background: var(--delivery); }
|
||
|
||
/* N1 左侧色条 */
|
||
.n1 { display: flex; flex-direction: column; gap: 0; }
|
||
.n1__row {
|
||
display: flex; align-items: flex-start;
|
||
padding: 4px 0 4px 10px;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
.n1__row--load { border-left-color: var(--load); }
|
||
.n1__row--delivery { border-left-color: var(--delivery); }
|
||
.n1__row + .n1__row {
|
||
margin-top: 8px; padding-top: 8px;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
|
||
/* N2 时间轴 */
|
||
.n2 { display: flex; flex-direction: column; }
|
||
.n2__row {
|
||
display: flex; align-items: flex-start; gap: 10px;
|
||
padding: 2px 0 10px;
|
||
}
|
||
.n2__row:last-child { padding-bottom: 2px; }
|
||
.n2__rail {
|
||
flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 12px;
|
||
}
|
||
.n2__dot {
|
||
width: 10px; height: 10px; border-radius: 50%; z-index: 1;
|
||
}
|
||
.n2__dot--load { background: var(--load); }
|
||
.n2__dot--delivery { background: var(--delivery); }
|
||
.n2__line {
|
||
flex: 1; width: 2px; min-height: 12px; margin-top: 2px; background: #cbd5e1;
|
||
}
|
||
.n2__row:last-child .n2__line { display: none; }
|
||
|
||
/* N3 箭头图标 */
|
||
.n3 { display: flex; flex-direction: column; gap: 0; }
|
||
.n3__row {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
padding: 2px 0;
|
||
}
|
||
.n3__row + .n3__row {
|
||
margin-top: 8px; padding-top: 8px;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
.n3__icon {
|
||
flex-shrink: 0;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
width: 18px; height: 18px; margin-top: 1px;
|
||
color: #fff; border-radius: 4px;
|
||
}
|
||
.n3__icon--load { background: var(--load); }
|
||
.n3__icon--delivery { background: var(--delivery); }
|
||
.n3__icon svg { width: 12px; height: 12px; display: block; }
|
||
|
||
/* N4 仅顺序 + 极淡色点 */
|
||
.n4 { display: flex; flex-direction: column; gap: 0; }
|
||
.n4__row {
|
||
display: flex; align-items: flex-start; gap: 8px;
|
||
padding: 2px 0;
|
||
}
|
||
.n4__row + .n4__row {
|
||
margin-top: 8px; padding-top: 8px;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
.n4__dot {
|
||
flex-shrink: 0; width: 6px; height: 6px; margin-top: 6px;
|
||
border-radius: 50%;
|
||
}
|
||
.n4__dot--load { background: var(--load); }
|
||
.n4__dot--delivery { background: var(--delivery); }
|
||
|
||
/* N5 流程箭头夹在中间 */
|
||
.n5 { display: flex; flex-direction: column; gap: 4px; }
|
||
.n5__row {
|
||
display: flex; align-items: flex-start;
|
||
padding: 4px 0 4px 10px;
|
||
border-left: 3px solid transparent;
|
||
}
|
||
.n5__row--load { border-left-color: var(--load); }
|
||
.n5__row--delivery { border-left-color: var(--delivery); }
|
||
.n5__flow {
|
||
display: flex; align-items: center; justify-content: flex-start;
|
||
padding: 0 0 0 2px;
|
||
color: #94a3b8; font-size: 11px; line-height: 1;
|
||
}
|
||
.n5__flow svg { width: 14px; height: 14px; }
|
||
|
||
.legend {
|
||
margin-top: 28px; padding: 16px 18px; max-width: 860px;
|
||
border-radius: 10px; background: #fff; border: 1px solid var(--border);
|
||
}
|
||
.legend h2 { margin: 0 0 8px; font-size: 14px; }
|
||
.legend ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
|
||
.legend li { margin: 4px 0; }
|
||
.legend strong { color: var(--text); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>无「装 / 送」文字 · 如何表达装货与送货</h1>
|
||
<p class="lead">
|
||
约定不变：<strong>上行 = 装货</strong>，<strong>下行 = 送货</strong>。色语义：绿 = 装、蓝 = 送。单元格内不再出现「装」「送」二字，靠色条 / 时间轴 / 图标 / 圆点表达。
|
||
</p>
|
||
<p class="hint">
|
||
建议：列头旁加一行小图例「■ 装货 ■ 送货」，新用户也能懂。下方 N1 / N2 已示范图例。
|
||
</p>
|
||
|
||
<div class="grid">
|
||
<!-- N1 -->
|
||
<section class="card">
|
||
<div class="card__head">
|
||
<h2 class="card__title">N1. 左侧色条</h2>
|
||
<span class="badge badge--rec">推荐</span>
|
||
</div>
|
||
<div class="card__body">
|
||
<div class="col-legend">
|
||
<span><i class="load"></i>装货</span>
|
||
<span><i class="delivery"></i>送货</span>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="n1">
|
||
<div class="n1__row n1__row--load">
|
||
<div class="body">
|
||
<div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
|
||
<div class="sub">2026-09-16 08:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="n1__row n1__row--delivery">
|
||
<div class="body">
|
||
<div class="name">武汉市东西湖区物流大道 88 号</div>
|
||
<div class="sub">2026-09-16 16:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="card__note">无标签字；扫视靠左边线颜色。与当前结构最接近，只隐藏 label。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- N2 -->
|
||
<section class="card">
|
||
<div class="card__head">
|
||
<h2 class="card__title">N2. 时间轴圆点</h2>
|
||
<span class="badge badge--rec">推荐</span>
|
||
</div>
|
||
<div class="card__body">
|
||
<div class="col-legend">
|
||
<span><i class="load"></i>装货</span>
|
||
<span><i class="delivery"></i>送货</span>
|
||
</div>
|
||
<div class="cell">
|
||
<div class="n2">
|
||
<div class="n2__row">
|
||
<div class="n2__rail">
|
||
<span class="n2__dot n2__dot--load"></span>
|
||
<span class="n2__line"></span>
|
||
</div>
|
||
<div class="body">
|
||
<div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
|
||
<div class="sub">2026-09-16 08:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="n2__row">
|
||
<div class="n2__rail">
|
||
<span class="n2__dot n2__dot--delivery"></span>
|
||
<span class="n2__line"></span>
|
||
</div>
|
||
<div class="body">
|
||
<div class="name">武汉市东西湖区物流大道 88 号</div>
|
||
<div class="sub">2026-09-16 16:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="card__note">绿→蓝连线天然表达「先装后送」流程，地址/时间列尤其合适。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- N3 -->
|
||
<section class="card">
|
||
<div class="card__head">
|
||
<h2 class="card__title">N3. 入/出箭头图标</h2>
|
||
<span class="badge badge--alt">备选</span>
|
||
</div>
|
||
<div class="card__body">
|
||
<div class="cell">
|
||
<div class="n3">
|
||
<div class="n3__row">
|
||
<span class="n3__icon n3__icon--load" title="装货" aria-label="装货">
|
||
<!-- download-into = 装入 -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
|
||
</span>
|
||
<div class="body">
|
||
<div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
|
||
<div class="sub">2026-09-16 08:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="n3__row">
|
||
<span class="n3__icon n3__icon--delivery" title="送货" aria-label="送货">
|
||
<!-- upload-out = 送出 -->
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21V9"/><path d="m7 14 5-5 5 5"/><path d="M5 3h14"/></svg>
|
||
</span>
|
||
<div class="body">
|
||
<div class="name">武汉市东西湖区物流大道 88 号</div>
|
||
<div class="sub">2026-09-16 16:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="card__note">↓ 装入 / ↑ 送出。无汉字但有语义；需统一全列表图标含义。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- N4 -->
|
||
<section class="card">
|
||
<div class="card__head">
|
||
<h2 class="card__title">N4. 色点前缀</h2>
|
||
<span class="badge badge--alt">备选</span>
|
||
</div>
|
||
<div class="card__body">
|
||
<div class="cell">
|
||
<div class="n4">
|
||
<div class="n4__row">
|
||
<span class="n4__dot n4__dot--load" title="装货"></span>
|
||
<div class="body">
|
||
<div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
|
||
<div class="sub">2026-09-16 08:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="n4__row">
|
||
<span class="n4__dot n4__dot--delivery" title="送货"></span>
|
||
<div class="body">
|
||
<div class="name">武汉市东西湖区物流大道 88 号</div>
|
||
<div class="sub">2026-09-16 16:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="card__note">最省空间；辨识弱于色条/时间轴，适合列很多、信息极密时。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- N5 -->
|
||
<section class="card">
|
||
<div class="card__head">
|
||
<h2 class="card__title">N5. 色条 + 中间流向箭头</h2>
|
||
<span class="badge badge--alt">备选</span>
|
||
</div>
|
||
<div class="card__body">
|
||
<div class="cell">
|
||
<div class="n5">
|
||
<div class="n5__row n5__row--load">
|
||
<div class="body">
|
||
<div class="name">宜昌市西陵区某某化工园 A 区 12 号</div>
|
||
<div class="sub">2026-09-16 08:30</div>
|
||
</div>
|
||
</div>
|
||
<div class="n5__flow" aria-hidden="true">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
|
||
</div>
|
||
<div class="n5__row n5__row--delivery">
|
||
<div class="body">
|
||
<div class="name">武汉市东西湖区物流大道 88 号</div>
|
||
<div class="sub">2026-09-16 16:00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="card__note">中间 ↓ 强化「从装到送」；略占高度，多列重复时可能略吵。</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="legend">
|
||
<h2>怎么选</h2>
|
||
<ul>
|
||
<li><strong>N1 色条</strong>：改动最小（隐藏文字即可），适合所有配对列统一样式。</li>
|
||
<li><strong>N2 时间轴</strong>：流程感最强，优先用在地址/时间这类「有先后」的列。</li>
|
||
<li><strong>N3 图标</strong>：语义明确但要培训/图例，避免与别的操作图标混淆。</li>
|
||
<li>无论哪种，列头或工具栏旁加「绿=装 / 蓝=送」小图例，可弥补去掉汉字后的学习成本。</li>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
</html>
|