小草美发沙龙_H5/cards.html · 约 3786 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>会员卡包 · 小草美发沙龙</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>会员卡包</h1><span class="right">💳</span></div>
3<div class="member-hero">
4 <div class="mh-name">发量王者 · 钻石会员</div>
5 <div class="mh-level">8.5折 · 生日礼 · 优先约首席</div>
6 <div class="mh-stats">
7 <div><b>4260</b><span>积分</span></div>
8 <div><b>¥680</b><span>余额</span></div>
9 <div><b>16</b><span>到店次数</span></div>
10 </div>
11</div>
12<div class="section-title">我的卡券</div>
13<div style="display:flex;gap:10px;padding:0 12px">
14 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">💳</div><b style="display:block;font-size:14px;margin-top:4px">储值卡</b><span style="font-size:10px;color:#a3967a">余额 ¥680</span></div>
15 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">🎫</div><b style="display:block;font-size:14px;margin-top:4px">剪发次卡</b><span style="font-size:10px;color:#a3967a">剩余 3 次</span></div>
16 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">🎟️</div><b style="display:block;font-size:14px;margin-top:4px">养护卡</b><span style="font-size:10px;color:#a3967a">剩余 2 次</span></div>
17</div>
18<div class="section-title">办卡优惠 <span>储值更划算</span></div>
19<div id="card-list"></div>
20<div class="section-title">积分商城 <span>100积分抵2元</span></div>
21<div style="display:flex;gap:10px;padding:0 12px">
22 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">🧴</div><b style="display:block;font-size:13px;margin-top:4px">洗护套装</b><span style="font-size:10px;color:#a3967a">800积分</span></div>
23 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">💆</div><b style="display:block;font-size:13px;margin-top:4px">头皮检测</b><span style="font-size:10px;color:#a3967a">300积分</span></div>
24 <div style="flex:1;background:#fff;border-radius:14px;padding:14px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)"><div style="font-size:28px">✂️</div><b style="display:block;font-size:13px;margin-top:4px">免费吹造型</b><span style="font-size:10px;color:#a3967a">200积分</span></div>
25</div>
26<div style="height:80px"></div>
27<div class="tabbar">
28 <a href="index.html"><span class="icon">🏠</span>首页</a>
29 <a href="services.html"><span class="icon">💈</span>服务</a>
30 <a href="stylists.html"><span class="icon">🧑🎨</span>发型师</a>
31 <a href="book.html"><span class="icon">📅</span>预约</a>
32 <a class="active" href="mine.html"><span class="icon">👤</span>我的</a>
33</div>
34<script src="data.js"></script><script src="app.js"></script>
35<script>
36$('#card-list').innerHTML=CARDS.map(c=>`
37 <div class="card-ticket">
38 <div class="ct-emoji">${c.emoji}</div>
39 <div class="ct-body"><div class="ct-name">${c.name}</div><div class="ct-meta">${c.meta}</div></div>
40 <div style="text-align:center"><div class="ct-price">${c.price}</div><span class="ct-btn">立即购</span></div>
41 </div>`).join('');
42</script>
43</body></html>