小草洗鞋店/vip.html · 约 3376 字符
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="vip-hero">
13 <div class="vh-title">💎 小草洗鞋会员</div>
14 <div class="vh-sub">储值送券包 · 次卡单次更省<br/>会员价 9.9 元起 · 优先清洗 · 生日免单</div>
15 <div class="vh-btn" data-toast="已开通会员提醒">开通会员 ›</div>
16</div>
17<div class="vip-card">
18 🎁 <b>储值福利：</b>充 100 送 15 券包 · 充 200 送 40+免单 1 双 · 充 500 送 120+季卡 5 折<br/>
19 ⭐ 会员权益：全品会员价 9 折 · 生日当月送免费洗鞋 1 双 · 积分兑换护理小样 · 优先清洗通道
20</div>
21<div class="section-title">💰 储值送券</div>
22<div class="recharge-grid" id="rechargeList"></div>
23<div class="section-title">🎫 次卡套餐 · 越洗越省</div>
24<div class="card-plan">
25 <div class="cp-item"><div class="cp-price">¥79<small>/5双</small></div><div class="cp-name">5 次卡</div><div class="cp-desc">单双 ¥15.8 · 日常通勤</div><div class="cp-btn" data-toast="5次卡开通成功">开通</div></div>
26 <div class="cp-item hot"><div class="cp-hot">最热</div><div class="cp-price">¥149<small>/10双</small></div><div class="cp-name">10 次卡</div><div class="cp-desc">单双 ¥14.9 · 省 21%</div><div class="cp-btn" data-toast="10次卡开通成功">开通</div></div>
27 <div class="cp-item"><div class="cp-price">¥399<small>/季</small></div><div class="cp-name">季卡</div><div class="cp-desc">不限次 20 双 · 全家清空</div><div class="cp-btn" data-toast="季卡开通成功">开通</div></div>
28</div>
29<div class="section-title">🎁 会员专属权益</div>
30<div class="card" style="margin-top:0;font-size:12px;color:#365a64;line-height:2">
31 ⭐ 全品会员价 9 折 · 新客首单立减至 9.9 元<br/>
32 🚚 优先清洗通道 · 预约当日最快 24h 取回<br/>
33 🎂 生日当月免费洗鞋 1 双 + 20 元券<br/>
34 🏆 消费积分可兑换护理小样 / 免配送券 / 次卡<br/>
35 👥 邀请好友双方得洗鞋券，分享海报一键生成
36</div>
37<div style="height:70px"></div>
38
39
40<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="vip.html"><span class="icon">💎</span>会员</a><a class="" href="track.html"><span class="icon">📦</span>进度</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
41<script src="data.js"></script>
42<script>
43 var rl = document.getElementById('rechargeList');
44 var h = '';
45 window.DATA.recharges.forEach(function (r) {
46 h += '<div class="rg-item' + (r.hot ? ' hot' : '') + '">'
47 + (r.hot ? '<div class="rg-hot">最划算</div>' : '')
48 + '<div class="rg-amt">' + r.amt + '</div>'
49 + '<div class="rg-gift">' + r.gift + '</div>'
50 + '<div class="rg-btn">去充值</div></div>';
51 });
52 rl.innerHTML = h;
53</script>
54<script src="app.js"></script>
55</body>
56</html>