💻 代码预览 · 小草口腔诊所

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="header"><span class="back" onclick="history.back()">‹</span><h1>个人中心</h1><span class="right">⚙️</span></div>
3<div class="user-card">
4  <div class="uc-avatar">😁</div>
5  <div><div class="uc-name" id="u-name">微笑守护者</div><div class="uc-level" id="u-level">金卡会员 · 就诊 8 次 · 口腔健康评分 92</div></div>
6</div>
7<div class="card" style="display:flex;justify-content:space-around;padding:14px 6px">
8  <div style="text-align:center"><b style="font-size:18px;color:var(--primary-dark)" id="m-points">1850</b><div style="font-size:11px;color:#7b9cb8">积分</div></div>
9  <div style="text-align:center"><b style="font-size:18px;color:var(--primary-dark)" id="m-coupons">6</b><div style="font-size:11px;color:#7b9cb8">优惠券</div></div>
10  <div style="text-align:center"><b style="font-size:18px;color:var(--primary-dark)" id="m-visits">8</b><div style="font-size:11px;color:#7b9cb8">就诊次数</div></div>
11  <div style="text-align:center"><b style="font-size:18px;color:var(--primary-dark)" id="m-balance">260</b><div style="font-size:11px;color:#7b9cb8">余额(元)</div></div>
12</div>
13<div class="section-title">家庭口腔档案 <span>一家人的口腔健康</span></div>
14<div class="family-row" id="family-list"></div>
15<div class="section-title">常用服务</div>
16<div style="display:flex;background:#fff;border-radius:12px;margin:12px;padding:14px 0">
17  <a href="book.html" style="flex:1;text-align:center;font-size:11px;color:#3d6a94"><span style="font-size:24px;display:block;margin-bottom:4px">📅</span>预约就诊<em style="font-style:normal;display:block;font-size:10px;color:#7b9cb8;margin-top:2px">在线挂号</em></a>
18  <a href="records.html" style="flex:1;text-align:center;font-size:11px;color:#3d6a94"><span style="font-size:24px;display:block;margin-bottom:4px">🩻</span>影像报告<em style="font-style:normal;display:block;font-size:10px;color:#7b9cb8;margin-top:2px">一键查看</em></a>
19  <a href="doctors.html" style="flex:1;text-align:center;font-size:11px;color:#3d6a94"><span style="font-size:24px;display:block;margin-bottom:4px">💬</span>在线咨询<em style="font-style:normal;display:block;font-size:10px;color:#7b9cb8;margin-top:2px">1对1答疑</em></a>
20  <a href="projects.html" style="flex:1;text-align:center;font-size:11px;color:#3d6a94"><span style="font-size:24px;display:block;margin-bottom:4px">🎟️</span>优惠活动<em style="font-style:normal;display:block;font-size:10px;color:#7b9cb8;margin-top:2px">洗牙8折</em></a>
21</div>
22<div class="menu-list">
23  <a><span class="ml-l"><span class="ico">🎫</span>我的优惠券</span><span class="ml-r" id="m-c2">6张 ›</span></a>
24  <a><span class="ml-l"><span class="ico">💳</span>充值中心</span><span class="ml-r">充500送80 ›</span></a>
25  <a><span class="ml-l"><span class="ico">📒</span>电子病历</span><span class="ml-r">3份 ›</span></a>
26  <a><span class="ml-l"><span class="ico">⭐</span>我的收藏</span><span class="ml-r">科普4篇 ›</span></a>
27  <a><span class="ml-l"><span class="ico">👥</span>邀请家人</span><span class="ml-r">共建档案 ›</span></a>
28  <a><span class="ml-l"><span class="ico">💬</span>联系客服</span><span class="ml-r">9:00-20:00 ›</span></a>
29  <a><span class="ml-l"><span class="ico">⚙️</span>设置</span><span class="ml-r">›</span></a>
30</div>
31<div style="height:80px"></div>
32<div class="tabbar">
33  <a href="index.html"><span class="icon">🏠</span>首页</a>
34  <a href="projects.html"><span class="icon">🦷</span>项目</a>
35  <a href="doctors.html"><span class="icon">👨‍⚕️</span>医生</a>
36  <a href="records.html"><span class="icon">📋</span>病历</a>
37  <a class="active" href="mine.html"><span class="icon">👤</span>我的</a>
38</div>
39<script src="data.js"></script><script src="app.js"></script>
40<script>
41renderMine();
42$('#family-list').innerHTML=FAMILY.map(f=>`<div class="family-item"><div class="fi-emoji">${f.emoji}</div><b>${f.name}</b><span>${f.health}</span><br><span style="color:var(--primary)">${f.next}</span></div>`).join('');
43</script>
44</body></html>