profile.html · 约 5229 字符
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<link rel="stylesheet" href="style.css">8</head>9<body>10 <div class="app-top">11 <div class="loc">👤 个人中心</div>12 <h1 id="topTitle">健康档案</h1>13 <div class="sub" id="topSub">会员 · 家庭成员 · 用药提醒 · 健康宣教</div>14 </div>1516 <div class="card" style="margin-top:-2px">17 <div class="row">18 <div class="avatar lg">草</div>19 <div style="flex:1">20 <div class="nm" id="pName" style="font-size:17px"></div>21 <div class="mt" id="pMeta"></div>22 <div class="rt" style="color:var(--brand-d)" id="pMember"></div>23 </div>24 <span class="pill g" id="pNo"></span>25 </div>26 <div class="row bt" style="margin-top:12px">27 <div style="text-align:center;flex:1"><div style="font-weight:800" id="pBal"></div><div class="ds" style="font-size:11.5px;color:var(--text-mute)">账户余额</div></div>28 <div style="width:1px;height:28px;background:var(--border)"></div>29 <div style="text-align:center;flex:1"><div style="font-weight:800">3</div><div class="ds" style="font-size:11.5px;color:var(--text-mute)">家庭成员</div></div>30 <div style="width:1px;height:28px;background:var(--border)"></div>31 <div style="text-align:center;flex:1"><div style="font-weight:800">4</div><div class="ds" style="font-size:11.5px;color:var(--text-mute)">问诊记录</div></div>32 </div>33 </div>3435 <div class="card">36 <div style="font-weight:700;margin-bottom:8px">⏰ 用药提醒</div>37 <div id="remindList"></div>38 </div>3940 <div class="card">41 <div style="font-weight:700;margin-bottom:8px">👨👩👧 我的家人</div>42 <div id="familyList"></div>43 <button class="btn ghost full sm" style="margin-top:8px" onclick="toast('演示：添加家庭成员')">+ 添加家庭成员</button>44 </div>4546 <div class="card">47 <div style="font-weight:700;margin-bottom:6px">🩺 我的健康信息</div>48 <div class="kv"><span class="k">血型</span><span id="pBlood"></span></div>49 <div class="kv"><span class="k">过敏史</span><span id="pAllergy"></span></div>50 <div class="kv"><span class="k">证件号</span><span id="pCard"></span></div>51 <div class="kv"><span class="k">手机号</span><span id="pPhone"></span></div>52 </div>5354 <div class="card">55 <div style="font-weight:700;margin-bottom:6px">💡 健康宣教</div>56 <div id="eduList"></div>57 </div>5859 <div class="list">60 <div class="item" onclick="toast('演示：消息通知')"><span class="ic">🔔</span><div style="flex:1"><div class="tt">消息通知</div><div class="ds">用药提醒 · 复诊提醒 · 报告生成</div></div><span class="ar">›</span></div>61 <div class="item" onclick="toast('演示：客服中心')"><span class="ic">🎧</span><div style="flex:1"><div class="tt">客服中心</div><div class="ds">7×24 健康咨询热线</div></div><span class="ar">›</span></div>62 <div class="item" onclick="toast('演示：设置')"><span class="ic">⚙️</span><div style="flex:1"><div class="tt">设置</div><div class="ds">隐私 · 账号安全 · 退出</div></div><span class="ar">›</span></div>63 </div>6465 <div class="section-gap"></div>66 <div class="tabbar" id="tabbar"></div>67 <script src="data.js"></script><script src="app.js"></script>68 <script>69 document.getElementById('pName').textContent = ME.name;70 document.getElementById('pMeta').textContent = ME.gender + ' · ' + ME.age + '岁 · ' + ME.city;71 document.getElementById('pMember').textContent = '👑 ' + ME.member + '（自 ' + ME.since + '）';72 document.getElementById('pNo').textContent = ME.no;73 document.getElementById('pBal').textContent = '¥' + ME.balance.toFixed(2);74 document.getElementById('pBlood').textContent = ME.blood;75 document.getElementById('pAllergy').textContent = ME.allergy;76 document.getElementById('pCard').textContent = ME.card;77 document.getElementById('pPhone').textContent = ME.phone;7879 document.getElementById('remindList').innerHTML = REMINDS.map((r,i)=>80 `<div class="remind">81 <div class="tm">${r.tm}</div>82 <div style="flex:1"><div class="nm">${r.nm}</div><div class="ds">${r.ds}</div></div>83 <div class="switch ${r.on?'':'off'}" onclick="toggle(this)"></div>84 </div>`85 ).join('');86 function toggle(el){ el.classList.toggle('off'); toast(el.classList.contains('off')?'已关闭提醒':'已开启提醒'); }8788 document.getElementById('familyList').innerHTML = FAMILY.map(f=>89 `<div class="kv"><span class="k">${f.rel} · ${f.name}</span><span>${f.gender} · ${f.age}岁${f.card!=='—'?' · '+f.card:''}</span></div>`90 ).join('');9192 document.getElementById('eduList').innerHTML = NEWS.slice(0,3).map(n=>93 `<div class="item" onclick="toast('演示：打开科普文章')"><span class="ic">📘</span><div style="flex:1"><div class="tt">${n.title}</div><div class="ds">${n.tag} · ${n.date}</div></div><span class="ar">›</span></div>`94 ).join('');9596 renderTab('我的');97 </script>98</body>99</html>100