小草美甲美妆_H5/index.html · 约 3658 字符
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">🎁 新客首单立减30元</span>
7 </div>
8 <div class="bn-emoji">✨</div>
9</div>
10<div class="quick-grid">
11 <a href="styles.html"><span class="qicon">🌸</span>作品风格</a>
12 <a href="book.html"><span class="qicon">💅</span>在线预约</a>
13 <a href="cards.html"><span class="qicon">💳</span>会员卡包</a>
14 <a href="styles.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 class="gallery" id="style-gallery"></div>
20<div class="section-title">金牌美甲师 <span>手艺超赞</span></div>
21<div id="nailer-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="styles.html"><span class="icon">🖼️</span>作品</a>
28 <a href="book.html"><span class="icon">📅</span>预约</a>
29 <a href="cards.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$('#style-gallery').innerHTML=STYLES.map(s=>`
45 <div class="gl-item" onclick="location.href='styles.html?style=${s.id}'">
46 <div class="gl-img">${s.emoji}</div>
47 <div class="gl-name">${s.name}系</div>
48 <div class="gl-price">${s.desc.split('·')[0]}</div>
49 </div>`).join('');
50$('#nailer-list').innerHTML=NAILERS.map(n=>`
51 <div class="service-card">
52 <div class="sc-emoji" style="border-radius:50%">${n.emoji}</div>
53 <div class="sc-body">
54 <div class="sc-name">${n.name} <span style="color:var(--accent);font-size:12px">★ ${n.score}</span></div>
55 <div class="sc-desc">${n.skill} · ${n.year}年 · 累计服务 ${n.orders} 次</div>
56 <div class="sc-foot"><span class="sc-meta">已约 120+</span><span class="sc-add" onclick="location.href='book.html'">约TA</span></div>
57 </div>
58 </div>`).join('');
59$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
60 <div class="card" style="display:flex;align-items:center;margin:8px 12px;padding:12px 16px">
61 <span style="color:var(--primary-dark);font-weight:800;font-size:20px;width:70px">¥${c.amt}</span>
62 <span style="flex:1;font-size:13px"><b>${c.name}</b><br><small style="color:#a893b8">${c.cond} · ${c.desc}</small></span>
63 <span class="sc-add">已领</span>
64 </div>`).join('');
65</script>
66</body></html>