67 lines
3.9 KiB
HTML
67 lines
3.9 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>P03 · 时间线 / 操作动态</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="ui-richness-shared.css" />
|
|
</head>
|
|
<body>
|
|
<div class="demo-banner">
|
|
<div><span class="level-tag level-PAT">模式 P03</span> <strong>时间线</strong> — 流转记录、审批日志、配送跟踪</div>
|
|
<a href="ui-richness-index.html">← 返回对比入口</a>
|
|
</div>
|
|
<div class="page-wrap">
|
|
<header class="page-head">
|
|
<h1>订单详情 · 流转记录</h1>
|
|
<p class="page-desc">详情弹窗或侧栏中用时间线替代纯文字日志列表。</p>
|
|
</header>
|
|
<div class="compare-row">
|
|
<div class="compare-col plain">
|
|
<h3>❌ 素：纯文字日志表</h3>
|
|
<section class="panel">
|
|
<table class="data-table">
|
|
<thead><tr><th class="cell-left">时间</th><th class="cell-left">操作</th><th>操作人</th></tr></thead>
|
|
<tbody>
|
|
<tr><td class="cell-left">03-12 14:30</td><td class="cell-left">已签收</td><td>张配送</td></tr>
|
|
<tr><td class="cell-left">03-12 10:15</td><td class="cell-left">开始配送</td><td>张配送</td></tr>
|
|
<tr><td class="cell-left">03-12 08:00</td><td class="cell-left">仓库出库</td><td>李仓管</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
<div class="compare-col rich">
|
|
<h3>✓ 丰：图标时间线</h3>
|
|
<section class="panel">
|
|
<div class="panel-top"><h2 class="title-bar-heading">流转记录</h2></div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg></span>
|
|
<div class="timeline-body"><strong>客户已签收</strong><p>签收人：王主任 · 备注：货品完好</p></div>
|
|
<span class="timeline-time">03-12 14:30</span>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 18V6a2 2 0 00-2-2H4a2 2 0 00-2 2v11a1 1 0 001 1h2"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
|
|
<div class="timeline-body"><strong>配送员已出发</strong><p>张配送 · 沪A·12345 · 预计 14:00 送达</p></div>
|
|
<span class="timeline-time">03-12 10:15</span>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg></span>
|
|
<div class="timeline-body"><strong>仓库已出库</strong><p>李仓管 · 出库单 OUT-8842 · 20 箱</p></div>
|
|
<span class="timeline-time">03-12 08:00</span>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<span class="timeline-dot warn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg></span>
|
|
<div class="timeline-body"><strong>订单已创建</strong><p>系统自动 · 来源：客户 APP 下单</p></div>
|
|
<span class="timeline-time">03-11 22:18</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<p class="dim-note"><strong>适用：</strong>订单跟踪、审批流、样本流转、操作审计。节点图标按事件类型映射（完成=绿、异常=琥珀）。</p>
|
|
</div>
|
|
</body>
|
|
</html>
|