feat: 小助手/专家工作台新增图文咨询完成页和已超时页面，优化多端页面交互
- 小助手工作台新增图文咨询完成、咨询完成、已超时3个页面 - 专家工作台新增图文咨询完成、已超时2个页面，删除旧的咨询人详情和员工档案页 - 优化小助手工作台首页、聊天页、员工档案页交互和布局 - 优化专家工作台聊天页和咨询完成页 - 优化员工端已超时详情页和历史聊天记录页 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -1,156 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家工作台 - 咨询人档案 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { font-size: 17px; font-weight: 600; color: #1a1a1a; margin-left: 8px; }
|
||||
/* 页面内容 */
|
||||
.page-content { flex: 1; overflow-y: auto; padding: 0 0 34px; background: #f7f8fa; }
|
||||
.page-content::-webkit-scrollbar { display: none; }
|
||||
/* 个人信息头部 */
|
||||
.profile-header { background: linear-gradient(135deg, #e8f4ff, #d6e8ff); padding: 20px 16px 16px; display: flex; align-items: center; gap: 14px; }
|
||||
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
||||
.profile-info { flex: 1; }
|
||||
.profile-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.profile-meta { font-size: 13px; color: #555; margin-top: 4px; }
|
||||
/* 信息卡片 */
|
||||
.info-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; padding: 16px; }
|
||||
.info-card__title { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
|
||||
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
|
||||
.info-item__label { font-size: 12px; color: #999; margin-bottom: 2px; }
|
||||
.info-item__value { font-size: 14px; color: #333; font-weight: 500; }
|
||||
/* 生活习惯标签 */
|
||||
.habit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.habit-tag { font-size: 13px; padding: 6px 14px; border-radius: 20px; background: #f5f5f5; color: #555; }
|
||||
.habit-tag--good { background: #f6ffed; color: #389e0d; }
|
||||
.habit-tag--warn { background: #fff7e6; color: #d46b08; }
|
||||
/* 健康档案卡片 */
|
||||
.record-card { background: #fff; border-radius: 14px; margin: 12px 16px 0; overflow: hidden; }
|
||||
.record-card__header { padding: 14px 16px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #f5f5f5; }
|
||||
.record-card__icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
|
||||
.record-card__title { font-size: 15px; font-weight: 600; color: #333; }
|
||||
.record-card__date { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.record-card__body { padding: 12px 16px 14px; }
|
||||
.record-card__section { margin-bottom: 12px; }
|
||||
.record-card__section:last-child { margin-bottom: 0; }
|
||||
.record-card__label { font-size: 12px; color: #999; margin-bottom: 4px; }
|
||||
.record-card__text { font-size: 14px; color: #333; line-height: 1.6; }
|
||||
.record-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
|
||||
.record-card__tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; }
|
||||
.record-card__tag--blue { color: #1677ff; background: #e8f4ff; }
|
||||
.record-card__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
.record-card__tag--red { color: #cf1322; background: #fff1f0; }
|
||||
.record-card__images { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.record-card__img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid #f0f0f0; background: #f5f5f5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="history.back()">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询人档案</span>
|
||||
</div>
|
||||
<!-- PLACEHOLDER_CONTENT -->
|
||||
<div class="page-content">
|
||||
<!-- 个人信息头部 -->
|
||||
<div class="profile-header">
|
||||
<div class="profile-avatar">👩</div>
|
||||
<div class="profile-info">
|
||||
<div class="profile-name">张小红</div>
|
||||
<div class="profile-meta">女 · 28岁 · 165cm · 50kg</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 基本信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">📋 基本信息</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-item__label">姓名</div><div class="info-item__value">张小红</div></div>
|
||||
<div class="info-item"><div class="info-item__label">性别</div><div class="info-item__value">女</div></div>
|
||||
<div class="info-item"><div class="info-item__label">年龄</div><div class="info-item__value">28岁</div></div>
|
||||
<div class="info-item"><div class="info-item__label">身高</div><div class="info-item__value">165cm</div></div>
|
||||
<div class="info-item"><div class="info-item__label">体重</div><div class="info-item__value">50kg</div></div>
|
||||
<div class="info-item"><div class="info-item__label">血型</div><div class="info-item__value">A型</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">🏃 生活习惯</div>
|
||||
<div class="habit-tags">
|
||||
<span class="habit-tag habit-tag--good">不吸烟</span>
|
||||
<span class="habit-tag habit-tag--good">不饮酒</span>
|
||||
<span class="habit-tag habit-tag--good">饮食均衡</span>
|
||||
<span class="habit-tag habit-tag--warn">睡眠一般</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__title">🩺 身体情况</div>
|
||||
<div class="info-grid">
|
||||
<div class="info-item"><div class="info-item__label">过敏史</div><div class="info-item__value">青霉素过敏</div></div>
|
||||
<div class="info-item"><div class="info-item__label">遗传史</div><div class="info-item__value">无</div></div>
|
||||
<div class="info-item"><div class="info-item__label">既往史</div><div class="info-item__value">无</div></div>
|
||||
<div class="info-item"><div class="info-item__label">其他疾病</div><div class="info-item__value">无</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 本次咨询档案 -->
|
||||
<div class="record-card">
|
||||
<div class="record-card__header">
|
||||
<div class="record-card__icon">📋</div>
|
||||
<div>
|
||||
<div class="record-card__title">头痛咨询</div>
|
||||
<div class="record-card__date">2026-04-13 创建</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__body">
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">问题描述</div>
|
||||
<div class="record-card__text">最近总是头痛，尤其是下午工作时特别明显，主要在太阳穴两侧，有时伴有恶心，已持续一周。</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">持续时间</div>
|
||||
<div class="record-card__tags">
|
||||
<span class="record-card__tag record-card__tag--orange">1周</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">检查资料</div>
|
||||
<div class="record-card__images">
|
||||
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23e8f4ff' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%231677ff' font-size='11'%3E检查报告%3C/text%3E%3C/svg%3E" alt="检查报告">
|
||||
<img class="record-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Crect fill='%23fff7e6' width='80' height='80'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.3em' fill='%23d46b08' font-size='11'%3ECT片%3C/text%3E%3C/svg%3E" alt="CT片">
|
||||
</div>
|
||||
</div>
|
||||
<div class="record-card__section">
|
||||
<div class="record-card__label">期望帮助</div>
|
||||
<div class="record-card__text">希望了解头痛的具体原因，是否需要进一步检查，以及日常缓解方案。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,82 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家工作台 - 员工健康档案 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./text-chat.html -->
|
||||
<button class="back-btn" onclick="location.href='./text-chat.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">员工档案</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工头像和基本信息 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;text-align:center;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 12px;">👩</div>
|
||||
<div style="font-size:18px;font-weight:700;color:#1a1a1a;">张小红</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:4px;">研发部 · 工程师</div>
|
||||
</div>
|
||||
|
||||
<!-- 详细信息列表 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<!-- 基本信息 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#1677ff;margin-bottom:8px;">基本信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">姓名</span><span style="font-size:13px;color:#1a1a1a;">张小红</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">性别 / 年龄</span><span style="font-size:13px;color:#1a1a1a;">女 / 28岁</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">身高 / 体重</span><span style="font-size:13px;color:#1a1a1a;">163 cm / 52 kg</span></div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#52c41a;margin:12px 0 8px;">生活习惯</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">吸烟</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮酒</span><span style="font-size:13px;color:#1a1a1a;">否</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">饮食喜好</span><span style="font-size:13px;color:#1a1a1a;">均衡</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">睡眠质量</span><span style="font-size:13px;color:#1a1a1a;">良好</span></div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div style="font-size:13px;font-weight:600;color:#fa8c16;margin:12px 0 8px;">身体情况</div>
|
||||
<!-- 过敏史高亮红色 -->
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">过敏史</span><span style="font-size:13px;color:#ff4d4f;font-weight:600;">青霉素过敏</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">遗传史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f5f5f5;"><span style="font-size:13px;color:#999;">既往史</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:9px 0;"><span style="font-size:13px;color:#999;">其他疾病</span><span style="font-size:13px;color:#1a1a1a;">无</span></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -69,7 +69,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<!-- [交互] 点击切换服务状态 -->
|
||||
<button id="wb-pause-btn" onclick="togglePause()" style="display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.4);border-radius:20px;padding:6px 14px;color:#fff;font-size:13px;cursor:pointer;">
|
||||
<span id="pause-dot" style="width:8px;height:8px;border-radius:50%;background:#52c41a;display:inline-block;flex-shrink:0;"></span>
|
||||
<span id="pause-label">服务中</span>
|
||||
<span id="pause-label">开启咨询</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 统计数字 -->
|
||||
@@ -77,10 +77,8 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">2</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">图文待回复</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">1</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">视频待确认</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">18</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">今日完成</div></div>
|
||||
<div style="width:1px;background:rgba(255,255,255,0.25);margin:4px 0;"></div>
|
||||
<div style="flex:1;text-align:center;"><div style="color:#fff;font-size:22px;font-weight:700;">4.9</div><div style="color:rgba(255,255,255,0.75);font-size:11px;margin-top:2px;">评分</div></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -95,7 +93,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div class="seg-tabs">
|
||||
<div class="seg-tab active" onclick="switchWorkTab(this,'wb-text-pending')">待回复<span class="badge">2</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-ongoing')">进行中<span class="badge" style="background:#fa8c16;">1</span></div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已完成</div>
|
||||
<div class="seg-tab" onclick="switchWorkTab(this,'wb-text-done')">已结束</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 待回复列表 -->
|
||||
@@ -125,10 +123,14 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-text-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./text-consult-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./text-consult-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-green">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">感谢医生，问题已解决</div><span class="cc-time">08:40</span></div>
|
||||
</div>
|
||||
<div style="height:16px;"></div>
|
||||
|
||||
<div class="consult-card" onclick="location.href='./text-consult-timeout.html'">
|
||||
<div class="cc-top"><div class="cc-avatar">👨</div><div class="cc-info"><div class="cc-name">赵磊</div><div class="cc-meta">男 · 35岁</div></div><span class="tag tag-gray">已超时</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">医生，这是什么情况？</div><span class="cc-time">08:40</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,7 +165,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div id="wb-video-done" style="display:none;">
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
<div class="consult-card" onclick="location.href='./video-done.html'">
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">女 · 29岁</div></div><span class="tag tag-gray">已完成</span></div>
|
||||
<div class="cc-top"><div class="cc-avatar" style="background:linear-gradient(135deg,#ffe0e0,#ffb3b3);">👩</div><div class="cc-info"><div class="cc-name">孙丽</div><div class="cc-meta">女 · 29岁</div></div><span class="tag tag-green">已完成</span></div>
|
||||
<div class="cc-bottom"><div class="cc-preview">⭐⭐⭐⭐⭐ 非常专业，感谢！</div><span class="cc-time">昨天</span></div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: ./video-done.html -->
|
||||
@@ -237,7 +239,7 @@ var isPaused = false;
|
||||
function togglePause() {
|
||||
isPaused = !isPaused;
|
||||
var bg = isPaused ? '#ff4d4f' : '#52c41a';
|
||||
var text = isPaused ? '暂停服务' : '服务中';
|
||||
var text = isPaused ? '关闭咨询' : '开启咨询';
|
||||
var dot = document.getElementById('pause-dot');
|
||||
var label = document.getElementById('pause-label');
|
||||
if (dot) dot.style.background = bg;
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家工作台 - 已结束聊天 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 咨询人档案卡片 */
|
||||
.bubble-record { max-width: 260px; border-radius: 0 12px 12px 12px; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.bubble-record__header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: linear-gradient(135deg, #e8f4ff, #bae0ff); }
|
||||
.bubble-record__avatar { width: 32px; height: 32px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
|
||||
.bubble-record__name { font-size: 13px; font-weight: 600; color: #333; }
|
||||
.bubble-record__meta { font-size: 11px; color: #666; }
|
||||
.bubble-record__body { padding: 10px 12px; }
|
||||
.bubble-record__title { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 4px; }
|
||||
.bubble-record__desc { font-size: 12px; color: #666; line-height: 1.5; }
|
||||
.bubble-record__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
|
||||
.bubble-record__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
|
||||
.bubble-record__tag--orange { color: #d46b08; background: #fff7e6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏（无结束咨询按钮） -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">张小红</span>
|
||||
</div>
|
||||
|
||||
<!-- 消息区 -->
|
||||
<div class="scroll-content" id="chat-scroll" style="padding:12px 16px;">
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:20</span></div>
|
||||
<!-- [交互] 咨询人档案卡片（首发消息）- 点击查看详情跳转咨询人档案页 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div class="bubble-record" onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-chat-done'">
|
||||
<div class="bubble-record__header">
|
||||
<div class="bubble-record__avatar">👩</div>
|
||||
<div>
|
||||
<div class="bubble-record__name">张小红 · 女 · 28岁</div>
|
||||
<div class="bubble-record__meta">165cm · 50kg · 不吸烟 · 睡眠一般</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bubble-record__body">
|
||||
<div class="bubble-record__title">头痛咨询</div>
|
||||
<div class="bubble-record__desc">最近总是头痛，尤其是下午工作时特别明显，已持续一周</div>
|
||||
<div class="bubble-record__tags">
|
||||
<span class="bubble-record__tag bubble-record__tag--orange">持续时间：1周</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工消息（左侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">您好医生，我最近总是头痛，尤其是下午工作时特别明显，已经持续一周了。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工发送图片消息 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,0.06);">
|
||||
<div style="width:140px;height:90px;background:linear-gradient(135deg,#e8f4ff,#c5deff);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:28px;">🩺</div>
|
||||
<div style="font-size:11px;color:#999;margin-top:4px;">体检报告</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 时间标记 -->
|
||||
<div style="text-align:center;margin:8px 0;"><span style="font-size:11px;color:#bbb;background:#ebebeb;padding:3px 10px;border-radius:10px;">10:23</span></div>
|
||||
<!-- 专家消息（右侧） -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>
|
||||
<div style="background:#1677ff;border-radius:12px 0 12px 12px;padding:10px 14px;font-size:14px;color:#fff;max-width:220px;line-height:1.5;">您好，头痛持续一周需要重视。请问头痛的位置主要在哪里？是否伴有恶心、视力模糊等症状？</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 员工回复 -->
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div style="background:#fff;border-radius:0 12px 12px 12px;padding:10px 14px;font-size:14px;color:#1a1a1a;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);line-height:1.5;">主要是太阳穴两侧，有时候会有点恶心，但没有视力问题。</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 结束咨询卡片消息（右侧专家发出） -->
|
||||
<div id="end-card" style="display:flex;gap:8px;margin-bottom:14px;flex-direction:row-reverse;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👨⚕️</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;">
|
||||
<div style="font-size:11px;color:#999;margin-bottom:4px;">王医生（我）</div>
|
||||
<div style="background:#fff;border-radius:12px 0 12px 12px;padding:20px 24px;max-width:220px;box-shadow:0 1px 4px rgba(0,0,0,0.06);border:1px solid #f0f0f0;text-align:center;">
|
||||
<div style="margin:0 auto 10px;width:44px;height:44px;border-radius:10px;background:#52c41a;display:flex;align-items:center;justify-content:center;"><svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 12.5l4 4 8-8" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
<div style="font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;">已结束本次咨询</div>
|
||||
<div style="font-size:12px;color:#999;line-height:1.5;">2026-04-15 10:35</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:8px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部已结束提示条 -->
|
||||
<div style="background:#f5f5f5;border-top:1px solid #f0f0f0;padding:14px 16px;text-align:center;flex-shrink:0;">
|
||||
<span id="end-bar-text" style="font-size:13px;color:#999;">— 本次咨询已结束 —</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 超时状态：隐藏结束卡片，更改底部文案 */
|
||||
var consultStatus = new URLSearchParams(location.search).get('status');
|
||||
if (consultStatus === 'timeout') {
|
||||
document.getElementById('end-card').style.display = 'none';
|
||||
document.getElementById('end-bar-text').textContent = '— 长时间未回复系统已自动结束本次咨询 —';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -18,7 +18,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
.nav-right { margin-left: auto; color: #1677ff; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
.nav-right { margin-left: auto; color: #ff4d4f; font-size: 14px; cursor: pointer; background: none; border: none; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
@@ -78,7 +78,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="display:flex;gap:8px;margin-bottom:14px;">
|
||||
<div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ffe0e0,#ffb3b3);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;">👩</div>
|
||||
<div><div style="font-size:11px;color:#999;margin-bottom:4px;">张小红</div>
|
||||
<div class="bubble-record" onclick="location.href='./consult-person-detail.html'">
|
||||
<div class="bubble-record" onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-chat'">
|
||||
<div class="bubble-record__header">
|
||||
<div class="bubble-record__avatar">👩</div>
|
||||
<div>
|
||||
@@ -152,15 +152,28 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
|
||||
<!-- 媒体选择面板 -->
|
||||
<div id="media-panel" style="display:none;background:#f7f8fa;border-top:1px solid #f0f0f0;padding:16px 20px;flex-shrink:0;">
|
||||
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:180px;">
|
||||
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:180px;">
|
||||
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">相册</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">拍照</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">🖼️</div>
|
||||
<span style="font-size:11px;color:#666;">图库</span>
|
||||
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">文件</span>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;" onclick="closeMediaPanel()">
|
||||
<div style="width:52px;height:52px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 1px 4px rgba(0,0,0,0.08);">📷</div>
|
||||
<span style="font-size:11px;color:#666;">位置</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-gray { background: #f5f5f5; color: #999; }
|
||||
.tag-green { background: #f6ffed; color: #52c41a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -53,35 +53,34 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:28px;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:17px;font-weight:700;color:#1a1a1a;">赵磊</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:2px;">运营部 · 运营专员</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:2px;">采油一厂 · xxx作业区</div>
|
||||
</div>
|
||||
<span class="tag tag-gray" style="margin-left:auto;">已完成</span>
|
||||
<span class="tag tag-green" style="margin-left:auto;">已完成</span>
|
||||
</div>
|
||||
<!-- 咨询信息 -->
|
||||
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">图文咨询</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:10</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">完成时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:40</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;"><span style="font-size:13px;color:#999;">员工评分</span><span style="font-size:13px;color:#fa8c16;font-weight:600;">⭐⭐⭐⭐⭐ 5.0</span></div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">结束时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-08 08:40</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 员工评价 -->
|
||||
<div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">员工评价</div>
|
||||
<div style="font-size:13px;color:#666;line-height:1.6;background:#fffbe6;border-radius:8px;padding:12px;border-left:3px solid #faad14;">"王医生回复很及时，建议也很实用，睡眠问题得到了很好的指导，非常感谢！"</div>
|
||||
</div>
|
||||
<!-- <div style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">-->
|
||||
<!-- <div style="font-size:14px;font-weight:600;color:#1a1a1a;margin-bottom:8px;">员工评价 ⭐⭐⭐⭐⭐ 5.0</div>-->
|
||||
<!-- <div style="font-size:13px;color:#666;line-height:1.6;background:#fffbe6;border-radius:8px;padding:12px;border-left:3px solid #faad14;">"王医生回复很及时，建议也很实用，睡眠问题得到了很好的指导，非常感谢！"</div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- [交互] 点击跳转至: ./text-chat.html 查看历史对话记录 -->
|
||||
<div onclick="location.href='./text-chat.html'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
|
||||
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
|
||||
<div onclick="location.href='./text-chat-done.html'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">💬</span>
|
||||
<span style="font-size:14px;color:#1a1a1a;flex:1;">查看历史对话记录</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: ./consult-person-detail.html 查看咨询人健康档案 -->
|
||||
<div onclick="location.href='./consult-person-detail.html'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<!-- [交互] 点击跳转至: ../assistant/workbench/employee-profile.html 查看咨询人健康档案 -->
|
||||
<div onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-consult-done'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">📋</span>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;flex:1;">咨询人健康档案</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专家工作台 - 图文咨询已超时详情 | 健康长庆原型</title>
|
||||
<style>
|
||||
/* 公共重置与布局 */
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
/* 手机壳容器 */
|
||||
.phone-shell { width: 390px; height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; flex-shrink: 0; }
|
||||
/* 状态栏 */
|
||||
.status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; z-index: 10; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #1a1a1a; }
|
||||
/* 导航栏 */
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.back-btn { display: flex; align-items: center; gap: 4px; color: #1677ff; font-size: 15px; cursor: pointer; background: none; border: none; padding: 4px 0; }
|
||||
.nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
|
||||
/* 滚动内容区 */
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f7f8fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
/* 标签 */
|
||||
.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
|
||||
.tag-orange { background: #fff2e8; color: #d4380d; }
|
||||
/* 超时提示卡片 */
|
||||
.timeout-notice { margin-bottom: 12px; background: #fff2e8; border-radius: 14px; padding: 16px; border-left: 4px solid #d4380d; }
|
||||
.timeout-notice__title { font-size: 14px; font-weight: 600; color: #d4380d; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.timeout-notice__content { font-size: 13px; color: #ad4e00; line-height: 1.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons"><span>●●●</span><span>WiFi</span><span>🔋</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回: ./index.html -->
|
||||
<button class="back-btn" onclick="location.href='./index.html'">
|
||||
<svg width="10" height="16" viewBox="0 0 10 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 1L2 8l6 7"/></svg>返回
|
||||
</button>
|
||||
<span class="nav-title">咨询详情</span>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容 -->
|
||||
<div class="scroll-content" style="padding:16px;">
|
||||
|
||||
<!-- 员工信息卡 -->
|
||||
<div style="background:#fff;border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);">
|
||||
<div style="display:flex;align-items:center;gap:14px;margin-bottom:16px;">
|
||||
<div style="width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#e8f4ff,#bdd7ff);display:flex;align-items:center;justify-content:center;font-size:28px;">👨</div>
|
||||
<div>
|
||||
<div style="font-size:17px;font-weight:700;color:#1a1a1a;">赵磊</div>
|
||||
<div style="font-size:13px;color:#666;margin-top:2px;">采油一厂 · xxx作业区</div>
|
||||
</div>
|
||||
<span class="tag tag-orange" style="margin-left:auto;">已超时</span>
|
||||
</div>
|
||||
<!-- 咨询信息 -->
|
||||
<div style="background:#f7f8fa;border-radius:10px;padding:14px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#666;margin-bottom:10px;">📋 咨询信息</div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询类型</span><span style="font-size:13px;color:#1a1a1a;">图文咨询</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">咨询单号</span><span style="font-size:13px;color:#1a1a1a;">ZX202688552270</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">发起时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-06 14:20</span></div>
|
||||
<div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #efefef;"><span style="font-size:13px;color:#999;">结束时间</span><span style="font-size:13px;color:#1a1a1a;">2026-04-13 14:20</span></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 超时提示卡片 -->
|
||||
<div class="timeout-notice">
|
||||
<div class="timeout-notice__title">⏰ 咨询已超时</div>
|
||||
<div class="timeout-notice__content">超过七天无回复，本次咨询已自动关闭。</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: ./text-chat-done.html 查看历史对话记录 -->
|
||||
<div onclick="location.href='./text-chat-done.html?status=timeout'" style="background:#fff;border-radius:12px;padding:16px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">💬</span>
|
||||
<span style="font-size:14px;color:#1a1a1a;flex:1;">查看历史对话记录</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: ../assistant/workbench/employee-profile.html 查看咨询人健康档案 -->
|
||||
<div onclick="location.href='../../assistant/workbench/employee-profile.html?from=expert-consult-timeout'" style="background:#fff;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,0.06);display:flex;align-items:center;padding:14px 16px;cursor:pointer;">
|
||||
<span style="font-size:16px;margin-right:10px;">📋</span>
|
||||
<span style="font-size:14px;font-weight:600;color:#1a1a1a;flex:1;">咨询人健康档案</span>
|
||||
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" stroke="#ccc" stroke-width="1.5"><path d="M1 1l5 5-5 5"/></svg>
|
||||
</div>
|
||||
|
||||
<div style="height:16px;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user