小草面馆自助点餐_H5/detail.html · 约 4173 字符
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">📷 8 张实拍</div>🍜</div>
13<div class="detail-price">
14 <div class="dp-num">¥28<small> /小碗</small> <span style="color:#dc2626;font-size:13px">大碗 +4 元</span></div>
15 <div class="dp-meta">招牌红烧牛肉面 · 慢炖三小时牛腩 · 汤头浓郁 · 面条现煮筋道 · 堂食外卖均可</div>
16 <div class="dp-row">
17 <div class="dp-cell">🏷️ 月销 1.5 万+</div>
18 <div class="dp-cell">🔥 招牌必点</div>
19 <div class="dp-cell">⏱️ 出餐 8 分钟</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">小碗 ¥28</div><div class="spec-opt">大碗 ¥32</div></div></div>
26 <div class="spec-row"><span class="sr-label">辣度</span><div class="sr-opts"><div class="spec-opt">不辣</div><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-opts"><div class="spec-opt">加卤蛋 +3</div><div class="spec-opt">加牛肉 +10</div><div class="spec-opt">加豆皮 +3</div><div class="spec-opt">加青菜 +2</div><div class="spec-opt">加面 +4</div></div></div>
28 <div class="spec-row"><span class="sr-label">数量</span><div class="sr-num"><i>-</i><b>1</b><i>+</i></div></div>
29</div>
30<div class="section-title">📋 关于这碗面</div>
31<div class="card" style="margin-top:0;font-size:12px;color:#6b4a30;line-height:2">
32 汤底：牛骨 + 鸡架文火熬制 4 小时，不勾兑<br/>
33 面条：手工碱水面，现煮 90 秒，爽滑筋道<br/>
34 牛肉：Inner Mongolia 牛腩，慢炖入味，大块不碎<br/>
35 服务：堂食 8 分钟出餐 · 外卖 30 分钟达 · 不好吃可退
36</div>
37<div class="section-title">💬 用户评价（2980+）</div>
38<div id="evalList"></div>
39<div class="section-title">❤️ 猜你喜欢</div>
40<div id="guessList" style="display:flex;gap:10px;overflow-x:auto;padding:0 12px;scrollbar-width:none"></div>
41<div style="height:70px"></div>
42<div class="buy-bar">
43 <div class="bb-cart"><span class="ico">🛒<span class="num">3</span></span>购物车</div>
44 <div class="bb-btn buy" data-toast="已加入购物车">加入购物车</div>
45 <div class="bb-btn now" data-toast="订单提交成功">立即购买</div>
46</div>
47
48
49<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>
50<script src="data.js"></script>
51<script>
52 var el = document.getElementById('evalList');
53 var h = '';
54 window.DATA.evals.forEach(function (x) {
55 h += '<div class="eval-card"><div class="ev-head"><div class="ev-avatar">' + x.avatar + '</div>'
56 + '<div>' + x.name + '</div><div class="ev-star">' + x.star + '</div>'
57 + '</div><div class="ev-text">' + x.text + '</div></div>';
58 });
59 el.innerHTML = h;
60 var gl = document.getElementById('guessList');
61 var h2 = '';
62 window.DATA.noodles.slice(1, 5).forEach(function (b) {
63 h2 += '<div class="sk-item" style="width:110px"><div class="sk-img" style="height:80px">' + b.img + '</div>'
64 + '<div class="sk-name">' + b.name + '</div><div class="sk-price">¥' + b.price + '</div></div>';
65 });
66 gl.innerHTML = h2;
67</script>
68<script src="app.js"></script>
69</body>
70</html>