小草美甲美妆_H5/cards.html · 约 3130 字符
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" style="background:linear-gradient(135deg,#8b5cf6,#d946ef);margin:12px;border-radius:14px;color:#fff;padding:18px">
4 <div style="font-size:16px;font-weight:700">指尖上的小仙女 · 金卡会员</div>
5 <div style="display:flex;margin-top:12px;gap:10px">
6 <div style="flex:1;text-align:center;background:rgba(255,255,255,.15);border-radius:10px;padding:10px 4px"><b style="display:block;font-size:18px">3260</b><span style="font-size:11px;opacity:.9">积分</span></div>
7 <div style="flex:1;text-align:center;background:rgba(255,255,255,.15);border-radius:10px;padding:10px 4px"><b style="display:block;font-size:18px">¥520</b><span style="font-size:11px;opacity:.9">余额</span></div>
8 <div style="flex:1;text-align:center;background:rgba(255,255,255,.15);border-radius:10px;padding:10px 4px"><b style="display:block;font-size:18px">18</b><span style="font-size:11px;opacity:.9">到店次数</span></div>
9 </div>
10</div>
11<div class="section-title">我的卡券</div>
12<div class="cards-row">
13 <div class="cr-item"><div class="cri">💳</div><b>储值卡</b><span>余额 ¥520</span></div>
14 <div class="cr-item"><div class="cri">🎫</div><b>美甲次卡</b><span>剩余 2 次</span></div>
15 <div class="cr-item"><div class="cri">🎟️</div><b>手护次卡</b><span>剩余 1 次</span></div>
16</div>
17<div class="section-title">办卡优惠 <span>储值更划算</span></div>
18<div id="card-list"></div>
19<div class="section-title">积分商城 <span>100积分抵2元</span></div>
20<div class="cards-row">
21 <div class="cr-item"><div class="cri">💅</div><b>免费单色</b><span>800积分</span></div>
22 <div class="cr-item"><div class="cri">🧴</div><b>手膜护理</b><span>500积分</span></div>
23 <div class="cr-item"><div class="cri">💄</div><b>口红小样</b><span>300积分</span></div>
24</div>
25<div style="height:80px"></div>
26<div class="tabbar">
27 <a href="index.html"><span class="icon">🏠</span>首页</a>
28 <a href="styles.html"><span class="icon">🖼️</span>作品</a>
29 <a href="book.html"><span class="icon">📅</span>预约</a>
30 <a class="active" href="cards.html"><span class="icon">💳</span>卡包</a>
31 <a href="mine.html"><span class="icon">👤</span>我的</a>
32</div>
33<script src="data.js"></script><script src="app.js"></script>
34<script>
35$('#card-list').innerHTML=CARDS.map(c=>`
36 <div class="card-ticket">
37 <div class="ct-emoji">${c.emoji}</div>
38 <div class="ct-body"><div class="ct-name">${c.name}</div><div class="ct-meta">${c.meta}</div></div>
39 <div style="text-align:center"><div class="ct-price">${c.price}</div><span class="ct-btn">立即购</span></div>
40 </div>`).join('');
41</script>
42</body></html>