feat: 健康体检员工端新增页面总览并纳入站点地图
This commit is contained in:
@@ -0,0 +1,461 @@
|
||||
<!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 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #e0e0e0; }
|
||||
|
||||
/* 顶部导航 */
|
||||
.nav { position: sticky; top: 0; z-index: 100; background: #16213e; border-bottom: 1px solid #0f3460; padding: 14px 24px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
|
||||
.nav__title { font-size: 16px; font-weight: 600; color: #4fc3f7; margin-right: 16px; white-space: nowrap; }
|
||||
.nav__link { font-size: 13px; color: #aaa; text-decoration: none; padding: 5px 12px; border-radius: 20px; transition: all .2s; white-space: nowrap; border: 1px solid transparent; }
|
||||
.nav__link:hover { background: #0f3460; color: #4fc3f7; border-color: #4fc3f7; }
|
||||
|
||||
/* 业务主线区块 */
|
||||
.section { padding: 24px 24px 8px; }
|
||||
.section__header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
|
||||
.section__title { font-size: 15px; font-weight: 600; color: #fff; }
|
||||
.section__count { font-size: 12px; color: #666; background: #2a2a4a; padding: 2px 8px; border-radius: 10px; }
|
||||
|
||||
/* 子分组标题 */
|
||||
.sub-title { font-size: 12px; color: #6a8caf; margin: 20px 0 10px 0; font-weight: 500; padding-left: 2px; }
|
||||
|
||||
/* 横向滚动容器 */
|
||||
.scroll-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
|
||||
.scroll-row::-webkit-scrollbar { height: 6px; }
|
||||
.scroll-row::-webkit-scrollbar-track { background: transparent; }
|
||||
.scroll-row::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
|
||||
|
||||
/* 卡片 */
|
||||
.card { flex-shrink: 0; width: 240px; cursor: pointer; transition: transform .2s; }
|
||||
.card:hover { transform: scale(1.02); }
|
||||
.card__img { width: 240px; height: 520px; border-radius: 12px; overflow: hidden; border: 2px solid #2a2a4a; background: #111; transition: border-color .2s; }
|
||||
.card:hover .card__img { border-color: #4fc3f7; }
|
||||
.card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
|
||||
.card__label { margin-top: 8px; font-size: 12px; color: #ccc; text-align: center; }
|
||||
|
||||
/* 横屏页卡片(844×390 比例) */
|
||||
.card--wide { width: 496px; }
|
||||
.card--wide .card__img { width: 496px; height: 229px; }
|
||||
.card--wide .card__img img { object-fit: contain; background: #fff; }
|
||||
.card__tags { display: flex; justify-content: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
|
||||
.tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
|
||||
.tag--modal { background: #4a2800; color: #ffa940; }
|
||||
.tag--state { background: #002a4a; color: #4fc3f7; }
|
||||
.tag--flow { background: #1a3a1a; color: #69db7c; }
|
||||
|
||||
.divider { height: 1px; background: #2a2a4a; margin: 8px 24px; }
|
||||
|
||||
/* 灯箱 */
|
||||
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; cursor: zoom-out; }
|
||||
.lightbox.show { display: flex; }
|
||||
.lightbox img { max-width: 90vw; max-height: 92vh; border-radius: 8px; }
|
||||
.lightbox__close { position: absolute; top: 16px; right: 20px; color: #fff; font-size: 24px; cursor: pointer; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,0.1); }
|
||||
.lightbox__name { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #ccc; font-size: 13px; background: rgba(0,0,0,0.6); padding: 6px 16px; border-radius: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="nav">
|
||||
<span class="nav__title">健康体检员工端 · 设计总览</span>
|
||||
<a class="nav__link" href="#sec-home">模块主页</a>
|
||||
<a class="nav__link" href="#sec-booking">常规体检</a>
|
||||
<a class="nav__link" href="#sec-gastro">胃肠镜</a>
|
||||
<a class="nav__link" href="#sec-preselect">医院预选</a>
|
||||
<a class="nav__link" href="#sec-cta">冠脉CTA</a>
|
||||
<a class="nav__link" href="#sec-onsite">现场体检</a>
|
||||
<a class="nav__link" href="#sec-report">报告对比</a>
|
||||
<a class="nav__link" href="#sec-message">消息咨询</a>
|
||||
<a class="nav__link" href="#sec-guide">操作说明</a>
|
||||
</nav>
|
||||
|
||||
<!-- ========== 一、模块主页 ========== -->
|
||||
<section class="section" id="sec-home">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">一、模块主页</h2>
|
||||
<span class="section__count">1 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">健康体检主页(index.html)· 计划 Banner 轮播 + 服务入口</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/index.jpg','健康体检主页')">
|
||||
<div class="card__img"><img src="screenshots/index.jpg" alt=""></div>
|
||||
<div class="card__label">健康体检主页</div>
|
||||
<div class="card__tags"><span class="tag tag--state">默认</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 二、常规体检预约 ========== -->
|
||||
<section class="section" id="sec-booking">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">二、常规体检预约流程</h2>
|
||||
<span class="section__count">15 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">选择体检类型 + 选择医院(booking-type.html / booking-hospital.html)· 个人信息确认弹窗</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-type.jpg','选择体检类型')">
|
||||
<div class="card__img"><img src="screenshots/booking-type.jpg" alt=""></div>
|
||||
<div class="card__label">选择体检类型</div>
|
||||
<div class="card__tags"><span class="tag tag--state">入口</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-hospital.jpg','选择医院 · 常规')">
|
||||
<div class="card__img"><img src="screenshots/booking-hospital.jpg" alt=""></div>
|
||||
<div class="card__label">选择医院</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第1步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-hospital-dialog.jpg','确认个人信息弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-hospital-dialog.jpg" alt=""></div>
|
||||
<div class="card__label">确认个人信息</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">选择项目(booking-project.html)· 必检/选检Tab + 提交/推荐弹窗 + 项目详情 + 已选项目确认</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-project.jpg','选择项目 · 选检Tab')">
|
||||
<div class="card__img"><img src="screenshots/booking-project.jpg" alt=""></div>
|
||||
<div class="card__label">选择项目 · 选检</div>
|
||||
<div class="card__tags"><span class="tag tag--state">默认Tab</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-project-required.jpg','选择项目 · 必检Tab')">
|
||||
<div class="card__img"><img src="screenshots/booking-project-required.jpg" alt=""></div>
|
||||
<div class="card__label">选择项目 · 必检</div>
|
||||
<div class="card__tags"><span class="tag tag--state">必检Tab</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-project-submit.jpg','确认提交弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-project-submit.jpg" alt=""></div>
|
||||
<div class="card__label">确认提交弹窗</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-project-ai.jpg','AI智能推荐弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-project-ai.jpg" alt=""></div>
|
||||
<div class="card__label">智能推荐弹窗</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/project-detail.jpg','项目详情')">
|
||||
<div class="card__img"><img src="screenshots/project-detail.jpg" alt=""></div>
|
||||
<div class="card__label">项目详情</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-project-selected.jpg','已选项目确认')">
|
||||
<div class="card__img"><img src="screenshots/booking-project-selected.jpg" alt=""></div>
|
||||
<div class="card__label">已选项目确认</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第2步完成</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">预约日期 + 预约结果(booking-date.html / booking-date-selected.html)· 成功/失败两态</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date.jpg','预约日期')">
|
||||
<div class="card__img"><img src="screenshots/booking-date.jpg" alt=""></div>
|
||||
<div class="card__label">预约日期</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第3步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date-dialog.jpg','确认预约信息弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-date-dialog.jpg" alt=""></div>
|
||||
<div class="card__label">确认预约信息</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date-selected.jpg','预约结果 · 成功态')">
|
||||
<div class="card__img"><img src="screenshots/booking-date-selected.jpg" alt=""></div>
|
||||
<div class="card__label">预约成功</div>
|
||||
<div class="card__tags"><span class="tag tag--state">成功态</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date-selected-reason.jpg','失败原因详情弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-date-selected-reason.jpg" alt=""></div>
|
||||
<div class="card__label">失败原因详情</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date-selected-cancel.jpg','确认取消预约弹窗')">
|
||||
<div class="card__img"><img src="screenshots/booking-date-selected-cancel.jpg" alt=""></div>
|
||||
<div class="card__label">确认取消预约</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/booking-date-selected-fail.jpg','预约结果 · 失败态')">
|
||||
<div class="card__img"><img src="screenshots/booking-date-selected-fail.jpg" alt=""></div>
|
||||
<div class="card__label">预约失败</div>
|
||||
<div class="card__tags"><span class="tag tag--state">失败态</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 三、胃肠镜体检预约 ========== -->
|
||||
<section class="section" id="sec-gastro">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">三、胃肠镜体检预约流程</h2>
|
||||
<span class="section__count">7 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">选择医院 + 病史问卷(gastro-hospital.html / gastro-questionnaire.html)· 就诊卡条件题</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-hospital.jpg','胃肠镜 · 选择医院')">
|
||||
<div class="card__img"><img src="screenshots/gastro-hospital.jpg" alt=""></div>
|
||||
<div class="card__label">选择医院</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第1步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-questionnaire.jpg','胃肠镜 · 病史问卷')">
|
||||
<div class="card__img"><img src="screenshots/gastro-questionnaire.jpg" alt=""></div>
|
||||
<div class="card__label">病史问卷</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第2步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-questionnaire-tangdu.jpg','病史问卷 · 唐都医院就诊卡题')">
|
||||
<div class="card__img"><img src="screenshots/gastro-questionnaire-tangdu.jpg" alt=""></div>
|
||||
<div class="card__label">问卷 · 唐都医院</div>
|
||||
<div class="card__tags"><span class="tag tag--state">就诊卡</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-questionnaire-card.jpg','就诊卡办理流程弹窗')">
|
||||
<div class="card__img"><img src="screenshots/gastro-questionnaire-card.jpg" alt=""></div>
|
||||
<div class="card__label">就诊卡办理流程</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">预约日期 + 预约结果(gastro-date.html / gastro-date-selected.html)</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-date.jpg','胃肠镜 · 预约日期')">
|
||||
<div class="card__img"><img src="screenshots/gastro-date.jpg" alt=""></div>
|
||||
<div class="card__label">预约日期</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第3步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-date-selected.jpg','胃肠镜 · 预约成功')">
|
||||
<div class="card__img"><img src="screenshots/gastro-date-selected.jpg" alt=""></div>
|
||||
<div class="card__label">预约成功</div>
|
||||
<div class="card__tags"><span class="tag tag--state">成功态</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-date-selected-fail.jpg','胃肠镜 · 预约失败')">
|
||||
<div class="card__img"><img src="screenshots/gastro-date-selected-fail.jpg" alt=""></div>
|
||||
<div class="card__label">预约失败</div>
|
||||
<div class="card__tags"><span class="tag tag--state">失败态</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 四、胃肠镜医院预选 ========== -->
|
||||
<section class="section" id="sec-preselect">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">四、胃肠镜医院预选(意向征集)</h2>
|
||||
<span class="section__count">3 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">医院预选(gastro-preselect.html)· 多选 + 提交确认 + 完成回显</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-preselect.jpg','医院预选填写')">
|
||||
<div class="card__img"><img src="screenshots/gastro-preselect.jpg" alt=""></div>
|
||||
<div class="card__label">医院预选填写</div>
|
||||
<div class="card__tags"><span class="tag tag--state">多选</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-preselect-dialog.jpg','确认提交预选弹窗')">
|
||||
<div class="card__img"><img src="screenshots/gastro-preselect-dialog.jpg" alt=""></div>
|
||||
<div class="card__label">确认提交预选</div>
|
||||
<div class="card__tags"><span class="tag tag--modal">弹窗</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/gastro-preselect-done.jpg','预选提交完成')">
|
||||
<div class="card__img"><img src="screenshots/gastro-preselect-done.jpg" alt=""></div>
|
||||
<div class="card__label">预选提交完成</div>
|
||||
<div class="card__tags"><span class="tag tag--state">完成态</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 五、冠脉CTA体检预约 ========== -->
|
||||
<section class="section" id="sec-cta">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">五、冠脉CTA体检预约流程</h2>
|
||||
<span class="section__count">4 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">选择医院 → 预约日期 → 预约结果(cta-hospital.html / cta-date.html / cta-date-selected.html)</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/cta-hospital.jpg','冠脉CTA · 选择医院')">
|
||||
<div class="card__img"><img src="screenshots/cta-hospital.jpg" alt=""></div>
|
||||
<div class="card__label">选择医院</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第1步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/cta-date.jpg','冠脉CTA · 预约日期')">
|
||||
<div class="card__img"><img src="screenshots/cta-date.jpg" alt=""></div>
|
||||
<div class="card__label">预约日期</div>
|
||||
<div class="card__tags"><span class="tag tag--state">第2步</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/cta-date-selected.jpg','冠脉CTA · 预约成功')">
|
||||
<div class="card__img"><img src="screenshots/cta-date-selected.jpg" alt=""></div>
|
||||
<div class="card__label">预约成功</div>
|
||||
<div class="card__tags"><span class="tag tag--state">成功态</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/cta-date-selected-fail.jpg','冠脉CTA · 预约失败')">
|
||||
<div class="card__img"><img src="screenshots/cta-date-selected-fail.jpg" alt=""></div>
|
||||
<div class="card__label">预约失败</div>
|
||||
<div class="card__tags"><span class="tag tag--state">失败态</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 六、现场体检 ========== -->
|
||||
<section class="section" id="sec-onsite">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">六、现场体检</h2>
|
||||
<span class="section__count">3 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">现场体检(my-appointments-all.html)· 三类体检 Tab</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/my-appointments-all.jpg','现场体检 · 常规体检')">
|
||||
<div class="card__img"><img src="screenshots/my-appointments-all.jpg" alt=""></div>
|
||||
<div class="card__label">常规体检 · 待体检</div>
|
||||
<div class="card__tags"><span class="tag tag--state">签到码</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/my-appointments-all-gastro.jpg','现场体检 · 胃肠镜体检')">
|
||||
<div class="card__img"><img src="screenshots/my-appointments-all-gastro.jpg" alt=""></div>
|
||||
<div class="card__label">胃肠镜体检</div>
|
||||
<div class="card__tags"><span class="tag tag--state">Tab切换</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/my-appointments-all-cta.jpg','现场体检 · 冠脉CTA体检')">
|
||||
<div class="card__img"><img src="screenshots/my-appointments-all-cta.jpg" alt=""></div>
|
||||
<div class="card__label">冠脉CTA体检</div>
|
||||
<div class="card__tags"><span class="tag tag--state">Tab切换</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 七、体检报告与指标对比 ========== -->
|
||||
<section class="section" id="sec-report">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">七、体检报告与指标对比</h2>
|
||||
<span class="section__count">6 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">报告列表 + 三类专项报告(reports.html / report-query.html / report-cta.html / report-gastro.html)</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/reports.jpg','体检报告列表')">
|
||||
<div class="card__img"><img src="screenshots/reports.jpg" alt=""></div>
|
||||
<div class="card__label">体检报告列表</div>
|
||||
<div class="card__tags"><span class="tag tag--state">入口</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/report-query.jpg','常规体检报告')">
|
||||
<div class="card__img"><img src="screenshots/report-query.jpg" alt=""></div>
|
||||
<div class="card__label">常规体检报告</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/report-cta.jpg','冠脉CTA报告')">
|
||||
<div class="card__img"><img src="screenshots/report-cta.jpg" alt=""></div>
|
||||
<div class="card__label">冠脉CTA报告</div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/report-gastro.jpg','胃肠镜报告')">
|
||||
<div class="card__img"><img src="screenshots/report-gastro.jpg" alt=""></div>
|
||||
<div class="card__label">胃肠镜报告</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">指标纵向对比 + 指标分析详情(indicator-compare.html / indicator-compare-detail.html)</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/indicator-compare.jpg','指标纵向对比')">
|
||||
<div class="card__img"><img src="screenshots/indicator-compare.jpg" alt=""></div>
|
||||
<div class="card__label">指标纵向对比</div>
|
||||
<div class="card__tags"><span class="tag tag--state">AI总结</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/indicator-compare-detail.jpg','指标分析详情')">
|
||||
<div class="card__img"><img src="screenshots/indicator-compare-detail.jpg" alt=""></div>
|
||||
<div class="card__label">指标分析详情</div>
|
||||
<div class="card__tags"><span class="tag tag--state">趋势图</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 八、消息与咨询 ========== -->
|
||||
<section class="section" id="sec-message">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">八、消息与咨询</h2>
|
||||
<span class="section__count">4 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">消息列表 / 详情(暂缓 · 后续统一站内消息)+ 一键咨询(consult.html)</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/messages.jpg','消息列表')">
|
||||
<div class="card__img"><img src="screenshots/messages.jpg" alt=""></div>
|
||||
<div class="card__label">消息列表</div>
|
||||
<div class="card__tags"><span class="tag tag--state">暂缓</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/message-detail.jpg','消息详情 · 报告生成')">
|
||||
<div class="card__img"><img src="screenshots/message-detail.jpg" alt=""></div>
|
||||
<div class="card__label">消息详情 · 报告</div>
|
||||
<div class="card__tags"><span class="tag tag--state">暂缓</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/message-detail-ai.jpg','消息详情 · AI预警')">
|
||||
<div class="card__img"><img src="screenshots/message-detail-ai.jpg" alt=""></div>
|
||||
<div class="card__label">消息详情 · AI预警</div>
|
||||
<div class="card__tags"><span class="tag tag--state">暂缓</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/consult.jpg','一键咨询')">
|
||||
<div class="card__img"><img src="screenshots/consult.jpg" alt=""></div>
|
||||
<div class="card__label">一键咨询</div>
|
||||
<div class="card__tags"><span class="tag tag--state">异常指标</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- ========== 九、操作说明 ========== -->
|
||||
<section class="section" id="sec-guide">
|
||||
<div class="section__header">
|
||||
<h2 class="section__title">九、操作说明</h2>
|
||||
<span class="section__count">3 屏</span>
|
||||
</div>
|
||||
|
||||
<div class="sub-title">操作说明 + 讲解详情(process-guide.html / process-guide-detail.html)· 图文/视频两态</div>
|
||||
<div class="scroll-row">
|
||||
<div class="card" onclick="openLightbox('screenshots/process-guide.jpg','操作说明')">
|
||||
<div class="card__img"><img src="screenshots/process-guide.jpg" alt=""></div>
|
||||
<div class="card__label">操作说明</div>
|
||||
<div class="card__tags"><span class="tag tag--state">搜索过滤</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/process-guide-detail.jpg','讲解详情 · 图文')">
|
||||
<div class="card__img"><img src="screenshots/process-guide-detail.jpg" alt=""></div>
|
||||
<div class="card__label">讲解详情 · 图文</div>
|
||||
<div class="card__tags"><span class="tag tag--state">图文</span></div>
|
||||
</div>
|
||||
<div class="card" onclick="openLightbox('screenshots/process-guide-detail-video.jpg','讲解详情 · 视频')">
|
||||
<div class="card__img"><img src="screenshots/process-guide-detail-video.jpg" alt=""></div>
|
||||
<div class="card__label">讲解详情 · 视频</div>
|
||||
<div class="card__tags"><span class="tag tag--state">视频</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style="height:40px;"></div>
|
||||
|
||||
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
|
||||
<span class="lightbox__close">×</span>
|
||||
<img id="lightbox-img" src="" alt="">
|
||||
<div class="lightbox__name" id="lightbox-name"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openLightbox(src, name) {
|
||||
document.getElementById('lightbox-img').src = src;
|
||||
document.getElementById('lightbox-name').textContent = name;
|
||||
document.getElementById('lightbox').classList.add('show');
|
||||
}
|
||||
function closeLightbox() {
|
||||
document.getElementById('lightbox').classList.remove('show');
|
||||
}
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -660,6 +660,7 @@ const SITE_MAP = [
|
||||
{n:'应用主页(收起态)',f:'index.html'},
|
||||
] },
|
||||
{ name:'健康体检', dir:'employee-app/health-checkup', entry:'index.html', prd:'employee-app/health-checkup/doc/PRD.md', pages:[
|
||||
{ file:'doc/design-overview.html', label:'页面总览' },
|
||||
{ file:'index.html', label:'健康体检主页' },
|
||||
{ file:'booking-type.html', label:'选择体检类型' },
|
||||
{ file:'booking-hospital.html', label:'预约-选择医院' },
|
||||
|
||||
Reference in New Issue
Block a user