小草生鲜到家_H5/index.html · 约 4292 字符
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="topbar">
3 <div class="tb-row"><span>📍</span><span class="tb-addr">阳光花园</span><span style="opacity:.8;font-size:11px">▾ 附近有3家门店</span><span style="margin-left:auto;font-size:12px">⏰ 30分钟达</span></div>
4 <div class="tb-search" onclick="location.href='category.html'"><span>🔍</span><span>搜索 蔬菜 / 水果 / 肉禽海鲜…</span></div>
5</div>
6<div class="banner">
7 <div><div class="bn-title">🥬 产地直采 · 每日鲜达</div><div class="bn-sub">新用户首单立减10元 · 满59元免运费</div></div>
8 <div class="bn-emoji">🌽</div>
9</div>
10<div class="seckill">
11 <div class="sk-head">⚡ 限时秒杀 <span class="sk-timer">20:00 场 · 距结束 01:26:33</span></div>
12 <div class="sk-list" id="seckill-list"></div>
13</div>
14<div class="quick-grid">
15 <a href="category.html"><span class="qicon">🥬</span>新鲜蔬菜</a>
16 <a href="category.html"><span class="qicon">🍉</span>时令水果</a>
17 <a href="category.html"><span class="qicon">🥩</span>肉禽蛋品</a>
18 <a href="category.html"><span class="qicon">🦐</span>水产海鲜</a>
19</div>
20<div class="section-title">今日特价 <span>限时折扣</span></div>
21<div class="goods-grid" id="sale-list"></div>
22<div class="section-title">为你推荐 <span>根据你的常购</span></div>
23<div class="goods-grid" id="rec-list"></div>
24<div class="card" style="display:flex;gap:10px">
25 <div class="after-sale" style="width:100%">
26 <div class="as-item"><span class="asi">🥬</span>坏果坏菜<br><b style="color:var(--primary)">48h包赔</b></div>
27 <div class="as-item"><span class="asi">❄️</span>全程冷链<br><b style="color:var(--primary)">新鲜到家</b></div>
28 <div class="as-item"><span class="asi">🛵</span>极速达<br><b style="color:var(--primary)">约40分钟</b></div>
29 </div>
30</div>
31<div style="height:80px"></div>
32<div class="tabbar">
33 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
34 <a href="category.html"><span class="icon">🗂️</span>分类</a>
35 <a href="orders.html"><span class="icon">📦</span>订单</a>
36 <a href="mine.html"><span class="icon">👤</span>我的</a>
37 <a href="mine.html"><span class="icon">🛒</span>购物车</a>
38</div>
39<script src="data.js"></script><script src="app.js"></script>
40<script>
41const sk=GOODS.filter(g=>g.tag==='sale').slice(0,5);
42$('#seckill-list').innerHTML=sk.map(g=>`<div class="sk-item" onclick="location.href='detail.html?id=${g.id}'"><div class="ski">${g.emoji}</div><div class="skn">${g.name}</div><div class="skp">${fmt(g.price)}<s class="sko">${fmt(g.price*1.4)}</s></div></div>`).join('');
43const sale=GOODS.filter(g=>g.tag==='sale'||g.tag==='ice').slice(0,4);
44$('#sale-list').innerHTML=sale.map(g=>`
45 <div class="goods-card" onclick="location.href='detail.html?id=${g.id}'">
46 <div class="gc-img">${g.emoji}<span class="badge badge-sale gc-tag">${g.tag==='ice'?'冷链':g.tag==='sale'?'特价':'热销'}</span></div>
47 <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.desc}</div><div class="gc-origin">${g.origin}</div>
48 <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}<span class="gc-unit">${g.unit}</span></span><span class="gc-add" onclick="event.stopPropagation();addToCart(${g.id})">+</span></div></div>
49 </div>`).join('');
50const rec=GOODS.filter(g=>g.tag==='hot').slice(0,4);
51$('#rec-list').innerHTML=rec.map(g=>`
52 <div class="goods-card" onclick="location.href='detail.html?id=${g.id}'">
53 <div class="gc-img">${g.emoji}<span class="badge badge-hot gc-tag">热销</span></div>
54 <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.desc}</div><div class="gc-origin">${g.origin}</div>
55 <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}<span class="gc-unit">${g.unit}</span></span><span class="gc-add" onclick="event.stopPropagation();addToCart(${g.id})">+</span></div></div>
56 </div>`).join('');
57</script>
58</body></html>