h5原型文件
This commit is contained in:
DESKTOP-BLB5287\FP
@@ -0,0 +1,156 @@
|
||||
<!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: center;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
/* 手机壳模拟器 */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #f0f2f5; 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;
|
||||
}
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
/* 聊天头部 */
|
||||
.chat-header {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
|
||||
}
|
||||
.chat-header .back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.chat-header .avatar {
|
||||
width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 22px; background: linear-gradient(135deg, #f6ffed, #95de64);
|
||||
}
|
||||
.chat-header .info .name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.chat-header .info .status { font-size: 12px; color: #52c41a; }
|
||||
/* 聊天消息区 */
|
||||
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
|
||||
.chat-body::-webkit-scrollbar { display: none; }
|
||||
/* 消息行 */
|
||||
.msg-row { display: flex; gap: 8px; max-width: 85%; }
|
||||
.msg-row.bot { align-self: flex-start; }
|
||||
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
|
||||
.msg-avatar {
|
||||
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 18px;
|
||||
}
|
||||
.msg-row.bot .msg-avatar { background: linear-gradient(135deg, #f6ffed, #95de64); }
|
||||
.msg-row.user .msg-avatar { background: linear-gradient(135deg, #e6f4ff, #91caff); }
|
||||
.msg-bubble {
|
||||
padding: 12px 14px; border-radius: 16px; font-size: 14px; line-height: 1.6; color: #333;
|
||||
}
|
||||
.msg-row.bot .msg-bubble { background: #fff; border-top-left-radius: 4px; }
|
||||
.msg-row.user .msg-bubble { background: #52c41a; color: #fff; border-top-right-radius: 4px; }
|
||||
/* 底部输入区 */
|
||||
.chat-input-area {
|
||||
background: #fff; border-top: 1px solid #f0f0f0; padding: 10px 12px;
|
||||
flex-shrink: 0; border-radius: 0 0 44px 44px;
|
||||
}
|
||||
.input-row { display: flex; align-items: center; gap: 8px; }
|
||||
.plus-btn {
|
||||
width: 36px; height: 36px; border-radius: 50%; border: none;
|
||||
background: #52c41a; color: #fff; font-size: 20px; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
.msg-input {
|
||||
flex: 1; height: 36px; border: 1.5px solid #e8e8e8; border-radius: 18px;
|
||||
padding: 0 14px; font-size: 14px; outline: none; font-family: inherit;
|
||||
}
|
||||
.msg-input:focus { border-color: #52c41a; }
|
||||
.send-btn {
|
||||
width: 36px; height: 36px; border-radius: 50%; border: none;
|
||||
background: #52c41a; color: #fff; font-size: 16px; cursor: pointer;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
/* 展开面板 */
|
||||
.expand-panel {
|
||||
display: none; grid-template-columns: repeat(4, 1fr); gap: 12px;
|
||||
padding: 16px 12px 20px; background: #fafafa; border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
.expand-panel.show { display: grid; }
|
||||
.expand-item { text-align: center; cursor: pointer; }
|
||||
.expand-item .icon {
|
||||
width: 48px; height: 48px; border-radius: 12px; background: #fff;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px;
|
||||
margin: 0 auto 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
}
|
||||
.expand-item .text { font-size: 11px; color: #666; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>📶</span><span>📡</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 聊天头部 -->
|
||||
<div class="chat-header">
|
||||
<a class="back" href="index.html">← </a>
|
||||
<div class="avatar">🤖</div>
|
||||
<div class="info">
|
||||
<div class="name">健康小助手</div>
|
||||
<div class="status">● 在线</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 聊天消息区 -->
|
||||
<div class="chat-body">
|
||||
<!-- 小助手消息 -->
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="msg-bubble">您好！我是健康小助手，可以为您解答健康问题、体检咨询、用药指导等。请问有什么可以帮您？</div>
|
||||
</div>
|
||||
<!-- 用户消息 -->
|
||||
<div class="msg-row user">
|
||||
<div class="msg-avatar">👤</div>
|
||||
<div class="msg-bubble">我想了解一下体检套餐包含哪些项目？</div>
|
||||
</div>
|
||||
<!-- 小助手回复 -->
|
||||
<div class="msg-row bot">
|
||||
<div class="msg-avatar">🤖</div>
|
||||
<div class="msg-bubble">标准体检套餐通常包含：血常规、尿常规、肝功能、肾功能、血糖、血脂、心电图、胸部X光、腹部B超等项目。您想了解哪个具体套餐？</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部输入区 -->
|
||||
<div class="chat-input-area">
|
||||
<div class="input-row">
|
||||
<!-- [交互] 加号按钮：展开/收起功能面板 -->
|
||||
<button class="plus-btn" onclick="togglePanel()">+</button>
|
||||
<input class="msg-input" type="text" placeholder="输入消息...">
|
||||
<!-- [交互] 发送按钮 -->
|
||||
<button class="send-btn">➤</button>
|
||||
</div>
|
||||
<!-- [交互] 展开面板：图片/拍摄/体检报告/选择档案 -->
|
||||
<div class="expand-panel" id="expandPanel">
|
||||
<div class="expand-item"><div class="icon">🖼️</div><div class="text">图片</div></div>
|
||||
<div class="expand-item"><div class="icon">📷</div><div class="text">拍摄</div></div>
|
||||
<div class="expand-item"><div class="icon">📋</div><div class="text">体检报告</div></div>
|
||||
<div class="expand-item"><div class="icon">📁</div><div class="text">选择档案</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换展开面板的显示/隐藏
|
||||
*/
|
||||
function togglePanel() {
|
||||
const panel = document.getElementById('expandPanel');
|
||||
panel.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
|
||||
/* ===== 页面占位内容 ===== */
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
|
||||
/* ===== 弹窗遮罩层 ===== */
|
||||
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
/* ===== 底部滑出弹窗面板 ===== */
|
||||
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px; width: 100%; }
|
||||
.modal-sheet h3 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 16px; color: #333; }
|
||||
|
||||
/* ===== 须知列表 ===== */
|
||||
.notice-list { list-style: none; margin-bottom: 20px; }
|
||||
.notice-list li { font-size: 14px; color: #555; line-height: 1.7; padding: 6px 0; display: flex; gap: 8px; }
|
||||
.notice-list li::before { content: attr(data-idx); color: #1677ff; font-weight: 600; flex-shrink: 0; }
|
||||
|
||||
/* ===== 按钮组 ===== */
|
||||
.modal-btns { display: flex; gap: 12px; }
|
||||
.modal-btns button { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; }
|
||||
.btn-confirm { background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<span>●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 页面占位内容 -->
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 咨询须知弹窗 - 默认打开状态 -->
|
||||
<div class="modal-overlay" id="modalOverlay">
|
||||
<div class="modal-sheet">
|
||||
<h3>咨询须知</h3>
|
||||
<ol class="notice-list">
|
||||
<li data-idx="1.">本平台提供在线健康咨询服务，不替代线下就医。</li>
|
||||
<li data-idx="2.">请如实描述您的症状和病史，以便医生准确判断。</li>
|
||||
<li data-idx="3.">医生将在24小时内回复您的咨询。</li>
|
||||
<li data-idx="4.">如遇紧急情况，请立即拨打120或前往医院就诊。</li>
|
||||
</ol>
|
||||
<div class="modal-btns">
|
||||
<button class="btn-cancel" onclick="handleCancel()">取消</button>
|
||||
<button class="btn-confirm" onclick="handleConfirm()">同意并开始咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 取消按钮 - 关闭弹窗并提示 */
|
||||
function handleCancel() {
|
||||
document.getElementById('modalOverlay').style.display = 'none';
|
||||
alert('您已取消咨询');
|
||||
}
|
||||
|
||||
/** 同意按钮 - 跳转到图文咨询页面 */
|
||||
function handleConfirm() {
|
||||
window.location.href = 'text-chat.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
/* ===== 弹窗遮罩层 ===== */
|
||||
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
|
||||
/* ===== 底部滑出弹窗面板 ===== */
|
||||
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px; width: 100%; }
|
||||
.modal-sheet h3 { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 12px; color: #333; }
|
||||
.modal-sheet p { font-size: 14px; color: #666; text-align: center; margin-bottom: 20px; line-height: 1.6; }
|
||||
|
||||
/* ===== 按钮组 ===== */
|
||||
.modal-btns { display: flex; gap: 12px; }
|
||||
.modal-btns button { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; }
|
||||
.btn-confirm { background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<span>●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 结束咨询确认弹窗 - 默认打开状态 -->
|
||||
<div class="modal-overlay" id="modalOverlay">
|
||||
<div class="modal-sheet">
|
||||
<h3>结束咨询</h3>
|
||||
<p>确认结束本次咨询吗？结束后将跳转至评价页面。</p>
|
||||
<div class="modal-btns">
|
||||
<button class="btn-cancel" onclick="handleCancel()">继续咨询</button>
|
||||
<button class="btn-confirm" onclick="handleConfirm()">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 继续咨询 - 关闭弹窗 */
|
||||
function handleCancel() {
|
||||
document.getElementById('modalOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
/** 确认结束 - 跳转到评价页面 */
|
||||
function handleConfirm() {
|
||||
window.location.href = 'rate-doctor.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,254 @@
|
||||
<!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; min-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; }
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 0; height: 48px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; font-size: 14px; font-weight: 600; flex-shrink: 0; }
|
||||
.status-bar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
.nav-bar { display: flex; align-items: center; padding: 10px 16px; background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff; flex-shrink: 0; }
|
||||
.nav-back { font-size: 22px; cursor: pointer; padding: 4px 8px 4px 0; text-decoration: none; color: #fff; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; flex: 1; text-align: center; margin-right: 30px; }
|
||||
|
||||
/* ===== 蓝色渐变头部区域 ===== */
|
||||
.sub-list-header { background: linear-gradient(135deg, #1677ff, #0958d9); padding: 16px 20px; color: #fff; }
|
||||
.sub-list-header .slh-title { font-size: 18px; font-weight: 700; }
|
||||
.sub-list-header .slh-meta { font-size: 13px; opacity: 0.8; margin-top: 4px; }
|
||||
|
||||
/* ===== 排序栏 ===== */
|
||||
.sort-bar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.sort-bar .sort-label { font-size: 12px; color: #999; white-space: nowrap; }
|
||||
.sort-btn { font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid #e0e0e0; background: #fff; color: #666; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
|
||||
.sort-btn.active { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
|
||||
/* ===== 搜索栏 ===== */
|
||||
.list-search-bar { padding: 8px 16px; background: #f8f9fa; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.list-search-bar .lsb-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; padding: 7px 14px; }
|
||||
.list-search-bar .lsb-icon { font-size: 14px; color: #bbb; }
|
||||
.list-search-bar .lsb-wrap input { flex: 1; border: none; background: transparent; font-size: 13px; outline: none; color: #1a1a1a; }
|
||||
.list-search-bar .lsb-wrap input::placeholder { color: #bbb; }
|
||||
.lsb-clear { font-size: 14px; color: #bbb; cursor: pointer; display: none; background: none; border: none; padding: 0; }
|
||||
|
||||
/* ===== 专家卡片列表 ===== */
|
||||
.expert-list-container { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
.expert-card { display: flex; gap: 12px; padding: 14px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: box-shadow 0.2s; }
|
||||
.expert-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
.expert-card:active { background: #f8f9fa; }
|
||||
/* 头像 */
|
||||
.ec-avatar { width: 52px; height: 52px; border-radius: 50%; background: #e6f0ff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; color: #1677ff; }
|
||||
/* 信息区 */
|
||||
.ec-info { flex: 1; min-width: 0; }
|
||||
.ec-row1 { display: flex; align-items: center; gap: 6px; }
|
||||
.ec-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.ec-title-tag { font-size: 11px; color: #1677ff; background: #e6f0ff; padding: 1px 6px; border-radius: 4px; }
|
||||
.ec-hospital { font-size: 12px; color: #888; margin-top: 4px; }
|
||||
.ec-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
|
||||
.ec-tag { font-size: 11px; color: #666; background: #f5f5f5; padding: 2px 8px; border-radius: 4px; }
|
||||
.ec-stats { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #999; }
|
||||
.ec-stat-val { color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ===== 空状态 ===== */
|
||||
.expert-empty { text-align: center; padding: 40px 16px; color: #bbb; display: none; }
|
||||
.expert-empty .ee-icon { font-size: 40px; margin-bottom: 10px; }
|
||||
.expert-empty .ee-text { font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<div class="status-bar-right">
|
||||
<span>●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<!-- [交互] 点击返回按钮跳转到 find-expert.html -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="window.location.href='find-expert.html'">‹</a>
|
||||
<span class="nav-title">科室专家</span>
|
||||
</div>
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div class="sub-list-header">
|
||||
<div class="slh-title">心内科</div>
|
||||
<div class="slh-meta">共 8位专家</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 排序栏 - 点击切换排序方式 -->
|
||||
<div class="sort-bar">
|
||||
<span class="sort-label">排序：</span>
|
||||
<button class="sort-btn active" onclick="setSortOrder(this)">好评优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">热度优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">回复率</button>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 搜索栏 - 输入关键词过滤专家列表 -->
|
||||
<div class="list-search-bar">
|
||||
<div class="lsb-wrap">
|
||||
<span class="lsb-icon">🔍</span>
|
||||
<input type="text" id="expertSearchInput" placeholder="搜索医生姓名" oninput="filterExperts(this, 'expertListContainer')">
|
||||
<button class="lsb-clear" id="expertClearBtn" onclick="clearSearch('expertSearchInput', 'expertListContainer', 'expertClearBtn')">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家列表容器 -->
|
||||
<div class="expert-list-container" id="expertListContainer">
|
||||
|
||||
<!-- [交互] 专家卡片1 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="张建国" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">张建国</span>
|
||||
<span class="ec-title-tag">主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京协和医院·心内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">冠心病</span>
|
||||
<span class="ec-tag">高血压</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">1280</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">96%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片2 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="陈美华" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👩‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">陈美华</span>
|
||||
<span class="ec-title-tag">主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京天坛医院·神经内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">头痛</span>
|
||||
<span class="ec-tag">失眠</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">2100</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">98%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片3 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="刘海波" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">刘海波</span>
|
||||
<span class="ec-title-tag">副主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京协和医院·消化内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">胃炎</span>
|
||||
<span class="ec-tag">结肠炎</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.7</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">430</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">85%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示（搜索无结果时显示） -->
|
||||
<div class="expert-empty" id="expertEmpty">
|
||||
<div class="ee-icon">🔍</div>
|
||||
<div class="ee-text">未找到匹配的专家</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* [交互] 排序按钮切换
|
||||
* 点击某个排序按钮时，移除其他按钮的激活状态，激活当前按钮
|
||||
* @param {HTMLElement} el - 被点击的排序按钮元素
|
||||
*/
|
||||
function setSortOrder(el) {
|
||||
// 移除所有排序按钮的激活状态
|
||||
document.querySelectorAll('.sort-btn').forEach(function(btn) {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
// 激活当前点击的按钮
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* [交互] 搜索过滤专家列表
|
||||
* 根据输入框内容实时过滤专家卡片，无匹配结果时显示空状态
|
||||
* @param {HTMLInputElement} input - 搜索输入框元素
|
||||
* @param {string} containerId - 专家列表容器的 ID
|
||||
*/
|
||||
function filterExperts(input, containerId) {
|
||||
var keyword = input.value.trim().toLowerCase();
|
||||
var container = document.getElementById(containerId);
|
||||
var cards = container.querySelectorAll('.expert-card');
|
||||
var clearBtn = document.getElementById('expertClearBtn');
|
||||
var emptyEl = document.getElementById('expertEmpty');
|
||||
var visibleCount = 0;
|
||||
|
||||
// 控制清空按钮的显示/隐藏
|
||||
clearBtn.style.display = keyword.length > 0 ? 'block' : 'none';
|
||||
|
||||
// 遍历所有专家卡片，根据姓名匹配关键词
|
||||
cards.forEach(function(card) {
|
||||
var name = (card.getAttribute('data-name') || '').toLowerCase();
|
||||
if (keyword === '' || name.indexOf(keyword) !== -1) {
|
||||
card.style.display = 'flex';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 控制空状态提示的显示/隐藏
|
||||
emptyEl.style.display = visibleCount === 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* [交互] 清空搜索输入框并重置列表
|
||||
* @param {string} inputId - 搜索输入框的 ID
|
||||
* @param {string} containerId - 专家列表容器的 ID
|
||||
* @param {string} clearBtnId - 清空按钮的 ID
|
||||
*/
|
||||
function clearSearch(inputId, containerId, clearBtnId) {
|
||||
var input = document.getElementById(inputId);
|
||||
input.value = '';
|
||||
// 隐藏清空按钮
|
||||
document.getElementById(clearBtnId).style.display = 'none';
|
||||
// 重新触发过滤，显示所有卡片
|
||||
filterExperts(input, containerId);
|
||||
// 聚焦输入框
|
||||
input.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,536 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #fff;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
/* 状态栏背景由头部渐变色覆盖 */
|
||||
background: transparent;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
|
||||
/* ===== 导航栏（透明，绝对定位在头部上方） ===== */
|
||||
.nav-bar {
|
||||
position: absolute;
|
||||
top: 54px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
z-index: 20;
|
||||
background: transparent;
|
||||
}
|
||||
.nav-bar .nav-back {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.nav-bar .nav-share {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* ===== 页面内容滚动区域 ===== */
|
||||
.page-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
/* 状态栏用绝对定位覆盖，此处从顶部开始 */
|
||||
margin-top: -54px;
|
||||
}
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ===== 蓝色渐变头部区域 ===== */
|
||||
.expert-profile-header {
|
||||
background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
|
||||
padding: 20px 20px 32px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
/* 上方留空间给状态栏+导航栏 */
|
||||
padding-top: 108px;
|
||||
}
|
||||
.profile-avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
margin: 0 auto 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
.profile-name {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.profile-dept {
|
||||
font-size: 14px;
|
||||
opacity: 0.85;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.profile-hospital {
|
||||
font-size: 13px;
|
||||
opacity: 0.75;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ===== 数据统计卡片 ===== */
|
||||
.stats-row {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
margin: -16px 16px 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
padding: 16px 8px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
.stat-item:last-child { border-right: none; }
|
||||
.stat-item .val {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1677ff;
|
||||
}
|
||||
.stat-item .lbl {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* ===== 咨询按钮 ===== */
|
||||
.consult-btns {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 20px 16px 0;
|
||||
}
|
||||
.btn-primary {
|
||||
flex: 1;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
padding: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.btn-primary:active { background: #0958d9; }
|
||||
.btn-outline {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 24px;
|
||||
padding: 14px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.btn-outline:active { background: #e6f0ff; }
|
||||
|
||||
/* ===== 资料区域 ===== */
|
||||
.profile-section {
|
||||
padding: 20px 16px 0;
|
||||
}
|
||||
.profile-section h4 {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #1677ff;
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.profile-section p {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* ===== 擅长标签 ===== */
|
||||
.tags-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.tag-item {
|
||||
background: #e6f0ff;
|
||||
color: #1677ff;
|
||||
font-size: 13px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* ===== 用户评价 ===== */
|
||||
.review-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.review-item .reviewer {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.review-item .stars {
|
||||
color: #fa8c16;
|
||||
font-size: 13px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
.review-item .content {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
}
|
||||
.view-all-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #f5f7fa;
|
||||
border: 1px solid #e8e8e8;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.view-all-btn:active { background: #e6f0ff; }
|
||||
|
||||
/* ===== 底部安全间距 ===== */
|
||||
.bottom-spacer {
|
||||
height: 40px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ===== 弹窗 ===== */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 100;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-overlay.show { display: flex; }
|
||||
.modal-sheet {
|
||||
background: #fff;
|
||||
border-radius: 24px 24px 0 0;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
.modal-sheet .modal-title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.modal-sheet .notice-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.modal-sheet .notice-list li {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
padding: 6px 0;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.modal-sheet .notice-list li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 14px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
}
|
||||
.modal-btns {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
.modal-btns .btn-cancel {
|
||||
flex: 1;
|
||||
padding: 14px;
|
||||
background: #f5f7fa;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modal-btns .btn-cancel:active { background: #e8e8e8; }
|
||||
.modal-btns .btn-confirm {
|
||||
flex: 2;
|
||||
padding: 14px;
|
||||
background: #1677ff;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modal-btns .btn-confirm:active { background: #0958d9; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<span>●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏（透明，绝对定位在头部上方） -->
|
||||
<!-- [交互] 返回按钮：点击返回上一页 -->
|
||||
<div class="nav-bar">
|
||||
<button class="nav-back" onclick="history.back()">←</button>
|
||||
<!-- [交互] 分享按钮 -->
|
||||
<button class="nav-share">分享</button>
|
||||
</div>
|
||||
|
||||
<!-- 页面滚动内容 -->
|
||||
<div class="page-content">
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div class="expert-profile-header">
|
||||
<!-- 大圆形头像 -->
|
||||
<div class="profile-avatar">👨‍⚕️</div>
|
||||
<!-- 姓名 -->
|
||||
<div class="profile-name">张建国</div>
|
||||
<!-- 职称 -->
|
||||
<div class="profile-dept">主任医师 · 心内科</div>
|
||||
<!-- 医院 -->
|
||||
<div class="profile-hospital">北京协和医院</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据统计卡片（负margin上移） -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="val">4.9</div>
|
||||
<div class="lbl">综合评价</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="val">96%</div>
|
||||
<div class="lbl">24h回复率</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="val">1,280</div>
|
||||
<div class="lbl">总咨询量</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 两个咨询按钮并排 -->
|
||||
<div class="consult-btns">
|
||||
<!-- [交互] 图文咨询按钮：点击显示咨询须知弹窗 -->
|
||||
<button class="btn-primary" onclick="showNotice('text')">💬 图文咨询</button>
|
||||
<!-- [交互] 视频咨询按钮：点击显示咨询须知弹窗 -->
|
||||
<button class="btn-outline" onclick="showNotice('video')">📹 视频咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 医生简介区域 -->
|
||||
<div class="profile-section">
|
||||
<h4>医生简介</h4>
|
||||
<p>从事心内科临床工作20余年，擅长冠心病、高血压、心律失常等心血管疾病的诊断与治疗。曾赴美国哈佛医学院进修，发表SCI论文30余篇，主持国家自然科学基金项目2项。</p>
|
||||
</div>
|
||||
|
||||
<!-- 医生擅长区域 -->
|
||||
<div class="profile-section">
|
||||
<h4>擅长方向</h4>
|
||||
<div class="tags-wrap">
|
||||
<span class="tag-item">冠心病</span>
|
||||
<span class="tag-item">高血压</span>
|
||||
<span class="tag-item">心律失常</span>
|
||||
<span class="tag-item">心力衰竭</span>
|
||||
<span class="tag-item">心肌病</span>
|
||||
<span class="tag-item">瓣膜性心脏病</span>
|
||||
<span class="tag-item">心脏康复</span>
|
||||
<span class="tag-item">二级预防</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户评价区域 -->
|
||||
<div class="profile-section">
|
||||
<h4>用户评价</h4>
|
||||
|
||||
<!-- 评价1 -->
|
||||
<div class="review-item">
|
||||
<div class="reviewer">员工A</div>
|
||||
<div class="stars">⭐⭐⭐⭐⭐</div>
|
||||
<div class="content">张医生非常耐心，详细解答了我关于高血压用药的疑问，建议很专业，感谢！</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价2 -->
|
||||
<div class="review-item">
|
||||
<div class="reviewer">员工B</div>
|
||||
<div class="stars">⭐⭐⭐⭐⭐</div>
|
||||
<div class="content">回复很及时，分析病情很到位，给出了具体的检查建议，非常满意。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价3 -->
|
||||
<div class="review-item">
|
||||
<div class="reviewer">员工C</div>
|
||||
<div class="stars">⭐⭐⭐⭐</div>
|
||||
<div class="content">专业水平很高，解释清晰易懂，下次还会来咨询。</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 查看全部评价按钮：跳转到评价列表页 -->
|
||||
<button class="view-all-btn" onclick="window.location.href='expert-reviews.html'">查看全部评价 ›</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全间距 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
</div><!-- /.page-content -->
|
||||
|
||||
<!-- 咨询须知弹窗（模态框） -->
|
||||
<div class="modal-overlay" id="noticeModal">
|
||||
<div class="modal-sheet">
|
||||
<div class="modal-title">咨询须知</div>
|
||||
<ul class="notice-list">
|
||||
<li>本平台提供的健康咨询服务仅供参考，不能替代线下医院的面诊和检查。</li>
|
||||
<li>咨询过程中请如实描述您的症状和病史，以便医生做出准确判断。</li>
|
||||
<li>图文咨询有效期为24小时，视频咨询请按预约时间准时上线。</li>
|
||||
<li>如遇紧急情况，请立即拨打120或前往最近的医院急诊就医。</li>
|
||||
</ul>
|
||||
<div class="modal-btns">
|
||||
<!-- [交互] 取消按钮：关闭弹窗 -->
|
||||
<button class="btn-cancel" onclick="closeModal('noticeModal')">取消</button>
|
||||
<!-- [交互] 确认按钮：根据咨询类型跳转到对应页面 -->
|
||||
<button class="btn-confirm" id="noticeConfirmBtn" onclick="confirmNotice()">同意并开始咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 当前选择的咨询类型
|
||||
* 'text' - 图文咨询
|
||||
* 'video' - 视频咨询
|
||||
*/
|
||||
var currentNoticeType = '';
|
||||
|
||||
/**
|
||||
* 显示咨询须知弹窗
|
||||
* @param {string} type - 咨询类型，'text'表示图文咨询，'video'表示视频咨询
|
||||
*/
|
||||
/* [交互] 显示咨询须知弹窗 */
|
||||
function showNotice(type) {
|
||||
currentNoticeType = type;
|
||||
var modal = document.getElementById('noticeModal');
|
||||
modal.classList.add('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭指定弹窗
|
||||
* @param {string} id - 弹窗元素的id
|
||||
*/
|
||||
/* [交互] 关闭弹窗 */
|
||||
function closeModal(id) {
|
||||
var modal = document.getElementById(id);
|
||||
modal.classList.remove('show');
|
||||
currentNoticeType = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* 确认咨询须知后跳转到对应页面
|
||||
* text类型 → text-chat.html
|
||||
* video类型 → video-booking.html
|
||||
*/
|
||||
/* [交互] 确认须知后根据类型跳转 */
|
||||
function confirmNotice() {
|
||||
if (currentNoticeType === 'text') {
|
||||
window.location.href = 'text-chat.html';
|
||||
} else if (currentNoticeType === 'video') {
|
||||
window.location.href = 'video-booking.html';
|
||||
}
|
||||
}
|
||||
|
||||
/* [交互] 点击弹窗遮罩层关闭弹窗 */
|
||||
document.getElementById('noticeModal').addEventListener('click', function(e) {
|
||||
if (e.target === this) {
|
||||
closeModal('noticeModal');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,550 @@
|
||||
<!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;
|
||||
min-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;
|
||||
}
|
||||
|
||||
/* ========== 状态栏 ========== */
|
||||
.status-bar {
|
||||
height: 54px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 0 30px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.status-bar-left { font-size: 15px; font-weight: 700; }
|
||||
.status-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.status-bar-right svg { width: 18px; height: 18px; }
|
||||
|
||||
/* ========== 导航栏 ========== */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 15px;
|
||||
color: #1677ff;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
.nav-back svg { width: 20px; height: 20px; }
|
||||
.nav-title {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
/* ========== 滚动内容区域 ========== */
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ========== 总体评分卡片 ========== */
|
||||
.rating-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
margin: 12px 16px;
|
||||
padding: 20px 16px 16px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
|
||||
}
|
||||
.rating-top {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
/* 左侧评分区 */
|
||||
.rating-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
}
|
||||
.rating-score {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
line-height: 1;
|
||||
}
|
||||
.rating-stars-main {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
margin: 6px 0 4px;
|
||||
}
|
||||
.rating-stars-main .star {
|
||||
color: #faad14;
|
||||
font-size: 16px;
|
||||
}
|
||||
.rating-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
/* 右侧评分条区 */
|
||||
.rating-right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.bar-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.bar-label {
|
||||
min-width: 28px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.bar-track {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.bar-fill {
|
||||
height: 100%;
|
||||
background: #faad14;
|
||||
border-radius: 4px;
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
.bar-percent {
|
||||
min-width: 30px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
/* 底部维度评分 */
|
||||
.rating-dimensions {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.dimension-item {
|
||||
text-align: center;
|
||||
}
|
||||
.dimension-score {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.dimension-name {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-top: 2px;
|
||||
}
|
||||
/* 评价总数 */
|
||||
.rating-total {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
/* ========== 评价列表区 ========== */
|
||||
.reviews-section {
|
||||
padding: 0 16px 24px;
|
||||
}
|
||||
.reviews-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
/* 单条评价项 */
|
||||
.review-item {
|
||||
background: #f8f9fa;
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.review-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.review-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.review-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #e6f4ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #1677ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.review-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.review-date {
|
||||
font-size: 12px;
|
||||
color: #bbb;
|
||||
}
|
||||
.review-stars {
|
||||
display: flex;
|
||||
gap: 1px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.review-stars .star {
|
||||
color: #faad14;
|
||||
font-size: 13px;
|
||||
}
|
||||
.review-stars .star.empty {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.review-text {
|
||||
font-size: 13px;
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.review-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.review-tag {
|
||||
font-size: 11px;
|
||||
background: #e8f4ff;
|
||||
color: #1677ff;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
/* ========== 底部安全区 ========== */
|
||||
.bottom-safe {
|
||||
height: 34px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar-left">9:41</div>
|
||||
<div class="status-bar-right">
|
||||
<!-- 信号图标 -->
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M2 17h2v4H2zm4-4h2v8H6zm4-4h2v12h-2zm4-4h2v16h-2zm4-4h2v20h-2z"/></svg>
|
||||
<!-- WiFi图标 -->
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
|
||||
<!-- 电池图标 -->
|
||||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M17 5H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 10H3V7h14v8zm3-8v6h2V7h-2z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回按钮，跳转到专家详情页面 -->
|
||||
<div class="nav-back" onclick="goBack()">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="nav-title">用户评价</div>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容区域 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 总体评分卡片 -->
|
||||
<div class="rating-card">
|
||||
<div class="rating-top">
|
||||
<!-- 左侧：综合评分 -->
|
||||
<div class="rating-left">
|
||||
<div class="rating-score">4.9</div>
|
||||
<div class="rating-stars-main">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="rating-label">综合评分</div>
|
||||
</div>
|
||||
<!-- 右侧：各星级评分条 -->
|
||||
<div class="rating-right">
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">5星</span>
|
||||
<div class="bar-track"><div class="bar-fill" style="width: 88%;"></div></div>
|
||||
<span class="bar-percent">88%</span>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">4星</span>
|
||||
<div class="bar-track"><div class="bar-fill" style="width: 9%;"></div></div>
|
||||
<span class="bar-percent">9%</span>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">3星</span>
|
||||
<div class="bar-track"><div class="bar-fill" style="width: 3%;"></div></div>
|
||||
<span class="bar-percent">3%</span>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">2星</span>
|
||||
<div class="bar-track"><div class="bar-fill" style="width: 0%;"></div></div>
|
||||
<span class="bar-percent">0%</span>
|
||||
</div>
|
||||
<div class="bar-row">
|
||||
<span class="bar-label">1星</span>
|
||||
<div class="bar-track"><div class="bar-fill" style="width: 0%;"></div></div>
|
||||
<span class="bar-percent">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部三列维度评分 -->
|
||||
<div class="rating-dimensions">
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.9</div>
|
||||
<div class="dimension-name">专业性</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.8</div>
|
||||
<div class="dimension-name">回复速度</div>
|
||||
</div>
|
||||
<div class="dimension-item">
|
||||
<div class="dimension-score">4.9</div>
|
||||
<div class="dimension-name">服务态度</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 评价总数 -->
|
||||
<div class="rating-total">共 1,280 条评价</div>
|
||||
</div>
|
||||
|
||||
<!-- 全部评价列表 -->
|
||||
<div class="reviews-section">
|
||||
<div class="reviews-title">全部评价</div>
|
||||
|
||||
<!-- 评价1：员工A -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">A</div>
|
||||
<span class="review-name">员工A</span>
|
||||
</div>
|
||||
<span class="review-date">2026-04-05</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">张医生非常耐心，详细询问了我的症状和病史，给出了非常专业的建议。整个问诊过程让我很安心，感觉比线下看病还要细致。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">专业</span>
|
||||
<span class="review-tag">耐心</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价2：员工B -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">B</div>
|
||||
<span class="review-name">员工B</span>
|
||||
</div>
|
||||
<span class="review-date">2026-04-03</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">回复很及时，基本上几分钟就能收到回复。对我提出的每个问题都给出了详细的解答，还主动提醒了一些注意事项。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">回复及时</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价3：员工C -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">C</div>
|
||||
<span class="review-name">员工C</span>
|
||||
</div>
|
||||
<span class="review-date">2026-03-30</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star empty">★</span>
|
||||
</div>
|
||||
<div class="review-text">专业水平很高，能够准确地判断问题所在。给出的用药建议也很合理，不会过度用药。整体体验不错。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价4：员工D -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">D</div>
|
||||
<span class="review-name">员工D</span>
|
||||
</div>
|
||||
<span class="review-date">2026-03-28</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">张医生对病情分析得非常透彻，不仅解决了我当前的问题，还给出了长期的健康管理建议。非常负责任的好医生！</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">专业</span>
|
||||
<span class="review-tag">负责任</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价5：员工E -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">E</div>
|
||||
<span class="review-name">员工E</span>
|
||||
</div>
|
||||
<span class="review-date">2026-03-25</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">第一次线上问诊，本来还有些担心，没想到张医生特别耐心，把每一个问题都解释得很清楚，让我对线上问诊有了信心。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">耐心</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价6：员工F -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">F</div>
|
||||
<span class="review-name">员工F</span>
|
||||
</div>
|
||||
<span class="review-date">2026-03-22</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star empty">★</span>
|
||||
</div>
|
||||
<div class="review-text">回复速度很快，问诊过程非常顺畅。给出的方案也很实用，已经按照建议调整了作息，感觉好多了。</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价7：员工G -->
|
||||
<div class="review-item">
|
||||
<div class="review-header">
|
||||
<div class="review-user">
|
||||
<div class="review-avatar">G</div>
|
||||
<span class="review-name">员工G</span>
|
||||
</div>
|
||||
<span class="review-date">2026-03-18</span>
|
||||
</div>
|
||||
<div class="review-stars">
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<div class="review-text">针对我的具体情况给出了个性化的建议，不是那种千篇一律的回复。推荐的调理方案很实用，已经坚持了两周，效果明显。</div>
|
||||
<div class="review-tags">
|
||||
<span class="review-tag">个性化</span>
|
||||
<span class="review-tag">实用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区 -->
|
||||
<div class="bottom-safe"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 返回按钮点击事件
|
||||
* 跳转到专家详情页面
|
||||
*/
|
||||
/* [交互] 返回到专家详情页面 */
|
||||
function goBack() {
|
||||
window.location.href = 'expert-profile.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,492 @@
|
||||
<!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; min-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; }
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; height: 44px; background: #fff; flex-shrink: 0; font-size: 14px; font-weight: 600; }
|
||||
.status-bar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar { display: flex; align-items: center; padding: 10px 16px; background: #fff; flex-shrink: 0; position: relative; }
|
||||
.nav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background 0.2s; }
|
||||
.nav-back:hover { background: #f5f5f5; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-bar { padding: 12px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.search-input-wrap { display: flex; align-items: center; gap: 8px; background: #f5f5f5; border-radius: 24px; padding: 8px 16px; }
|
||||
.search-input-wrap svg { flex-shrink: 0; color: #999; }
|
||||
.search-input-wrap input { flex: 1; border: none; background: transparent; font-size: 14px; outline: none; color: #333; }
|
||||
.search-input-wrap input::placeholder { color: #bbb; }
|
||||
|
||||
/* 批注卡片 */
|
||||
.annotation-card { margin: 8px 16px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #ad8b00; line-height: 1.5; }
|
||||
.annotation-card::before { content: '💡 '; }
|
||||
|
||||
/* 主Tab切换 */
|
||||
.filter-tabs { display: flex; gap: 0; background: #fff; border-bottom: 1px solid #f0f0f0; overflow-x: auto; flex-shrink: 0; }
|
||||
.filter-tab { flex: 1; padding: 10px 16px; font-size: 14px; color: #666; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; text-align: center; }
|
||||
.filter-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* 内容区域 */
|
||||
.tab-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.tab-panel { display: none; }
|
||||
.tab-panel.active { display: block; }
|
||||
|
||||
/* ===== 医院面板 ===== */
|
||||
.hospital-list { padding: 10px 0; }
|
||||
.hospital-card { margin: 0 16px 10px; background: #fff; border-radius: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; overflow: hidden; padding-right: 12px; transition: transform 0.15s; }
|
||||
.hospital-card:hover { transform: scale(0.98); }
|
||||
.hospital-card:active { transform: scale(0.96); }
|
||||
.hospital-icon { width: 72px; height: 72px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 14px 0 0 14px; }
|
||||
.hospital-info { flex: 1; padding: 10px 0; min-width: 0; }
|
||||
.hospital-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
|
||||
.hospital-name { font-size: 15px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hospital-tag { font-size: 10px; background: #e6f4ff; color: #1677ff; padding: 1px 6px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
|
||||
.hospital-meta { font-size: 12px; color: #999; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; }
|
||||
.hospital-addr { font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.hospital-arrow { color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* ===== 科室面板（左右分栏） ===== */
|
||||
#panel-dept { display: none; flex-direction: row; height: 100%; min-height: 500px; }
|
||||
#panel-dept.active { display: flex; }
|
||||
/* 科室左侧导航 */
|
||||
.dept-left-nav { width: 88px; flex-shrink: 0; background: #f7f8fa; overflow-y: auto; border-right: 1px solid #f0f0f0; }
|
||||
.dept-cat { padding: 14px 12px; font-size: 13px; color: #666; cursor: pointer; text-align: center; position: relative; transition: all 0.2s; border-left: 3px solid transparent; }
|
||||
.dept-cat.active { background: #fff; color: #1677ff; font-weight: 600; border-left-color: #1677ff; }
|
||||
.dept-cat:hover:not(.active) { background: #f0f1f3; }
|
||||
|
||||
/* 科室右侧内容区 */
|
||||
.dept-right-content { flex: 1; overflow-y: auto; padding: 16px 12px; background: #fff; }
|
||||
.dept-grid { display: none; flex-wrap: wrap; gap: 10px; }
|
||||
.dept-grid.active { display: flex; }
|
||||
.dept-item { width: calc(50% - 5px); background: #f7f8fa; border-radius: 10px; padding: 14px 10px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.2s; font-size: 13px; color: #333; }
|
||||
.dept-item:hover { background: #e6f4ff; color: #1677ff; }
|
||||
.dept-item:active { transform: scale(0.96); }
|
||||
.dept-icon { font-size: 18px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 疾病面板 ===== */
|
||||
/* 疾病分类横向Tab */
|
||||
.disease-cat-tabs { display: flex; gap: 0; overflow-x: auto; flex-shrink: 0; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 0 8px; }
|
||||
.disease-cat-tabs::-webkit-scrollbar { display: none; }
|
||||
.disease-cat-tab { padding: 10px 14px; font-size: 13px; color: #666; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.disease-cat-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* 疾病列表 */
|
||||
.disease-list { display: none; padding: 10px 0; }
|
||||
.disease-list.active { display: block; }
|
||||
.disease-item { margin: 0 16px 8px; background: #fff; border-radius: 12px; padding: 13px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.15s; }
|
||||
.disease-item:hover { background: #f0f7ff; }
|
||||
.disease-item:active { transform: scale(0.98); }
|
||||
.disease-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.disease-name { font-size: 14px; color: #333; flex: 1; }
|
||||
.disease-arrow { color: #ccc; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>9:41</span>
|
||||
<div class="status-bar-right">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="3" width="3" height="9" rx="1"/><rect x="4.5" y="1.5" width="3" height="10.5" rx="1"/><rect x="9" y="0" width="3" height="12" rx="1"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.4C5.6 2.4 3.4 3.3 1.8 4.9L0 3.1C2 1.1 4.9 0 8 0s6 1.1 8 3.1L14.2 4.9C12.6 3.3 10.4 2.4 8 2.4zM8 6.4c-1.6 0-3 .6-4.1 1.6L2.1 6.2C3.6 4.8 5.7 4 8 4s4.4.8 5.9 2.2L12.1 8C11 7 9.6 6.4 8 6.4zM8 10.4c-.8 0-1.6.3-2.1.9L8 14l2.1-2.7c-.5-.6-1.3-.9-2.1-.9z"/></svg>
|
||||
<svg width="22" height="12" viewBox="0 0 22 12" fill="currentColor"><rect x="0" y="1" width="18" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="4" width="2" height="4" rx="1"/><rect x="2" y="3" width="12" height="6" rx="1"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<!-- [交互] 点击返回按钮跳转到index.html -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="window.location.href='index.html'">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">找专家</div>
|
||||
</div>
|
||||
|
||||
<!-- 搜索栏 -->
|
||||
<div class="search-bar">
|
||||
<div class="search-input-wrap">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#999" stroke-width="1.5"><circle cx="7" cy="7" r="5"/><path d="M11 11l3.5 3.5"/></svg>
|
||||
<input type="text" placeholder="搜索医院、科室、疾病、医生" />
|
||||
</div>
|
||||
<!-- 批注卡片：说明搜索功能 -->
|
||||
<div class="annotation-card">搜索基于 ElasticSearch 模糊匹配，支持拼音首字母、同义词扩展</div>
|
||||
</div>
|
||||
|
||||
<!-- 主Tab -->
|
||||
<!-- [交互] 点击Tab切换面板 -->
|
||||
<div class="filter-tabs">
|
||||
<div class="filter-tab active" onclick="switchFindTab(this,'panel-hospital')">全部医院</div>
|
||||
<div class="filter-tab" onclick="switchFindTab(this,'panel-dept')">全部科室</div>
|
||||
<div class="filter-tab" onclick="switchFindTab(this,'panel-disease')">全部疾病</div>
|
||||
</div>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<div class="tab-content">
|
||||
|
||||
<!-- ===== 医院面板 ===== -->
|
||||
<div id="panel-hospital" class="tab-panel active">
|
||||
<div class="hospital-list">
|
||||
<!-- [交互] 点击医院卡片跳转到hospital-detail.html -->
|
||||
<div class="hospital-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="hospital-icon" style="background:#e6f4ff;">🏥</div>
|
||||
<div class="hospital-info">
|
||||
<div class="hospital-name-row"><span class="hospital-name">北京协和医院</span><span class="hospital-tag">三甲</span></div>
|
||||
<div class="hospital-meta"><span>📍 2.3km</span><span>👨⚕️ 128位专家</span></div>
|
||||
<div class="hospital-addr">北京市东城区帅府园1号</div>
|
||||
</div>
|
||||
<div class="hospital-arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="hospital-icon" style="background:#fff7e6;">🏥</div>
|
||||
<div class="hospital-info">
|
||||
<div class="hospital-name-row"><span class="hospital-name">上海瑞金医院</span><span class="hospital-tag">三甲</span></div>
|
||||
<div class="hospital-meta"><span>📍 1058km</span><span>👨⚕️ 96位专家</span></div>
|
||||
<div class="hospital-addr">上海市黄浦区瑞金二路197号</div>
|
||||
</div>
|
||||
<div class="hospital-arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="hospital-icon" style="background:#f6ffed;">🏥</div>
|
||||
<div class="hospital-info">
|
||||
<div class="hospital-name-row"><span class="hospital-name">广州中山医院</span><span class="hospital-tag">三甲</span></div>
|
||||
<div class="hospital-meta"><span>📍 1892km</span><span>👨⚕️ 85位专家</span></div>
|
||||
<div class="hospital-addr">广州市越秀区中山二路58号</div>
|
||||
</div>
|
||||
<div class="hospital-arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="hospital-icon" style="background:#f9f0ff;">🏥</div>
|
||||
<div class="hospital-info">
|
||||
<div class="hospital-name-row"><span class="hospital-name">北京天坛医院</span><span class="hospital-tag">三甲</span></div>
|
||||
<div class="hospital-meta"><span>📍 5.1km</span><span>👨⚕️ 72位专家</span></div>
|
||||
<div class="hospital-addr">北京市丰台区南四环西路119号</div>
|
||||
</div>
|
||||
<div class="hospital-arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="window.location.href='hospital-detail.html'">
|
||||
<div class="hospital-icon" style="background:#fff0f6;">🏥</div>
|
||||
<div class="hospital-info">
|
||||
<div class="hospital-name-row"><span class="hospital-name">复旦华山医院</span><span class="hospital-tag">三甲</span></div>
|
||||
<div class="hospital-meta"><span>📍 1062km</span><span>👨⚕️ 91位专家</span></div>
|
||||
<div class="hospital-addr">上海市静安区乌鲁木齐中路12号</div>
|
||||
</div>
|
||||
<div class="hospital-arrow"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 科室面板（左右分栏） ===== -->
|
||||
<!-- [交互] 左侧点击一级分类切换右侧二级科室 -->
|
||||
<div id="panel-dept" class="tab-panel">
|
||||
<div class="dept-left-nav">
|
||||
<div class="dept-cat active" onclick="switchDeptCat(this,'dept-neike')">内科</div>
|
||||
<div class="dept-cat" onclick="switchDeptCat(this,'dept-waike')">外科</div>
|
||||
<div class="dept-cat" onclick="switchDeptCat(this,'dept-fuchan')">妇产科</div>
|
||||
<div class="dept-cat" onclick="switchDeptCat(this,'dept-erke')">儿科</div>
|
||||
<div class="dept-cat" onclick="switchDeptCat(this,'dept-yanerbi')">眼耳鼻喉</div>
|
||||
<div class="dept-cat" onclick="switchDeptCat(this,'dept-pifu')">皮肤科</div>
|
||||
</div>
|
||||
<div class="dept-right-content">
|
||||
<!-- [交互] 点击二级科室跳转到expert-list.html -->
|
||||
<div id="dept-neike" class="dept-grid active">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">❤️</span><span>心内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><span>神经内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔬</span><span>内分泌科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫁</span><span>消化内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💨</span><span>呼吸科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫘</span><span>肾内科</span></div>
|
||||
</div>
|
||||
<div id="dept-waike" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦴</span><span>骨科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🔪</span><span>普通外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧠</span><span>神经外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🫀</span><span>泌尿外科</span></div>
|
||||
</div>
|
||||
<div id="dept-fuchan" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👩</span><span>妇科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🤰</span><span>产科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧬</span><span>生殖科</span></div>
|
||||
</div>
|
||||
<div id="dept-erke" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👶</span><span>儿内科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🩹</span><span>儿外科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🍼</span><span>新生儿科</span></div>
|
||||
</div>
|
||||
<div id="dept-yanerbi" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👁️</span><span>眼科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">👂</span><span>耳鼻喉科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🦷</span><span>口腔科</span></div>
|
||||
</div>
|
||||
<div id="dept-pifu" class="dept-grid">
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">🧴</span><span>皮肤科</span></div>
|
||||
<div class="dept-item" onclick="window.location.href='expert-list.html'"><span class="dept-icon">💊</span><span>性病科</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 疾病面板 ===== -->
|
||||
<div id="panel-disease" class="tab-panel">
|
||||
<!-- [交互] 点击疾病分类Tab切换列表 -->
|
||||
<div class="disease-cat-tabs">
|
||||
<div class="disease-cat-tab active" onclick="switchDiseaseTab(this,'dis-cardio')">心血管疾病</div>
|
||||
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-endo')">内分泌疾病</div>
|
||||
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-bone')">骨骼肌肉</div>
|
||||
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-neuro')">神经系统</div>
|
||||
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-digest')">消化系统</div>
|
||||
<div class="disease-cat-tab" onclick="switchDiseaseTab(this,'dis-resp')">呼吸系统</div>
|
||||
</div>
|
||||
<!-- [交互] 点击疾病项跳转到expert-list.html -->
|
||||
<!-- 心血管疾病 -->
|
||||
<div id="dis-cardio" class="disease-list active">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff4d4f;"></div>
|
||||
<span class="disease-name">冠心病</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff7a45;"></div>
|
||||
<span class="disease-name">高血压</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffa940;"></div>
|
||||
<span class="disease-name">心律失常</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffc53d;"></div>
|
||||
<span class="disease-name">心肌炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff85c0;"></div>
|
||||
<span class="disease-name">心力衰竭</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内分泌疾病 -->
|
||||
<div id="dis-endo" class="disease-list">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#597ef7;"></div>
|
||||
<span class="disease-name">糖尿病</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#73d13d;"></div>
|
||||
<span class="disease-name">甲状腺疾病</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff9c6e;"></div>
|
||||
<span class="disease-name">肥胖症</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#b37feb;"></div>
|
||||
<span class="disease-name">痛风</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#5cdbd3;"></div>
|
||||
<span class="disease-name">骨质疏松</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 骨骼肌肉 -->
|
||||
<div id="dis-bone" class="disease-list">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff7a45;"></div>
|
||||
<span class="disease-name">颈椎病</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffc53d;"></div>
|
||||
<span class="disease-name">腰椎间盘突出</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff85c0;"></div>
|
||||
<span class="disease-name">关节炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#597ef7;"></div>
|
||||
<span class="disease-name">骨折</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#73d13d;"></div>
|
||||
<span class="disease-name">肩周炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 神经系统 -->
|
||||
<div id="dis-neuro" class="disease-list">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#b37feb;"></div>
|
||||
<span class="disease-name">头痛偏头痛</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#5cdbd3;"></div>
|
||||
<span class="disease-name">失眠</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff9c6e;"></div>
|
||||
<span class="disease-name">眩晕</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff4d4f;"></div>
|
||||
<span class="disease-name">帕金森</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffa940;"></div>
|
||||
<span class="disease-name">癫痫</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 消化系统 -->
|
||||
<div id="dis-digest" class="disease-list">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#73d13d;"></div>
|
||||
<span class="disease-name">胃炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff7a45;"></div>
|
||||
<span class="disease-name">胃溃疡</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#597ef7;"></div>
|
||||
<span class="disease-name">结肠炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffc53d;"></div>
|
||||
<span class="disease-name">肝炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#b37feb;"></div>
|
||||
<span class="disease-name">胆囊炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 呼吸系统 -->
|
||||
<div id="dis-resp" class="disease-list">
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#5cdbd3;"></div>
|
||||
<span class="disease-name">慢性咳嗽</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff85c0;"></div>
|
||||
<span class="disease-name">哮喘</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff4d4f;"></div>
|
||||
<span class="disease-name">慢阻肺</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ff9c6e;"></div>
|
||||
<span class="disease-name">肺炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div class="disease-item" onclick="window.location.href='expert-list.html'">
|
||||
<div class="disease-dot" style="background:#ffa940;"></div>
|
||||
<span class="disease-name">支气管炎</span>
|
||||
<svg class="disease-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /tab-content -->
|
||||
</div><!-- /phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换主Tab面板（全部医院/全部科室/全部疾病）
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} panelId - 目标面板的id
|
||||
*/
|
||||
function switchFindTab(el, panelId) {
|
||||
// 切换Tab激活状态
|
||||
document.querySelectorAll('.filter-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
|
||||
// 切换面板显示
|
||||
document.querySelectorAll('.tab-panel').forEach(function(p) {
|
||||
p.classList.remove('active');
|
||||
});
|
||||
var target = document.getElementById(panelId);
|
||||
if (target) {
|
||||
target.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换科室一级分类（左侧导航 → 右侧二级科室网格）
|
||||
* @param {HTMLElement} el - 被点击的一级分类元素
|
||||
* @param {string} catId - 目标二级科室网格的id
|
||||
*/
|
||||
function switchDeptCat(el, catId) {
|
||||
// 切换左侧分类激活状态
|
||||
document.querySelectorAll('.dept-cat').forEach(function(c) {
|
||||
c.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
|
||||
// 切换右侧科室网格显示
|
||||
document.querySelectorAll('.dept-grid').forEach(function(g) {
|
||||
g.classList.remove('active');
|
||||
});
|
||||
var target = document.getElementById(catId);
|
||||
if (target) {
|
||||
target.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换疾病一级分类Tab（横向滚动Tab → 疾病列表）
|
||||
* @param {HTMLElement} el - 被点击的疾病分类Tab
|
||||
* @param {string} catId - 目标疾病列表的id
|
||||
*/
|
||||
function switchDiseaseTab(el, catId) {
|
||||
// 切换疾病分类Tab激活状态
|
||||
document.querySelectorAll('.disease-cat-tab').forEach(function(t) {
|
||||
t.classList.remove('active');
|
||||
});
|
||||
el.classList.add('active');
|
||||
|
||||
// 切换疾病列表显示
|
||||
document.querySelectorAll('.disease-list').forEach(function(l) {
|
||||
l.classList.remove('active');
|
||||
});
|
||||
var target = document.getElementById(catId);
|
||||
if (target) {
|
||||
target.classList.add('active');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,322 @@
|
||||
<!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; min-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; }
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 0; height: 44px; background: #fff; flex-shrink: 0; font-size: 14px; font-weight: 600; }
|
||||
.status-bar-right { display: flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
|
||||
/* ===== 导航栏 ===== */
|
||||
.nav-bar { display: flex; align-items: center; padding: 10px 16px; background: #fff; flex-shrink: 0; position: relative; }
|
||||
.nav-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: background 0.2s; }
|
||||
.nav-back:hover { background: #f5f5f5; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* ===== 医院实景图区域 ===== */
|
||||
.hospital-photo { width: 100%; height: 160px; background: linear-gradient(135deg, #c9d6e3 0%, #a8bfd4 50%, #8faec8 100%); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #6a8aaa; font-weight: 500; flex-shrink: 0; }
|
||||
|
||||
/* ===== 医院信息卡片 ===== */
|
||||
.hospital-detail-card { margin: 12px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||||
.hospital-detail-card .hd-name { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.hospital-detail-card .hd-level { display: inline-block; background: #1677ff; color: #fff; font-size: 12px; padding: 2px 10px; border-radius: 20px; margin-bottom: 10px; }
|
||||
.hospital-detail-card .hd-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; margin-bottom: 6px; }
|
||||
.hd-nav-btn { margin-top: 10px; background: #1677ff; color: #fff; border: none; border-radius: 20px; padding: 6px 18px; font-size: 13px; cursor: pointer; transition: opacity 0.2s; }
|
||||
.hd-nav-btn:hover { opacity: 0.85; }
|
||||
.hd-nav-btn:active { opacity: 0.7; }
|
||||
|
||||
/* ===== 医院简介卡片 ===== */
|
||||
.hospital-intro-card { margin: 10px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||||
.hospital-intro-card .hi-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.hospital-intro-text { font-size: 13px; color: #555; line-height: 1.75; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
.hospital-intro-text.expanded { display: block; -webkit-line-clamp: unset; }
|
||||
.hi-toggle-btn { font-size: 13px; color: #1677ff; cursor: pointer; margin-top: 6px; display: inline-block; }
|
||||
.hi-toggle-btn:hover { text-decoration: underline; }
|
||||
|
||||
/* ===== 分隔线 ===== */
|
||||
.section-divider { height: 8px; background: #f5f5f5; margin-top: 12px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 本院专家标题 ===== */
|
||||
.section-title { padding: 14px 16px 6px; font-size: 16px; font-weight: 700; color: #1a1a1a; background: #fff; }
|
||||
|
||||
/* ===== 排序栏 ===== */
|
||||
.sort-bar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.sort-bar .sort-label { font-size: 12px; color: #999; white-space: nowrap; }
|
||||
.sort-btn { font-size: 12px; padding: 4px 12px; border-radius: 20px; border: 1px solid #e0e0e0; background: #fff; color: #666; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
|
||||
.sort-btn.active { background: #1677ff; color: #fff; border-color: #1677ff; }
|
||||
|
||||
/* ===== 搜索栏 ===== */
|
||||
.list-search-bar { padding: 8px 16px; background: #f8f9fa; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.list-search-bar .lsb-wrap { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e8e8e8; border-radius: 20px; padding: 7px 14px; }
|
||||
.list-search-bar .lsb-icon { font-size: 14px; color: #bbb; }
|
||||
.list-search-bar .lsb-wrap input { flex: 1; border: none; background: transparent; font-size: 13px; outline: none; color: #1a1a1a; }
|
||||
.list-search-bar .lsb-wrap input::placeholder { color: #bbb; }
|
||||
.lsb-clear { font-size: 14px; color: #bbb; cursor: pointer; display: none; background: none; border: none; padding: 0; }
|
||||
|
||||
/* ===== 专家卡片列表 ===== */
|
||||
.expert-list-container { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
.expert-card { display: flex; gap: 12px; padding: 14px; background: #fff; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: box-shadow 0.2s; }
|
||||
.expert-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
||||
.expert-card:active { background: #f8f9fa; }
|
||||
/* 头像 */
|
||||
.ec-avatar { width: 52px; height: 52px; border-radius: 50%; background: #e6f0ff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; color: #1677ff; }
|
||||
/* 信息区 */
|
||||
.ec-info { flex: 1; min-width: 0; }
|
||||
.ec-row1 { display: flex; align-items: center; gap: 6px; }
|
||||
.ec-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.ec-title-tag { font-size: 11px; color: #1677ff; background: #e6f0ff; padding: 1px 6px; border-radius: 4px; }
|
||||
.ec-hospital { font-size: 12px; color: #888; margin-top: 4px; }
|
||||
.ec-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
|
||||
.ec-tag { font-size: 11px; color: #666; background: #f5f5f5; padding: 2px 8px; border-radius: 4px; }
|
||||
.ec-stats { display: flex; gap: 12px; margin-top: 8px; font-size: 11px; color: #999; }
|
||||
.ec-stat-val { color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ===== 空状态 ===== */
|
||||
.expert-empty { text-align: center; padding: 40px 16px; color: #bbb; display: none; }
|
||||
.expert-empty .ee-icon { font-size: 40px; margin-bottom: 10px; }
|
||||
.expert-empty .ee-text { font-size: 14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>10:24</span>
|
||||
<div class="status-bar-right">
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><rect x="0" y="3" width="3" height="9" rx="1"/><rect x="4.5" y="1.5" width="3" height="10.5" rx="1"/><rect x="9" y="0" width="3" height="12" rx="1"/></svg>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12" fill="currentColor"><path d="M8 2.4C5.6 2.4 3.4 3.3 1.8 4.9L0 3.1C2 1.1 4.9 0 8 0s6 1.1 8 3.1L14.2 4.9C12.6 3.3 10.4 2.4 8 2.4zM8 6.4c-1.6 0-3 .6-4.1 1.6L2.1 6.2C3.6 4.8 5.7 4 8 4s4.4.8 5.9 2.2L12.1 8C11 7 9.6 6.4 8 6.4zM8 10.4c-.8 0-1.6.3-2.1.9L8 14l2.1-2.7c-.5-.6-1.3-.9-2.1-.9z"/></svg>
|
||||
<svg width="22" height="12" viewBox="0 0 22 12" fill="currentColor"><rect x="0" y="1" width="18" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/><rect x="19" y="4" width="2" height="4" rx="1"/><rect x="2" y="3" width="12" height="6" rx="1"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<!-- [交互] 点击返回按钮跳转到 find-expert.html -->
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="window.location.href='find-expert.html'">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round"><path d="M15 18l-6-6 6-6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">医院详情</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院实景图区域 -->
|
||||
<div class="hospital-photo">医院实景图</div>
|
||||
|
||||
<!-- 医院信息卡片 -->
|
||||
<div class="hospital-detail-card">
|
||||
<div class="hd-name">北京协和医院</div>
|
||||
<span class="hd-level">三甲</span>
|
||||
<div class="hd-row">
|
||||
<span>📍</span>
|
||||
<span>北京市西城区大木仓胡同41号</span>
|
||||
</div>
|
||||
<div class="hd-row">
|
||||
<span>📏</span>
|
||||
<span>距您 2.3 km</span>
|
||||
</div>
|
||||
<!-- [交互] 点击导航按钮（原型演示，无实际跳转） -->
|
||||
<button class="hd-nav-btn" onclick="alert('正在为您导航...')">导航</button>
|
||||
</div>
|
||||
|
||||
<!-- 医院简介卡片 -->
|
||||
<div class="hospital-intro-card">
|
||||
<div class="hi-title">医院简介</div>
|
||||
<div class="hospital-intro-text" id="introText">北京协和医院是集医疗、教学、科研于一体的大型综合性三级甲等医院，始建于1921年。拥有国家级重点学科20个，博士点36个，年门诊量300余万人次。在历次全国医院综合排名中名列前茅，是国内顶级医疗机构之一。</div>
|
||||
<!-- [交互] 点击展开/收起简介文本 -->
|
||||
<span class="hi-toggle-btn" id="introToggleBtn" onclick="toggleHospitalIntro()">展开</span>
|
||||
</div>
|
||||
|
||||
<!-- 分隔线 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 本院专家标题 -->
|
||||
<div class="section-title">本院专家</div>
|
||||
|
||||
<!-- [交互] 排序栏 - 点击切换排序方式 -->
|
||||
<div class="sort-bar">
|
||||
<span class="sort-label">排序：</span>
|
||||
<button class="sort-btn active" onclick="setSortOrder(this)">好评优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">热度优先</button>
|
||||
<button class="sort-btn" onclick="setSortOrder(this)">回复率</button>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 搜索栏 - 输入关键词过滤专家列表 -->
|
||||
<div class="list-search-bar">
|
||||
<div class="lsb-wrap">
|
||||
<span class="lsb-icon">🔍</span>
|
||||
<input type="text" id="expertSearchInput" placeholder="搜索医生姓名" oninput="filterExperts(this, 'expertListContainer')">
|
||||
<button class="lsb-clear" id="expertClearBtn" onclick="clearSearch('expertSearchInput', 'expertListContainer', 'expertClearBtn')">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 专家列表容器 -->
|
||||
<div class="expert-list-container" id="expertListContainer">
|
||||
|
||||
<!-- [交互] 专家卡片1 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="张建国" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">张建国</span>
|
||||
<span class="ec-title-tag">主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京协和医院·心内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">冠心病</span>
|
||||
<span class="ec-tag">高血压</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">1280</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">96%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片2 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="陈美华" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👩‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">陈美华</span>
|
||||
<span class="ec-title-tag">主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京协和医院·神经内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">头痛</span>
|
||||
<span class="ec-tag">失眠</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.9</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">2100</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">98%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片3 - 点击跳转到专家详情页 -->
|
||||
<div class="expert-card" data-name="刘海波" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="ec-avatar">👨‍⚕️</div>
|
||||
<div class="ec-info">
|
||||
<div class="ec-row1">
|
||||
<span class="ec-name">刘海波</span>
|
||||
<span class="ec-title-tag">副主任医师</span>
|
||||
</div>
|
||||
<div class="ec-hospital">北京协和医院·消化内科</div>
|
||||
<div class="ec-tags">
|
||||
<span class="ec-tag">胃炎</span>
|
||||
<span class="ec-tag">结肠炎</span>
|
||||
</div>
|
||||
<div class="ec-stats">
|
||||
<span>⭐ <span class="ec-stat-val">4.7</span>分</span>
|
||||
<span>💬 <span class="ec-stat-val">430</span>次</span>
|
||||
<span>✉ 回复率 <span class="ec-stat-val">85%</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 空状态提示（搜索无结果时显示） -->
|
||||
<div class="expert-empty" id="expertEmpty">
|
||||
<div class="ee-icon">🔍</div>
|
||||
<div class="ee-text">未找到匹配的专家</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
|
||||
<script>
|
||||
/**
|
||||
* [交互] 展开/收起医院简介
|
||||
* 切换简介文本的展开/收起状态，同时更新按钮文字
|
||||
*/
|
||||
function toggleHospitalIntro() {
|
||||
var textEl = document.getElementById('introText');
|
||||
var btnEl = document.getElementById('introToggleBtn');
|
||||
// 判断当前状态并切换
|
||||
if (textEl.classList.contains('expanded')) {
|
||||
textEl.classList.remove('expanded');
|
||||
btnEl.textContent = '展开';
|
||||
} else {
|
||||
textEl.classList.add('expanded');
|
||||
btnEl.textContent = '收起';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* [交互] 排序按钮切换
|
||||
* 点击某个排序按钮时，移除其他按钮的激活状态，激活当前按钮
|
||||
* @param {HTMLElement} el - 被点击的排序按钮元素
|
||||
*/
|
||||
function setSortOrder(el) {
|
||||
// 移除所有排序按钮的激活状态
|
||||
document.querySelectorAll('.sort-btn').forEach(function(btn) {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
// 激活当前点击的按钮
|
||||
el.classList.add('active');
|
||||
}
|
||||
|
||||
/**
|
||||
* [交互] 搜索过滤专家列表
|
||||
* 根据输入框内容实时过滤专家卡片，无匹配结果时显示空状态
|
||||
* @param {HTMLInputElement} input - 搜索输入框元素
|
||||
* @param {string} containerId - 专家列表容器的 ID
|
||||
*/
|
||||
function filterExperts(input, containerId) {
|
||||
var keyword = input.value.trim().toLowerCase();
|
||||
var container = document.getElementById(containerId);
|
||||
var cards = container.querySelectorAll('.expert-card');
|
||||
var clearBtn = document.getElementById('expertClearBtn');
|
||||
var emptyEl = document.getElementById('expertEmpty');
|
||||
var visibleCount = 0;
|
||||
|
||||
// 控制清空按钮的显示/隐藏
|
||||
clearBtn.style.display = keyword.length > 0 ? 'block' : 'none';
|
||||
|
||||
// 遍历所有专家卡片，根据姓名匹配关键词
|
||||
cards.forEach(function(card) {
|
||||
var name = (card.getAttribute('data-name') || '').toLowerCase();
|
||||
if (keyword === '' || name.indexOf(keyword) !== -1) {
|
||||
card.style.display = 'flex';
|
||||
visibleCount++;
|
||||
} else {
|
||||
card.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// 控制空状态提示的显示/隐藏
|
||||
emptyEl.style.display = visibleCount === 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* [交互] 清空搜索输入框并重置列表
|
||||
* @param {string} inputId - 搜索输入框的 ID
|
||||
* @param {string} containerId - 专家列表容器的 ID
|
||||
* @param {string} clearBtnId - 清空按钮的 ID
|
||||
*/
|
||||
function clearSearch(inputId, containerId, clearBtnId) {
|
||||
var input = document.getElementById(inputId);
|
||||
input.value = '';
|
||||
// 隐藏清空按钮
|
||||
document.getElementById(clearBtnId).style.display = 'none';
|
||||
// 重新触发过滤，显示所有卡片
|
||||
filterExperts(input, containerId);
|
||||
// 聚焦输入框
|
||||
input.focus();
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,252 @@
|
||||
<!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;
|
||||
min-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;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.nav-bar .nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; }
|
||||
|
||||
/* 可滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 蓝色渐变头部 */
|
||||
.home-header {
|
||||
background: linear-gradient(135deg, #1677ff 0%, #0958d9 100%);
|
||||
padding: 16px 20px 24px;
|
||||
color: #fff;
|
||||
}
|
||||
.home-header h2 { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
||||
.home-header p { font-size: 13px; opacity: 0.85; }
|
||||
|
||||
/* 三个操作卡片 */
|
||||
.home-actions { display: flex; gap: 12px; padding: 20px 16px 0; margin-top: -16px; }
|
||||
.action-card {
|
||||
flex: 1; background: #fff; border-radius: 16px; padding: 16px 12px;
|
||||
text-align: center; cursor: pointer;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
text-decoration: none; color: inherit;
|
||||
}
|
||||
.action-card:active { transform: scale(0.97); }
|
||||
.action-card .icon { font-size: 28px; margin-bottom: 8px; }
|
||||
.action-card .label { font-size: 13px; font-weight: 600; color: #1a1a1a; }
|
||||
.action-card .sub { font-size: 11px; color: #999; margin-top: 2px; }
|
||||
/* 区域标题 */
|
||||
.section-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px 12px; }
|
||||
.section-header h3 { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.section-header span { font-size: 13px; color: #1677ff; cursor: pointer; }
|
||||
|
||||
/* 专家卡片 */
|
||||
.expert-card {
|
||||
margin: 0 16px 12px; background: #fff; border-radius: 16px;
|
||||
padding: 16px; display: flex; align-items: center; gap: 12px;
|
||||
cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: transform 0.15s; text-decoration: none; color: inherit;
|
||||
}
|
||||
.expert-card:active { transform: scale(0.98); }
|
||||
.expert-avatar {
|
||||
width: 56px; height: 56px; border-radius: 50%;
|
||||
background: linear-gradient(135deg, #e8f4ff, #bdd7ff);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-size: 24px; flex-shrink: 0;
|
||||
}
|
||||
.expert-info { flex: 1; }
|
||||
.expert-info .name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.expert-info .dept { font-size: 13px; color: #666; margin-top: 2px; }
|
||||
.expert-info .tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
|
||||
.tag { font-size: 11px; background: #e8f4ff; color: #1677ff; padding: 2px 8px; border-radius: 20px; }
|
||||
|
||||
/* 专家统计信息 */
|
||||
.expert-stats { text-align: right; }
|
||||
.expert-stats .rating { font-size: 14px; font-weight: 700; color: #fa8c16; }
|
||||
.expert-stats .count { font-size: 11px; color: #999; margin-top: 4px; }
|
||||
.expert-stats .reply { font-size: 11px; color: #52c41a; margin-top: 3px; }
|
||||
.expert-stats .consult-btn {
|
||||
margin-top: 8px; background: #1677ff; color: #fff; border: none;
|
||||
border-radius: 20px; padding: 5px 14px; font-size: 12px; cursor: pointer;
|
||||
}
|
||||
.expert-stats .consult-btn:active { opacity: 0.85; }
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏：时间 + 信号电池图标 -->
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 + 标题 + 右侧消息图标 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="history.back()">← 返回</a>
|
||||
<span class="nav-title">健康咨询</span>
|
||||
<span class="nav-right">💬</span>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 蓝色渐变头部区域 -->
|
||||
<div class="home-header">
|
||||
<h2>健康咨询</h2>
|
||||
<p>专业医生在线，守护您的健康</p>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 三个操作卡片：找专家 / 小助手 / 我的咨询 -->
|
||||
<div class="home-actions">
|
||||
<a class="action-card" onclick="window.location.href='find-expert.html'">
|
||||
<div class="icon">🔍</div>
|
||||
<div class="label">找专家</div>
|
||||
<div class="sub">按科室查找</div>
|
||||
</a>
|
||||
<a class="action-card" onclick="window.location.href='assistant-chat.html'">
|
||||
<div class="icon">🤖</div>
|
||||
<div class="label">小助手</div>
|
||||
<div class="sub">AI智能问诊</div>
|
||||
</a>
|
||||
<a class="action-card" onclick="window.location.href='my-records.html'">
|
||||
<div class="icon">📋</div>
|
||||
<div class="label">我的咨询</div>
|
||||
<div class="sub">历史记录</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 推荐专家区域标题，"查看全部"跳转找专家页 -->
|
||||
<div class="section-header">
|
||||
<h3>推荐专家</h3>
|
||||
<span onclick="window.location.href='find-expert.html'">查看全部 ›</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片1：张建国，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-avatar">👨⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">张建国 <span style="font-size:12px;font-weight:400;color:#666;">主任医师</span></div>
|
||||
<div class="dept">北京协和医院 · 心内科</div>
|
||||
<div class="tags">
|
||||
<span class="tag">高血压</span>
|
||||
<span class="tag">冠心病</span>
|
||||
<span class="tag">心律失常</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="expert-stats">
|
||||
<div class="rating">⭐ 4.9</div>
|
||||
<div class="count">咨询 2,356次</div>
|
||||
<div class="reply">回复率 99%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片2：李晓梅，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-avatar">👩⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">李晓梅 <span style="font-size:12px;font-weight:400;color:#666;">副主任医师</span></div>
|
||||
<div class="dept">上海瑞金医院 · 内分泌科</div>
|
||||
<div class="tags">
|
||||
<span class="tag">糖尿病</span>
|
||||
<span class="tag">甲状腺</span>
|
||||
<span class="tag">代谢病</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="expert-stats">
|
||||
<div class="rating">⭐ 4.8</div>
|
||||
<div class="count">咨询 1,892次</div>
|
||||
<div class="reply">回复率 98%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 专家卡片3：王志远，点击跳转专家详情页 -->
|
||||
<div class="expert-card" onclick="window.location.href='expert-profile.html'">
|
||||
<div class="expert-avatar">👨⚕️</div>
|
||||
<div class="expert-info">
|
||||
<div class="name">王志远 <span style="font-size:12px;font-weight:400;color:#666;">主任医师</span></div>
|
||||
<div class="dept">广州中山医院 · 骨科</div>
|
||||
<div class="tags">
|
||||
<span class="tag">腰椎病</span>
|
||||
<span class="tag">关节炎</span>
|
||||
<span class="tag">运动损伤</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="expert-stats">
|
||||
<div class="rating">⭐ 4.9</div>
|
||||
<div class="count">咨询 3,105次</div>
|
||||
<div class="reply">回复率 97%</div>
|
||||
<!-- [交互] 咨询按钮 -->
|
||||
<button class="consult-btn" onclick="event.stopPropagation(); window.location.href='expert-profile.html'">咨询</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.scroll-content -->
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
</div><!-- /.phone-shell -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,228 @@
|
||||
<!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;
|
||||
min-height: 844px;
|
||||
background: #f5f5f5;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 可滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 记录Tab栏 */
|
||||
.record-tabs { display: flex; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.record-tab { flex: 1; padding: 12px; text-align: center; font-size: 14px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; }
|
||||
.record-tab.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* 记录卡片 */
|
||||
.record-item { margin: 12px 16px 0; background: #fff; border-radius: 16px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); cursor: pointer; text-decoration: none; color: inherit; display: block; transition: transform 0.15s; }
|
||||
.record-item:active { transform: scale(0.98); }
|
||||
.ri-top { display: flex; align-items: center; gap: 10px; }
|
||||
.ri-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg,#e8f4ff,#bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.ri-info { flex: 1; }
|
||||
.ri-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.ri-dept { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.ri-status { margin-left: auto; font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.status-done { background: #f6ffed; color: #52c41a; }
|
||||
.status-ongoing { background: #e6f4ff; color: #1677ff; }
|
||||
.status-pending { background: #fff7e6; color: #fa8c16; }
|
||||
.ri-consult-person { font-size: 12px; color: #666; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
|
||||
.ri-consult-person .rated-tag { font-size: 11px; background: #f6ffed; color: #52c41a; padding: 1px 6px; border-radius: 10px; }
|
||||
.ri-msg { font-size: 13px; color: #666; margin-top: 8px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.ri-time { font-size: 12px; color: #bbb; margin-top: 8px; }
|
||||
|
||||
/* Tab内容区 */
|
||||
.tab-content { display: none; padding-bottom: 20px; }
|
||||
.tab-content.active { display: block; }
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏：时间 + 信号电池图标 -->
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 + 标题 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="index.html">← 返回</a>
|
||||
<span class="nav-title">我的咨询</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 记录Tab栏：图文咨询 / 视频咨询 -->
|
||||
<div class="record-tabs">
|
||||
<div class="record-tab active" onclick="switchRecordTab(this, 'tab-text')">图文咨询</div>
|
||||
<div class="record-tab" onclick="switchRecordTab(this, 'tab-video')">视频咨询</div>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 图文咨询列表 -->
|
||||
<div id="tab-text" class="tab-content active">
|
||||
|
||||
<!-- [交互] 记录1：张建国医生 - 进行中 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">张建国医生</div>
|
||||
<div class="ri-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="ri-status status-ongoing">进行中</span>
|
||||
</div>
|
||||
<div class="ri-consult-person">咨询人：本人</div>
|
||||
<div class="ri-msg">张医生：您好，胸闷气短需要引起重视...</div>
|
||||
<div class="ri-time">2026-04-07 10:20</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录2：李晓梅医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">李晓梅医生</div>
|
||||
<div class="ri-dept">上海瑞金医院 · 内分泌科</div>
|
||||
</div>
|
||||
<span class="ri-status status-done">已完成</span>
|
||||
</div>
|
||||
<div class="ri-consult-person">咨询人：张三（父亲）<span class="rated-tag">已评价</span></div>
|
||||
<div class="ri-msg">您的血糖控制情况良好，继续保持...</div>
|
||||
<div class="ri-time">2026-03-28 14:35</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录3：王志远医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">王志远医生</div>
|
||||
<div class="ri-dept">广州中山医院 · 骨科</div>
|
||||
</div>
|
||||
<span class="ri-status status-done">已完成</span>
|
||||
</div>
|
||||
<div class="ri-consult-person">咨询人：本人</div>
|
||||
<div class="ri-msg">建议您做颈椎MRI检查，明确诊断...</div>
|
||||
<div class="ri-time">2026-03-15 09:10</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询列表（默认隐藏） -->
|
||||
<div id="tab-video" class="tab-content">
|
||||
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">张建国医生</div>
|
||||
<div class="ri-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="ri-status status-pending">待开始</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-04-08 14:00</div>
|
||||
<div class="ri-time">预约于 2026-04-07 11:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
<div class="ri-name">陈美华医生</div>
|
||||
<div class="ri-dept">北京天坛医院 · 神经内科</div>
|
||||
</div>
|
||||
<span class="ri-status status-done">已完成</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 时长 18分钟</div>
|
||||
<div class="ri-time">2026-03-20 10:00</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换图文/视频Tab
|
||||
* @param {HTMLElement} el - 被点击的Tab元素
|
||||
* @param {string} tabId - 目标Tab内容区的ID
|
||||
*/
|
||||
function switchRecordTab(el, tabId) {
|
||||
// 移除所有Tab的激活状态
|
||||
document.querySelectorAll('.record-tab').forEach(function(t) { t.classList.remove('active'); });
|
||||
// 隐藏所有Tab内容区
|
||||
document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
|
||||
// 激活当前Tab和对应内容区
|
||||
el.classList.add('active');
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,127 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
/* ===== 弹窗遮罩层 ===== */
|
||||
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
|
||||
/* ===== 底部滑出弹窗面板 ===== */
|
||||
.modal-sheet { background: #fff; border-radius: 24px 24px 0 0; padding: 20px; width: 100%; text-align: center; }
|
||||
.modal-sheet h3 { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 8px; }
|
||||
.doctor-name { font-size: 14px; color: #666; margin-bottom: 4px; }
|
||||
.doctor-dept { font-size: 12px; color: #999; margin-bottom: 16px; }
|
||||
.rate-label { font-size: 14px; color: #333; margin-bottom: 12px; }
|
||||
|
||||
/* ===== 星级评分 ===== */
|
||||
.star-group { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
|
||||
.star { font-size: 32px; cursor: pointer; transition: transform 0.15s; }
|
||||
.star:hover { transform: scale(1.15); }
|
||||
|
||||
/* ===== 评价文本域 ===== */
|
||||
.rate-textarea { width: 100%; border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 12px; font-size: 14px; resize: none; outline: none; font-family: inherit; }
|
||||
.rate-textarea:focus { border-color: #1677ff; }
|
||||
|
||||
/* ===== 按钮组 ===== */
|
||||
.modal-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.modal-btns button { flex: 1; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; }
|
||||
.btn-confirm { background: #1677ff; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 评价医生弹窗 - 默认打开状态 -->
|
||||
<div class="modal-overlay" id="modalOverlay">
|
||||
<div class="modal-sheet">
|
||||
<h3>评价医生</h3>
|
||||
<div class="doctor-name">张建国医生</div>
|
||||
<div class="doctor-dept">北京协和医院 · 心内科</div>
|
||||
<div class="rate-label">请为本次咨询评分</div>
|
||||
<!-- 星级评分区域 -->
|
||||
<div class="star-group" id="starGroup">
|
||||
<span class="star" data-val="1" onclick="setRating(1)">☆</span>
|
||||
<span class="star" data-val="2" onclick="setRating(2)">☆</span>
|
||||
<span class="star" data-val="3" onclick="setRating(3)">☆</span>
|
||||
<span class="star" data-val="4" onclick="setRating(4)">☆</span>
|
||||
<span class="star" data-val="5" onclick="setRating(5)">☆</span>
|
||||
</div>
|
||||
<textarea class="rate-textarea" rows="3" placeholder="请分享您的咨询体验（选填）..."></textarea>
|
||||
<div class="modal-btns">
|
||||
<button class="btn-cancel" onclick="handleCancel()">取消</button>
|
||||
<button class="btn-confirm" onclick="handleSubmit()">提交评价</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 当前评分值 */
|
||||
var currentRating = 0;
|
||||
|
||||
/** 设置星级评分 - 点击切换1~5星 */
|
||||
function setRating(val) {
|
||||
currentRating = val;
|
||||
var stars = document.querySelectorAll('#starGroup .star');
|
||||
for (var i = 0; i < stars.length; i++) {
|
||||
// 小于等于选中值的显示实心星，否则空心星
|
||||
stars[i].textContent = (i < val) ? '\u2B50' : '\u2606';
|
||||
}
|
||||
}
|
||||
|
||||
/** 取消 - 关闭弹窗 */
|
||||
function handleCancel() {
|
||||
document.getElementById('modalOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
/** 提交评价 */
|
||||
function handleSubmit() {
|
||||
if (currentRating === 0) { alert('请先选择评分'); return; }
|
||||
alert('感谢您的评价！评分：' + currentRating + '星');
|
||||
document.getElementById('modalOverlay').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,159 @@
|
||||
<!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: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
/* 手机壳模拟器 */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #f7f8fa; 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;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
|
||||
}
|
||||
.nav-bar .nav-title { font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 内容区 */
|
||||
.content { flex: 1; overflow-y: auto; padding: 32px 20px 20px; }
|
||||
.content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 医生信息居中区 */
|
||||
.doctor-info { text-align: center; margin-bottom: 28px; }
|
||||
.doctor-avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%; display: inline-flex;
|
||||
align-items: center; justify-content: center; font-size: 28px;
|
||||
background: linear-gradient(135deg, #e6f4ff, #bae0ff); margin-bottom: 10px;
|
||||
}
|
||||
.doctor-name { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.doctor-desc { font-size: 13px; color: #999; }
|
||||
|
||||
/* 评价卡片 */
|
||||
.rate-card {
|
||||
background: #fff; border-radius: 16px; padding: 24px 20px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
}
|
||||
.rate-title { font-size: 15px; font-weight: 700; text-align: center; color: #1a1a1a; margin-bottom: 20px; }
|
||||
|
||||
/* 星级评分 */
|
||||
.stars { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
|
||||
.star {
|
||||
font-size: 32px; cursor: pointer; color: #e0e0e0; transition: color 0.15s, transform 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
.star.active { color: #faad14; }
|
||||
.star:hover { transform: scale(1.15); }
|
||||
|
||||
/* 文本域 */
|
||||
.rate-textarea {
|
||||
width: 100%; border: 1.5px solid #e8e8e8; border-radius: 12px; padding: 12px 14px;
|
||||
font-size: 14px; resize: none; outline: none; font-family: inherit;
|
||||
color: #333; transition: border-color 0.2s;
|
||||
}
|
||||
.rate-textarea:focus { border-color: #1677ff; }
|
||||
.rate-textarea::placeholder { color: #bbb; }
|
||||
|
||||
/* 提交按钮 */
|
||||
.submit-btn {
|
||||
width: 100%; height: 48px; border: none; border-radius: 24px; margin-top: 24px;
|
||||
background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff;
|
||||
font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
|
||||
}
|
||||
.submit-btn:active { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<span>📶</span><span>📡</span><span>🔋</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏（无返回按钮） -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-title">评价医生</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<!-- 医生信息 -->
|
||||
<div class="doctor-info">
|
||||
<div class="doctor-avatar">👨⚕️</div>
|
||||
<div class="doctor-name">张建国医生</div>
|
||||
<div class="doctor-desc">本次咨询已结束</div>
|
||||
</div>
|
||||
|
||||
<!-- 评价卡片 -->
|
||||
<div class="rate-card">
|
||||
<div class="rate-title">您对本次咨询满意吗？</div>
|
||||
|
||||
<!-- [交互] 星级评分：点击切换选中状态 -->
|
||||
<div class="stars">
|
||||
<span class="star active" onclick="rateStar(1)">⭐</span>
|
||||
<span class="star active" onclick="rateStar(2)">⭐</span>
|
||||
<span class="star active" onclick="rateStar(3)">⭐</span>
|
||||
<span class="star active" onclick="rateStar(4)">⭐</span>
|
||||
<span class="star active" onclick="rateStar(5)">⭐</span>
|
||||
</div>
|
||||
|
||||
<!-- 文本域 -->
|
||||
<textarea class="rate-textarea" rows="4" placeholder="请分享您的咨询体验（选填）..."></textarea>
|
||||
|
||||
<!-- [交互] 提交按钮：跳转到首页 -->
|
||||
<button class="submit-btn" onclick="submitRate()">提交评价</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 当前评分值
|
||||
let currentRating = 5;
|
||||
|
||||
/**
|
||||
* 星级评分交互
|
||||
* @param {number} n - 选中的星级（1-5）
|
||||
*/
|
||||
function rateStar(n) {
|
||||
currentRating = n;
|
||||
const stars = document.querySelectorAll('.star');
|
||||
stars.forEach((star, i) => {
|
||||
star.classList.toggle('active', i < n);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交评价，跳转到首页
|
||||
*/
|
||||
function submitRate() {
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,196 @@
|
||||
<!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;
|
||||
min-height: 844px;
|
||||
background: #f5f5f5;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.phone-status-bar {
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
|
||||
/* 可滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 医生信息栏 */
|
||||
.detail-doctor-bar { display: flex; align-items: center; gap: 12px; padding: 16px; background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-doctor-bar .dd-avatar { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg,#e8f4ff,#bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.detail-doctor-bar .dd-info { flex: 1; }
|
||||
.detail-doctor-bar .dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.detail-doctor-bar .dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.detail-doctor-bar .dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; background: #e6f4ff; color: #1677ff; white-space: nowrap; }
|
||||
|
||||
/* 咨询信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.detail-info-card .dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.detail-info-card .dic-row:last-child { border-bottom: none; }
|
||||
.detail-info-card .dic-label { color: #999; }
|
||||
.detail-info-card .dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 对话入口卡片 */
|
||||
.chat-entry {
|
||||
margin: 12px 16px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.chat-entry:active { transform: scale(0.98); }
|
||||
.chat-entry .ce-icon { font-size: 28px; flex-shrink: 0; }
|
||||
.chat-entry .ce-info { flex: 1; }
|
||||
.chat-entry .ce-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-continue {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #1677ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-continue:active { opacity: 0.85; }
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 手机壳模拟器 -->
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏：时间 + 信号电池图标 -->
|
||||
<div class="phone-status-bar">
|
||||
<span class="time">10:24</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 导航栏：返回按钮 → my-records.html + 标题 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="my-records.html">← 返回</a>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 可滚动内容区 -->
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 医生信息栏：头像 + 姓名科室 + 状态标签 -->
|
||||
<div class="detail-doctor-bar">
|
||||
<div class="dd-avatar">👨⚕️</div>
|
||||
<div class="dd-info">
|
||||
<div class="dd-name">张建国医生</div>
|
||||
<div class="dd-dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
<span class="dd-status">进行中</span>
|
||||
</div>
|
||||
|
||||
<!-- 咨询信息卡片：类型、时间、状态、时长 -->
|
||||
<div class="detail-info-card">
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询类型</span>
|
||||
<span class="dic-value">💬 图文咨询</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时间</span>
|
||||
<span class="dic-value">2026-04-07 10:20</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询状态</span>
|
||||
<span class="dic-value">进行中</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">—</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html">
|
||||
<span class="ce-icon">💬</span>
|
||||
<div class="ce-info">
|
||||
<div class="ce-title">查看历史对话记录</div>
|
||||
<div class="ce-sub">点击查看完整对话内容</div>
|
||||
</div>
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：继续咨询按钮 → text-chat.html -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-continue" onclick="window.location.href='text-chat.html'">💬 继续咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,233 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
|
||||
/* ===== 底部全屏弹窗遮罩 ===== */
|
||||
.fullsheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
/* ===== 全屏弹窗面板 ===== */
|
||||
.fullsheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 82%; display: flex; flex-direction: column; }
|
||||
.fullsheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.fullsheet-header h3 { font-size: 16px; font-weight: 700; color: #333; }
|
||||
.fullsheet-header .close-btn { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; line-height: 1; }
|
||||
.fullsheet-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
|
||||
/* ===== 咨询人卡片 ===== */
|
||||
.person-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e8e8e8; margin-bottom: 10px; cursor: pointer; }
|
||||
.person-card:active, .person-card.selected { border-color: #1677ff; background: #e8f4ff; }
|
||||
.person-avatar { font-size: 28px; flex-shrink: 0; }
|
||||
.person-info { flex: 1; }
|
||||
.person-name { font-size: 15px; font-weight: 600; color: #333; }
|
||||
.person-detail { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.person-tag { font-size: 11px; background: #f0f5ff; color: #1677ff; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; }
|
||||
|
||||
/* ===== 新增咨询人按钮 ===== */
|
||||
.add-person-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px; border-radius: 14px; border: 1.5px dashed #d0d0d0; background: #fafafa; font-size: 14px; color: #666; cursor: pointer; }
|
||||
|
||||
/* ===== 新增表单视图 ===== */
|
||||
.form-view { display: none; }
|
||||
.form-view.active { display: block; }
|
||||
.list-view.hidden { display: none; }
|
||||
.form-back { font-size: 14px; color: #1677ff; cursor: pointer; background: none; border: none; margin-bottom: 14px; }
|
||||
.form-group { margin-bottom: 14px; }
|
||||
.form-label { font-size: 13px; color: #666; margin-bottom: 6px; display: block; }
|
||||
.form-input { width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; outline: none; }
|
||||
.form-input:focus { border-color: #1677ff; }
|
||||
.form-section { font-size: 14px; font-weight: 600; color: #333; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #f0f0f0; }
|
||||
/* ===== 性别/选项按钮组 ===== */
|
||||
.gender-group { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.gender-btn { flex: 1; padding: 9px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 14px; background: #fff; cursor: pointer; text-align: center; }
|
||||
.gender-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
|
||||
.option-group { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||
.option-btn { padding: 7px 14px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 13px; background: #fff; cursor: pointer; }
|
||||
.option-btn.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; font-weight: 600; }
|
||||
|
||||
/* ===== 保存按钮 ===== */
|
||||
.save-btn { width: 100%; padding: 12px; border-radius: 24px; font-size: 15px; font-weight: 600; background: #1677ff; color: #fff; border: none; cursor: pointer; margin-top: 16px; margin-bottom: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 选择咨询人弹窗 - 默认打开状态 -->
|
||||
<div class="fullsheet-overlay" id="sheetOverlay">
|
||||
<div class="fullsheet">
|
||||
<div class="fullsheet-header">
|
||||
<h3 id="sheetTitle">选择咨询人</h3>
|
||||
<button class="close-btn" onclick="closeSheet()">×</button>
|
||||
</div>
|
||||
<div class="fullsheet-body">
|
||||
<!-- 列表视图 -->
|
||||
<div class="list-view" id="listView">
|
||||
<div class="person-card selected" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👤</span>
|
||||
<div class="person-info"><div class="person-name">本人</div><div class="person-detail">28岁 · 男</div></div>
|
||||
<span class="person-tag">本人</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👴</span>
|
||||
<div class="person-info"><div class="person-name">张三</div><div class="person-detail">58岁 · 男</div></div>
|
||||
<span class="person-tag">父亲</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">👩</span>
|
||||
<div class="person-info"><div class="person-name">李梅</div><div class="person-detail">55岁 · 女</div></div>
|
||||
<span class="person-tag">母亲</span>
|
||||
</div>
|
||||
<div class="person-card" onclick="selectPerson(this)">
|
||||
<span class="person-avatar">🧒</span>
|
||||
<div class="person-info"><div class="person-name">张小宇</div><div class="person-detail">8岁 · 男</div></div>
|
||||
<span class="person-tag">儿子</span>
|
||||
</div>
|
||||
<!-- 新增咨询人入口 -->
|
||||
<div class="add-person-btn" onclick="showAddForm()">+ 新增咨询人</div>
|
||||
<div id="newPersons"></div>
|
||||
</div>
|
||||
|
||||
<!-- 新增咨询人表单视图 -->
|
||||
<div class="form-view" id="formView">
|
||||
<button class="form-back" onclick="backToList()">← 返回</button>
|
||||
<div class="form-group"><label class="form-label">姓名</label><input class="form-input" id="fname" placeholder="请输入姓名"></div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">性别</label>
|
||||
<div class="gender-group" data-field="gender">
|
||||
<div class="gender-btn active" onclick="toggleBtn(this)">男</div>
|
||||
<div class="gender-btn" onclick="toggleBtn(this)">女</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group"><label class="form-label">出生日期</label><input class="form-input" type="date" id="fbirthdate"></div>
|
||||
<div class="form-group"><label class="form-label">与本人关系</label><input class="form-input" id="frelation" placeholder="如：配偶、朋友等"></div>
|
||||
|
||||
<div class="form-section">生活习惯</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">是否吸烟</label>
|
||||
<div class="option-group" data-field="smoke"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">是否饮酒</label>
|
||||
<div class="option-group" data-field="drink"><div class="option-btn active" onclick="toggleBtn(this)">否</div><div class="option-btn" onclick="toggleBtn(this)">偶尔</div><div class="option-btn" onclick="toggleBtn(this)">是</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">饮食喜好</label>
|
||||
<div class="option-group" data-field="diet"><div class="option-btn active" onclick="toggleBtn(this)">清淡</div><div class="option-btn" onclick="toggleBtn(this)">均衡</div><div class="option-btn" onclick="toggleBtn(this)">偏油腻</div><div class="option-btn" onclick="toggleBtn(this)">偏辛辣</div></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">睡眠质量</label>
|
||||
<div class="option-group" data-field="sleep"><div class="option-btn active" onclick="toggleBtn(this)">良好</div><div class="option-btn" onclick="toggleBtn(this)">一般</div><div class="option-btn" onclick="toggleBtn(this)">较差</div></div>
|
||||
</div>
|
||||
|
||||
<div class="form-section">身体情况</div>
|
||||
<div class="form-group" style="display:flex;gap:8px;">
|
||||
<div style="flex:1"><label class="form-label">身高(cm)</label><input class="form-input" id="fheight" placeholder="170"></div>
|
||||
<div style="flex:1"><label class="form-label">体重(kg)</label><input class="form-input" id="fweight" placeholder="65"></div>
|
||||
</div>
|
||||
<div class="form-group"><label class="form-label">过敏史</label><input class="form-input" id="fallergy" placeholder="如：青霉素过敏"></div>
|
||||
<div class="form-group"><label class="form-label">遗传史</label><input class="form-input" id="fgenetic" placeholder="如：高血压家族史"></div>
|
||||
<div class="form-group"><label class="form-label">既往史</label><input class="form-input" id="fpast" placeholder="如：2020年阑尾炎手术"></div>
|
||||
<div class="form-group"><label class="form-label">其他疾病</label><input class="form-input" id="fother" placeholder="如：慢性胃炎"></div>
|
||||
<button class="save-btn" onclick="savePerson()">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 关闭弹窗 */
|
||||
function closeSheet() {
|
||||
document.getElementById('sheetOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
/** 选中咨询人卡片 - 切换高亮状态 */
|
||||
function selectPerson(card) {
|
||||
document.querySelectorAll('.person-card').forEach(function(c) { c.classList.remove('selected'); });
|
||||
card.classList.add('selected');
|
||||
}
|
||||
|
||||
/** 显示新增表单视图 */
|
||||
function showAddForm() {
|
||||
document.getElementById('listView').classList.add('hidden');
|
||||
document.getElementById('formView').classList.add('active');
|
||||
document.getElementById('sheetTitle').textContent = '新增咨询人';
|
||||
}
|
||||
|
||||
/** 返回列表视图 */
|
||||
function backToList() {
|
||||
document.getElementById('formView').classList.remove('active');
|
||||
document.getElementById('listView').classList.remove('hidden');
|
||||
document.getElementById('sheetTitle').textContent = '选择咨询人';
|
||||
}
|
||||
|
||||
/** 按钮组切换 - 同组内单选 */
|
||||
function toggleBtn(btn) {
|
||||
var siblings = btn.parentElement.children;
|
||||
for (var i = 0; i < siblings.length; i++) { siblings[i].classList.remove('active'); }
|
||||
btn.classList.add('active');
|
||||
}
|
||||
|
||||
/** 保存新咨询人 - 添加卡片并返回列表 */
|
||||
function savePerson() {
|
||||
var name = document.getElementById('fname').value.trim();
|
||||
if (!name) { alert('请输入姓名'); return; }
|
||||
var gender = document.querySelector('[data-field="gender"] .active').textContent;
|
||||
var relation = document.getElementById('frelation').value.trim() || '其他';
|
||||
var emoji = gender === '女' ? '👩' : '👤';
|
||||
// 创建新卡片并插入列表
|
||||
var card = document.createElement('div');
|
||||
card.className = 'person-card';
|
||||
card.setAttribute('onclick', 'selectPerson(this)');
|
||||
card.innerHTML = '<span class="person-avatar">' + emoji + '</span><div class="person-info"><div class="person-name">' + name + '</div><div class="person-detail">' + gender + '</div></div><span class="person-tag">' + relation + '</span>';
|
||||
document.getElementById('newPersons').appendChild(card);
|
||||
// 重置表单并返回列表
|
||||
document.getElementById('fname').value = '';
|
||||
document.getElementById('frelation').value = '';
|
||||
backToList();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px; display: flex; align-items: flex-end; justify-content: space-between;
|
||||
padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: #333; flex-shrink: 0; background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
.page-content { flex: 1; background: #f5f5f5; }
|
||||
/* ===== 底部全屏弹窗 ===== */
|
||||
.fullsheet-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: flex-end; justify-content: center; z-index: 100; }
|
||||
.fullsheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-height: 82%; display: flex; flex-direction: column; }
|
||||
.fullsheet-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.fullsheet-header h3 { font-size: 16px; font-weight: 700; color: #333; }
|
||||
.fullsheet-header .close-btn { font-size: 22px; color: #999; cursor: pointer; background: none; border: none; line-height: 1; }
|
||||
.fullsheet-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
|
||||
|
||||
/* ===== 报告卡片 ===== */
|
||||
.report-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid #e8e8e8; margin-bottom: 10px; cursor: pointer; }
|
||||
.report-card .rc-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,#fff7e6,#ffd591); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
|
||||
.report-card .rc-info { flex: 1; }
|
||||
.report-card .rc-title { font-size: 14px; font-weight: 600; color: #333; }
|
||||
.report-card .rc-meta { font-size: 12px; color: #999; margin-top: 3px; }
|
||||
.report-card .rc-send { margin-left: auto; font-size: 12px; background: #1677ff; color: #fff; padding: 4px 12px; border-radius: 20px; white-space: nowrap; cursor: pointer; border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons"><span>●●●●</span><span>WiFi</span><span>🔋</span></span>
|
||||
</div>
|
||||
<div class="page-content"></div>
|
||||
|
||||
<!-- [交互] 选择体检报告弹窗 - 默认打开状态 -->
|
||||
<div class="fullsheet-overlay" id="sheetOverlay">
|
||||
<div class="fullsheet">
|
||||
<div class="fullsheet-header">
|
||||
<h3>选择体检报告</h3>
|
||||
<button class="close-btn" onclick="closeSheet()">×</button>
|
||||
</div>
|
||||
<div class="fullsheet-body">
|
||||
<!-- 报告卡片列表 -->
|
||||
<div class="report-card">
|
||||
<div class="rc-icon">📄</div>
|
||||
<div class="rc-info"><div class="rc-title">2026年度综合体检报告</div><div class="rc-meta">2026-03-15 · 北京协和医院</div></div>
|
||||
<button class="rc-send" onclick="sendReport(this)">发送</button>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="rc-icon">📄</div>
|
||||
<div class="rc-info"><div class="rc-title">心内科专项检查报告</div><div class="rc-meta">2025-11-20 · 北京天坛医院</div></div>
|
||||
<button class="rc-send" onclick="sendReport(this)">发送</button>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="rc-icon">📄</div>
|
||||
<div class="rc-info"><div class="rc-title">2025年度综合体检报告</div><div class="rc-meta">2025-03-10 · 上海瑞金医院</div></div>
|
||||
<button class="rc-send" onclick="sendReport(this)">发送</button>
|
||||
</div>
|
||||
<div class="report-card">
|
||||
<div class="rc-icon">📄</div>
|
||||
<div class="rc-info"><div class="rc-title">血液常规检验报告</div><div class="rc-meta">2025-08-05 · 广州中山医院</div></div>
|
||||
<button class="rc-send" onclick="sendReport(this)">发送</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 交互逻辑 ===== */
|
||||
|
||||
/** 关闭弹窗 */
|
||||
function closeSheet() {
|
||||
document.getElementById('sheetOverlay').style.display = 'none';
|
||||
}
|
||||
|
||||
/** 发送报告 - 提示已发送 */
|
||||
function sendReport(btn) {
|
||||
var title = btn.closest('.report-card').querySelector('.rc-title').textContent;
|
||||
btn.textContent = '已发送';
|
||||
btn.style.background = '#52c41a';
|
||||
alert('已发送：' + title);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,242 @@
|
||||
<!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: #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
/* ===== 手机壳模拟器 ===== */
|
||||
.phone-shell {
|
||||
width: 390px;
|
||||
height: 844px;
|
||||
border-radius: 44px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3), inset 0 0 0 2px #d0d0d0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ===== 状态栏 ===== */
|
||||
.status-bar {
|
||||
height: 54px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
|
||||
|
||||
/* ===== 聊天头部栏 ===== */
|
||||
.chat-header { background: #fff; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
|
||||
.chat-header .back-btn { font-size: 20px; cursor: pointer; color: #333; text-decoration: none; }
|
||||
.chat-header .chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 18px; }
|
||||
.chat-header .chat-info { display: flex; flex-direction: column; }
|
||||
.chat-header .chat-name { font-size: 15px; font-weight: 600; }
|
||||
.chat-header .chat-status { font-size: 12px; color: #52c41a; }
|
||||
.chat-header .end-btn { margin-left: auto; background: #fff1f0; color: #ff4d4f; border: 1px solid #ffccc7; border-radius: 16px; padding: 5px 12px; font-size: 12px; cursor: pointer; }
|
||||
|
||||
/* ===== 温馨提示卡片 ===== */
|
||||
.notice-card { margin: 12px 16px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 12px; padding: 10px 14px; font-size: 12px; color: #ad6800; line-height: 1.6; flex-shrink: 0; }
|
||||
|
||||
/* ===== 聊天消息区域 ===== */
|
||||
.chat-messages { flex: 1; overflow-y: auto; padding: 8px 16px; }
|
||||
.msg-row { display: flex; margin-bottom: 16px; align-items: flex-end; gap: 8px; }
|
||||
.msg-row.mine { flex-direction: row-reverse; }
|
||||
.msg-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #e8f4ff, #bdd7ff); display: flex; align-items: center; justify-content: center; font-size: 16px; }
|
||||
.msg-row.mine .msg-avatar { background: linear-gradient(135deg, #d9f7be, #95de64); }
|
||||
.bubble { max-width: 240px; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.6; color: #1a1a1a; background: #f0f0f0; }
|
||||
.msg-row.mine .bubble { background: #1677ff; color: #fff; border-bottom-right-radius: 4px; }
|
||||
.msg-row:not(.mine) .bubble { border-bottom-left-radius: 4px; }
|
||||
|
||||
/* ===== 底部输入区域 ===== */
|
||||
.chat-input-area { background: #fff; border-top: 1px solid #f0f0f0; padding: 8px 12px; flex-shrink: 0; }
|
||||
.chat-input-row { display: flex; align-items: center; gap: 8px; }
|
||||
.chat-input-row input { flex: 1; background: #f5f5f5; border: none; border-radius: 20px; padding: 9px 16px; font-size: 14px; outline: none; }
|
||||
.chat-input-row .plus-btn { width: 36px; height: 36px; border-radius: 50%; background: #1677ff; color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
|
||||
.chat-input-row .send-btn { background: #1677ff; color: #fff; border: none; border-radius: 20px; padding: 8px 16px; font-size: 14px; cursor: pointer; }
|
||||
.plus-panel { display: none; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 8px 8px; }
|
||||
.plus-panel.show { display: grid; }
|
||||
.plus-item { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
|
||||
.plus-item .pi-icon { width: 52px; height: 52px; border-radius: 14px; background: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||||
.plus-item .pi-label { font-size: 11px; color: #666; }
|
||||
|
||||
/* ===== 模态弹窗 ===== */
|
||||
.modal-overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 100; justify-content: center; align-items: center; }
|
||||
.modal-overlay.show { display: flex; }
|
||||
.modal-box { background: #fff; border-radius: 16px; width: 300px; padding: 24px 20px; text-align: center; }
|
||||
.modal-box h3 { font-size: 17px; margin-bottom: 12px; color: #1a1a1a; }
|
||||
.modal-box p { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 20px; }
|
||||
.modal-btns { display: flex; gap: 12px; }
|
||||
.modal-btns button { flex: 1; padding: 10px 0; border-radius: 22px; font-size: 14px; cursor: pointer; border: none; }
|
||||
.modal-btns .btn-cancel { background: #f5f5f5; color: #666; }
|
||||
.modal-btns .btn-confirm { background: #ff4d4f; color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<span>●●●●●</span>
|
||||
<span>WiFi</span>
|
||||
<span>🔋</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- [交互] 返回按钮跳转到专家主页 -->
|
||||
<div class="chat-header">
|
||||
<a href="expert-profile.html" class="back-btn">←</a>
|
||||
<div class="chat-avatar">👨⚕️</div>
|
||||
<div class="chat-info">
|
||||
<span class="chat-name">张建国医生</span>
|
||||
<span class="chat-status">● 在线</span>
|
||||
</div>
|
||||
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
|
||||
<button class="end-btn" onclick="showEndConfirm()">结束咨询</button>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示卡片 -->
|
||||
<div class="notice-card">📌 温馨提示：请详细描述您的症状，医生将尽快回复。如遇紧急情况请立即就医。</div>
|
||||
|
||||
<!-- 聊天消息区域（可滚动） -->
|
||||
<div class="chat-messages" id="chatMessages">
|
||||
<!-- 医生消息 -->
|
||||
<div class="msg-row">
|
||||
<div class="msg-avatar">👨⚕️</div>
|
||||
<div class="bubble">您好，我是张建国医生，请问有什么可以帮助您的？请详细描述您的症状。</div>
|
||||
</div>
|
||||
<!-- 我的消息 -->
|
||||
<div class="msg-row mine">
|
||||
<div class="msg-avatar">😊</div>
|
||||
<div class="bubble">张医生您好，我最近经常感到胸闷气短，尤其是爬楼梯的时候，已经持续两周了。</div>
|
||||
</div>
|
||||
<!-- 医生消息 -->
|
||||
<div class="msg-row">
|
||||
<div class="msg-avatar">👨⚕️</div>
|
||||
<div class="bubble">您好，胸闷气短需要引起重视。请问您有没有伴随心跳加速、出汗或者胸痛的情况？平时血压情况如何？</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部输入区域 -->
|
||||
<div class="chat-input-area">
|
||||
<div class="chat-input-row">
|
||||
<!-- [交互] 点击+按钮展开/收起功能面板 -->
|
||||
<button class="plus-btn" onclick="togglePlus()">+</button>
|
||||
<input type="text" id="msgInput" placeholder="输入消息..." onkeydown="if(event.key==='Enter')sendMsg()">
|
||||
<!-- [交互] 点击发送按钮发送消息 -->
|
||||
<button class="send-btn" onclick="sendMsg()">发送</button>
|
||||
</div>
|
||||
<!-- [交互] 展开面板，默认隐藏 -->
|
||||
<div class="plus-panel" id="plusPanel">
|
||||
<div class="plus-item"><div class="pi-icon">🖼️</div><div class="pi-label">图片</div></div>
|
||||
<div class="plus-item"><div class="pi-icon">📷</div><div class="pi-label">拍摄</div></div>
|
||||
<!-- [交互] 跳转到选择体检报告弹窗页 -->
|
||||
<div class="plus-item" onclick="location.href='select-report-dialog.html'"><div class="pi-icon">📋</div><div class="pi-label">体检报告</div></div>
|
||||
<!-- [交互] 跳转到选择档案弹窗页 -->
|
||||
<div class="plus-item" onclick="location.href='select-person-dialog.html'"><div class="pi-icon">📁</div><div class="pi-label">选择档案</div></div>
|
||||
<!-- [交互] 点击结束咨询弹出确认弹窗 -->
|
||||
<div class="plus-item" onclick="showEndConfirm()"><div class="pi-icon">❌</div><div class="pi-label">结束咨询</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结束咨询确认弹窗 -->
|
||||
<div class="modal-overlay" id="endConfirmModal">
|
||||
<div class="modal-box">
|
||||
<h3>结束咨询</h3>
|
||||
<p>确认结束本次咨询吗？结束后将跳转至评价页面。</p>
|
||||
<div class="modal-btns">
|
||||
<!-- [交互] 关闭弹窗继续咨询 -->
|
||||
<button class="btn-cancel" onclick="closeModal('endConfirmModal')">继续咨询</button>
|
||||
<!-- [交互] 确认结束跳转到评价页面 -->
|
||||
<button class="btn-confirm" onclick="location.href='rate-doctor.html'">确认结束</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 切换展开面板的显示/隐藏
|
||||
*/
|
||||
function togglePlus() {
|
||||
var panel = document.getElementById('plusPanel');
|
||||
panel.classList.toggle('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送消息：将用户输入添加到聊天区域，1.2秒后模拟医生回复
|
||||
*/
|
||||
function sendMsg() {
|
||||
var input = document.getElementById('msgInput');
|
||||
var text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
var container = document.getElementById('chatMessages');
|
||||
|
||||
// 添加用户消息
|
||||
var myRow = document.createElement('div');
|
||||
myRow.className = 'msg-row mine';
|
||||
myRow.innerHTML = '<div class="msg-avatar">😊</div><div class="bubble">' + escapeHtml(text) + '</div>';
|
||||
container.appendChild(myRow);
|
||||
|
||||
input.value = '';
|
||||
// 滚动到底部
|
||||
container.scrollTop = container.scrollHeight;
|
||||
|
||||
// 1.2秒后模拟医生回复
|
||||
setTimeout(function() {
|
||||
var docRow = document.createElement('div');
|
||||
docRow.className = 'msg-row';
|
||||
docRow.innerHTML = '<div class="msg-avatar">👨⚕️</div><div class="bubble">好的，我已经了解您的情况了。建议您尽快到医院做一个心电图和胸片检查，排除心肺方面的问题。</div>';
|
||||
container.appendChild(docRow);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}, 1200);
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示结束咨询确认弹窗
|
||||
*/
|
||||
function showEndConfirm() {
|
||||
document.getElementById('endConfirmModal').classList.add('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭指定模态弹窗
|
||||
* @param {string} id - 弹窗元素ID
|
||||
*/
|
||||
function closeModal(id) {
|
||||
document.getElementById(id).classList.remove('show');
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML转义，防止XSS
|
||||
* @param {string} str - 需要转义的字符串
|
||||
* @returns {string} 转义后的字符串
|
||||
*/
|
||||
function escapeHtml(str) {
|
||||
var div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(str));
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,203 @@
|
||||
<!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: center;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
/* 手机壳模拟器 */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #f7f8fa; 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;
|
||||
}
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; padding: 0 16px;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative;
|
||||
}
|
||||
.nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
/* 内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; padding-bottom: 80px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 医生信息卡片 */
|
||||
.doctor-card {
|
||||
display: flex; align-items: center; gap: 12px; background: #fff;
|
||||
padding: 16px 20px; margin: 12px 16px 0; border-radius: 14px;
|
||||
box-shadow: 0 1px 8px rgba(0,0,0,0.04);
|
||||
}
|
||||
.doctor-avatar {
|
||||
width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center;
|
||||
justify-content: center; font-size: 26px; background: linear-gradient(135deg, #e6f4ff, #bae0ff);
|
||||
}
|
||||
.doctor-card .name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.doctor-card .dept { font-size: 13px; color: #888; margin-top: 2px; }
|
||||
/* 预约须知 */
|
||||
.notice {
|
||||
background: #fffbe6; border: 1px solid #ffe58f; border-radius: 12px;
|
||||
margin: 12px 16px 0; padding: 12px 16px; font-size: 13px; color: #ad8b00; line-height: 1.8;
|
||||
}
|
||||
/* 区块标题 */
|
||||
.section-title { font-size: 15px; font-weight: 700; color: #1a1a1a; padding: 16px 20px 8px; }
|
||||
/* 日期横向滚动 */
|
||||
.date-scroll { display: flex; gap: 10px; padding: 0 20px 4px; overflow-x: auto; }
|
||||
.date-scroll::-webkit-scrollbar { display: none; }
|
||||
.date-chip {
|
||||
flex-shrink: 0; padding: 8px 14px; border-radius: 20px; background: #f5f5f5;
|
||||
text-align: center; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.date-chip.active { background: #1677ff; color: #fff; }
|
||||
.date-chip .day { font-size: 12px; }
|
||||
.date-chip .date { font-size: 14px; font-weight: 600; margin-top: 2px; }
|
||||
/* 时间网格 */
|
||||
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 20px; }
|
||||
.time-slot {
|
||||
border: 1.5px solid #e0e0e0; border-radius: 12px; padding: 10px 8px;
|
||||
text-align: center; cursor: pointer; transition: all 0.2s;
|
||||
}
|
||||
.time-slot.active { border-color: #1677ff; background: #e8f4ff; color: #1677ff; }
|
||||
.time-slot.full { border-color: #e0e0e0; background: #fafafa; color: #bbb; cursor: not-allowed; }
|
||||
.time-slot .t { font-size: 15px; font-weight: 600; }
|
||||
.time-slot .remain { font-size: 11px; margin-top: 2px; }
|
||||
.time-slot.full .t { color: #bbb; }
|
||||
.time-slot.active .t { color: #1677ff; }
|
||||
/* 底部确认栏 */
|
||||
.bottom-bar {
|
||||
position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
|
||||
background: #fff; border-top: 1px solid #f0f0f0; display: flex;
|
||||
align-items: center; justify-content: space-between; padding: 0 20px 16px;
|
||||
border-radius: 0 0 44px 44px;
|
||||
}
|
||||
.selected-info .label { font-size: 12px; color: #999; }
|
||||
.selected-info .value { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-top: 2px; }
|
||||
.book-btn {
|
||||
height: 44px; padding: 0 28px; border: none; border-radius: 22px;
|
||||
background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff;
|
||||
font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
|
||||
}
|
||||
.book-btn:active { opacity: 0.85; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>📶</span><span>📡</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="expert-profile.html">← 返回</a>
|
||||
<span class="nav-title">预约视频咨询</span>
|
||||
</div>
|
||||
<!-- 可滚动内容 -->
|
||||
<div class="scroll-content">
|
||||
<!-- 医生信息卡片 -->
|
||||
<div class="doctor-card">
|
||||
<div class="doctor-avatar">👨⚕️</div>
|
||||
<div>
|
||||
<div class="name">张建国医生</div>
|
||||
<div class="dept">北京协和医院 · 心内科</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 预约须知 -->
|
||||
<div class="notice">
|
||||
📋 预约须知：<br>1. 预约不收取额外费用<br>2. 停诊将短信通知
|
||||
</div>
|
||||
<!-- 选择日期 -->
|
||||
<div class="section-title">选择日期</div>
|
||||
<!-- [交互] 日期横向滚动：点击切换选中日期 -->
|
||||
<div class="date-scroll">
|
||||
<div class="date-chip" onclick="selectDate(this,'04/07')"><div class="day">今天</div><div class="date">04/07</div></div>
|
||||
<div class="date-chip active" onclick="selectDate(this,'04/08')"><div class="day">明天</div><div class="date">04/08</div></div>
|
||||
<div class="date-chip" onclick="selectDate(this,'04/09')"><div class="day">周四</div><div class="date">04/09</div></div>
|
||||
<div class="date-chip" onclick="selectDate(this,'04/10')"><div class="day">周五</div><div class="date">04/10</div></div>
|
||||
<div class="date-chip" onclick="selectDate(this,'04/11')"><div class="day">周六</div><div class="date">04/11</div></div>
|
||||
<div class="date-chip" onclick="selectDate(this,'04/12')"><div class="day">周日</div><div class="date">04/12</div></div>
|
||||
</div>
|
||||
<!-- 上午时段 -->
|
||||
<div class="section-title">上午</div>
|
||||
<!-- [交互] 时间网格：点击选择可用时段，已约满不可选 -->
|
||||
<div class="time-grid">
|
||||
<div class="time-slot full"><div class="t">08:00</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot full"><div class="t">08:30</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'09:00')"><div class="t">09:00</div><div class="remain">剩余3名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'09:30')"><div class="t">09:30</div><div class="remain">剩余5名</div></div>
|
||||
<div class="time-slot active" onclick="selectSlot(this,'10:00')"><div class="t">10:00</div><div class="remain">剩余2名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'10:30')"><div class="t">10:30</div><div class="remain">剩余4名</div></div>
|
||||
</div>
|
||||
<!-- 下午时段 -->
|
||||
<div class="section-title">下午</div>
|
||||
<div class="time-grid" style="margin-bottom: 20px;">
|
||||
<div class="time-slot" onclick="selectSlot(this,'14:00')"><div class="t">14:00</div><div class="remain">剩余3名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'14:30')"><div class="t">14:30</div><div class="remain">剩余5名</div></div>
|
||||
<div class="time-slot full"><div class="t">15:00</div><div class="remain">已约满</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'15:30')"><div class="t">15:30</div><div class="remain">剩余1名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'16:00')"><div class="t">16:00</div><div class="remain">剩余6名</div></div>
|
||||
<div class="time-slot" onclick="selectSlot(this,'16:30')"><div class="t">16:30</div><div class="remain">剩余4名</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部确认栏 -->
|
||||
<div class="bottom-bar">
|
||||
<div class="selected-info">
|
||||
<div class="label">已选时段</div>
|
||||
<div class="value" id="selectedText">04/08 10:00</div>
|
||||
</div>
|
||||
<!-- [交互] 立即预约按钮：跳转预约成功页 -->
|
||||
<button class="book-btn" onclick="window.location.href='video-success.html'">立即预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 当前选中的日期和时段
|
||||
let selectedDate = '04/08';
|
||||
let selectedTime = '10:00';
|
||||
|
||||
/**
|
||||
* 切换选中日期
|
||||
* @param {HTMLElement} el - 被点击的日期元素
|
||||
* @param {string} date - 日期字符串
|
||||
*/
|
||||
function selectDate(el, date) {
|
||||
document.querySelectorAll('.date-chip').forEach(c => c.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
selectedDate = date;
|
||||
updateSelectedText();
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择时段（已约满不可选）
|
||||
* @param {HTMLElement} el - 被点击的时段元素
|
||||
* @param {string} time - 时间字符串
|
||||
*/
|
||||
function selectSlot(el, time) {
|
||||
if (el.classList.contains('full')) return;
|
||||
document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('active'));
|
||||
el.classList.add('active');
|
||||
selectedTime = time;
|
||||
updateSelectedText();
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新底部已选信息文本
|
||||
*/
|
||||
function updateSelectedText() {
|
||||
document.getElementById('selectedText').textContent = selectedDate + ' ' + selectedTime;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!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: center;
|
||||
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
/* 手机壳模拟器 */
|
||||
.phone-shell {
|
||||
width: 390px; height: 844px; background: #f7f8fa; 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;
|
||||
}
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
height: 44px; background: #fff; display: flex; align-items: center;
|
||||
justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
height: 44px; display: flex; align-items: center; justify-content: center;
|
||||
background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
|
||||
}
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
/* 内容区 */
|
||||
.content { flex: 1; overflow-y: auto; padding: 32px 20px 20px; }
|
||||
.content::-webkit-scrollbar { display: none; }
|
||||
/* 成功图标 */
|
||||
.success-icon {
|
||||
width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px;
|
||||
background: linear-gradient(135deg, #52c41a, #73d13d); display: flex;
|
||||
align-items: center; justify-content: center; font-size: 40px;
|
||||
}
|
||||
.success-title { text-align: center; font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.success-desc { text-align: center; font-size: 14px; color: #888; line-height: 1.7; margin-bottom: 28px; white-space: pre-line; }
|
||||
/* 预约信息卡片 */
|
||||
.info-card { background: #f5f5f5; border-radius: 16px; padding: 20px; margin-bottom: 28px; }
|
||||
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-row .label { font-size: 14px; color: #888; }
|
||||
.info-row .value { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.info-row .value.blue { color: #1677ff; }
|
||||
/* 按钮 */
|
||||
.btn-primary {
|
||||
width: 100%; height: 48px; border: none; border-radius: 24px;
|
||||
background: linear-gradient(135deg, #1677ff, #0958d9); color: #fff;
|
||||
font-size: 16px; font-weight: 600; cursor: pointer; margin-bottom: 12px; transition: opacity 0.2s;
|
||||
}
|
||||
.btn-primary:active { opacity: 0.85; }
|
||||
.btn-outline {
|
||||
width: 100%; height: 48px; border: 1.5px solid #1677ff; border-radius: 24px;
|
||||
background: #fff; color: #1677ff; font-size: 16px; font-weight: 600;
|
||||
cursor: pointer; transition: background 0.2s;
|
||||
}
|
||||
.btn-outline:active { background: #f0f7ff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>📶</span><span>📡</span><span>🔋</span></div>
|
||||
</div>
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<span class="nav-title">预约详情</span>
|
||||
</div>
|
||||
<!-- 内容区 -->
|
||||
<div class="content">
|
||||
<!-- 成功图标 -->
|
||||
<div class="success-icon">✅</div>
|
||||
<div class="success-title">预约成功！</div>
|
||||
<div class="success-desc">请在预约时间内准时上线
|
||||
系统将提前15分钟推送提醒</div>
|
||||
|
||||
<!-- 预约信息卡片 -->
|
||||
<div class="info-card">
|
||||
<div class="info-row"><span class="label">医生</span><span class="value">张建国 · 主任医师</span></div>
|
||||
<div class="info-row"><span class="label">医院</span><span class="value">北京协和医院</span></div>
|
||||
<div class="info-row"><span class="label">科室</span><span class="value">心内科</span></div>
|
||||
<div class="info-row"><span class="label">类型</span><span class="value">📹 视频咨询</span></div>
|
||||
<div class="info-row"><span class="label">时间</span><span class="value">2026-04-08 10:00</span></div>
|
||||
<div class="info-row"><span class="label">费用</span><span class="value blue">¥50</span></div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 查看我的咨询按钮：跳转咨询记录页 -->
|
||||
<button class="btn-primary" onclick="window.location.href='my-records.html'">查看我的咨询</button>
|
||||
<!-- [交互] 返回首页按钮：跳转首页 -->
|
||||
<button class="btn-outline" onclick="window.location.href='index.html'">返回首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user