小草文具店_H5/detail.html · 约 4664 字符
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">¥2.5<small> /支</small> <span style="color:#dc2626;font-size:13px">会员 ¥1.9 起</span></div>
15 <div class="dp-meta">速干中性笔 0.5mm 黑 · 晨光同源产线 · 速干不晕染 · 学生办公通用</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">🚚 满免邮</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>2.5</b>/支</span></div>
26 <div class="tier-row"><span class="tr-label">批发价</span><span class="tr-price">¥<b>2.2</b>/支</span></div>
27 <div class="tier-row cur"><span class="tr-label">金卡会员价</span><span class="tr-price">¥<b>1.9</b>/支</span></div>
28 <div style="text-align:right;font-size:11px;color:#9aa3b8;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">蓝</div><div class="spec-opt">红</div><div class="spec-opt">多色混装</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">盒装 10 支</div><div class="spec-opt">整箱 50 支</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:#3a4256;line-height:2">
38 正品保障：晨光同源产线，品牌授权可验真，假一赔十<br/>
39 墨水：低粘度速干墨水，落纸即干不晕染，左手写字也不花<br/>
40 笔尖：0.5mm 不锈钢笔尖，顺滑出锋不断墨，书写量大不累手<br/>
41 定制：支持班级/企业 logo 印字，盒装整箱走批发价更划算<br/>
42 配送：满 99 元包邮，同城门店自提免运费，开学季当日可达
43</div>
44<div class="section-title">💬 用户评价（2980+）</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>