index.html · 约 23474 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>青禾园林苗圃</title>
7<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --green:#16a34a; --green2:#15803d; --leaf:#22c55e; --lime:#84cc16;
12 --bg:#f2f8f1; --card:#ffffff; --text:#243024; --mute:#8a9a86; --line:#e7f0e4;
13 }
14 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
15 background:#dde9da; color:var(--text); }
16 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
17 position:relative; padding-bottom:66px; box-shadow:0 0 28px rgba(0,0,0,.08); }
18 .topbar{ background:linear-gradient(120deg,var(--green),var(--green2)); color:#fff;
19 padding:16px 18px 14px; display:flex; align-items:center; gap:12px; }
20 .topbar .back{ font-size:22px; cursor:pointer; display:none; }
21 .topbar .tt{ font-size:19px; font-weight:800; letter-spacing:1px; }
22 .topbar .role{ margin-left:auto; font-size:12px; background:rgba(255,255,255,.18);
23 padding:5px 11px; border-radius:999px; font-weight:600; }
24 .views{ padding:14px; }
25 .view{ display:none; }
26 .view.active{ display:block; animation:fade .22s ease; }
27 @keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
28 .card{ background:var(--card); border-radius:16px; padding:15px; margin-bottom:13px;
29 box-shadow:0 4px 16px rgba(40,80,30,.05); }
30 .card h3{ font-size:15px; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
31 .card h3 .ic{ font-size:17px; }
32 .card h3 .more{ margin-left:auto; font-size:12px; color:var(--green); font-weight:600; }
33 .hint{ font-size:12px; color:var(--mute); margin:-6px 0 12px; }
34 .ov{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
35 .ovc{ background:linear-gradient(135deg,#eafaf0,#f3fbf0); border-radius:14px; padding:13px; }
36 .ovc .n{ font-size:12px; color:#5b8a5b; }
37 .ovc .v{ font-size:23px; font-weight:800; color:var(--green); margin-top:4px; }
38 .ovc .v small{ font-size:12px; color:var(--mute); font-weight:600; }
39 .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
40 .gi{ background:var(--card); border-radius:14px; padding:14px 6px; text-align:center;
41 box-shadow:0 4px 14px rgba(40,80,30,.05); cursor:pointer; transition:.12s; }
42 .gi:active{ transform:scale(.97); }
43 .gi .e{ font-size:26px; }
44 .gi .t{ font-size:12.5px; font-weight:700; margin-top:7px; color:#3d5a3d; }
45 .row{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--line);
46 cursor:pointer; }
47 .row:last-child{ border-bottom:none; }
48 .row:active{ background:#f3fbf0; }
49 .ava{ width:42px; height:42px; border-radius:12px; background:#eafaf0; display:flex; align-items:center;
50 justify-content:center; font-size:22px; flex:0 0 auto; }
51 .ri{ flex:1; min-width:0; }
52 .ri .a{ font-size:14.5px; font-weight:700; }
53 .ri .b{ font-size:12px; color:var(--mute); margin-top:3px; }
54 .rt{ text-align:right; flex:0 0 auto; font-size:12px; color:var(--mute); }
55 .tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; }
56 .tag.green{ background:#ddfbe6; color:#15803d; }
57 .tag.lime{ background:#eef9d8; color:#5a8a16; }
58 .tag.gray{ background:#eef2ec; color:#9aa89a; }
59 .btn{ width:100%; margin-top:13px; padding:13px; border:none; border-radius:13px;
60 background:linear-gradient(120deg,var(--green),var(--green2)); color:#fff; font-size:15.5px;
61 font-weight:800; cursor:pointer; letter-spacing:1px; }
62 .btn:active{ transform:scale(.99); }
63 .btn.line{ background:#fff; color:var(--green); border:1.5px solid var(--green); }
64 .empty{ text-align:center; color:var(--mute); padding:44px 20px; font-size:13.5px; }
65 .empty .e{ font-size:38px; margin-bottom:10px; }
66 /* hero */
67 .hero{ background:linear-gradient(135deg,#1b8a4a,#0f6b34); border-radius:18px; padding:20px 18px;
68 color:#fff; position:relative; overflow:hidden; }
69 .hero::after{ content:"🌳"; position:absolute; right:-6px; bottom:-14px; font-size:96px; opacity:.16; }
70 .hero .logo{ font-size:30px; }
71 .hero .nm{ font-size:24px; font-weight:900; margin-top:6px; letter-spacing:2px; }
72 .hero .slogan{ font-size:13px; opacity:.92; margin-top:6px; line-height:1.6; }
73 .hero .badges{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
74 .hero .badges span{ font-size:11.5px; background:rgba(255,255,255,.18); padding:4px 10px; border-radius:999px; }
75 .intro{ font-size:13.5px; color:#566b54; line-height:1.8; }
76 .advs{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
77 .adv{ background:#f3fbf0; border-radius:13px; padding:13px 12px; }
78 .adv .e{ font-size:22px; }
79 .adv .t{ font-size:13.5px; font-weight:800; color:#2f5a3a; margin-top:5px; }
80 .adv .d{ font-size:11.5px; color:var(--mute); margin-top:3px; line-height:1.5; }
81 /* 苗木 */
82 .chips{ display:flex; gap:9px; overflow-x:auto; padding-bottom:4px; }
83 .chips::-webkit-scrollbar{ display:none; }
84 .tchip{ flex:0 0 auto; padding:9px 14px; border-radius:999px; background:#eef5ec;
85 border:1.5px solid transparent; font-size:13.5px; font-weight:600; color:#5a7a5a; white-space:nowrap; }
86 .tchip.on{ background:#e3f7ea; border-color:var(--green); color:#15803d; }
87 .prod{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:12px; }
88 .pc{ background:var(--card); border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(40,80,30,.05); }
89 .pc .ph{ height:78px; display:flex; align-items:center; justify-content:center; font-size:40px;
90 background:linear-gradient(135deg,#e7f7ea,#f1fbf0); }
91 .pc .pb{ padding:10px 11px; }
92 .pc .pt{ font-size:14px; font-weight:800; color:#2f5a3a; }
93 .pc .ps{ font-size:11.5px; color:var(--mute); margin-top:3px; }
94 .pc .pp{ font-size:15px; font-weight:800; color:var(--green); margin-top:6px; }
95 .pc .pp small{ font-size:11px; color:var(--mute); font-weight:600; }
96 /* 实景 */
97 .scenes{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; }
98 .sc{ border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(40,80,30,.05); background:#fff; }
99 .sc .sh{ height:88px; display:flex; align-items:center; justify-content:center; font-size:40px;
100 background:linear-gradient(135deg,#dff3e3,#eef8ec); }
101 .sc .st{ padding:10px 11px; }
102 .sc .st .t{ font-size:13.5px; font-weight:800; color:#2f5a3a; }
103 .sc .st .d{ font-size:11.5px; color:var(--mute); margin-top:3px; line-height:1.5; }
104 /* 关于 */
105 .steps{ display:flex; flex-direction:column; gap:0; }
106 .step{ display:flex; gap:12px; padding:12px 2px; position:relative; }
107 .step .num{ width:30px; height:30px; border-radius:50%; background:var(--green); color:#fff;
108 font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
109 .step .ct .t{ font-size:14px; font-weight:800; color:#2f5a3a; }
110 .step .ct .d{ font-size:12px; color:var(--mute); margin-top:3px; line-height:1.6; }
111 .step:not(:last-child)::before{ content:""; position:absolute; left:15px; top:42px; bottom:0;
112 width:2px; background:var(--line); }
113 .honor{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
114 .ho{ background:#f3fbf0; border-radius:13px; padding:13px; text-align:center; }
115 .ho .e{ font-size:26px; }
116 .ho .t{ font-size:12.5px; font-weight:700; color:#2f5a3a; margin-top:6px; }
117 .cmt{ border-bottom:1px solid var(--line); padding:11px 2px; }
118 .cmt:last-child{ border-bottom:none; }
119 .cmt .h{ display:flex; align-items:center; gap:9px; }
120 .cmt .av{ width:34px; height:34px; border-radius:50%; background:#e3f7ea; display:flex;
121 align-items:center; justify-content:center; font-size:18px; }
122 .cmt .nm{ font-size:13.5px; font-weight:800; }
123 .cmt .st{ margin-left:auto; color:#f5a623; font-size:13px; }
124 .cmt .tx{ font-size:12.5px; color:#566b54; margin-top:7px; line-height:1.6; }
125 /* 联系 */
126 .info{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line); }
127 .info:last-child{ border-bottom:none; }
128 .info .ic{ width:40px; height:40px; border-radius:12px; background:#e3f7ea; display:flex;
129 align-items:center; justify-content:center; font-size:21px; flex:0 0 auto; }
130 .info .t{ font-size:12px; color:var(--mute); }
131 .info .v{ font-size:14px; font-weight:700; color:#2f5a3a; margin-top:2px; }
132 .field{ margin-top:12px; }
133 .field label{ font-size:13px; font-weight:700; color:#3d5a3d; display:block; margin-bottom:7px; }
134 .field input, .field textarea, .field select{ width:100%; border:1.5px solid var(--line); border-radius:12px;
135 padding:12px; font-size:14px; color:var(--text); font-family:inherit; background:#fff; }
136 .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--green); }
137 .field textarea{ resize:none; height:74px; }
138 .map{ height:120px; border-radius:14px; background:linear-gradient(135deg,#dbeede,#eaf6ec);
139 display:flex; align-items:center; justify-content:center; flex-direction:column; color:#5b8a5b; font-size:13px; }
140 .map .e{ font-size:34px; }
141 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
142 height:62px; background:#fff; border-top:1px solid var(--line); display:flex; }
143 .tabbar button{ flex:1; border:none; background:none; font-size:11.5px; color:var(--mute);
144 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
145 .tabbar button .ti{ font-size:20px; }
146 .tabbar button.on{ color:var(--green); font-weight:700; }
147 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
148 background:rgba(30,45,30,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
149 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
150 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
151</style>
152</head>
153<body>
154<div class="app">
155 <header class="topbar">
156 <span class="back" id="backBtn">‹</span>
157 <span class="tt" id="topTitle">青禾园林苗圃</span>
158 <span class="role">🌿 一手货源</span>
159 </header>
160
161 <main class="views">
162 <!-- 首页 -->
163 <section class="view active" id="view-home">
164 <div class="hero">
165 <div class="logo">🌳</div>
166 <div class="nm">青禾园林苗圃</div>
167 <div class="slogan">自有基地 · 一手苗木 · 全国直发<br>园林绿化 / 市政工程 / 小区造景苗木供应商</div>
168 <div class="badges"><span>🏅 省级林业龙头</span><span>📜 经营许可齐全</span><span>🚚 全国发货</span></div>
169 </div>
170 <div class="ov" style="margin-top:13px">
171 <div class="ovc"><div class="n">基地面积</div><div class="v">1,200 <small>亩</small></div></div>
172 <div class="ovc"><div class="n">苗木品种</div><div class="v">860<small>+ 种</small></div></div>
173 <div class="ovc"><div class="n">合作客户</div><div class="v">3,200<small>+ 家</small></div></div>
174 <div class="ovc"><div class="n">年销量</div><div class="v">50<small>万株</small></div></div>
175 </div>
176 <div class="card">
177 <h3><span class="ic">✨</span>我们的优势</h3>
178 <div class="advs">
179 <div class="adv"><div class="e">📜</div><div class="t">资质齐全</div><div class="d">林木种子生产经营许可证，可开正规发票</div></div>
180 <div class="adv"><div class="e">🌱</div><div class="t">一手货源</div><div class="d">自有基地直供，无中间商，价格更低</div></div>
181 <div class="adv"><div class="e">🚚</div><div class="t">全国发货</div><div class="d">专车 / 冷链直达，起苗到货全程保鲜</div></div>
182 <div class="adv"><div class="e">💚</div><div class="t">售后包活</div><div class="d">一对一技术指导，承诺成活率 99%</div></div>
183 </div>
184 </div>
185 <div class="card">
186 <h3><span class="ic">🔥</span>热销苗木 <span class="more" data-go="plants">全部 ›</span></h3>
187 <div class="prod" id="hotBox"></div>
188 </div>
189 <div class="card">
190 <h3><span class="ic">📖</span>了解更多</h3>
191 <div class="grid">
192 <div class="gi" data-go="plants"><div class="e">🌿</div><div class="t">苗木展示</div></div>
193 <div class="gi" data-go="gallery"><div class="e">🏞️</div><div class="t">苗圃实景</div></div>
194 <div class="gi" data-go="about"><div class="e">🏢</div><div class="t">关于苗圃</div></div>
195 <div class="gi" data-go="contact"><div class="e">📞</div><div class="t">联系我们</div></div>
196 <div class="gi" data-go="gallery"><div class="e">📦</div><div class="t">发货现场</div></div>
197 <div class="gi" data-go="contact"><div class="e">💬</div><div class="t">在线询价</div></div>
198 </div>
199 </div>
200 </section>
201
202 <!-- 苗木展示 -->
203 <section class="view" id="view-plants">
204 <div class="card">
205 <h3><span class="ic">🌿</span>苗木展示</h3>
206 <p class="hint">按类别筛选，点击查看规格与参考价（价格随行情浮动，以询价为准）</p>
207 <div class="chips" id="catChips">
208 <div class="tchip on" data-c="all">全部</div>
209 <div class="tchip" data-c="乔木">乔木</div>
210 <div class="tchip" data-c="灌木">灌木</div>
211 <div class="tchip" data-c="花卉">花卉</div>
212 <div class="tchip" data-c="草坪">草坪</div>
213 <div class="tchip" data-c="果树">果树</div>
214 <div class="tchip" data-c="盆景">盆景</div>
215 </div>
216 <div class="prod" id="prodBox"></div>
217 </div>
218 </section>
219
220 <!-- 苗圃实景 -->
221 <section class="view" id="view-gallery">
222 <div class="card">
223 <h3><span class="ic">🏞️</span>苗圃实景</h3>
224 <p class="hint">1,200 亩标准化种植基地，从育苗到发货一站式</p>
225 <div class="scenes" id="sceneBox"></div>
226 </div>
227 </section>
228
229 <!-- 关于苗圃 -->
230 <section class="view" id="view-about">
231 <div class="card">
232 <h3><span class="ic">🏢</span>企业简介</h3>
233 <p class="intro">青禾园林苗圃成立于 2008 年，坐落于华东苗木集散核心区，是集<b>园林苗木培育、造型、销售与绿化工程供应</b>于一体的现代化苗圃。基地总面积 1,200 亩，涵盖乔木、灌木、色块、花卉、草坪、果树及盆景七大品类 860 余种，长期服务于市政道路、住宅小区、公园广场与私家庭院的绿化造景。</p>
234 </div>
235 <div class="card">
236 <h3><span class="ic">🏅</span>资质荣誉</h3>
237 <div class="honor">
238 <div class="ho"><div class="e">🥇</div><div class="t">省级林业龙头企业</div></div>
239 <div class="ho"><div class="e">📜</div><div class="t">林木种子生产经营许可证</div></div>
240 <div class="ho"><div class="e">✅</div><div class="t">ISO 9001 质量认证</div></div>
241 <div class="ho"><div class="e">🤝</div><div class="t">重合同守信用单位</div></div>
242 </div>
243 </div>
244 <div class="card">
245 <h3><span class="ic">🔄</span>服务流程</h3>
246 <div class="steps" id="stepBox"></div>
247 </div>
248 <div class="card">
249 <h3><span class="ic">💬</span>客户评价</h3>
250 <div class="cmt"><div class="h"><div class="av">🌆</div><div class="nm">嘉兴某市政园林</div><div class="st">★★★★★</div></div>
251 <div class="tx">香樟、银杏规格整齐、土球标准，专车到货几乎零损耗，工期没耽误，后续项目继续合作。</div></div>
252 <div class="cmt"><div class="h"><div class="av">🏘️</div><div class="nm">苏州某物业小区</div><div class="st">★★★★★</div></div>
253 <div class="tx">红叶石楠、金森女贞色块苗密度好、成活率高，包活承诺让人放心，造景效果很出彩。</div></div>
254 <div class="cmt"><div class="h"><div class="av">🏡</div><div class="nm">杭州私家庭院业主</div><div class="st">★★★★☆</div></div>
255 <div class="tx">罗汉松盆景造型有韵味，老板还远程指导种植养护，体验很专业贴心。</div></div>
256 </div>
257 </section>
258
259 <!-- 联系我们 -->
260 <section class="view" id="view-contact">
261 <div class="card">
262 <h3><span class="ic">📞</span>联系方式</h3>
263 <div class="info"><div class="ic">📱</div><div><div class="t">业务热线</div><div class="v">400-820-0868</div></div></div>
264 <div class="info"><div class="ic">💬</div><div><div class="t">微信 / 手机</div><div class="v">138-0000-8668（王经理）</div></div></div>
265 <div class="info"><div class="ic">🕘</div><div><div class="t">营业时间</div><div class="v">08:00 - 18:00（全年可看苗）</div></div></div>
266 <div class="info"><div class="ic">📍</div><div><div class="t">基地地址</div><div class="v">华东苗木城 · 青禾园林 1 号基地</div></div></div>
267 <div class="map"><div class="e">🗺️</div>点击导航至基地 · 支持实地看苗选苗</div>
268 </div>
269 <div class="card">
270 <h3><span class="ic">💬</span>在线询价</h3>
271 <p class="hint">填写需求，苗圃专员 1 小时内回电报价</p>
272 <div class="field"><label>称呼</label><input id="fName" placeholder="如：李先生 / 某园林公司"></div>
273 <div class="field"><label>联系电话</label><input id="fTel" placeholder="方便回拨的手机号"></div>
274 <div class="field"><label>需求苗木</label>
275 <select id="fProd"><option>香樟（乔木）</option><option>桂花（灌木）</option><option>红叶石楠（色块）</option>
276 <option>金森女贞（绿篱）</option><option>罗汉松（盆景）</option><option>其他 / 混批</option></select></div>
277 <div class="field"><label>采购数量</label><input id="fQty" placeholder="如：200 株 / 500 平方"></div>
278 <div class="field"><label>备注</label><textarea id="fNote" placeholder="规格、地径、高度、到货地等要求"></textarea></div>
279 <button class="btn" id="submitBtn">提交询价 · 免费报价</button>
280 </div>
281 </section>
282 </main>
283
284 <nav class="tabbar">
285 <button data-go="home" class="on"><span class="ti">🏠</span>首页</button>
286 <button data-go="plants"><span class="ti">🌿</span>苗木</button>
287 <button data-go="gallery"><span class="ti">🏞️</span>实景</button>
288 <button data-go="about"><span class="ti">🏢</span>关于</button>
289 <button data-go="contact"><span class="ti">📞</span>联系</button>
290 </nav>
291</div>
292<div class="toast" id="toast"></div>
293
294<script>
295var TITLES = { home:"青禾园林苗圃", plants:"苗木展示", gallery:"苗圃实景",
296 about:"关于苗圃", contact:"联系我们" };
297var PRODUCTS = [
298 {e:"🌳",n:"香樟",c:"乔木",s:"胸径 8-10cm",p:280},
299 {e:"🍂",n:"银杏",c:"乔木",s:"胸径 10-12cm",p:360},
300 {e:"🌸",n:"桂花",c:"灌木",s:"高 1.5-2m",p:120},
301 {e:"🔴",n:"红叶石楠",c:"灌木",s:"冠幅 60cm",p:15},
302 {e:"💚",n:"金森女贞",c:"灌木",s:"高 40cm",p:12},
303 {e:"🌷",n:"月季",c:"花卉",s:"盆栽 2 年生",p:9},
304 {e:"💐",n:"绣球",c:"花卉",s:"冠幅 50cm",p:28},
305 {e:"🌿",n:"马尼拉草",c:"草坪",s:"满铺 /㎡",p:8},
306 {e:"🍊",n:"柑橘",c:"果树",s:"地径 4cm",p:65},
307 {e:"🍑",n:"枇杷",c:"果树",s:"地径 5cm",p:80},
308 {e:"🪴",n:"罗汉松",c:"盆景",s:"造型 1.2m",p:680},
309 {e:"🌳",n:"朴树",c:"乔木",s:"胸径 12cm",p:420},
310 {e:"🌼",n:"鸢尾",c:"花卉",s:"丛苗",p:6},
311 {e:"🌱",n:"果岭草",c:"草坪",s:"满铺 /㎡",p:10}
312];
313var SCENES = [
314 {e:"🛰️",t:"基地航拍",d:"1,200 亩规整种植区"},
315 {e:"🌳",t:"乔木种植区",d:"香樟 / 银杏 / 朴树"},
316 {e:"🏠",t:"大棚育苗区",d:"色块苗恒温繁育"},
317 {e:"🌿",t:"色块苗区",d:"石楠 / 女贞绿篱"},
318 {e:"⛏️",t:"起苗包装",d:"标准土球包扎"},
319 {e:"🚚",t:"发货装车",d:"专车冷链全国直达"}
320];
321var STEPS = [
322 {t:"咨询选苗",d:"微信 / 电话沟通需求，推荐适配品种与规格"},
323 {t:"实地看苗",d:"预约到基地现场看苗、量规、确认品质"},
324 {t:"起苗质检",d:"专业起苗、土球标准、出库前逐株质检"},
325 {t:"包装发货",d:"保湿包装，专车 / 冷链直达目的地"},
326 {t:"种植指导",d:"一对一技术指导，提高移栽成活率"},
327 {t:"售后包活",d:"承诺成活率 99%，异常免费补苗"}
328];
329var curView="home";
330function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
331function show(v){
332 curView=v;
333 $(".view").removeClass("active"); $("#view-"+v).addClass("active");
334 $("#topTitle").text(TITLES[v]||"青禾园林苗圃");
335 $("#backBtn").css("display", v==="home"?"none":"block");
336 $(".tabbar button").removeClass("on");
337 if($('.tabbar button[data-go="'+v+'"]').length) $('.tabbar button[data-go="'+v+'"]').addClass("on");
338}
339function prodCard(p){
340 return '<div class="pc"><div class="ph">'+p.e+'</div><div class="pb"><div class="pt">'+p.n+
341 '</div><div class="ps">'+p.c+' · '+p.s+'</div><div class="pp">¥'+p.p+'<small> 起</small></div></div></div>';
342}
343function renderHot(){ $("#hotBox").html(PRODUCTS.slice(0,4).map(prodCard).join("")); }
344function renderPlants(cat){
345 var list = cat==="all"?PRODUCTS:PRODUCTS.filter(function(p){return p.c===cat;});
346 $("#prodBox").html(list.map(prodCard).join("") || '<div class="empty"><div class="e">🌱</div>该分类暂未上架</div>');
347}
348function renderScenes(){ $("#sceneBox").html(SCENES.map(function(s){
349 return '<div class="sc"><div class="sh">'+s.e+'</div><div class="st"><div class="t">'+s.t+'</div><div class="d">'+s.d+'</div></div></div>';
350}).join("")); }
351function renderSteps(){ $("#stepBox").html(STEPS.map(function(s,i){
352 return '<div class="step"><div class="num">'+(i+1)+'</div><div class="ct"><div class="t">'+s.t+'</div><div class="d">'+s.d+'</div></div></div>';
353}).join("")); }
354$(function(){
355 renderHot(); renderPlants("all"); renderScenes(); renderSteps();
356 $(document).on("click",".gi[data-go],.row[data-go],.more[data-go],.tabbar button[data-go],.btn[data-go]",function(e){
357 e.stopPropagation(); show($(this).data("go"));
358 });
359 $("#backBtn").on("click",function(){ show("home"); });
360 $("#catChips .tchip").on("click",function(){
361 $("#catChips .tchip").removeClass("on"); $(this).addClass("on");
362 renderPlants($(this).data("c"));
363 });
364 $("#submitBtn").on("click",function(){
365 var name=$("#fName").val().trim(), tel=$("#fTel").val().trim();
366 if(!name||!tel){ toast("请填写称呼与联系电话"); return; }
367 toast("提交成功，专员将尽快回电报价 💚");
368 });
369});
370</script>
371</body>
372</html>