中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!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>AI宠物兽医端</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; } .app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f5f5f5; position: relative; } .header { background: linear-gradient(135deg, #07c160, #04a556); color: white; padding: 15px 20px; display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; } .header h1 { font-size: 18px; font-weight: 600; } .content { padding-bottom: 70px; overflow-y: auto; height: calc(100vh - 60px); } .card { background: white; border-radius: 12px; margin: 12px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a; } .card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .card-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: 12px; background: #f8f8f8; cursor: pointer; transition: all 0.2s; } .card-item:active { background: #e8f8ee; transform: scale(0.96); } .card-item .icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; } .card-item span { font-size: 12px; color: #666; text-align: center; } .menu-list { display: flex; flex-direction: column; gap: 2px; } .menu-item { display: flex; align-items: center; padding: 14px 16px; background: white; cursor: pointer; transition: all 0.2s; } .menu-item:first-child { border-radius: 12px 12px 0 0; } .menu-item:last-child { border-radius: 0 0 12px 12px; } .menu-item:not(:last-child) { border-bottom: 1px solid #f0f0f0; } .menu-item:active { background: #f8f8f8; } .menu-item .icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 18px; } .menu-item .arrow { margin-left: auto; color: #ccc; } .status { padding: 2px 8px; border-radius: 10px; font-size: 12px; } .status-pending { background: #fff7e6; color: #fa8c16; } .status-progress { background: #e6f7ff; color: #1890ff; } .status-done { background: #f6ffed; color: #52c41a; } .status-urgent { background: #fff1f0; color: #ff4d4f; } .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: white; display: flex; justify-content: space-around; padding: 8px 0 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.06); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 16px; cursor: pointer; transition: all 0.2s; } .nav-item .icon { font-size: 22px; position: relative; } .nav-item span { font-size: 11px; color: #999; } .nav-item.active span { color: #07c160; } .page { display: none; } .page.active { display: block; } .back-btn { display: flex; align-items: center; gap: 4px; font-size: 15px; cursor: pointer; } .section-title { font-size: 14px; color: #999; padding: 12px 16px 8px; } .info-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .info-row:last-child { border-bottom: none; } .info-label { color: #666; font-size: 14px; } .info-value { color: #333; font-size: 14px; font-weight: 500; } .btn { display: inline-block; padding: 10px 20px; border-radius: 22px; font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; transition: all 0.2s; } .btn-primary { background: #07c160; color: white; } .btn-outline { border: 1px solid #07c160; color: #07c160; background: white; } .btn:active { opacity: 0.8; transform: scale(0.98); } .timeline { padding: 16px; } .timeline-item { display: flex; gap: 12px; padding-bottom: 20px; position: relative; } .timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 11px; top: 28px; bottom: 0; width: 2px; background: #e8e8e8; } .timeline-dot { width: 24px; height: 24px; border-radius: 50%; background: #07c160; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; flex-shrink: 0; } .timeline-dot.empty { background: #e8e8e8; } .timeline-content { flex: 1; } .timeline-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; } .timeline-time { font-size: 12px; color: #999; margin-bottom: 8px; } .timeline-desc { font-size: 13px; color: #666; background: #f8f8f8; padding: 10px; border-radius: 8px; } .progress-bar { height: 8px; background: #f0f0f0; border-radius: 4px; margin: 8px 0; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #07c160, #04a556); border-radius: 4px; transition: width 0.3s; } .stat-card { background: white; border-radius: 12px; padding: 16px; text-align: center; } .stat-value { font-size: 28px; font-weight: 700; color: #07c160; } .stat-label { font-size: 12px; color: #999; margin-top: 4px; } .badge { position: absolute; top: -4px; right: -4px; background: #ff4d4f; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; } .question-item { padding: 14px 16px; background: white; margin-bottom: 8px; border-radius: 8px; } .question-title { font-size: 14px; margin-bottom: 10px; } .question-options { display: flex; flex-wrap: wrap; gap: 8px; } .option-tag { padding: 6px 12px; border-radius: 16px; font-size: 13px; background: #f0f0f0; color: #666; } .toggle-switch { width: 50px; height: 28px; background: #dcdae0; border-radius: 14px; display: flex; align-items: center; justify-content: flex-start; padding: 2px; cursor: pointer; } .toggle-switch.on { background: #07c160; justify-content: flex-end; } .toggle-thumb { width: 24px; height: 24px; background: white; border-radius: 50%; } .alert-badge { background: #ff4d4f; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; } </style> </head> <body> <div class="app"> <div class="header"> <div class="back-btn" onclick="showPage('home');switchTab('home')"><</div> <h1 id="header-title">AI宠物兽医端</h1> </div> <div class="content"> <!-- 工作台 --> <div id="page-home" class="page active"> <div class="card" style="background: linear-gradient(135deg, #07c160, #04a556); color: white;"> <div style="display: flex; justify-content: space-between; align-items: center;"> <div><div style="font-size: 14px; opacity: 0.9;">今日问诊</div><div style="font-size: 32px; font-weight: 700; margin: 4px 0;">12</div><div style="font-size: 12px; opacity: 0.9;">较昨日+3</div></div> <div style="text-align: right;"><div style="font-size: 14px; opacity: 0.9;">待处理</div><div style="font-size: 28px; font-weight: 700; margin: 4px 0;">5</div></div> </div> </div> <div class="section-title">AI智能诊断</div> <div class="card"> <div class="card-grid"> <div class="card-item" onclick="showPage('ai-photo')"><div class="icon" style="background: #e6f7ff;">📷</div><span>拍照识别</span></div> <div class="card-item" onclick="showPage('ai-video')"><div class="icon" style="background: #fff7e6;">🎥</div><span>视频分析</span></div> <div class="card-item" onclick="showPage('ai-feces')"><div class="icon" style="background: #f6ffed;">💩</div><span>粪便检测</span></div> <div class="card-item" onclick="showPage('ai-advice')"><div class="icon" style="background: #fff1f0;">📋</div><span>诊断建议</span></div> </div> </div> <div class="section-title">我的工作</div> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="showPage('triage')"> <div class="icon" style="background: #fff1f0; color: #ff4d4f;">📋</div> <div style="flex: 1;"><div style="font-size: 14px;">问卷分诊</div><div style="font-size: 12px; color: #999;">3 待处理</div></div> <span class="status status-pending">待处理</span><span class="arrow">></span> </div> <div class="menu-item" onclick="showPage('consultation')"> <div class="icon" style="background: #e6f7ff; color: #1890ff;">💬</div> <div style="flex: 1;"><div style="font-size: 14px;">AI问诊</div><div style="font-size: 12px; color: #999;">5 条消息</div></div> <span class="status status-progress">进行中</span><span class="arrow">></span> </div> <div class="menu-item" onclick="showPage('review')"> <div class="icon" style="background: #fff7e6; color: #fa8c16;">✅</div> <div style="flex: 1;"><div style="font-size: 14px;">兽医复核</div><div style="font-size: 12px; color: #999;">2 条待复核</div></div> <span class="status status-urgent">紧急</span><span class="arrow">></span> </div> </div> </div> <div class="section-title">其他功能</div> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="showPage('weight-nutrition')"><div class="icon" style="background: #f6ffed; color: #52c41a;">⚖️</div><div style="flex: 1;"><div style="font-size: 14px;">体重营养</div><div style="font-size: 12px; color: #999;">健康追踪</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('classification')"><div class="icon" style="background: #f9f0ff; color: #722ed1;">🏷️</div><div style="flex: 1;"><div style="font-size: 14px;">分类分级</div><div style="font-size: 12px; color: #999;">病情分类</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('pet-records')"><div class="icon" style="background: #e6f7ff; color: #1890ff;">🐾</div><div style="flex: 1;"><div style="font-size: 14px;">宠物档案</div><div style="font-size: 12px; color: #999;">28 只宠物</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('icu')"><div class="icon" style="background: #fff1f0; color: #ff4d4f;">🏥</div><div style="flex: 1;"><div style="font-size: 14px;">ICU监护</div><div style="font-size: 12px; color: #999;">2 只住院中</div></div><span class="status status-urgent">危险</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('chronic')"><div class="icon" style="background: #fff7e6; color: #fa8c16;">📊</div><div style="flex: 1;"><div style="font-size: 14px;">慢性病管理</div><div style="font-size: 12px; color: #999;">6 只患病中</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('reply')"><div class="icon" style="background: #f6ffed; color: #52c41a;">📱</div><div style="flex: 1;"><div style="font-size: 14px;">问诊回复</div><div style="font-size: 12px; color: #999;">消息通知</div></div><span class="alert-badge">8</span><span class="arrow">></span></div> </div> </div> </div> <!-- 拍照识别 --> <div id="page-ai-photo" class="page"> <div class="card"> <div style="text-align: center; padding: 20px 0;"> <div style="width: 200px; height: 200px; margin: 0 auto 20px; background: #f0f0f0; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 60px;">📷</div> <div class="btn btn-primary" onclick="alert('启动相机进行拍照识别')">📷 拍照识别</div> </div> </div> <div class="section-title">诊断结果</div> <div class="card"> <div style="display: flex; gap: 12px; padding: 12px; background: #f8f8f8; border-radius: 12px;"> <div style="width: 80px; height: 80px; background: #e8e8e8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px;">🐕</div> <div style="flex: 1;"><div style="font-size: 15px; font-weight: 600;">皮肤红疹</div><div style="font-size: 12px; color: #52c41a; margin: 4px 0;">匹配度: 92%</div><div style="font-size: 12px; color: #666;">可能原因: 过敏性皮炎、真菌感染</div></div> </div> <div style="margin-top: 16px;"><div style="font-size: 13px; color: #666; margin-bottom: 8px;">建议检查项目</div><div style="display: flex; flex-wrap: wrap; gap: 8px;"><span class="option-tag">皮肤刮片检查</span><span class="option-tag">血液常规</span><span class="option-tag">过敏原测试</span></div></div> </div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">🐾 历史记录</div> <div class="timeline"> <div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">首次发现皮肤异常</div><div class="timeline-time">2024-01-15 10:30</div><div class="timeline-desc">主人发现宠物背部有红疹，伴随便秘</div></div></div> <div class="timeline-item"><div class="timeline-dot empty">2</div><div class="timeline-content"><div class="timeline-title">拍照识别诊断</div><div class="timeline-time">2024-01-15 11:00</div><div class="timeline-desc">AI识别为过敏性皮炎，建议进一步检查</div></div></div> </div> </div> </div> <!-- 视频分析 --> <div id="page-ai-video" class="page"> <div class="card"> <div style="text-align: center; padding: 20px 0;"> <div style="width: 200px; height: 200px; margin: 0 auto 20px; background: #f0f0f0; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 60px;">🎥</div> <div class="btn btn-primary" onclick="alert('启动摄像头进行视频分析')">🎥 录制视频分析</div> </div> </div> <div class="section-title">分析结果</div> <div class="card"> <div style="display: flex; gap: 12px; padding: 12px; background: #f8f8f8; border-radius: 12px;"> <div style="width: 80px; height: 80px; background: #e8e8e8; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 36px;">🐱</div> <div style="flex: 1;"><div style="font-size: 15px; font-weight: 600;">步态异常</div><div style="font-size: 12px; color: #fa8c16; margin: 4px 0;">匹配度: 87%</div><div style="font-size: 12px; color: #666;">可能原因: 关节问题、肌肉损伤</div></div> </div> <div style="margin-top: 16px;"><div style="font-size: 13px; color: #666; margin-bottom: 8px;">运动分析数据</div><div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;"><div class="stat-card"><div class="stat-value">0.8</div><div class="stat-label">步幅(m)</div></div><div class="stat-card"><div class="stat-value">12°</div><div class="stat-label">抬腿角度</div></div><div class="stat-card"><div class="stat-value">2.3s</div><div class="stat-label">支撑相</div></div><div class="stat-card"><div class="stat-value">0.4s</div><div class="stat-label">摆动相</div></div></div></div> </div> </div> <!-- 粪便检测 --> <div id="page-ai-feces" class="page"> <div class="card"> <div style="text-align: center; padding: 20px 0;"> <div style="width: 200px; height: 200px; margin: 0 auto 20px; background: #f0f0f0; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 60px;">💩</div> <div class="btn btn-primary" onclick="alert('启动相机拍摄粪便样本')">📷 拍摄样本</div> </div> </div> <div class="section-title">检测结果</div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">粪便健康评分</div> <div style="text-align: center;"><div style="font-size: 48px; font-weight: 700; color: #fa8c16;">65</div><div style="font-size: 12px; color: #666;">分 (满分100)</div><div class="progress-bar" style="margin-top: 12px;"><div class="progress-fill" style="width: 65%;"></div></div><div style="font-size: 12px; color: #fa8c16; margin-top: 4px;">需要注意饮食调理</div></div> </div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">检测项目</div> <div class="info-row"><span class="info-label">颜色</span><span class="info-value" style="color: #52c41a;">正常</span></div> <div class="info-row"><span class="info-label">形态</span><span class="info-value" style="color: #fa8c16;">偏软</span></div> <div class="info-row"><span class="info-label">寄生虫</span><span class="info-value" style="color: #52c41a;">未检出</span></div> <div class="info-row"><span class="info-label">消化率</span><span class="info-value">78%</span></div> </div> </div> <!-- 诊断建议 --> <div id="page-ai-advice" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">📋 AI诊断建议</div> <div style="padding: 12px; background: #f8f8f8; border-radius: 12px; margin-bottom: 12px;"><div style="font-size: 13px; color: #666; margin-bottom: 6px;">宠物信息</div><div style="font-size: 14px; font-weight: 500;">🐕 金毛犬 "旺财"</div><div style="font-size: 12px; color: #999; margin-top: 4px;">3岁 | 雄性 | 32kg</div></div> <div class="info-row"><span class="info-label">AI诊断</span><span class="info-value">过敏性皮炎</span></div> <div class="info-row"><span class="info-label">匹配度</span><span class="info-value" style="color: #52c41a;">92%</span></div> <div class="info-row"><span class="info-label">病情等级</span><span class="info-value"><span class="status status-progress">中度</span></span></div> </div> <div class="section-title">治疗方案</div> <div class="card"> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;"><div style="width: 40px; height: 40px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">💊</div><div><div style="font-size: 14px; font-weight: 500;">药物治疗</div><div style="font-size: 12px; color: #666;">抗过敏药物 + 皮肤软膏</div></div></div> <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🍖</div><div><div style="font-size: 14px; font-weight: 500;">饮食调理</div><div style="font-size: 12px; color: #666;">低过敏处方粮</div></div></div> <div style="display: flex; align-items: center; gap: 12px;"><div style="width: 40px; height: 40px; background: #fff7e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🧴</div><div><div style="font-size: 14px; font-weight: 500;">日常护理</div><div style="font-size: 12px; color: #666;">定期药浴、保持皮肤干燥</div></div></div> </div> <div class="card"><div class="btn btn-primary" style="width: 100%;" onclick="showPage('ai-medication')">查看用药方案</div></div> </div> <!-- 用药方案 --> <div id="page-ai-medication" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">💊 用药方案详情</div> <div style="padding: 12px; background: #f8f8f8; border-radius: 12px; margin-bottom: 16px;"><div style="font-size: 13px; color: #666;">宠物信息</div><div style="font-size: 14px; font-weight: 500; margin-top: 4px;">🐕 金毛犬 "旺财" | 3岁 | 32kg</div></div> <div style="font-size: 13px; color: #666; margin-bottom: 8px;">病情诊断：过敏性皮炎（中度）</div> <div style="font-size: 13px; color: #666; margin-bottom: 16px;">建议疗程：14天</div> <div style="border-top: 1px solid #f0f0f0; padding-top: 12px;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;"><div style="font-size: 14px; font-weight: 500;">1. 口服抗组胺药</div><span class="status status-progress">进行中</span></div> <div style="font-size: 13px; color: #666; margin-bottom: 12px;">剂量：每日2次，每次1片</div> <div style="font-size: 13px; color: #666;">注意事项：饭后服用</div> </div> </div> <div class="card"><div class="btn btn-outline" style="width: 100%;" onclick="alert('生成用药方案PDF')">📄 导出用药方案</div></div> </div> <!-- 问卷分诊 --> <div id="page-triage" class="page"> <div class="card"><div style="display: flex; justify-content: space-between; align-items: center;"><div><div style="font-size: 14px; color: #666;">待分诊</div><div style="font-size: 24px; font-weight: 700; color: #ff4d4f;">3</div></div><div class="btn btn-primary" style="padding: 8px 16px;" onclick="showPage('triage-detail')">📋 新问卷</div></div></div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">📋 待处理问卷</div> <div class="menu-list"> <div class="menu-item" onclick="showPage('triage-detail')"><div style="width: 40px; height: 40px; background: #fff1f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">金毛犬-皮肤问题</div><div style="font-size: 12px; color: #999;">张先生 | 10分钟前</div></div><span class="status status-urgent">紧急</span></div> <div class="menu-item" onclick="showPage('triage-detail')"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px;">英短猫-消化问题</div><div style="font-size: 12px; color: #999;">李女士 | 30分钟前</div></div><span class="status status-pending">普通</span></div> </div> </div> </div> <!-- 问卷详情 --> <div id="page-triage-detail" class="page"> <div class="card"> <div style="display: flex; gap: 12px; margin-bottom: 16px;"> <div style="width: 60px; height: 60px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px;">🐕</div> <div><div style="font-size: 16px; font-weight: 600;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #999; margin-top: 4px;">3岁 | 雄性 | 张先生</div><span class="status status-urgent" style="margin-top: 6px;">紧急</span></div> </div> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">主诉症状：皮肤红疹、瘙痒</div> <div style="font-size: 13px; color: #666; padding: 10px; background: #f8f8f8; border-radius: 8px;">宠物背部出现红色疹子，持续抓挠已有3天，食欲正常，精神状态良好。</div> </div> <div class="section-title">问卷题目</div> <div class="card"> <div class="question-item"><div class="question-title">1. 症状持续多长时间了？</div><div class="question-options"><span class="option-tag">1-3天</span><span class="option-tag" style="background: #07c160; color: white;">4-7天</span><span class="option-tag">1-2周</span><span class="option-tag">2周以上</span></div></div> <div class="question-item"><div class="question-title">2. 是否有脱毛现象？</div><div class="question-options"><span class="option-tag" style="background: #07c160; color: white;">是</span><span class="option-tag">否</span></div></div> </div> <div class="card"><div style="margin-bottom: 12px;"><div style="font-size: 14px; color: #666;">AI分诊结果</div><div style="font-size: 20px; font-weight: 600; color: #fa8c16; margin-top: 4px;">中度皮肤炎症</div></div><div class="btn btn-primary" style="width: 100%;" onclick="alert('提交分诊，进入问诊流程')">提交分诊</div></div> </div> <!-- AI问诊 --> <div id="page-consultation" class="page"> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="showPage('consultation-detail')"><div style="width: 44px; height: 44px; background: #fff1f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px; display: flex; align-items: center; gap: 8px;">金毛犬-皮肤问题 <span class="status status-progress">进行中</span></div><div style="font-size: 12px; color: #999; margin-top: 4px;">张先生 | 最后活跃:刚刚</div></div></div> <div class="menu-item" onclick="showPage('consultation-detail')"><div style="width: 44px; height: 44px; background: #f6ffed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px; display: flex; align-items: center; gap: 8px;">英短猫-消化问题 <span class="status status-pending">待回复</span></div><div style="font-size: 12px; color: #999; margin-top: 4px;">李女士 | 最后活跃:10分钟前</div></div></div> </div> </div> </div> <!-- 问诊详情 --> <div id="page-consultation-detail" class="page"> <div class="card"> <div style="display: flex; gap: 12px; margin-bottom: 16px;"><div style="width: 50px; height: 50px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px;">🐕</div><div><div style="font-size: 15px; font-weight: 600;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #999; margin-top: 2px;">张先生 | 3岁 | 雄性</div></div></div> <div class="timeline"> <div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">主人发起问诊</div><div class="timeline-time">10:30</div><div class="timeline-desc">宠物背部出现红疹，想了解如何处理</div></div></div> <div class="timeline-item"><div class="timeline-dot">2</div><div class="timeline-content"><div class="timeline-title">AI智能分析</div><div class="timeline-time">10:30</div><div class="timeline-desc">初步判断为过敏性皮炎，建议进一步问诊确认</div></div></div> <div class="timeline-item"><div class="timeline-dot">3</div><div class="timeline-content"><div class="timeline-title">问诊进行中</div><div class="timeline-time">10:35</div><div class="timeline-desc">兽医待复核，请耐心等待...</div></div></div> </div> </div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">💬 问诊对话</div><div style="padding: 12px; background: #f0f5ff; border-radius: 12px 12px 12px 0; margin-bottom: 10px;"><div style="font-size: 12px; color: #999; margin-bottom: 4px;">主人 10:30</div><div style="font-size: 14px;">宠物背部有红疹，已经3天了，这是什么情况？</div></div><div style="padding: 12px; background: #f6ffed; border-radius: 12px 12px 0 12px; margin-left: 30px;"><div style="font-size: 12px; color: #52c41a; margin-bottom: 4px;">AI回复 10:30</div><div style="font-size: 14px;">根据描述，可能是过敏性皮炎。请问宠物是否有抓挠？脱毛情况如何？</div></div></div> <div class="card"><div style="display: flex; gap: 10px;"><input type="text" placeholder="输入回复..." style="flex: 1; padding: 12px 16px; border: 1px solid #e8e8e8; border-radius: 24px; font-size: 14px; outline: none;"><div class="btn btn-primary" style="padding: 10px 20px;" onclick="alert('发送消息')">发送</div></div></div> </div> <!-- 兽医复核 --> <div id="page-review" class="page"> <div class="card"><div style="display: flex; justify-content: space-between; align-items: center;"><div><div style="font-size: 14px; color: #666;">待复核</div><div style="font-size: 24px; font-weight: 700; color: #ff4d4f;">2</div></div></div></div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">✅ 待复核诊断</div> <div class="menu-list"> <div class="menu-item" onclick="showPage('review-detail')"><div style="width: 40px; height: 40px; background: #fff1f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">金毛犬-皮肤问题</div><div style="font-size: 12px; color: #999;">AI诊断: 过敏性皮炎</div></div><span class="status status-urgent">紧急</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('review-detail')"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px;">英短猫-消化问题</div><div style="font-size: 12px; color: #999;">AI诊断: 肠胃炎</div></div><span class="status status-progress">普通</span><span class="arrow">></span></div> </div> </div> </div> <!-- 复核详情 --> <div id="page-review-detail" class="page"> <div class="card"> <div style="display: flex; gap: 12px; margin-bottom: 16px;"><div style="width: 60px; height: 60px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px;">🐕</div><div><div style="font-size: 16px; font-weight: 600;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #999; margin-top: 4px;">3岁 | 雄性 | 32kg</div></div></div> <div class="info-row"><span class="info-label">问诊主人</span><span class="info-value">张先生</span></div> <div class="info-row"><span class="info-label">主诉症状</span><span class="info-value">皮肤红疹、瘙痒</span></div> </div> <div class="section-title">AI诊断结果</div> <div class="card"><div style="padding: 12px; background: #f8f8f8; border-radius: 12px;"><div style="font-size: 14px; font-weight: 500;">过敏性皮炎</div><div style="font-size: 12px; color: #52c41a; margin-top: 4px;">匹配度: 92%</div></div></div> <div class="section-title">复核操作</div> <div class="card"> <div style="display: flex; gap: 12px; margin-bottom: 12px;"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">✅</div><div style="flex: 1;"><div style="font-size: 14px; font-weight: 500;">确认诊断</div><div style="font-size: 12px; color: #666;">批准AI诊断，开具处方</div></div><div class="btn btn-primary" style="padding: 8px 16px;" onclick="alert('确认诊断成功')">确认</div></div> <div style="display: flex; gap: 12px; margin-bottom: 12px;"><div style="width: 40px; height: 40px; background: #fff7e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🔄</div><div style="flex: 1;"><div style="font-size: 14px; font-weight: 500;">修改诊断</div><div style="font-size: 12px; color: #666;">修正AI诊断结果</div></div><div class="btn btn-outline" style="padding: 8px 16px;" onclick="alert('请输入修改后的诊断')">修改</div></div> <div style="display: flex; gap: 12px;"><div style="width: 40px; height: 40px; background: #fff1f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">❌</div><div style="flex: 1;"><div style="font-size: 14px; font-weight: 500;">驳回诊断</div><div style="font-size: 12px; color: #666;">拒绝AI诊断，要求重新分析</div></div><div class="btn btn-outline" style="padding: 8px 16px; color: #ff4d4f; border-color: #ff4d4f;" onclick="alert('请输入驳回原因')">驳回</div></div> </div> </div> <!-- 体重营养 --> <div id="page-weight-nutrition" class="page"> <div class="card" style="background: linear-gradient(135deg, #52c41a, #389e0d); color: white;"> <div style="text-align: center;"><div style="font-size: 14px; opacity: 0.9;">当前体重</div><div style="font-size: 48px; font-weight: 700; margin: 8px 0;">32.5</div><div style="font-size: 14px; opacity: 0.9;">kg</div></div> <div style="display: flex; justify-content: space-around; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.2);"><div style="text-align: center;"><div style="font-size: 12px; opacity: 0.8;">理想体重</div><div style="font-size: 18px; font-weight: 600;">30kg</div></div><div style="text-align: center;"><div style="font-size: 12px; opacity: 0.8;">体型评分</div><div style="font-size: 18px; font-weight: 600;">4/5</div></div></div> </div> <div class="section-title">营养建议</div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">🍖 每日推荐摄入</div><div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;"><div class="stat-card"><div class="stat-value" style="color: #ff4d4f;">680</div><div class="stat-label">卡路里(kcal)</div></div><div class="stat-card"><div class="stat-value" style="color: #1890ff;">45g</div><div class="stat-label">蛋白质</div></div><div class="stat-card"><div class="stat-value" style="color: #fa8c16;">18g</div><div class="stat-label">脂肪</div></div></div></div> </div> <!-- 分类分级 --> <div id="page-classification" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">🏷️ 病情分类</div> <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;"><div style="padding: 12px; background: #fff1f0; border-radius: 8px; text-align: center;"><div style="font-size: 24px;">🐕</div><div style="font-size: 13px; color: #ff4d4f;">犬类疾病</div><div style="font-size: 18px; font-weight: 600; color: #ff4d4f;">15</div></div><div style="padding: 12px; background: #f6ffed; border-radius: 8px; text-align: center;"><div style="font-size: 24px;">🐱</div><div style="font-size: 13px; color: #52c41a;">猫类疾病</div><div style="font-size: 18px; font-weight: 600; color: #52c41a;">12</div></div><div style="padding: 12px; background: #e6f7ff; border-radius: 8px; text-align: center;"><div style="font-size: 24px;">🐰</div><div style="font-size: 13px; color: #1890ff;">兔类疾病</div><div style="font-size: 18px; font-weight: 600; color: #1890ff;">5</div></div><div style="padding: 12px; background: #fff7e6; border-radius: 8px; text-align: center;"><div style="font-size: 24px;">🦜</div><div style="font-size: 13px; color: #fa8c16;">鸟类疾病</div><div style="font-size: 18px; font-weight: 600; color: #fa8c16;">3</div></div></div> </div> <div class="section-title">病情严重程度分级</div> <div class="card"> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;"><div style="width: 8px; height: 40px; background: #52c41a; border-radius: 4px;"></div><div><div style="font-size: 14px; font-weight: 500;">轻度</div><div style="font-size: 12px; color: #666;">可在家观察治疗</div></div></div> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;"><div style="width: 8px; height: 40px; background: #fa8c16; border-radius: 4px;"></div><div><div style="font-size: 14px; font-weight: 500;">中度</div><div style="font-size: 12px; color: #666;">需要门诊治疗</div></div></div> <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;"><div style="width: 8px; height: 40px; background: #ff4d4f; border-radius: 4px;"></div><div><div style="font-size: 14px; font-weight: 500;">重度</div><div style="font-size: 12px; color: #666;">需要住院治疗</div></div></div> <div style="display: flex; align-items: center; gap: 10px;"><div style="width: 8px; height: 40px; background: #722ed1; border-radius: 4px;"></div><div><div style="font-size: 14px; font-weight: 500;">危重</div><div style="font-size: 12px; color: #666;">需要ICU监护</div></div></div> </div> </div> <!-- 宠物档案 --> <div id="page-pet-records" class="page"> <div class="card"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;"><div><div style="font-size: 14px; color: #666;">宠物总数</div><div style="font-size: 24px; font-weight: 700;">28</div></div><div class="btn btn-primary" style="padding: 8px 16px;" onclick="alert('添加新宠物档案')">➕ 添加</div></div></div> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">🐾 我的宠物</div> <div class="menu-list"> <div class="menu-item" onclick="showPage('pet-detail')"><div style="width: 44px; height: 44px; background: #fff1f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #999;">3岁 | 雄性 | 32kg</div></div><span class="status status-done">健康</span><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('pet-detail')"><div style="width: 44px; height: 44px; background: #f6ffed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px;">英短猫 "咪咪"</div><div style="font-size: 12px; color: #999;">2岁 | 雌性 | 4kg</div></div><span class="status status-progress">观察中</span><span class="arrow">></span></div> </div> </div> </div> <!-- 宠物详情 --> <div id="page-pet-detail" class="page"> <div class="card" style="text-align: center; padding: 24px;"><div style="width: 80px; height: 80px; margin: 0 auto 16px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px;">🐕</div><div style="font-size: 18px; font-weight: 600;">金毛犬 "旺财"</div><div style="font-size: 13px; color: #999; margin-top: 4px;">3岁 | 雄性 | 已绝育</div><div style="margin-top: 12px;"><span class="status status-done" style="display: inline-block;">健康</span></div></div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">📋 基本信息</div><div class="info-row"><span class="info-label">品种</span><span class="info-value">金毛寻回犬</span></div><div class="info-row"><span class="info-label">体重</span><span class="info-value">32kg</span></div><div class="info-row"><span class="info-label">生日</span><span class="info-value">2021-03-15</span></div><div class="info-row"><span class="info-label">主人</span><span class="info-value">张先生</span></div><div class="info-row"><span class="info-label">联系电话</span><span class="info-value">138****1234</span></div></div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">📝 病史记录</div><div class="timeline"><div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">过敏性皮炎</div><div class="timeline-time">2024-01-15</div><div class="timeline-desc">皮肤红疹、瘙痒，正在治疗中</div></div></div><div class="timeline-item"><div class="timeline-dot empty">2</div><div class="timeline-content"><div class="timeline-title">疫苗接种</div><div class="timeline-time">2023-06-10</div><div class="timeline-desc">狂犬疫苗、犬瘟热疫苗加强针</div></div></div></div></div> </div> <!-- ICU监护 --> <div id="page-icu" class="page"> <div class="card" style="background: linear-gradient(135deg, #ff4d4f, #cf1322); color: white;"><div style="display: flex; justify-content: space-between; align-items: center;"><div><div style="font-size: 14px; opacity: 0.9;">ICU住院</div><div style="font-size: 28px; font-weight: 700; margin: 4px 0;">2</div><div style="font-size: 12px; opacity: 0.9;">只宠物</div></div><div style="text-align: right;"><div style="font-size: 14px; opacity: 0.9;">危险预警</div><div style="font-size: 28px; font-weight: 700; margin: 4px 0;">1</div><div style="font-size: 12px; opacity: 0.9;">条</div></div></div></div> <div class="section-title">ICU病房</div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">🏥 住院宠物</div><div class="menu-list"><div class="menu-item" onclick="showPage('icu-detail')"><div style="width: 44px; height: 44px; background: #fff1f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #ff4d4f;">⚠️ 体温异常</div></div><span class="status status-urgent">危险</span><span class="arrow">></span></div></div></div> </div> <!-- ICU详情 --> <div id="page-icu-detail" class="page"> <div class="card" style="text-align: center; padding: 20px;"><div style="width: 70px; height: 70px; margin: 0 auto 12px; background: #fff1f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px;">🐕</div><div style="font-size: 17px; font-weight: 600;">金毛犬 "旺财"</div><div style="margin-top: 8px;"><span class="status status-urgent">危险</span></div></div> <div class="section-title">生命体征</div> <div class="card"><div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;"><div class="stat-card"><div style="font-size: 20px;">🌡️</div><div class="stat-value" style="color: #ff4d4f;">39.8°C</div><div class="stat-label">体温 (偏高)</div></div><div class="stat-card"><div style="font-size: 20px;">💓</div><div class="stat-value">120</div><div class="stat-label">心率 (次/分)</div></div><div class="stat-card"><div style="font-size: 20px;">🫁</div><div class="stat-value">28</div><div class="stat-label">呼吸 (次/分)</div></div><div class="stat-card"><div style="font-size: 20px;">🩸</div><div class="stat-value">95/60</div><div class="stat-label">血压 (mmHg)</div></div></div></div> <div class="section-title">治疗记录</div> <div class="card"><div class="timeline"><div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">入院</div><div class="timeline-time">2024-01-15 08:00</div><div class="timeline-desc">因高烧入院，开始退烧治疗</div></div></div><div class="timeline-item"><div class="timeline-dot empty">2</div><div class="timeline-content"><div class="timeline-title">用药</div><div class="timeline-time">2024-01-15 09:00</div><div class="timeline-desc">静脉注射退烧药+抗生素</div></div></div></div></div> </div> <!-- 慢性病管理 --> <div id="page-chronic" class="page"> <div class="card"><div style="display: flex; justify-content: space-between; align-items: center;"><div><div style="font-size: 14px; color: #666;">慢性病宠物</div><div style="font-size: 24px; font-weight: 700;">6</div></div><div class="btn btn-primary" style="padding: 8px 16px;" onclick="showPage('chronic-detail')">➕ 添加</div></div></div> <div class="card"><div class="menu-list"><div class="menu-item" onclick="showPage('chronic-detail')"><div style="width: 40px; height: 40px; background: #fff7e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">金毛犬 "旺财"</div><div style="font-size: 12px; color: #666;">糖尿病 | 确诊: 2023-06</div></div><span class="arrow">></span></div><div class="menu-item" onclick="showPage('chronic-detail')"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px;">英短猫 "咪咪"</div><div style="font-size: 12px; color: #666;">慢性肾病 | 确诊: 2023-09</div></div><span class="arrow">></span></div></div></div> </div> <!-- 慢性病详情 --> <div id="page-chronic-detail" class="page"> <div class="card" style="text-align: center; padding: 20px;"><div style="width: 70px; height: 70px; margin: 0 auto 12px; background: #f0f0f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px;">🐕</div><div style="font-size: 17px; font-weight: 600;">金毛犬 "旺财"</div><div style="font-size: 13px; color: #fa8c16; margin-top: 4px;">糖尿病</div></div> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">📊 病情追踪</div><div style="font-size: 13px; color: #666; margin-bottom: 10px;">血糖控制</div><div class="progress-bar" style="height: 12px;"><div class="progress-fill" style="width: 75%;"></div></div><div style="display: flex; justify-content: space-between; font-size: 11px; color: #999; margin-top: 4px;"><span>控制良好</span><span>75%</span></div></div> <div class="section-title">用药记录</div> <div class="card"><div class="timeline"><div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">胰岛素注射</div><div class="timeline-time">2024-01-15 08:00</div><div class="timeline-desc">剂量: 8单位 | 血糖值: 8.5mmol/L</div></div></div><div class="timeline-item"><div class="timeline-dot empty">2</div><div class="timeline-content"><div class="timeline-title">血糖检测</div><div class="timeline-time">2024-01-14 18:00</div><div class="timeline-desc">空腹血糖: 6.2mmol/L | 正常</div></div></div></div></div> </div> <!-- 问诊回复 --> <div id="page-reply" class="page"> <div class="card"><div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">💬 未读消息</div><div class="menu-list"><div class="menu-item"><div style="width: 44px; height: 44px; background: #fff1f0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐕</div><div style="flex: 1;"><div style="font-size: 14px;">张先生</div><div style="font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">请问今天可以带宠物来复诊吗？</div></div><div style="text-align: right;"><div style="font-size: 11px; color: #999;">10分钟前</div><div style="width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; margin-top: 4px; margin-left: auto;"></div></div></div><div class="menu-item"><div style="width: 44px; height: 44px; background: #f6ffed; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px;">🐱</div><div style="flex: 1;"><div style="font-size: 14px;">李女士</div><div style="font-size: 12px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">用药后呕吐，是正常反应吗？</div></div><div style="text-align: right;"><div style="font-size: 11px; color: #999;">30分钟前</div><div style="width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; margin-top: 4px; margin-left: auto;"></div></div></div></div></div> </div> <!-- 个人中心 --> <div id="page-profile" class="page"> <div class="card" style="text-align: center; padding: 24px;"><div style="width: 80px; height: 80px; margin: 0 auto 16px; background: linear-gradient(135deg, #07c160, #04a556); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 36px;">👨⚕️</div><div style="font-size: 18px; font-weight: 600;">李医生</div><div style="font-size: 13px; color: #999; margin-top: 4px;">ID: VET001 | 主治医师</div></div> <div class="section-title">账号信息</div> <div class="card"><div class="info-row"><span class="info-label">手机号</span><span class="info-value">138****5678</span></div><div class="info-row"><span class="info-label">邮箱</span><span class="info-value">li***@vet.com</span></div><div class="info-row"><span class="info-label">所属医院</span><span class="info-value">阳光宠物医院</span></div></div> <div class="section-title">其他设置</div> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="showPage('profile-edit')"><div class="icon" style="background: #e6f7ff; color: #1890ff;">✏️</div><div style="flex: 1; font-size: 14px;">修改个人信息</div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('profile-notifications')"><div class="icon" style="background: #fff1f0; color: #ff4d4f;">🔔</div><div style="flex: 1; font-size: 14px;">消息通知</div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('profile-privacy')"><div class="icon" style="background: #f6ffed; color: #52c41a;">🔒</div><div style="flex: 1; font-size: 14px;">隐私设置</div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('profile-help')"><div class="icon" style="background: #fff7e6; color: #fa8c16;">❓</div><div style="flex: 1; font-size: 14px;">帮助中心</div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('profile-logout')"><div class="icon" style="background: #f0f0f0; color: #666;">🚪</div><div style="flex: 1; font-size: 14px;">退出登录</div><span class="arrow">></span></div> </div> </div> </div> <!-- 修改个人信息 --> <div id="page-profile-edit" class="page"> <div class="card"><div style="text-align: center; padding: 20px 0;"><div style="width: 80px; height: 80px; margin: 0 auto 16px; background: linear-gradient(135deg, #07c160, #04a556); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 36px;">👨⚕️</div><div class="btn btn-outline" style="padding: 6px 16px; font-size: 13px;" onclick="alert('选择本地图片作为头像')">📷 更换头像</div></div></div> <div class="section-title">基本信息</div> <div class="card"><div class="info-row"><span class="info-label">姓名</span><span class="info-value">李医生</span></div><div class="info-row"><span class="info-label">性别</span><span class="info-value">男</span></div><div class="info-row"><span class="info-label">生日</span><span class="info-value">1985-06-15</span></div><div class="info-row"><span class="info-label">工号</span><span class="info-value">VET001</span></div></div> <div class="section-title">联系方式</div> <div class="card"><div class="info-row"><span class="info-label">手机号</span><span class="info-value" style="color: #1890ff;">138****5678 <span class="btn" style="padding: 2px 8px; font-size: 11px; display: inline-block;">修改</span></span></div><div class="info-row"><span class="info-label">邮箱</span><span class="info-value">li***@vet.com <span class="btn" style="padding: 2px 8px; font-size: 11px; display: inline-block;">修改</span></span></div></div> <div class="section-title">职业信息</div> <div class="card"><div class="info-row"><span class="info-label">所属医院</span><span class="info-value">阳光宠物医院</span></div><div class="info-row"><span class="info-label">科室</span><span class="info-value">全科</span></div><div class="info-row"><span class="info-label">职称</span><span class="info-value">主治医师</span></div><div class="info-row"><span class="info-label">擅长领域</span><span class="info-value">内科、外科</span></div></div> <div class="card"><div class="btn btn-primary" style="width: 100%;" onclick="alert('保存成功');showPage('profile')">💾 保存修改</div></div> </div> <!-- 消息通知 --> <div id="page-profile-notifications" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">🔔 通知设置</div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div><div style="font-size: 14px;">新问诊提醒</div><div style="font-size: 12px; color: #999;">当有新用户发起问诊时通知</div></div><div class="toggle-switch on" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div><div style="font-size: 14px;">复核超时提醒</div><div style="font-size: 12px; color: #999;">兽医复核超时时提醒</div></div><div class="toggle-switch on" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div><div style="font-size: 14px;">ICU预警通知</div><div style="font-size: 12px; color: #999;">宠物生命体征异常时提醒</div></div><div class="toggle-switch on" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;"><div><div style="font-size: 14px;">系统公告</div><div style="font-size: 12px; color: #999;">系统更新、维护通知</div></div><div class="toggle-switch" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> </div> <div class="section-title">提醒方式</div> <div class="card"> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div style="display: flex; align-items: center; gap: 10px;"><div style="font-size: 20px;">🔔</div><div><div style="font-size: 14px;">声音提醒</div><div style="font-size: 12px; color: #999;">收到通知时播放声音</div></div></div><div class="toggle-switch on" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;"><div style="display: flex; align-items: center; gap: 10px;"><div style="font-size: 20px;">📳</div><div><div style="font-size: 14px;">震动提醒</div><div style="font-size: 12px; color: #999;">收到通知时震动</div></div></div><div class="toggle-switch" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> </div> </div> <!-- 隐私设置 --> <div id="page-profile-privacy" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 16px;">🔒 隐私设置</div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div><div style="font-size: 14px;">公开问诊记录</div><div style="font-size: 12px; color: #999;">允许其他用户查看问诊记录</div></div><div class="toggle-switch" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0;"><div><div style="font-size: 14px;">允许推荐问诊</div><div style="font-size: 12px; color: #999;">接收系统智能推荐问诊</div></div><div class="toggle-switch on" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 0;"><div><div style="font-size: 14px;">位置信息</div><div style="font-size: 12px; color: #999;">用于附近宠物医院推荐</div></div><div class="toggle-switch" onclick="this.classList.toggle('on')"><div class="toggle-thumb"></div></div></div> </div> <div class="section-title">账号安全</div> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="alert('请输入原密码')"><div class="icon" style="background: #fff7e6; color: #fa8c16;">🔑</div><div style="flex: 1; font-size: 14px;">修改登录密码</div><span class="arrow">></span></div> <div class="menu-item" onclick="alert('请选择验证方式')"><div class="icon" style="background: #e6f7ff; color: #1890ff;">📱</div><div style="flex: 1; font-size: 14px;">绑定手机号</div><span class="arrow">></span></div> <div class="menu-item" onclick="alert('请选择验证方式')"><div class="icon" style="background: #f6ffed; color: #52c41a;">✉️</div><div style="flex: 1; font-size: 14px;">绑定邮箱</div><span class="arrow">></span></div> <div class="menu-item" onclick="alert('请输入设备名称')"><div class="icon" style="background: #fff1f0; color: #ff4d4f;">🤖</div><div style="flex: 1; font-size: 14px;">登录设备管理</div><span class="arrow">></span></div> </div> </div> <div class="section-title">数据管理</div> <div class="card"> <div class="menu-list"> <div class="menu-item" onclick="alert('正在导出问诊数据...')"><div class="icon" style="background: #e6f7ff; color: #1890ff;">📤</div><div style="flex: 1; font-size: 14px;">导出问诊数据</div><span class="arrow">></span></div> <div class="menu-item" onclick="alert('确定要删除账号吗？此操作不可恢复')"><div class="icon" style="background: #fff1f0; color: #ff4d4f;">🗑️</div><div style="flex: 1; font-size: 14px; color: #ff4d4f;">删除账号</div><span class="arrow">></span></div> </div> </div> </div> <!-- 帮助中心 --> <div id="page-profile-help" class="page"> <div class="card"> <div style="font-size: 14px; font-weight: 600; margin-bottom: 12px;">❓ 常见问题</div> <div class="menu-list"> <div class="menu-item" onclick="showPage('help-detail-1')"><div style="width: 40px; height: 40px; background: #e6f7ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">📋</div><div style="flex: 1;"><div style="font-size: 14px;">如何发起问诊？</div><div style="font-size: 12px; color: #999;">3个步骤即可完成</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('help-detail-2')"><div style="width: 40px; height: 40px; background: #f6ffed; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">💊</div><div style="flex: 1;"><div style="font-size: 14px;">如何开具处方？</div><div style="font-size: 12px; color: #999;">在线处方开具流程</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('help-detail-3')"><div style="width: 40px; height: 40px; background: #fff7e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">📊</div><div style="flex: 1;"><div style="font-size: 14px;">如何查看问诊统计？</div><div style="font-size: 12px; color: #999;">数据统计功能介绍</div></div><span class="arrow">></span></div> <div class="menu-item" onclick="showPage('help-detail-4')"><div style="width: 40px; height: 40px; background: #fff1f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🤖</div><div style="flex: 1;"><div style="font-size: 14px;">AI诊断准确吗？</div><div style="font-size: 12px; color: #999;">AI诊断辅助说明</div></div><span class="arrow">></span></div> </div> </div> <div class="section-title">视频教程</div> <div class="card"><div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;"><div style="background: #f8f8f8; border-radius: 12px; overflow: hidden;"><div style="aspect-ratio: 16/9; background: linear-gradient(135deg, #07c160, #04a556); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">▶️</div><div style="padding: 10px;"><div style="font-size: 13px; font-weight: 500;">新手入门指南</div><div style="font-size: 11px; color: #999; margin-top: 2px;">5分钟</div></div></div><div style="background: #f8f8f8; border-radius: 12px; overflow: hidden;"><div style="aspect-ratio: 16/9; background: linear-gradient(135deg, #1890ff, #096dd9); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px;">▶️</div><div style="padding: 10px;"><div style="font-size: 13px; font-weight: 500;">AI诊断教程</div><div style="font-size: 11px; color: #999; margin-top: 2px;">8分钟</div></div></div></div></div> <div class="section-title">联系客服</div> <div class="card"><div class="menu-list"><div class="menu-item" onclick="alert('正在拨打客服热线：400-xxx-xxxx')"><div class="icon" style="background: #f6ffed; color: #52c41a;">📞</div><div style="flex: 1; font-size: 14px;">客服热线</div><div style="font-size: 13px; color: #07c160;">400-xxx-xxxx</div></div><div class="menu-item" onclick="alert('正在打开在线客服')"><div class="icon" style="background: #e6f7ff; color: #1890ff;">💬</div><div style="flex: 1; font-size: 14px;">在线客服</div><div style="font-size: 12px; color: #999;">工作日 9:00-18:00</div></div></div></div> </div> <!-- 帮助详情1 --> <div id="page-help-detail-1" class="page"> <div class="card"><div style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">📋 如何发起问诊？</div><div class="timeline"><div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">进入问诊页面</div><div class="timeline-desc">点击底部导航栏"问诊"，进入问卷分诊页面</div></div></div><div class="timeline-item"><div class="timeline-dot">2</div><div class="timeline-content"><div class="timeline-title">填写问卷</div><div class="timeline-desc">根据宠物症状填写问卷调查，系统将自动进行AI分诊</div></div></div><div class="timeline-item"><div class="timeline-dot">3</div><div class="timeline-content"><div class="timeline-title">等待复核</div><div class="timeline-desc">AI完成初步诊断后，兽医进行复核确认</div></div></div><div class="timeline-item"><div class="timeline-dot empty">4</div><div class="timeline-content"><div class="timeline-title">开具处方</div><div class="timeline-desc">复核通过后，可以开具电子处方并发送给用户</div></div></div></div></div> <div class="card"><div style="padding: 16px; background: #e6f7ff; border-radius: 12px;"><div style="font-size: 14px; font-weight: 500; margin-bottom: 8px; color: #1890ff;">💡 小贴士</div><div style="font-size: 13px; color: #666;">确保问卷信息填写准确，以便AI能够给出更精确的诊断建议。</div></div></div> </div> <!-- 帮助详情2 --> <div id="page-help-detail-2" class="page"> <div class="card"><div style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">💊 如何开具处方？</div><div class="timeline"><div class="timeline-item"><div class="timeline-dot">1</div><div class="timeline-content"><div class="timeline-title">进入问诊详情</div><div class="timeline-desc">在问诊列表中选择需要开具处方的问诊</div></div></div><div class="timeline-item"><div class="timeline-dot">2</div><div class="timeline-content"><div class="timeline-title">查看诊断建议</div><div class="timeline-desc">确认AI诊断建议，了解宠物病情</div></div></div><div class="timeline-item"><div class="timeline-dot">3</div><div class="timeline-content"><div class="timeline-title">开具处方</div><div class="timeline-desc">点击"开具处方"按钮，填写处方信息</div></div></div><div class="timeline-item"><div class="timeline-dot empty">4</div><div class="timeline-content"><div class="timeline-title">发送处方</div><div class="timeline-desc">处方开具完成后，点击发送至用户</div></div></div></div></div> </div> <!-- 帮助详情3 --> <div id="page-help-detail-3" class="page"><div class="card"><div style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">📊 如何查看问诊统计？</div><div class="info-row"><span class="info-label">统计入口</span><span class="info-value">工作台首页</span></div><div class="info-row"><span class="info-label">统计数据</span><span class="info-value">今日问诊数、待处理数</span></div><div class="info-row"><span class="info-label">历史统计</span><span class="info-value">可查看30天内问诊趋势</span></div></div></div> <!-- 帮助详情4 --> <div id="page-help-detail-4" class="page"> <div class="card"><div style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">🤖 AI诊断准确性说明</div><div style="padding: 12px; background: #f8f8f8; border-radius: 12px; margin-bottom: 16px;"><div style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">AI诊断为辅助工具</div><div style="font-size: 13px; color: #666;">AI诊断结果仅供参考，最终诊断需要兽医复核确认。</div></div><div style="font-size: 14px; font-weight: 500; margin-bottom: 8px;">准确率说明：</div><div style="font-size: 13px; color: #666; margin-bottom: 12px;">• 常见疾病识别准确率：85%-95%</div><div style="font-size: 13px; color: #666; margin-bottom: 12px;">• 复杂疾病识别准确率：70%-85%</div><div style="font-size: 13px; color: #666;">• 所有诊断均需兽医复核</div></div> </div> <!-- 退出登录 --> <div id="page-profile-logout" class="page"> <div class="card" style="text-align: center; padding: 40px 24px;"><div style="width: 100px; height: 100px; margin: 0 auto 24px; background: linear-gradient(135deg, #fff1f0, #ffccc7); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px;">🚪</div><div style="font-size: 18px; font-weight: 600; margin-bottom: 8px;">确定退出登录？</div><div style="font-size: 13px; color: #999; margin-bottom: 32px;">退出后需要重新登录才能继续使用</div><div style="display: flex; flex-direction: column; gap: 12px;"><div class="btn btn-primary" style="width: 100%;" onclick="alert('正在退出登录...');showPage('home');switchTab('home')">确认退出</div><div class="btn btn-outline" style="width: 100%;" onclick="showPage('profile')">取消</div></div></div> </div> </div> <!-- 底部导航 --> <div class="bottom-nav"> <div class="nav-item active" onclick="switchTab('home')"><div class="icon">🏠</div><span>工作台</span></div> <div class="nav-item" onclick="switchTab('triage')"><div class="icon">📋<span class="badge">3</span></div><span>问诊</span></div> <div class="nav-item" onclick="switchTab('review')"><div class="icon">✅<span class="badge">2</span></div><span>诊断</span></div> <div class="nav-item" onclick="switchTab('icu')"><div class="icon">🏥</div><span>ICU</span></div> <div class="nav-item" onclick="switchTab('profile')"><div class="icon">👨⚕️</div><span>我的</span></div> </div> </div> <script> const pageTitles = {'home': 'AI宠物兽医端', 'ai-photo': '拍照识别', 'ai-video': '视频分析', 'ai-feces': '粪便检测', 'ai-advice': '诊断建议', 'ai-medication': '用药方案', 'triage': '问卷分诊', 'triage-detail': '问卷详情', 'consultation': 'AI问诊', 'consultation-detail': '问诊详情', 'review': '兽医复核', 'review-detail': '复核详情', 'weight-nutrition': '体重营养', 'classification': '分类分级', 'pet-records': '宠物档案', 'pet-detail': '宠物详情', 'icu': 'ICU监护', 'icu-detail': 'ICU详情', 'chronic': '慢性病管理', 'chronic-detail': '慢性病详情', 'reply': '问诊回复', 'profile': '个人中心', 'profile-edit': '修改个人信息', 'profile-notifications': '消息通知', 'profile-privacy': '隐私设置', 'profile-help': '帮助中心', 'profile-logout': '退出登录', 'help-detail-1': '如何发起问诊', 'help-detail-2': '如何开具处方', 'help-detail-3': '问诊统计', 'help-detail-4': 'AI诊断说明'}; function showPage(pageId) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); const target = document.getElementById('page-' + pageId); if (target) { target.classList.add('active'); document.getElementById('header-title').textContent = pageTitles[pageId] || 'AI宠物兽医端'; } document.querySelector('.content').scrollTop = 0; } function switchTab(pageId) { document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active')); event.currentTarget.classList.add('active'); showPage(pageId); } </script> </body> </html>
保存更改
取消
访问码:
gkzb4dud
复制链接
重新生成