小草面馆自助点餐_H5/index.html · 约 4513 字符
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<div class="banner">
12 <div>
13 <div class="bn-title">小草面馆</div>
14 <div class="bn-sub">扫码自助点餐 · 现煮现做<br/>招牌牛肉面 · 12 年地道老味道 · 上菜快翻台高</div>
15 <div class="bn-badge">🎁 新客首单立减 5 元</div>
16 </div>
17 <div class="bn-emoji">🍜</div>
18</div>
19<div class="table-box" data-toast="已识别桌号 A12，开始点餐">
20 <div class="tb-ico">📍</div>
21 <div class="tb-body"><b>请选择桌号 / 扫码点餐</b><span>入座后点击识别桌号，本桌 3 人可一起拼单</span></div>
22 <div class="tb-btn">识别桌号</div>
23</div>
24<div class="seckill">
25 <div class="sk-head"><b>⚡ 限时秒杀</b><div class="sk-time"><i>01</i>:<i>47</i>:<i>12</i></div></div>
26 <div class="sk-body" id="skList"></div>
27</div>
28<div class="quick-grid">
29 <a href="category.html"><div class="qicon">🍜</div>全部面品</a>
30 <a data-toast="本桌 3 人正在拼单"><div class="qicon">👥</div>多人拼单</a>
31 <a href="cart.html"><div class="qicon">🛒</div>购物车</a>
32 <a href="member.html"><div class="qicon">🎁</div>领券中心</a>
33 <a data-toast="邀请好友各得 5 元券"><div class="qicon">🤝</div>邀请有礼</a>
34</div>
35<div class="coupon-card">
36 <div class="cc-left"><b>新客立减 5 元无门槛券</b><span>全场通用 · 7 天内有效</span></div>
37 <div class="cc-btn">立即领取</div>
38</div>
39<div class="section-title">🔥 招牌推荐 <span>月售 10 万+</span></div>
40<div class="noodle-card" data-toast="已加入购物车">
41 <div class="nc-img">🍜</div>
42 <div class="nc-body">
43 <div class="nc-name">招牌红烧牛肉面 <span class="badge badge-hot">招牌</span></div>
44 <div class="nc-desc">慢炖三小时牛腩，汤头浓郁，面条筋道</div>
45 <div class="nc-meta">月销 1.5 万+ · 大块牛肉</div>
46 <div class="nc-foot"><div class="nc-price">¥28<small> /原32</small></div><div class="nc-add">+</div></div>
47 </div>
48</div>
49<div class="section-title">🍱 超值套餐</div>
50<div id="comboList"></div>
51<div class="section-title">🏪 门店导航</div>
52<div id="storeList"></div>
53
54
55<nav class="tabbar"><a class=" active" 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="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
56<script src="data.js"></script>
57<script>
58 var sk = document.getElementById('skList');
59 var h = '';
60 window.DATA.seckills.forEach(function (x) {
61 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'
62 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">¥' + x.old + '</div></div>';
63 });
64 sk.innerHTML = h;
65 var cl = document.getElementById('comboList');
66 var h2 = '';
67 window.DATA.combos.forEach(function (c) {
68 h2 += '<div class="noodle-card"><div class="nc-img">' + c.img + '</div><div class="nc-body">'
69 + '<div class="nc-name">' + c.name + ' <span class="badge badge-sale">套餐</span></div>'
70 + '<div class="nc-desc">' + c.desc + '</div>'
71 + '<div class="nc-foot"><div class="nc-price">¥' + c.price + '<small> /原' + c.old + '</small></div>'
72 + '<div class="nc-add" data-toast="套餐已加入购物车">+</div></div></div></div>';
73 });
74 cl.innerHTML = h2;
75 var sl = document.getElementById('storeList');
76 var h3 = '';
77 window.DATA.stores.slice(0, 2).forEach(function (s) {
78 h3 += '<div class="noodle-card"><div class="nc-img">🏪</div><div class="nc-body">'
79 + '<div class="nc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'
80 + '<div class="nc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'
81 + '<div class="nc-foot"><div class="nc-price" style="color:#c2410c;font-size:13px">' + s.dist + '</div>'
82 + '<div class="nc-add" data-toast="已选择该门店">导航</div></div></div></div>';
83 });
84 sl.innerHTML = h3;
85</script>
86<script src="app.js"></script>
87</body>
88</html>