小草牛肉坊_H5/index.html · 约 4398 字符
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/>顺丰冷链 · 扫码溯源 · 假一赔十</div>
15 <div class="bn-badge">🎁 新人首单立减 10 元</div>
16 </div>
17 <div class="bn-emoji">🥩</div>
18</div>
19<div class="seckill">
20 <div class="sk-head"><b>⚡ 限时秒杀</b><div class="sk-time"><i>02</i>:<i>13</i>:<i>45</i></div></div>
21 <div class="sk-body" id="skList"></div>
22</div>
23<div class="quick-grid">
24 <a href="category.html"><div class="qicon">🍖</div>全部牛肉</a>
25 <a href="trace.html"><div class="qicon">🔍</div>扫码溯源</a>
26 <a data-toast="附近门店 3 家"><div class="qicon">🏪</div>门店自提</a>
27 <a href="member.html"><div class="qicon">🎁</div>积分商城</a>
28 <a data-toast="邀请好友各得 10 元券"><div class="qicon">🤝</div>邀请有礼</a>
29</div>
30<div class="coupon-card">
31 <div class="cc-left"><b>新人专享 10 元无门槛券</b><span>全场通用 · 7 天内有效</span></div>
32 <div class="cc-btn">立即领取</div>
33</div>
34<div class="section-title">🔥 热销榜 TOP <span>月销 10 万+</span></div>
35<div id="hotList"></div>
36<div class="section-title">🆕 新品上市</div>
37<div class="beef-card" data-toast="已加入购物车">
38 <div class="bc-img">🎁</div>
39 <div class="bc-body">
40 <div class="bc-name">尊享礼盒·全家福 <span class="badge badge-new">新品</span></div>
41 <div class="bc-desc">牛腱+牛腩+牛筋三拼 3 斤装，送礼自留两相宜</div>
42 <div class="bc-meta">月销 3600+ · 可定制贺卡</div>
43 <div class="bc-foot"><div class="bc-price">¥188<small> /原228</small></div><div class="bc-add">+</div></div>
44 </div>
45</div>
46<div class="section-title">🏪 门店自提 · 免排队</div>
47<div id="storeList"></div>
48
49
50<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>
51<script src="data.js"></script>
52<script>
53 var sk = document.getElementById('skList');
54 var h = '';
55 window.DATA.seckills.forEach(function (x) {
56 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'
57 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">¥' + x.old + '</div></div>';
58 });
59 sk.innerHTML = h;
60 var hl = document.getElementById('hotList');
61 var h2 = '';
62 window.DATA.beefs.filter(function (b) { return b.hot; }).forEach(function (b) {
63 h2 += '<div class="beef-card"><div class="bc-img">' + b.img + '</div><div class="bc-body">'
64 + '<div class="bc-name">' + b.name + ' <span class="badge badge-hot">热销</span></div>'
65 + '<div class="bc-desc">' + b.spec + ' · ' + b.flavor + ' · ' + b.pack + '</div>'
66 + '<div class="bc-meta">月销 ' + b.sales.toLocaleString() + '+ · ' + b.unit + '</div>'
67 + '<div class="bc-foot"><div class="bc-price">¥' + b.price + '<small> /原' + b.old + '</small></div>'
68 + '<div class="bc-add" data-toast="已加入购物车">+</div></div></div></div>';
69 });
70 hl.innerHTML = h2;
71 var sl = document.getElementById('storeList');
72 var h3 = '';
73 window.DATA.stores.slice(0, 2).forEach(function (s) {
74 h3 += '<div class="beef-card"><div class="bc-img">🏪</div><div class="bc-body">'
75 + '<div class="bc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'
76 + '<div class="bc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'
77 + '<div class="bc-foot"><div class="bc-price" style="color:#b45309;font-size:13px">' + s.dist + '</div>'
78 + '<div class="bc-add" data-toast="已选择该门店自提">去自提</div></div></div></div>';
79 });
80 sl.innerHTML = h3;
81</script>
82<script src="app.js"></script>
83</body>
84</html>