椁愬埄娓?- 椁愰ギ灏忓簵鍒╂鼎璁＄畻鍣?/title> <meta name="description" content="甯楗皬搴楄€佹澘绠楁竻姣忛亾鑿滃拰姣忕瑪澶栧崠鍒板簳璧氫笉璧氶挶銆?> <style> :root{--primary:#2477C7;--ink:#172033;--muted:#667085;--line:#DDE3EA;--bg:#F5F7FA;--panel:#FFFFFF;--green:#2E9B62;--gold:#C98218;--red:#D64545;--blue-soft:#EAF3FC;--green-soft:#EBF8F1;--gold-soft:#FFF6E7;--shadow:0 10px 30px rgba(18,32,53,.08);--radius:8px} *{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}button,input{font:inherit}a{color:inherit;text-decoration:none}.wrap{max-width:1120px;margin:0 auto;padding:0 20px}.topbar{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar .wrap{height:64px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand-mark{width:34px;height:34px;border-radius:8px;background:var(--primary);color:#fff;display:grid;place-items:center}.nav{display:flex;gap:8px;align-items:center}.nav a,.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:9px 14px;background:#fff;color:var(--ink);cursor:pointer;font-weight:650;font-size:14px}.btn.primary,.nav a.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.ghost{background:transparent}.workspace{padding:34px 0 26px}.workspace-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:20px;align-items:stretch}.intro{padding:18px 0 8px}.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid #BBD5EE;background:var(--blue-soft);color:#185A96;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700}.intro h1{font-size:42px;line-height:1.12;margin:18px 0 12px;letter-spacing:0}.intro p{font-size:18px;color:var(--muted);margin:0 0 18px;max-width:620px}.proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.proof{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:14px}.proof strong{display:block;font-size:20px}.proof span{font-size:13px;color:var(--muted)}.calculator{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title h2{font-size:18px;margin:0}.section-title span{font-size:12px;color:var(--muted)}.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}.field input{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px 11px;background:#fff;color:var(--ink)}.field input:focus{outline:3px solid rgba(36,119,199,.15);border-color:var(--primary)}.result{margin-top:16px;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}.result-head{display:flex;align-items:center;justify-content:space-between;background:#F8FAFC;padding:13px 14px;border-bottom:1px solid var(--line)}.result-head strong{font-size:15px}.pill{border-radius:999px;padding:3px 9px;font-size:12px;font-weight:800}.pill.good{background:var(--green-soft);color:var(--green)}.pill.warn{background:var(--gold-soft);color:var(--gold)}.pill.bad{background:#FDECEC;color:var(--red)}.result-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.metric{background:#fff;padding:13px 14px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:22px;margin-top:2px}.metric.good strong{color:var(--green)}.metric.bad strong{color:var(--red)}.note{font-size:12px;color:var(--muted);margin-top:10px}.band{border-top:1px solid var(--line);background:#fff;padding:34px 0}.band.alt{background:#F8FAFC}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.item{border:1px solid var(--line);border-radius:var(--radius);padding:17px;background:#fff}.item .icon{font-size:26px}.item h3{margin:8px 0 6px;font-size:16px}.item p{margin:0;color:var(--muted);font-size:14px}.pricing{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}.price{border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:#fff}.price.featured{border-color:var(--primary);box-shadow:var(--shadow)}.price h3{margin:0 0 8px}.price .money{font-size:28px;font-weight:850;margin:4px 0}.price ul{padding-left:18px;color:var(--muted);font-size:14px}.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--line);border-radius:var(--radius);padding:18px;background:var(--panel)}.cta-strip h2{margin:0 0 4px;font-size:22px}.cta-strip p{margin:0;color:var(--muted)}.footer{padding:22px 0;color:var(--muted);font-size:13px}.mini-preview{margin-top:22px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden}.preview-head{display:flex;gap:6px;padding:10px;border-bottom:1px solid var(--line);background:#F8FAFC}.dot{width:8px;height:8px;border-radius:50%;background:#CBD5E1}.preview-body{display:grid;grid-template-columns:130px 1fr;min-height:190px}.preview-side{background:#F1F5F9;padding:12px}.preview-side div{height:26px;border-radius:5px;background:#fff;margin-bottom:8px}.preview-main{padding:14px}.preview-main .bars{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.preview-main .bars div{height:48px;border-radius:6px;background:var(--blue-soft);border:1px solid #C9DFF2}.preview-main table{width:100%;border-collapse:collapse}.preview-main td{border-bottom:1px solid var(--line);padding:8px;font-size:12px;color:var(--muted)}@media(max-width:860px){.workspace-grid,.three,.pricing{grid-template-columns:1fr}.intro h1{font-size:32px}.proof-row{grid-template-columns:1fr}.topbar .wrap{height:auto;padding-top:10px;padding-bottom:10px;align-items:flex-start}.nav{flex-wrap:wrap;justify-content:flex-end}.preview-body{grid-template-columns:1fr}.preview-side{display:none}}@media(max-width:520px){.calc-grid,.result-body{grid-template-columns:1fr}.wrap{padding:0 14px}.nav a:not(.primary){display:none}.workspace{padding-top:22px}.cta-strip{display:block}.cta-strip .btn{margin-top:12px;width:100%}} </style> </head> <body> <header class="topbar"> <div class="wrap"> <a class="brand" href="landing.html"><span class="brand-mark">鍒?/span><span>椁愬埄娓?/span></a> <nav class="nav"> <a href="#value">鑳借В鍐充粈涔?/a> <a href="#pricing">鎬庝箞鏀惰垂</a> <a class="primary" href="index.html">鎵撳紑瀹屾暣宸ュ叿</a> </nav> </div> </header> <main> <section class="workspace"> <div class="wrap workspace-grid"> <div class="intro"> <span class="eyebrow">澶栧崠鎵ｇ偣 + 鑿滃搧鎴愭湰锛屼竴娆＄畻娓?/span> <h1>涓€鍗曞鍗栧崠 38 鍏冿紝鍒版墜鍒板簳杩樿禋澶氬皯锛?/h1> <p>椁愬埄娓呭府椁愰銆佸皬鍚冨簵銆佸鍗栧簵鑰佹澘鎶婂钩鍙颁剑閲戙€佸饱绾﹁垂銆佸寘瑁呫€侀€€娆惧拰椋熸潗鎴愭湰鏀惧埌涓€寮犺处閲屻€傚埆绛夋湀搴曟墠鍙戠幇锛氭祦姘村緢濂界湅锛屽埄娑︽病鐣欎笅銆?/p> <div class="nav" style="justify-content:flex-start"> <a class="primary" href="index.html">鍏嶈垂璇曠敤瀹屾暣宸ュ叿</a> <a href="#pricing">鏌ョ湅鏀惰垂鏂瑰紡</a> </div> <div class="proof-row"> <div class="proof"><strong>3 鍒嗛挓</strong><span>绠楀嚭鍗曠瑪澶栧崠鍒╂鼎</span></div> <div class="proof"><strong>0 閮ㄧ讲</strong><span>娴忚鍣ㄦ墦寮€鍗冲彲鐢?/span></div> <div class="proof"><strong>鏈湴鏁版嵁</strong><span>缁忚惀鏁版嵁淇濆瓨鍦ㄦ湰鏈?/span></div> </div> <div class="mini-preview" aria-label="椁愬埄娓呬骇鍝佺晫闈㈤瑙?> <div class="preview-head"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div> <div class="preview-body"> <div class="preview-side"><div></div><div></div><div></div><div></div><div></div></div> <div class="preview-main"> <div class="bars"><div></div><div></div><div></div><div></div></div> <table><tr><td>缇庡洟璁㈠崟</td><td>娴佹按楼368</td><td>鍒╂鼎楼96</td></tr><tr><td>鎷涚墝濂楅</td><td>姣涘埄鐜?58%</td><td>鍙仛娲诲姩</td></tr><tr><td>閲囪喘璁″垝</td><td>涓嬪懆闇€琛ヨ揣</td><td>楼842</td></tr></table> </div> </div> </div> </div> <section class="calculator" aria-label="澶栧崠鍒╂鼎璁＄畻鍣?> <div class="section-title"><h2>鍏堢畻杩欎竴鍗?/h2><span>杈撳叆鍚庤嚜鍔ㄨ绠?/span></div> <div class="calc-grid"> <div class="field"><label>璁㈠崟娴佹按</label><input id="gross" type="number" value="48" min="0" step="0.01"></div> <div class="field"><label>骞冲彴浣ｉ噾鐜?%</label><input id="rate" type="number" value="22" min="0" step="0.1"></div> <div class="field"><label>椋熸潗鎴愭湰</label><input id="food" type="number" value="15" min="0" step="0.01"></div> <div class="field"><label>鍖呰鎴愭湰</label><input id="pack" type="number" value="2" min="0" step="0.01"></div> <div class="field"><label>閰嶉€?灞ョ害璐?/label><input id="delivery" type="number" value="3" min="0" step="0.01"></div> <div class="field"><label>閫€娆?璧斾粯</label><input id="refund" type="number" value="0" min="0" step="0.01"></div> </div> <div class="result"> <div class="result-head"><strong id="verdictText">鍙互鍋?/strong><span class="pill good" id="verdictPill">鐩堝埄</span></div> <div class="result-body"> <div class="metric"><span>骞冲彴鎵ｈ垂</span><strong id="commission">楼10.56</strong></div> <div class="metric"><span>鍒版墜瀹炴敹</span><strong id="net">楼34.44</strong></div> <div class="metric good"><span>棰勪及鍒╂鼎</span><strong id="profit">楼17.44</strong></div> <div class="metric"><span>鍒╂鼎鐜?/span><strong id="margin">36.33%</strong></div> </div> </div> <p class="note">杩欎釜缁撴灉閫傚悎蹇€熷垽鏂崟绗斿鍗栥€傚畬鏁村伐鍏疯繕鑳界户缁鐞嗚彍鍝?BOM銆佸簱瀛樸€侀噰璐拰姣忔棩鏀舵敮銆?/p> </section> </div> </section> <section class="band" id="value"> <div class="wrap"> <div class="section-title"><h2>椁愬埄娓呭厛甯€佹澘鐪嬫竻涓変欢浜?/h2></div> <div class="three"> <div class="item"><div class="icon">馃ァ</div><h3>澶栧崠鎵ｅ畬杩樺墿澶氬皯</h3><p>鎶婁剑閲戙€侀厤閫併€佸寘瑁呫€侀€€娆惧拰椋熸潗鎴愭湰涓€璧风畻锛岄伩鍏嶉珮娴佹按浣庡埄娑︺€?/p></div> <div class="item"><div class="icon">馃崲</div><h3>鑿滃搧鍜屽皬鍚冪湡瀹炴垚鏈?/h3><p>鐢?BOM 閰嶆柟銆佸嚭鎴愮巼鍜岃皟鏂欐垚鏈牳绠楃儹鑿溿€佸皬鍚冨拰濂楅姣涘埄銆?/p></div> <div class="item"><div class="icon">馃搳</div><h3>缁欒€佹澘鐪嬬殑鎶ュ憡</h3><p>瀵煎嚭缁忚惀璇婃柇銆侀噰璐竻鍗曞拰澶栧崠鏄庣粏锛屾柟渚垮鐩樺拰鍐崇瓥銆?/p></div> </div> </div> </section> <section class="band alt" id="pricing"> <div class="wrap"> <div class="section-title"><h2>鎸夐渶瑕侀€夋嫨鏈嶅姟</h2><span>鍏堣瘯鐢紝鍐嶅喅瀹氳涓嶈缁х画</span></div> <div class="pricing"> <div class="price"><h3>鍏嶈垂璇曠敤</h3><div class="money">楼0</div><p>鍏堢敤宸ュ叿绠楀嚑鍗曠湅鐪?/p><ul><li>澶栧崠鍒╂鼎蹇畻</li><li>鑿滃搧鍜岄鏉愬熀纭€绠＄悊</li><li>鏈湴鏁版嵁瀵煎叆瀵煎嚭</li></ul></div> <div class="price featured"><h3>鏃ュ父璁拌处鐗?/h3><div class="money">楼199/骞?/div><p>閫傚悎鎯抽暱鏈熺湅娓呭埄娑︾殑灏忓簵</p><ul><li>澶栧崠绠＄悊鍜屽钩鍙板垎鏋?/li><li>缁忚惀璇婃柇鎶ュ憡</li><li>鏇村鑿滃搧妯℃澘鍜屽浠芥彁閱?/li></ul></div> <div class="price"><h3>鍒╂鼎璇婃柇鏈嶅姟</h3><div class="money">楼299/娆?/div><p>閫傚悎鎯冲厛鎶婅处绠楁竻妤氱殑闂ㄥ簵</p><ul><li>鍗忓姪褰曞叆鑿滃崟鍜屾垚鏈?/li><li>鎵惧嚭浣庢瘺鍒?浜忔崯鑿?/li><li>鏁寸悊涓€浠芥敼浠峰缓璁姤鍛?/li></ul></div> </div> </div> </section> <section class="band"> <div class="wrap"> <div class="cta-strip"> <div><h2>鍏堢敤鐪熷疄鑿滃崟绠椾竴閬嶃€?/h2><p>鎶婂鍗栨墸璐广€佽彍鍝佹垚鏈拰鍒╂鼎缁撴灉绠楁竻妤氾紝鍐嶅喅瀹氭€庝箞璋冩暣銆?/p></div> <a class="btn primary" href="index.html">杩涘叆瀹屾暣宸ュ叿</a> </div> </div> </section> </main> <footer class="footer"><div class="wrap">椁愬埄娓?路甯楗皬搴楄€佹澘绠楁竻鐪熷疄鍒╂鼎</div></footer> <script> function money(n){return '楼'+(isFinite(n)?n:0).toFixed(2)} function pct(n){return (isFinite(n)?n:0).toFixed(2)+'%'} function calc(){const gross=parseFloat(grossEl.value)||0,rate=parseFloat(rateEl.value)||0,food=parseFloat(foodEl.value)||0,pack=parseFloat(packEl.value)||0,delivery=parseFloat(deliveryEl.value)||0,refund=parseFloat(refundEl.value)||0;const commission=gross*rate/100,net=gross-commission-delivery-refund,profit=net-food-pack,margin=gross>0?profit/gross*100:0;commissionEl.textContent=money(commission);netEl.textContent=money(net);profitEl.textContent=money(profit);marginEl.textContent=pct(margin);profitEl.parentElement.className='metric '+(profit>=0?'good':'bad');let cls='good',txt='鐩堝埄',headline='鍙互鍋?;if(profit<0){cls='bad';txt='浜忔崯';headline='杩欏崟鍦ㄤ簭閽?}else if(margin<15){cls='warn';txt='鍋忚杽';headline='鍒╂鼎鍋忚杽'}verdictPill.className='pill '+cls;verdictPill.textContent=txt;verdictText.textContent=headline} const grossEl=document.getElementById('gross'),rateEl=document.getElementById('rate'),foodEl=document.getElementById('food'),packEl=document.getElementById('pack'),deliveryEl=document.getElementById('delivery'),refundEl=document.getElementById('refund'),commissionEl=document.getElementById('commission'),netEl=document.getElementById('net'),profitEl=document.getElementById('profit'),marginEl=document.getElementById('margin'),verdictText=document.getElementById('verdictText'),verdictPill=document.getElementById('verdictPill');[grossEl,rateEl,foodEl,packEl,deliveryEl,refundEl].forEach(i=>i.addEventListener('input',calc));calc(); </script> </body> </html>