小草口腔诊所_H5/index.html · 约 4100 字符
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="banner">
3 <div>
4 <div class="bn-title">🦷 小草口腔诊所</div>
5 <div class="bn-sub">专业口腔 · 微笑从齿开始</div>
6 <span class="bn-badge">🎁 新客首诊免费检查+洁牙8折</span>
7 </div>
8 <div class="bn-emoji">😁</div>
9</div>
10<div class="quick-grid">
11 <a href="projects.html"><span class="qicon">🦷</span>洗牙补牙</a>
12 <a href="projects.html"><span class="qicon">🔩</span>种植牙</a>
13 <a href="projects.html"><span class="qicon">👄</span>牙齿矫正</a>
14 <a href="doctors.html"><span class="qicon">👨⚕️</span>找医生</a>
15</div>
16<div class="section-title">热门项目 <span>立即预约</span></div>
17<div id="hot-projects"></div>
18<div class="section-title">专家团队 <span>执业认证</span></div>
19<div id="doctor-list"></div>
20<div class="section-title">口腔科普 <span>健康护齿</span></div>
21<div class="card" id="article-list"></div>
22<div class="section-title">就诊保障</div>
23<div class="card" style="display:flex;gap:10px;text-align:center">
24 <div style="flex:1"><div style="font-size:26px">🔬</div><div style="font-size:12px;font-weight:600">数字化设备</div><small style="color:#7b9cb8;font-size:10px">3D口扫</small></div>
25 <div style="flex:1"><div style="font-size:26px">🏥</div><div style="font-size:12px;font-weight:600">无菌诊疗</div><small style="color:#7b9cb8;font-size:10px">一人一机</small></div>
26 <div style="flex:1"><div style="font-size:26px">🛡️</div><div style="font-size:12px;font-weight:600">种植质保</div><small style="color:#7b9cb8;font-size:10px">终身质保</small></div>
27 <div style="flex:1"><div style="font-size:26px">💳</div><div style="font-size:12px;font-weight:600">医保定点</div><small style="color:#7b9cb8;font-size:10px">费用透明</small></div>
28</div>
29<div style="height:80px"></div>
30<div class="tabbar">
31 <a class="active" href="index.html"><span class="icon">🏠</span>首页</a>
32 <a href="projects.html"><span class="icon">🦷</span>项目</a>
33 <a href="doctors.html"><span class="icon">👨⚕️</span>医生</a>
34 <a href="records.html"><span class="icon">📋</span>病历</a>
35 <a href="mine.html"><span class="icon">👤</span>我的</a>
36</div>
37<script src="data.js"></script><script src="app.js"></script>
38<script>
39$('#hot-projects').innerHTML=PROJECTS.filter(p=>p.tag==='hot').slice(0,3).map(p=>`
40 <div class="project-card" onclick="location.href='book.html'">
41 <div class="pc-emoji">${p.emoji}</div>
42 <div class="pc-body">
43 <div class="pc-name">${p.name} <span class="badge badge-hot">热门</span></div>
44 <div class="pc-desc">${p.desc}</div>
45 <div class="pc-meta">⏱️ ${p.time} · 医师团队诊疗</div>
46 <div class="pc-foot"><span class="pc-price"><em>¥</em>${fmt(p.price)}</span><span class="pc-add">去预约</span></div>
47 </div>
48 </div>`).join('');
49$('#doctor-list').innerHTML=DOCTORS.slice(0,2).map(d=>`
50 <div class="doctor-card" onclick="location.href='doctors.html'">
51 <div class="dc-avatar">${d.avatar}</div>
52 <div class="dc-body">
53 <div class="dc-name">${d.name} <span class="dc-score">★ ${d.score}</span></div>
54 <div class="dc-title">${d.title}</div>
55 <div class="dc-meta">从业${d.years} · 累计服务 ${d.orders} 次</div>
56 <div class="dc-spec">${d.spec.map(s=>'<span class="tag">'+s+'</span>').join('')}</div>
57 </div>
58 </div>`).join('');
59$('#article-list').innerHTML=ARTICLES.map(a=>`
60 <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed #e8f2fb">
61 <span style="font-size:13px;flex:1">${a.title}</span>
62 <span style="font-size:11px;color:#7b9cb8;white-space:nowrap">${a.tag} · ${a.views} ›</span>
63 </div>`).join('');
64</script>
65</body></html>