小草面馆自助点餐_H5/cart.html · 约 3306 字符
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="cart-item checked">
13 <div class="ci-check">✓</div>
14 <div class="ci-img">🍜</div>
15 <div class="ci-body">
16 <div class="ci-name">招牌红烧牛肉面 <span class="badge badge-hot">招牌</span></div>
17 <div class="ci-spec">大碗 · 微辣 · 加卤蛋</div>
18 <div class="ci-foot"><div class="ci-price">¥31</div><div class="ci-num"><i>-</i><b>1</b><i>+</i></div></div>
19 </div>
20</div>
21<div class="cart-item checked">
22 <div class="ci-check">✓</div>
23 <div class="ci-img">🥤</div>
24 <div class="ci-body">
25 <div class="ci-name">冰镇酸梅汤</div>
26 <div class="ci-spec">冰 · 大杯</div>
27 <div class="ci-foot"><div class="ci-price">¥8</div><div class="ci-num"><i>-</i><b>2</b><i>+</i></div></div>
28 </div>
29</div>
30<div class="cart-item">
31 <div class="ci-check"></div>
32 <div class="ci-img">🌶️</div>
33 <div class="ci-body">
34 <div class="ci-name">重庆酸辣粉 <span class="badge badge-new">人气</span></div>
35 <div class="ci-spec">中辣 · 加面</div>
36 <div class="ci-foot"><div class="ci-price">¥20</div><div class="ci-num"><i>-</i><b>1</b><i>+</i></div></div>
37 </div>
38</div>
39<div class="coupon-card" style="margin-top:12px">
40 <div class="cc-left"><b>满 50 减 10 神券</b><span>购物车金额 67 元 · 已自动抵扣</span></div>
41 <div class="cc-btn">已用券</div>
42</div>
43<div class="check-box">
44 <div class="cb-row"><span class="cb-label">桌号</span><span class="cb-val">A12 桌 <span class="tag">3 人拼单</span></span></div>
45 <div class="cb-row"><span class="cb-label">取餐方式</span><span class="cb-val"><span class="opt sel">🍽️ 堂食</span><span class="opt">🥡 到店自提</span><span class="opt">🛵 外卖</span></span></div>
46 <div class="cb-row"><span class="cb-label">自提门店</span><span class="cb-val dim">钟楼总店（1.1km）›</span></div>
47 <div class="cb-row"><span class="cb-label">预约时间</span><span class="cb-val">现在 · 立即出餐 ›</span></div>
48 <div class="cb-row"><span class="cb-label">订单备注</span><span class="cb-val dim">少辣 / 不要香菜 ›</span></div>
49</div>
50<div style="height:80px"></div>
51<div class="settle-bar">
52 <div class="sb-all"><span class="ci-check">✓</span>全选</div>
53 <div class="sb-total">合计 <b>¥57</b><br/>已优惠 ¥10</div>
54 <div class="sb-btn" data-toast="已跳转结算">去结算</div>
55</div>
56
57<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🍜</span>菜单</a><a class=" active" 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>
58<script src="data.js"></script>
59
60<script src="app.js"></script>
61</body>
62</html>