小草美发沙龙_H5/stylists.html · 约 2327 字符
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="header"><span class="back" onclick="history.back()">‹</span><h1>造型师团队</h1><span class="right">🔍</span></div>
3<div id="stylist-list"></div>
4<div class="section-title">精选作品 <span>实拍案例</span></div>
5<div class="work-grid" id="work-grid" style="margin-bottom:12px"></div>
6<div class="card" style="text-align:center">
7 <div style="font-size:30px">📸</div>
8 <div style="font-size:14px;font-weight:700;margin-top:4px">拿不准剪什么发型？</div>
9 <div style="font-size:12px;color:#a3967a;margin:4px 0 10px">到店先做免费发型设计咨询，不满意不剪</div>
10 <button class="btn btn-gold">预约发型咨询</button>
11</div>
12<div style="height:80px"></div>
13<div class="tabbar">
14 <a href="index.html"><span class="icon">🏠</span>首页</a>
15 <a href="services.html"><span class="icon">💈</span>服务</a>
16 <a class="active" href="stylists.html"><span class="icon">🧑🎨</span>发型师</a>
17 <a href="book.html"><span class="icon">📅</span>预约</a>
18 <a href="mine.html"><span class="icon">👤</span>我的</a>
19</div>
20<script src="data.js"></script><script src="app.js"></script>
21<script>
22$('#stylist-list').innerHTML=STYLISTS.map(s=>`
23 <div class="stylist-card">
24 <div class="st-avatar">${s.emoji}</div>
25 <div class="st-body">
26 <div class="st-name">${s.name} <span class="st-score">★ ${s.score}</span> <span class="badge badge-sale">${s.title}</span></div>
27 <div class="st-title">从业 ${s.years} 年 · 累计服务 ${s.orders} 次 · 好评率99%</div>
28 <div class="st-meta">${s.skill.map(x=>'<span class="tag">'+x+'</span>').join('')}</div>
29 </div>
30 <div style="align-self:center"><span class="sc-add" onclick="location.href='book.html'">约TA</span></div>
31 </div>`).join('');
32$('#work-grid').innerHTML=WORKS.map(w=>`
33 <div class="work-item">
34 <div class="wi-img">${w.emoji}</div>
35 <div class="wi-name">${w.name}</div>
36 <div class="wi-like">❤️ ${w.likes}</div>
37 </div>`).join('');
38</script>
39</body></html>