小草美发沙龙_H5/index.html · 约 3694 字符
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">为你的发量 · 为你的气场</div>
6 <span class="bn-badge">🎁 新客剪发立减20元 · 烫染立减50</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="stylists.html"><span class="qicon">💆</span>头皮养护</a>
14 <a href="book.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="stylist-list"></div>
20<div class="section-title">作品案例 <span>变美实拍</span></div>
21<div class="work-grid" id="work-grid"></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="stylists.html"><span class="icon">🧑🎨</span>发型师</a>
29 <a href="book.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.filter(s=>s.tag==='hot').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$('#stylist-list').innerHTML=STYLISTS.map(s=>`
45 <div class="stylist-card" onclick="location.href='stylists.html'">
46 <div class="st-avatar">${s.emoji}</div>
47 <div class="st-body">
48 <div class="st-name">${s.name} <span class="st-score">★ ${s.score}</span></div>
49 <div class="st-title">${s.title} · ${s.years}年</div>
50 <div class="st-meta">累计服务 ${s.orders} 次 · ${s.skill.join(' / ')}</div>
51 </div>
52 <div style="align-self:center"><span class="sc-add" onclick="event.stopPropagation();location.href='book.html'">约TA</span></div>
53 </div>`).join('');
54$('#work-grid').innerHTML=WORKS.map(w=>`
55 <div class="work-item" onclick="location.href='stylists.html'">
56 <div class="wi-img">${w.emoji}</div>
57 <div class="wi-name">${w.name}</div>
58 <div class="wi-like">❤️ ${w.likes}</div>
59 </div>`).join('');
60$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
61 <div class="card" style="display:flex;align-items:center;margin:8px 12px;padding:12px 16px">
62 <span style="color:var(--accent);font-weight:800;font-size:20px;width:70px">¥${c.amt}</span>
63 <span style="flex:1;font-size:13px"><b>${c.name}</b><br><small style="color:#a3967a">${c.cond} · ${c.desc}</small></span>
64 <span class="tag">已领</span>
65 </div>`).join('');
66</script>
67</body></html>