chore: 初始提交 - 移除所有硬编码凭据,统一从环境变量读取
This commit is contained in:
@@ -0,0 +1,643 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user