拆解专家端原型为独立页面文件
将 expert-app.html 单体原型按项目规范拆解为 20 个独立自包含 HTML 文件， 分别放置到 workbench/expert、knowledge、ai-assistant、message、profile 目录下， 删除已被替代的 .gitkeep 占位文件。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-BLB5287\FP
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
d764ababf9
commit
6eecd54f49
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 修改密码 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.btn-primary { background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 24px; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; }
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">修改密码</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 密码表单 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<!-- 当前密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">当前密码</span>
|
||||
<input type="password" placeholder="请输入当前密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<!-- 新密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">新密码</span>
|
||||
<input type="password" placeholder="请输入新密码（至少8位）" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<!-- 确认新密码 -->
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:80px;flex-shrink:0;">确认新密码</span>
|
||||
<input type="password" placeholder="再次输入新密码" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存修改按钮 -->
|
||||
<button onclick="openModal('modal-pwd-saved')" class="btn-primary">保存修改</button>
|
||||
</div>
|
||||
|
||||
<!-- 修改成功弹窗 -->
|
||||
<div id="modal-pwd-saved" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">修改成功</div>
|
||||
<div class="modal-body">密码已更新，下次登录请使用新密码。</div>
|
||||
<div class="modal-actions">
|
||||
<!-- [交互] 确定后跳转至: ./index.html -->
|
||||
<button onclick="closeModal('modal-pwd-saved');location.href='./index.html'" style="color:#1677ff;font-weight:600;flex:1;padding:14px;font-size:16px;cursor:pointer;background:none;border:none;">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 个人信息设置 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">个人信息设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 头像区 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:20px;margin-bottom:12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="position:relative;display:inline-block;">
|
||||
<div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:40px;">👨⚕️</div>
|
||||
<!-- 更换头像按钮 -->
|
||||
<div style="position:absolute;bottom:0;right:0;width:26px;height:26px;background:#1677ff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff;cursor:pointer;">📷</div>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#999;margin-top:10px;">点击更换头像</div>
|
||||
</div>
|
||||
|
||||
<!-- 基础信息表单 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">基础信息</div>
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">姓名</span>
|
||||
<input type="text" value="王建明" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">所属医院</span>
|
||||
<input type="text" value="北京协和医院" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">科室</span>
|
||||
<input type="text" value="心内科" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">职称</span>
|
||||
<input type="text" value="主治医师" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:14px 16px;">
|
||||
<span style="font-size:14px;color:#999;width:70px;flex-shrink:0;">执业年限</span>
|
||||
<input type="text" value="12年" style="flex:1;border:none;font-size:14px;color:#1a1a1a;outline:none;text-align:right;" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 擅长病种标签选择 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">擅长病种</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<div style="font-size:12px;color:#999;margin-bottom:10px;">点击选择/取消（可多选）</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:8px;" id="disease-tags">
|
||||
<!-- 已选中标签（蓝色） -->
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">高血压</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">冠心病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#1677ff;color:#fff;cursor:pointer;border:1px solid #1677ff;">心律失常</div>
|
||||
<!-- 未选中标签（灰色） -->
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">心力衰竭</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">糖尿病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">高脂血症</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">脑卒中</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">睡眠障碍</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">颈椎病</div>
|
||||
<div onclick="toggleDiseaseTag(this)" style="padding:6px 14px;border-radius:16px;font-size:13px;background:#f5f5f5;color:#666;cursor:pointer;border:1px solid #e8e8e8;">焦虑抑郁</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人简介 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">个人简介</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:16px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请输入个人简介...">北京协和医院心内科主治医师，从事心血管疾病临床工作12年，具有丰富的临床经验，擅长心血管疾病的综合管理与健康指导。</textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 68/200 字</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人擅长 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#999;margin:0 4px 8px;">个人擅长</div>
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:20px;">
|
||||
<textarea style="width:100%;border:none;font-size:14px;color:#1a1a1a;outline:none;resize:none;line-height:1.7;background:transparent;" rows="4" placeholder="请描述您的专业擅长方向...">高血压、冠心病、心律失常的诊断与治疗，擅长心血管疾病的综合管理，对职场人群慢性病预防与健康管理有丰富经验。</textarea>
|
||||
<div style="text-align:right;font-size:11px;color:#bbb;">已输入 62/300 字</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换病种标签选中状态
|
||||
* 已选中（蓝色）→ 取消选中（灰色），反之亦然
|
||||
* @param {HTMLElement} el - 标签元素
|
||||
*/
|
||||
function toggleDiseaseTag(el) {
|
||||
var isOn = el.style.background === 'rgb(22, 119, 255)' || el.style.background === '#1677ff';
|
||||
el.style.background = isOn ? '#f5f5f5' : '#1677ff';
|
||||
el.style.color = isOn ? '#666' : '#fff';
|
||||
el.style.borderColor = isOn ? '#e8e8e8' : '#1677ff';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 我的 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 弹窗样式 */
|
||||
.modal-center { display: none; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; }
|
||||
.modal-center.active { display: flex; }
|
||||
.modal-box { width: 280px; background: #fff; border-radius: 16px; overflow: hidden; }
|
||||
.modal-box .modal-title { padding: 20px 20px 8px; font-size: 17px; font-weight: 700; text-align: center; color: #1a1a1a; }
|
||||
.modal-box .modal-body { padding: 8px 20px 20px; font-size: 14px; color: #666; text-align: center; line-height: 1.6; }
|
||||
.modal-box .modal-actions { display: flex; border-top: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button { flex: 1; padding: 14px; font-size: 16px; cursor: pointer; background: none; border: none; }
|
||||
.modal-box .modal-actions button:first-child { color: #666; border-right: 1px solid #f0f0f0; }
|
||||
.modal-box .modal-actions button:last-child { color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* 底部Tab栏 */
|
||||
.tab-bar { height: 83px; background: #fff; border-top: 1px solid #e8e8e8; display: flex; align-items: flex-start; padding-top: 8px; flex-shrink: 0; }
|
||||
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 0; position: relative; }
|
||||
.tab-item .tab-icon { font-size: 22px; line-height: 1; }
|
||||
.tab-item .tab-label { font-size: 10px; color: #999; font-weight: 500; }
|
||||
.tab-item.active .tab-label { color: #1677ff; }
|
||||
.tab-badge { position: absolute; top: 2px; right: 18px; background: #ff4d4f; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar" style="background:transparent;position:absolute;top:0;left:0;right:0;z-index:10;">
|
||||
<span class="time" style="color:#fff;">9:41</span>
|
||||
<div class="icons" style="color:#fff;"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部 -->
|
||||
<div style="background:linear-gradient(135deg,#1677ff,#0958d9);padding:30px 20px 24px;flex-shrink:0;padding-top:60px;">
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<!-- 头像 -->
|
||||
<div style="width:68px;height:68px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:34px;border:3px solid rgba(255,255,255,0.5);">👨⚕️</div>
|
||||
<div>
|
||||
<div style="color:#fff;font-size:20px;font-weight:700;">王建明</div>
|
||||
<div style="color:rgba(255,255,255,0.8);font-size:13px;margin-top:3px;">心内科 · 主治医师</div>
|
||||
<div style="color:rgba(255,255,255,0.65);font-size:12px;margin-top:2px;">北京协和医院</div>
|
||||
</div>
|
||||
<!-- 服务中按钮 -->
|
||||
<button onclick="togglePause()" id="pause-btn-mine" style="margin-left:auto;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 12px;color:#fff;font-size:12px;cursor:pointer;">
|
||||
<span style="width:7px;height:7px;border-radius:50%;background:#52c41a;display:inline-block;"></span>服务中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能列表滚动区域 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<!-- 第一组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./stats.html -->
|
||||
<div onclick="location.href='./stats.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📊</span><span style="font-size:15px;color:#1a1a1a;flex:1;">咨询统计</span>
|
||||
<span style="font-size:13px;color:#1677ff;margin-right:8px;">今日 18 次</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./schedule.html -->
|
||||
<div onclick="location.href='./schedule.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;border-bottom:1px solid #f5f5f5;">
|
||||
<span style="font-size:18px;margin-right:12px;">📅</span><span style="font-size:15px;color:#1a1a1a;flex:1;">排班设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./edit-profile.html -->
|
||||
<div onclick="location.href='./edit-profile.html'" style="display:flex;align-items:center;padding:16px;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">👤</span><span style="font-size:15px;color:#1a1a1a;flex:1;">个人信息设置</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二组功能列表 -->
|
||||
<div style="background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,0.06);margin-bottom:12px;">
|
||||
<!-- [交互] 点击跳转至: ./change-pwd.html -->
|
||||
<div onclick="location.href='./change-pwd.html'" style="display:flex;align-items:center;padding:16px;border-bottom:1px solid #f5f5f5;cursor:pointer;">
|
||||
<span style="font-size:18px;margin-right:12px;">🔒</span><span style="font-size:15px;color:#1a1a1a;flex:1;">修改密码</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;padding:16px;">
|
||||
<span style="font-size:18px;margin-right:12px;">ℹ️</span><span style="font-size:15px;color:#1a1a1a;flex:1;">关于我们</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 退出登录按钮 -->
|
||||
<button onclick="openModal('modal-logout')" style="width:100%;padding:14px;background:#fff;color:#ff4d4f;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,0.06);">退出登录</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="modal-logout" class="modal-center">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">退出登录</div>
|
||||
<div class="modal-body">确认退出当前账号？</div>
|
||||
<div class="modal-actions">
|
||||
<button onclick="closeModal('modal-logout')">取消</button>
|
||||
<button onclick="closeModal('modal-logout')" style="color:#ff4d4f;">确认退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部Tab栏，我的为active状态 -->
|
||||
<div class="tab-bar">
|
||||
<!-- [交互] 点击跳转至: ../workbench/expert/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../workbench/expert/index.html'">
|
||||
<span class="tab-icon">🏥</span>
|
||||
<span class="tab-label">工作台</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../knowledge/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../knowledge/index.html'">
|
||||
<span class="tab-icon">📚</span>
|
||||
<span class="tab-label">知识库</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../ai-assistant/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../ai-assistant/index.html'">
|
||||
<span class="tab-icon">🤖</span>
|
||||
<span class="tab-label">AI助手</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ../message/index.html -->
|
||||
<div class="tab-item" onclick="location.href='../message/index.html'">
|
||||
<span class="tab-icon">💬</span>
|
||||
<span class="tab-label">消息</span>
|
||||
<span class="tab-badge">2</span>
|
||||
</div>
|
||||
<!-- [状态] 当前为: 已选中态 -->
|
||||
<div class="tab-item active" onclick="location.href='./index.html'">
|
||||
<span class="tab-icon">👤</span>
|
||||
<span class="tab-label">我的</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 服务状态标记 */
|
||||
let isPaused = false;
|
||||
|
||||
/**
|
||||
* 切换服务状态（服务中/暂停服务）
|
||||
*/
|
||||
function togglePause() {
|
||||
isPaused = !isPaused;
|
||||
const bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
const text = isPaused ? '暂停服务' : '服务中';
|
||||
const mineBtn = document.getElementById('pause-btn-mine');
|
||||
if (mineBtn) {
|
||||
const dot = mineBtn.querySelector('span');
|
||||
if (dot) dot.style.background = bg;
|
||||
/* 更新按钮文字 */
|
||||
mineBtn.childNodes.forEach(function(n) { if (n.nodeType === 3) n.textContent = text; });
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function openModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
var m = document.getElementById(id);
|
||||
if (m) m.classList.remove('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 全部评价 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-blue { background: #e6f4ff; color: #1677ff; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./stats.html -->
|
||||
<button class="back-btn" onclick="location.href='./stats.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">全部评价</span>
|
||||
</div>
|
||||
|
||||
<!-- 顶部统计 -->
|
||||
<div style="background:#fff;border-bottom:1px solid #f0f0f0;padding:12px 16px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;">
|
||||
<span style="font-size:14px;color:#1a1a1a;">共 <b>1,248</b> 条评价</span>
|
||||
<span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐ 综合 4.9</span>
|
||||
</div>
|
||||
|
||||
<!-- 评价列表 -->
|
||||
<div class="scroll-content" style="padding:12px 16px;">
|
||||
<!-- 评价1：孙*丽 - 视频咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:15px;">👩</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">孙*丽</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">视频咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">昨天</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">非常专业，王医生耐心解答了我所有的问题，给出了很实用的建议，感谢！</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价2：赵*磊 - 图文咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:15px;">👨</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">赵*磊</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">图文咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-08</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">回复及时，建议很实用，明显感觉睡眠有所改善。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价3：王*芳 - 视频咨询 - 5星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f6ffed,#b7eb8f);display:flex;align-items:center;justify-content:center;font-size:15px;">👩</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">王*芳</span>
|
||||
<span class="tag tag-green" style="font-size:10px;padding:1px 6px;">视频咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-07</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">医生很有耐心，讲解血脂问题通俗易懂，饮食调整建议很落地。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价4：李*建 - 图文咨询 - 4星 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:14px 16px;margin-bottom:10px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
||||
<div style="display:flex;align-items:center;gap:8px;">
|
||||
<div style="width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#fff7e6,#ffd591);display:flex;align-items:center;justify-content:center;font-size:15px;">👨</div>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;">李*建</span>
|
||||
<span class="tag tag-blue" style="font-size:10px;padding:1px 6px;">图文咨询</span>
|
||||
</div>
|
||||
<span style="font-size:12px;color:#bbb;">2026-04-06</span>
|
||||
</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-bottom:6px;">⭐⭐⭐⭐</div>
|
||||
<div style="font-size:13px;color:#444;line-height:1.6;">解答了我关于血压用药的疑惑，专业可信。</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部提示 -->
|
||||
<div style="text-align:center;padding:16px 0;">
|
||||
<span style="font-size:13px;color:#bbb;">— 已加载全部近期评价 —</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 排班设置 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">排班设置</span>
|
||||
<button class="nav-right">保存</button>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 日历卡片 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<span style="font-size:15px;font-weight:600;color:#1a1a1a;">2026年4月</span>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<button style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:14px;cursor:pointer;">‹</button>
|
||||
<button style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:14px;cursor:pointer;">›</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 星期标题行 -->
|
||||
<div style="display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;">
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">日</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">一</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">二</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">三</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">四</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">五</div>
|
||||
<div style="font-size:11px;color:#999;padding:4px 0;">六</div>
|
||||
<!-- 第一行：1-6日 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#ccc;"></div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">1</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">2</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">3</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">4</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">5</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">6</div>
|
||||
<!-- 第二行：7-13日，8号为今天，9/10/12为选中 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">7</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1677ff;background:#e6f4ff;border-radius:50%;font-weight:700;">8</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">9</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">10</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#1a1a1a;cursor:pointer;">11</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">12</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">13</div>
|
||||
<!-- 第三行：14-20日，15/16/18/19为选中，17为未选中可点击 -->
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">14</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">15</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">16</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#1a1a1a;cursor:pointer;">17</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">18</div>
|
||||
<div onclick="toggleDay(this)" style="padding:6px 0;font-size:13px;color:#fff;background:#1677ff;border-radius:50%;cursor:pointer;font-weight:600;">19</div>
|
||||
<div style="padding:6px 0;font-size:13px;color:#1a1a1a;">20</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 时段设置卡片 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">时段设置（每日）</div>
|
||||
<!-- 上午时段 -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f5f5f5;">
|
||||
<div>
|
||||
<div style="font-size:14px;color:#1a1a1a;">上午 09:00 – 12:00</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">每时段接诊人数</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<button onclick="adjustCount(this,-1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">−</button>
|
||||
<span id="count-am" style="font-size:16px;font-weight:700;color:#1677ff;min-width:20px;text-align:center;">3</span>
|
||||
<button onclick="adjustCount(this,1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">+</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下午时段 -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:12px 0;">
|
||||
<div>
|
||||
<div style="font-size:14px;color:#1a1a1a;">下午 14:00 – 17:00</div>
|
||||
<div style="font-size:12px;color:#999;margin-top:2px;">每时段接诊人数</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<button onclick="adjustCount(this,-1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">−</button>
|
||||
<span id="count-pm" style="font-size:16px;font-weight:700;color:#1677ff;min-width:20px;text-align:center;">3</span>
|
||||
<button onclick="adjustCount(this,1)" style="width:28px;height:28px;border-radius:50%;background:#f5f5f5;border:none;font-size:16px;cursor:pointer;line-height:1;">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换日期选中状态
|
||||
* 点击已选中的日期取消选中，点击未选中的日期设为选中
|
||||
* @param {HTMLElement} el - 日期单元格元素
|
||||
*/
|
||||
function toggleDay(el) {
|
||||
var isOn = el.style.background === 'rgb(22, 119, 255)';
|
||||
el.style.background = isOn ? '' : '#1677ff';
|
||||
el.style.color = isOn ? '#1a1a1a' : '#fff';
|
||||
el.style.fontWeight = isOn ? '' : '600';
|
||||
el.style.borderRadius = isOn ? '' : '50%';
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整接诊人数（最小1，最大10）
|
||||
* @param {HTMLElement} btn - 触发按钮
|
||||
* @param {number} delta - 增减量（+1 或 -1）
|
||||
*/
|
||||
function adjustCount(btn, delta) {
|
||||
var sibling = btn.parentElement.querySelector('span[id]');
|
||||
if (!sibling) return;
|
||||
var val = parseInt(sibling.textContent) + delta;
|
||||
if (val < 1) val = 1;
|
||||
if (val > 10) val = 10;
|
||||
sibling.textContent = val;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - 咨询统计 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与手机壳样式 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询统计</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
<!-- 数据概览（2x2网格） -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:14px;">数据概览</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
|
||||
<!-- 今日 - 蓝色 -->
|
||||
<div style="background:#f0f7ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#1677ff;">18</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">今日完成</div>
|
||||
</div>
|
||||
<!-- 本周 - 绿色 -->
|
||||
<div style="background:#f6ffed;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#52c41a;">87</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本周完成</div>
|
||||
</div>
|
||||
<!-- 本月 - 橙色 -->
|
||||
<div style="background:#fff7e6;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#fa8c16;">312</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">本月完成</div>
|
||||
</div>
|
||||
<!-- 累计 - 紫色 -->
|
||||
<div style="background:#f9f0ff;border-radius:10px;padding:14px;text-align:center;">
|
||||
<div style="font-size:26px;font-weight:700;color:#722ed1;">1,248</div>
|
||||
<div style="font-size:12px;color:#666;margin-top:3px;">累计完成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本月咨询类型 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">本月咨询类型</div>
|
||||
<!-- 图文咨询进度条 -->
|
||||
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
|
||||
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">图文咨询</span>
|
||||
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
|
||||
<div style="width:68%;height:100%;background:#1677ff;border-radius:5px;"></div>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#1677ff;font-weight:600;width:36px;text-align:right;">213</span>
|
||||
</div>
|
||||
<!-- 视频咨询进度条 -->
|
||||
<div style="display:flex;align-items:center;gap:10px;">
|
||||
<span style="font-size:13px;color:#666;width:56px;flex-shrink:0;">视频咨询</span>
|
||||
<div style="flex:1;height:10px;background:#f0f0f0;border-radius:5px;overflow:hidden;">
|
||||
<div style="width:32%;height:100%;background:#52c41a;border-radius:5px;"></div>
|
||||
</div>
|
||||
<span style="font-size:13px;color:#52c41a;font-weight:600;width:36px;text-align:right;">99</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 近7日完成量柱状图 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:12px;">近7日完成量</div>
|
||||
<div style="display:flex;align-items:flex-end;justify-content:space-between;height:70px;gap:4px;">
|
||||
<!-- 4/2: 12 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">12</div>
|
||||
<div style="width:100%;height:40%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/2</div>
|
||||
</div>
|
||||
<!-- 4/3: 15 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">15</div>
|
||||
<div style="width:100%;height:50%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/3</div>
|
||||
</div>
|
||||
<!-- 4/4: 20 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">20</div>
|
||||
<div style="width:100%;height:67%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/4</div>
|
||||
</div>
|
||||
<!-- 4/5: 10 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">10</div>
|
||||
<div style="width:100%;height:33%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/5</div>
|
||||
</div>
|
||||
<!-- 4/6: 22 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">22</div>
|
||||
<div style="width:100%;height:73%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/6</div>
|
||||
</div>
|
||||
<!-- 4/7: 16 -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#999;">16</div>
|
||||
<div style="width:100%;height:53%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#bbb;">4/7</div>
|
||||
</div>
|
||||
<!-- 今日: 18（高亮蓝色） -->
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;">
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">18</div>
|
||||
<div style="width:100%;height:60%;background:#1677ff;border-radius:3px 3px 0 0;"></div>
|
||||
<div style="font-size:10px;color:#1677ff;font-weight:600;">今日</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 综合评分 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;">综合评分</div>
|
||||
<!-- [交互] 点击跳转至: ./reviews.html -->
|
||||
<button onclick="location.href='./reviews.html'" style="font-size:12px;color:#1677ff;background:none;border:none;cursor:pointer;">查看全部评价 ›</button>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:16px;">
|
||||
<!-- 左侧评分 -->
|
||||
<div style="text-align:center;">
|
||||
<div style="font-size:40px;font-weight:700;color:#fa8c16;line-height:1;">4.9</div>
|
||||
<div style="font-size:13px;color:#fa8c16;margin-top:4px;">⭐⭐⭐⭐⭐</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:3px;">1,248次评价</div>
|
||||
</div>
|
||||
<!-- 右侧星级分布条 -->
|
||||
<div style="flex:1;">
|
||||
<!-- 5星 88% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">5</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:88%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">88%</span>
|
||||
</div>
|
||||
<!-- 4星 8% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">4</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:8%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">8%</span>
|
||||
</div>
|
||||
<!-- 3星 3% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">3</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:3%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">3%</span>
|
||||
</div>
|
||||
<!-- 2星 1% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;margin-bottom:5px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">2</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:1%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">1%</span>
|
||||
</div>
|
||||
<!-- 1星 0% -->
|
||||
<div style="display:flex;align-items:center;gap:6px;">
|
||||
<span style="font-size:11px;color:#999;width:14px;">1</span>
|
||||
<div style="flex:1;height:6px;background:#f0f0f0;border-radius:3px;overflow:hidden;"><div style="width:0%;height:100%;background:#faad14;border-radius:3px;"></div></div>
|
||||
<span style="font-size:11px;color:#999;width:28px;text-align:right;">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部间距 -->
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user