小草花坊_H5/subscribe.html · 约 2898 字符
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="sub-hero">
13 <div class="sh-title">📅 订阅鲜花 · 每周新惊喜</div>
14 <div class="sh-sub">云南产地直供 · 花材 48h 新鲜直达<br/>每周配送 1 束 · 自主选配送日 · 漏发自动顺延</div>
15 <div class="sh-btn" data-toast="已开通订阅提醒">订阅套餐 ›</div>
16</div>
17<div class="section-title">选择套餐</div>
18<div class="sub-plan">
19 <div class="sp-item"><div class="sp-price">¥99<small>/月</small></div><div class="sp-name">月花</div><div class="sp-desc">每周 1 束 · 4 束/月</div><div class="sp-btn" data-toast="已选择月花套餐">选这个</div></div>
20 <div class="sp-item hot"><div class="sp-hot">最划算</div><div class="sp-price">¥269<small>/季</small></div><div class="sp-name">季花</div><div class="sp-desc">每周 1 束 · 12 束/季 · 省 8%</div><div class="sp-btn" data-toast="已选择季花套餐">选这个</div></div>
21 <div class="sp-item"><div class="sp-price">¥968<small>/年</small></div><div class="sp-name">年花</div><div class="sp-desc">每周 1 束 · 52 束/年 · 省 19%</div><div class="sp-btn" data-toast="已选择年花套餐">选这个</div></div>
22</div>
23<div class="section-title">本月花材预览</div>
24<div class="card" style="margin-top:0" id="weekList"></div>
25<div class="section-title">订阅专属权益</div>
26<div class="card" style="margin-top:0;font-size:12px;color:#6b4460;line-height:2">
27 🌟 会员价额外 9 折 · 花材免费升级<br/>
28 🚚 优先配送 · 每周自主选配送日与地址<br/>
29 🔄 漏发自动顺延一周 · 破损 40% 可补发或退款<br/>
30 🎁 累计积分可兑换花瓶 / 花艺工具 / 周边
31</div>
32
33
34<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="subscribe.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>
35<script src="data.js"></script>
36<script>
37 var wl = document.getElementById('weekList');
38 var h = '';
39 window.DATA.weekFlowers.forEach(function (w) {
40 h += '<div class="week-row"><div class="wr-emoji">' + w.emoji + '</div><div class="wr-body"><b>' + w.name + '</b><span>' + w.desc + '</span></div></div>';
41 });
42 wl.innerHTML = h;
43</script>
44<script src="app.js"></script>
45</body>
46</html>