1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>订单状态 · 小草面馆</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<header class="header"><a class="back" onclick="history.back()">‹</a><h1>订单状态</h1><span class="right"></span></header>
12<div class="order-tabs">
13 <a class="active">进行中</a><a>已完成</a><a>已取消</a>
14</div>
15<div class="order-card">
16 <div class="oc-head"><span>A12 桌 · 2026-09-06 12:30 <span class="tag">单号 M202609061230</span></span><span class="st">制作中</span></div>
17 <div class="oc-goods"><div class="og-img">🍜</div><div class="og-name">招牌红烧牛肉面<br/><span style="font-size:11px;color:#9c8b7c">大碗 · 微辣 · 加卤蛋</span></div><div class="og-price">¥31</div></div>
18 <div class="oc-goods"><div class="og-img">🥤</div><div class="og-name">冰镇酸梅汤 ×2</div><div class="og-price">¥16</div></div>
19 <div class="oc-foot"><span>共 3 件 · 实付</span><b>¥41.3</b></div>
20 <div class="call-bar">
21 <i data-toast="已呼叫服务员加水">💧 加水</i>
22 <i data-toast="已呼叫加餐具">🥢 加餐具</i>
23 <i class="main" data-toast="已呼叫服务员买单">🧾 呼叫买单</i>
24 </div>
25</div>
26<div class="section-title">📡 实时进度</div>
27<div class="status-line" id="statusList"></div>
28<div class="order-card" style="margin-top:12px">
29 <div class="oc-head"><span>A12 桌 · 2026-09-05 19:10</span><span class="st" style="color:#16a34a">已完成</span></div>
30 <div class="oc-goods"><div class="og-img">🧅</div><div class="og-name">葱油拌面 ×1<br/><span style="font-size:11px;color:#9c8b7c">小碗 · 不辣</span></div><div class="og-price">¥18</div></div>
31 <div class="oc-foot"><span>共 1 件 · 实付</span><b>¥18</b></div>
32 <div class="oc-ops"><i class="main">去评价</i><i>再次点单</i></div>
33</div>
34
35
36<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🍜</span>菜单</a><a class="" href="cart.html"><span class="icon">🛒</span>购物车</a><a class="" href="member.html"><span class="icon">👑</span>会员</a><a class=" active" href="mine.html"><span class="icon">👤</span>我的</a></nav>
37<script src="data.js"></script>
38<script>
39 var sl = document.getElementById('statusList');
40 var h = '';
41 window.DATA.orderStatus.forEach(function (t) {
42 var cls = t.now ? 'now' : (t.done ? 'done' : '');
43 h += '<div class="sl-dot ' + cls + '"><div class="sl-c"></div><div>'
44 + '<div class="sl-title">' + t.title + '</div><div class="sl-time">' + (t.time || '待处理') + '</div></div></div>';
45 });
46 sl.innerHTML = h;
47</script>
48<script src="app.js"></script>
49</body>
50</html>