小草宠物美容_H5/index.html · 约 3678 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>小草宠物美容</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="banner">
3 <div>
4 <div class="bn-title">🐾 小草宠物美容</div>
5 <div class="bn-sub">洗护 · SPA · 造型 · 寄养 一站式服务</div>
6 <span class="bn-badge">🎁 新客首单立减30元</span>
7 </div>
8 <div class="bn-emoji">🐶</div>
9</div>
10<div class="quick-grid">
11 <a href="services.html"><span class="qicon">🛁</span>精致洗护</a>
12 <a href="services.html"><span class="qicon">✂️</span>时尚造型</a>
13 <a href="services.html"><span class="qicon">💆</span>SPA护理</a>
14 <a href="pets.html"><span class="qicon">📋</span>宠物档案</a>
15</div>
16<div class="section-title">热门服务 <span>立即预约</span></div>
17<div id="hot-services"></div>
18<div class="section-title">星级美容师 <span>手艺靠谱</span></div>
19<div id="groomer-list"></div>
20<div class="section-title">门店信息</div>
21<div class="card" id="store-list"></div>
22<div class="section-title">新人福利 <span>到店即享</span></div>
23<div id="coupon-list"></div>
24<div style="height:80px"></div>
25<div class="tabbar">
26 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
27 <a href="services.html"><span class="icon">💈</span>服务</a>
28 <a href="book.html"><span class="icon">📅</span>预约</a>
29 <a href="orders.html"><span class="icon">📋</span>订单</a>
30 <a href="mine.html"><span class="icon">👤</span>我的</a>
31</div>
32<script src="data.js"></script><script src="app.js"></script>
33<script>
34$('#hot-services').innerHTML=SERVICES.slice(0,3).map(s=>`
35 <div class="service-card" onclick="location.href='book.html'">
36 <div class="sc-emoji">${s.emoji}</div>
37 <div class="sc-body">
38 <div class="sc-name">${s.name} <span class="badge badge-hot">热门</span></div>
39 <div class="sc-desc">${s.desc}</div>
40 <div class="sc-meta">⏱️ ${s.time} · 含基础护理</div>
41 <div class="sc-foot"><span class="sc-price"><em>¥</em>${s.price}</span><span class="sc-add">去预约</span></div>
42 </div>
43 </div>`).join('');
44$('#groomer-list').innerHTML=GROOMERS.map(g=>`
45 <div class="groomer-card">
46 <div class="gr-avatar">${g.emoji}</div>
47 <div class="gr-body">
48 <div class="gr-name">${g.name} <span class="gr-score">★ ${g.score}</span></div>
49 <div class="gr-meta">${g.skill} · ${g.year} · 累计服务 ${g.orders} 次</div>
50 </div>
51 <div style="align-self:center"><button class="btn btn-outline" style="padding:7px 14px;font-size:12px;width:auto" onclick="location.href='book.html'">约TA</button></div>
52 </div>`).join('');
53$('#store-list').innerHTML=STORES.map(s=>`
54 <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #f5ead9;font-size:13px">
55 <span>🏪 ${s.name}<br><small style="color:#b39a80">${s.addr} · ${s.time}</small></span>
56 <b style="color:var(--primary-dark);align-self:center">${s.dist}</b>
57 </div>`).join('');
58$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
59 <div class="card" style="display:flex;align-items:center;margin:8px 12px;padding:12px 16px">
60 <span style="color:var(--primary-dark);font-weight:800;font-size:20px;width:70px">¥${c.amt}</span>
61 <span style="flex:1;font-size:13px"><b>${c.name}</b><br><small style="color:#b39a80">${c.cond} · ${c.desc}</small></span>
62 <span class="sc-add">已领</span>
63 </div>`).join('');
64</script>
65</body></html>