app.js · 约 5431 字符
1// 小草企业官网 · 交互逻辑
2function $(id){return document.getElementById(id)}
3
4// 首页
5let slideIdx = 0;
6function renderBanner(){
7 const el = $('banner'); if(!el) return;
8 el.innerHTML = SLIDES.map((s,i)=>`
9 <div class="slide ${i===0?'active':''}">
10 <h2>${s.title}</h2><p>${s.desc}</p>
11 </div>`).join('') + '<div class="dots">' + SLIDES.map((s,i)=>`<i class="${i===0?'active':''}"></i>`).join('') + '</div>';
12 setInterval(()=>{
13 slideIdx = (slideIdx+1) % SLIDES.length;
14 el.querySelectorAll('.slide').forEach((s,i)=>s.classList.toggle('active', i===slideIdx));
15 el.querySelectorAll('.dots i').forEach((s,i)=>s.classList.toggle('active', i===slideIdx));
16 }, 3500);
17}
18function renderIndex(){
19 renderBanner();
20 const sb = $('stat-bar');
21 if(sb) sb.innerHTML = STATS.map(s=>`<div class="st"><b>${s.num}</b><span>${s.label}</span></div>`).join('');
22 const bg = $('biz-grid');
23 if(bg) bg.innerHTML = BIZS.map(b=>`<a class="biz-card" href="products.html"><span class="bi">${b.icon}</span><b>${b.name}</b><span>${b.desc}</span></a>`).join('');
24 const cl = $('case-list');
25 if(cl) cl.innerHTML = CASES.slice(0,3).map(c=>`
26 <a class="case-item" href="cases.html">
27 <div class="ci-thumb">${c.icon}</div>
28 <div class="ci-info">
29 <div class="ci-title">${c.title}</div>
30 <div class="ci-desc">${c.desc}</div>
31 <div class="ci-tags">${c.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>
32 </div>
33 </a>`).join('');
34 const nl = $('news-list');
35 if(nl) nl.innerHTML = NEWS.slice(0,3).map(n=>`
36 <a class="news-item" href="news.html">
37 <div class="ni-date"><b>${n.d}</b><span>${n.m}</span></div>
38 <div class="ni-info"><div class="ni-title">${n.title}</div><div class="ni-desc">${n.desc}</div></div>
39 </a>`).join('');
40}
41
42// 关于我们
43function renderAbout(){
44 $('ab-name').textContent = SITE.name;
45 $('ab-slogan').textContent = SITE.slogan;
46 const tl = $('timeline');
47 tl.innerHTML = MILESTONES.map(m=>`<div class="tl-item"><div class="tl-year">${m.year}</div><div class="tl-text">${m.text}</div></div>`).join('');
48 const qg = $('qual-grid');
49 qg.innerHTML = QUALS.map(q=>`<div class="qual-item"><span class="qi">${q.icon}</span><b>${q.name}</b><span>${q.desc}</span></div>`).join('');
50 const tg = $('team-grid');
51 tg.innerHTML = TEAM.map(t=>`<div class="team-item"><div class="av">${t.av}</div><b>${t.name}</b><span>${t.role}</span><span>${t.desc}</span></div>`).join('');
52 $('partners').innerHTML = PARTNERS.map(p=>`<span class="tag" style="font-size:13px;padding:6px 12px;margin:4px">${p}</span>`).join('');
53}
54
55// 服务页
56let svcCat = '全部';
57function renderServices(){
58 const cb = $('cat-bar');
59 cb.innerHTML = SVC_CATS.map(c=>`<a class="${c===svcCat?'active':''}" onclick="setSvcCat('${c}')">${c}</a>`).join('');
60 const list = $('svc-list');
61 const svcs = svcCat==='全部' ? SERVICES : SERVICES.filter(s=>s.cat===svcCat);
62 list.innerHTML = svcs.map(s=>`
63 <a class="svc-item" href="contact.html">
64 <div class="si-icon">${s.icon}</div>
65 <div class="si-info">
66 <div class="si-name">${s.name} ${s.tags.map(t=>`<span class="badge ${t==='热销'?'badge-gold':'badge-green'}">${t}</span>`).join('')}</div>
67 <div class="si-desc">${s.desc}</div>
68 <div class="si-price">${s.price}</div>
69 </div>
70 </a>`).join('');
71}
72function setSvcCat(c){ svcCat=c; renderServices(); }
73
74// 案例页
75let caseCat = '全部';
76function renderCases(){
77 const cb = $('cat-bar');
78 if(!cb) return;
79 const cats = ['全部', ...new Set(CASES.map(c=>c.industry))];
80 cb.innerHTML = cats.map(c=>`<a class="${c===caseCat?'active':''}" onclick="setCaseCat('${c}')">${c}</a>`).join('');
81 const list = $('case-list');
82 const cases = caseCat==='全部' ? CASES : CASES.filter(c=>c.industry===caseCat);
83 list.innerHTML = cases.map(c=>`
84 <div class="case-item">
85 <div class="ci-thumb">${c.icon}</div>
86 <div class="ci-info">
87 <div class="ci-title">${c.title}</div>
88 <div class="ci-desc">${c.desc}</div>
89 <div class="ci-tags">${c.tags.map(t=>`<span class="tag">${t}</span>`).join('')}</div>
90 </div>
91 </div>`).join('');
92}
93function setCaseCat(c){ caseCat=c; renderCases(); }
94
95// 新闻页
96function renderNews(){
97 const nl = $('news-list');
98 nl.innerHTML = NEWS.map(n=>`
99 <a class="news-item" href="javascript:void(0)">
100 <div class="ni-date"><b>${n.d}</b><span>${n.m}</span></div>
101 <div class="ni-info"><div class="ni-title">${n.title}</div><div class="ni-desc">${n.desc}</div></div>
102 </a>`).join('');
103}
104
105// 联系页
106function renderContact(){
107 $('c-phone').textContent = SITE.phone;
108 $('c-email').textContent = SITE.email;
109 $('c-wechat').textContent = SITE.wechat;
110 $('c-addr').textContent = SITE.addr;
111 $('c-hours').textContent = SITE.hours;
112}
113function submitForm(){
114 const name = $('f-name').value.trim();
115 const phone = $('f-phone').value.trim();
116 const msg = $('f-msg').value.trim();
117 if(!name || !phone){ alert('请填写称呼和联系电话'); return; }
118 if(!/^1\d{10}$/.test(phone)){ alert('请输入正确的手机号'); return; }
119 alert('✅ 提交成功！\n我们将在30分钟内与您联系\n咨询内容：' + (msg || '（未填写）'));
120 $('f-name').value=''; $('f-phone').value=''; $('f-msg').value='';
121}
122