💻 代码预览 · 小草装修帮

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="card calc-form">
4  <div class="cf-row"><span class="cf-label">🏠 房屋面积</span><span class="cf-input" id="calc-area">89㎡</span>
5    <span style="display:flex;gap:6px">
6      <span class="opt-chip" onclick="setArea(60)">60</span>
7      <span class="opt-chip sel" onclick="setArea(89)">89</span>
8      <span class="opt-chip" onclick="setArea(120)">120</span>
9      <span class="opt-chip" onclick="setArea(150)">150</span>
10    </span>
11  </div>
12  <div class="cf-row" style="border-bottom:none"><span class="cf-label">💎 装修档次</span></div>
13  <div class="opt-chips" style="padding:4px 0 12px">
14    <span class="opt-chip" data-v="lite" onclick="setGrade('lite')">简装 ~700元/㎡</span>
15    <span class="opt-chip sel" data-v="middle" onclick="setGrade('middle')">精装 ~1300元/㎡</span>
16    <span class="opt-chip" data-v="lux" onclick="setGrade('lux')">豪装 ~2200元/㎡</span>
17  </div>
18</div>
19<div class="price-result">
20  <div style="font-size:13px;opacity:.9">预估装修总价</div>
21  <div class="pr-amount" id="pr-amount">约 ¥11.6 万</div>
22  <div class="pr-tip">* 预估仅供参考，以装修公司上门量房报价为准</div>
23</div>
24<div class="card" style="padding:0;overflow:hidden">
25  <table class="price-table" id="pr-detail"></table>
26</div>
27<div class="card" style="text-align:center">
28  <div style="font-size:12px;color:#a59079">想要精准报价？</div>
29  <button class="btn btn-primary" style="margin-top:10px" onclick="toast('已提交，3家装修公司将免费上门量房')">免费获取精准报价</button>
30</div>
31<div style="height:80px"></div>
32<div class="tabbar">
33  <a href="index.html"><span class="icon">🏠</span>首页</a>
34  <a href="cases.html"><span class="icon">🖼️</span>案例</a>
35  <a href="company.html"><span class="icon">🏢</span>公司</a>
36  <a href="progress.html"><span class="icon">📹</span>工地</a>
37  <a href="mine.html"><span class="icon">👤</span>我的</a>
38</div>
39<script src="data.js"></script><script src="app.js"></script>
40<script>renderCalc();</script>
41</body></html>