💻 代码预览 · 小草火锅

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="queue-hero">
4  <div style="font-size:13px;opacity:.9">我的排队号</div>
5  <div class="qh-num">B 023</div>
6  <div class="qh-tip">前面还有 22 桌 · 预计等待 38 分钟</div>
7</div>
8<div class="queue-progress">
9  <div style="display:flex;justify-content:space-between;font-size:13px;font-weight:600"><span>叫号进度</span><span style="color:var(--primary-dark)">A 085 / B 023</span></div>
10  <div class="qp-bar"><i style="width:72%"></i></div>
11  <div class="qp-stats"><span>已叫 62 桌</span><span>平均 1.7 分钟/桌</span><span>今日高峰 18:30</span></div>
12</div>
13<div class="queue-tips">
14  <div class="qt-item"><span class="qti">🔔</span>到号提醒<br>微信+短信双提醒</div>
15  <div class="qt-item"><span class="qti">🔄</span>过号顺延<br>3桌内可顺延</div>
16  <div class="qt-item"><span class="qti">🎁</span>排队有礼<br>等位超30分钟送甜品</div>
17</div>
18<div class="card">
19  <div class="section-title" style="margin:0 0 8px">排队福利 <span>等待不无聊</span></div>
20  <div style="font-size:12px;color:#8a5a46;line-height:2">
21    🍮 等位超 30 分钟：送招牌红糖冰粉<br>
22    🥩 等位超 45 分钟：送精品毛肚一份<br>
23    🎲 线上取号可参与抽奖，锅底半价券等你拿
24  </div>
25</div>
26<button class="btn btn-primary" style="margin:0 12px 24px;width:calc(100% - 24px)" onclick="toast('取号成功！已为你生成 B 024，到号将微信提醒')">取下一个号</button>
27<div style="height:20px"></div>
28<script src="data.js"></script><script src="app.js"></script>
29<script>toast('排队提醒已开启，到号自动通知');</script>
30</body></html>