💻 代码预览 · 小草同城跑腿

1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>订单跟踪 · 小草同城跑腿</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>订单跟踪</h1><span class="right">🛵</span></div>
3<div class="track-hero">
4  <div class="th-status">🛵 配送中 · 预计 18:26 送达</div>
5  <div class="th-meta">文件 · 合同急件 &nbsp; 科技园A座 → 幸福里小区1栋</div>
6  <span class="th-code">🔑 取件码 4821</span>
7</div>
8<div class="rider-card">
9  <div class="rc-avatar">🧑‍🔧</div>
10  <div>
11    <div class="rc-name">李师傅 <span style="color:var(--primary);font-size:11px">★ 5.0</span></div>
12    <div class="rc-meta">骑手编号 088562 · 已完成 12,680 单</div>
13    <div class="rc-meta">🛵 距你 1.2km · 正在前往送达地址</div>
14  </div>
15  <div class="rc-action">
16    <button style="background:var(--primary-light);color:var(--primary-dark)" onclick="toast('已呼叫骑手，请稍候')">📞 联系骑手</button>
17    <button style="background:#f0f0f0;color:#666" onclick="toast('客服 400-888-8888')">客服</button>
18  </div>
19</div>
20<div class="map-box">
21  <span class="route"></span>
22  <span class="m-dot" style="left:14%;top:30%">🏢</span>
23  <span class="m-dot" style="right:12%;bottom:25%">🏠</span>
24  <span class="m-dot" style="left:45%;top:38%;font-size:34px">🛵</span>
25  <span style="background:rgba(255,255,255,.85);padding:4px 10px;border-radius:10px;position:absolute;top:8px;left:8px;font-size:11px">实时轨迹 · GPS 定位中</span>
26</div>
27<div class="timeline">
28  <div class="section-title" style="margin:0 0 12px">配送进度</div>
29  <div id="tl-list"></div>
30</div>
31<div class="card" style="font-size:12px;color:#8a6a35;line-height:1.8">
32  💡 送达后请出示取件码核验物品<br>🛡️ 物品如有破损，请在签收前拒收并联系客服<br>⭐ 服务完成后可为骑手评价
33</div>
34<div style="height:30px"></div>
35<script src="data.js"></script><script src="app.js"></script>
36<script>renderTrack();</script>
37</body></html>