feat: 新增视频咨询四种状态详情页及多模块原型优化
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
@@ -4,6 +4,35 @@
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-10] feat: 新增视频咨询四种状态详情页，完善视频咨询列表
|
||||
|
||||
**涉及文件（5个）：**
|
||||
- `my-records.html` — 视频咨询Tab新增"已取消"和"已拒绝"两条记录，新增对应状态样式（灰色/红色），各记录链接指向独立详情页
|
||||
- `video-detail-pending.html` — 新增视频咨询待开始详情页：医生信息（橙色标签）、可展开咨询人档案、蓝色视频Banner、信息卡片、温馨提示、底部"取消预约"+"等待预约时间"按钮
|
||||
- `video-detail-done.html` — 新增视频咨询已完成详情页：医生信息（绿色标签）、可展开咨询人档案、绿色视频Banner、信息卡片（含拨打时间/通话时长）、底部"再次预约"+"评价"按钮
|
||||
- `video-detail-cancelled.html` — 新增视频咨询已取消详情页：医生信息（灰色标签）、可展开咨询人档案、灰色视频Banner、信息卡片（含取消时间）、取消原因区块、底部"再次预约"按钮
|
||||
- `video-detail-rejected.html` — 新增视频咨询已拒绝详情页：医生信息（红色标签）、可展开咨询人档案、红色视频Banner、信息卡片、拒绝原因区块、底部"重新预约"按钮
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-10] feat: 优化咨询详情页面，支持已评价/未评价两种状态展示
|
||||
|
||||
**涉及文件（3个）：**
|
||||
- `record-detail.html` — 添加状态切换逻辑，支持已评价/未评价两种UI展示；新增"我的评价"区域、"咨询人健康档案"入口、"医生咨询小结"区域；修改底部按钮为"再次咨询"（蓝色边框）+ "评价"/"已评价"（根据状态切换）
|
||||
- `record-detail-rated.html` — 已评价状态演示版本（显示5星评价 + "已评价"禁用按钮）
|
||||
- `record-detail-unrated.html` — 未评价状态演示版本（隐藏评价 + "评价"蓝色按钮）
|
||||
|
||||
**变更说明：**
|
||||
- 新增"我的评价"区域，已评价时显示5星评价
|
||||
- 新增"咨询人健康档案"入口卡片
|
||||
- 新增"医生咨询小结"区域（黄色背景提示框）
|
||||
- 修改底部按钮布局：从单个"继续咨询"改为两个按钮组合
|
||||
- 已评价：「再次咨询」（蓝色边框）+ 「已评价」（灰色禁用）
|
||||
- 未评价：「再次咨询」（蓝色边框）+ 「评价」（蓝色填充）
|
||||
- 添加 JavaScript 初始化逻辑，根据 `isRated` 变量切换UI状态
|
||||
|
||||
---
|
||||
|
||||
## [2026-04-09] fix: 修复返回键路由问题，新增科室/疾病专家数量展示
|
||||
|
||||
**涉及文件（7个）：**
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> **所属端**：员工端 APP
|
||||
> **模块路径**：`employee-app/health-consult/`
|
||||
> **最后更新**：2026-04-09
|
||||
> **最后更新**：2026-04-10
|
||||
|
||||
---
|
||||
|
||||
@@ -34,6 +34,8 @@ stateDiagram-v2
|
||||
[*] --> 进行中: 发起图文咨询
|
||||
[*] --> 待开始: 预约视频咨询
|
||||
待开始 --> 进行中: 到达预约时间
|
||||
待开始 --> 已取消: 用户取消预约
|
||||
待开始 --> 已拒绝: 医生拒绝预约
|
||||
进行中 --> 已完成: 结束咨询
|
||||
已完成 --> 已评价: 提交评价
|
||||
```
|
||||
@@ -60,6 +62,10 @@ stateDiagram-v2
|
||||
| 16 | `select-person-dialog.html` | 弹窗 | 选择/新增咨询人 |
|
||||
| 17 | `select-report-dialog.html` | 弹窗 | 选择体检报告 |
|
||||
| 18 | `rate-dialog.html` | 弹窗 | 评价医生（弹窗版） |
|
||||
| 19 | `video-detail-pending.html` | 页面 | 视频咨询详情 - 待开始 |
|
||||
| 20 | `video-detail-done.html` | 页面 | 视频咨询详情 - 已完成 |
|
||||
| 21 | `video-detail-cancelled.html` | 页面 | 视频咨询详情 - 已取消 |
|
||||
| 22 | `video-detail-rejected.html` | 页面 | 视频咨询详情 - 已拒绝 |
|
||||
|
||||
---
|
||||
|
||||
@@ -203,14 +209,14 @@ stateDiagram-v2
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）
|
||||
- 咨询状态及对应样式：`进行中`（蓝色）、`已完成`（绿色）、`待开始`（橙色）、`已取消`（灰色）、`已拒绝`（红色）
|
||||
- 已完成的图文咨询如已评价则显示"已评价"标记
|
||||
- 视频咨询 `待开始` 状态显示预约时间，`已完成` 显示通话时长
|
||||
- 视频咨询 `待开始` 状态显示预约时间，`已完成` 显示通话时长，`已取消` 显示预约时间，`已拒绝` 显示预约时间
|
||||
|
||||
**交互说明**
|
||||
|
||||
- Tab 栏切换图文/视频记录列表
|
||||
- 点击记录卡片跳转到咨询详情页
|
||||
- 点击记录卡片跳转到对应咨询详情页：图文咨询跳转到咨询详情页，视频咨询根据状态跳转到对应的视频详情页（待开始/已完成/已取消/已拒绝）
|
||||
- 导航栏返回 → 健康咨询首页
|
||||
|
||||
---
|
||||
@@ -219,16 +225,99 @@ stateDiagram-v2
|
||||
|
||||
**功能说明**
|
||||
|
||||
展示单条咨询记录详情：医生信息栏 + 状态标签、咨询信息（类型、时间、状态、时长）、对话入口卡片、底部"继续咨询"按钮。
|
||||
展示单条咨询记录详情。包含医生信息栏、咨询信息卡片、咨询人健康档案入口、历史对话入口、医生咨询小结。根据咨询是否已评价，显示不同的UI：
|
||||
- **已评价状态**：显示"我的评价"区域（5星评价）、医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "已评价"（灰色禁用）
|
||||
- **未评价状态**：隐藏"我的评价"区域，显示医生咨询小结，底部按钮为"再次咨询"（蓝色边框）+ "评价"（蓝色填充）
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 仅「进行中」状态显示"继续咨询"按钮
|
||||
- 进行中的咨询时长显示 `-`
|
||||
- 已完成的咨询显示医生咨询小结
|
||||
- 已评价的咨询显示5星评价，"评价"按钮变为"已评价"禁用状态
|
||||
- 未评价的咨询隐藏评价区域，显示"评价"按钮
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击对话入口卡片或「继续咨询」按钮，跳转到图文咨询聊天页
|
||||
- 点击对话入口卡片或「再次咨询」按钮，跳转到图文咨询聊天页
|
||||
- 点击「咨询人健康档案」入口，跳转到健康档案详情页
|
||||
- 点击「评价」按钮（未评价状态），跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8a 视频咨询详情 - 待开始（video-detail-pending.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询待开始状态的详情页。展示医生信息（橙色"待开始"标签）、可展开/收起的咨询人健康档案、蓝色视频咨询Banner（含预约时间）、咨询信息卡片、温馨提示。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 预约时间前15分钟系统推送提醒
|
||||
- 用户可在预约时间前取消预约
|
||||
- "等待预约时间"按钮为置灰禁用状态
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情（基本信息、生活习惯、身体情况）
|
||||
- 点击「取消预约」取消当前视频咨询预约
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8b 视频咨询详情 - 已完成（video-detail-done.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已完成状态的详情页。展示医生信息（绿色"已完成"标签）、可展开/收起的咨询人健康档案、绿色视频咨询Banner、咨询信息卡片（含视频拨打时间和通话时长）。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 显示实际视频拨打时间段和通话时长
|
||||
- 未评价时显示"评价"按钮，已评价后按钮变为禁用
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「再次预约」跳转到视频咨询预约页
|
||||
- 点击「评价」跳转到评价医生页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8c 视频咨询详情 - 已取消（video-detail-cancelled.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已取消状态的详情页。展示医生信息（灰色"已取消"标签）、可展开/收起的咨询人健康档案、灰色视频咨询Banner、咨询信息卡片（含取消时间）、取消原因区块。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 取消原因由用户取消时填写或系统自动生成
|
||||
- 取消原因区块使用灰色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「再次预约」跳转到视频咨询预约页
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
### 2.8d 视频咨询详情 - 已拒绝（video-detail-rejected.html）
|
||||
|
||||
**功能说明**
|
||||
|
||||
视频咨询已拒绝状态的详情页。展示医生信息（红色"已拒绝"标签）、可展开/收起的咨询人健康档案、红色视频咨询Banner、咨询信息卡片、拒绝原因区块。
|
||||
|
||||
**业务规则**
|
||||
|
||||
- 拒绝原因由医生填写
|
||||
- 拒绝原因区块使用红色左边框样式
|
||||
|
||||
**交互说明**
|
||||
|
||||
- 点击「咨询人健康档案」展开/收起档案详情
|
||||
- 点击「重新预约」跳转到视频咨询预约页（可选择其他时间或医生）
|
||||
- 导航栏返回 → 我的咨询记录页
|
||||
|
||||
---
|
||||
|
||||
@@ -80,6 +80,8 @@
|
||||
.status-done { background: #f6ffed; color: #52c41a; }
|
||||
.status-ongoing { background: #e6f4ff; color: #1677ff; }
|
||||
.status-pending { background: #fff7e6; color: #fa8c16; }
|
||||
.status-cancelled { background: #f5f5f5; color: #999; }
|
||||
.status-rejected { background: #fff2f0; color: #ff4d4f; }
|
||||
.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; }
|
||||
@@ -139,8 +141,8 @@
|
||||
<div class="ri-time">2026-04-07 10:20</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录2：李晓梅医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 记录2：李晓梅医生 - 已完成 + 已评价 → 点击跳转 record-detail-rated.html -->
|
||||
<a class="record-item" href="record-detail-rated.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -154,8 +156,8 @@
|
||||
<div class="ri-time">2026-03-28 14:35</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 记录3：王志远医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 记录3：王志远医生 - 已完成 + 未评价 → 点击跳转 record-detail-unrated.html -->
|
||||
<a class="record-item" href="record-detail-unrated.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -173,8 +175,8 @@
|
||||
<!-- 视频咨询列表（默认隐藏） -->
|
||||
<div id="tab-video" class="tab-content">
|
||||
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 视频记录1：张建国医生 - 待开始 → 点击跳转 video-detail-pending.html -->
|
||||
<a class="record-item" href="video-detail-pending.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👨⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -187,8 +189,8 @@
|
||||
<div class="ri-time">预约于 2026-04-07 11:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 record-detail.html -->
|
||||
<a class="record-item" href="record-detail.html">
|
||||
<!-- [交互] 视频记录2：陈美华医生 - 已完成 → 点击跳转 video-detail-done.html -->
|
||||
<a class="record-item" href="video-detail-done.html">
|
||||
<div class="ri-top">
|
||||
<div class="ri-avatar">👩⚕️</div>
|
||||
<div class="ri-info">
|
||||
@@ -200,6 +202,34 @@
|
||||
<div class="ri-msg">📹 视频咨询 · 时长 18分钟</div>
|
||||
<div class="ri-time">2026-03-20 10:00</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录3：刘伟医生 - 已取消 → 点击跳转 video-detail-cancelled.html -->
|
||||
<a class="record-item" href="video-detail-cancelled.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-cancelled">已取消</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-03-10 15:00</div>
|
||||
<div class="ri-time">预约于 2026-03-08 09:30</div>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 视频记录4：赵丽华医生 - 已拒绝 → 点击跳转 video-detail-rejected.html -->
|
||||
<a class="record-item" href="video-detail-rejected.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-rejected">已拒绝</span>
|
||||
</div>
|
||||
<div class="ri-msg">📹 视频咨询 · 预约时间：2026-03-05 09:00</div>
|
||||
<div class="ri-time">预约于 2026-03-03 16:20</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,358 @@
|
||||
<!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: #f6ffed; color: #52c41a; 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; }
|
||||
|
||||
/* 我的评价区域 */
|
||||
.rating-section { margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px; display: block; }
|
||||
.rating-section .rs-label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.rating-section .rs-stars { display: flex; gap: 4px; }
|
||||
.rating-section .rs-stars .star { font-size: 20px; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-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;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* 咨询人档案详情 */
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-disabled {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #f0f0f0;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.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-03-28 14:35</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 class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">32分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 我的评价区域：已评价时显示 -->
|
||||
<div id="ratingSection" class="rating-section">
|
||||
<div class="rs-label">我的评价</div>
|
||||
<div class="rs-stars">
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 咨询人档案详情：点击展开 -->
|
||||
<div class="health-record-detail">
|
||||
<!-- 基本信息 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">姓名</span>
|
||||
<span class="hrd-value">张三</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">性别 / 年龄</span>
|
||||
<span class="hrd-value">男 / 58岁</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">身高 / 体重</span>
|
||||
<span class="hrd-value">172 cm / 80 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">吸烟</span>
|
||||
<span class="hrd-value">是</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮酒</span>
|
||||
<span class="hrd-value">偶尔</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮食喜好</span>
|
||||
<span class="hrd-value">偏油腻</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">睡眠质量</span>
|
||||
<span class="hrd-value">一般</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">过敏史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">遗传史</span>
|
||||
<span class="hrd-value">高血压家族史</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">既往史</span>
|
||||
<span class="hrd-value">阑尾炎手术</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">其他疾病</span>
|
||||
<span class="hrd-value">高血压、高血脂</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<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 id="doctorSummary" class="doctor-summary">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">您的血糖控制情况良好，继续保持现有的饮食和运动习惯。建议每3个月复查一次血糖指标，定期监测血压。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：已评价状态 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button class="btn-disabled" disabled>已评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
<script>
|
||||
/**
|
||||
* 切换咨询人档案展开/收起
|
||||
*/
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
const detail = el.nextElementSibling;
|
||||
detail.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,341 @@
|
||||
<!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: #f6ffed; color: #52c41a; 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; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-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;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
|
||||
/* 咨询人档案详情 */
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary {
|
||||
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-primary: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-03-15 09:10</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 class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">25分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 咨询人档案详情：点击展开 -->
|
||||
<div class="health-record-detail">
|
||||
<!-- 基本信息 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">姓名</span>
|
||||
<span class="hrd-value">本人</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">性别 / 年龄</span>
|
||||
<span class="hrd-value">男 / 45岁</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">身高 / 体重</span>
|
||||
<span class="hrd-value">175 cm / 75 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">吸烟</span>
|
||||
<span class="hrd-value">否</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮酒</span>
|
||||
<span class="hrd-value">偶尔</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">饮食喜好</span>
|
||||
<span class="hrd-value">清淡</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">睡眠质量</span>
|
||||
<span class="hrd-value">良好</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体情况 -->
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">过敏史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">遗传史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">既往史</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
<div class="hrd-row">
|
||||
<span class="hrd-label">其他疾病</span>
|
||||
<span class="hrd-value">无</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<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 id="doctorSummary" class="doctor-summary">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">建议您做颈椎MRI检查，明确诊断。同时建议进行颈椎牵引治疗，配合物理治疗。避免长时间低头，定期做颈椎保健操。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：未评价状态 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button class="btn-primary" onclick="alert('跳转到评价页面')">评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
<script>
|
||||
/**
|
||||
* 切换咨询人档案展开/收起
|
||||
*/
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
const detail = el.nextElementSibling;
|
||||
detail.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -100,9 +100,60 @@
|
||||
.chat-entry .ce-sub { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.chat-entry .ce-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 我的评价区域 */
|
||||
.rating-section { margin: 12px 16px; background: #fff; border-radius: 14px; padding: 16px; display: none; }
|
||||
.rating-section.show { display: block; }
|
||||
.rating-section .rs-label { font-size: 13px; color: #999; margin-bottom: 8px; }
|
||||
.rating-section .rs-stars { display: flex; gap: 4px; }
|
||||
.rating-section .rs-stars .star { font-size: 20px; }
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-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;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.health-record-entry .hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.health-record-entry .hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.health-record-entry .hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
|
||||
/* 医生咨询小结 */
|
||||
.doctor-summary {
|
||||
margin: 12px 16px;
|
||||
background: #fffbe6;
|
||||
border-radius: 14px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid #faad14;
|
||||
}
|
||||
.doctor-summary .ds-title { font-size: 14px; font-weight: 600; color: #d46b08; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.doctor-summary .ds-content { font-size: 13px; color: #ad6800; line-height: 1.6; }
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.detail-footer .btn-continue {
|
||||
.detail-footer .btn-outline {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #fff;
|
||||
color: #1677ff;
|
||||
border: 2px solid #1677ff;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-outline:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #1677ff;
|
||||
@@ -114,7 +165,18 @@
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.detail-footer .btn-continue:active { opacity: 0.85; }
|
||||
.detail-footer .btn-primary:active { opacity: 0.85; }
|
||||
.detail-footer .btn-disabled {
|
||||
flex: 1;
|
||||
height: 44px;
|
||||
background: #f0f0f0;
|
||||
color: #bfbfbf;
|
||||
border: none;
|
||||
border-radius: 22px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 底部安全区留白 */
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; background: #fff; }
|
||||
@@ -162,16 +224,39 @@
|
||||
<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>
|
||||
<span class="dic-value">已完成</span>
|
||||
</div>
|
||||
<div class="dic-row">
|
||||
<span class="dic-label">咨询时长</span>
|
||||
<span class="dic-value">—</span>
|
||||
<span class="dic-value">32分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [条件显示] 我的评价区域：已评价时显示 -->
|
||||
<div id="ratingSection" class="rating-section">
|
||||
<div class="rs-label">我的评价</div>
|
||||
<div class="rs-stars">
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
<span class="star">⭐</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口 -->
|
||||
<a class="health-record-entry" href="#">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [交互] 对话入口卡片：点击跳转 text-chat.html 查看历史对话 -->
|
||||
<a class="chat-entry" href="text-chat.html?from=record-detail">
|
||||
<span class="ce-icon">💬</span>
|
||||
@@ -182,15 +267,65 @@
|
||||
<span class="ce-arrow">›</span>
|
||||
</a>
|
||||
|
||||
<!-- [条件显示] 医生咨询小结：已完成的咨询显示 -->
|
||||
<div id="doctorSummary" class="doctor-summary" style="display: none;">
|
||||
<div class="ds-title">📋 医生咨询小结</div>
|
||||
<div class="ds-content">建议完善心内科相关检查：心电图、超声心动图，同时加强血压日常监测，低盐低脂饮食，避免剧烈运动，如症状加重请及时就诊。</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏：继续咨询按钮 → text-chat.html -->
|
||||
<!-- [交互] 底部操作栏：根据评价状态显示不同按钮 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-continue" onclick="window.location.href='text-chat.html?from=record-detail'">💬 继续咨询</button>
|
||||
<button id="btnContinue" class="btn-outline" onclick="window.location.href='text-chat.html?from=record-detail'">再次咨询</button>
|
||||
<button id="btnRate" class="btn-primary" onclick="handleRate()">评价</button>
|
||||
<button id="btnRated" class="btn-disabled" disabled>已评价</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区留白 -->
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 页面初始化：根据咨询状态设置UI
|
||||
* 数据来源：实际应从后端API获取，这里使用示例数据
|
||||
*/
|
||||
function initPage() {
|
||||
// 示例：从URL参数或数据属性获取是否已评价的状态
|
||||
// 实际应用中应从后端API获取真实数据
|
||||
const isRated = true; // 改为 false 可查看未评价状态
|
||||
|
||||
const ratingSection = document.getElementById('ratingSection');
|
||||
const doctorSummary = document.getElementById('doctorSummary');
|
||||
const btnRate = document.getElementById('btnRate');
|
||||
const btnRated = document.getElementById('btnRated');
|
||||
|
||||
if (isRated) {
|
||||
// 已评价状态
|
||||
ratingSection.classList.add('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'none';
|
||||
btnRated.style.display = 'block';
|
||||
} else {
|
||||
// 未评价状态
|
||||
ratingSection.classList.remove('show');
|
||||
doctorSummary.style.display = 'block';
|
||||
btnRate.style.display = 'block';
|
||||
btnRated.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理评价按钮点击
|
||||
*/
|
||||
function handleRate() {
|
||||
// 跳转到评价页面或打开评价弹窗
|
||||
alert('跳转到评价页面');
|
||||
}
|
||||
|
||||
// 页面加载完成后初始化
|
||||
document.addEventListener('DOMContentLoaded', initPage);
|
||||
</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; }
|
||||
.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; }
|
||||
.dd-info { flex: 1; }
|
||||
.dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.dd-status--cancelled { background: #f5f5f5; color: #999; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.health-record-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); transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #bfbfbf, #d9d9d9); border-radius: 14px;
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.vb-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.vb-info { flex: 1; }
|
||||
.vb-title { font-size: 16px; font-weight: 700; }
|
||||
.vb-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
.vb-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.25); white-space: nowrap; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.cancel-reason {
|
||||
margin: 12px 16px; background: #fafafa; border-radius: 14px; padding: 14px 16px;
|
||||
border-left: 4px solid #d9d9d9;
|
||||
}
|
||||
.cancel-reason .cr-title { font-size: 14px; font-weight: 600; color: #999; margin-bottom: 8px; }
|
||||
.cancel-reason .cr-content { font-size: 13px; color: #666; line-height: 1.6; }
|
||||
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-primary {
|
||||
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;
|
||||
}
|
||||
.btn-primary: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>
|
||||
|
||||
<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 dd-status--cancelled">已取消</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询Banner（灰色已取消） -->
|
||||
<div class="video-banner">
|
||||
<div class="vb-icon">📹</div>
|
||||
<div class="vb-info">
|
||||
<div class="vb-title">视频咨询</div>
|
||||
<div class="vb-sub">预约时间：2026-03-10 15:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已取消</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-03-10 15:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">取消时间</span><span class="dic-value">2026-03-09 11:20</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">已取消</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 取消原因 -->
|
||||
<div class="cancel-reason">
|
||||
<div class="cr-title">取消原因</div>
|
||||
<div class="cr-content">个人时间冲突，无法按时参加视频咨询。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-primary">再次预约</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,190 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
.dd-info { flex: 1; }
|
||||
.dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.dd-status--done { background: #f6ffed; color: #52c41a; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.health-record-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); transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #52c41a, #73d13d); border-radius: 14px;
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.vb-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.vb-info { flex: 1; }
|
||||
.vb-title { font-size: 16px; font-weight: 700; }
|
||||
.vb-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
.vb-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.25); white-space: nowrap; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-outline {
|
||||
flex: 1; height: 44px; background: #fff; color: #1677ff; border: 2px solid #1677ff;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-outline:active { opacity: 0.85; }
|
||||
.btn-primary {
|
||||
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;
|
||||
}
|
||||
.btn-primary: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>
|
||||
|
||||
<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 dd-status--done">已完成</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询Banner（绿色已完成） -->
|
||||
<div class="video-banner">
|
||||
<div class="vb-icon">📹</div>
|
||||
<div class="vb-info">
|
||||
<div class="vb-title">视频咨询</div>
|
||||
<div class="vb-sub">预约时间：2026-03-20 10:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已完成</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-03-20 10:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">视频拨打时间</span><span class="dic-value">2026-03-20 10:00 ~ 10:03</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">18分钟</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline">再次预约</button>
|
||||
<button class="btn-primary">评价</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,205 @@
|
||||
<!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; }
|
||||
.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; }
|
||||
.dd-info { flex: 1; }
|
||||
.dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.dd-status--pending { background: #fff7e6; color: #fa8c16; }
|
||||
|
||||
/* PLACEHOLDER_STYLES */
|
||||
|
||||
/* 咨询人健康档案 */
|
||||
.health-record-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); transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
/* 视频咨询Banner */
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #1677ff, #4096ff); border-radius: 14px;
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.vb-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.vb-info { flex: 1; }
|
||||
.vb-title { font-size: 16px; font-weight: 700; }
|
||||
.vb-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
.vb-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.25); white-space: nowrap; }
|
||||
|
||||
/* PLACEHOLDER_STYLES2 */
|
||||
|
||||
/* 信息卡片 */
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
/* 温馨提示 */
|
||||
.tip-box {
|
||||
margin: 12px 16px; background: #e6f4ff; border-radius: 14px; padding: 14px 16px;
|
||||
font-size: 13px; color: #1677ff; line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 底部操作栏 */
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-outline {
|
||||
flex: 1; height: 44px; background: #fff; color: #1677ff; border: 2px solid #1677ff;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity 0.15s;
|
||||
}
|
||||
.btn-outline:active { opacity: 0.85; }
|
||||
.btn-disabled {
|
||||
flex: 1; height: 44px; background: #f0f0f0; color: #bfbfbf; border: none;
|
||||
border-radius: 22px; font-size: 15px; font-weight: 600; cursor: not-allowed;
|
||||
}
|
||||
.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 dd-status--pending">待开始</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询Banner -->
|
||||
<div class="video-banner">
|
||||
<div class="vb-icon">📹</div>
|
||||
<div class="vb-info">
|
||||
<div class="vb-title">视频咨询</div>
|
||||
<div class="vb-sub">预约时间：2026-04-08 10:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">待开始</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY2 -->
|
||||
|
||||
<!-- 咨询信息卡片 -->
|
||||
<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-08 10:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">待开始</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 温馨提示 -->
|
||||
<div class="tip-box">📌 温馨提示：请在预约时间前5分钟准备好，保持网络畅通，系统将提前15分钟推送提醒。</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-outline">取消预约</button>
|
||||
<button class="btn-disabled" disabled>等待预约时间</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>咨询详情 - 视频咨询已拒绝</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
.phone-shell {
|
||||
width: 390px; 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; }
|
||||
.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; }
|
||||
.dd-info { flex: 1; }
|
||||
.dd-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.dd-dept { font-size: 13px; color: #999; margin-top: 2px; }
|
||||
.dd-status { font-size: 12px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
|
||||
.dd-status--rejected { background: #fff2f0; color: #ff4d4f; }
|
||||
|
||||
/* PLACEHOLDER_A */
|
||||
|
||||
.health-record-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); transition: transform 0.15s;
|
||||
}
|
||||
.health-record-entry:active { transform: scale(0.98); }
|
||||
.hre-icon { font-size: 24px; flex-shrink: 0; }
|
||||
.hre-title { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; }
|
||||
.hre-arrow { font-size: 18px; color: #ccc; flex-shrink: 0; transition: transform 0.3s; }
|
||||
.health-record-entry.expanded .hre-arrow { transform: rotate(180deg); }
|
||||
.health-record-detail { margin: 0 16px 12px; background: #f8f9fa; border-radius: 14px; padding: 16px; display: none; }
|
||||
.health-record-detail.show { display: block; }
|
||||
.hrd-section { margin-bottom: 16px; }
|
||||
.hrd-section:last-child { margin-bottom: 0; }
|
||||
.hrd-section-title { font-size: 13px; font-weight: 600; color: #1677ff; margin-bottom: 10px; }
|
||||
.hrd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
|
||||
.hrd-label { color: #999; }
|
||||
.hrd-value { color: #1a1a1a; font-weight: 500; text-align: right; }
|
||||
|
||||
.video-banner {
|
||||
margin: 12px 16px; background: linear-gradient(135deg, #ff4d4f, #ff7875); border-radius: 14px;
|
||||
padding: 20px; display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.vb-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
|
||||
.vb-info { flex: 1; }
|
||||
.vb-title { font-size: 16px; font-weight: 700; }
|
||||
.vb-sub { font-size: 13px; opacity: 0.85; margin-top: 4px; }
|
||||
.vb-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.25); white-space: nowrap; }
|
||||
|
||||
/* PLACEHOLDER_B */
|
||||
|
||||
.detail-info-card { margin: 12px 16px; background: #f8f9fa; border-radius: 14px; padding: 14px 16px; }
|
||||
.dic-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.dic-row:last-child { border-bottom: none; }
|
||||
.dic-label { color: #999; }
|
||||
.dic-value { color: #1a1a1a; font-weight: 500; }
|
||||
|
||||
.reject-reason {
|
||||
margin: 12px 16px; background: #fff2f0; border-radius: 14px; padding: 14px 16px;
|
||||
border-left: 4px solid #ff4d4f;
|
||||
}
|
||||
.reject-reason .rr-title { font-size: 14px; font-weight: 600; color: #cf1322; margin-bottom: 8px; }
|
||||
.reject-reason .rr-content { font-size: 13px; color: #a8071a; line-height: 1.6; }
|
||||
|
||||
.detail-footer { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; display: flex; gap: 10px; }
|
||||
.btn-primary {
|
||||
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;
|
||||
}
|
||||
.btn-primary: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>
|
||||
|
||||
<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 dd-status--rejected">已拒绝</span>
|
||||
</div>
|
||||
|
||||
<!-- PLACEHOLDER_BODY -->
|
||||
|
||||
<!-- [交互] 咨询人健康档案入口：点击展开/收起 -->
|
||||
<div class="health-record-entry" onclick="toggleHealthRecord(this)">
|
||||
<span class="hre-icon">📋</span>
|
||||
<span class="hre-title">咨询人健康档案</span>
|
||||
<span class="hre-arrow">›</span>
|
||||
</div>
|
||||
<div class="health-record-detail">
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">基本信息</div>
|
||||
<div class="hrd-row"><span class="hrd-label">姓名</span><span class="hrd-value">本人</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">性别 / 年龄</span><span class="hrd-value">男 / 35岁</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">身高 / 体重</span><span class="hrd-value">175 cm / 72 kg</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">生活习惯</div>
|
||||
<div class="hrd-row"><span class="hrd-label">吸烟</span><span class="hrd-value">否</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮酒</span><span class="hrd-value">偶尔</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">饮食喜好</span><span class="hrd-value">清淡</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">睡眠质量</span><span class="hrd-value">良好</span></div>
|
||||
</div>
|
||||
<div class="hrd-section">
|
||||
<div class="hrd-section-title">身体情况</div>
|
||||
<div class="hrd-row"><span class="hrd-label">过敏史</span><span class="hrd-value">青霉素过敏</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">遗传史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">既往史</span><span class="hrd-value">无</span></div>
|
||||
<div class="hrd-row"><span class="hrd-label">其他疾病</span><span class="hrd-value">无</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 视频咨询Banner（红色已拒绝） -->
|
||||
<div class="video-banner">
|
||||
<div class="vb-icon">📹</div>
|
||||
<div class="vb-info">
|
||||
<div class="vb-title">视频咨询</div>
|
||||
<div class="vb-sub">预约时间：2026-03-05 09:00</div>
|
||||
</div>
|
||||
<span class="vb-tag">已拒绝</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-03-05 09:00</span></div>
|
||||
<div class="dic-row"><span class="dic-label">咨询状态</span><span class="dic-value">已拒绝</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 拒绝原因 -->
|
||||
<div class="reject-reason">
|
||||
<div class="rr-title">拒绝原因</div>
|
||||
<div class="rr-content">抱歉，该时段已有其他安排，建议您选择其他时间或其他医生进行预约。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 底部操作栏 -->
|
||||
<div class="detail-footer">
|
||||
<button class="btn-primary">重新预约</button>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleHealthRecord(el) {
|
||||
el.classList.toggle('expanded');
|
||||
el.nextElementSibling.classList.toggle('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user