小草花坊_H5/index.html · 约 3373 字符
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<div class="banner">
12 <div>
13 <div class="bn-title">小草花坊</div>
14 <div class="bn-sub">产地直供鲜花 · 同城 2 小时送达<br/>花语传情 · 让每一天都有仪式感</div>
15 <div class="bn-badge">💝 七夕预售开启 · 提前订 8 折</div>
16 </div>
17 <div class="bn-emoji">🌷</div>
18</div>
19<div class="festival-bar">
20 <b>🎋 七夕节特辑（8/25）</b><br/>
21 节日鲜花需提前 3-7 天预订 · 当日达 2 小时内 · 附赠手写贺卡 · 价格保护（节日不加价）
22</div>
23<div class="quick-grid">
24 <a href="category.html"><div class="qicon">🎂</div>生日花束</a>
25 <a href="category.html"><div class="qicon">💘</div>表白求婚</a>
26 <a href="category.html"><div class="qicon">🛍️</div>永生花礼盒</a>
27 <a href="category.html"><div class="qicon">🌻</div>祝福花篮</a>
28 <a href="subscribe.html"><div class="qicon">📅</div>订阅鲜花</a>
29 <a href="occasion.html"><div class="qicon">💐</div>送花场景</a>
30 <a data-toast="门店自提点 6 家"><div class="qicon">🏪</div>门店自提</a>
31 <a data-toast="企业福利采购热线 400-880-6666"><div class="qicon">🏢</div>企业团购</a>
32</div>
33<div class="coupon-card">
34 <div class="cc-left"><b>新人礼 20 元无门槛券</b><span>首单立减 · 7 天内有效</span></div>
35 <div class="cc-btn">立即领取</div>
36</div>
37<div class="section-title">🔥 今日爆款 <span>月销 10 万+ ›</span></div>
38<div id="hotList"></div>
39<div class="section-title">📅 订阅鲜花 · 每周新惊喜</div>
40<div class="card" style="margin-top:0;font-size:12px;color:#6b4460;line-height:2">
41 🌷 包月 ¥99 起 · 每周配送 1 束<br/>
42 ✨ 云南产地直供 · 花材 48 小时新鲜直达 · 可自由选配送日<br/>
43 🔄 漏发自动顺延一周 · 花材破损 40% 可补发或退款
44</div>
45
46
47<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">💐</span>鲜花</a><a class="" 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>
48<script src="data.js"></script>
49<script>
50 var hl = document.getElementById('hotList');
51 var h = '';
52 window.DATA.flowers.filter(function (f) { return f.hot; }).slice(0, 3).forEach(function (f) {
53 h += '<div class="flower-card"><div class="fc-img">' + f.img + '</div><div class="fc-body">'
54 + '<div class="fc-name">' + f.name + ' <span class="badge badge-hot">热销</span></div>'
55 + '<div class="fc-desc">' + f.desc + '</div>'
56 + '<div class="fc-meta">月销 ' + f.sales.toLocaleString() + '+ · ' + f.tags.join(' · ') + '</div>'
57 + '<div class="fc-foot"><div class="fc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
58 + '<div class="fc-btn">立即预订</div></div></div></div>';
59 });
60 hl.innerHTML = h;
61</script>
62<script src="app.js"></script>
63</body>
64</html>