💻 代码预览 · 小草装修帮

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 class="section-title">全部案例 <span>真实业主 · 实景拍摄</span></div>
7<div class="case-grid" id="case-grid"></div>
8<div class="card" style="text-align:center">
9  <div style="font-size:30px">🏠</div>
10  <div style="font-size:14px;font-weight:700;margin-top:4px">想看看同户型怎么装？</div>
11  <div style="font-size:12px;color:#a59079;margin:4px 0 10px">输入你的小区，查看同小区业主真实装修案例</div>
12  <button class="btn btn-primary">查看同小区案例</button>
13</div>
14<div style="height:80px"></div>
15<div class="tabbar">
16  <a href="index.html"><span class="icon">🏠</span>首页</a>
17  <a class="active" href="cases.html"><span class="icon">🖼️</span>案例</a>
18  <a href="company.html"><span class="icon">🏢</span>公司</a>
19  <a href="progress.html"><span class="icon">📹</span>工地</a>
20  <a href="mine.html"><span class="icon">👤</span>我的</a>
21</div>
22<script src="data.js"></script><script src="app.js"></script>
23<script>
24let cur=null;
25function renderTabs(){
26  $$('#style-tabs span').forEach(t=>t.classList.toggle('sel',t.dataset.id===cur));
27  const list=cur?CASES.filter(c=>c.style===cur):CASES;
28  $('#case-grid').innerHTML=list.map(c=>`
29    <div class="case-card">
30      <div class="cc-img">${c.emoji}</div>
31      <div class="cc-body">
32        <div class="cc-name">${c.name}</div>
33        <div class="cc-meta">${c.owner}</div>
34        <div class="cc-meta">${c.area} · ${c.time} · 全包约 ${c.price}</div>
35        <div style="display:flex;gap:8px;margin-top:6px">
36          <span class="tag">VR全景</span><span class="tag">装修日记</span>
37        </div>
38      </div>
39    </div>`).join('');
40}
41$$('#style-tabs span').forEach(t=>t.onclick=()=>{cur=t.dataset.id;renderTabs()});
42renderTabs();
43</script>
44</body></html>