💻 代码预览 · 小草装修帮

1// 小草装修帮 · 逻辑层
2const $=s=>document.querySelector(s), $$=s=>document.querySelectorAll(s);
3function toast(msg){const t=document.createElement('div');t.textContent=msg;t.style.cssText='position:fixed;top:20%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999;transition:opacity .3s';document.body.appendChild(t);setTimeout(()=>{t.style.opacity='0';setTimeout(()=>t.remove(),300)},1200)}
4/* 计算器 */
5let CALC={area:89,grade:'middle'};
6const GRADE={lite:{name:'简装',per:700},middle:{name:'精装',per:1300},lux:{name:'豪装',per:2200}};
7function renderCalc(){
8  $$('.opt-chip').forEach(c=>c.classList.toggle('sel',c.dataset.v===CALC.grade));
9  const g=GRADE[CALC.grade];
10  const total=Math.round(CALC.area*g.per/10000*10)/10;
11  const design=Math.round(CALC.area*60);
12  const material=Math.round(CALC.area*g.per*0.55);
13  const labor=Math.round(CALC.area*g.per*0.45);
14  $('#pr-amount').textContent='约 ¥'+total.toFixed(1)+' 万';
15  $('#pr-detail').innerHTML=
16    '<tr><th>项目</th><th>估算</th><th>说明</th></tr>'+
17    '<tr><td>设计费</td><td>¥'+design.toLocaleString()+'</td><td>平面+效果图</td></tr>'+
18    '<tr><td>主材辅材</td><td>¥'+material.toLocaleString()+'</td><td>含地板/瓷砖/卫浴</td></tr>'+
19    '<tr><td>人工施工</td><td>¥'+labor.toLocaleString()+'</td><td>水电/泥木/油漆</td></tr>'+
20    '<tr><td>软装家具</td><td>¥'+Math.round(CALC.area*400).toLocaleString()+'</td><td>可选</td></tr>';
21}
22function setArea(v){CALC.area=parseInt(v)||89;$('#calc-area').textContent=CALC.area+'㎡';renderCalc()}
23function setGrade(v){CALC.grade=v;renderCalc()}
24function renderMine(){
25  $('#u-name').textContent=USER.name;$('#u-level').textContent=USER.level;
26  $('#m-home').textContent=USER.home;$('#m-saved').textContent=USER.saved.toLocaleString();
27  $('#m-tasks').textContent=USER.tasks;
28}
29function renderProgress(){
30  $('#site-list').innerHTML=AREAS.map(a=>`
31    <div class="site-card">
32      <div class="sc-head"><span>🏠 ${a.name}</span><span style="color:var(--primary-dark);font-weight:600">进行中 · ${a.progress}%</span></div>
33      <div class="sc-progress"><i style="width:${a.progress}%"></i></div>
34      <div class="sc-percent">${a.style} · ${a.area}㎡ · 预算 ¥${a.budget}万</div>
35      <div class="sc-steps">
36        ${SITE_STEPS.map((s,i)=>'<div class="ss '+(i<6?'done':i===6?'now':'')+'"><span class="dot">'+s[1]+'</span>'+s[0]+'</div>').join('')}
37      </div>
38    </div>`).join('');
39  $('#inspect-list').innerHTML=INSPECTS.map(i=>`
40    <div class="inspect-item"><span>🛡️ ${i.name}</span><span style="margin-left:auto;font-size:11px;color:#a59079">${i.time}</span><span class="ii-status${i.status==='待复核'?' warn':''}">${i.status}</span></div>`).join('');
41}
42