💻 代码预览 · 小草生鲜到家

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="header"><span class="back" onclick="history.back()">‹</span><h1>商品详情</h1><span class="right">🛒</span></div>
3<div class="detail-img" id="d-img">🥬</div>
4<div class="detail-info">
5  <div class="di-name" id="d-name"></div>
6  <div class="di-desc" id="d-desc"></div>
7  <div class="di-price"><em>¥</em><span id="d-price"></span><span class="di-unit" id="d-unit"></span></div>
8  <div class="di-tags" id="d-tags"></div>
9</div>
10<div class="card">
11  <div class="section-title" style="margin:0 0 4px">商品信息</div>
12  <div class="info-row"><span>🌱 产地溯源</span><b id="d-origin"></b></div>
13  <div class="info-row"><span>❄️ 配送方式</span><b>全程冷链 · 约40分钟达</b></div>
14  <div class="info-row"><span>📦 库存状态</span><b id="d-stock"></b></div>
15  <div class="info-row"><span>🛡️ 售后保障</span><b>坏果坏菜48h包赔</b></div>
16</div>
17<div class="card">
18  <div class="section-title" style="margin:0 0 4px">用户评价（4.9分）</div>
19  <div id="reviews"></div>
20</div>
21<div style="height:90px"></div>
22<div style="position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;display:flex;gap:10px;padding:10px 12px;border-top:1px solid #eee;z-index:99">
23  <button class="btn btn-outline" style="flex:1" onclick="addToCart(CURRENT.id);toast('已加入购物车')">加入购物车</button>
24  <button class="btn btn-primary" style="flex:1" onclick="addToCart(CURRENT.id);setTimeout(()=>location.href='cart.html',500)">立即购买</button>
25</div>
26<script src="data.js"></script><script src="app.js"></script>
27<script>
28const id=new URLSearchParams(location.search).get('id')||1;
29const g=goodsById(id);window.CURRENT=g;
30$('#d-img').textContent=g.emoji;$('#d-name').textContent=g.name;$('#d-desc').textContent=g.desc;
31$('#d-price').textContent=g.price.toFixed(2);$('#d-unit').textContent=g.unit;
32$('#d-origin').textContent=g.origin;$('#d-stock').textContent=g.stock;
33$('#d-tags').innerHTML=(g.tag==='hot'?'<span class="tag">🔥 热销</span>':'')+(g.tag==='new'?'<span class="tag">✨ 新品</span>':'')+(g.tag==='sale'?'<span class="tag">⚡ 特价</span>':'')+(g.tag==='ice'?'<span class="tag">❄️ 冷链</span>':'')+'<span class="tag">当日达</span><span class="tag">48h包赔</span>';
34$('#reviews').innerHTML=REVIEWS.map(r=>`<div class="review-item"><div class="rv-avatar">${r.name[0]}</div><div style="flex:1"><div style="display:flex;justify-content:space-between"><span class="rv-name">${r.name}</span><span class="rv-star">${'★'.repeat(r.star)}</span></div><div class="rv-text">${r.text}</div></div></div>`).join('');
35</script>
36</body></html>