💻 代码预览 · 小草奶茶铺

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><div class="bn-title">小草奶茶铺 🧋</div><div class="bn-sub">一口奶茶 · 一份小确幸</div><div class="bn-sub">新客立减5元｜周三会员日88折</div></div>
4  <div class="bn-emoji">🧋</div>
5</div>
6<div class="search-bar" onclick="location.href='menu.html'"><span class="sb-icon">🔍</span><span class="sb-text">搜索招牌黑糖珍珠鲜奶、杨枝甘露…</span><span class="sb-btn">去点单</span></div>
7<div class="quick-grid">
8  <a href="menu.html"><span class="qicon">🥤</span>招牌奶茶</a>
9  <a href="menu.html"><span class="qicon">🍹</span>鲜果茶</a>
10  <a href="menu.html"><span class="qicon">🧀</span>芝士奶盖</a>
11  <a href="member.html"><span class="qicon">🎁</span>会员中心</a>
12</div>
13<div class="section-title">限时特惠 <span>更多优惠去点单页查看</span></div>
14<div class="goods-grid" id="hot-list"></div>
15<div class="section-title">领券中心 <span>下单自动可用</span></div>
16<div id="coupon-list"></div>
17<div class="section-title">上新啦 <span>新品上市</span></div>
18<div class="goods-grid" id="new-list"></div>
19<div style="height:80px"></div>
20<div class="tabbar">
21  <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
22  <a href="menu.html"><span class="icon">🥤</span>点单</a>
23  <a href="orders.html"><span class="icon">📋</span>订单</a>
24  <a href="member.html"><span class="icon">💳</span>会员</a>
25  <a href="mine.html"><span class="icon">👤</span>我的</a>
26</div>
27<script src="data.js"></script><script src="app.js"></script>
28<script>
29const hot=GOODS.filter(g=>g.tag==='hot').slice(0,4);
30$('#hot-list').innerHTML=hot.map(g=>`
31  <div class="goods-card" onclick="openSpec(${g.id})">
32    <div class="gc-img">${g.emoji}<span class="badge badge-hot gc-tag">热销</span></div>
33    <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.desc}</div>
34    <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}</span><span class="gc-add">+</span></div></div>
35  </div>`).join('');
36const news=GOODS.filter(g=>g.tag==='new').slice(0,4);
37$('#new-list').innerHTML=news.map(g=>`
38  <div class="goods-card" onclick="openSpec(${g.id})">
39    <div class="gc-img">${g.emoji}<span class="badge badge-new gc-tag">新品</span></div>
40    <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.desc}</div>
41    <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}</span><span class="gc-add">+</span></div></div>
42  </div>`).join('');
43$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
44  <div class="coupon"><div class="cp-left"><div class="amt"><em>¥</em>${c.amt}</div><div>${c.cond}</div></div>
45  <div class="cp-body"><div class="cp-name">${c.name}</div><div class="cp-desc">${c.desc}</div></div><span class="cp-get" style="padding-right:14px">已领</span></div>`).join('')||'<div class="empty">优惠券已领完～</div>';
46</script>
47</body></html>