yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 体检模块完善 — 新增员工端操作流程讲解页，管理端各配置页新增/完善功能

Browse Source 
- 员工端：新增操作流程讲解页 process-guide.html 及详情页 process-guide-detail.html，首页辅助入口跳转
- 管理端体检配置页完善：医院基础、体检套餐、体检须知、操作说明、报告模板、标准基础、标准分类、标准医院等页面新增抽屉弹窗/表单/表格/筛选/体检类型等交互
This commit is contained in:
liuyunqin
2026-08-13 17:51:49 +08:00
parent 2346465c90
commit 6dacd91ca5
11 changed files with 3303 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/health-checkup/index.html
+2 -2
View File
@@ -356,8 +356,8 @@
<div class="section-title">辅助入口</div>
<div class="quick-grid">
<!-- [交互] 操作流程讲解入口，后续可跳转至体检流程说明页 -->
<div class="quick-card">
<!-- [交互] 点击跳转至: process-guide.html -->
<div class="quick-card" onclick="location.href='process-guide.html'">
<div class="quick-card__icon" style="background:#eef9ff; color:#1677ff;">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v4l2.5 2.5"/></svg>
</div>
employee-app/health-checkup/process-guide-detail.html
+478
View File
@@ -0,0 +1,478 @@
<!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; }
:root {
--primary: #13c2c2;
--primary-dark: #0f9b9b;
--primary-light: #e6fffb;
--text-primary: #1a1a1a;
--text-secondary: #666;
--text-muted: #8c8c8c;
--bg-page: #f0f2f5;
--bg-content: #f7f9fb;
--blue: #1677ff;
}
body {
background: var(--bg-page);
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;
color: var(--text-primary);
}
.phone-shell {
width: 390px;
min-height: 844px;
background: var(--bg-content);
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-back {
font-size: 18px;
color: var(--text-primary);
cursor: pointer;
line-height: 1;
text-decoration: none;
}
.nav-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.scroll-content {
flex: 1;
overflow-y: auto;
background: #f5f5f5;
}
.scroll-content::-webkit-scrollbar { display: none; }
/* ===== 图文富文本页 ===== */
.article-hero {
background: linear-gradient(135deg, #e8f4ff 0%, #f0f8ff 100%);
padding: 24px 16px 20px;
border-bottom: 1px solid #eef3f8;
}
.article-hero__tag {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 10px;
border-radius: 12px;
background: #e6f4ff;
color: var(--blue);
font-size: 12px;
font-weight: 600;
margin-bottom: 12px;
}
.article-hero__icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: var(--blue);
box-shadow: 0 6px 16px rgba(22, 119, 255, 0.12);
margin-bottom: 12px;
}
.article-hero__title {
font-size: 22px;
font-weight: 800;
color: var(--text-primary);
line-height: 1.3;
}
.article-body {
background: #fff;
padding: 20px 16px 32px;
}
.article-intro {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 20px;
padding: 14px 16px;
background: #f7f9fb;
border-radius: 12px;
border-left: 3px solid var(--primary);
}
.article-step {
display: flex;
gap: 12px;
margin-bottom: 18px;
}
.article-step:last-of-type { margin-bottom: 0; }
.article-step__num {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.article-step__body { flex: 1; min-width: 0; }
.article-step__title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.article-step__text {
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
}
.article-tips {
margin-top: 22px;
background: var(--primary-light);
border: 1px solid #d4f2ef;
border-radius: 14px;
padding: 14px 16px;
}
.article-tips__title {
font-size: 13px;
font-weight: 700;
color: var(--primary-dark);
margin-bottom: 6px;
}
.article-tips__text {
font-size: 13px;
line-height: 1.7;
color: #4d6a68;
}
/* ===== 视频播放页 ===== */
.video-page { padding: 14px 16px 28px; }
.video-player {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
background: #1a1a1a;
}
.video-player__poster {
position: absolute;
inset: 0;
background: linear-gradient(135deg, #0f9b9b 0%, #13c2c2 55%, #36cfc9 100%);
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.22);
}
.video-player__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 58px;
height: 58px;
border-radius: 50%;
border: none;
cursor: pointer;
background: rgba(255,255,255,0.92);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
transition: transform 0.15s;
}
.video-player__play:active { transform: translate(-50%, -50%) scale(0.94); }
.video-player__play svg { color: var(--primary); }
.video-player__meta {
position: absolute;
left: 12px;
right: 12px;
bottom: 26px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.video-player__track {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
height: 3px;
border-radius: 2px;
background: rgba(255,255,255,0.3);
overflow: hidden;
}
.video-player__progress {
height: 100%;
width: 0;
background: #fff;
border-radius: 2px;
}
.video-info { padding: 18px 4px 4px; }
.video-info__tag {
display: inline-flex;
align-items: center;
height: 22px;
padding: 0 10px;
border-radius: 11px;
background: var(--primary-light);
color: var(--primary);
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
}
.video-info__title {
font-size: 20px;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 8px;
}
.video-info__desc {
font-size: 13px;
color: var(--text-muted);
}
.video-desc-card {
margin-top: 16px;
background: #fff;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
}
.video-desc-card__title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.video-desc-card__dot {
width: 4px;
height: 16px;
border-radius: 2px;
background: var(--primary);
}
.video-desc-card__text {
font-size: 14px;
line-height: 1.8;
color: var(--text-secondary);
}
</style>
</head>
<body>
<div class="phone-shell">
<div class="phone-status-bar">
<span class="time">12:00</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="process-guide.html">&#8249;</a>
<span class="nav-title" id="navTitle">讲解详情</span>
</div>
<div class="scroll-content" id="scrollContent"></div>
</div>
<script>
var GUIDES = {
image: {
booking: {
title: '体检预约流程',
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="16" y1="2.5" x2="16" y2="6"/><line x1="8" y1="2.5" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h3"/><path d="M8 17h5"/></svg>',
intro: '在健康体检平台完成一次体检预约，共需四步，约 2 分钟即可完成。请按以下步骤操作。',
steps: [
{ title: '进入预约页面', text: '打开「健康体检」首页，点击「体检预约」进入预约页面。' },
{ title: '选择医院与项目', text: '选择体检医院与体检项目（常规体检 / 胃肠镜体检）。' },
{ title: '选择日期与时间段', text: '选择体检日期与时间段，系统将实时显示可预约号源。' },
{ title: '确认并提交', text: '确认预约信息无误后提交，预约成功后可在「我的预约」中查看。' }
],
tips: '如需改期或取消，请提前在「我的预约」中操作，避免占用号源。'
},
checkin: {
title: '到院体检流程',
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg>',
intro: '体检当日请携带身份证，按以下五步完成到院体检。',
steps: [
{ title: '前台登记', text: '携带身份证到体检中心前台登记。' },
{ title: '缴费确认', text: '核对单位信息与体检项目。' },
{ title: '逐项检查', text: '按指引单到各科室完成检查。' },
{ title: '交回指引单', text: '检查完成后将指引单交回前台。' },
{ title: '领取报告', text: '报告生成后在线查看或到院领取。' }
],
tips: '空腹项目（如抽血、腹部 B 超）请保持空腹，可在检查结束后进食。'
},
report: {
title: '报告查询流程',
icon: '<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>',
intro: '体检完成后，报告将上传至平台，按以下三步在线查询。',
steps: [
{ title: '进入体检报告', text: '在首页点击「体检报告」进入报告页面。' },
{ title: '查看报告列表', text: '查看报告列表与最新报告。' },
{ title: '查看详情与解读', text: '点击查看报告详情与指标解读。' }
],
tips: '异常指标可点击「一键咨询」获取专家解读。'
}
},
video: {
gastro: {
title: '胃肠镜检查流程',
desc: '检查前准备与检查过程讲解',
duration: '03:20',
seconds: 200,
icon: '<svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><path d="M8 11h6"/><path d="M11 8v6"/></svg>',
intro: '本视频讲解胃肠镜检查的完整流程，包括检查前饮食与清肠准备、检查当天的注意事项，以及检查过程与检查后的恢复要点，帮助您提前了解、从容应对。'
},
notice: {
title: '体检注意事项',
desc: '体检前饮食、作息等准备事项讲解',
duration: '02:10',
seconds: 130,
icon: '<svg width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>',
intro: '本视频讲解体检前的各项准备事项，包括饮食控制、作息调整、用药注意以及体检当天的穿着与携带物品，帮助您顺利完成体检。'
}
}
};
var params = new URLSearchParams(window.location.search);
var type = params.get('type') === 'video' ? 'video' : 'image';
var id = params.get('id');
var data = (GUIDES[type] && GUIDES[type][id]) || GUIDES.image.booking;
document.getElementById('navTitle').textContent = data.title;
var playSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>';
var pauseSvg = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>';
function renderArticle(g) {
var steps = g.steps.map(function(s, i) {
return '<div class="article-step">'
+ '<div class="article-step__num">' + (i + 1) + '</div>'
+ '<div class="article-step__body">'
+ '<div class="article-step__title">' + s.title + '</div>'
+ '<div class="article-step__text">' + s.text + '</div>'
+ '</div>'
+ '</div>';
}).join('');
return '<div class="article-hero">'
+ '<div class="article-hero__title">' + g.title + '</div>'
+ '</div>'
+ '<div class="article-body">'
+ '<div class="article-intro">' + g.intro + '</div>'
+ steps
+ '<div class="article-tips">'
+ '<div class="article-tips__title">💡 温馨提示</div>'
+ '<div class="article-tips__text">' + g.tips + '</div>'
+ '</div>'
+ '</div>';
}
function renderVideo(g) {
return '<div class="video-page">'
+ '<div class="video-player">'
+ '<div class="video-player__poster">' + g.icon + '</div>'
+ '<button class="video-player__play" id="playBtn" onclick="togglePlay()">' + pauseSvg + '</button>'
+ '<div class="video-player__meta"><span id="timeLabel">00:00</span><span>' + g.duration + '</span></div>'
+ '<div class="video-player__track"><div class="video-player__progress" id="progress"></div></div>'
+ '</div>'
+ '<div class="video-info">'
+ '<div class="video-info__tag">视频讲解</div>'
+ '<div class="video-info__title">' + g.title + '</div>'
+ '</div>'
+ '<div class="video-desc-card">'
+ '<div class="video-desc-card__title"><span class="video-desc-card__dot"></span>视频简介</div>'
+ '<div class="video-desc-card__text">' + g.intro + '</div>'
+ '</div>'
+ '</div>';
}
document.getElementById('scrollContent').innerHTML = type === 'video' ? renderVideo(data) : renderArticle(data);
// 视频播放控制（进入页面直接播放）
if (type === 'video') {
var playing = true;
var elapsed = 0;
var total = data.seconds;
var speed = total / 24; // 原型演示：约 24 秒播放完毕
var timer = null;
function fmt(s) {
s = Math.floor(s);
var m = Math.floor(s / 60), sec = s % 60;
return (m < 10 ? '0' + m : m) + ':' + (sec < 10 ? '0' + sec : sec);
}
function update() {
document.getElementById('timeLabel').textContent = fmt(elapsed);
document.getElementById('progress').style.width = (elapsed / total * 100) + '%';
}
function play() {
playing = true;
document.getElementById('playBtn').innerHTML = pauseSvg;
timer = setInterval(function() {
elapsed += 0.2 * speed;
if (elapsed >= total) { elapsed = total; update(); pause(); }
update();
}, 200);
}
function pause() {
playing = false;
document.getElementById('playBtn').innerHTML = playSvg;
clearInterval(timer);
}
window.togglePlay = function() { if (playing) { pause(); } else { play(); } };
play();
}
</script>
</body>
</html>
employee-app/health-checkup/process-guide.html
+339
View File
@@ -0,0 +1,339 @@
<!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; }
:root {
--primary: #13c2c2;
--primary-light: #e6fffb;
--text-primary: #1a1a1a;
--text-secondary: #666;
--text-muted: #8c8c8c;
--bg-page: #f0f2f5;
--bg-content: #f7f9fb;
--danger: #e84c4c;
--blue: #1677ff;
--orange: #fa8c16;
}
body {
background: var(--bg-page);
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;
color: var(--text-primary);
}
.phone-shell {
width: 390px;
min-height: 844px;
background: var(--bg-content);
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-back {
font-size: 18px;
color: var(--text-primary);
cursor: pointer;
line-height: 1;
text-decoration: none;
}
.nav-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 17px;
font-weight: 600;
color: var(--text-primary);
}
.scroll-content {
flex: 1;
overflow-y: auto;
background: #f5f5f5;
}
.scroll-content::-webkit-scrollbar { display: none; }
.page-body { padding: 14px 16px 28px; }
/* 分段筛选 */
.seg-tabs {
display: flex;
background: #fff;
border-radius: 12px;
padding: 4px;
margin-bottom: 14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
}
.seg-tab {
flex: 1;
height: 36px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s;
}
.seg-tab.active {
background: var(--primary);
color: #fff;
box-shadow: 0 4px 10px rgba(19, 194, 194, 0.25);
}
/* 讲解列表 */
.guide-list { display: flex; flex-direction: column; gap: 12px; }
.guide-card {
background: #fff;
border-radius: 16px;
padding: 14px;
display: flex;
align-items: center;
gap: 14px;
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.guide-card:active { transform: scale(0.985); }
.guide-card[hidden] { display: none; }
.guide-card__thumb {
width: 76px;
height: 60px;
border-radius: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.guide-card__thumb--video {
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
}
.guide-card__thumb--image {
background: linear-gradient(135deg, #e8f4ff 0%, #f0f8ff 100%);
}
.guide-card__play {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
display: flex;
align-items: center;
justify-content: center;
}
.guide-card__content { flex: 1; min-width: 0; }
.guide-card__title {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 5px;
}
.guide-card__desc {
font-size: 12px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide-card__meta {
display: flex;
align-items: center;
gap: 8px;
}
.guide-card__tag {
height: 20px;
padding: 0 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
align-items: center;
}
.guide-card__tag--video { background: var(--primary-light); color: var(--primary); }
.guide-card__tag--image { background: #eef9ff; color: var(--blue); }
.guide-card__duration {
font-size: 11px;
color: var(--text-muted);
}
.guide-card__arrow {
font-size: 18px;
color: #c6c6c6;
flex-shrink: 0;
}
.bottom-spacer { height: 16px; }
</style>
</head>
<body>
<div class="phone-shell">
<div class="phone-status-bar">
<span class="time">12:00</span>
<div class="icons">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
</div>
</div>
<div class="nav-bar">
<a class="nav-back" href="index.html">&#8249;</a>
<span class="nav-title">操作流程讲解</span>
</div>
<div class="scroll-content">
<div class="page-body">
<!-- 分段筛选 -->
<div class="seg-tabs">
<div class="seg-tab active" data-filter="all" onclick="filterGuides('all', this)">全部</div>
<div class="seg-tab" data-filter="video" onclick="filterGuides('video', this)">视频讲解</div>
<div class="seg-tab" data-filter="image" onclick="filterGuides('image', this)">图文讲解</div>
</div>
<!-- 讲解列表 -->
<div class="guide-list">
<!-- 图文：预约流程 -->
<div class="guide-card" data-type="image" onclick="openGuide('booking')">
<div class="guide-card__thumb guide-card__thumb--image">
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><line x1="16" y1="2.5" x2="16" y2="6"/><line x1="8" y1="2.5" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h3"/><path d="M8 17h5"/></svg>
</div>
<div class="guide-card__content">
<div class="guide-card__title">体检预约流程</div>
<div class="guide-card__desc">选择医院、项目、日期，完成体检预约</div>
<div class="guide-card__meta">
<span class="guide-card__tag guide-card__tag--image">图文</span>
</div>
</div>
<span class="guide-card__arrow">›</span>
</div>
<!-- 图文：到院流程 -->
<div class="guide-card" data-type="image" onclick="openGuide('checkin')">
<div class="guide-card__thumb guide-card__thumb--image">
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 9h1M14 9h1M9 13h1M14 13h1M9 17h1M14 17h1"/></svg>
</div>
<div class="guide-card__content">
<div class="guide-card__title">到院体检流程</div>
<div class="guide-card__desc">前台登记、逐项检查、领取报告</div>
<div class="guide-card__meta">
<span class="guide-card__tag guide-card__tag--image">图文</span>
</div>
</div>
<span class="guide-card__arrow">›</span>
</div>
<!-- 图文：报告查询 -->
<div class="guide-card" data-type="image" onclick="openGuide('report')">
<div class="guide-card__thumb guide-card__thumb--image">
<svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#1677ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
</div>
<div class="guide-card__content">
<div class="guide-card__title">报告查询流程</div>
<div class="guide-card__desc">查看报告列表与指标解读详情</div>
<div class="guide-card__meta">
<span class="guide-card__tag guide-card__tag--image">图文</span>
</div>
</div>
<span class="guide-card__arrow">›</span>
</div>
<!-- 视频：胃肠镜检查 -->
<div class="guide-card" data-type="video" onclick="openGuide('gastro')">
<div class="guide-card__thumb guide-card__thumb--video">
<div class="guide-card__play">
<svg width="14" height="14" viewBox="0 0 24 24" fill="#13c2c2"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="guide-card__content">
<div class="guide-card__title">胃肠镜检查流程</div>
<div class="guide-card__desc">检查前准备与检查过程讲解</div>
<div class="guide-card__meta">
<span class="guide-card__tag guide-card__tag--video">视频</span>
<span class="guide-card__duration">时长 03:20</span>
</div>
</div>
<span class="guide-card__arrow">›</span>
</div>
<!-- 视频：注意事项 -->
<div class="guide-card" data-type="video" onclick="openGuide('notice')">
<div class="guide-card__thumb guide-card__thumb--video">
<div class="guide-card__play">
<svg width="14" height="14" viewBox="0 0 24 24" fill="#13c2c2"><path d="M8 5v14l11-7z"/></svg>
</div>
</div>
<div class="guide-card__content">
<div class="guide-card__title">体检注意事项</div>
<div class="guide-card__desc">体检前饮食、作息等准备事项讲解</div>
<div class="guide-card__meta">
<span class="guide-card__tag guide-card__tag--video">视频</span>
<span class="guide-card__duration">时长 02:10</span>
</div>
</div>
<span class="guide-card__arrow">›</span>
</div>
</div>
<div class="bottom-spacer"></div>
</div>
</div>
</div>
<script>
// 分段筛选
function filterGuides(type, el) {
document.querySelectorAll('.seg-tab').forEach(function(t){ t.classList.remove('active'); });
el.classList.add('active');
document.querySelectorAll('.guide-card').forEach(function(card){
if (type === 'all' || card.dataset.type === type) {
card.removeAttribute('hidden');
} else {
card.setAttribute('hidden', '');
}
});
}
// 打开讲解：跳转到对应详情页（图文 → 富文本页，视频 → 播放页）
function openGuide(key) {
var type = (key === 'gastro' || key === 'notice') ? 'video' : 'image';
location.href = 'process-guide-detail.html?type=' + type + '&id=' + key;
}
</script>
</body>
</html>