小草水果店_H5/index.html · 约 6394 字符
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">产地直采 · 坏果秒赔 · 1 小时极速达<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="邀请好友各得 5 元券"><div class="qicon">🤝</div>邀请有礼</a>
46</div>
47<div class="price-news">
48 <div class="pn-head">📈 今日鲜果行情 <span class="pn-tag">实时更新</span></div>
49 <div id="priceList"></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,#c2410c,#ea580c);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 可用 · 30 天内有效</span></div>
57 <div class="cc-btn" data-toast="优惠券已到账" style="background:#fff;color:#c2410c;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700">立即领取</div>
58</div>
59<div class="section-title">🔥 产地当季爆品 <span>月供 5 万斤+</span></div>
60<div class="beef-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">月供 1.8 万斤+ · 云南宾川 · 18mm+</div>
66 <div class="bc-foot"><div class="bc-price">¥19.9<small> /斤 原28.8</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 pl = document.getElementById('priceList');
79 var h0 = '';
80 window.DATA.priceNews.forEach(function (x) {
81 h0 += '<div class="pn-item"><span class="pn-name">' + x.name + '</span><span class="pn-price">' + x.price + '</span>'
82 + '<span class="pn-chg ' + x.dir + '">' + x.chg + '</span></div>';
83 });
84 pl.innerHTML = h0;
85 var sk = document.getElementById('skList');
86 var h = '';
87 window.DATA.seckills.forEach(function (x) {
88 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'
89 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">¥' + x.old + '</div></div>';
90 });
91 sk.innerHTML = h;
92 var cl = document.getElementById('comboList');
93 var h2 = '';
94 window.DATA.combos.forEach(function (c) {
95 h2 += '<div class="beef-card"><div class="bc-img">' + c.img + '</div><div class="bc-body">'
96 + '<div class="bc-name">' + c.name + ' <span class="badge badge-sale">组合</span></div>'
97 + '<div class="bc-desc">' + c.desc + '</div>'
98 + '<div class="bc-foot"><div class="bc-price">¥' + c.price + '<small> /原' + c.old + '</small></div>'
99 + '<div class="bc-add" data-toast="组合已加入购物车">+</div></div></div></div>';
100 });
101 cl.innerHTML = h2;
102 var sl = document.getElementById('storeList');
103 var h3 = '';
104 window.DATA.stores.slice(0, 2).forEach(function (s) {
105 h3 += '<div class="beef-card"><div class="bc-img">🏪</div><div class="bc-body">'
106 + '<div class="bc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'
107 + '<div class="bc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'
108 + '<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>';
109 });
110 sl.innerHTML = h3;
111</script>
112<script src="app.js"></script>
113</body>
114</html>