小草装修帮_H5/index.html · 约 4129 字符
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="topbar">
3 <div class="tb-row"><span>📍</span><span class="tb-addr">阳光花园</span><span style="opacity:.8;font-size:11px">▾ 杭州 · 3家装修公司为你服务</span></div>
4 <div class="tb-search" onclick="location.href='company.html'"><span>🔍</span><span>搜索小区 / 户型 / 装修公司…</span></div>
5</div>
6<div class="demand-card">
7 <div class="dc-title">📋 免费量房 · 一键匹配</div>
8 <div class="dc-sub">填写需求，30分钟内3家本地装修公司免费上门量房报价</div>
9 <div class="dc-form"><b>新房装修 · 89㎡ · 现代简约</b>
10 <span style="background:#f5ead9;padding:4px 10px;border-radius:10px">📐 三室两厅</span>
11 <span style="background:#f5ead9;padding:4px 10px;border-radius:10px">💰 预算15万</span>
12 <span style="background:#f5ead9;padding:4px 10px;border-radius:10px;color:var(--primary-dark)">立即匹配 ›</span>
13 </div>
14</div>
15<div class="quick-grid">
16 <a href="cases.html"><span class="qicon">🖼️</span>装修案例</a>
17 <a href="calculator.html"><span class="qicon">🧮</span>装修计算器</a>
18 <a href="company.html"><span class="qicon">🏢</span>找公司</a>
19 <a href="progress.html"><span class="qicon">📹</span>我的工地</a>
20</div>
21<div class="section-title">装修案例 <span>海量实景</span></div>
22<div class="case-grid" id="case-grid"></div>
23<div class="section-title">优选装修公司 <span>口碑排行</span></div>
24<div class="card" id="company-list"></div>
25<div class="section-title">装修保障 <span>装修保护航</span></div>
26<div class="card" style="display:flex;gap:10px;text-align:center">
27 <div style="flex:1"><div style="font-size:26px">🛡️</div><div style="font-size:12px;font-weight:600">装修保</div><small style="color:#a59079;font-size:10px">先装修后付款</small></div>
28 <div style="flex:1"><div style="font-size:26px">🔍</div><div style="font-size:12px;font-weight:600">节点验收</div><small style="color:#a59079;font-size:10px">第三方监理</small></div>
29 <div style="flex:1"><div style="font-size:26px">📹</div><div style="font-size:12px;font-weight:600">工地直播</div><small style="color:#a59079;font-size:10px">全程可视</small></div>
30 <div style="flex:1"><div style="font-size:26px">✅</div><div style="font-size:12px;font-weight:600">正品材料</div><small style="color:#a59079;font-size:10px">假一赔十</small></div>
31</div>
32<div style="height:80px"></div>
33<div class="tabbar">
34 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
35 <a href="cases.html"><span class="icon">🖼️</span>案例</a>
36 <a href="company.html"><span class="icon">🏢</span>公司</a>
37 <a href="progress.html"><span class="icon">📹</span>工地</a>
38 <a href="mine.html"><span class="icon">👤</span>我的</a>
39</div>
40<script src="data.js"></script><script src="app.js"></script>
41<script>
42$('#case-grid').innerHTML=CASES.slice(0,4).map(c=>`
43 <div class="case-card" onclick="location.href='cases.html'">
44 <div class="cc-img">${c.emoji}</div>
45 <div class="cc-body">
46 <div class="cc-name">${c.name}</div>
47 <div class="cc-meta">${c.area} · ${c.time} · ${c.owner.split('·')[0]}</div>
48 <div class="cc-price">全包约 ${c.price}</div>
49 </div>
50 </div>`).join('');
51$('#company-list').innerHTML=COMPANIES.slice(0,3).map(c=>`
52 <div class="company-item" onclick="location.href='company.html'">
53 <div class="ci-logo">${c.logo}</div>
54 <div class="ci-body">
55 <div class="ci-name">${c.name} <span class="ci-score">★ ${c.score}</span></div>
56 <div class="ci-meta">${c.cases}套案例 · ${c.price} · ${c.tags[0]}</div>
57 </div>
58 <div style="align-self:center;font-size:12px;color:var(--primary-dark)">免费量房 ›</div>
59 </div>`).join('');
60</script>
61</body></html>