首页/ mobileweb/ 互联网医疗服务平台H5移动端功能演示/ 代码预览

💻 代码预览 · 互联网医疗服务平台H5移动端功能演示

mw_service · 上传者 驰旭教育
← 返回详情
index.html · 约 24100 字符
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.0, maximum-scale=1.0, user-scalable=no">
6<title>互联网医疗服务平台</title>
7<style>
8* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
9html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f7f5; color: #333; }
10ul, li { list-style: none; }
11.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f5f7f5; position: relative; padding-bottom: 64px; overflow: hidden; }
12.page { display: none; min-height: 100vh; }
13.page.active { display: block; }
14
15.status-bar { height: 24px; background: #10b981; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; color: #fff; }
16
17/* 首页 */
18.home-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding: 16px; }
19.home-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
20.home-top .loc { font-size: 13px; }
21.home-top .icons { display: flex; gap: 14px; font-size: 18px; }
22.search-box { background: #fff; border-radius: 24px; height: 42px; display: flex; align-items: center; padding: 0 16px; color: #999; font-size: 14px; }
23.search-box span { margin-left: 8px; }
24.notice-bar { background: #ecfdf5; margin: 12px 16px; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #065f46; display: flex; align-items: center; gap: 8px; }
25.dept-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 16px; background: #fff; margin: 12px 0; }
26.dept-item { display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #555; }
27.dept-icon { width: 42px; height: 42px; border-radius: 14px; background: #d1fae5; color: #059669; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 6px; }
28.section-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 8px; }
29.section-head h3 { font-size: 15px; font-weight: 700; color: #111; }
30.section-head a { font-size: 12px; color: #10b981; }
31.doctor-list { background: #fff; padding: 0 16px; }
32.doctor-card { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
33.doctor-card:last-child { border-bottom: none; }
34.doc-avatar { width: 56px; height: 56px; border-radius: 50%; background: #e5e7eb; display: flex; align-items: center; justify-content: center; font-size: 28px; }
35.doc-info { flex: 1; }
36.doc-name { font-size: 15px; font-weight: 600; color: #111; }
37.doc-title { font-size: 12px; color: #999; margin-left: 6px; }
38.doc-hosp { font-size: 12px; color: #666; margin-top: 2px; }
39.doc-tags { display: flex; gap: 6px; margin-top: 6px; }
40.doc-tag { padding: 2px 8px; background: #ecfdf5; color: #047857; border-radius: 10px; font-size: 11px; }
41.doc-score { font-size: 12px; color: #f59e0b; margin-top: 4px; }
42
43/* 医生详情 */
44.detail-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding: 20px 16px 70px; }
45.detail-top { display: flex; gap: 16px; align-items: center; }
46.detail-avatar { width: 80px; height: 80px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; border: 3px solid rgba(255,255,255,0.3); }
47.detail-name h2 { font-size: 20px; font-weight: 700; }
48.detail-name p { font-size: 13px; opacity: 0.9; margin-top: 4px; }
49.detail-card { background: #fff; margin: -50px 16px 12px; border-radius: 16px; padding: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
50.detail-card h4 { font-size: 14px; color: #111; margin-bottom: 10px; }
51.detail-card p { font-size: 13px; color: #555; line-height: 1.6; }
52.detail-stats { display: flex; justify-content: space-around; text-align: center; margin: 12px 0; }
53.detail-stats .num { font-size: 18px; font-weight: 700; color: #059669; }
54.detail-stats .label { font-size: 11px; color: #999; margin-top: 2px; }
55.service-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
56.svc-btn { background: #ecfdf5; border-radius: 12px; padding: 12px 0; text-align: center; font-size: 13px; color: #047857; }
57.svc-btn .icon { font-size: 22px; display: block; margin-bottom: 4px; }
58.booking-bar { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; padding: 10px 16px; border-top: 1px solid #f3f4f6; display: flex; gap: 12px; }
59.booking-bar .price { flex: 1; font-size: 14px; color: #666; }
60.booking-bar .price strong { color: #ef4444; font-size: 18px; }
61.booking-bar .btn { padding: 10px 24px; background: #10b981; color: #fff; border-radius: 20px; font-size: 14px; font-weight: 600; }
62
63/* 服务页 */
64.service-banner { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding: 24px 16px; text-align: center; }
65.service-banner h2 { font-size: 20px; font-weight: 700; }
66.service-banner p { font-size: 13px; opacity: 0.9; margin-top: 6px; }
67.service-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px; background: #fff; margin-bottom: 12px; }
68.service-cat { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #555; }
69.service-cat .icon { width: 48px; height: 48px; border-radius: 16px; background: #d1fae5; color: #059669; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 6px; }
70.recommend-list { background: #fff; padding: 0 16px; }
71.rec-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
72.rec-item:last-child { border-bottom: none; }
73.rec-icon { width: 48px; height: 48px; border-radius: 12px; background: #ecfdf5; color: #10b981; display: flex; align-items: center; justify-content: center; font-size: 22px; }
74.rec-info { flex: 1; }
75.rec-info .name { font-size: 14px; font-weight: 600; color: #111; }
76.rec-info .desc { font-size: 12px; color: #999; margin-top: 2px; }
77.rec-info .price { font-size: 13px; color: #ef4444; margin-top: 4px; }
78
79/* 会员权益 */
80.vip-header { background: linear-gradient(135deg, #059669 0%, #047857 100%); color: #fff; padding: 32px 16px 80px; text-align: center; }
81.vip-header h2 { font-size: 22px; font-weight: 700; }
82.vip-header p { font-size: 13px; opacity: 0.9; margin-top: 6px; }
83.vip-card { background: #fff; margin: -60px 16px 12px; border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
84.vip-level { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
85.vip-level .left { display: flex; align-items: center; gap: 10px; }
86.vip-level .badge { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
87.vip-level .name { font-size: 16px; font-weight: 700; color: #111; }
88.vip-level .tip { font-size: 12px; color: #999; }
89.vip-progress { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
90.vip-progress .bar { height: 100%; width: 60%; background: #10b981; border-radius: 4px; }
91.vip-progress-text { font-size: 12px; color: #999; text-align: right; }
92.vip-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
93.benefit-item { text-align: center; padding: 12px 0; background: #f0fdf4; border-radius: 12px; }
94.benefit-item .icon { font-size: 24px; }
95.benefit-item .name { font-size: 12px; color: #111; margin-top: 4px; }
96.benefit-item .desc { font-size: 11px; color: #999; }
97
98/* 健康档案 */
99.health-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding: 24px 16px; }
100.health-header h2 { font-size: 20px; font-weight: 700; }
101.health-header p { font-size: 13px; opacity: 0.9; margin-top: 4px; }
102.health-card { background: #fff; margin: 12px 16px; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
103.health-card h4 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 12px; }
104.health-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
105.health-metric { background: #f0fdf4; border-radius: 12px; padding: 14px; }
106.health-metric .label { font-size: 12px; color: #666; }
107.health-metric .value { font-size: 20px; font-weight: 700; color: #059669; margin-top: 4px; }
108.health-metric .unit { font-size: 12px; color: #999; margin-left: 2px; }
109.health-metric .status { font-size: 11px; color: #10b981; margin-top: 4px; }
110.plan-list { padding-top: 8px; }
111.plan-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
112.plan-item:last-child { border-bottom: none; }
113.plan-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; }
114.plan-icon { width: 28px; height: 28px; border-radius: 8px; background: #d1fae5; color: #059669; display: flex; align-items: center; justify-content: center; font-size: 14px; }
115.plan-right { font-size: 12px; color: #999; }
116
117/* 个人中心 */
118.me-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; padding: 40px 16px 24px; }
119.me-top { display: flex; align-items: center; gap: 14px; }
120.me-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 3px solid rgba(255,255,255,0.3); }
121.me-name h2 { font-size: 18px; font-weight: 600; }
122.me-name p { font-size: 12px; opacity: 0.9; margin-top: 2px; }
123.me-stats { display: flex; justify-content: space-around; margin-top: 24px; text-align: center; }
124.me-stats .num { font-size: 20px; font-weight: 700; }
125.me-stats .label { font-size: 12px; opacity: 0.85; margin-top: 2px; }
126.family-card { background: #fff; margin: 12px 16px; border-radius: 14px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
127.family-card .left { font-size: 14px; color: #333; }
128.family-card .right { color: #10b981; font-size: 13px; }
129.menu-card { background: #fff; margin: 12px 16px; border-radius: 14px; padding: 8px 0; }
130.menu-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
131.menu-item:last-child { border-bottom: none; }
132.menu-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #333; }
133.menu-icon { width: 28px; height: 28px; border-radius: 8px; background: #d1fae5; color: #059669; display: flex; align-items: center; justify-content: center; font-size: 14px; }
134.menu-right { color: #999; font-size: 14px; }
135
136/* 底部导航 */
137.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 64px; background: #fff; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-around; align-items: center; z-index: 100; }
138.tab-item { flex: 1; text-align: center; padding: 8px 0; color: #999; font-size: 11px; }
139.tab-item .icon { font-size: 22px; display: block; margin-bottom: 2px; }
140.tab-item.active { color: #10b981; }
141.hidden-tabbar .tabbar { display: none; }
142.hidden-tabbar .app { padding-bottom: 0; }
143</style>
144</head>
145<body>
146<div class="app" id="app">
147  <div class="status-bar"><span>14:25</span><span class="icons">📶 🔋</span></div>
148
149  <!-- 1. 首页 -->
150  <div class="page active" id="page_home">
151    <div class="home-header">
152      <div class="home-top"><span class="loc">📍 北京 · 小草科技健康服务</span><span class="icons">🔔 ⚙</span></div>
153      <div class="search-box"><span>🔍</span><span>搜索医生、科室、疾病</span></div>
154    </div>
155    <div class="notice-bar"><span>📢</span><span>驰旭科技联合三甲医院开通夜间急诊绿色通道</span></div>
156    <div class="dept-grid">
157      <div class="dept-item"><div class="dept-icon">🩺</div><span>全科</span></div>
158      <div class="dept-item"><div class="dept-icon">🦷</div><span>口腔</span></div>
159      <div class="dept-item"><div class="dept-icon">👁</div><span>眼科</span></div>
160      <div class="dept-item"><div class="dept-icon">🧠</div><span>神经</span></div>
161      <div class="dept-item"><div class="dept-icon">❤</div><span>心内</span></div>
162      <div class="dept-item"><div class="dept-icon">🦴</div><span>骨科</span></div>
163      <div class="dept-item"><div class="dept-icon">🧒</div><span>儿科</span></div>
164      <div class="dept-item"><div class="dept-icon">🌿</div><span>中医</span></div>
165      <div class="dept-item"><div class="dept-icon">💊</div><span>药学</span></div>
166      <div class="dept-item"><div class="dept-icon">📋</div><span>体检</span></div>
167    </div>
168    <div class="section-head"><h3>推荐医生</h3><a>更多 &gt;</a></div>
169    <div class="doctor-list">
170      <div class="doctor-card">
171        <div class="doc-avatar">张</div>
172        <div class="doc-info">
173          <div><span class="doc-name">张三</span><span class="doc-title">主任医师</span></div>
174          <div class="doc-hosp">小草科技附属医院 · 心血管内科</div>
175          <div class="doc-tags"><span class="doc-tag">高血压</span><span class="doc-tag">冠心病</span></div>
176          <div class="doc-score">⭐ 4.9 · 接诊 3280 次</div>
177        </div>
178      </div>
179      <div class="doctor-card">
180        <div class="doc-avatar">李</div>
181        <div class="doc-info">
182          <div><span class="doc-name">李四</span><span class="doc-title">副主任医师</span></div>
183          <div class="doc-hosp">驰旭科技合作医院 · 儿科</div>
184          <div class="doc-tags"><span class="doc-tag">小儿发热</span><span class="doc-tag">过敏</span></div>
185          <div class="doc-score">⭐ 4.8 · 接诊 2156 次</div>
186        </div>
187      </div>
188    </div>
189  </div>
190
191  <!-- 2. 医生详情 -->
192  <div class="page" id="page_detail">
193    <div class="detail-header">
194      <div class="detail-top">
195        <div class="detail-avatar">张</div>
196        <div class="detail-name">
197          <h2>张三 <span style="font-size:13px;font-weight:400;">主任医师</span></h2>
198          <p>小草科技附属医院 · 心血管内科</p>
199          <p>从业 18 年 · 已服务 3280 人次</p>
200        </div>
201      </div>
202    </div>
203    <div class="detail-card">
204      <h4>擅长方向</h4>
205      <p>高血压、冠心病、心律失常、心力衰竭等心血管常见病及慢病管理,提供用药指导与复诊建议。</p>
206      <div class="detail-stats">
207        <div><div class="num">99.2%</div><div class="label">好评率</div></div>
208        <div><div class="num">&lt;5min</div><div class="label">平均回复</div></div>
209        <div><div class="num">3280</div><div class="label">服务人次</div></div>
210      </div>
211      <h4>可预约服务</h4>
212      <div class="service-btns">
213        <div class="svc-btn"><span class="icon">💬</span>图文问诊</div>
214        <div class="svc-btn"><span class="icon">📹</span>视频问诊</div>
215        <div class="svc-btn"><span class="icon">📅</span>预约挂号</div>
216      </div>
217    </div>
218    <div class="booking-bar">
219      <div class="price">图文问诊 <strong>¥28</strong></div>
220      <div class="btn">立即预约</div>
221    </div>
222  </div>
223
224  <!-- 3. 服务页 -->
225  <div class="page" id="page_service">
226    <div class="service-banner">
227      <h2>医疗健康服务</h2>
228      <p>由驰旭科技提供技术支持的互联网医疗平台</p>
229    </div>
230    <div class="service-cats">
231      <div class="service-cat"><div class="icon">🩺</div><span>在线问诊</span></div>
232      <div class="service-cat"><div class="icon">📋</div><span>体检预约</span></div>
233      <div class="service-cat"><div class="icon">💊</div><span>药品配送</span></div>
234      <div class="service-cat"><div class="icon">🧪</div><span>报告解读</span></div>
235      <div class="service-cat"><div class="icon">🏥</div><span>预约挂号</span></div>
236      <div class="service-cat"><div class="icon">🚑</div><span>急救指导</span></div>
237      <div class="service-cat"><div class="icon">🌿</div><span>中医调理</span></div>
238      <div class="service-cat"><div class="icon">🦷</div><span>口腔护理</span></div>
239    </div>
240    <div class="section-head" style="background:#fff;margin-top:0;padding-top:16px;"><h3>热门服务套餐</h3><a>全部 &gt;</a></div>
241    <div class="recommend-list">
242      <div class="rec-item">
243        <div class="rec-icon">📋</div>
244        <div class="rec-info"><div class="name">基础入职体检</div><div class="desc">含血常规、肝功能、胸片、心电图</div><div class="price">¥168 起</div></div>
245      </div>
246      <div class="rec-item">
247        <div class="rec-icon">🧬</div>
248        <div class="rec-info"><div class="name">家庭慢病管理包</div><div class="desc">高血压/糖尿病专属,全年 12 次随访</div><div class="price">¥599 起</div></div>
249      </div>
250      <div class="rec-item">
251        <div class="rec-icon">👶</div>
252        <div class="rec-info"><div class="name">儿童生长发育评估</div><div class="desc">骨龄测评 + 营养指导 + 线上随访</div><div class="price">¥299 起</div></div>
253      </div>
254    </div>
255  </div>
256
257  <!-- 4. 会员权益 -->
258  <div class="page" id="page_vip">
259    <div class="vip-header">
260      <h2>健康会员</h2>
261      <p>小草科技健康会员 · 享专属医疗特权</p>
262    </div>
263    <div class="vip-card">
264      <div class="vip-level">
265        <div class="left">
266          <div class="badge">V2</div>
267          <div>
268            <div class="name">黄金会员</div>
269            <div class="tip">再消费 ¥200 即可升级铂金会员</div>
270          </div>
271        </div>
272      </div>
273      <div class="vip-progress"><div class="bar"></div></div>
274      <div class="vip-progress-text">800 / 1000 成长值</div>
275      <div class="vip-benefits">
276        <div class="benefit-item"><div class="icon">💬</div><div class="name">问诊折扣</div><div class="desc">9 折</div></div>
277        <div class="benefit-item"><div class="icon">🚚</div><div class="name">药品免邮</div><div class="desc">每月 2 次</div></div>
278        <div class="benefit-item"><div class="icon">📞</div><div class="name">专属客服</div><div class="desc">优先接待</div></div>
279        <div class="benefit-item"><div class="icon">🎁</div><div class="name">生日礼包</div><div class="desc">体检券</div></div>
280        <div class="benefit-item"><div class="icon">🏥</div><div class="name">名医号源</div><div class="desc">优先预约</div></div>
281        <div class="benefit-item"><div class="icon">📋</div><div class="name">报告加急</div><div class="desc">24h 出结果</div></div>
282      </div>
283    </div>
284  </div>
285
286  <!-- 5. 健康档案 -->
287  <div class="page" id="page_health">
288    <div class="health-header">
289      <h2>健康档案</h2>
290      <p>张三 · 最近更新:2026-07-16</p>
291    </div>
292    <div class="health-card">
293      <h4>身体指标</h4>
294      <div class="health-grid">
295        <div class="health-metric"><div class="label">身高</div><div class="value">175<span class="unit">cm</span></div></div>
296        <div class="health-metric"><div class="label">体重</div><div class="value">72<span class="unit">kg</span></div><div class="status">标准</div></div>
297        <div class="health-metric"><div class="label">血压</div><div class="value">128<span class="unit">/82</span></div><div class="status">正常偏高</div></div>
298        <div class="health-metric"><div class="label">血糖</div><div class="value">5.6<span class="unit">mmol/L</span></div><div class="status">正常</div></div>
299      </div>
300    </div>
301    <div class="health-card">
302      <h4>健康计划</h4>
303      <div class="plan-list">
304        <div class="plan-item"><div class="plan-left"><span class="plan-icon">🏃</span>每日步数目标</div><div class="plan-right">已完成 8000 步</div></div>
305        <div class="plan-item"><div class="plan-left"><span class="plan-icon">💊</span>服药提醒</div><div class="plan-right">今日 2 次已打卡</div></div>
306        <div class="plan-item"><div class="plan-left"><span class="plan-icon">😴</span>睡眠监测</div><div class="plan-right">昨晚 7.2 小时</div></div>
307        <div class="plan-item"><div class="plan-left"><span class="plan-icon">🥗</span>饮食建议</div><div class="plan-right">低盐低脂方案</div></div>
308      </div>
309    </div>
310  </div>
311
312  <!-- 6. 个人中心 -->
313  <div class="page" id="page_me">
314    <div class="me-header">
315      <div class="me-top">
316        <div class="me-avatar">张</div>
317        <div class="me-name"><h2>张三</h2><p>健康积分 1280 · 黄金会员</p></div>
318      </div>
319      <div class="me-stats">
320        <div><div class="num">12</div><div class="label">就诊人</div></div>
321        <div><div class="num">8</div><div class="label">我的订单</div></div>
322        <div><div class="num">3</div><div class="label">待复诊</div></div>
323      </div>
324    </div>
325    <div class="family-card">
326      <div class="left">👨‍👩‍👧 就诊人管理</div>
327      <div class="right">管理 &gt;</div>
328    </div>
329    <div class="menu-card">
330      <div class="menu-item"><div class="menu-left"><span class="menu-icon">📋</span>我的问诊</div><div class="menu-right">&gt;</div></div>
331      <div class="menu-item"><div class="menu-left"><span class="menu-icon">💊</span>药品订单</div><div class="menu-right">&gt;</div></div>
332      <div class="menu-item"><div class="menu-left"><span class="menu-icon">🏥</span>挂号记录</div><div class="menu-right">&gt;</div></div>
333      <div class="menu-item"><div class="menu-left"><span class="menu-icon">📄</span>体检报告</div><div class="menu-right">&gt;</div></div>
334    </div>
335    <div class="menu-card">
336      <div class="menu-item"><div class="menu-left"><span class="menu-icon">💰</span>健康钱包</div><div class="menu-right">¥128.50 &gt;</div></div>
337      <div class="menu-item"><div class="menu-left"><span class="menu-icon">🎟</span>优惠券</div><div class="menu-right">5 张可用 &gt;</div></div>
338      <div class="menu-item"><div class="menu-left"><span class="menu-icon">⚙</span>设置</div><div class="menu-right">&gt;</div></div>
339      <div class="menu-item"><div class="menu-left"><span class="menu-icon">🎧</span>客服中心</div><div class="menu-right">&gt;</div></div>
340    </div>
341  </div>
342
343  <!-- 底部导航 -->
344  <div class="tabbar" id="tabbar">
345    <div class="tab-item active" data-page="home" onclick="go('home')"><span class="icon">🏠</span>首页</div>
346    <div class="tab-item" data-page="service" onclick="go('service')"><span class="icon">🩺</span>服务</div>
347    <div class="tab-item" data-page="vip" onclick="go('vip')"><span class="icon">👑</span>会员</div>
348    <div class="tab-item" data-page="health" onclick="go('health')"><span class="icon">📊</span>健康</div>
349    <div class="tab-item" data-page="me" onclick="go('me')"><span class="icon">👤</span>我的</div>
350  </div>
351</div>
352<script src="../../../attachment/demos/_vendor/jquery.min.js"></script>
353<script>
354function go(name){
355  $('.page').removeClass('active');
356  $('#page_'+name).addClass('active');
357  $('.tab-item').removeClass('active');
358  $('.tab-item[data-page='+name+']').addClass('active');
359  if(name=='detail'){ $('#app').addClass('hidden-tabbar'); } else { $('#app').removeClass('hidden-tabbar'); }
360  window.scrollTo(0,0);
361}
362window.show = function(name){ go(name); };
363$(function(){ go('home'); });
364</script>
365</body>
366</html>