小草卤肉店/detail.html · 约 3875 字符
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">📷 10 张实拍</div>🍖</div>
13<div class="detail-price">
14 <div class="dp-num">¥39.9<small> /只</small> <span style="color:#dc2626;font-size:13px">当日现卤直降 ¥10</span></div>
15 <div class="dp-meta">招牌卤猪蹄 · 老汤慢卤 3 小时 · 软糯脱骨胶原满满 · 真空锁鲜 7 天</div>
16 <div class="dp-row">
17 <div class="dp-cell">🍖 当日现卤</div>
18 <div class="dp-cell">🚚 1h 达</div>
19 <div class="dp-cell">🌿 0 添加</div>
20 <div class="dp-cell">✅ 包退</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">整只/¥39.9</div><div class="spec-opt">半只/¥22.9</div><div class="spec-opt">切件/¥42.9</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>当日现卤当日售 · 0 防腐剂 0 色素 · 真空锁鲜 7 天 · 不满意 7 天包退（开封除外）
31</div>
32<div class="section-title">💬 用户评价（3.6 万+）</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="vip.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.meats.slice(1, 5).forEach(function (m) {
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:#fde8df;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px">' + m.img + '</div>'
59 + '<div style="font-size:11px;margin-top:6px">' + m.name + '</div><div style="color:#dc2626;font-weight:800;font-size:13px;margin-top:2px">¥' + m.price + '</div></div>';
60 });
61 gl.innerHTML = h2;
62</script>
63<script src="app.js"></script>
64</body>
65</html>