小草水果店_H5/detail.html · 约 4654 字符
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<header class="header"><a class="back" onclick="history.back()">‹</a><h1>商品详情</h1><span class="right"></span></header>
12<div class="detail-img"><div class="di-badge">📷 实拍 · 产地溯源码</div>🍇</div>
13<div class="detail-price">
14 <div class="dp-num">¥19.9<small> /斤</small> <span style="color:#dc2626;font-size:13px">会员 ¥15.9 起</span></div>
15 <div class="dp-meta">云南阳光玫瑰青提 · 产地直采 · 18mm+ 大果 · 带溯源码 · 家庭办公通用</div>
16 <div class="dp-row">
17 <div class="dp-cell">🌱 产地直采</div>
18 <div class="dp-cell">🥇 甜度检测</div>
19 <div class="dp-cell">❄️ 冷链到家</div>
20 <div class="dp-cell">🚚 1h 达</div>
21 </div>
22</div>
23<div class="tier-box">
24 <div class="tb-title">💎 一客一价 · 您的等级价</div>
25 <div class="tier-row"><span class="tr-label">零售价</span><span class="tr-price">¥<b>19.9</b>/斤</span></div>
26 <div class="tier-row"><span class="tr-label">批发价</span><span class="tr-price">¥<b>17.9</b>/斤</span></div>
27 <div class="tier-row cur"><span class="tr-label">金卡会员价</span><span class="tr-price">¥<b>15.9</b>/斤</span></div>
28 <div style="text-align:right;font-size:11px;color:#c4b299;margin-top:8px">采购量越大越优惠 · 当前显示金卡会员价</div>
29</div>
30<div class="spec-box">
31 <div class="sb-title">选择规格</div>
32 <div class="spec-row"><span class="sr-label">包装</span><div class="sr-opts"><div class="spec-opt sel">散装(斤)</div><div class="spec-opt">盒装 2 斤</div><div class="spec-opt">礼盒 5 斤</div></div></div>
33 <div class="spec-row"><span class="sr-label">果径</span><div class="sr-opts"><div class="spec-opt sel">18mm+</div><div class="spec-opt">20mm+</div><div class="spec-opt">22mm+ 特级</div></div></div>
34 <div class="spec-row"><span class="sr-label">数量</span><div class="sr-num"><i>-</i><b>2</b><i>+</i></div></div>
35</div>
36<div class="section-title">📋 关于这箱果</div>
37<div class="card" style="margin-top:0;font-size:12px;color:#6b5842;line-height:2">
38 产地溯源：云南宾川核心产区，每箱附采摘日期 + 溯源码，扫码可查<br/>
39 甜度检测：到店逐箱测糖度，16 度以上方可上架，甜度不达标包退<br/>
40 果径分级：18mm/20mm/22mm 三档分级，果径越大单价越高<br/>
41 冷链锁鲜：顺丰冷运或自有前置仓，冰袋 + 保温箱锁鲜到家<br/>
42 坏果赔付：签收 24h 内拍照理赔，坏果按斤秒赔无需退整箱
43</div>
44<div class="section-title">💬 果友评价（1200+）</div>
45<div id="evalList"></div>
46<div class="section-title">❤️ 猜你喜欢</div>
47<div id="guessList" style="display:flex;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none"></div>
48<div style="height:70px"></div>
49<div class="buy-bar">
50 <div class="bb-cart"><span class="ico">🛒<span class="num">5</span></span>购物车</div>
51 <div class="bb-btn buy" data-toast="已加入购物车">加入购物车</div>
52 <div class="bb-btn now" data-toast="订单提交成功">立即购买</div>
53</div>
54
55
56<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class=" active" 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>
57<script src="data.js"></script>
58<script>
59 var el = document.getElementById('evalList');
60 var h = '';
61 window.DATA.evals.forEach(function (x) {
62 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'
63 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'
64 + '</div><div class="ev-text">' + x.text + '</div></div>';
65 });
66 el.innerHTML = h;
67 var gl = document.getElementById('guessList');
68 var h2 = '';
69 window.DATA.products.slice(1, 5).forEach(function (b) {
70 h2 += '<div class="sk-item" style="width:110px"><div class="sk-img" style="height:80px">' + b.img + '</div>'
71 + '<div class="sk-name">' + b.name + '</div><div class="sk-price">¥' + b.price + '</div></div>';
72 });
73 gl.innerHTML = h2;
74</script>
75<script src="app.js"></script>
76</body>
77</html>