小草花坊_H5/detail.html · 约 3907 字符
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">📷 12 张实拍</div>🌹</div>
13<div class="detail-price">
14 <div class="dp-num">¥299<small> /束</small> <span style="color:#dc2626;font-size:13px">七夕直降 ¥60</span></div>
15 <div class="dp-meta">厄瓜多尔红玫瑰 19 支 · 进口 A 级花材 · 花语：热烈永恒的爱 · 附赠手写贺卡</div>
16 <div class="dp-row">
17 <div class="dp-cell">🌹 19 支</div>
18 <div class="dp-cell">🚚 同城 2h</div>
19 <div class="dp-cell">💌 代写贺卡</div>
20 <div class="dp-cell">✅ 48h 包赔</div>
21 </div>
22</div>
23<div class="spec-box">
24 <div class="sb-title">选择规格</div>
25 <div class="spec-row"><span class="sr-label">支数</span><div class="sr-opts"><div class="spec-opt sel">11 支/¥199</div><div class="spec-opt">19 支/¥299</div><div class="spec-opt">33 支/¥499</div></div></div>
26 <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></div>
27 <div class="spec-row"><span class="sr-label">数量</span><div class="sr-num"><i>-</i><b>1</b><i>+</i></div></div>
28</div>
29<div class="gift-box">
30 💌 <b>心意定制：</b>可代写贺卡（20 字内免费）· 指定送达日期与时段 · 附送花瓶/巧克力/玩偶等搭配礼
31</div>
32<div class="section-title">💬 用户评价（1.2 万+）</div>
33<div id="evalList"></div>
34<div class="section-title">❤️ 猜你喜欢</div>
35<div id="guessList" style="display:flex;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none"></div>
36<div style="height:70px"></div>
37<div class="buy-bar">
38 <div class="bb-cart"><span class="ico">🛒<span class="num">1</span></span>购物车</div>
39 <div class="bb-btn cart" data-toast="已加入购物车">加入购物车</div>
40 <div class="bb-btn now" data-toast="订单提交成功">立即预订</div>
41</div>
42
43
44<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="subscribe.html"><span class="icon">📅</span>订阅</a><a class="" href="orders.html"><span class="icon">📦</span>订单</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
45<script src="data.js"></script>
46<script>
47 var el = document.getElementById('evalList');
48 var h = '';
49 window.DATA.evals.forEach(function (x) {
50 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'
51 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'
52 + '</div><div class="ev-text">' + x.text + '</div></div>';
53 });
54 el.innerHTML = h;
55 var gl = document.getElementById('guessList');
56 var h2 = '';
57 window.DATA.flowers.slice(1, 5).forEach(function (f) {
58 h2 += '<div style="width:110px;flex-shrink:0;background:#fff;border-radius:10px;padding:10px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="height:70px;background:#fde7f2;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px">' + f.img + '</div>'
59 + '<div style="font-size:11px;margin-top:6px">' + f.name + '</div><div style="color:#dc2626;font-weight:800;font-size:13px;margin-top:2px">¥' + f.price + '</div></div>';
60 });
61 gl.innerHTML = h2;
62</script>
63<script src="app.js"></script>
64</body>
65</html>