💻 代码预览 · 小草美甲美妆

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 class="style-tabs" id="style-tabs">
4  ${STYLES.map(s=>'<span class="style-tab" data-id="'+s.id+'">'+s.emoji+' '+s.name+'</span>').join('')}
5</div>
6<div id="work-list"></div>
7<div class="card" style="text-align:center">
8  <div style="font-size:30px">📸</div>
9  <div style="font-size:14px;font-weight:700;margin-top:4px">喜欢哪款？晒图也能约</div>
10  <div style="font-size:12px;color:#a893b8;margin:4px 0 10px">把心仪的图给美甲师看，1:1还原</div>
11  <button class="btn btn-primary">收藏心仪款式</button>
12</div>
13<div style="height:80px"></div>
14<div class="tabbar">
15  <a href="index.html"><span class="icon">🏠</span>首页</a>
16  <a class="active" href="styles.html"><span class="icon">🖼️</span>作品</a>
17  <a href="book.html"><span class="icon">📅</span>预约</a>
18  <a href="cards.html"><span class="icon">💳</span>卡包</a>
19  <a href="mine.html"><span class="icon">👤</span>我的</a>
20</div>
21<script src="data.js"></script><script src="app.js"></script>
22<script>
23let cur=null;
24function renderTabs(){
25  $$('#style-tabs span').forEach(t=>t.classList.toggle('sel',t.dataset.id===cur));
26  const list=cur?WORKS.filter(w=>w.style===cur):WORKS;
27  $('#work-list').innerHTML=list.map(w=>`
28    <div class="work-card">
29      <div class="wc-img">${w.emoji}</div>
30      <div class="wc-body">
31        <div class="wc-name">${w.name}</div>
32        <div class="wc-desc">${STYLES.find(s=>s.id===w.style).desc}</div>
33        <div class="wc-foot"><span class="wc-price">¥${w.price}起</span><span class="wc-like">❤️ ${w.likes}</span></div>
34      </div>
35      <div style="align-self:center"><span class="sc-add" onclick="location.href='book.html'">同款预约</span></div>
36    </div>`).join('')||'<div class="empty">该风格暂无作品</div>';
37}
38$$('#style-tabs span').forEach(t=>t.onclick=()=>{cur=t.dataset.id;renderTabs()});
39const sp=new URLSearchParams(location.search).get('style');
40if(sp)cur=sp;
41renderTabs();
42</script>
43</body></html>