某杰蔬菜批发配送_H5/detail.html · 约 4503 字符
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">¥1.8<small> /斤</small> <span style="color:#dc2626;font-size:13px">大客户 ¥1.3 起</span></div>
15 <div class="dp-meta">山东寿光大白菜 · 当日采摘 · 产地直供 · 带溯源码 · 食堂餐饮商超均可</div>
16 <div class="dp-row">
17 <div class="dp-cell">🏷️ 月供 3.2 万斤</div>
18 <div class="dp-cell">📍 山东寿光</div>
19 <div class="dp-cell">✅ 检测合格</div>
20 <div class="dp-cell">🚚 早市达</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>1.8</b>/斤</span></div>
26 <div class="tier-row"><span class="tr-label">批发价</span><span class="tr-price">¥<b>1.5</b>/斤</span></div>
27 <div class="tier-row cur"><span class="tr-label">大客户协议价</span><span class="tr-price">¥<b>1.3</b>/斤</span></div>
28 <div style="text-align:right;font-size:11px;color:#9bbf93;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">箱装 10 斤</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">一级</div><div class="spec-opt">二级(惠)</div></div></div>
34 <div class="spec-row"><span class="sr-label">数量</span><div class="sr-num"><i>-</i><b>10</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:#3c5a35;line-height:2">
38 产地：山东寿光核心产区，合作社直采不倒手<br/>
39 品控：每批附农残检测报告 + 产地溯源码，扫码可查<br/>
40 新鲜度：当日凌晨采摘，冷链直发，到仓不超过 12 小时<br/>
41 规格：散装按斤、箱装/袋装大包装更优惠，详情看定价
42</div>
43<div class="section-title">💬 采购商评价（1280+）</div>
44<div id="evalList"></div>
45<div class="section-title">❤️ 猜你需要</div>
46<div id="guessList" style="display:flex;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none"></div>
47<div style="height:70px"></div>
48<div class="buy-bar">
49 <div class="bb-cart"><span class="ico">📋<span class="num">5</span></span>进货单</div>
50 <div class="bb-btn buy" data-toast="已加入进货单">加入进货单</div>
51 <div class="bb-btn now" data-toast="订单提交成功">立即下单</div>
52</div>
53
54
55<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>
56<script src="data.js"></script>
57<script>
58 var el = document.getElementById('evalList');
59 var h = '';
60 window.DATA.evals.forEach(function (x) {
61 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'
62 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'
63 + '</div><div class="ev-text">' + x.text + '</div></div>';
64 });
65 el.innerHTML = h;
66 var gl = document.getElementById('guessList');
67 var h2 = '';
68 window.DATA.products.slice(1, 5).forEach(function (b) {
69 h2 += '<div class="sk-item" style="width:110px"><div class="sk-img" style="height:80px">' + b.img + '</div>'
70 + '<div class="sk-name">' + b.name + '</div><div class="sk-price">¥' + b.price + '</div></div>';
71 });
72 gl.innerHTML = h2;
73</script>
74<script src="app.js"></script>
75</body>
76</html>