Files
Toolbox/public/temp_download/xiuxiaohu/patient.html
T

644 lines
65 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>循证康复路径导航系统</title>
<style>
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; background:#f0f4f8; color:#1a2332; font-size:14px; }
::-webkit-scrollbar { width:0; }
.icon { width:1em; height:1em; vertical-align:-0.15em; fill:currentColor; overflow:hidden; display:inline-block; }
/* ===== Mobile Frame ===== */
.mobile-frame { width:375px; margin:20px auto; background:#f0f4f8; min-height:812px; position:relative; border-radius:24px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.15); border:8px solid #1a2332; }
.status-bar { height:44px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:12px; font-weight:600; }
.status-bar svg { width:14px; height:14px; }
/* ===== Tab Bar ===== */
.tab-bar { position:sticky; bottom:0; background:#fff; border-top:1px solid #e8edf2; display:flex; height:56px; z-index:50; }
.tab-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10px; color:#8896a7; cursor:pointer; transition:all .15s; text-decoration:none; }
.tab-item.active { color:#1890ff; }
.tab-item svg { width:22px; height:22px; fill:currentColor; }
/* ===== Pages ===== */
.m-page { display:none; min-height:calc(812px - 44px - 56px); }
.m-page.active { display:block; }
.m-header { background:#fff; padding:14px 16px; text-align:center; border-bottom:1px solid #e8edf2; position:relative; }
.m-header h1 { font-size:16px; font-weight:600; color:#0f2744; }
.m-header .back { position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:14px; color:#1890ff; cursor:pointer; display:flex; align-items:center; gap:2px; }
.m-header .back svg { width:16px; height:16px; fill:#1890ff; }
.m-content { padding:16px; }
/* ===== Buttons ===== */
.btn { padding:7px 16px; border-radius:6px; font-size:13px; font-weight:500; border:none; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; gap:4px; }
.btn-primary { background:#1890ff; color:#fff; }
.btn-primary:hover { background:#096dd9; }
.btn-default { background:#fff; color:#4a5568; border:1px solid #d0d7de; }
.btn-success { background:#52c41a; color:#fff; }
.btn-block { display:block; width:100%; text-align:center; padding:12px; font-size:15px; }
/* ===== Tags ===== */
.tag { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500; display:inline-block; }
.tag-blue { background:#e6f7ff; color:#1890ff; }
.tag-green { background:#f6ffed; color:#52c41a; }
.tag-orange { background:#fff7e6; color:#fa8c16; }
.tag-red { background:#fff1f0; color:#ff4d4f; }
.tag-purple { background:#f9f0ff; color:#722ed1; }
.tag-cyan { background:#e6fffb; color:#006d75; }
.tag-gray { background:#f0f4f8; color:#8896a7; }
/* ===== Cards ===== */
.m-card { background:#fff; border-radius:10px; margin-bottom:12px; overflow:hidden; border:1px solid #e8edf2; }
.m-card-header { padding:12px 16px; border-bottom:1px solid #f0f4f8; display:flex; align-items:center; justify-content:space-between; }
.m-card-header h3 { font-size:14px; font-weight:600; }
.m-card-body { padding:16px; }
/* ===== Home ===== */
.home-greeting { background:linear-gradient(135deg,#1890ff,#096dd9); color:#fff; padding:20px 16px; border-radius:0 0 16px 16px; margin:-16px -16px 16px; }
.home-greeting h2 { font-size:18px; font-weight:600; margin-bottom:4px; }
.home-greeting p { font-size:12px; opacity:.8; }
.home-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:16px; }
.home-stat { background:rgba(255,255,255,.15); border-radius:8px; padding:10px; text-align:center; }
.home-stat .val { font-size:20px; font-weight:700; }
.home-stat .lbl { font-size:10px; opacity:.8; margin-top:2px; }
.quick-action { border-radius:8px; padding:14px; text-align:center; cursor:pointer; transition:all .15s; }
.quick-action:hover { transform:translateY(-1px); }
/* ===== Tasks ===== */
.task-item { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f4f8; }
.task-item:last-child { border-bottom:none; }
.task-check { width:24px; height:24px; border-radius:50%; border:2px solid #d0d7de; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:all .15s; }
.task-check.done { background:#52c41a; border-color:#52c41a; color:#fff; }
.task-info { flex:1; }
.task-info h4 { font-size:13px; font-weight:500; }
.task-info p { font-size:11px; color:#8896a7; margin-top:2px; }
.task-time { font-size:11px; color:#8896a7; }
.task-item.done .task-info h4 { color:#8896a7; text-decoration:line-through; }
/* ===== Journey ===== */
.journey-timeline { position:relative; padding-left:24px; }
.journey-line { position:absolute; left:8px; top:0; bottom:0; width:2px; background:#e8edf2; }
.journey-step { position:relative; margin-bottom:20px; }
.journey-dot { position:absolute; left:-20px; top:4px; width:12px; height:12px; border-radius:50%; border:2px solid #d0d7de; background:#fff; }
.journey-step.active .journey-dot { background:#1890ff; border-color:#1890ff; box-shadow:0 0 0 4px rgba(24,144,255,.2); }
.journey-step.done .journey-dot { background:#52c41a; border-color:#52c41a; }
.journey-step h4 { font-size:13px; font-weight:600; margin-bottom:4px; }
.journey-step p { font-size:12px; color:#8896a7; }
.journey-step .step-card { background:#f8fafc; border-radius:8px; padding:12px; margin-top:8px; }
.journey-step.active .step-card { background:#e6f7ff; border:1px solid #91d5ff; }
/* ===== Records ===== */
.record-group { margin-bottom:16px; }
.record-group label { font-size:12px; font-weight:500; color:#4a5568; display:block; margin-bottom:6px; }
.record-group .req { color:#ff4d4f; }
input, select, textarea { border:1px solid #d0d7de; border-radius:6px; padding:10px 12px; font-size:14px; font-family:inherit; width:100%; outline:none; transition:border-color .15s; }
input:focus, select:focus, textarea:focus { border-color:#1890ff; box-shadow:0 0 0 2px rgba(24,144,255,.1); }
textarea { resize:vertical; min-height:80px; }
.pain-scale { display:flex; gap:4px; margin-top:8px; }
.pain-dot { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; cursor:pointer; border:2px solid transparent; transition:all .15s; }
.pain-dot.low { background:#f6ffed; color:#52c41a; }
.pain-dot.mid { background:#fff7e6; color:#fa8c16; }
.pain-dot.high { background:#fff1f0; color:#ff4d4f; }
.pain-dot.selected { border-color:currentColor; transform:scale(1.15); }
.radio-group { display:flex; gap:8px; flex-wrap:wrap; }
.radio-opt { padding:6px 14px; border:1px solid #d0d7de; border-radius:20px; font-size:12px; cursor:pointer; transition:all .15s; }
.radio-opt.selected { background:#e6f7ff; border-color:#1890ff; color:#1890ff; }
.color-options { display:flex; gap:8px; }
.color-opt { padding:8px 14px; border-radius:8px; font-size:12px; cursor:pointer; border:2px solid transparent; transition:all .15s; text-align:center; display:flex; align-items:center; gap:4px; }
.color-opt.rosy { background:#f6ffed; color:#52c41a; }
.color-opt.pale { background:#fff7e6; color:#fa8c16; }
.color-opt.purple-skin { background:#fff1f0; color:#ff4d4f; }
.color-opt.selected { border-color:currentColor; }
/* ===== Knowledge ===== */
.kb-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0f4f8; cursor:pointer; }
.kb-item:last-child { border-bottom:none; }
.kb-thumb { width:60px; height:60px; border-radius:8px; background:#e6f7ff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.kb-thumb.video { background:#f9f0ff; }
.kb-info h4 { font-size:13px; font-weight:500; margin-bottom:4px; }
.kb-info p { font-size:11px; color:#8896a7; line-height:1.5; }
.kb-tags { display:flex; gap:4px; margin-top:6px; }
/* ===== Chat ===== */
.chat-area { display:flex; flex-direction:column; height:calc(812px - 44px - 56px); }
.chat-messages { flex:1; overflow-y:auto; padding:16px; background:#fafcff; }
.chat-msg { display:flex; gap:8px; margin-bottom:16px; }
.chat-msg.user { flex-direction:row-reverse; }
.chat-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; flex-shrink:0; }
.chat-avatar.doctor { background:#1890ff; }
.chat-avatar.me { background:#52c41a; }
.chat-bubble { max-width:70%; padding:10px 14px; font-size:13px; line-height:1.6; }
.chat-msg:not(.user) .chat-bubble { background:#fff; border:1px solid #e8edf2; border-radius:0 12px 12px 12px; }
.chat-msg.user .chat-bubble { background:#1890ff; color:#fff; border-radius:12px 0 12px 12px; }
.chat-time { font-size:10px; color:#8896a7; margin-top:4px; }
.chat-input-bar { padding:10px 16px; background:#fff; border-top:1px solid #e8edf2; display:flex; gap:8px; align-items:center; }
.chat-input-bar input { flex:1; border-radius:20px; padding:8px 14px; }
.chat-send { width:36px; height:36px; border-radius:50%; background:#1890ff; color:#fff; border:none; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
/* ===== Profile ===== */
.profile-header { background:linear-gradient(135deg,#1890ff,#096dd9); color:#fff; padding:24px 16px; text-align:center; margin:-16px -16px 16px; border-radius:0 0 16px 16px; }
.profile-avatar { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.2); margin:0 auto 10px; display:flex; align-items:center; justify-content:center; }
.profile-name { font-size:18px; font-weight:600; }
.profile-meta { font-size:12px; opacity:.8; margin-top:4px; }
.profile-menu { background:#fff; border-radius:10px; overflow:hidden; border:1px solid #e8edf2; }
.profile-menu-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #f0f4f8; font-size:14px; cursor:pointer; transition:all .15s; }
.profile-menu-item:last-child { border-bottom:none; }
.profile-menu-item:hover { background:#fafcff; }
.profile-menu-item .menu-left { display:flex; align-items:center; gap:10px; }
.profile-menu-item .menu-left svg { width:20px; height:20px; }
.profile-menu-item .arrow { color:#d0d7de; font-size:14px; }
/* ===== Alert Banner ===== */
.alert-banner { background:#fff1f0; border:1px solid #ffa39e; border-radius:8px; padding:10px 14px; margin-bottom:12px; font-size:12px; color:#cf1322; display:flex; align-items:flex-start; gap:8px; }
.alert-banner strong { font-weight:600; }
/* ===== Detail Pages ===== */
.detail-info-row { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid #f0f4f8; }
.detail-info-row:last-child { border-bottom:none; }
.detail-info-row label { font-size:13px; color:#8896a7; }
.detail-info-row span { font-size:13px; color:#1a2332; font-weight:500; }
.detail-stat-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.detail-stat { background:#f8fafc; border-radius:8px; padding:12px; text-align:center; }
.detail-stat .val { font-size:22px; font-weight:700; }
.detail-stat .lbl { font-size:11px; color:#8896a7; margin-top:2px; }
.progress-bar { height:6px; background:#f0f4f8; border-radius:3px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,#52c41a,#1890ff); border-radius:3px; }
.faq-item { border-bottom:1px solid #f0f4f8; }
.faq-q { padding:14px 0; font-size:13px; font-weight:500; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.faq-a { padding:0 0 14px; font-size:12px; color:#4a5568; line-height:1.8; display:none; }
.faq-item.open .faq-a { display:block; }
.toggle { width:40px; height:22px; background:#d0d7de; border-radius:11px; position:relative; cursor:pointer; transition:all .15s; flex-shrink:0; }
.toggle.on { background:#1890ff; }
.toggle::after { content:''; position:absolute; width:18px; height:18px; background:#fff; border-radius:50%; top:2px; left:2px; transition:all .15s; }
.toggle.on::after { left:20px; }
.guide-step { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #f0f4f8; }
.guide-step:last-child { border-bottom:none; }
.guide-num { width:28px; height:28px; border-radius:50%; background:#e6f7ff; color:#1890ff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.guide-text h4 { font-size:13px; font-weight:500; margin-bottom:2px; }
.guide-text p { font-size:12px; color:#8896a7; line-height:1.6; }
</style>
</head>
<body>
<div class="mobile-frame">
<!-- Status Bar -->
<div class="status-bar">
<span>9:41</span>
<span>循证康复路径导航系统</span>
<span style="display:flex;gap:4px;align-items:center;">
<svg viewBox="0 0 24 24" fill="#1a2332"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
<svg viewBox="0 0 24 24" fill="#1a2332"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
</span>
</div>
<!-- ===== Home Page ===== -->
<div id="m-home" class="m-page active">
<div class="m-content">
<div class="home-greeting">
<h2>您好,张先生</h2>
<p>皮瓣修复 · 术后第 10 天 · 恢复进展良好</p>
<div class="home-stats">
<div class="home-stat"><div class="val">10</div><div class="lbl">连续打卡</div></div>
<div class="home-stat"><div class="val">92%</div><div class="lbl">任务完成</div></div>
<div class="home-stat"><div class="val">3</div><div class="lbl">今日待办</div></div>
</div>
</div>
<!-- Alert -->
<div class="alert-banner">
<svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:#cf1322;flex-shrink:0;"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
<div><strong>健康提醒:</strong>您今日记录的皮瓣颜色偏苍白,请注意保暖并抬高患肢。如持续异常请联系医生。</div>
</div>
<!-- Today Tasks -->
<div class="m-card">
<div class="m-card-header"><h3>今日康复任务</h3><span class="tag tag-blue">3项待完成</span></div>
<div class="m-card-body">
<div class="task-item done"><div class="task-check done"><svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg></div><div class="task-info"><h4>观察皮瓣颜色与肿胀</h4><p>记录皮瓣颜色、肿胀程度、毛细血管反应</p></div><div class="task-time">08:00</div></div>
<div class="task-item"><div class="task-check" onclick="toggleCheck(this)"></div><div class="task-info"><h4>伤口清洁与换药</h4><p>按医嘱清洁伤口并更换敷料</p></div><div class="task-time">10:00</div></div>
<div class="task-item"><div class="task-check" onclick="toggleCheck(this)"></div><div class="task-info"><h4>康复锻炼(15分钟)</h4><p>按视频指导完成今日康复动作</p></div><div class="task-time">14:00</div></div>
<div class="task-item"><div class="task-check" onclick="toggleCheck(this)"></div><div class="task-info"><h4>疼痛评分记录</h4><p>记录当前疼痛程度(0-10分)</p></div><div class="task-time">20:00</div></div>
</div>
</div>
<!-- Quick Actions -->
<div class="m-card">
<div class="m-card-header"><h3>快捷操作</h3></div>
<div class="m-card-body" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
<div class="quick-action" style="background:#e6f7ff;" onclick="mNavTo('m-record')">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1890ff;"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
<div style="font-size:12px;color:#1890ff;font-weight:500;">记录指标</div>
</div>
<div class="quick-action" style="background:#f9f0ff;" onclick="mNavTo('m-chat')">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#722ed1;"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
<div style="font-size:12px;color:#722ed1;font-weight:500;">咨询医生</div>
</div>
<div class="quick-action" style="background:#f6ffed;" onclick="mNavTo('m-knowledge')">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#52c41a;"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg>
<div style="font-size:12px;color:#52c41a;font-weight:500;">康复指导</div>
</div>
<div class="quick-action" style="background:#fff7e6;" onclick="mNavTo('m-journey')">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#fa8c16;"><path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>
<div style="font-size:12px;color:#fa8c16;font-weight:500;">康复旅程</div>
</div>
</div>
</div>
<!-- Recommended -->
<div class="m-card">
<div class="m-card-header"><h3>今日推荐</h3><span style="font-size:12px;color:#1890ff;cursor:pointer;">更多 ></span></div>
<div class="m-card-body" style="padding:12px 16px;">
<div class="kb-item" style="padding-top:0;">
<div class="kb-thumb"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1890ff;"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg></div>
<div class="kb-info"><h4>术后8-14天伤口护理要点</h4><p>居家换药步骤、注意事项及异常识别</p><div class="kb-tags"><span class="tag tag-blue">皮瓣修复</span></div></div>
</div>
<div class="kb-item" style="padding-bottom:0;">
<div class="kb-thumb video"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#722ed1;"><path d="M8 5v14l11-7z"/></svg></div>
<div class="kb-info"><h4>皮瓣术后康复锻炼指导</h4><p>适合术后8-14天的轻度康复动作演示</p><div class="kb-tags"><span class="tag tag-purple">视频</span></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== Journey Page ===== -->
<div id="m-journey" class="m-page">
<div class="m-header"><h1>康复旅程</h1></div>
<div class="m-content">
<div class="m-card">
<div class="m-card-header"><h3>皮瓣修复 · 全旅程导航</h3><span class="tag tag-blue">术后8-14天</span></div>
<div class="m-card-body">
<div class="journey-timeline">
<div class="journey-line"></div>
<div class="journey-step done"><div class="journey-dot"></div><h4>决策期 <span class="tag tag-green" style="margin-left:4px;">已完成</span></h4><p>术前了解手术方案、风险与预期效果</p></div>
<div class="journey-step done"><div class="journey-dot"></div><h4>围术期 <span class="tag tag-green" style="margin-left:4px;">已完成</span></h4><p>术前检查、饮食准备、心理调适</p></div>
<div class="journey-step done"><div class="journey-dot"></div><h4>术后1-7天 <span class="tag tag-green" style="margin-left:4px;">已完成</span></h4><p>皮瓣观察、体位管理、疼痛控制</p></div>
<div class="journey-step active"><div class="journey-dot"></div><h4>术后8-14天 <span class="tag tag-blue" style="margin-left:4px;">进行中</span></h4><p>伤口护理、换药、逐步活动</p>
<div class="step-card">
<div style="font-size:12px;font-weight:500;margin-bottom:8px;">本阶段重点:</div>
<div style="font-size:12px;color:#4a5568;line-height:1.8;">
• 每日观察皮瓣颜色与肿胀变化<br>• 按医嘱进行伤口清洁与换药<br>• 记录疼痛评分,关注异常变化<br>• 开始轻度康复锻炼<br>• 注意营养摄入,促进愈合</div>
<button class="btn btn-primary btn-block" style="margin-top:12px;" onclick="mNavTo('m-home')">查看今日任务</button>
</div></div>
<div class="journey-step"><div class="journey-dot"></div><h4>康复1-3月</h4><p>功能恢复、瘢痕管理、心理调适</p></div>
<div class="journey-step"><div class="journey-dot"></div><h4>康复6个月</h4><p>长期护理、定期复查、回归生活</p></div>
</div></div></div></div></div>
<!-- ===== Record Page ===== -->
<div id="m-record" class="m-page">
<div class="m-header"><h1>健康记录</h1></div>
<div class="m-content">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;">
<div class="m-card" style="margin-bottom:0;cursor:pointer;" onclick="document.getElementById('record-flap').style.display='block';document.getElementById('record-pain').style.display='none';">
<div class="m-card-body" style="text-align:center;padding:14px;">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1890ff;"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
<div style="font-size:13px;font-weight:500;margin-top:4px;">皮瓣观察</div>
<div style="font-size:11px;color:#8896a7;">颜色·肿胀·反应</div>
</div></div>
<div class="m-card" style="margin-bottom:0;cursor:pointer;" onclick="document.getElementById('record-pain').style.display='block';document.getElementById('record-flap').style.display='none';">
<div class="m-card-body" style="text-align:center;padding:14px;">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#fa8c16;"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
<div style="font-size:13px;font-weight:500;margin-top:4px;">疼痛评分</div>
<div style="font-size:11px;color:#8896a7;">VAS 0-10分</div>
</div></div>
<div class="m-card" style="margin-bottom:0;cursor:pointer;">
<div class="m-card-body" style="text-align:center;padding:14px;">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#ff4d4f;"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
<div style="font-size:13px;font-weight:500;margin-top:4px;">血糖记录</div>
<div style="font-size:11px;color:#8896a7;">空腹/餐后</div>
</div></div>
<div class="m-card" style="margin-bottom:0;cursor:pointer;">
<div class="m-card-body" style="text-align:center;padding:14px;">
<svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#722ed1;"><path d="M15 13V5c0-1.66-1.34-3-3-3S9 3.34 9 5v8c-1.21.91-2 2.37-2 4 0 2.76 2.24 5 5 5s5-2.24 5-5c0-1.63-.79-3.09-2-4zm-4-8c0-.55.45-1 1-1s1 .45 1 1h-1v1h1v2h-1v1h1v2h-2V5z"/></svg>
<div style="font-size:13px;font-weight:500;margin-top:4px;">皮瓣温度</div>
<div style="font-size:11px;color:#8896a7;">温度记录</div>
</div></div>
</div>
<!-- Flap Form -->
<div id="record-flap" class="m-card" style="display:none;">
<div class="m-card-header"><h3>皮瓣观察记录</h3><span style="font-size:12px;color:#8896a7;">2026-04-16</span></div>
<div class="m-card-body">
<div class="record-group"><label><span class="req">*</span> 皮瓣颜色</label>
<div class="color-options">
<div class="color-opt rosy" onclick="selectColor(this)"><svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:currentColor;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg> 红润</div>
<div class="color-opt pale" onclick="selectColor(this)"><svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:currentColor;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg> 苍白</div>
<div class="color-opt purple-skin" onclick="selectColor(this)"><svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:currentColor;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg> 发紫</div>
</div></div>
<div class="record-group"><label><span class="req">*</span> 肿胀程度</label><div class="radio-group"><div class="radio-opt" onclick="selectRadio(this)">无肿胀</div><div class="radio-opt" onclick="selectRadio(this)">轻度</div><div class="radio-opt" onclick="selectRadio(this)">中度</div><div class="radio-opt" onclick="selectRadio(this)">重度</div></div></div>
<div class="record-group"><label><span class="req">*</span> 毛细血管反应</label><div class="radio-group"><div class="radio-opt" onclick="selectRadio(this)">正常(1-2秒)</div><div class="radio-opt" onclick="selectRadio(this)">减弱(>3秒)</div><div class="radio-opt" onclick="selectRadio(this)">消失</div></div></div>
<div class="record-group"><label>异常情况描述</label><textarea placeholder="如有异常请详细描述..."></textarea></div>
<div class="record-group"><label>上传照片</label><div style="border:2px dashed #d0d7de;border-radius:8px;padding:20px;text-align:center;color:#8896a7;font-size:12px;cursor:pointer;"><svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:#8896a7;"><path d="M12 12m-3.2 0a3.2 3.2 0 1 0 6.4 0 3.2 3.2 0 1 0-6.4 0M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9z"/></svg><br>点击拍照或上传伤口照片</div></div>
<button class="btn btn-primary btn-block">提交记录</button>
</div></div>
<!-- Pain Form -->
<div id="record-pain" class="m-card" style="display:none;">
<div class="m-card-header"><h3>疼痛评分</h3><span style="font-size:12px;color:#8896a7;">VAS视觉模拟评分</span></div>
<div class="m-card-body">
<div class="record-group"><label><span class="req">*</span> 当前疼痛程度(0=无痛,10=剧痛)</label>
<div class="pain-scale"><div class="pain-dot low" onclick="selectPain(this)">0</div><div class="pain-dot low" onclick="selectPain(this)">1</div><div class="pain-dot low" onclick="selectPain(this)">2</div><div class="pain-dot low" onclick="selectPain(this)">3</div><div class="pain-dot mid" onclick="selectPain(this)">4</div><div class="pain-dot mid" onclick="selectPain(this)">5</div><div class="pain-dot mid" onclick="selectPain(this)">6</div><div class="pain-dot high" onclick="selectPain(this)">7</div><div class="pain-dot high" onclick="selectPain(this)">8</div><div class="pain-dot high" onclick="selectPain(this)">9</div><div class="pain-dot high" onclick="selectPain(this)">10</div></div></div>
<div class="record-group"><label>疼痛部位</label><input type="text" placeholder="如:手术切口处、关节周围"></div>
<div class="record-group"><label>疼痛性质</label><div class="radio-group"><div class="radio-opt" onclick="selectRadio(this)">钝痛</div><div class="radio-opt" onclick="selectRadio(this)">刺痛</div><div class="radio-opt" onclick="selectRadio(this)">胀痛</div><div class="radio-opt" onclick="selectRadio(this)">灼痛</div></div></div>
<div class="record-group"><label>补充说明</label><textarea placeholder="如:活动时加重、夜间明显等"></textarea></div>
<button class="btn btn-primary btn-block">提交评分</button>
</div></div>
<!-- History -->
<div class="m-card">
<div class="m-card-header"><h3>最近记录</h3><span style="font-size:12px;color:#1890ff;cursor:pointer;">全部 ></span></div>
<div class="m-card-body" style="padding:8px 16px;">
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">皮瓣观察</div><div style="font-size:11px;color:#8896a7;">红润 · 轻度肿胀 · 反应正常</div></div><div style="text-align:right;"><div style="font-size:11px;color:#8896a7;">今天 08:00</div><span class="tag tag-green">正常</span></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">疼痛评分</div><div style="font-size:11px;color:#8896a7;">VAS 4/10 · 切口处钝痛</div></div><div style="text-align:right;"><div style="font-size:11px;color:#8896a7;">昨天 20:00</div><span class="tag tag-green">正常</span></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;"><div><div style="font-size:13px;font-weight:500;">血糖记录</div><div style="font-size:11px;color:#8896a7;">空腹 5.8 mmol/L</div></div><div style="text-align:right;"><div style="font-size:11px;color:#8896a7;">昨天 07:30</div><span class="tag tag-green">正常</span></div></div>
</div></div>
</div></div>
<!-- ===== Knowledge/康复指导 Page ===== -->
<div id="m-knowledge" class="m-page">
<div class="m-header"><h1>康复指导</h1></div>
<div class="m-content">
<div style="margin-bottom:12px;"><input type="text" placeholder="搜索:疼痛、营养、心理、锻炼..." style="border-radius:20px;padding-left:36px;background:url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%238896a7%22><path d=%22M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z%22/></svg>') no-repeat 10px center/18px;"></div>
<div style="display:flex;gap:8px;margin-bottom:12px;overflow-x:auto;">
<span class="tag tag-blue" style="cursor:pointer;padding:4px 12px;white-space:nowrap;">推荐</span>
<span class="tag" style="cursor:pointer;padding:4px 12px;background:#fff;border:1px solid #e8edf2;white-space:nowrap;">皮瓣修复</span>
<span class="tag" style="cursor:pointer;padding:4px 12px;background:#fff;border:1px solid #e8edf2;white-space:nowrap;">疼痛管理</span>
<span class="tag" style="cursor:pointer;padding:4px 12px;background:#fff;border:1px solid #e8edf2;white-space:nowrap;">营养</span>
<span class="tag" style="cursor:pointer;padding:4px 12px;background:#fff;border:1px solid #e8edf2;white-space:nowrap;">心理</span>
<span class="tag" style="cursor:pointer;padding:4px 12px;background:#fff;border:1px solid #e8edf2;white-space:nowrap;">锻炼</span>
</div>
<div class="m-card">
<div class="m-card-body" style="padding:12px 16px;">
<div class="kb-item" style="padding-top:0;"><div class="kb-thumb"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1890ff;"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg></div><div class="kb-info"><h4>术后8-14天伤口护理要点</h4><p>居家换药步骤、注意事项及异常识别方法</p><div class="kb-tags"><span class="tag tag-blue">皮瓣修复</span><span class="tag tag-cyan">当前阶段</span></div></div></div>
<div class="kb-item"><div class="kb-thumb video"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#722ed1;"><path d="M8 5v14l11-7z"/></svg></div><div class="kb-info"><h4>皮瓣术后康复锻炼指导</h4><p>适合术后8-14天的轻度康复动作演示</p><div class="kb-tags"><span class="tag tag-purple">视频</span><span class="tag tag-cyan">当前阶段</span></div></div></div>
<div class="kb-item"><div class="kb-thumb"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#1890ff;"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg></div><div class="kb-info"><h4>如何正确观察皮瓣状态</h4><p>皮瓣颜色、温度、肿胀的自我观察方法</p><div class="kb-tags"><span class="tag tag-blue">皮瓣修复</span></div></div></div>
<div class="kb-item"><div class="kb-thumb"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#52c41a;"><path d="M8.1 13.34l2.83-2.83L3.91 3.5c-1.56 1.56-1.56 4.09 0 5.66l4.19 4.18zm6.78-1.81c1.53.71 3.68.21 5.27-1.38 1.91-1.91 2.28-4.65.81-6.12-1.46-1.46-4.2-1.1-6.12.81-1.59 1.59-2.09 3.74-1.38 5.27L3.7 19.87l1.41 1.41L12 14.41l6.88 6.88 1.41-1.41L13.41 13l1.47-1.47z"/></svg></div><div class="kb-info"><h4>术后营养饮食指南</h4><p>促进伤口愈合的食物推荐与饮食禁忌</p><div class="kb-tags"><span class="tag tag-orange">营养</span></div></div></div>
<div class="kb-item"><div class="kb-thumb video"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#722ed1;"><path d="M8 5v14l11-7z"/></svg></div><div class="kb-info"><h4>踝泵运动标准动作</h4><p>预防深静脉血栓的简单运动指导</p><div class="kb-tags"><span class="tag tag-purple">视频</span><span class="tag tag-green">锻炼</span></div></div></div>
<div class="kb-item" style="padding-bottom:0;"><div class="kb-thumb"><svg viewBox="0 0 24 24" style="width:28px;height:28px;fill:#fa8c16;"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg></div><div class="kb-info"><h4>术后心理调适小贴士</h4><p>应对术后焦虑、情绪低落的实用方法</p><div class="kb-tags"><span class="tag tag-orange">心理</span></div></div></div>
</div></div>
</div></div>
<!-- ===== Chat Page ===== -->
<div id="m-chat" class="m-page">
<div class="chat-area">
<div class="m-header"><h1>咨询医生</h1></div>
<div class="chat-messages">
<div style="text-align:center;margin-bottom:16px;"><span style="font-size:10px;color:#8896a7;background:#f0f4f8;padding:2px 10px;border-radius:10px;">今天 09:30</span></div>
<div class="chat-msg"><div class="chat-avatar doctor">医</div><div><div class="chat-bubble">您好张先生,今天是术后第10天了,恢复情况怎么样?有什么不舒服的地方吗?</div><div class="chat-time">09:30</div></div></div>
<div class="chat-msg user"><div class="chat-avatar me">我</div><div><div class="chat-bubble">医生您好,今天换药的时候发现伤口周围有点红肿,是正常的吗?</div><div class="chat-time">09:45</div></div></div>
<div class="chat-msg user"><div class="chat-avatar me">我</div><div><div class="chat-bubble">我拍了张照片您帮我看看</div><div class="chat-time">09:46</div></div></div>
<div class="chat-msg"><div class="chat-avatar doctor">医</div><div><div class="chat-bubble">看了您的照片,伤口周围轻微红肿在术后这个阶段是比较常见的,属于正常愈合反应。请注意以下几点:<br><br>1. 保持伤口清洁干燥<br>2. 换药时动作轻柔<br>3. 如果红肿范围扩大或有脓性分泌物,请及时来院复查</div><div class="chat-time">10:02</div></div></div>
<div class="chat-msg user"><div class="chat-avatar me">我</div><div><div class="chat-bubble">好的,谢谢医生!那我继续按之前的方法换药就行吧?</div><div class="chat-time">10:05</div></div></div>
<div class="chat-msg"><div class="chat-avatar doctor">医</div><div><div class="chat-bubble">是的,继续按之前的方法就好。记得每天观察皮瓣颜色和肿胀情况,有变化随时联系我。</div><div class="chat-time">10:08</div></div></div>
</div>
<div class="chat-input-bar">
<input type="text" placeholder="输入消息..." style="border-radius:20px;">
<svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:#8896a7;cursor:pointer;flex-shrink:0;"><path d="M12 12m-3.2 0a3.2 3.2 0 1 0 6.4 0 3.2 3.2 0 1 0-6.4 0M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9z"/></svg>
<button class="chat-send"><svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#fff;"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg></button>
</div>
</div></div>
<!-- ===== Profile Page ===== -->
<div id="m-profile" class="m-page">
<div class="m-content">
<div class="profile-header">
<div class="profile-avatar"><svg viewBox="0 0 24 24" style="width:32px;height:32px;fill:rgba(255,255,255,.8);"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div>
<div class="profile-name">张先生</div>
<div class="profile-meta">皮瓣修复 · 术后第10天</div>
</div>
<div class="profile-menu" style="margin-bottom:12px;">
<div class="profile-menu-item" onclick="mNavTo('m-info')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#1890ff"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg> 个人信息</span><span class="arrow">></span></div>
<div class="profile-menu-item" onclick="mNavTo('m-report')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#52c41a"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg> 康复报告</span><span class="arrow">></span></div>
<div class="profile-menu-item" onclick="mNavTo('m-scale')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#fa8c16"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg> 评估量表</span><span class="arrow">></span></div>
<div class="profile-menu-item" onclick="mNavTo('m-remind')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#722ed1"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg> 提醒设置</span><span class="arrow">></span></div>
</div>
<div class="profile-menu" style="margin-bottom:12px;">
<div class="profile-menu-item" onclick="mNavTo('m-emergency')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#ff4d4f"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg> 紧急联系</span><span class="arrow">></span></div>
<div class="profile-menu-item" onclick="mNavTo('m-faq')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#1890ff"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg> 常见问题</span><span class="arrow">></span></div>
<div class="profile-menu-item" onclick="mNavTo('m-guide')"><span class="menu-left"><svg viewBox="0 0 24 24" fill="#4a5568"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg> 使用指南</span><span class="arrow">></span></div>
</div>
<div class="profile-menu">
<div class="profile-menu-item" style="color:#ff4d4f;justify-content:center;">退出登录</div>
</div>
</div></div>
<!-- ===== 个人信息 ===== -->
<div id="m-info" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>个人信息</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>基本信息</h3></div><div class="m-card-body">
<div class="record-group"><label><span class="req">*</span> 姓名</label><input type="text" value="张先生"></div>
<div class="record-group"><label><span class="req">*</span> 性别</label><div class="radio-group"><div class="radio-opt selected">男</div><div class="radio-opt">女</div></div></div>
<div class="record-group"><label><span class="req">*</span> 年龄</label><input type="number" value="52"></div>
<div class="record-group"><label><span class="req">*</span> 所在地区</label><input type="text" value="浙江省杭州市"></div>
<div class="record-group"><label><span class="req">*</span> 居住地</label><input type="text" value="杭州市西湖区"></div>
<div class="record-group"><label><span class="req">*</span> 受教育程度</label><div class="radio-group"><div class="radio-opt">小学及以下</div><div class="radio-opt">初中</div><div class="radio-opt selected">高中/中专</div><div class="radio-opt">大专</div><div class="radio-opt">本科及以上</div></div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>健康信息</h3></div><div class="m-card-body">
<div class="record-group"><label>慢性病</label><input type="text" value="高血压"></div>
<div class="record-group"><label>用药情况</label><input type="text" value="降压药(每日1次)"></div>
<div class="record-group"><label>饮酒</label><div class="radio-group"><div class="radio-opt selected">不饮酒</div><div class="radio-opt">偶尔</div><div class="radio-opt">经常</div></div></div>
<div class="record-group"><label>吸烟</label><div class="radio-group"><div class="radio-opt">不吸烟</div><div class="radio-opt selected">已戒烟</div><div class="radio-opt">吸烟</div></div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>手术信息</h3></div><div class="m-card-body">
<div class="record-group"><label><span class="req">*</span> 手术类型</label><input type="text" value="皮瓣修复" readonly style="background:#f8fafc;"></div>
<div class="record-group"><label><span class="req">*</span> 手术时间</label><input type="text" value="2026-04-06" readonly style="background:#f8fafc;"></div>
<div class="record-group"><label>手术医生</label><input type="text" value="李主任" readonly style="background:#f8fafc;"></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>家庭信息</h3></div><div class="m-card-body">
<div class="record-group"><label>家庭照顾者</label><input type="text" value="配偶"></div>
<div class="record-group"><label>照顾者学历</label><div class="radio-group"><div class="radio-opt">小学及以下</div><div class="radio-opt">初中</div><div class="radio-opt selected">高中/中专</div><div class="radio-opt">大专</div><div class="radio-opt">本科及以上</div></div></div>
<div class="record-group"><label>家庭年收入</label><div class="radio-group"><div class="radio-opt">5万以下</div><div class="radio-opt selected">5-10万</div><div class="radio-opt">10-20万</div><div class="radio-opt">20万以上</div></div></div>
</div></div>
<button class="btn btn-primary btn-block" style="margin-bottom:20px;">保存修改</button>
</div></div>
<!-- ===== 康复报告 ===== -->
<div id="m-report" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>康复报告</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>康复概览</h3><span class="tag tag-blue">术后第10天</span></div><div class="m-card-body">
<div class="detail-stat-row">
<div class="detail-stat"><div class="val" style="color:#52c41a;">92%</div><div class="lbl">任务完成率</div></div>
<div class="detail-stat"><div class="val" style="color:#1890ff;">10天</div><div class="lbl">连续打卡</div></div>
<div class="detail-stat"><div class="val" style="color:#fa8c16;">3.2</div><div class="lbl">平均疼痛评分</div></div>
<div class="detail-stat"><div class="val" style="color:#722ed1;">2次</div><div class="lbl">预警次数</div></div>
</div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>疼痛趋势</h3></div><div class="m-card-body">
<div style="font-size:12px;color:#8896a7;margin-bottom:8px;">最近7天 VAS 评分</div>
<div style="display:flex;align-items:flex-end;gap:6px;height:100px;">
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#fa8c16,#ffd591);width:100%;border-radius:3px 3px 0 0;height:60px;"></div><div style="font-size:10px;color:#8896a7;">4/10</div><div style="font-size:9px;color:#8896a7;">6</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#fa8c16,#ffd591);width:100%;border-radius:3px 3px 0 0;height:50px;"></div><div style="font-size:10px;color:#8896a7;">4/11</div><div style="font-size:9px;color:#8896a7;">5</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#fa8c16,#ffd591);width:100%;border-radius:3px 3px 0 0;height:50px;"></div><div style="font-size:10px;color:#8896a7;">4/12</div><div style="font-size:9px;color:#8896a7;">5</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#52c41a,#b7eb8f);width:100%;border-radius:3px 3px 0 0;height:40px;"></div><div style="font-size:10px;color:#8896a7;">4/13</div><div style="font-size:9px;color:#8896a7;">4</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#52c41a,#b7eb8f);width:100%;border-radius:3px 3px 0 0;height:40px;"></div><div style="font-size:10px;color:#8896a7;">4/14</div><div style="font-size:9px;color:#8896a7;">4</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#52c41a,#b7eb8f);width:100%;border-radius:3px 3px 0 0;height:40px;"></div><div style="font-size:10px;color:#8896a7;">4/15</div><div style="font-size:9px;color:#8896a7;">4</div></div>
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;"><div style="background:linear-gradient(180deg,#52c41a,#b7eb8f);width:100%;border-radius:3px 3px 0 0;height:30px;border:2px solid #1890ff;"></div><div style="font-size:10px;color:#1890ff;font-weight:600;">今天</div><div style="font-size:9px;color:#8896a7;">3</div></div>
</div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>皮瓣状态记录</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="detail-info-row"><label>今日</label><span><span class="tag tag-green">红润</span> 轻度肿胀 · 反应正常</span></div>
<div class="detail-info-row"><label>昨日</label><span><span class="tag tag-green">红润</span> 轻度肿胀 · 反应正常</span></div>
<div class="detail-info-row"><label>4/14</label><span><span class="tag tag-orange">苍白</span> 中度肿胀 · 反应减弱</span></div>
<div class="detail-info-row"><label>4/13</label><span><span class="tag tag-green">红润</span> 轻度肿胀 · 反应正常</span></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>任务完成趋势</h3></div><div class="m-card-body">
<div style="margin-bottom:8px;"><div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;"><span>本周完成率</span><span style="font-weight:600;color:#52c41a;">92%</span></div><div class="progress-bar"><div class="progress-fill" style="width:92%;"></div></div></div>
<div><div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;"><span>上周完成率</span><span style="font-weight:600;color:#1890ff;">85%</span></div><div class="progress-bar"><div class="progress-fill" style="width:85%;"></div></div></div>
</div></div>
</div></div>
<!-- ===== 评估量表 ===== -->
<div id="m-scale" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>评估量表</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>待完成量表</h3><span class="tag tag-orange">1项</span></div><div class="m-card-body">
<div style="border:1px solid #ffd591;background:#fff7e6;border-radius:8px;padding:14px;margin-bottom:12px;">
<div style="display:flex;justify-content:space-between;align-items:center;"><div><div style="font-size:13px;font-weight:600;">疼痛视觉模拟评分(VAS)</div><div style="font-size:11px;color:#ad4e00;margin-top:4px;">每日评估 · 预计1分钟</div></div><button class="btn btn-primary" style="padding:6px 14px;" onclick="mNavTo('m-record')">去填写</button></div>
</div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>已完成量表</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">疼痛VAS评分</div><div style="font-size:11px;color:#8896a7;">2026-04-15 20:00</div></div><span><span class="tag tag-green">4分</span></span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">疼痛VAS评分</div><div style="font-size:11px;color:#8896a7;">2026-04-14 20:00</div></div><span><span class="tag tag-green">4分</span></span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">焦虑自评量表(SAS)</div><div style="font-size:11px;color:#8896a7;">2026-04-12 15:00</div></div><span><span class="tag tag-green">38分 正常</span></span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">营养风险筛查(NRS2002)</div><div style="font-size:11px;color:#8896a7;">2026-04-08 10:00</div></div><span><span class="tag tag-green">2分 低风险</span></span></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>可用量表</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">疼痛视觉模拟评分(VAS)</div><div style="font-size:11px;color:#8896a7;">0-10分 · 每日评估</div></div><span class="tag tag-blue">每日</span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">焦虑自评量表(SAS)</div><div style="font-size:11px;color:#8896a7;">20题 · 约5分钟</div></div><span class="tag tag-cyan">按需</span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">抑郁自评量表(SDS)</div><div style="font-size:11px;color:#8896a7;">20题 · 约5分钟</div></div><span class="tag tag-cyan">按需</span></div>
<div class="detail-info-row"><div><div style="font-size:13px;font-weight:500;">关节遗忘评分(FJS)</div><div style="font-size:11px;color:#8896a7;">12题 · 关节置换专用</div></div><span class="tag tag-gray">不适用</span></div>
</div></div>
</div></div>
<!-- ===== 提醒设置 ===== -->
<div id="m-remind" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>提醒设置</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>任务提醒</h3></div><div class="m-card-body">
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">每日打卡提醒</div><div style="font-size:11px;color:#8896a7;">每天 08:00 提醒完成康复任务</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">用药提醒</div><div style="font-size:11px;color:#8896a7;">按医嘱时间提醒服药</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;"><div><div style="font-size:13px;font-weight:500;">康复锻炼提醒</div><div style="font-size:11px;color:#8896a7;">每天 14:00 提醒康复锻炼</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>健康监测</h3></div><div class="m-card-body">
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">皮瓣观察提醒</div><div style="font-size:11px;color:#8896a7;">每天 08:00 / 20:00 提醒观察</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">疼痛评分提醒</div><div style="font-size:11px;color:#8896a7;">每天 20:00 提醒记录疼痛</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;"><div><div style="font-size:13px;font-weight:500;">血糖记录提醒</div><div style="font-size:11px;color:#8896a7;">每天 07:00 提醒记录空腹血糖</div></div><div class="toggle" onclick="this.classList.toggle('on')"></div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>通知方式</h3></div><div class="m-card-body">
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f4f8;"><div><div style="font-size:13px;font-weight:500;">微信服务通知</div><div style="font-size:11px;color:#8896a7;">通过微信推送提醒消息</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
<div style="display:flex;justify-content:space-between;align-items:center;padding:10px 0;"><div><div style="font-size:13px;font-weight:500;">短信通知(紧急)</div><div style="font-size:11px;color:#8896a7;">仅在紧急预警时发送短信</div></div><div class="toggle on" onclick="this.classList.toggle('on')"></div></div>
</div></div>
</div></div>
<!-- ===== 紧急联系 ===== -->
<div id="m-emergency" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>紧急联系</h1></div>
<div class="m-content">
<div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:8px;padding:12px 14px;margin-bottom:16px;font-size:12px;color:#cf1322;line-height:1.6;">
<strong>紧急情况提示:</strong>如出现皮瓣颜色发紫、剧烈疼痛、大量出血等紧急情况,请立即拨打急救电话或联系主治医生。
</div>
<div class="m-card"><div class="m-card-header"><h3>主治医疗团队</h3></div><div class="m-card-body">
<div style="display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f4f8;">
<div style="width:44px;height:44px;border-radius:50%;background:#e6f7ff;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:#1890ff;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div>
<div style="flex:1;"><div style="font-size:14px;font-weight:500;">李主任</div><div style="font-size:12px;color:#8896a7;">主治医生 · 显微外科</div></div>
<a style="width:36px;height:36px;border-radius:50%;background:#52c41a;display:flex;align-items:center;justify-content:center;cursor:pointer;"><svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#fff;"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></a>
</div>
<div style="display:flex;align-items:center;gap:12px;padding:12px 0;">
<div style="width:44px;height:44px;border-radius:50%;background:#f6ffed;display:flex;align-items:center;justify-content:center;"><svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:#52c41a;"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg></div>
<div style="flex:1;"><div style="font-size:14px;font-weight:500;">王护士</div><div style="font-size:12px;color:#8896a7;">责任护士 · 骨科病区</div></div>
<a style="width:36px;height:36px;border-radius:50%;background:#52c41a;display:flex;align-items:center;justify-content:center;cursor:pointer;"><svg viewBox="0 0 24 24" style="width:18px;height:18px;fill:#fff;"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg></a>
</div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>医院信息</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="detail-info-row"><label>医院名称</label><span>XX医院</span></div>
<div class="detail-info-row"><label>科室</label><span>显微外科/骨科</span></div>
<div class="detail-info-row"><label>护士站电话</label><span style="color:#1890ff;">0571-XXXXXXXX</span></div>
<div class="detail-info-row"><label>急诊电话</label><span style="color:#ff4d4f;font-weight:600;">120</span></div>
</div></div>
</div></div>
<!-- ===== 常见问题 ===== -->
<div id="m-faq" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>常见问题</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>术后康复</h3></div><div class="m-card-body" style="padding:0 16px;">
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">皮瓣颜色发白是怎么回事?<span class="arrow">></span></div><div class="faq-a">皮瓣颜色苍白可能提示血液供应不足。请立即抬高患肢,注意保暖,避免压迫皮瓣区域。如果30分钟内颜色未恢复红润,请立即联系主治医生。这可能是血管痉挛或血栓的早期信号,需要及时处理。</div></div>
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">术后多久可以开始活动?<span class="arrow">></span></div><div class="faq-a">具体活动时间取决于手术类型和恢复情况。一般皮瓣修复术后需要制动7-14天,之后在医生指导下逐步开始轻度活动。关节置换术后通常24-48小时即可在辅助下下床。请严格遵循医嘱,不要擅自增加活动量。</div></div>
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">伤口周围红肿正常吗?<span class="arrow">></span></div><div class="faq-a">术后早期轻微红肿是正常的愈合反应。但如果红肿范围持续扩大、伴有发热、有脓性分泌物或异味,可能提示感染,需要及时就医。保持伤口清洁干燥,按时换药是预防感染的关键。</div></div>
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">疼痛评分多少需要就医?<span class="arrow">></span></div><div class="faq-a">如果疼痛评分持续在7分以上,或者突然加重,建议及时联系医生调整镇痛方案。术后疼痛通常会逐渐减轻,如果出现反复加重的趋势,可能需要排除感染或其他并发症。</div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>系统使用</h3></div><div class="m-card-body" style="padding:0 16px;">
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">如何完成每日打卡?<span class="arrow">></span></div><div class="faq-a">在首页的"今日康复任务"中,点击每个任务前的圆圈即可完成打卡。部分任务(如皮瓣观察、疼痛评分)需要先填写记录表单后才算完成。建议按照提醒时间及时完成,保持连续打卡。</div></div>
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">如何联系医生?<span class="arrow">></span></div><div class="faq-a">您可以通过底部导航栏进入"首页",点击"咨询医生"快捷入口,或直接在聊天页面发送文字和图片。医护人员会在工作时间内尽快回复。紧急情况请直接拨打紧急联系电话。</div></div>
<div class="faq-item" onclick="this.classList.toggle('open')"><div class="faq-q">我的数据安全吗?<span class="arrow">></span></div><div class="faq-a">您的所有健康数据均经过加密存储,仅您本人和经授权的医护人员可以查看。系统不会将您的个人信息用于任何商业用途。科研数据导出时会严格脱敏处理,去除所有个人身份信息。</div></div>
</div></div>
</div></div>
<!-- ===== 使用指南 ===== -->
<div id="m-guide" class="m-page">
<div class="m-header"><span class="back" onclick="mNavTo('m-profile')"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></span><h1>使用指南</h1></div>
<div class="m-content">
<div class="m-card"><div class="m-card-header"><h3>快速上手</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="guide-step"><div class="guide-num">1</div><div class="guide-text"><h4>完善个人信息</h4><p>首次使用请在"我的 > 个人信息"中填写完整的个人资料,系统将根据您的手术类型和阶段推送个性化内容。</p></div></div>
<div class="guide-step"><div class="guide-num">2</div><div class="guide-text"><h4>查看康复计划</h4><p>在"康复计划"页面查看您当前阶段的康复旅程,了解每个阶段的重点任务和注意事项。</p></div></div>
<div class="guide-step"><div class="guide-num">3</div><div class="guide-text"><h4>完成每日任务</h4><p>首页会显示今日待完成的康复任务,按时完成打卡。系统会在设定时间推送提醒。</p></div></div>
<div class="guide-step"><div class="guide-num">4</div><div class="guide-text"><h4>记录健康指标</h4><p>在"健康记录"中定期记录皮瓣状态、疼痛评分、血糖等指标,帮助医生了解您的恢复情况。</p></div></div>
<div class="guide-step"><div class="guide-num">5</div><div class="guide-text"><h4>学习康复知识</h4><p>在"康复指导"中浏览与您当前阶段相关的图文和视频内容,掌握正确的康复方法。</p></div></div>
<div class="guide-step"><div class="guide-num">6</div><div class="guide-text"><h4>有问题找医生</h4><p>如有任何疑问,可通过"咨询医生"功能发送文字或图片,医护人员会及时回复。</p></div></div>
</div></div>
<div class="m-card"><div class="m-card-header"><h3>功能说明</h3></div><div class="m-card-body" style="padding:8px 16px;">
<div class="detail-info-row"><label>首页</label><span>任务打卡、快捷操作、推荐内容</span></div>
<div class="detail-info-row"><label>康复计划</label><span>分阶段康复旅程导航</span></div>
<div class="detail-info-row"><label>健康记录</label><span>皮瓣观察、疼痛评分、血糖等</span></div>
<div class="detail-info-row"><label>康复指导</label><span>图文/视频康复知识库</span></div>
<div class="detail-info-row"><label>我的</label><span>个人信息、报告、设置</span></div>
</div></div>
</div></div>
<!-- Tab Bar -->
<div class="tab-bar">
<a class="tab-item active" onclick="mNavTo('m-home',this)">
<svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
<span>首页</span>
</a>
<a class="tab-item" onclick="mNavTo('m-journey',this)">
<svg viewBox="0 0 24 24"><path d="M21 3L3 10.53v.98l6.84 2.65L12.48 21h.98L21 3z"/></svg>
<span>康复计划</span>
</a>
<a class="tab-item" onclick="mNavTo('m-record',this)">
<svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
<span>健康记录</span>
</a>
<a class="tab-item" onclick="mNavTo('m-knowledge',this)">
<svg viewBox="0 0 24 24"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg>
<span>康复指导</span>
</a>
<a class="tab-item" onclick="mNavTo('m-profile',this)">
<svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
<span>我的</span>
</a>
</div>
</div>
<script>
function mNavTo(page, tabEl) {
document.querySelectorAll('.m-page').forEach(function(p){ p.classList.remove('active'); });
document.getElementById(page).classList.add('active');
if (tabEl) {
document.querySelectorAll('.tab-item').forEach(function(t){ t.classList.remove('active'); });
tabEl.classList.add('active');
}
}
function toggleCheck(el) {
el.classList.toggle('done');
if (el.classList.contains('done')) {
el.innerHTML = '<svg viewBox="0 0 24 24" style="width:14px;height:14px;fill:#fff;"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>';
} else {
el.innerHTML = '';
}
}
function selectColor(el) {
el.parentElement.querySelectorAll('.color-opt').forEach(function(o){ o.classList.remove('selected'); });
el.classList.add('selected');
}
function selectRadio(el) {
el.parentElement.querySelectorAll('.radio-opt').forEach(function(o){ o.classList.remove('selected'); });
el.classList.add('selected');
}
function selectPain(el) {
el.parentElement.querySelectorAll('.pain-dot').forEach(function(d){ d.classList.remove('selected'); });
el.classList.add('selected');
}
</script>
</body>
</html>