驰旭鲜卤_H5/index.html · 约 6369 字符
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="search-box" data-toast="按口味/部位搜索：麻辣鸭脖、五香猪蹄…">
20 <span class="s-ico">🔍</span>
21 <input placeholder="搜索鸭脖 / 凤爪 / 猪蹄 / 卤藕片…"/>
22 <span class="s-btn">搜索</span>
23</div>
24<div class="cert-bar">
25 <div class="cb-ico">🔥</div>
26 <div class="cb-body">
27 <b>三十味老卤 · 当日现卤现卖</b>
28 <span>中央厨房统一卤制，冷链锁鲜到家，每份可查卤制时间</span>
29 </div>
30 <div class="cb-btn" data-toast="已查看卤制工艺与溯源">查看工艺</div>
31</div>
32<div class="cat-grid">
33 <a href="category.html"><span class="c-emoji">🦆</span><span class="c-name">招牌鸭货</span></a>
34 <a href="category.html"><span class="c-emoji">🐔</span><span class="c-name">卤香荤菜</span></a>
35 <a href="category.html"><span class="c-emoji">🥬</span><span class="c-name">素食卤味</span></a>
36 <a href="category.html"><span class="c-emoji">🎁</span><span class="c-name">锁鲜装</span></a>
37 <a href="category.html"><span class="c-emoji">🍱</span><span class="c-name">卤味礼盒</span></a>
38 <a href="category.html"><span class="c-emoji">🌶️</span><span class="c-name">风味系列</span></a>
39</div>
40<div class="quick-grid">
41 <a href="category.html"><div class="qicon">📦</div>招牌选购</a>
42 <a data-toast="已为你开启每周卤味订阅"><div class="qicon">🔁</div>卤味订阅</a>
43 <a href="member.html"><div class="qicon">💳</div>会员卡</a>
44 <a href="cart.html"><div class="qicon">🛒</div>购物车</a>
45 <a data-toast="邀请好友各得 10 元"><div class="qicon">🤝</div>分享有礼</a>
46</div>
47<div class="hot-list">
48 <div class="hl-head">🔥 今日热卤榜 <span class="hl-tag">按月销</span></div>
49 <div id="hotList"></div>
50</div>
51<div class="seckill">
52 <div class="sk-head"><b>⚡ 限时秒杀 · 现卤特价</b><div class="sk-time"><i>02</i>:<i>12</i>:<i>40</i></div></div>
53 <div class="sk-body" id="skList"></div>
54</div>
55<div class="coupon-card" style="background:linear-gradient(135deg,#7f2410,#a83218);margin:12px;border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;color:#fff">
56 <div style="flex:1"><b style="font-size:18px;display:block">新客无门槛 10 元券</b><span style="font-size:11px;opacity:.9">全店通用 · 30 天内有效</span></div>
57 <div class="cc-btn" data-toast="优惠券已到账" style="background:#fff;color:#7f2410;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700">立即领取</div>
58</div>
59<div class="section-title">🔥 招牌爆品 <span>月供数万份</span></div>
60<div class="lu-card" data-toast="已加入购物车">
61 <div class="bc-img">🦆</div>
62 <div class="bc-body">
63 <div class="bc-name">招牌卤鸭脖 <span class="badge badge-org">招牌</span></div>
64 <div class="bc-desc">三十味老卤慢炖，麻辣鲜香透骨入味</div>
65 <div class="bc-meta">月售 2.3 万份+ · 麻辣</div>
66 <div class="bc-foot"><div class="bc-price">¥18<small> /份 原22</small></div><div class="bc-add">+</div></div>
67 </div>
68</div>
69<div class="section-title">🎁 组合卤味包</div>
70<div id="comboList"></div>
71<div class="section-title">🏪 鲜卤自提 / 配送点</div>
72<div id="storeList"></div>
73
74
75<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>
76<script src="data.js"></script>
77<script>
78 var hl = document.getElementById('hotList');
79 var h0 = '';
80 window.DATA.hotList.forEach(function (x, i) {
81 h0 += '<div class="hl-item"><div class="hl-rank">' + (i + 1) + '</div>'
82 + '<div class="hl-name">' + x.name + ' <span style="font-size:10px;color:#c0392b">' + x.tag + '</span></div>'
83 + '<div class="hl-num">' + x.sales + '</div></div>';
84 });
85 hl.innerHTML = h0;
86 var sk = document.getElementById('skList');
87 var h = '';
88 window.DATA.seckills.forEach(function (x) {
89 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'
90 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">¥' + x.old + '</div></div>';
91 });
92 sk.innerHTML = h;
93 var cl = document.getElementById('comboList');
94 var h2 = '';
95 window.DATA.combos.forEach(function (c) {
96 h2 += '<div class="lu-card"><div class="bc-img">' + c.img + '</div><div class="bc-body">'
97 + '<div class="bc-name">' + c.name + ' <span class="badge badge-sale">组合</span></div>'
98 + '<div class="bc-desc">' + c.desc + '</div>'
99 + '<div class="bc-foot"><div class="bc-price">¥' + c.price + '<small> /原' + c.old + '</small></div>'
100 + '<div class="bc-add" data-toast="组合已加入购物车">+</div></div></div></div>';
101 });
102 cl.innerHTML = h2;
103 var sl = document.getElementById('storeList');
104 var h3 = '';
105 window.DATA.stores.slice(0, 2).forEach(function (s) {
106 h3 += '<div class="lu-card"><div class="bc-img">🏪</div><div class="bc-body">'
107 + '<div class="bc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'
108 + '<div class="bc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'
109 + '<div class="bc-foot"><div class="bc-add" data-toast="已选择该自提点" style="width:auto;height:auto;border-radius:14px;padding:6px 14px;font-size:12px">选点</div></div></div></div>';
110 });
111 sl.innerHTML = h3;
112</script>
113<script src="app.js"></script>
114</body>
115</html>