小草火锅_H5/index.html · 约 3757 字符
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="banner">
3 <div>
4 <div class="bn-title">🌶️ 小草火锅</div>
5 <div class="bn-sub">麻辣鲜香 · 涮出好滋味</div>
6 <span class="bn-badge">🎁 新客立减30元 · 锅底免费送</span>
7 </div>
8 <div class="bn-emoji">🍲</div>
9</div>
10<div class="queue-card">
11 <div class="qc-num">${'23'}</div>
12 <div class="qc-body"><b>当前排队 23 桌 · 约 40 分钟</b>在线取号 · 到店提醒 · 过号顺延</div>
13 <span class="qc-btn" onclick="location.href='queue.html'">远程取号</span>
14</div>
15<div class="quick-grid">
16 <a href="queue.html"><span class="qicon">🎫</span>排队取号</a>
17 <a href="menu.html"><span class="qicon">🍲</span>锅底选择</a>
18 <a href="menu.html"><span class="qicon">🥩</span>招牌涮品</a>
19 <a href="mine.html"><span class="qicon">🎁</span>会员权益</a>
20</div>
21<div class="section-title">招牌锅底 <span>人气之选</span></div>
22<div id="pot-list"></div>
23<div class="section-title">必点涮品 <span>涮肉专场</span></div>
24<div class="goods-grid" id="hot-dishes"></div>
25<div class="section-title">优惠券 <span>下单自动抵扣</span></div>
26<div id="coupon-list"></div>
27<div class="section-title">门店信息</div>
28<div class="card" style="font-size:13px;line-height:2">
29 🏪 小草火锅(总店) · 幸福路88号美食广场2楼<br>🕙 营业时间 10:00-02:00 · 距你 500m<br>📞 预订电话 0571-8888-6666（可预订包厢）
30</div>
31<div style="height:80px"></div>
32<div class="tabbar">
33 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
34 <a href="queue.html"><span class="icon">🎫</span>取号</a>
35 <a href="menu.html"><span class="icon">🍲</span>点餐</a>
36 <a href="orders.html"><span class="icon">📋</span>订单</a>
37 <a href="mine.html"><span class="icon">👤</span>我的</a>
38</div>
39<script src="data.js"></script><script src="app.js"></script>
40<script>
41$('#pot-list').innerHTML=POTS.slice(0,3).map((p,i)=>`
42 <div class="pot-card" onclick="location.href='menu.html'">
43 <div class="pc-emoji">${p.emoji}</div>
44 <div class="pc-body">
45 <div class="pc-name">${p.name} ${p.tag==='hot'?'<span class="badge badge-hot">招牌</span>':p.tag==='new'?'<span class="badge badge-new">新品</span>':''}</div>
46 <div class="pc-desc">${p.desc}</div>
47 <div class="pc-foot"><span class="pc-price"><em>¥</em>${p.price}</span><span class="tag">选辣度 ›</span></div>
48 </div>
49 </div>`).join('');
50$('#hot-dishes').innerHTML=DISHES.filter(d=>d.tag==='hot').slice(0,4).map(d=>`
51 <div class="goods-card" onclick="location.href='menu.html'">
52 <div class="gc-img">${d.emoji}<span class="badge badge-hot gc-tag">必点</span></div>
53 <div class="gc-body"><div class="gc-name">${d.name}</div><div class="gc-desc">${d.desc}</div>
54 <div class="gc-foot"><span class="gc-price"><em>¥</em>${d.price}</span><span class="gc-add" onclick="event.stopPropagation();addDish(${d.id})">+</span></div></div>
55 </div>`).join('');
56$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
57 <div class="card" style="display:flex;align-items:center;margin:8px 12px;padding:12px 16px">
58 <span style="color:var(--primary-dark);font-weight:800;font-size:20px;width:70px">¥${c.amt}</span>
59 <span style="flex:1;font-size:13px"><b>${c.name}</b><br><small style="color:#c08a78">${c.cond} · ${c.desc}</small></span>
60 <span class="tag">已领</span>
61 </div>`).join('');
62</script>
63</body></html>