💻 代码预览 · 小草卤肉店

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">全品 9 折 · 周三会员日 8 折<br/>充值送券包 · 生日送猪蹄 · 积分兑好礼</div>
15  <div class="vh-btn" data-toast="已开通会员提醒">开通会员 ›</div>
16</div>
17<div class="section-title">充值有礼</div>
18<div class="vip-plan">
19  <div class="vp-item"><div class="vp-amt">¥100</div><div class="vp-get">送 ¥15 券包</div><div class="vp-name">充 100</div><div class="vp-btn" data-toast="已选择充 100">充这个</div></div>
20  <div class="vp-item hot"><div class="vp-hot">最划算</div><div class="vp-amt">¥200</div><div class="vp-get">送 ¥40 券包</div><div class="vp-name">充 200</div><div class="vp-btn" data-toast="已选择充 200">充这个</div></div>
21  <div class="vp-item"><div class="vp-amt">¥500</div><div class="vp-get">送 ¥120 券包</div><div class="vp-name">充 500</div><div class="vp-btn" data-toast="已选择充 500">充这个</div></div>
22</div>
23<div class="section-title">会员专属权益</div>
24<div class="vip-rights" id="rightList"></div>
25
26
27<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="orders.html"><span class="icon">📦</span>订单</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
28<script src="data.js"></script>
29<script>
30  var rl = document.getElementById('rightList');
31  var h = '';
32  window.DATA.vipRights.forEach(function (r) {
33    h += '<div class="vr-row"><div class="vr-emoji">' + r.emoji + '</div><div class="vr-body"><b>' + r.name + '</b><span>' + r.desc + '</span></div></div>';
34  });
35  rl.innerHTML = h;
36</script>
37<script src="app.js"></script>
38</body>
39</html>