1265935fa3
- docs/: 设计规格、讨论记录、销售数据、健康管理文档 - scripts/: 辅助脚本 - package.json + pnpm-lock.yaml: monorepo 根配置
733 lines
72 KiB
HTML
733 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>HMS 健康管理小程序原型</title>
|
||
<style>
|
||
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
||
:root{
|
||
--pri:#0891B2;--pri-l:#E0F7FA;--pri-d:#065A73;--pri-surface:#ECFEFF;
|
||
--acc:#059669;--acc-l:#D1FAE5;
|
||
--bg:#F0FDFA;--card:#FFFFFF;--tx:#134E4A;--tx2:#6B7280;--tx3:#94A3B8;
|
||
--bd:#E5E7EB;--bd-l:#F3F4F6;
|
||
--dan:#DC2626;--dan-l:#FEE2E2;--wrn:#D97706;--wrn-l:#FEF3C7;
|
||
--r:12px;--r-sm:8px;--r-lg:16px;
|
||
--sh-sm:0 1px 3px rgba(0,0,0,.04);
|
||
--sh:0 2px 8px rgba(0,0,0,.06);
|
||
--sh-md:0 4px 16px rgba(0,0,0,.08);
|
||
--sh-lg:0 8px 32px rgba(0,0,0,.12);
|
||
--ease:cubic-bezier(.4,0,.2,1)
|
||
}
|
||
body{font-family:'PingFang SC',-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans GB','Microsoft YaHei',sans-serif;background:#0f172a;display:flex;flex-direction:column;align-items:center;padding:24px;color:var(--tx);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
|
||
/* 模式切换 */
|
||
.mode-switch{display:flex;gap:8px;margin-bottom:16px}
|
||
.mode-btn{padding:10px 24px;border-radius:24px;border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;font-size:13px;font-weight:600;transition:all .25s var(--ease);backdrop-filter:blur(8px);min-height:44px;display:flex;align-items:center}
|
||
.mode-btn:hover{background:rgba(255,255,255,.12);color:#fff}
|
||
.mode-btn.active{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 2px 12px rgba(8,145,178,.35)}
|
||
/* 手机壳 */
|
||
.app{width:375px;height:812px;background:var(--bg);border-radius:44px;overflow:hidden;position:relative;box-shadow:0 0 0 8px #1e293b,0 24px 80px rgba(0,0,0,.5);display:flex;flex-direction:column}
|
||
/* 页面切换 */
|
||
.page{display:none;flex-direction:column;height:100%;opacity:0;transition:opacity .2s var(--ease)}
|
||
.page.active{display:flex;opacity:1}
|
||
/* 状态栏 */
|
||
.status-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:rgba(255,255,255,.9);font-size:13px;font-weight:600;flex-shrink:0}
|
||
/* 导航栏 */
|
||
.nav-bar{height:48px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:600;flex-shrink:0;position:relative;letter-spacing:.3px}
|
||
.nav-bar .back{position:absolute;left:14px;cursor:pointer;display:flex;align-items:center;padding:8px;border-radius:50%;transition:background .15s}
|
||
.nav-bar .back:active{background:rgba(255,255,255,.15)}
|
||
/* 内容区 */
|
||
.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
|
||
.content::-webkit-scrollbar{display:none}
|
||
/* Tab 栏 */
|
||
.tab-bar{height:82px;background:var(--card);border-top:1px solid var(--bd-l);display:flex;align-items:flex-start;padding-top:6px;padding-bottom:env(safe-area-inset-bottom,0);flex-shrink:0}
|
||
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;color:var(--tx3);transition:color .2s var(--ease);padding:6px 0;min-height:44px;justify-content:center}
|
||
.tab-item:active{opacity:.7}
|
||
.tab-item.active{color:var(--pri)}
|
||
.tab-item svg{width:24px;height:24px;stroke-width:1.8}
|
||
.tab-item span{font-size:10px;font-weight:500;letter-spacing:.2px}
|
||
/* 卡片 */
|
||
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:0 16px 12px;box-shadow:var(--sh);border:1px solid rgba(0,0,0,.03);transition:box-shadow .2s}
|
||
.card-title{font-size:15px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px;color:var(--tx)}
|
||
.card-title svg{flex-shrink:0}
|
||
/* 标签 */
|
||
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:500;letter-spacing:.2px;line-height:1.6}
|
||
.tag-g{background:#D1FAE5;color:#065F46}.tag-y{background:#FEF3C7;color:#92400E}
|
||
.tag-r{background:#FEE2E2;color:#991B1B}.tag-b{background:#DBEAFE;color:#1E40AF}
|
||
.tag-gray{background:#F3F4F6;color:#4B5563}
|
||
/* 按钮 */
|
||
.btn{border:none;border-radius:var(--r-sm);padding:12px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s var(--ease);min-height:44px;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.3px}
|
||
.btn:active{transform:scale(.97)}
|
||
.btn-pri{background:var(--pri);color:#fff;box-shadow:0 2px 8px rgba(8,145,178,.25)}
|
||
.btn-pri:active{background:var(--pri-d)}
|
||
.btn-acc{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(5,150,105,.25)}
|
||
.btn-out{background:transparent;border:1.5px solid var(--pri);color:var(--pri)}
|
||
.btn-out:active{background:var(--pri-l)}
|
||
/* 工具类 */
|
||
.flex{display:flex}.aic{align-items:center}.jcsb{justify-content:space-between}
|
||
.gap6{gap:6px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
|
||
/* 分割线 */
|
||
.sep{height:1px;background:var(--bd-l);margin:0}
|
||
.sep-v{width:1px;background:var(--bd);align-self:stretch}
|
||
/* 输入框 */
|
||
.form-input{width:100%;padding:10px 14px;border:1.5px solid var(--bd);border-radius:var(--r-sm);font-size:14px;background:var(--card);outline:none;transition:border-color .2s;font-family:inherit;color:var(--tx);min-height:44px}
|
||
.form-input:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(8,145,178,.1)}
|
||
.form-input::placeholder{color:var(--tx3)}
|
||
.form-label{font-size:12px;font-weight:500;color:var(--tx2);display:block;margin-bottom:6px;letter-spacing:.2px}
|
||
/* 节标题 */
|
||
.section-title{font-size:13px;font-weight:600;color:var(--tx2);margin-bottom:10px;padding:0 16px;letter-spacing:.3px;text-transform:uppercase}
|
||
/* 无障碍 */
|
||
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="mode-switch">
|
||
<button class="mode-btn active" onclick="switchMode('patient')">患者端</button>
|
||
<button class="mode-btn" onclick="switchMode('doctor')">医护端</button>
|
||
</div>
|
||
<div class="app">
|
||
|
||
<!-- ==================== 患者端页面 ==================== -->
|
||
|
||
<!-- P1: 首页 -->
|
||
<div id="page-home" class="page active" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)">
|
||
<span>9:41</span><span style="display:flex;gap:4px"><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12h2v-2H1zm4-3h2V7H5zm4-3h2V4H9zm4-3h2V1h-2z"/></svg><svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="14" height="10" rx="2"/><path d="M4 4V2a4 4 0 018 0"/></svg></span>
|
||
</div>
|
||
<div class="nav-bar" style="background:var(--pri)">健康管理</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<!-- 问候区 -->
|
||
<div style="background:linear-gradient(135deg,var(--pri),var(--pri-d));padding:20px 16px;color:#fff">
|
||
<div class="flex aic jcsb">
|
||
<div class="flex aic gap12">
|
||
<svg width="44" height="44" viewBox="0 0 44 44"><circle cx="22" cy="22" r="22" fill="rgba(255,255,255,.2)"/><circle cx="22" cy="18" r="7" fill="rgba(255,255,255,.5)"/><ellipse cx="22" cy="34" rx="12" ry="8" fill="rgba(255,255,255,.3)"/></svg>
|
||
<div><div style="font-size:18px;font-weight:700">早上好，张明</div><div style="font-size:12px;opacity:.8">2026年4月23日 星期四</div></div>
|
||
</div>
|
||
<svg width="24" height="24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><circle cx="18" cy="3" r="3" fill="#EF4444" stroke="none"/></svg>
|
||
</div>
|
||
</div>
|
||
<!-- 今日健康 -->
|
||
<div class="card" style="margin-top:-20px;position:relative;z-index:1">
|
||
<div class="card-title"><svg width="16" height="16" fill="none" stroke="var(--dan)" stroke-width="2"><path d="M20.8 4.6a5.5 5.5 0 00-7.8 0L12 5.7l-1-1.1A5.5 5.5 0 003.2 13.6l1 1.1L12 22l7.8-7.3 1-1.1a5.5 5.5 0 000-7.8z" transform="scale(.65) translate(2,2)"/></svg>今日健康</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="background:linear-gradient(135deg,#FEF2F2,#FEE2E2);padding:14px 12px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:2px"><div style="font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:.3px">血压</div><div style="font-size:22px;font-weight:700;color:#B91C1C;letter-spacing:-.5px;line-height:1.2">128/82</div><div style="font-size:10px;color:var(--tx3)">mmHg · 偏高</div></div>
|
||
<div style="background:linear-gradient(135deg,#FFFBEB,#FEF3C7);padding:14px 12px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:2px"><div style="font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:.3px">心率</div><div style="font-size:22px;font-weight:700;color:#B45309;letter-spacing:-.5px;line-height:1.2">72</div><div style="font-size:10px;color:var(--tx3)">bpm · 正常</div></div>
|
||
<div style="background:linear-gradient(135deg,var(--pri-l),var(--pri-surface));padding:14px 12px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:2px"><div style="font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:.3px">血糖</div><div style="font-size:22px;font-weight:700;color:#0E7490;letter-spacing:-.5px;line-height:1.2">5.6</div><div style="font-size:10px;color:var(--tx3)">mmol/L · 正常</div></div>
|
||
<div style="background:linear-gradient(135deg,var(--acc-l),#ECFDF5);padding:14px 12px;border-radius:var(--r-sm);display:flex;flex-direction:column;gap:2px"><div style="font-size:11px;font-weight:500;color:var(--tx2);letter-spacing:.3px">体重</div><div style="font-size:22px;font-weight:700;color:#047857;letter-spacing:-.5px;line-height:1.2">68.5</div><div style="font-size:10px;color:var(--tx3)">kg · 稳定</div></div>
|
||
</div>
|
||
</div>
|
||
<!-- 快捷入口 -->
|
||
<div class="card">
|
||
<div class="card-title">快捷服务</div>
|
||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center">
|
||
<div style="cursor:pointer;padding:4px"><div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#0891B2,#06B6D4);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(8,145,178,.3)"><svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M12 20V10M6 20V4M18 20v-6"/></svg></div><div style="font-size:12px;font-weight:500;color:var(--tx)">录数据</div></div>
|
||
<div style="cursor:pointer;padding:4px"><div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#059669,#10B981);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(5,150,105,.3)"><svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div><div style="font-size:12px;font-weight:500;color:var(--tx)">预约</div></div>
|
||
<div style="cursor:pointer;padding:4px"><div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#7C3AED,#A78BFA);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(124,58,237,.25)"><svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg></div><div style="font-size:12px;font-weight:500;color:var(--tx)">报告</div></div>
|
||
<div style="cursor:pointer;padding:4px"><div style="width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#D97706,#FBBF24);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(217,119,6,.25)"><svg width="22" height="22" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div><div style="font-size:12px;font-weight:500;color:var(--tx)">咨询</div></div>
|
||
</div>
|
||
</div>
|
||
<!-- 即将预约 -->
|
||
<div class="card">
|
||
<div class="card-title"><svg width="16" height="16" fill="none" stroke="var(--pri)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>明日值班</div>
|
||
<div class="flex aic gap12" style="padding:10px;background:var(--pri-surface);border-radius:var(--r-sm)">
|
||
<svg width="44" height="44" viewBox="0 0 44 44"><circle cx="22" cy="22" r="22" fill="var(--pri-l)"/><circle cx="22" cy="17" r="7" fill="var(--pri)"/><ellipse cx="22" cy="32" rx="11" ry="8" fill="var(--pri)" opacity=".4"/></svg>
|
||
<div style="flex:1;min-width:0"><div style="font-weight:600;font-size:14px">王建国 主任医师</div><div style="font-size:12px;color:var(--tx2);margin-top:2px">肾内科 · 明天 09:00</div></div>
|
||
<span class="tag tag-g">已确认</span>
|
||
</div>
|
||
</div>
|
||
<!-- 待办随访 -->
|
||
<div class="card">
|
||
<div class="card-title"><svg width="16" height="16" fill="none" stroke="var(--acc)" stroke-width="2"><path d="M9 11l3 3L22 4"/><rect x="3" y="4" width="18" height="18" rx="2" transform="scale(.7) translate(3,3)"/></svg>待办随访</div>
|
||
<div class="flex aic jcsb" style="padding:10px 0;border-bottom:1px solid var(--bd-l)">
|
||
<div class="flex aic gap8">
|
||
<div style="width:22px;height:22px;border:2px solid var(--acc);border-radius:6px;flex-shrink:0"></div>
|
||
<div><div style="font-size:14px;font-weight:500">血压监测记录</div><div style="font-size:11px;color:var(--tx3)">今日到期</div></div>
|
||
</div>
|
||
<span class="tag tag-y">今日</span>
|
||
</div>
|
||
<div class="flex aic jcsb" style="padding:10px 0">
|
||
<div class="flex aic gap8">
|
||
<div style="width:22px;height:22px;border:2px solid var(--bd);border-radius:6px;flex-shrink:0"></div>
|
||
<div><div style="font-size:14px;font-weight:500">健康问卷调查</div><div style="font-size:11px;color:var(--tx3)">3天后到期</div></div>
|
||
</div>
|
||
<span class="tag tag-b">3天后</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 患者端Tab -->
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item active" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P2: 健康数据 -->
|
||
<div id="page-data" class="page" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">健康数据</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<!-- 指标切换 -->
|
||
<div class="flex" style="padding:16px 16px 0;gap:0">
|
||
<div style="flex:1;text-align:center;padding:10px;font-size:14px;font-weight:600;color:var(--pri);border-bottom:2.5px solid var(--pri);cursor:pointer">血压</div>
|
||
<div style="flex:1;text-align:center;padding:10px;font-size:14px;color:var(--tx3);border-bottom:2.5px solid transparent;cursor:pointer">血糖</div>
|
||
<div style="flex:1;text-align:center;padding:10px;font-size:14px;color:var(--tx3);border-bottom:2.5px solid transparent;cursor:pointer">体重</div>
|
||
</div>
|
||
<!-- SVG趋势图 -->
|
||
<div class="card">
|
||
<div class="card-title">7日趋势</div>
|
||
<svg viewBox="0 0 320 180" style="width:100%;height:auto">
|
||
<!-- 网格 -->
|
||
<line x1="40" y1="20" x2="310" y2="20" stroke="#E5E7EB" stroke-dasharray="4"/><line x1="40" y1="60" x2="310" y2="60" stroke="#E5E7EB" stroke-dasharray="4"/><line x1="40" y1="100" x2="310" y2="100" stroke="#E5E7EB" stroke-dasharray="4"/><line x1="40" y1="140" x2="310" y2="140" stroke="#E5E7EB" stroke-dasharray="4"/>
|
||
<!-- Y轴标签 -->
|
||
<text x="35" y="24" font-size="10" fill="#6B7280" text-anchor="end">145</text><text x="35" y="64" font-size="10" fill="#6B7280" text-anchor="end">125</text><text x="35" y="104" font-size="10" fill="#6B7280" text-anchor="end">105</text><text x="35" y="144" font-size="10" fill="#6B7280" text-anchor="end">85</text>
|
||
<!-- 正常范围 -->
|
||
<rect x="40" y="36" width="270" height="64" fill="#D1FAE5" opacity=".3"/>
|
||
<!-- X轴日期 -->
|
||
<text x="58" y="170" font-size="10" fill="#6B7280" text-anchor="middle">17日</text><text x="101" y="170" font-size="10" fill="#6B7280" text-anchor="middle">18日</text><text x="144" y="170" font-size="10" fill="#6B7280" text-anchor="middle">19日</text><text x="187" y="170" font-size="10" fill="#6B7280" text-anchor="middle">20日</text><text x="230" y="170" font-size="10" fill="#6B7280" text-anchor="middle">21日</text><text x="273" y="170" font-size="10" fill="#6B7280" text-anchor="middle">22日</text><text x="305" y="170" font-size="10" fill="#6B7280" text-anchor="middle">23日</text>
|
||
<!-- 收缩压(红) -->
|
||
<polyline points="58,68 101,56 144,72 187,44 230,60 273,48 305,52" fill="none" stroke="#EF4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<circle cx="305" cy="52" r="4" fill="#EF4444"/>
|
||
<!-- 舒张压(蓝) -->
|
||
<polyline points="58,112 101,104 144,116 187,96 230,108 273,100 305,104" fill="none" stroke="#0891B2" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<circle cx="305" cy="104" r="4" fill="#0891B2"/>
|
||
<!-- 最新值标注 -->
|
||
<rect x="268" y="32" width="42" height="16" rx="4" fill="#EF4444"/><text x="289" y="43" font-size="9" fill="#fff" text-anchor="middle">128</text>
|
||
<rect x="268" y="86" width="42" height="16" rx="4" fill="#0891B2"/><text x="289" y="97" font-size="9" fill="#fff" text-anchor="middle">82</text>
|
||
</svg>
|
||
<div class="flex aic gap8" style="margin-top:8px;font-size:11px;color:var(--tx2)"><span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:#EF4444;display:inline-block;border-radius:2px"></span>收缩压</span><span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:3px;background:var(--pri);display:inline-block;border-radius:2px"></span>舒张压</span><span style="display:flex;align-items:center;gap:4px"><span style="width:10px;height:10px;background:#D1FAE5;display:inline-block;border-radius:2px;opacity:.5"></span>正常范围</span></div>
|
||
</div>
|
||
<!-- 录入表单 -->
|
||
<div class="card">
|
||
<div class="card-title">记录数据</div>
|
||
<div style="margin-bottom:12px"><label class="form-label">日期</label><input type="date" value="2026-04-23" class="form-input"></div>
|
||
<div class="flex gap8">
|
||
<div style="flex:1"><label class="form-label">收缩压</label><input type="number" inputmode="numeric" placeholder="120" class="form-input"></div>
|
||
<div style="flex:1"><label class="form-label">舒张压</label><input type="number" inputmode="numeric" placeholder="80" class="form-input"></div>
|
||
</div>
|
||
<div style="margin-top:12px"><label class="form-label">心率</label><input type="number" inputmode="numeric" placeholder="72" class="form-input"></div>
|
||
<button class="btn btn-pri" style="width:100%;margin-top:16px">保存记录</button>
|
||
</div>
|
||
<!-- 历史记录 -->
|
||
<div class="card">
|
||
<div class="card-title">历史记录</div>
|
||
<div style="font-size:13px">
|
||
<div class="flex jcsb aic" style="padding:8px 0;border-bottom:1px solid var(--bd)"><div><strong>128/82</strong> mmHg · 72 bpm</div><div style="color:var(--tx2);font-size:11px">今天 08:30</div></div>
|
||
<div class="flex jcsb aic" style="padding:8px 0;border-bottom:1px solid var(--bd)"><div><strong>125/78</strong> mmHg · 70 bpm</div><div style="color:var(--tx2);font-size:11px">昨天 07:45</div></div>
|
||
<div class="flex jcsb aic" style="padding:8px 0;border-bottom:1px solid var(--bd)"><div><strong>132/85</strong> mmHg · 75 bpm</div><div style="color:var(--tx2);font-size:11px">4/21 08:15</div></div>
|
||
<div class="flex jcsb aic" style="padding:8px 0;border-bottom:1px solid var(--bd)"><div><strong>118/76</strong> mmHg · 68 bpm</div><div style="color:var(--tx2);font-size:11px">4/20 07:50</div></div>
|
||
<div class="flex jcsb aic" style="padding:8px 0"><div><strong>130/84</strong> mmHg · 74 bpm</div><div style="color:var(--tx2);font-size:11px">4/19 08:00</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item active" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P3: 预约挂号 -->
|
||
<div id="page-appointment" class="page" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">预约挂号</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<!-- 搜索 -->
|
||
<div style="padding:12px 16px"><div style="background:var(--card);border-radius:24px;padding:10px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh);border:1px solid rgba(0,0,0,.04)"><svg width="16" height="16" fill="none" stroke="var(--tx3)" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg><input placeholder="搜索医生/科室" style="border:none;outline:none;font-size:14px;flex:1;background:transparent;color:var(--tx);min-height:24px"></div></div>
|
||
<!-- 科室筛选 -->
|
||
<div style="padding:0 16px 12px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch">
|
||
<span style="padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;background:var(--pri);color:#fff;white-space:nowrap;cursor:pointer">全部</span>
|
||
<span style="padding:6px 16px;border-radius:20px;font-size:12px;background:var(--card);color:var(--tx);border:1px solid var(--bd);white-space:nowrap;cursor:pointer">肾内科</span>
|
||
<span style="padding:6px 16px;border-radius:20px;font-size:12px;background:var(--card);color:var(--tx);border:1px solid var(--bd);white-space:nowrap;cursor:pointer">心内科</span>
|
||
<span style="padding:6px 16px;border-radius:20px;font-size:12px;background:var(--card);color:var(--tx);border:1px solid var(--bd);white-space:nowrap;cursor:pointer">内分泌</span>
|
||
<span style="padding:6px 16px;border-radius:20px;font-size:12px;background:var(--card);color:var(--tx);border:1px solid var(--bd);white-space:nowrap;cursor:pointer">全科</span>
|
||
</div>
|
||
<!-- 医生列表 -->
|
||
<div class="card">
|
||
<div class="flex gap12">
|
||
<svg width="52" height="52" viewBox="0 0 52 52"><circle cx="26" cy="26" r="26" fill="var(--pri-l)"/><circle cx="26" cy="21" r="8" fill="var(--pri)"/><ellipse cx="26" cy="38" rx="13" ry="9" fill="var(--pri)" opacity=".5"/></svg>
|
||
<div style="flex:1">
|
||
<div class="flex jcsb aic"><div><strong>王建国</strong> <span style="font-size:12px;color:var(--tx2)">主任医师</span></div><button class="btn btn-pri" style="padding:6px 16px;font-size:12px">预约</button></div>
|
||
<div style="font-size:12px;color:var(--tx2);margin:4px 0">肾内科</div>
|
||
<div class="flex gap8" style="margin:4px 0"><span class="tag tag-b">慢性肾病</span><span class="tag tag-g">透析管理</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:4px">★ 4.9 · 接诊 1,286 人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex gap12">
|
||
<svg width="52" height="52" viewBox="0 0 52 52"><circle cx="26" cy="26" r="26" fill="#FEF3C7"/><circle cx="26" cy="21" r="8" fill="#F59E0B"/><ellipse cx="26" cy="38" rx="13" ry="9" fill="#F59E0B" opacity=".5"/></svg>
|
||
<div style="flex:1">
|
||
<div class="flex jcsb aic"><div><strong>李芳</strong> <span style="font-size:12px;color:var(--tx2)">副主任医师</span></div><button class="btn btn-pri" style="padding:6px 16px;font-size:12px">预约</button></div>
|
||
<div style="font-size:12px;color:var(--tx2);margin:4px 0">心内科</div>
|
||
<div class="flex gap8" style="margin:4px 0"><span class="tag tag-r">高血压</span><span class="tag tag-b">冠心病</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:4px">★ 4.8 · 接诊 986 人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex gap12">
|
||
<svg width="52" height="52" viewBox="0 0 52 52"><circle cx="26" cy="26" r="26" fill="var(--acc-l)"/><circle cx="26" cy="21" r="8" fill="var(--acc)"/><ellipse cx="26" cy="38" rx="13" ry="9" fill="var(--acc)" opacity=".5"/></svg>
|
||
<div style="flex:1">
|
||
<div class="flex jcsb aic"><div><strong>赵明辉</strong> <span style="font-size:12px;color:var(--tx2)">主治医师</span></div><button class="btn btn-pri" style="padding:6px 16px;font-size:12px">预约</button></div>
|
||
<div style="font-size:12px;color:var(--tx2);margin:4px 0">内分泌科</div>
|
||
<div class="flex gap8" style="margin:4px 0"><span class="tag tag-y">糖尿病</span><span class="tag tag-g">甲状腺</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:4px">★ 4.7 · 接诊 756 人</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 预约弹窗 -->
|
||
<div style="background:var(--card);border-radius:var(--r-lg) var(--r-lg) 0 0;padding:20px 16px;border-top:3px solid var(--pri);margin-top:8px;box-shadow:var(--sh-md)">
|
||
<div style="font-weight:600;font-size:15px;margin-bottom:16px;color:var(--tx)">选择预约时间 · 王建国</div>
|
||
<div class="flex jcsb" style="margin-bottom:16px">
|
||
<div style="text-align:center;padding:10px 8px;border-radius:8px;background:var(--bg);min-width:44px"><div style="font-size:11px;color:var(--tx2)">周四</div><div style="font-size:15px;font-weight:700">24</div><div style="width:6px;height:6px;border-radius:50%;background:var(--acc);margin:4px auto 0"></div></div>
|
||
<div style="text-align:center;padding:10px 8px;border-radius:8px;background:var(--pri-l);min-width:44px;border:2px solid var(--pri)"><div style="font-size:11px;color:var(--pri)">周五</div><div style="font-size:15px;font-weight:700;color:var(--pri)">25</div><div style="width:6px;height:6px;border-radius:50%;background:var(--pri);margin:4px auto 0"></div></div>
|
||
<div style="text-align:center;padding:10px 8px;border-radius:8px;background:var(--bg);min-width:44px"><div style="font-size:11px;color:var(--tx2)">周六</div><div style="font-size:15px;font-weight:700">26</div><div style="width:6px;height:6px;border-radius:50%;background:var(--bd);margin:4px auto 0"></div></div>
|
||
<div style="text-align:center;padding:10px 8px;border-radius:8px;background:var(--bg);min-width:44px"><div style="font-size:11px;color:var(--tx2)">周日</div><div style="font-size:15px;font-weight:700">27</div></div>
|
||
<div style="text-align:center;padding:10px 8px;border-radius:8px;background:var(--bg);min-width:44px"><div style="font-size:11px;color:var(--tx2)">周一</div><div style="font-size:15px;font-weight:700">28</div><div style="width:6px;height:6px;border-radius:50%;background:var(--acc);margin:4px auto 0"></div></div>
|
||
</div>
|
||
<div style="font-size:13px;color:var(--tx2);margin-bottom:8px">选择时段</div>
|
||
<div class="flex gap8" style="margin-bottom:16px">
|
||
<div style="flex:1;padding:10px;border-radius:8px;background:var(--pri);color:#fff;text-align:center;font-size:13px;font-weight:600">上午 09:00</div>
|
||
<div style="flex:1;padding:10px;border-radius:8px;background:var(--bg);text-align:center;font-size:13px;border:1px solid var(--bd)">下午 14:00</div>
|
||
</div>
|
||
<button class="btn btn-pri" style="width:100%">确认预约</button>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item active" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P4: 我的报告 -->
|
||
<div id="page-report" class="page" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">
|
||
<span class="back" onclick="showPage('home','patient')"><svg width="20" height="20" fill="none" stroke="#fff" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></span>
|
||
我的报告
|
||
</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<div class="flex" style="padding:12px 16px;gap:0">
|
||
<div style="flex:1;text-align:center;padding:8px;font-size:13px;font-weight:600;color:var(--pri);border-bottom:2px solid var(--pri)">化验报告</div>
|
||
<div style="flex:1;text-align:center;padding:8px;font-size:13px;color:var(--tx2);border-bottom:2px solid transparent">体检记录</div>
|
||
</div>
|
||
<div style="padding:0 16px 8px"><select style="width:100%;padding:8px 12px;border:1px solid var(--bd);border-radius:8px;font-size:13px;background:var(--card)"><option>全部类型</option><option>肾功能</option><option>血常规</option><option>尿常规</option></select></div>
|
||
<div class="card">
|
||
<div class="flex jcsb aic"><div><strong style="font-size:14px">肾功能检查</strong><div style="font-size:11px;color:var(--tx2);margin-top:2px">2026-04-20 · 市第一医院</div></div><span class="tag tag-r">2项异常</span></div>
|
||
<div style="margin-top:8px;font-size:12px;color:var(--tx2)">正常 8 项，<span style="color:var(--dan)">异常 2 项</span></div>
|
||
<div style="margin-top:8px;font-size:12px;background:#FEF2F2;padding:8px;border-radius:6px"><span style="color:var(--dan)">肌酐 156 μmol/L (参考 44-133)</span><br><span style="color:var(--dan)">尿素氮 9.8 mmol/L (参考 2.5-7.1)</span></div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex jcsb aic"><div><strong style="font-size:14px">血常规</strong><div style="font-size:11px;color:var(--tx2);margin-top:2px">2026-04-15 · 仁爱体检中心</div></div><span class="tag tag-g">全部正常</span></div>
|
||
<div style="margin-top:8px;font-size:12px;color:var(--tx2)">正常 12 项，异常 0 项</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex jcsb aic"><div><strong style="font-size:14px">尿常规</strong><div style="font-size:11px;color:var(--tx2);margin-top:2px">2026-04-10 · 市第一医院</div></div><span class="tag tag-y">1项异常</span></div>
|
||
<div style="margin-top:8px;font-size:12px;color:var(--tx2)">正常 9 项，<span style="color:var(--wrn)">异常 1 项</span></div>
|
||
</div>
|
||
<!-- 报告详情（模拟展开） -->
|
||
<div class="card" style="border:2px solid var(--pri)">
|
||
<div class="flex jcsb aic" style="margin-bottom:8px"><strong style="font-size:15px">肾功能检查详情</strong><span class="tag tag-g">已出</span></div>
|
||
<div style="font-size:12px;color:var(--tx2);margin-bottom:12px">2026-04-20 · 市第一医院检验科</div>
|
||
<div style="font-size:12px;border-collapse:collapse;width:100%">
|
||
<div class="flex" style="padding:6px 0;border-bottom:1px solid var(--bd);font-weight:600;color:var(--tx2)"><div style="flex:2">指标</div><div style="flex:1">结果</div><div style="flex:1">单位</div><div style="flex:1.2">参考值</div></div>
|
||
<div class="flex" style="padding:6px 0;border-bottom:1px solid var(--bd)"><div style="flex:2">肌酐</div><div style="flex:1;color:var(--dan);font-weight:600">156</div><div style="flex:1;font-size:11px">μmol/L</div><div style="flex:1.2;font-size:11px">44-133</div></div>
|
||
<div class="flex" style="padding:6px 0;border-bottom:1px solid var(--bd)"><div style="flex:2">尿素氮</div><div style="flex:1;color:var(--dan);font-weight:600">9.8</div><div style="flex:1;font-size:11px">mmol/L</div><div style="flex:1.2;font-size:11px">2.5-7.1</div></div>
|
||
<div class="flex" style="padding:6px 0;border-bottom:1px solid var(--bd)"><div style="flex:2">尿酸</div><div style="flex:1">386</div><div style="flex:1;font-size:11px">μmol/L</div><div style="flex:1.2;font-size:11px">150-420</div></div>
|
||
<div class="flex" style="padding:6px 0"><div style="flex:2">eGFR</div><div style="flex:1;color:var(--acc)">72</div><div style="flex:1;font-size:11px">ml/min</div><div style="flex:1.2;font-size:11px">>60</div></div>
|
||
</div>
|
||
<div style="background:var(--bg);border-radius:8px;padding:12px;margin-top:12px">
|
||
<div style="font-size:12px;font-weight:600;margin-bottom:4px">医生解读</div>
|
||
<div style="font-size:12px;color:var(--tx2);line-height:1.6">肌酐和尿素氮轻度升高，建议控制蛋白质摄入，两周后复查肾功能。eGFR 72 处于轻度下降阶段，需持续关注。</div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:4px">—— 王建国 主任医师</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P5: 在线咨询 -->
|
||
<div id="page-consult" class="page" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">在线咨询</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<!-- 会话列表 -->
|
||
<div style="padding:12px 16px"><div style="background:var(--card);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;box-shadow:var(--sh)"><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg><input placeholder="搜索医生" style="border:none;outline:none;font-size:14px;flex:1;background:transparent"></div></div>
|
||
<div class="card" style="cursor:pointer">
|
||
<div class="flex gap12">
|
||
<div style="position:relative"><svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="var(--pri-l)"/><circle cx="24" cy="19" r="7" fill="var(--pri)"/><ellipse cx="24" cy="35" rx="11" ry="8" fill="var(--pri)" opacity=".5"/></svg><div style="position:absolute;bottom:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--acc);border:2px solid #fff"></div></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div class="flex jcsb"><div><strong>王建国</strong> <span style="font-size:11px;color:var(--tx2)">肾内科</span></div><span style="font-size:11px;color:var(--tx2)">09:30</span></div>
|
||
<div style="font-size:13px;color:var(--tx2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">您好，我最近血压波动比较大，想咨询一下...</div>
|
||
</div>
|
||
<div style="background:var(--dan);color:#fff;border-radius:10px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;margin-top:16px">3</div>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="cursor:pointer">
|
||
<div class="flex gap12">
|
||
<div style="position:relative"><svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#FEF3C7"/><circle cx="24" cy="19" r="7" fill="#F59E0B"/><ellipse cx="24" cy="35" rx="11" ry="8" fill="#F59E0B" opacity=".5"/></svg><div style="position:absolute;bottom:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#9CA3AF;border:2px solid #fff"></div></div>
|
||
<div style="flex:1;min-width:0">
|
||
<div class="flex jcsb"><div><strong>李芳</strong> <span style="font-size:11px;color:var(--tx2)">心内科</span></div><span style="font-size:11px;color:var(--tx2)">昨天</span></div>
|
||
<div style="font-size:13px;color:var(--tx2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">好的，我明白了。建议您按时服药并...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 聊天界面（内嵌展示） -->
|
||
<div style="margin:8px 0;padding:12px 16px;border-top:3px solid var(--bd)">
|
||
<div style="text-align:center;font-size:11px;color:var(--tx2);margin-bottom:16px;background:var(--bg);padding:8px;border-radius:8px">以下为与王建国医生的对话预览</div>
|
||
<!-- 对方消息 -->
|
||
<div class="flex gap8" style="margin-bottom:16px">
|
||
<svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="var(--pri-l)"/><circle cx="18" cy="14" r="5" fill="var(--pri)"/></svg>
|
||
<div style="max-width:70%"><div style="background:var(--card);padding:10px 14px;border-radius:12px 12px 12px 2px;font-size:13px;line-height:1.5;box-shadow:var(--sh)">您好张先生，请问最近血压控制得怎么样？有按时服药吗？</div><div style="font-size:10px;color:var(--tx2);margin-top:2px">09:30</div></div>
|
||
</div>
|
||
<!-- 我方消息 -->
|
||
<div class="flex gap8" style="margin-bottom:16px;flex-direction:row-reverse">
|
||
<div style="max-width:70%"><div style="background:#DCF5F7;padding:10px 14px;border-radius:12px 12px 2px 12px;font-size:13px;line-height:1.5">王医生好，最近血压波动比较大，早上量了一次128/82，有时会到140/90</div><div style="font-size:10px;color:var(--tx2);margin-top:2px;text-align:right">09:32</div></div>
|
||
</div>
|
||
<!-- 对方消息 -->
|
||
<div class="flex gap8" style="margin-bottom:16px">
|
||
<svg width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="var(--pri-l)"/><circle cx="18" cy="14" r="5" fill="var(--pri)"/></svg>
|
||
<div style="max-width:70%"><div style="background:var(--card);padding:10px 14px;border-radius:12px 12px 12px 2px;font-size:13px;line-height:1.5;box-shadow:var(--sh)">了解，您的血压确实有些波动。建议：1. 每天固定时间测血压并记录 2. 低盐饮食 3. 我帮您调整一下用药方案，请明天来门诊</div><div style="font-size:10px;color:var(--tx2);margin-top:2px">09:35</div></div>
|
||
</div>
|
||
<!-- 系统消息 -->
|
||
<div style="text-align:center;font-size:11px;color:var(--tx2);margin:12px 0;padding:4px 12px;background:var(--bg);display:inline-block;border-radius:10px">系统提示：已为您预约明天 09:00 王建国医生门诊</div>
|
||
<!-- 输入栏 -->
|
||
<div class="flex aic gap8" style="padding:10px 16px;background:var(--card);border-top:1px solid var(--bd);margin-top:auto;position:sticky;bottom:0">
|
||
<svg width="22" height="22" fill="none" stroke="var(--tx2)" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 8v8M8 12h8"/></svg>
|
||
<input placeholder="输入消息..." style="flex:1;border:none;outline:none;font-size:14px;padding:8px 12px;background:var(--bg);border-radius:20px">
|
||
<div style="width:36px;height:36px;border-radius:50%;background:var(--pri);display:flex;align-items:center;justify-content:center"><svg width="18" height="18" fill="none" stroke="#fff" stroke-width="2"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></svg></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item active" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== 医护端页面 ==================== -->
|
||
|
||
<!-- P6: 工作台 -->
|
||
<div id="page-workspace" class="page" data-mode="doctor">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">工作台</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<!-- 医护信息 -->
|
||
<div style="background:linear-gradient(135deg,var(--pri),var(--pri-d));padding:16px;color:#fff">
|
||
<div class="flex aic jcsb">
|
||
<div class="flex aic gap12">
|
||
<svg width="48" height="48" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="rgba(255,255,255,.2)"/><circle cx="24" cy="19" r="7" fill="rgba(255,255,255,.6)"/><ellipse cx="24" cy="35" rx="11" ry="8" fill="rgba(255,255,255,.4)"/></svg>
|
||
<div><div style="font-size:16px;font-weight:700">王建国</div><div style="font-size:12px;opacity:.8">肾内科 · 主任医师</div></div>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;font-size:12px"><div style="width:8px;height:8px;border-radius:50%;background:#10B981"></div>在线</div>
|
||
</div>
|
||
</div>
|
||
<!-- 今日统计 -->
|
||
<div style="padding:0 16px;margin-top:-12px;position:relative;z-index:1">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
|
||
<div style="background:var(--card);padding:14px 12px;border-radius:var(--r);box-shadow:var(--sh);text-align:center;border:1px solid rgba(0,0,0,.03)"><div style="width:40px;height:40px;border-radius:12px;background:var(--acc-l);display:flex;align-items:center;justify-content:center;margin:0 auto 8px"><svg width="18" height="18" fill="none" stroke="var(--acc)" stroke-width="2"><path d="M22 16.92h-4.56a2 2 0 01-1.9-1.38l-.68-2.04a2 2 0 00-1.9-1.38h-2.92a2 2 0 00-1.9 1.38l-.68 2.04a2 2 0 01-1.9 1.38H2"/><circle cx="12" cy="8" r="5" transform="scale(.6) translate(6,2)"/></svg></div><div style="font-size:26px;font-weight:700;color:var(--acc);letter-spacing:-.5px">12</div><div style="font-size:11px;color:var(--tx2);margin-top:2px">待随访</div></div>
|
||
<div style="background:var(--card);padding:14px 12px;border-radius:var(--r);box-shadow:var(--sh);text-align:center;border:1px solid rgba(0,0,0,.03)"><div style="width:40px;height:40px;border-radius:12px;background:var(--pri-l);display:flex;align-items:center;justify-content:center;margin:0 auto 8px"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg></div><div style="font-size:26px;font-weight:700;color:var(--pri);letter-spacing:-.5px">8</div><div style="font-size:11px;color:var(--tx2);margin-top:2px">今日预约</div></div>
|
||
<div style="background:var(--card);padding:14px 12px;border-radius:var(--r);box-shadow:var(--sh);text-align:center;border:1px solid rgba(0,0,0,.03)"><div style="width:40px;height:40px;border-radius:12px;background:#FEF3C7;display:flex;align-items:center;justify-content:center;margin:0 auto 8px"><svg width="18" height="18" fill="none" stroke="var(--wrn)" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div><div style="font-size:26px;font-weight:700;color:var(--wrn);letter-spacing:-.5px">5</div><div style="font-size:11px;color:var(--tx2);margin-top:2px">待回复咨询</div></div>
|
||
<div style="background:var(--card);padding:14px 12px;border-radius:var(--r);box-shadow:var(--sh);text-align:center;border:1px solid rgba(0,0,0,.03)"><div style="width:40px;height:40px;border-radius:12px;background:var(--dan-l);display:flex;align-items:center;justify-content:center;margin:0 auto 8px"><svg width="18" height="18" fill="none" stroke="var(--dan)" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17h.01" transform="scale(.7) translate(4,1)"/></svg></div><div style="font-size:26px;font-weight:700;color:var(--dan);letter-spacing:-.5px">3</div><div style="font-size:11px;color:var(--tx2);margin-top:2px">逾期任务</div></div>
|
||
</div>
|
||
</div>
|
||
<!-- 今日任务 -->
|
||
<div style="padding:12px 16px"><div style="font-size:15px;font-weight:600;margin-bottom:8px">今日任务</div>
|
||
<div class="card" style="margin:0 0 8px">
|
||
<div class="flex aic gap12">
|
||
<div style="width:36px;height:36px;border-radius:8px;background:var(--acc-l);display:flex;align-items:center;justify-content:center"><svg width="16" height="16" fill="none" stroke="var(--acc)" stroke-width="2"><path d="M22 16.92h-4.56l-.68-2.04a2 2 0 00-1.9-1.38" transform="scale(.6) translate(4,2)"/></svg></div>
|
||
<div style="flex:1"><div style="font-size:13px;font-weight:600">张明 · 电话随访</div><div style="font-size:11px;color:var(--tx2)">血压监测随访 · 10:00</div></div>
|
||
<span class="tag tag-y">待处理</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin:0 0 8px">
|
||
<div class="flex aic gap12">
|
||
<div style="width:36px;height:36px;border-radius:8px;background:var(--pri-l);display:flex;align-items:center;justify-content:center"><svg width="16" height="16" fill="none" stroke="var(--pri)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/></svg></div>
|
||
<div style="flex:1"><div style="font-size:13px;font-weight:600">刘芳 · 门诊预约</div><div style="font-size:11px;color:var(--tx2)">肾功能复查 · 11:00</div></div>
|
||
<span class="tag tag-g">已确认</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin:0 0 8px">
|
||
<div class="flex aic gap12">
|
||
<div style="width:36px;height:36px;border-radius:8px;background:#FEF3C7;display:flex;align-items:center;justify-content:center"><svg width="16" height="16" fill="none" stroke="#F59E0B" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div>
|
||
<div style="flex:1"><div style="font-size:13px;font-weight:600">李强 · 在线咨询</div><div style="font-size:11px;color:var(--tx2)">用药咨询 · 14:00</div></div>
|
||
<span class="tag tag-y">待回复</span>
|
||
</div>
|
||
</div>
|
||
<div class="card" style="margin:0 0 8px">
|
||
<div class="flex aic gap12">
|
||
<div style="width:36px;height:36px;border-radius:8px;background:var(--acc-l);display:flex;align-items:center;justify-content:center"><svg width="16" height="16" fill="none" stroke="var(--acc)" stroke-width="2"><path d="M22 16.92h-4.56l-.68-2.04" transform="scale(.6) translate(4,2)"/></svg></div>
|
||
<div style="flex:1"><div style="font-size:13px;font-weight:600">赵婷 · 面访随访</div><div style="font-size:11px;color:var(--tx2)">术后随访 · 16:00</div></div>
|
||
<span class="tag tag-g">已完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="doctor">
|
||
<div class="tab-item active" onclick="showPage('workspace','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg><span>工作台</span></div>
|
||
<div class="tab-item" onclick="showPage('patients','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg><span>患者</span></div>
|
||
<div class="tab-item" onclick="showPage('schedule','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>排班</span></div>
|
||
<div class="tab-item" onclick="showPage('me','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P7: 患者管理 -->
|
||
<div id="page-patients" class="page" data-mode="doctor">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">患者管理</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<div style="padding:12px 16px"><div style="background:var(--card);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;box-shadow:var(--sh)"><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg><input placeholder="搜索患者姓名/手机号" style="border:none;outline:none;font-size:14px;flex:1;background:transparent"></div></div>
|
||
<div style="padding:0 16px 12px;display:flex;gap:6px;overflow-x:auto">
|
||
<span style="padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;background:var(--pri);color:#fff;white-space:nowrap">全部</span>
|
||
<span style="padding:6px 14px;border-radius:20px;font-size:12px;background:var(--card);color:var(--dan);border:1px solid #FEE2E2;white-space:nowrap">高血压</span>
|
||
<span style="padding:6px 14px;border-radius:20px;font-size:12px;background:var(--card);color:var(--pri);border:1px solid var(--pri-l);white-space:nowrap">糖尿病</span>
|
||
<span style="padding:6px 14px;border-radius:20px;font-size:12px;background:var(--card);color:var(--acc);border:1px solid var(--acc-l);white-space:nowrap">慢性肾病</span>
|
||
<span style="padding:6px 14px;border-radius:20px;font-size:12px;background:var(--card);color:var(--wrn);border:1px solid #FEF3C7;white-space:nowrap">术后随访</span>
|
||
</div>
|
||
<!-- 患者列表 -->
|
||
<div class="card">
|
||
<div class="flex aic gap12">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:var(--pri-l);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--pri);font-size:14px">张</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong style="font-size:14px">张明</strong><svg width="14" height="14" fill="none" stroke="var(--pri)" stroke-width="2"><circle cx="7" cy="7" r="5"/><path d="M7 5v4M5 7h4" transform="translate(0,-1)"/></svg><span style="font-size:12px;color:var(--tx2)">52岁</span><div style="width:8px;height:8px;border-radius:50%;background:var(--acc)"></div></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-r" style="font-size:10px;padding:2px 8px">高血压</span><span class="tag tag-b" style="font-size:10px;padding:2px 8px">慢性肾病</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:2px">主治：王建国 · 上次随访 4/18</div>
|
||
</div>
|
||
<svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex aic gap12">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#FEF3C7;display:flex;align-items:center;justify-content:center;font-weight:700;color:#F59E0B;font-size:14px">刘</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong style="font-size:14px">刘芳</strong><svg width="14" height="14" fill="none" stroke="#F59E0B" stroke-width="2"><circle cx="7" cy="7" r="5"/></svg><span style="font-size:12px;color:var(--tx2)">45岁</span><div style="width:8px;height:8px;border-radius:50%;background:var(--acc)"></div></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-b" style="font-size:10px;padding:2px 8px">糖尿病</span><span class="tag tag-y" style="font-size:10px;padding:2px 8px">术后随访</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:2px">主治：王建国 · 上次随访 4/20</div>
|
||
</div>
|
||
<svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex aic gap12">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:var(--acc-l);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--acc);font-size:14px">李</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong style="font-size:14px">李强</strong><svg width="14" height="14" fill="none" stroke="var(--pri)" stroke-width="2"><circle cx="7" cy="7" r="5"/></svg><span style="font-size:12px;color:var(--tx2)">68岁</span><div style="width:8px;height:8px;border-radius:50%;background:var(--acc)"></div></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-r" style="font-size:10px;padding:2px 8px">高血压</span><span class="tag tag-b" style="font-size:10px;padding:2px 8px">冠心病</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:2px">主治：李芳 · 上次随访 4/15</div>
|
||
</div>
|
||
<svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex aic gap12">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#FEE2E2;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--dan);font-size:14px">赵</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong style="font-size:14px">赵婷</strong><svg width="14" height="14" fill="none" stroke="var(--dan)" stroke-width="2"><circle cx="7" cy="7" r="5"/></svg><span style="font-size:12px;color:var(--tx2)">38岁</span><div style="width:8px;height:8px;border-radius:50%;background:var(--acc)"></div></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-y" style="font-size:10px;padding:2px 8px">术后随访</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:2px">主治：王建国 · 上次随访 4/22</div>
|
||
</div>
|
||
<svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="flex aic gap12">
|
||
<div style="width:40px;height:40px;border-radius:50%;background:#DBEAFE;display:flex;align-items:center;justify-content:center;font-weight:700;color:#3B82F6;font-size:14px">陈</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong style="font-size:14px">陈华</strong><svg width="14" height="14" fill="none" stroke="#3B82F6" stroke-width="2"><circle cx="7" cy="7" r="5"/></svg><span style="font-size:12px;color:var(--tx2)">55岁</span><div style="width:8px;height:8px;border-radius:50%;background:#9CA3AF"></div></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-b" style="font-size:10px;padding:2px 8px">慢性肾病</span><span class="tag tag-r" style="font-size:10px;padding:2px 8px">高血压</span></div>
|
||
<div style="font-size:11px;color:var(--tx2);margin-top:2px">主治：王建国 · 已停用</div>
|
||
</div>
|
||
<svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 添加患者按钮 -->
|
||
<div style="position:sticky;bottom:90px;right:16px;display:flex;justify-content:flex-end;pointer-events:none">
|
||
<div style="width:52px;height:52px;border-radius:50%;background:var(--pri);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(8,145,178,.4);pointer-events:auto;cursor:pointer"><svg width="24" height="24" fill="none" stroke="#fff" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="doctor">
|
||
<div class="tab-item" onclick="showPage('workspace','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg><span>工作台</span></div>
|
||
<div class="tab-item active" onclick="showPage('patients','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg><span>患者</span></div>
|
||
<div class="tab-item" onclick="showPage('schedule','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>排班</span></div>
|
||
<div class="tab-item" onclick="showPage('me','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- P8: 随访执行 -->
|
||
<div id="page-followup" class="page" data-mode="doctor">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">
|
||
<span class="back"><svg width="20" height="20" fill="none" stroke="#fff" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></span>
|
||
随访执行
|
||
</div>
|
||
<div class="content" style="padding-bottom:16px">
|
||
<!-- 患者信息条 -->
|
||
<div style="background:var(--card);padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh)">
|
||
<div style="width:44px;height:44px;border-radius:50%;background:var(--pri-l);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--pri)">张</div>
|
||
<div style="flex:1">
|
||
<div class="flex aic gap8"><strong>张明</strong><span style="font-size:12px;color:var(--tx2)">男 · 52岁</span></div>
|
||
<div class="flex gap6" style="margin-top:4px"><span class="tag tag-r" style="font-size:10px;padding:2px 8px">高血压</span><span class="tag tag-b" style="font-size:10px;padding:2px 8px">慢性肾病</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 随访任务信息 -->
|
||
<div class="card">
|
||
<div class="card-title"><svg width="16" height="16" fill="none" stroke="var(--pri)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>任务信息</div>
|
||
<div style="font-size:13px;line-height:2">
|
||
<div class="flex jcsb"><span style="color:var(--tx2)">随访类型</span><strong>电话随访</strong></div>
|
||
<div class="flex jcsb"><span style="color:var(--tx2)">计划日期</span><strong>2026-04-23</strong></div>
|
||
<div class="flex jcsb"><span style="color:var(--tx2)">状态</span><span class="tag tag-y">进行中</span></div>
|
||
<div class="flex jcsb"><span style="color:var(--tx2)">关联预约</span><span style="color:var(--pri)">4/24 王建国门诊</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 随访表单 -->
|
||
<div class="card">
|
||
<div class="card-title"><svg width="16" height="16" fill="none" stroke="var(--acc)" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>随访记录</div>
|
||
<!-- 随访结果 -->
|
||
<div style="margin-bottom:16px">
|
||
<div style="font-size:13px;font-weight:600;margin-bottom:8px">随访结果</div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:2px solid var(--acc);background:var(--acc-l);cursor:pointer;font-size:13px"><input type="radio" name="result" checked style="accent-color:var(--acc)">已随访</label>
|
||
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1.5px solid var(--bd);cursor:pointer;font-size:13px"><input type="radio" name="result" style="accent-color:var(--acc)">无法联系</label>
|
||
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1.5px solid var(--bd);cursor:pointer;font-size:13px"><input type="radio" name="result" style="accent-color:var(--acc)">拒绝</label>
|
||
<label style="display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;border:1.5px solid var(--bd);cursor:pointer;font-size:13px"><input type="radio" name="result" style="accent-color:var(--acc)">其他</label>
|
||
</div>
|
||
</div>
|
||
<!-- 患者状况 -->
|
||
<div style="margin-bottom:16px">
|
||
<label class="form-label">患者状况</label>
|
||
<textarea placeholder="请描述患者当前状况..." style="width:100%;height:80px;padding:10px 14px;border:1.5px solid var(--bd);border-radius:var(--r-sm);font-size:13px;background:var(--card);resize:none;outline:none;font-family:inherit;color:var(--tx);line-height:1.5;transition:border-color .2s" onfocus="this.style.borderColor='var(--pri)'" onblur="this.style.borderColor='var(--bd)'"></textarea>
|
||
</div>
|
||
<!-- 医嘱建议 -->
|
||
<div style="margin-bottom:16px">
|
||
<label class="form-label">医嘱建议</label>
|
||
<textarea placeholder="请输入医嘱建议..." style="width:100%;height:80px;padding:10px 14px;border:1.5px solid var(--bd);border-radius:var(--r-sm);font-size:13px;background:var(--card);resize:none;outline:none;font-family:inherit;color:var(--tx);line-height:1.5;transition:border-color .2s" onfocus="this.style.borderColor='var(--pri)'" onblur="this.style.borderColor='var(--bd)'"></textarea>
|
||
</div>
|
||
<!-- 下次随访日期 -->
|
||
<div style="margin-bottom:16px">
|
||
<label class="form-label">下次随访日期</label>
|
||
<input type="date" value="2026-05-23" class="form-input">
|
||
</div>
|
||
<!-- 附件 -->
|
||
<div style="margin-bottom:16px">
|
||
<div style="font-size:13px;font-weight:600;margin-bottom:6px">附件</div>
|
||
<div style="border:2px dashed var(--bd);border-radius:8px;padding:20px;text-align:center;cursor:pointer">
|
||
<svg width="28" height="28" fill="none" stroke="var(--tx2)" stroke-width="2" style="margin-bottom:6px"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/></svg>
|
||
<div style="font-size:12px;color:var(--tx2)">点击添加附件</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部操作栏 -->
|
||
<div style="padding:12px 16px;display:flex;gap:12px;background:var(--card);border-top:1px solid var(--bd)">
|
||
<button class="btn btn-out" style="flex:1">保存草稿</button>
|
||
<button class="btn btn-pri" style="flex:2">提交随访</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 患者端"我的"占位页 -->
|
||
<div id="page-profile" class="page" data-mode="patient">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">我的</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<div style="background:linear-gradient(135deg,var(--pri),var(--pri-d));padding:30px 16px;color:#fff;text-align:center">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" style="margin-bottom:10px"><circle cx="32" cy="32" r="32" fill="rgba(255,255,255,.2)"/><circle cx="32" cy="26" r="10" fill="rgba(255,255,255,.6)"/><ellipse cx="32" cy="48" rx="16" ry="11" fill="rgba(255,255,255,.35)"/></svg>
|
||
<div style="font-size:18px;font-weight:700">张明</div>
|
||
<div style="font-size:12px;opacity:.8;margin-top:4px">ID: HMS20260001 · 已实名</div>
|
||
</div>
|
||
<div class="card" style="margin-top:-12px;position:relative;z-index:1">
|
||
<div class="flex aic jcsb" style="padding:12px 0;border-bottom:1px solid var(--bd)"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6"/></svg>健康档案</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="flex aic jcsb" style="padding:12px 0;border-bottom:1px solid var(--bd)"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><path d="M20 8v6M23 11h-6"/></svg>家庭成员</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="flex aic jcsb" style="padding:12px 0;border-bottom:1px solid var(--bd)"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>隐私设置</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="flex aic jcsb" style="padding:12px 0"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>关于我们</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="patient">
|
||
<div class="tab-item" onclick="showPage('home','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg><span>首页</span></div>
|
||
<div class="tab-item" onclick="showPage('data','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20V10M6 20V4M18 20v-6"/></svg><span>数据</span></div>
|
||
<div class="tab-item" onclick="showPage('appointment','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>预约</span></div>
|
||
<div class="tab-item active" onclick="showPage('profile','patient')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 医护端"排班"和"我的"占位页 -->
|
||
<div id="page-schedule" class="page" data-mode="doctor">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">排班管理</div>
|
||
<div class="content" style="padding:16px;padding-bottom:80px">
|
||
<div class="card" style="text-align:center;padding:40px"><svg width="48" height="48" fill="none" stroke="var(--pri)" stroke-width="1.5" style="margin-bottom:12px"><rect x="6" y="8" width="36" height="32" rx="4"/><path d="M32 4v8M16 4v8M6 16h36"/></svg><div style="font-size:14px;color:var(--tx2)">排班管理页面</div><div style="font-size:12px;color:var(--tx2);margin-top:4px">功能开发中</div></div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="doctor">
|
||
<div class="tab-item" onclick="showPage('workspace','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg><span>工作台</span></div>
|
||
<div class="tab-item" onclick="showPage('patients','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg><span>患者</span></div>
|
||
<div class="tab-item active" onclick="showPage('schedule','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>排班</span></div>
|
||
<div class="tab-item" onclick="showPage('me','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="page-me" class="page" data-mode="doctor">
|
||
<div class="status-bar" style="background:var(--pri)"><span>9:41</span><span></span></div>
|
||
<div class="nav-bar" style="background:var(--pri)">我的</div>
|
||
<div class="content" style="padding-bottom:80px">
|
||
<div style="background:linear-gradient(135deg,var(--pri),var(--pri-d));padding:30px 16px;color:#fff;text-align:center">
|
||
<svg width="64" height="64" viewBox="0 0 64 64" style="margin-bottom:10px"><circle cx="32" cy="32" r="32" fill="rgba(255,255,255,.2)"/><circle cx="32" cy="26" r="10" fill="rgba(255,255,255,.6)"/><ellipse cx="32" cy="48" rx="16" ry="11" fill="rgba(255,255,255,.35)"/></svg>
|
||
<div style="font-size:18px;font-weight:700">王建国</div>
|
||
<div style="font-size:12px;opacity:.8;margin-top:4px">肾内科 · 主任医师</div>
|
||
</div>
|
||
<div class="card" style="margin-top:-12px;position:relative;z-index:1">
|
||
<div class="flex aic jcsb" style="padding:12px 0;border-bottom:1px solid var(--bd)"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>个人信息</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="flex aic jcsb" style="padding:12px 0;border-bottom:1px solid var(--bd)"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--pri)" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>设置</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="flex aic jcsb" style="padding:12px 0"><div class="flex aic gap8"><svg width="18" height="18" fill="none" stroke="var(--dan)" stroke-width="2"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/></svg>退出登录</div><svg width="16" height="16" fill="none" stroke="var(--tx2)" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" data-mode="doctor">
|
||
<div class="tab-item" onclick="showPage('workspace','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg><span>工作台</span></div>
|
||
<div class="tab-item" onclick="showPage('patients','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg><span>患者</span></div>
|
||
<div class="tab-item" onclick="showPage('schedule','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span>排班</span></div>
|
||
<div class="tab-item active" onclick="showPage('me','doctor')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>我的</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<script>
|
||
const patientPages=['home','data','appointment','report','consult','profile'];
|
||
const doctorPages=['workspace','patients','schedule','me'];
|
||
function showPage(id,mode){
|
||
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
|
||
const page=document.getElementById('page-'+id);
|
||
if(page){page.classList.add('active')}
|
||
// Tab bar visibility
|
||
document.querySelectorAll('.tab-bar').forEach(t=>{t.style.display=t.dataset.mode===mode?'flex':'none'});
|
||
// Update tab active states
|
||
const tabs=document.querySelectorAll('.tab-bar[data-mode="'+mode+'"] .tab-item');
|
||
const pages=mode==='patient'?patientPages:doctorPages;
|
||
tabs.forEach((t,i)=>{t.classList.toggle('active',pages[i]===id)});
|
||
}
|
||
function switchMode(mode){
|
||
document.querySelectorAll('.mode-btn').forEach(b=>b.classList.toggle('active',b.textContent.includes(mode==='patient'?'患者':'医护')));
|
||
document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
|
||
if(mode==='patient'){
|
||
document.getElementById('page-home').classList.add('active');
|
||
}else{
|
||
document.getElementById('page-workspace').classList.add('active');
|
||
}
|
||
document.querySelectorAll('.tab-bar').forEach(t=>{t.style.display=t.dataset.mode===mode?'flex':'none'});
|
||
// Set first tab active
|
||
const tabs=document.querySelectorAll('.tab-bar[data-mode="'+mode+'"] .tab-item');
|
||
tabs.forEach((t,i)=>{t.classList.toggle('active',i===0)});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|