小草洗鞋店/index.html · 约 3365 字符
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">免费上门取送 · 一双也洗<br/>标准化工序 · 不伤鞋不氧化 · 洗坏包赔</div>
15 <div class="bn-badge">🚚 全城双向免费上门取送</div>
16 </div>
17 <div class="bn-emoji">👟</div>
18</div>
19<div class="quick-grid">
20 <a href="category.html"><div class="qicon">👟</div>运动鞋</a>
21 <a href="category.html"><div class="qicon">🥾</div>靴子翻新</a>
22 <a href="category.html"><div class="qicon">👞</div>皮鞋保养</a>
23 <a href="category.html"><div class="qicon">🛞</div>球鞋修复</a>
24 <a href="vip.html"><div class="qicon">💎</div>会员次卡</a>
25 <a href="track.html"><div class="qicon">📦</div>洗护进度</a>
26 <a data-toast="附近智能鞋柜 12 个"><div class="qicon">📍</div>智能鞋柜</a>
27 <a data-toast="企业团洗热线 400-880-2233"><div class="qicon">🏢</div>企业团洗</a>
28</div>
29<div class="coupon-card">
30 <div class="cc-left"><b>新人首单 9.9 元洗鞋</b><span>免费上门取送 · 7 天内有效</span></div>
31 <div class="cc-btn">立即领取</div>
32</div>
33<div class="section-title">🔥 今日爆款 <span>年洗 200 万双 ›</span></div>
34<div id="hotList"></div>
35<div class="section-title">💳 次卡套餐 · 越洗越省</div>
36<div class="plan-mini" id="planList"></div>
37<div style="height:70px"></div>
38
39
40<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="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 hl = document.getElementById('hotList');
44 var h = '';
45 window.DATA.services.filter(function (f) { return f.hot; }).slice(0, 3).forEach(function (f) {
46 h += '<div class="svc-card"><div class="sc-img">' + f.img + '</div><div class="sc-body">'
47 + '<div class="sc-name">' + f.name + ' <span class="badge badge-hot">热销</span></div>'
48 + '<div class="sc-desc">' + f.desc + '</div>'
49 + '<div class="sc-meta">年洗 ' + (f.sales/10000).toFixed(1) + ' 万双+ · ' + f.tags.join(' · ') + '</div>'
50 + '<div class="sc-foot"><div class="sc-price">¥' + f.price + '<small> /原' + f.old + '</small></div>'
51 + '<div class="sc-btn">去洗护</div></div></div></div>';
52 });
53 hl.innerHTML = h;
54 var pl = document.getElementById('planList');
55 var h2 = '';
56 window.DATA.plans.forEach(function (p) {
57 h2 += '<div class="pm-item"><div class="pm-name">' + p.name + '</div>'
58 + '<div class="pm-price">¥' + p.price.replace('/', ' <small>/') + '</div>'
59 + '<div class="pm-desc">' + p.desc + '</div>'
60 + '<div class="pm-btn" data-toast="已选择' + p.name + '">选这个</div></div>';
61 });
62 pl.innerHTML = h2;
63</script>
64<script src="app.js"></script>
65</body>
66</html>