feat: 健康体检员工端我的预约整合为单页并新增指标纵向对比与消息中心（删除按状态拆分的预约详情/列表页，合并为"我的预约"单页；新增指标纵向对比总览与详情页；新增消息列表与详情页；预约类型/医院/项目页与体检报告页、检前首页同步调整；首页站点地图更新）
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
fengpu
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
0d1c770ee9
commit
a443c61907
@@ -187,8 +187,8 @@
|
||||
<div class="bottom-actions">
|
||||
<!-- [交互] 取消预约 -->
|
||||
<button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='booking-date.html'">取消预约</button>
|
||||
<!-- [交互] 查看预约详情，跳转至 my-appointments-detail.html -->
|
||||
<button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-detail.html?done=0&total=9'">查看预约详情</button>
|
||||
<!-- [交互] 查看预约详情，跳转至 my-appointments-all.html（常规·待体检） -->
|
||||
<button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='my-appointments-all.html?type=routine&status=pending'">查看预约详情</button>
|
||||
</div>
|
||||
<div class="toast" id="stepToast">当前已预约体检，无法重新选择，请先取消预约</div>
|
||||
</div>
|
||||
|
||||
@@ -110,26 +110,6 @@
|
||||
.stepper__item--done:hover .stepper__label { text-decoration: underline; text-underline-offset: 3px; }
|
||||
.stepper__line { width: 44px; height: 3px; background: #e8e8e8; margin: 0 8px; margin-bottom: 22px; border-radius: 2px; }
|
||||
.stepper__line--done { background: var(--primary); }
|
||||
.fee-card {
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
border-radius: 18px;
|
||||
padding: 16px 18px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.fee-card__label {
|
||||
font-size: 13px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.fee-card__amount {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
@@ -179,6 +159,12 @@
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
|
||||
.hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
|
||||
.htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
|
||||
.htag--routine { background: #e6f7ff; color: #1890ff; }
|
||||
.htag--gastro { background: #f6ffed; color: #52c41a; }
|
||||
.htag--occupation { background: #fff7e6; color: #fa8c16; }
|
||||
.radio-dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@@ -297,15 +283,16 @@
|
||||
.modal-field:last-of-type { border-bottom: none; }
|
||||
.modal-field__label { font-size: 14px; color: var(--text-muted); }
|
||||
.modal-field__value { font-size: 14px; color: var(--text-primary); font-weight: 600; }
|
||||
.marriage-toggle {
|
||||
/* 体检类型切换（已婚体检 / 未婚体检） */
|
||||
.checkup-type-toggle {
|
||||
display: inline-flex; background: #f5f5f5; border-radius: 20px; overflow: hidden;
|
||||
}
|
||||
.marriage-toggle__btn {
|
||||
.checkup-type-toggle__btn {
|
||||
padding: 6px 16px; font-size: 13px; font-weight: 600; border: none;
|
||||
background: transparent; color: var(--text-muted); cursor: pointer;
|
||||
border-radius: 20px; transition: all 0.2s ease;
|
||||
}
|
||||
.marriage-toggle__btn.active {
|
||||
.checkup-type-toggle__btn.active {
|
||||
background: var(--primary); color: #fff;
|
||||
}
|
||||
.modal-confirm-btn {
|
||||
@@ -348,32 +335,46 @@
|
||||
<div class="stepper__item stepper__item--future"><div class="stepper__dot">3</div><div class="stepper__label">预约日期</div></div>
|
||||
</div>
|
||||
|
||||
<!-- 费用展示 -->
|
||||
<div class="fee-card">
|
||||
<div class="fee-card__label">您本年度的体检费用(元)</div>
|
||||
<div class="fee-card__amount">1500.00</div>
|
||||
</div>
|
||||
|
||||
<!-- 医院列表 -->
|
||||
<div class="section-title">选择医院</div>
|
||||
<div class="hospital-card active" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">宁夏宝石花医院</div><div class="hospital-card__addr">宁夏银川市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">宁夏宝石花医院</div>
|
||||
<div class="hospital-card__addr">宁夏银川市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--routine">常规体检</span>
|
||||
<span class="htag htag--occupation">职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">CQ星龙园医院</div><div class="hospital-card__addr">陕西西安市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">CQ星龙园医院</div>
|
||||
<div class="hospital-card__addr">陕西西安市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--gastro">胃肠镜体检</span>
|
||||
<span class="htag htag--occupation">职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">西安CQ医院</div><div class="hospital-card__addr">陕西西安市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">西安CQ医院</div>
|
||||
<div class="hospital-card__addr">陕西西安市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--routine">常规体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
@@ -407,10 +408,14 @@
|
||||
<span class="modal-field__value">女</span>
|
||||
</div>
|
||||
<div class="modal-field">
|
||||
<span class="modal-field__label">婚姻状况</span>
|
||||
<div class="marriage-toggle">
|
||||
<button class="marriage-toggle__btn active" onclick="toggleMarriage(this)">已婚</button>
|
||||
<button class="marriage-toggle__btn" onclick="toggleMarriage(this)">未婚</button>
|
||||
<span class="modal-field__label">年龄</span>
|
||||
<span class="modal-field__value">32</span>
|
||||
</div>
|
||||
<div class="modal-field">
|
||||
<span class="modal-field__label">体检类型</span>
|
||||
<div class="checkup-type-toggle">
|
||||
<button class="checkup-type-toggle__btn active" onclick="toggleCheckupType(this)">已婚体检</button>
|
||||
<button class="checkup-type-toggle__btn" onclick="toggleCheckupType(this)">未婚体检</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-confirm-btn" onclick="closeModal()">确认</button>
|
||||
@@ -433,8 +438,9 @@
|
||||
function closeModal() {
|
||||
document.getElementById('personModal').classList.add('hidden');
|
||||
}
|
||||
function toggleMarriage(btn) {
|
||||
document.querySelectorAll('.marriage-toggle__btn').forEach(b => b.classList.remove('active'));
|
||||
// [交互] 切换体检类型（已婚体检 / 未婚体检）
|
||||
function toggleCheckupType(btn) {
|
||||
document.querySelectorAll('.checkup-type-toggle__btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -149,6 +149,13 @@
|
||||
.project-card__badge--key {
|
||||
background: #fff1f0; color: #ff4d4f;
|
||||
}
|
||||
.project-card__meta {
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
}
|
||||
.project-card__badge--ai {
|
||||
background: linear-gradient(135deg, #7c5cfc 0%, #4f8ef7 100%);
|
||||
color: #fff; cursor: pointer; box-shadow: 0 2px 6px rgba(124, 92, 252, 0.3);
|
||||
}
|
||||
.project-card__arrow {
|
||||
flex-shrink: 0; color: #d0d0d0; font-size: 16px; cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
@@ -213,6 +220,12 @@
|
||||
.confirm-modal__row:last-child { margin-bottom: 0; }
|
||||
.confirm-modal__value { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
||||
.confirm-modal__value--highlight { color: var(--primary-dark); }
|
||||
.confirm-modal__fee-group { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
|
||||
.confirm-modal__quota { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; }
|
||||
/* 弱化行：选检/必检项目费用，金额后追加「≤ 单位额度」 */
|
||||
.confirm-modal__row--weak { font-size: 13px; color: var(--text-muted); }
|
||||
.confirm-modal__value--weak { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
|
||||
.confirm-modal__cap { font-size: 11px; font-weight: 500; color: #bfbfbf; white-space: nowrap; }
|
||||
.confirm-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.confirm-modal__btn {
|
||||
height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600; border: none; cursor: pointer;
|
||||
@@ -221,6 +234,16 @@
|
||||
.confirm-modal__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%); color: #fff;
|
||||
}
|
||||
/* AI 推荐理由弹窗 */
|
||||
.ai-modal { padding: 24px 20px 18px; }
|
||||
.ai-modal__project {
|
||||
font-size: 15px; font-weight: 700; color: #7c5cfc; text-align: center; margin-bottom: 12px;
|
||||
}
|
||||
.ai-modal__reason {
|
||||
background: #f7f9fb; border-radius: 14px; padding: 14px 16px; margin-bottom: 18px;
|
||||
font-size: 13px; color: var(--text-secondary); line-height: 1.7; text-align: left;
|
||||
}
|
||||
.ai-modal__close { width: 100%; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -299,7 +322,24 @@
|
||||
</div>
|
||||
<div class="confirm-modal__row">
|
||||
<span>总体检费用</span>
|
||||
<span class="confirm-modal__value confirm-modal__value--highlight" id="confirmFee">¥0.00</span>
|
||||
<span class="confirm-modal__fee-group">
|
||||
<span class="confirm-modal__value confirm-modal__value--highlight" id="confirmFee">¥0.00</span>
|
||||
<span class="confirm-modal__quota" id="confirmQuota">体检额度 ¥0.00</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="confirm-modal__row confirm-modal__row--weak">
|
||||
<span>选检项目费用</span>
|
||||
<span class="confirm-modal__fee-group">
|
||||
<span class="confirm-modal__value confirm-modal__value--weak" id="confirmOptionalFee">¥0.00</span>
|
||||
<span class="confirm-modal__cap" id="confirmOptionalCap">可用额度 ≤ ¥0.00</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="confirm-modal__row confirm-modal__row--weak">
|
||||
<span>必检项目费用</span>
|
||||
<span class="confirm-modal__fee-group">
|
||||
<span class="confirm-modal__value confirm-modal__value--weak" id="confirmRequiredFee">¥0.00</span>
|
||||
<span class="confirm-modal__cap" id="confirmRequiredCap">可用额度 ≤ ¥0.00</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-modal__actions">
|
||||
@@ -308,9 +348,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 轻触 AI 推荐标签弹出推荐理由，点「知道了」关闭 -->
|
||||
<div class="modal-overlay hidden" id="aiModal">
|
||||
<div class="confirm-modal ai-modal">
|
||||
<div class="confirm-modal__title">✨ 智能推荐</div>
|
||||
<div class="ai-modal__project" id="aiModalProject"></div>
|
||||
<div class="ai-modal__reason" id="aiModalReason"></div>
|
||||
<button class="confirm-modal__btn confirm-modal__btn--primary ai-modal__close" onclick="closeAiReason()">知道了</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const annualLimit = 1500;
|
||||
// 单位设定的分项额度（原型模拟数据，用于「≤ 额度」展示）
|
||||
const unitLimits = { required: 900, optional: 600 };
|
||||
const projects = [
|
||||
{ id: 'general', name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
|
||||
{ id: 'blood', name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
|
||||
@@ -321,9 +373,9 @@
|
||||
{ id: 'glucose', name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
|
||||
{ id: 'ecg', name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
|
||||
{ id: 'xray', name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
|
||||
{ id: 'ultrasound', name: '腹部B超', desc: '肝胆脾胰肾超声检查', price: 180, type: 'optional', level: 'key' },
|
||||
{ id: 'thyroid', name: '甲状腺彩超', desc: '甲状腺结构与结节筛查', price: 160, type: 'optional', level: 'key' },
|
||||
{ id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key' }
|
||||
{ id: 'ultrasound', name: '腹部B超', desc: '肝胆脾胰肾超声检查', price: 180, type: 'optional', level: 'key', aiRecommend: true, aiReason: '健康画像显示 BMI 26.8（超重），且近年血脂偏高，建议加做腹部超声，重点筛查脂肪肝与胆囊病变。预计费用 ¥180，在本年度体检额度内。' },
|
||||
{ id: 'thyroid', name: '甲状腺彩超', desc: '甲状腺结构与结节筛查', price: 160, type: 'optional', level: 'key', aiRecommend: true, aiReason: '既往史显示 2024 年体检发现甲状腺结节（TI-RADS 2 类），建议每年做一次超声随访复查，观察结节变化。预计费用 ¥160，在本年度体检额度内。' },
|
||||
{ id: 'tumor', name: '肿瘤标志物', desc: '基础肿瘤风险筛查', price: 220, type: 'optional', level: 'key', aiRecommend: true, aiReason: '家族史提示直系亲属有肿瘤病史，结合您所处年龄段（45 岁以上），建议今年纳入基础肿瘤标志物筛查，做到早发现早干预。预计费用 ¥220，在本年度体检额度内。' }
|
||||
];
|
||||
|
||||
let activeTab = 'optional';
|
||||
@@ -345,7 +397,9 @@
|
||||
}
|
||||
|
||||
function getOptionalProjects() {
|
||||
return projects.filter(project => project.type === 'optional');
|
||||
// [交互] AI 推荐项目排在列表前面
|
||||
const optional = projects.filter(project => project.type === 'optional');
|
||||
return [...optional.filter(project => project.aiRecommend), ...optional.filter(project => !project.aiRecommend)];
|
||||
}
|
||||
|
||||
function getRequiredFee() {
|
||||
@@ -390,7 +444,10 @@
|
||||
<div class="project-card__side">
|
||||
<div class="project-card__tags">
|
||||
<span class="project-card__price">${formatPrice(project.price)}</span>
|
||||
<span class="project-card__badge${project.level === 'key' ? ' project-card__badge--key' : ''}">${projectLevelText}</span>
|
||||
<div class="project-card__meta">
|
||||
<span class="project-card__badge${project.level === 'key' ? ' project-card__badge--key' : ''}">${projectLevelText}</span>
|
||||
${project.aiRecommend ? '<span class="project-card__badge project-card__badge--ai">✨ 推荐</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<span class="project-card__arrow" data-detail="${project.id}">›</span>
|
||||
</div>
|
||||
@@ -402,6 +459,15 @@
|
||||
window.location.href = `project-detail.html?id=${project.id}`;
|
||||
});
|
||||
|
||||
// [交互] 轻触 AI 推荐标签查看推荐理由（不触发卡片勾选）
|
||||
const aiTag = card.querySelector('.project-card__badge--ai');
|
||||
if (aiTag) {
|
||||
aiTag.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
openAiReason(project);
|
||||
});
|
||||
}
|
||||
|
||||
if (!isReadonly) {
|
||||
card.addEventListener('click', () => {
|
||||
if (selectedOptionalIds.has(project.id)) {
|
||||
@@ -434,9 +500,15 @@
|
||||
const requiredCount = getRequiredProjects().length;
|
||||
const optionalCount = selectedOptionalIds.size;
|
||||
const totalCount = requiredCount + optionalCount;
|
||||
const totalFee = getRequiredFee() + getOptionalFee();
|
||||
const requiredFee = getRequiredFee();
|
||||
const optionalFee = getOptionalFee();
|
||||
document.getElementById('confirmCount').textContent = totalCount + ' 项';
|
||||
document.getElementById('confirmFee').textContent = formatPrice(totalFee);
|
||||
document.getElementById('confirmFee').textContent = formatPrice(requiredFee + optionalFee);
|
||||
document.getElementById('confirmQuota').textContent = '体检额度 ' + formatPrice(annualLimit);
|
||||
document.getElementById('confirmOptionalFee').textContent = formatPrice(optionalFee);
|
||||
document.getElementById('confirmOptionalCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.optional);
|
||||
document.getElementById('confirmRequiredFee').textContent = formatPrice(requiredFee);
|
||||
document.getElementById('confirmRequiredCap').textContent = '可用额度 ≤ ' + formatPrice(unitLimits.required);
|
||||
document.getElementById('submitModal').classList.remove('hidden');
|
||||
}
|
||||
function closeSubmitConfirm() {
|
||||
@@ -445,6 +517,14 @@
|
||||
function goPrevStep() {
|
||||
window.location.href = 'booking-hospital.html';
|
||||
}
|
||||
function openAiReason(project) {
|
||||
document.getElementById('aiModalProject').textContent = project.name;
|
||||
document.getElementById('aiModalReason').textContent = project.aiReason;
|
||||
document.getElementById('aiModal').classList.remove('hidden');
|
||||
}
|
||||
function closeAiReason() {
|
||||
document.getElementById('aiModal').classList.add('hidden');
|
||||
}
|
||||
function confirmSubmit() {
|
||||
window.location.href = 'booking-project-selected.html';
|
||||
}
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
.type-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px 18px;
|
||||
padding: 18px 16px;
|
||||
margin-bottom: 14px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: var(--shadow);
|
||||
@@ -111,9 +111,8 @@
|
||||
}
|
||||
.type-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
.type-card__icon {
|
||||
width: 48px;
|
||||
@@ -131,23 +130,68 @@
|
||||
.type-card__icon--gastro {
|
||||
background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
|
||||
}
|
||||
.type-card__main { flex: 1; min-width: 0; }
|
||||
.type-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.type-card__desc {
|
||||
.type-card__badges {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
/* 状态徽标：体检状态三态 + 预约状态两态，演示卡片统一取「进行中 + 已开启预约」 */
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
}
|
||||
.status-badge--not-started { background: #f5f5f5; color: #8c8c8c; border: 1px solid #e0e0e0; }
|
||||
.status-badge--ongoing { background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; }
|
||||
.status-badge--ended { background: #fff1f0; color: #f5222d; border: 1px solid #ffa39e; }
|
||||
.status-badge--appt-open { background: var(--primary-light); color: var(--primary-dark); border: 1px solid #87e8de; }
|
||||
.status-badge--appt-pending { background: #f5f5f5; color: #8c8c8c; border: 1px solid #e0e0e0; }
|
||||
.type-card__info {
|
||||
margin-top: 12px;
|
||||
border-top: 1px dashed #d9eded;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.7;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.type-card__radio {
|
||||
position: absolute;
|
||||
right: 18px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-row__label { color: var(--text-muted); flex-shrink: 0; }
|
||||
.info-row__value {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
}
|
||||
/* 当年体检额度行：仅常规体检卡片展示，高亮强调 */
|
||||
.info-row--quota {
|
||||
background: linear-gradient(90deg, rgba(19, 194, 194, 0.12), rgba(19, 194, 194, 0));
|
||||
border-radius: 10px;
|
||||
padding: 8px 10px;
|
||||
margin: 6px 0 2px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.info-row--quota .info-row__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.type-card__header { position: relative; }
|
||||
.radio-dot {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@@ -158,7 +202,7 @@
|
||||
justify-content: center;
|
||||
transition: all 0.25s ease;
|
||||
flex-shrink: 0;
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
.type-card.active .radio-dot {
|
||||
border-color: var(--primary);
|
||||
@@ -214,25 +258,83 @@
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<div class="section-title">选择体检类型</div>
|
||||
<div class="section-desc">请根据需求选择适合的体检项目</div>
|
||||
<div class="section-desc">以下为您所属单位本年度组织的体检计划，请确认后预约</div>
|
||||
|
||||
<!-- [交互] 点击切换选中态，单选 -->
|
||||
<!-- [交互] 点击切换选中态，单选；卡片信息来自后台体检计划与人群划分规则 -->
|
||||
<div class="type-card active" onclick="selectType(this, 'routine')">
|
||||
<div class="type-card__header">
|
||||
<div class="type-card__icon type-card__icon--routine">🩺</div>
|
||||
<div class="type-card__name">常规体检</div>
|
||||
<div class="type-card__main">
|
||||
<div class="type-card__name">常规体检</div>
|
||||
<div class="type-card__badges">
|
||||
<span class="status-badge status-badge--ongoing">进行中</span>
|
||||
<span class="status-badge status-badge--appt-open">已开启预约</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="type-card__desc">基础健康综合筛查，覆盖核心指标</div>
|
||||
<div class="type-card__info">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">组织单位</span>
|
||||
<span class="info-row__value">CQ能源第一采油厂</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体检年度</span>
|
||||
<span class="info-row__value">2026</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体检时间</span>
|
||||
<span class="info-row__value">2026-06-23 至 2026-08-31</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">预约时间</span>
|
||||
<span class="info-row__value">2026-06-01 至 2026-08-20</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">所属人群</span>
|
||||
<span class="info-row__value">35岁及以下-女</span>
|
||||
</div>
|
||||
<div class="info-row info-row--quota">
|
||||
<span class="info-row__label">当年体检额度</span>
|
||||
<span class="info-row__value">¥2,500.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="type-card" onclick="selectType(this, 'gastro')">
|
||||
<div class="type-card__header">
|
||||
<div class="type-card__icon type-card__icon--gastro">🔬</div>
|
||||
<div class="type-card__name">胃肠镜体检</div>
|
||||
<div class="type-card__main">
|
||||
<div class="type-card__name">胃肠镜体检</div>
|
||||
<div class="type-card__badges">
|
||||
<span class="status-badge status-badge--ongoing">进行中</span>
|
||||
<span class="status-badge status-badge--appt-open">已开启预约</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="type-card__desc">胃肠内镜专项检查，直观诊断消化道病变</div>
|
||||
<div class="type-card__info">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">组织单位</span>
|
||||
<span class="info-row__value">CQ能源第一采油厂</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体检年度</span>
|
||||
<span class="info-row__value">2026</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体检时间</span>
|
||||
<span class="info-row__value">2026-06-23 至 2026-08-31</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">预约时间</span>
|
||||
<span class="info-row__value">2026-06-01 至 2026-08-20</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">所属人群</span>
|
||||
<span class="info-row__value">35岁及以下-女</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,6 +89,12 @@
|
||||
}
|
||||
.hospital-card__name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
|
||||
.hospital-card__addr { font-size: 12px; color: var(--text-muted); }
|
||||
/* 医院承检类型标签：常规体检与胃肠镜体检互斥，职业体检可与任一叠加 */
|
||||
.hospital-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
|
||||
.htag { font-size: 10px; line-height: 16px; padding: 0 8px; border-radius: 8px; }
|
||||
.htag--routine { background: #e6f7ff; color: #1890ff; }
|
||||
.htag--gastro { background: #f6ffed; color: #52c41a; }
|
||||
.htag--occupation { background: #fff7e6; color: #fa8c16; }
|
||||
.radio-dot {
|
||||
width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d9d9d9;
|
||||
display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0;
|
||||
@@ -114,12 +120,6 @@
|
||||
.modal-field:last-of-type { border-bottom: none; }
|
||||
.modal-field__label { font-size: 14px; color: var(--text-muted); }
|
||||
.modal-field__value { font-size: 14px; color: var(--text-primary); font-weight: 600; }
|
||||
.marriage-toggle { display: inline-flex; background: #f5f5f5; border-radius: 20px; overflow: hidden; }
|
||||
.marriage-toggle__btn {
|
||||
padding: 6px 16px; font-size: 13px; font-weight: 600; border: none;
|
||||
background: transparent; color: var(--text-muted); cursor: pointer; border-radius: 20px; transition: all 0.2s ease;
|
||||
}
|
||||
.marriage-toggle__btn.active { background: var(--primary); color: #fff; }
|
||||
.modal-confirm-btn {
|
||||
margin-top: 20px; width: 100%; height: 44px; border-radius: 22px; font-size: 15px; font-weight: 600;
|
||||
border: none; cursor: pointer; background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
@@ -160,21 +160,41 @@
|
||||
<div class="hospital-card active" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">宁夏宝石花医院</div><div class="hospital-card__addr">宁夏银川市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">宁夏宝石花医院</div>
|
||||
<div class="hospital-card__addr">宁夏银川市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--routine">常规体检</span>
|
||||
<span class="htag htag--occupation">职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">CQ星龙园医院</div><div class="hospital-card__addr">陕西西安市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">CQ星龙园医院</div>
|
||||
<div class="hospital-card__addr">陕西西安市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--gastro">胃肠镜体检</span>
|
||||
<span class="htag htag--occupation">职业体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
<div class="hospital-card" onclick="selectHospital(this)">
|
||||
<div class="hospital-card__info">
|
||||
<div class="hospital-card__icon">🏥</div>
|
||||
<div><div class="hospital-card__name">西安CQ医院</div><div class="hospital-card__addr">陕西西安市</div></div>
|
||||
<div>
|
||||
<div class="hospital-card__name">西安CQ医院</div>
|
||||
<div class="hospital-card__addr">陕西西安市</div>
|
||||
<div class="hospital-card__tags">
|
||||
<span class="htag htag--routine">常规体检</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="radio-dot"></div>
|
||||
</div>
|
||||
@@ -193,13 +213,7 @@
|
||||
<div class="modal-field"><span class="modal-field__label">单位</span><span class="modal-field__value">CQ能源第一采油厂</span></div>
|
||||
<div class="modal-field"><span class="modal-field__label">身份证号</span><span class="modal-field__value">6101021994********</span></div>
|
||||
<div class="modal-field"><span class="modal-field__label">性别</span><span class="modal-field__value">女</span></div>
|
||||
<div class="modal-field">
|
||||
<span class="modal-field__label">婚姻状况</span>
|
||||
<div class="marriage-toggle">
|
||||
<button class="marriage-toggle__btn active" onclick="toggleMarriage(this)">已婚</button>
|
||||
<button class="marriage-toggle__btn" onclick="toggleMarriage(this)">未婚</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-field"><span class="modal-field__label">年龄</span><span class="modal-field__value">32</span></div>
|
||||
<button class="modal-confirm-btn" onclick="closeModal()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,10 +229,6 @@
|
||||
}
|
||||
function openModal() { document.getElementById('personModal').classList.remove('hidden'); }
|
||||
function closeModal() { document.getElementById('personModal').classList.add('hidden'); }
|
||||
function toggleMarriage(btn) {
|
||||
document.querySelectorAll('.marriage-toggle__btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -203,8 +203,8 @@
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 点击返回至: my-appointments.html -->
|
||||
<a class="nav-back" href="my-appointments.html">‹</a>
|
||||
<!-- [交互] 点击返回至: my-appointments-all.html -->
|
||||
<a class="nav-back" href="my-appointments-all.html">‹</a>
|
||||
<span class="nav-title">到院体检</span>
|
||||
</div>
|
||||
|
||||
@@ -245,8 +245,8 @@
|
||||
</div>
|
||||
|
||||
<div class="bottom-action">
|
||||
<!-- [交互] 点击跳转至: my-appointments.html -->
|
||||
<button class="bottom-action__btn" onclick="window.location.href='my-appointments.html'">返回我的预约</button>
|
||||
<!-- [交互] 点击跳转至: my-appointments-all.html -->
|
||||
<button class="bottom-action__btn" onclick="window.location.href='my-appointments-all.html'">返回我的预约</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -224,8 +224,8 @@
|
||||
<span class="feature-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: my-appointments.html -->
|
||||
<div class="feature-card" onclick="location.href='my-appointments.html'">
|
||||
<!-- [交互] 点击跳转至: my-appointments-all.html -->
|
||||
<div class="feature-card" onclick="location.href='my-appointments-all.html'">
|
||||
<div class="feature-card__icon" style="background:#f6ffed; color:#52c41a;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
|
||||
</div>
|
||||
|
||||
@@ -64,6 +64,35 @@
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.nav-bell {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-bell__badge {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 0;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background: #ff4d4f;
|
||||
border: 2px solid #fff;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -71,62 +100,120 @@
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
.hero-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f3fffe 100%);
|
||||
border: 1px solid #e3f6f4;
|
||||
/* 年度体检计划 Banner 轮播：常规体检 / 胃肠镜体检 / 未开启计划占位，共三张滑动切换 */
|
||||
.banner {
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: 0 6px 18px rgba(20, 180, 176, 0.08);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 24px rgba(19, 194, 194, 0.12);
|
||||
}
|
||||
.hero-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 170, 0, 0.12);
|
||||
color: #d48806;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
.banner__track {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.hero-card__title {
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.hero-card__desc {
|
||||
font-size: 14px;
|
||||
line-height: 1.7;
|
||||
color: #666;
|
||||
}
|
||||
.fee-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
border-radius: 18px;
|
||||
.banner__track::-webkit-scrollbar { display: none; }
|
||||
.banner-slide {
|
||||
flex: 0 0 100%;
|
||||
scroll-snap-align: center;
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 24px rgba(19, 194, 194, 0.22);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
.fee-card__label {
|
||||
font-size: 13px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.fee-card__value {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
.banner-slide--routine { background: linear-gradient(135deg, #0eb5b0 0%, #35d6c5 100%); }
|
||||
.banner-slide--gastro { background: linear-gradient(135deg, #12a5c4 0%, #3cc3dc 100%); }
|
||||
.banner-slide--waiting { background: linear-gradient(135deg, #93a1b3 0%, #c3ccd8 100%); }
|
||||
/* 右侧大号水印图标 + 圆环装饰，营造 banner 图氛围 */
|
||||
.banner-slide__deco {
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
bottom: -24px;
|
||||
font-size: 104px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.16;
|
||||
transform: rotate(-8deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
.fee-card__meta {
|
||||
.banner-slide__ring {
|
||||
position: absolute;
|
||||
top: -52px;
|
||||
right: 40px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
pointer-events: none;
|
||||
}
|
||||
.banner-slide__title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
line-height: 1.4;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 圆圈进度：固定右下角，按状态推进（已选项目20%→已预约60%→体检中80%→已体检100%） */
|
||||
.banner-progress {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
bottom: 14px;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.banner-progress svg { position: absolute; top: 0; left: 0; }
|
||||
.banner-progress__text { position: relative; }
|
||||
.banner-progress__text { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.15; text-align: center; }
|
||||
.banner-slide__date {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
opacity: 0.86;
|
||||
opacity: 0.92;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.banner-slide__fee { margin-top: 12px; position: relative; z-index: 1; }
|
||||
.banner-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.banner-chip b { font-size: 15px; font-weight: 800; }
|
||||
/* 第三张：未开启计划占位图，内容居中 */
|
||||
.banner-slide--waiting { align-items: center; justify-content: center; text-align: center; }
|
||||
.banner-waiting__icon { font-size: 36px; margin-bottom: 12px; opacity: 0.92; }
|
||||
.banner-waiting__title { font-size: 15px; font-weight: 700; }
|
||||
.banner-waiting__desc { margin-top: 6px; font-size: 12px; opacity: 0.85; line-height: 1.6; }
|
||||
.banner__dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.banner__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 3px;
|
||||
background: #d4dbe2;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
.banner__dot.is-active { width: 18px; background: #13c2c2; }
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
@@ -293,24 +380,67 @@
|
||||
<div class="nav-bar">
|
||||
<span class="nav-back" onclick="location.href='../home/index.html'">‹</span>
|
||||
<span class="nav-title">健康体检</span>
|
||||
<!-- [交互] 点击铃铛跳转至: messages.html，红色角标为当前未读消息数 -->
|
||||
<a class="nav-bell" href="messages.html">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
|
||||
<span class="nav-bell__badge">4</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<div class="hero-card">
|
||||
<div class="hero-card__badge">
|
||||
<span>📋</span>
|
||||
<span>年度体检计划</span>
|
||||
</div>
|
||||
<!-- <div class="hero-card__title">健康体检</div>-->
|
||||
<div class="hero-card__desc">本单位已开展体检计划，请尽快进行体检预约并合理安排时间前往医院进行体检。</div>
|
||||
<!-- [交互] 左右滑动切换三张计划 Banner，点击圆点跳转到对应张 -->
|
||||
<div class="banner">
|
||||
<div class="banner__track" id="bannerTrack">
|
||||
<!-- 第一张：常规体检 | [交互] 点击进入: reports.html（已体检，查看报告） -->
|
||||
<div class="banner-slide banner-slide--routine" onclick="location.href='reports.html'">
|
||||
<span class="banner-slide__ring"></span>
|
||||
<span class="banner-slide__deco">🩺</span>
|
||||
<div class="banner-slide__title">单位已制定2026年度常规体检计划</div>
|
||||
<div class="banner-slide__date">🗓 体检日期：2026-09-01 至 2026-12-31</div>
|
||||
<div class="banner-slide__fee">
|
||||
<span class="banner-chip">💰 体检费用额度 <b>¥1500.00</b></span>
|
||||
</div>
|
||||
<!-- 圆圈进度（右下角）：已体检 = 满环 -->
|
||||
<div class="banner-progress">
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none">
|
||||
<circle cx="26" cy="26" r="21" stroke="rgba(255,255,255,0.35)" stroke-width="4"/>
|
||||
<circle cx="26" cy="26" r="21" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-dasharray="131.9" stroke-dashoffset="0" transform="rotate(-90 26 26)"/>
|
||||
</svg>
|
||||
<span class="banner-progress__text">已体检</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fee-card">
|
||||
<div class="fee-card__label">本年度体检费用(元)</div>
|
||||
<div class="fee-card__value">1500.00</div>
|
||||
<!-- <div class="fee-card__meta">费用由单位统一配置，预约时自动关联体检项目。</div>-->
|
||||
<!-- 第二张：胃肠镜体检 | [交互] 点击进入: my-appointments-all.html?type=gastro（已预约，查看预约） -->
|
||||
<div class="banner-slide banner-slide--gastro" onclick="location.href='my-appointments-all.html?type=gastro'">
|
||||
<span class="banner-slide__ring"></span>
|
||||
<span class="banner-slide__deco">🔬</span>
|
||||
<div class="banner-slide__title">单位已拟定2026年度胃肠镜体检计划</div>
|
||||
<div class="banner-slide__date">🗓 体检日期：2026-10-08 至 2026-12-20</div>
|
||||
<!-- 圆圈进度（右下角）：已预约 = 60%（已选项目20%→已预约60%→体检中80%→已体检100%），dashoffset = 131.9 × 40% ≈ 52.8 -->
|
||||
<div class="banner-progress">
|
||||
<svg width="52" height="52" viewBox="0 0 52 52" fill="none">
|
||||
<circle cx="26" cy="26" r="21" stroke="rgba(255,255,255,0.35)" stroke-width="4"/>
|
||||
<circle cx="26" cy="26" r="21" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-dasharray="131.9" stroke-dashoffset="52.8" transform="rotate(-90 26 26)"/>
|
||||
</svg>
|
||||
<span class="banner-progress__text">已预约</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第三张：未开启年度体检计划占位图 -->
|
||||
<div class="banner-slide banner-slide--waiting">
|
||||
<span class="banner-slide__deco">🌱</span>
|
||||
<div class="banner-waiting__icon">🌱</div>
|
||||
<div class="banner-waiting__title">单位暂未开启下一年度体检计划</div>
|
||||
<div class="banner-waiting__desc">2027 年度体检计划筹备中，开启后将第一时间通知您</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner__dots" id="bannerDots">
|
||||
<span class="banner__dot is-active"></span>
|
||||
<span class="banner__dot"></span>
|
||||
<span class="banner__dot"></span>
|
||||
</div>
|
||||
|
||||
<div class="section-title">体检服务</div>
|
||||
<div class="feature-list">
|
||||
@@ -327,8 +457,8 @@
|
||||
<span class="feature-card__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: my-appointments.html -->
|
||||
<div class="feature-card" onclick="location.href='my-appointments.html'">
|
||||
<!-- [交互] 点击跳转至: my-appointments-all.html -->
|
||||
<div class="feature-card" onclick="location.href='my-appointments-all.html'">
|
||||
<div class="feature-card__icon" style="background:#f6ffed; color:#52c41a;">
|
||||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
|
||||
</div>
|
||||
@@ -354,7 +484,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-title">辅助入口</div>
|
||||
<div class="section-title">其他服务</div>
|
||||
<div class="quick-grid">
|
||||
<!-- [交互] 点击跳转至: process-guide.html -->
|
||||
<div class="quick-card" onclick="location.href='process-guide.html'">
|
||||
@@ -388,5 +518,25 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var track = document.getElementById('bannerTrack');
|
||||
var dots = document.querySelectorAll('#bannerDots .banner__dot');
|
||||
// 滚动时按滚动位置判定当前展示张数，同步高亮圆点
|
||||
track.addEventListener('scroll', function () {
|
||||
var index = Math.round(track.scrollLeft / track.clientWidth);
|
||||
dots.forEach(function (dot, i) {
|
||||
dot.classList.toggle('is-active', i === index);
|
||||
});
|
||||
});
|
||||
// 点击圆点平滑滚动到对应张
|
||||
dots.forEach(function (dot, i) {
|
||||
dot.addEventListener('click', function () {
|
||||
track.scrollTo({ left: track.clientWidth * i, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,540 @@
|
||||
<!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: #20c7c7;
|
||||
--primary-dark: #119b9b;
|
||||
--primary-light: #e8fbfb;
|
||||
--border: #cfeeee;
|
||||
--line: #dff3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f6fbfb;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666;
|
||||
--text-muted: #8c8c8c;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--warning: #fa8c16;
|
||||
--warning-light: #fff7e6;
|
||||
--success: #52c41a;
|
||||
--success-light: #f6ffed;
|
||||
--paper-shadow: 0 8px 24px rgba(17, 155, 155, 0.08);
|
||||
}
|
||||
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);
|
||||
}
|
||||
.nav-action {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.scroll-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #ecfbfb 0%, #f7fbfb 220px, #f7fbfb 100%);
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--paper-shadow);
|
||||
padding: 13px 14px;
|
||||
}
|
||||
.card__label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0d7878;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ai-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 9px;
|
||||
background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
||||
color: #fff;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 头卡 */
|
||||
.hero__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.hero__name { font-size: 16px; font-weight: 800; color: var(--text-primary); }
|
||||
.hero__cat {
|
||||
font-size: 10px;
|
||||
color: var(--primary-dark);
|
||||
background: var(--primary-light);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
.hero__badge { margin-left: auto; }
|
||||
.hero__value-row { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 6px; }
|
||||
.hero__value { font-size: 30px; font-weight: 800; line-height: 1; color: var(--text-primary); }
|
||||
.hero__value.is-abn { color: var(--danger); }
|
||||
.hero__unit { font-size: 11px; color: var(--text-muted); margin-left: 4px; font-weight: 400; }
|
||||
.hero__yoy { font-size: 11px; color: var(--text-secondary); padding-bottom: 3px; }
|
||||
.hero__yoy b { font-size: 13px; }
|
||||
.hero__ref { font-size: 11px; color: var(--text-muted); }
|
||||
.hero__result { font-size: 14px; font-weight: 700; line-height: 1.6; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge--worse { background: var(--danger-light); color: var(--danger); }
|
||||
.badge--new { background: var(--danger-light); color: var(--danger); }
|
||||
.badge--keep { background: var(--warning-light); color: var(--warning); }
|
||||
.badge--better { background: var(--success-light); color: var(--success); }
|
||||
.badge--stable { background: #f5f5f5; color: var(--text-muted); }
|
||||
.badge--ok { background: var(--success-light); color: var(--success); }
|
||||
.badge--abn { background: var(--danger-light); color: var(--danger); }
|
||||
|
||||
/* 图表卡 */
|
||||
.chart-box svg { display: block; width: 100%; height: auto; }
|
||||
.chart-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-muted); margin-top: 4px; }
|
||||
.chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
|
||||
|
||||
/* AI 解读 */
|
||||
.ai-text { font-size: 12px; line-height: 1.85; color: #4d4d4d; }
|
||||
.ai-note { font-size: 10px; color: #b5b5b5; margin-top: 8px; }
|
||||
|
||||
/* 历年明细表 */
|
||||
.hist-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
|
||||
.hist-table th, .hist-table td {
|
||||
border: 1px solid var(--border);
|
||||
padding: 7px 5px;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.hist-table th { background: #f2ffff; color: #0e7f7f; font-weight: 700; }
|
||||
.hist-table td.is-abn { color: var(--danger); font-weight: 700; }
|
||||
|
||||
/* 时间轴（文本模式） */
|
||||
.tl { position: relative; padding-left: 16px; }
|
||||
.tl::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, #78e3e3, #d6f5f5); border-radius: 1px; }
|
||||
.tl-item { position: relative; padding-bottom: 12px; }
|
||||
.tl-item:last-child { padding-bottom: 0; }
|
||||
.tl-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 5px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
border: 3px solid var(--primary);
|
||||
}
|
||||
.tl-item.is-abn::before { border-color: var(--danger); }
|
||||
.tl-item__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
|
||||
.tl-item__year { font-size: 14px; font-weight: 800; color: var(--text-primary); }
|
||||
.tl-item__date { font-size: 10px; color: var(--text-muted); }
|
||||
.tl-item__tag { margin-left: auto; }
|
||||
/* 结论默认两行折叠，展开看全文 */
|
||||
.tl-item__text {
|
||||
font-size: 12px;
|
||||
color: #4d4d4d;
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tl-item__text.is-abn { color: var(--danger); font-weight: 600; }
|
||||
.tl-item.is-expanded .tl-item__text {
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
overflow: visible;
|
||||
}
|
||||
.tl-item__toggle {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin-top: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
cursor: pointer;
|
||||
}
|
||||
.tl-item__toggle[hidden] { display: none; }
|
||||
|
||||
/* 指标切换 chips */
|
||||
.switch-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
|
||||
.switch-row::-webkit-scrollbar { display: none; }
|
||||
.switch-chip {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.switch-chip.is-active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; font-weight: 700; }
|
||||
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
border: none;
|
||||
border-radius: 23px;
|
||||
background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.22);
|
||||
}
|
||||
.bottom-spacer { height: 8px; }
|
||||
</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">
|
||||
<!-- [交互] 返回总览页 -->
|
||||
<span class="nav-back" onclick="location.href='indicator-compare.html'">‹</span>
|
||||
<span class="nav-title">指标分析</span>
|
||||
<!-- [交互] 点击返回体检报告页 -->
|
||||
<a class="nav-action" href="report-query.html">报告</a>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="page-body" id="pageBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===== Mock 数据：与总览页/体检报告页口径一致（2021-2025 连续五年）=====
|
||||
var YEARS = ['2021', '2022', '2023', '2024', '2025'];
|
||||
var DATES = ['2021-03-18', '2022-03-25', '2023-03-16', '2024-03-20', '2025-03-21'];
|
||||
var CATS = [
|
||||
{ name: '体格指标', keys: ['bmi', 'sbp', 'dbp'] },
|
||||
{ name: '血脂', keys: ['tc', 'tg', 'hdl', 'ldl'] },
|
||||
{ name: '血糖', keys: ['glu', 'hba1c'] },
|
||||
{ name: '肾功能', keys: ['ua', 'crea', 'urea'] },
|
||||
{ name: '肝功能', keys: ['alt', 'ast'] },
|
||||
{ name: '血常规', keys: ['hgb', 'wbc', 'plt'] }
|
||||
];
|
||||
var NUM = {
|
||||
bmi: { name: 'BMI', unit: 'kg/m²', ref: [18.5, 23.9], v: [23.1, 23.8, 24.5, 25.2, 25.8], badge: ['恶化趋势', 'worse'],
|
||||
ai: 'BMI 五年间从 23.1 持续攀升至 25.8，自 2023 年起越过正常上限进入超重区间，升幅逐年稳定累积，与血脂三项及尿酸的变化高度同步。体重是本轮代谢指标恶化的核心可控因素，建议设定 6 个月减重 5%-8% 的目标并每月自测跟踪。' },
|
||||
sbp: { name: '收缩压', unit: 'mmHg', ref: [90, 139], v: [112, 115, 118, 116, 120], badge: ['平稳', 'stable'],
|
||||
ai: '收缩压五年均处于正常范围（112-120 mmHg），未见上行趋势，血管弹性指标良好。保持低盐饮食与规律有氧运动即可，继续年度监测。' },
|
||||
dbp: { name: '舒张压', unit: 'mmHg', ref: [60, 89], v: [72, 74, 73, 76, 78], badge: ['平稳', 'stable'],
|
||||
ai: '舒张压五年稳定在正常区间，近年有轻微波动但幅度很小，无临床关注必要。' },
|
||||
tc: { name: '总胆固醇 TC', unit: 'mmol/L', ref: [3.1, 5.7], v: [4.62, 4.95, 5.36, 5.78, 6.10], badge: ['恶化趋势', 'worse'],
|
||||
ai: '总胆固醇连续三年上升（4.62 → 6.10 mmol/L），近两年连续超过参考上限且年度增幅未见收敛，属明确的恶化趋势。建议严格限制高胆固醇饮食并于 3 个月后复查；若持续上行，请医生评估是否需要药物干预。' },
|
||||
tg: { name: '甘油三酯 TG', unit: 'mmol/L', ref: [0.4, 1.7], v: [1.20, 1.35, 1.55, 1.72, 2.08], badge: ['恶化趋势', 'worse'],
|
||||
ai: '甘油三酯四年连升并连续两年越限，今年达 2.08 mmol/L。该指标对饮食与酒精最敏感，也最能反映近期生活方式，是代谢谱恶化的先行信号。控制主食精制糖与油脂摄入后通常 4-8 周即可见回落，建议 3 个月复查验证。' },
|
||||
hdl: { name: '高密度脂蛋白 HDL-C', unit: 'mmol/L', ref: [1.04, 1.55], v: [1.35, 1.30, 1.26, 1.22, 1.18], badge: ['平稳', 'stable'],
|
||||
ai: 'HDL-C（俗称"好胆固醇"）五年间从 1.35 缓慢降至 1.18，仍在正常范围内但方向不理想。它与坏胆固醇同步恶化会放大心血管风险，增加每周 150 分钟以上中等强度有氧运动是提升 HDL 最有效的非药物手段。' },
|
||||
ldl: { name: '低密度脂蛋白 LDL-C', unit: 'mmol/L', ref: [0, 3.4], v: [2.80, 3.00, 3.10, 3.35, 3.92], badge: ['新增异常', 'new'],
|
||||
ai: 'LDL-C 前四年处于正常偏高区间，今年首次越限（3.35 → 3.92，同比 +0.57），升幅为五年内最大。作为动脉粥样硬化的头号致病因子，它是本次体检最重要的新增风险信号，需与总胆固醇变化合并解读，建议纳入 3 个月复查项目。' },
|
||||
glu: { name: '空腹血糖 GLU', unit: 'mmol/L', ref: [3.9, 6.1], v: [5.0, 5.1, 4.9, 5.3, 5.2], badge: ['平稳', 'stable'],
|
||||
ai: '空腹血糖五年均稳定在正常范围，暂无糖代谢异常信号。但结合 BMI 与血脂的恶化趋势，血糖仍是未来 3-5 年需要重点跟踪的保护性指标。' },
|
||||
hba1c:{ name: '糖化血红蛋白 HbA1c', unit: '%', ref: [4.0, 6.0], v: [5.2, 5.3, 5.1, 5.4, 5.6], badge: ['平稳', 'stable'],
|
||||
ai: '糖化血红蛋白五年正常（5.1-5.6%），反映近 2-3 个月平均血糖水平良好，但逐年小幅抬升，建议每年度关注其走势是否逼近 6.0% 上限。' },
|
||||
ua: { name: '尿酸 UA', unit: 'μmol/L', ref: [155, 357], v: [330, 362, 371, 380, 389], badge: ['连续异常', 'keep'],
|
||||
ai: '尿酸已连续四年高于参考上限（362 → 389 μmol/L），缓慢爬升。高嘌呤饮食、果糖饮料与饮水不足是主要诱因，持续偏高会带来痛风发作与肾脏负担双重风险。建议每日饮水 2000mL 以上，少吃内脏海鲜浓汤，复查时同肾功一并检测。' },
|
||||
crea: { name: '肌酐 CREA', unit: 'μmol/L', ref: [41, 73], v: [66, 68, 69, 70, 71], badge: ['平稳', 'stable'],
|
||||
ai: '肌酐五年均正常，但逐年缓升且已接近上限（71/73）。目前无肾功能损害证据，建议连同尿酸一起动态观察，控制蛋白类补剂与高尿酸负荷。' },
|
||||
urea: { name: '尿素 UREA', unit: 'mmol/L', ref: [2.8, 7.2], v: [4.5, 5.0, 4.6, 5.2, 4.8], badge: ['平稳', 'stable'],
|
||||
ai: '尿素五年稳定在正常范围内波动，无趋势性异常，与肌酐共同提示肾排泄功能良好。' },
|
||||
alt: { name: '丙氨酸氨基转移酶 ALT', unit: 'U/L', ref: [7, 40], v: [28, 31, 35, 42, 24.6], badge: ['转好', 'better'],
|
||||
ai: 'ALT 去年轻度超出上限（42 U/L）后，今年回落至 24.6 U/L 回归正常，降幅明显。既往波动可能与脂肪肝活动或体检前熬夜、饮酒等短期因素相关，本次转好属积极信号，建议保持当前生活方式并年度复查。' },
|
||||
ast: { name: '天门冬氨酸氨基转移酶 AST', unit: 'U/L', ref: [13, 35], v: [24, 26, 28, 38, 22.4], badge: ['转好', 'better'],
|
||||
ai: 'AST 去年越限（38 U/L）后今年恢复正常（22.4），与 ALT 的改善同步，进一步支持肝细胞处于修复状态。轻度脂肪肝仍存在，肝功能与彩超建议继续同年度跟踪。' },
|
||||
hgb: { name: '血红蛋白 HGB', unit: 'g/L', ref: [115, 150], v: [140, 138, 141, 139, 136], badge: ['平稳', 'stable'],
|
||||
ai: '血红蛋白五年稳定在正常区间，虽处于正常中位偏下但无任何贫血倾向，铁营养状况良好。' },
|
||||
wbc: { name: '白细胞计数 WBC', unit: '10^9/L', ref: [3.5, 9.5], v: [6.2, 6.5, 6.1, 6.9, 6.8], badge: ['平稳', 'stable'],
|
||||
ai: '白细胞计数五年正常，无慢性感染或免疫功能低下的迹象。' },
|
||||
plt: { name: '血小板计数 PLT', unit: '10^9/L', ref: [125, 350], v: [220, 235, 240, 252, 248], badge: ['平稳', 'stable'],
|
||||
ai: '血小板五年正常范围内轻微波动，凝血基础状态稳定，无异常信号。' }
|
||||
};
|
||||
// 定性/描述型项目：按年存结果文本 + 状态（n 正常 / a 异常）
|
||||
var QUAL = {
|
||||
'us-abdomen': { name: '肝胆脾胰双肾彩超', txt: ['肝胆脾胰双肾未见明显异常', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减', '轻度脂肪肝，肝实质回声近场增强、远场轻度衰减，肝内血管纹理显示欠清，胆囊脾胰双肾未见明显异常，建议控制体重并定期复查', '肝脏体积稍增大，肝实质回声近场增强、远场轻度衰减，肝内血管纹理显示欠清，未见明显占位性病变，肝内外胆管未见扩张，提示轻度脂肪肝'], st: ['n', 'a', 'a', 'a', 'a'],
|
||||
ai: '轻度脂肪肝自 2022 年首次检出后已连续四年存在，但程度始终维持在轻度、未见向中重度进展。该表现与 BMI 五年持续上行同步，减重仍是唯一被证实有效的逆转手段。建议每年彩超随访，若合并转氨酶反复升高需消化科就诊。' },
|
||||
'ct-cervical': { name: '颈椎 CT', txt: ['颈椎序列整齐，生理曲度存在，未见骨质异常', '颈椎曲度自然，椎体及附件未见骨质异常', '颈椎生理曲度存在，椎体边缘未见明显骨质增生', '颈椎生理曲度变直，C3-C6 椎体边缘轻度骨质增生，椎间隙未见明显狭窄，项韧带未见钙化，建议减少低头时间，定期复查颈椎正侧位片', '颈椎生理曲度变直，部分椎体前缘轻度唇样增生，C4/5 椎间盘未见明显突出，椎间孔无狭窄，建议每日颈肩拉伸训练，半年后复查'], st: ['n', 'n', 'n', 'a', 'a'],
|
||||
ai: '颈椎生理曲度变直于去年首次出现并持续两年，属不可逆的结构性改变早期信号，与长期伏案、低头用机姿势直接相关。目前未见骨质增生与椎间病变，重点在于控制进展：建议每日颈肩拉伸、屏幕垫高、每 45 分钟起身活动。' },
|
||||
ecg: { name: '心电图', txt: ['窦性心律，心率 76 次/分，各导联 ST-T 未见异常', '窦性心律，心率 74 次/分，未见明显异常', '窦性心律，偶发室性期前收缩（约 2 次/分），各导联未见 ST-T 动态演变，建议必要时行动态心电图进一步复查，日常注意减少咖啡因摄入', '窦性心律，未见早搏，各导联未见明显异常', '窦性心律，心率 76 次/分，未见明显异常'], st: ['n', 'n', 'a', 'n', 'n'],
|
||||
ai: '五年心电图四年正常，2023 年曾提示偶发早搏，其后连续两年复查均未见复发，属一过性改变（多与熬夜、咖啡因、检测前状态相关），无特异性处理必要。若出现心悸、胸闷等症状可随时复查。' },
|
||||
'us-thyroid': { name: '甲状腺彩超', txt: ['甲状腺双叶大小形态正常，回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见结节，CDFI 未见异常血流', '甲状腺双叶回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见明显结节', '甲状腺双叶回声均匀，未见异常'], st: ['n', 'n', 'n', 'n', 'n'],
|
||||
ai: '甲状腺彩超五年未见异常回声与结节，结合甲状腺功能五项持续正常，甲状腺健康状况良好，维持常规体检频率即可。' },
|
||||
'dr-chest': { name: '胸部 DR', txt: ['胸廓对称，两肺纹理清晰，心影大小正常', '两肺纹理清晰，肺内未见实质性病变，心膈未见异常', '心肺膈未见明显异常', '心肺膈未见明显异常', '胸廓对称，两肺纹理清晰、走行自然，肺内未见明显实质性病变，心影大小形态正常，双侧膈面光滑，肋膈角锐利，建议每年常规复查'], st: ['n', 'n', 'n', 'n', 'n'],
|
||||
ai: '胸部影像五年均未见明显异常，心肺形态与横膈无异常征象。' },
|
||||
urine: { name: '尿常规', txt: ['尿蛋白、尿糖、潜血均阴性，尿比重正常', '各主要项目均为阴性，未见异常', '尿蛋白阴性、尿糖阴性，酸碱度及比重在正常范围', '各项指标均阴性，镜检未见异常', '尿蛋白、尿糖、酮体、潜血、白细胞均阴性，尿比重及酸碱度在正常范围，镜检未见红细胞、白细胞及管型，理化与镜检均未见异常'], st: ['n', 'n', 'n', 'n', 'n'],
|
||||
ai: '尿常规五年主要指标均为阴性，无蛋白尿、血尿、糖尿等肾损伤与代谢异常信号。尿酸虽偏高但尚未影响尿液指标，继续年度监测即可。' }
|
||||
};
|
||||
|
||||
function dec(v) { return v >= 100 ? 0 : (v >= 10 ? 1 : 2); }
|
||||
function fmtV(v) { return v >= 100 ? String(Math.round(v)) : String(v); }
|
||||
function statusOf(it, i) {
|
||||
var v = it.v[i];
|
||||
if (v < it.ref[0]) return { t: '偏低 ↓', abn: true };
|
||||
if (v > it.ref[1]) return { t: '偏高 ↑', abn: true };
|
||||
return { t: '正常', abn: false };
|
||||
}
|
||||
// 逐年关系标签：基线 / 新增异常 / 持续异常 / 转好 / 平稳
|
||||
function relTag(curAbn, prevAbn) {
|
||||
if (prevAbn === null) return ['基线年', 'stable'];
|
||||
if (curAbn && prevAbn) return ['持续异常', 'keep'];
|
||||
if (curAbn) return ['新增异常', 'new'];
|
||||
if (prevAbn) return ['转好恢复', 'better'];
|
||||
return ['平稳', 'stable'];
|
||||
}
|
||||
|
||||
// ===== 五年趋势折线图（纯内联 SVG，含参考范围色带）=====
|
||||
function chartSvg(it) {
|
||||
var W = 352, H = 216, L = 38, R = 8, T = 16, B = 28;
|
||||
var lo = it.ref[0], hi = it.ref[1];
|
||||
var min = Math.min.apply(null, it.v.concat([lo]));
|
||||
var max = Math.max.apply(null, it.v.concat([hi]));
|
||||
var span = (max - min) || 1;
|
||||
min -= span * 0.10; max += span * 0.14; span = max - min;
|
||||
var pw = W - L - R, ph = H - T - B, d = dec(max);
|
||||
function X(i) { return L + i * pw / 4; }
|
||||
function Y(v) { return T + (max - v) / span * ph; }
|
||||
var s = '<svg viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg">';
|
||||
// 参考范围色带 + 虚线边界
|
||||
var bandTop = Math.max(Y(hi), T), bandBot = Math.min(Y(lo), T + ph);
|
||||
if (bandBot > bandTop) {
|
||||
s += '<rect x="' + L + '" y="' + bandTop.toFixed(1) + '" width="' + pw + '" height="' + (bandBot - bandTop).toFixed(1) + '" fill="rgba(82,196,26,0.10)"/>';
|
||||
if (Y(hi) >= T && Y(hi) <= T + ph) s += '<line x1="' + L + '" y1="' + Y(hi).toFixed(1) + '" x2="' + (W - R) + '" y2="' + Y(hi).toFixed(1) + '" stroke="#52c41a" stroke-width="1" stroke-dasharray="4 3" opacity="0.55"/>';
|
||||
if (Y(lo) >= T && Y(lo) <= T + ph) s += '<line x1="' + L + '" y1="' + Y(lo).toFixed(1) + '" x2="' + (W - R) + '" y2="' + Y(lo).toFixed(1) + '" stroke="#52c41a" stroke-width="1" stroke-dasharray="4 3" opacity="0.55"/>';
|
||||
s += '<text x="' + (L + 4) + '" y="' + (bandTop + 11).toFixed(1) + '" font-size="9" fill="#52c41a" opacity="0.85">正常参考范围 ' + it.ref[0] + '-' + it.ref[1] + '</text>';
|
||||
}
|
||||
// Y 轴刻度与网格
|
||||
for (var g = 0; g <= 4; g++) {
|
||||
var gv = min + span * g / 4, gy = Y(gv);
|
||||
s += '<line x1="' + L + '" y1="' + gy.toFixed(1) + '" x2="' + (W - R) + '" y2="' + gy.toFixed(1) + '" stroke="#eef6f6" stroke-width="1"/>';
|
||||
s += '<text x="' + (L - 4) + '" y="' + (gy + 3).toFixed(1) + '" font-size="9" fill="#999" text-anchor="end">' + gv.toFixed(d) + '</text>';
|
||||
}
|
||||
// 数据系列
|
||||
var dotColor = function (v) { return (v < lo || v > hi) ? '#ff4d4f' : '#13c2c2'; };
|
||||
var pts = it.v.map(function (v, i) { return X(i).toFixed(1) + ',' + Y(v).toFixed(1); }).join(' ');
|
||||
s += '<polyline points="' + pts + '" fill="none" stroke="#13c2c2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>';
|
||||
it.v.forEach(function (v, i) {
|
||||
s += '<circle cx="' + X(i).toFixed(1) + '" cy="' + Y(v).toFixed(1) + '" r="4.5" fill="' + dotColor(v) + '" stroke="#fff" stroke-width="1.6"/>';
|
||||
s += '<text x="' + X(i).toFixed(1) + '" y="' + (Y(v) - 9).toFixed(1) + '" font-size="9.5" font-weight="700" fill="' + dotColor(v) + '" text-anchor="middle">' + fmtV(v) + '</text>';
|
||||
});
|
||||
// X 轴年份
|
||||
YEARS.forEach(function (y, i) {
|
||||
s += '<text x="' + X(i).toFixed(1) + '" y="' + (H - 8) + '" font-size="10" fill="' + (i === 4 ? '#0e7f7f' : '#8c8c8c') + '" font-weight="' + (i === 4 ? '700' : '400') + '" text-anchor="middle">' + y + '</text>';
|
||||
});
|
||||
s += '</svg>';
|
||||
return s;
|
||||
}
|
||||
|
||||
// ===== 页面渲染 =====
|
||||
var item = new URLSearchParams(location.search).get('item') || 'bmi';
|
||||
var isNum = !!NUM[item];
|
||||
if (!isNum && !QUAL[item]) item = 'bmi';
|
||||
|
||||
function render() {
|
||||
document.getElementById('pageBody').innerHTML = isNum ? renderNum() : renderText();
|
||||
if (!isNum) initClamp();
|
||||
}
|
||||
// [交互] 展开/收起历年结论全文
|
||||
function toggleTl(btn) {
|
||||
var item = btn.parentNode;
|
||||
var expanded = item.classList.toggle('is-expanded');
|
||||
btn.textContent = expanded ? '收起' : '展开';
|
||||
}
|
||||
// 结论超过两行才显示展开按钮
|
||||
function initClamp() {
|
||||
document.querySelectorAll('.tl-item').forEach(function (it) {
|
||||
var txt = it.querySelector('.tl-item__text');
|
||||
if (txt.scrollHeight > txt.clientHeight + 1) it.querySelector('.tl-item__toggle').hidden = false;
|
||||
});
|
||||
}
|
||||
// [交互] 底部 chips 切换同类目指标（同页改参数重渲染）
|
||||
function switchTo(key) { location.href = 'indicator-compare-detail.html?item=' + encodeURIComponent(key); }
|
||||
|
||||
function heroCommon(title, badgeHtml, catName) {
|
||||
return '<div class="card"><div class="hero__top"><span class="hero__name">' + title + '</span>'
|
||||
+ '<span class="hero__cat">' + catName + '</span>'
|
||||
+ '<span class="hero__badge">' + badgeHtml + '</span></div>';
|
||||
}
|
||||
|
||||
function chipsHtml(keys) {
|
||||
return '<div class="card"><div class="card__label">切换查看同类目指标</div><div class="switch-row">'
|
||||
+ keys.map(function (k) {
|
||||
var name = (NUM[k] || QUAL[k]).name;
|
||||
return '<button class="switch-chip' + (k === item ? ' is-active' : '') + '" type="button" onclick="switchTo(\'' + k + '\')">' + name + '</button>';
|
||||
}).join('')
|
||||
+ '</div></div>';
|
||||
}
|
||||
|
||||
function renderNum() {
|
||||
var it = NUM[item];
|
||||
var cur = statusOf(it, 4);
|
||||
var badge = '<span class="badge badge--' + it.badge[1] + '">' + it.badge[0] + '</span>';
|
||||
var delta = it.v[4] - it.v[3];
|
||||
var dd = dec(Math.max(Math.abs(delta), it.v[4]));
|
||||
var deltaStr = (delta > 0 ? '+' : '') + delta.toFixed(dd);
|
||||
var html = heroCommon(it.name, badge, catNameOf(item))
|
||||
+ '<div class="hero__value-row"><div class="hero__value' + (cur.abn ? ' is-abn' : '') + '">' + fmtV(it.v[4]) + (cur.abn ? (it.v[4] > it.ref[1] ? ' ↑' : ' ↓') : '') + '<span class="hero__unit">' + it.unit + '</span></div>'
|
||||
+ '<div class="hero__yoy">较2024 <b style="color:' + (Math.abs(delta) < 0.01 ? '#8c8c8c' : (delta > 0 ? '#fa8c16' : '#52c41a')) + '">' + deltaStr + '</b></div></div>'
|
||||
+ '<div class="hero__ref">参考范围 ' + it.ref[0] + ' - ' + it.ref[1] + ' ' + it.unit + ' · ' + YEARS[4] + '年度体检</div></div>';
|
||||
|
||||
html += '<div class="card"><div class="card__label">五年趋势图</div>'
|
||||
+ '<div class="chart-box">' + chartSvg(it) + '</div>'
|
||||
+ '<div class="chart-legend"><span><i style="background:rgba(82,196,26,0.25)"></i>正常参考范围</span>'
|
||||
+ '<span><i style="background:#13c2c2"></i>正常值</span><span><i style="background:#ff4d4f"></i>异常值</span></div></div>';
|
||||
|
||||
html += '<div class="card"><div class="card__label"><span class="ai-badge">AI 趋势解读</span></div>'
|
||||
+ '<div class="ai-text">' + it.ai + '</div>'
|
||||
+ '<div class="ai-note">内容由 AI 生成，仅供参考，不构成诊断依据</div></div>';
|
||||
|
||||
var rows = '';
|
||||
for (var i = 4; i >= 0; i--) {
|
||||
var st = statusOf(it, i);
|
||||
var tag = relTag(st.abn, i === 0 ? null : statusOf(it, i - 1).abn);
|
||||
rows += '<tr><td>' + YEARS[i] + '</td>'
|
||||
+ '<td class="' + (st.abn ? 'is-abn' : '') + '">' + fmtV(it.v[i]) + '</td><td>' + it.unit + '</td>'
|
||||
+ '<td>' + it.ref[0] + '-' + it.ref[1] + '</td>'
|
||||
+ '<td><span class="badge badge--' + (st.abn ? 'abn' : 'ok') + '">' + st.t + '</span></td>'
|
||||
+ '<td><span class="badge badge--' + tag[1] + '">' + tag[0] + '</span></td></tr>';
|
||||
}
|
||||
html += '<div class="card"><div class="card__label">历年明细</div>'
|
||||
+ '<table class="hist-table"><thead><tr><th>年份</th><th>结果</th><th>单位</th><th>参考</th><th>状态</th><th>对比</th></tr></thead><tbody>' + rows + '</tbody></table></div>';
|
||||
|
||||
var cat = CATS.filter(function (c) { return c.keys.indexOf(item) >= 0; })[0];
|
||||
html += chipsHtml(cat ? cat.keys : Object.keys(NUM));
|
||||
html += backBtn();
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderText() {
|
||||
var q = QUAL[item];
|
||||
var curAbn = q.st[4] === 'a';
|
||||
var badge = '<span class="badge badge--' + (curAbn ? 'abn' : 'ok') + '">' + (curAbn ? '存在异常' : '正常') + '</span>';
|
||||
var html = heroCommon(q.name, badge, '检查项目')
|
||||
+ '<div class="hero__result" style="' + (curAbn ? 'color:var(--danger)' : '') + '">' + q.txt[4] + '</div>'
|
||||
+ '<div class="hero__ref">' + YEARS[4] + '年度体检</div></div>';
|
||||
|
||||
html += '<div class="card"><div class="card__label">历年结果对比</div><div class="tl">';
|
||||
for (var i = 4; i >= 0; i--) {
|
||||
var abn = q.st[i] === 'a';
|
||||
html += '<div class="tl-item' + (abn ? ' is-abn' : '') + '">'
|
||||
+ '<div class="tl-item__head"><span class="tl-item__year">' + YEARS[i] + '</span>'
|
||||
+ '<span class="tl-item__date">' + DATES[i] + '</span>'
|
||||
+ '<span class="tl-item__tag badge badge--' + (abn ? 'abn' : 'ok') + '">' + (abn ? '存在异常' : '正常') + '</span></div>'
|
||||
+ '<div class="tl-item__text' + (abn ? ' is-abn' : '') + '">' + q.txt[i] + '</div>'
|
||||
+ '<button class="tl-item__toggle" type="button" hidden onclick="toggleTl(this)">展开</button></div>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
|
||||
html += '<div class="card"><div class="card__label"><span class="ai-badge">AI 解读</span></div>'
|
||||
+ '<div class="ai-text">' + q.ai + '</div>'
|
||||
+ '<div class="ai-note">内容由 AI 生成，仅供参考，不构成诊断依据</div></div>';
|
||||
|
||||
html += chipsHtml(Object.keys(QUAL));
|
||||
html += backBtn();
|
||||
return html;
|
||||
}
|
||||
|
||||
function catNameOf(key) {
|
||||
var cat = CATS.filter(function (c) { return c.keys.indexOf(key) >= 0; })[0];
|
||||
return cat ? cat.name : '';
|
||||
}
|
||||
function backBtn() {
|
||||
return '<div><button class="back-btn" type="button" onclick="location.href=\'report-query.html\'">'
|
||||
+ '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>'
|
||||
+ '返回体检报告</button></div><div class="bottom-spacer"></div>';
|
||||
}
|
||||
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,509 @@
|
||||
<!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: #20c7c7;
|
||||
--primary-dark: #119b9b;
|
||||
--primary-light: #e8fbfb;
|
||||
--border: #cfeeee;
|
||||
--line: #dff3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f6fbfb;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666;
|
||||
--text-muted: #8c8c8c;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--warning: #fa8c16;
|
||||
--warning-light: #fff7e6;
|
||||
--success: #52c41a;
|
||||
--success-light: #f6ffed;
|
||||
--paper-shadow: 0 8px 24px rgba(17, 155, 155, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #ecfbfb 0%, #f7fbfb 200px, #f7fbfb 100%);
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
/* AI 纵向总结卡 */
|
||||
.hero-card {
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--border);
|
||||
background: linear-gradient(180deg, #fdffff 0%, #f4fdfd 100%);
|
||||
box-shadow: var(--paper-shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 14px 0;
|
||||
}
|
||||
.hero-card__ai-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.hero-card__title { font-size: 14px; font-weight: 700; color: #0d7878; }
|
||||
.hero-card__range { margin-left: auto; font-size: 10px; color: var(--text-muted); }
|
||||
.hero-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 10px 14px 2px;
|
||||
}
|
||||
.hero-stat {
|
||||
background: var(--primary-light);
|
||||
border-radius: 12px;
|
||||
padding: 8px 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-stat__value { font-size: 17px; font-weight: 800; color: var(--primary-dark); line-height: 1.2; }
|
||||
.hero-stat__label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
|
||||
.hero-stat--danger .hero-stat__value { color: var(--danger); }
|
||||
.hero-stat--warn .hero-stat__value { color: var(--warning); }
|
||||
.hero-stat--success .hero-stat__value { color: var(--success); }
|
||||
.hero-card__text {
|
||||
padding: 10px 14px 12px;
|
||||
font-size: 12px;
|
||||
line-height: 1.8;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
.hero-card__ai-note { padding: 0 14px 10px; font-size: 10px; color: #b5b5b5; }
|
||||
|
||||
/* 筛选 chips */
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.filter-row::-webkit-scrollbar { display: none; }
|
||||
.filter-chip {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 14px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid var(--border);
|
||||
background: #fff;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-chip.is-active {
|
||||
background: linear-gradient(135deg, #13c2c2, #36cfc9);
|
||||
border-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 大类分组（可折叠卡片） */
|
||||
#metricGroups { display: flex; flex-direction: column; gap: 10px; }
|
||||
.cat-group {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cat-group__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0d7878;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cat-group__head::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: var(--primary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cat-group__head small { font-weight: 400; color: var(--text-muted); font-size: 10px; }
|
||||
.cat-group__abn {
|
||||
padding: 1px 7px;
|
||||
border-radius: 8px;
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.cat-group__arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
|
||||
.cat-group.is-collapsed .cat-group__arrow { transform: rotate(-90deg); }
|
||||
.cat-group.is-collapsed .cat-group__body { display: none; }
|
||||
.cat-group__body {
|
||||
border-top: 1px solid var(--line);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.metric-card {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 11px 12px;
|
||||
box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
.metric-card__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.metric-card__name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
|
||||
.metric-card__bottom {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
.metric-card__value { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
|
||||
.metric-card__value.is-abn { color: var(--danger); }
|
||||
.metric-card__unit { font-size: 10px; color: var(--text-muted); font-weight: 400; margin-left: 3px; }
|
||||
.metric-card__ref { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
|
||||
.metric-card__spark { width: 96px; flex-shrink: 0; }
|
||||
.metric-card__spark svg { display: block; }
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.badge--worse { background: var(--danger-light); color: var(--danger); }
|
||||
.badge--new { background: var(--danger-light); color: var(--danger); }
|
||||
.badge--keep { background: var(--warning-light); color: var(--warning); }
|
||||
.badge--better { background: var(--success-light); color: var(--success); }
|
||||
.badge--stable { background: #f5f5f5; color: var(--text-muted); }
|
||||
|
||||
/* 定性项目区（可折叠） */
|
||||
.qual-section {
|
||||
background: #fff;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(17, 155, 155, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
.qual-section__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #0d7878;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qual-section__head small { font-weight: 400; color: var(--text-muted); font-size: 10px; }
|
||||
.qual-section__arrow { margin-left: auto; font-size: 11px; color: var(--text-muted); transition: transform .2s; }
|
||||
.qual-section.is-collapsed .qual-section__arrow { transform: rotate(-90deg); }
|
||||
.qual-section.is-collapsed .qual-section__body { display: none; }
|
||||
.qual-section__body { border-top: 1px solid var(--line); }
|
||||
.qual-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.qual-card:last-child { border-bottom: none; }
|
||||
.qual-card__main { flex: 1; min-width: 0; }
|
||||
.qual-card__name { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
|
||||
.qual-card__desc { font-size: 10px; color: var(--text-secondary); }
|
||||
.qual-card__desc.is-warn { color: var(--danger); font-weight: 600; }
|
||||
.qual-dots { display: flex; gap: 4px; flex-shrink: 0; }
|
||||
.qual-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d9d9d9; }
|
||||
.qual-dots i.is-n { background: var(--success); }
|
||||
.qual-dots i.is-a { background: var(--danger); }
|
||||
.qual-years { font-size: 9px; color: #b5b5b5; flex-shrink: 0; }
|
||||
.back-spacer { height: 20px; }
|
||||
</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">
|
||||
<!-- [交互] 返回体检报告列表页 -->
|
||||
<span class="nav-back" onclick="location.href='reports.html'">‹</span>
|
||||
<span class="nav-title">指标纵向对比</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<!-- ① AI 纵向总结卡 -->
|
||||
<div class="hero-card">
|
||||
<div class="hero-card__head">
|
||||
<span class="hero-card__ai-badge">
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.9z"/></svg>
|
||||
AI
|
||||
</span>
|
||||
<span class="hero-card__title">五年纵向对比总结</span>
|
||||
<span class="hero-card__range">2021 - 2025</span>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="hero-stat hero-stat--danger">
|
||||
<div class="hero-stat__value">5</div>
|
||||
<div class="hero-stat__label">今年异常</div>
|
||||
</div>
|
||||
<div class="hero-stat hero-stat--warn">
|
||||
<div class="hero-stat__value">3</div>
|
||||
<div class="hero-stat__label">恶化趋势</div>
|
||||
</div>
|
||||
<div class="hero-stat hero-stat--danger">
|
||||
<div class="hero-stat__value">1</div>
|
||||
<div class="hero-stat__label">新增异常</div>
|
||||
</div>
|
||||
<div class="hero-stat hero-stat--success">
|
||||
<div class="hero-stat__value">2</div>
|
||||
<div class="hero-stat__label">转好恢复</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-card__text">
|
||||
近五年您的心脑血管代谢相关指标呈持续上行趋势：总胆固醇、甘油三酯、BMI 连续三年上升，低密度脂蛋白今年首次越限，尿酸已连续四年高于正常范围；颈部影像提示生理曲度变直已持续两年。好消息是去年轻度偏高的转氨酶（ALT/AST）今年均回归正常。建议将血脂与体重管理列为本年度健康干预的第一优先级。
|
||||
</div>
|
||||
<div class="hero-card__ai-note">内容由 AI 基于历年体检数据生成，仅供参考，不构成诊断依据</div>
|
||||
</div>
|
||||
|
||||
<!-- ② 筛选 chips -->
|
||||
<!-- [交互] 点击筛选 chips 切换数值指标卡显隐 -->
|
||||
<div class="filter-row">
|
||||
<button class="filter-chip is-active" data-f="all" type="button" onclick="applyFilter(this)">全部</button>
|
||||
<button class="filter-chip" data-f="abn" type="button" onclick="applyFilter(this)">异常</button>
|
||||
<button class="filter-chip" data-f="worse" type="button" onclick="applyFilter(this)">恶化趋势</button>
|
||||
<button class="filter-chip" data-f="normal" type="button" onclick="applyFilter(this)">正常</button>
|
||||
</div>
|
||||
|
||||
<!-- ③ 数值指标区（按体检项目大类分组合并，默认折叠，JS 渲染） -->
|
||||
<!-- [交互] 点击大类头展开/收起该类指标卡；切换筛选时自动展开有匹配项的大类 -->
|
||||
<div id="metricGroups"></div>
|
||||
|
||||
<!-- ④ 其他检查项目（定性结果，JS 渲染） -->
|
||||
<!-- [交互] 点击分组头展开/收起定性项目列表 -->
|
||||
<div class="qual-section" id="qualSection">
|
||||
<div class="qual-section__head" onclick="document.getElementById('qualSection').classList.toggle('is-collapsed')">
|
||||
其他检查项目<small>定性结论 · 历年对比</small>
|
||||
<span class="qual-section__arrow">▾</span>
|
||||
</div>
|
||||
<div class="qual-section__body" id="qualBody"></div>
|
||||
</div>
|
||||
<div class="back-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===== Mock 数据：2021-2025 五年数值指标（与体检报告页/详情页口径一致）=====
|
||||
var YEARS = ['2021', '2022', '2023', '2024', '2025'];
|
||||
var CATS = [
|
||||
{ name: '体格指标', keys: ['bmi', 'sbp', 'dbp'] },
|
||||
{ name: '血脂', keys: ['tc', 'tg', 'hdl', 'ldl'] },
|
||||
{ name: '血糖', keys: ['glu', 'hba1c'] },
|
||||
{ name: '肾功能', keys: ['ua', 'crea', 'urea'] },
|
||||
{ name: '肝功能', keys: ['alt', 'ast'] },
|
||||
{ name: '血常规', keys: ['hgb', 'wbc', 'plt'] }
|
||||
];
|
||||
var NUM = {
|
||||
bmi: { name: 'BMI', unit: 'kg/m²', ref: [18.5, 23.9], v: [23.1, 23.8, 24.5, 25.2, 25.8], badge: ['恶化趋势', 'worse'] },
|
||||
sbp: { name: '收缩压', unit: 'mmHg', ref: [90, 139], v: [112, 115, 118, 116, 120], badge: ['平稳', 'stable'] },
|
||||
dbp: { name: '舒张压', unit: 'mmHg', ref: [60, 89], v: [72, 74, 73, 76, 78], badge: ['平稳', 'stable'] },
|
||||
tc: { name: '总胆固醇 TC', unit: 'mmol/L', ref: [3.1, 5.7], v: [4.62, 4.95, 5.36, 5.78, 6.10], badge: ['恶化趋势', 'worse'] },
|
||||
tg: { name: '甘油三酯 TG', unit: 'mmol/L', ref: [0.4, 1.7], v: [1.20, 1.35, 1.55, 1.72, 2.08], badge: ['恶化趋势', 'worse'] },
|
||||
hdl: { name: '高密度脂蛋白 HDL-C', unit: 'mmol/L', ref: [1.04, 1.55], v: [1.35, 1.30, 1.26, 1.22, 1.18], badge: ['平稳', 'stable'] },
|
||||
ldl: { name: '低密度脂蛋白 LDL-C', unit: 'mmol/L', ref: [0, 3.4], v: [2.80, 3.00, 3.10, 3.35, 3.92], badge: ['新增异常', 'new'] },
|
||||
glu: { name: '空腹血糖 GLU', unit: 'mmol/L', ref: [3.9, 6.1], v: [5.0, 5.1, 4.9, 5.3, 5.2], badge: ['平稳', 'stable'] },
|
||||
hba1c:{ name: '糖化血红蛋白 HbA1c', unit: '%', ref: [4.0, 6.0], v: [5.2, 5.3, 5.1, 5.4, 5.6], badge: ['平稳', 'stable'] },
|
||||
ua: { name: '尿酸 UA', unit: 'μmol/L', ref: [155, 357], v: [330, 362, 371, 380, 389], badge: ['连续异常', 'keep'] },
|
||||
crea: { name: '肌酐 CREA', unit: 'μmol/L', ref: [41, 73], v: [66, 68, 69, 70, 71], badge: ['平稳', 'stable'] },
|
||||
urea: { name: '尿素 UREA', unit: 'mmol/L', ref: [2.8, 7.2], v: [4.5, 5.0, 4.6, 5.2, 4.8], badge: ['平稳', 'stable'] },
|
||||
alt: { name: '丙氨酸氨基转移酶 ALT', unit: 'U/L', ref: [7, 40], v: [28, 31, 35, 42, 24.6], badge: ['转好', 'better'] },
|
||||
ast: { name: '天门冬氨酸氨基转移酶 AST', unit: 'U/L', ref: [13, 35], v: [24, 26, 28, 38, 22.4], badge: ['转好', 'better'] },
|
||||
hgb: { name: '血红蛋白 HGB', unit: 'g/L', ref: [115, 150], v: [140, 138, 141, 139, 136], badge: ['平稳', 'stable'] },
|
||||
wbc: { name: '白细胞计数 WBC', unit: '10^9/L', ref: [3.5, 9.5], v: [6.2, 6.5, 6.1, 6.9, 6.8], badge: ['平稳', 'stable'] },
|
||||
plt: { name: '血小板计数 PLT', unit: '10^9/L', ref: [125, 350], v: [220, 235, 240, 252, 248], badge: ['平稳', 'stable'] }
|
||||
};
|
||||
// 定性项目：statuses 五年逐项状态（n 正常 / a 异常 / m 未检）
|
||||
var QUAL = [
|
||||
{ key: 'us-abdomen', name: '肝胆脾胰双肾彩超', st: ['n', 'a', 'a', 'a', 'a'], desc: '轻度脂肪肝持续 4 年', warn: true },
|
||||
{ key: 'ct-cervical', name: '颈椎 CT', st: ['n', 'n', 'n', 'a', 'a'], desc: '生理曲度变直持续 2 年', warn: true },
|
||||
{ key: 'ecg', name: '心电图', st: ['n', 'n', 'a', 'n', 'n'], desc: '2023 年偶发早搏，后续恢复正常', warn: false },
|
||||
{ key: 'us-thyroid', name: '甲状腺彩超', st: ['n', 'n', 'n', 'n', 'n'], desc: '五年未见异常', warn: false },
|
||||
{ key: 'dr-chest', name: '胸部 DR', st: ['n', 'n', 'n', 'n', 'n'], desc: '五年未见明显异常', warn: false },
|
||||
{ key: 'urine', name: '尿常规', st: ['n', 'n', 'n', 'n', 'n'], desc: '主要指标均为阴性', warn: false }
|
||||
];
|
||||
|
||||
function isAbn(item, vi) { return item.v[vi] < item.ref[0] || item.v[vi] > item.ref[1]; }
|
||||
// 组内排序权重：异常在前，恶化 > 新增 > 连续异常 > 转好 > 平稳
|
||||
function weight(key) {
|
||||
var it = NUM[key], b = it.badge[1];
|
||||
var abn = isAbn(it, 4) ? 0 : 1;
|
||||
var order = { worse: 0, new: 1, keep: 2, better: 3, stable: 4 }[b];
|
||||
return abn * 10 + order;
|
||||
}
|
||||
// 缩略趋势线（纯内联 SVG，异常点标红）
|
||||
function sparkline(item) {
|
||||
var w = 96, h = 34, pad = 5;
|
||||
var min = Math.min.apply(null, item.v), max = Math.max.apply(null, item.v);
|
||||
if (max === min) max = min + 1;
|
||||
var step = (w - pad * 2) / 4;
|
||||
var pts = item.v.map(function (v, i) {
|
||||
return (pad + i * step).toFixed(1) + ',' + (h - pad - (v - min) / (max - min) * (h - pad * 2)).toFixed(1);
|
||||
});
|
||||
var dots = item.v.map(function (v, i) {
|
||||
var cx = pad + i * step, cy = h - pad - (v - min) / (max - min) * (h - pad * 2);
|
||||
return '<circle cx="' + cx.toFixed(1) + '" cy="' + cy.toFixed(1) + '" r="2.6" fill="' + ((v < item.ref[0] || v > item.ref[1]) ? '#ff4d4f' : '#13c2c2') + '"/>';
|
||||
}).join('');
|
||||
return '<svg width="' + w + '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '"><polyline points="' + pts.join(' ') + '" fill="none" stroke="#13c2c2" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>' + dots + '</svg>';
|
||||
}
|
||||
function fmtV(v) { return v >= 100 ? String(Math.round(v)) : String(v); }
|
||||
|
||||
// ===== 渲染数值指标分组（大类折叠卡，默认收起；筛选时自动展开有匹配项的大类）=====
|
||||
var filter = 'all';
|
||||
function renderGroups() {
|
||||
var html = '';
|
||||
CATS.forEach(function (cat) {
|
||||
var keys = cat.keys.slice().sort(function (a, b) { return weight(a) - weight(b); });
|
||||
var abnCount = cat.keys.filter(function (k) { return isAbn(NUM[k], 4); }).length;
|
||||
var cards = '';
|
||||
keys.forEach(function (key) {
|
||||
var it = NUM[key];
|
||||
var abn = isAbn(it, 4);
|
||||
var show = filter === 'all' || (filter === 'abn' && abn) || (filter === 'worse' && it.badge[1] === 'worse') || (filter === 'normal' && !abn);
|
||||
if (!show) return;
|
||||
var arrow = abn ? (it.v[4] > it.ref[1] ? ' ↑' : ' ↓') : '';
|
||||
cards += '<div class="metric-card" data-key="' + key + '" onclick="goDetail(\'' + key + '\')">'
|
||||
+ '<div class="metric-card__top"><span class="metric-card__name">' + it.name + '</span>'
|
||||
+ '<span class="badge badge--' + it.badge[1] + '">' + it.badge[0] + '</span></div>'
|
||||
+ '<div class="metric-card__bottom"><div>'
|
||||
+ '<div class="metric-card__value' + (abn ? ' is-abn' : '') + '">' + fmtV(it.v[4]) + arrow + '<span class="metric-card__unit">' + it.unit + '</span></div>'
|
||||
+ '<div class="metric-card__ref">参考 ' + it.ref[0] + '-' + it.ref[1] + '</div></div>'
|
||||
+ '<div class="metric-card__spark">' + sparkline(it) + '</div>'
|
||||
+ '</div></div>';
|
||||
});
|
||||
if (!cards) return;
|
||||
var collapsed = filter === 'all' ? ' is-collapsed' : '';
|
||||
html += '<div class="cat-group' + collapsed + '">'
|
||||
+ '<div class="cat-group__head" onclick="toggleCat(this)">' + cat.name
|
||||
+ '<small>' + cat.keys.length + ' 项</small>'
|
||||
+ (abnCount ? '<span class="cat-group__abn">异常 ' + abnCount + '</span>' : '')
|
||||
+ '<span class="cat-group__arrow">▾</span></div>'
|
||||
+ '<div class="cat-group__body">' + cards + '</div></div>';
|
||||
});
|
||||
document.getElementById('metricGroups').innerHTML = html || '<div class="metric-card__ref" style="text-align:center;padding:16px 0">该筛选条件下暂无指标</div>';
|
||||
}
|
||||
// [交互] 点击大类头展开/收起该类指标卡
|
||||
function toggleCat(head) { head.parentElement.classList.toggle('is-collapsed'); }
|
||||
// [交互] 筛选 chips 切换
|
||||
function applyFilter(btn) {
|
||||
document.querySelectorAll('.filter-chip').forEach(function (c) { c.classList.remove('is-active'); });
|
||||
btn.classList.add('is-active');
|
||||
filter = btn.getAttribute('data-f');
|
||||
renderGroups();
|
||||
}
|
||||
// [交互] 点击指标卡进入详情页（与报告页行级入口同一目标页）
|
||||
function goDetail(item) { location.href = 'indicator-compare-detail.html?item=' + encodeURIComponent(item); }
|
||||
|
||||
// ===== 渲染定性项目区 =====
|
||||
function renderQual() {
|
||||
var html = '';
|
||||
QUAL.forEach(function (q) {
|
||||
var dots = q.st.map(function (s) { return '<i class="is-' + s + '"></i>'; }).join('');
|
||||
html += '<div class="qual-card" onclick="goDetail(\'' + q.key + '\')">'
|
||||
+ '<div class="qual-card__main"><div class="qual-card__name">' + q.name + '</div>'
|
||||
+ '<div class="qual-card__desc' + (q.warn ? ' is-warn' : '') + '">' + q.desc + '</div></div>'
|
||||
+ '<div class="qual-dots">' + dots + '</div>'
|
||||
+ '<div class="qual-years">21-25</div></div>';
|
||||
});
|
||||
document.getElementById('qualBody').innerHTML = html;
|
||||
}
|
||||
renderGroups();
|
||||
renderQual();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,334 @@
|
||||
<!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;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
}
|
||||
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: #f7f9fb;
|
||||
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: linear-gradient(180deg, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%);
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
.detail-card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
padding: 18px 16px;
|
||||
}
|
||||
.detail-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
/* 消息类型徽标：与列表页一致，本模块统一为「健康体检」 */
|
||||
.detail-card__cat {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
color: #13c2c2;
|
||||
background: #e6fffb;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.detail-card__time { margin-left: auto; font-size: 11px; color: #bfbfbf; }
|
||||
.detail-card__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.detail-card__body p {
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.detail-card__body p:last-child { margin-bottom: 0; }
|
||||
.detail-card__body .kv { color: var(--text-primary); font-weight: 600; }
|
||||
/* AI 预警免责提示：出现在含 AI 分析结果的详情底部 */
|
||||
.ai-notice {
|
||||
margin-top: 16px;
|
||||
background: #fffbe6;
|
||||
border: 1px solid #ffe58f;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.ai-notice__icon { flex-shrink: 0; margin-top: 1px; color: #d48806; }
|
||||
.ai-notice__text { font-size: 11.5px; line-height: 1.7; color: #8c6e1a; }
|
||||
/* 隐秘入口：小号文字链置于免责提示下方右对齐，避免强引导 */
|
||||
.ai-links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 10px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.ai-links a {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.ai-links a:active { color: var(--primary); }
|
||||
/* 通用隐秘入口：非 AI 消息（如报告生成）的文字链跳转，带虚线分隔 */
|
||||
.quiet-links {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-top: 16px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px dashed #f0f0f0;
|
||||
padding-right: 2px;
|
||||
}
|
||||
.quiet-links a {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
.quiet-links a:active { color: var(--primary); }
|
||||
/* 明确动作行：报告/预约类详情的跳转入口 */
|
||||
.action-row {
|
||||
margin-top: 16px;
|
||||
background: #fafbfc;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 12px;
|
||||
padding: 13px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-row:active { background: #f0fbfb; }
|
||||
.action-row__icon { color: var(--primary); margin-right: 8px; display: flex; }
|
||||
.action-row__label { font-size: 14px; font-weight: 600; color: var(--text-primary); }
|
||||
.action-row__arrow { margin-left: auto; color: #bfbfbf; font-size: 16px; }
|
||||
.detail-empty {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
.detail-empty a { color: var(--primary); text-decoration: none; }
|
||||
.bottom-spacer { height: 28px; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: messages.html 消息列表 -->
|
||||
<a class="nav-back" href="messages.html">‹</a>
|
||||
<span class="nav-title">消息详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<div id="detailRoot"></div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* AI 分析结果详情的统一免责提示 */
|
||||
var AI_NOTICE = '以上内容基于您的体检数据，由平台 AI 健康模型自动生成，仅供健康管理参考，不构成医学诊断结论或诊疗建议。如有身体不适或疑问，请及时前往正规医疗机构专科门诊就诊。';
|
||||
|
||||
/* 消息详情数据：id 与列表页一致，ai=true 表示正文含 AI 分析结果 */
|
||||
var MESSAGES = {
|
||||
'report-2026': {
|
||||
time: '今天 10:30',
|
||||
title: '2026年度常规体检报告已生成',
|
||||
paras: [
|
||||
'您本单位的年度常规体检已完成，报告已在线发布。本次体检于 2026-08-27 在市中心医院健康管理中心进行，涵盖内科、外科、检验、超声等 38 个项目。',
|
||||
'报告显示异常指标 6 项：空腹血糖偏高、低密度脂蛋白胆固醇偏高、尿酸偏高、轻度脂肪肝、高密度脂蛋白胆固醇偏低、慢性咽炎。AI 已完成智能解读与近三年趋势对比。',
|
||||
'纸质报告可凭工牌至健康管理中心前台领取，电子报告与纸质版具有同等效力。'
|
||||
],
|
||||
ai: false,
|
||||
links: [{ label: '查看报告详情', url: 'report-query.html?msg=report-2026' }]
|
||||
},
|
||||
'warn-indicator': {
|
||||
time: '今天 10:31',
|
||||
title: 'AI 智能预警：3 项指标较近三年持续上行',
|
||||
paras: [
|
||||
'结合您 2024—2026 年三次体检数据对比，AI 模型识别出以下 3 项代谢指标连续上行，已超或逼近参考上限，慢性病进展风险上升：',
|
||||
'<span class="kv">空腹血糖</span>：5.8 → 6.3 → 6.7 mmol/L（参考 <6.1），已超参考上限，处于糖尿病前期阶段；',
|
||||
'<span class="kv">低密度脂蛋白胆固醇</span>：3.6 → 3.9 → 4.1 mmol/L（参考 <3.4），持续偏高，为动脉粥样硬化独立危险因素；',
|
||||
'<span class="kv">尿酸</span>：487 → 502 → 512 μmol/L（参考 <420），持续超标，与痛风发作及代谢综合征相关。',
|
||||
'建议：3 个月内至专科门诊复查上述三项；日常控制高糖、高脂、高嘌呤饮食，每周中等强度有氧运动合计 150 分钟，并关注体重与腰围变化。'
|
||||
],
|
||||
ai: true,
|
||||
consultName: '高脂血症'
|
||||
},
|
||||
'warn-risk': {
|
||||
time: '今天 10:33',
|
||||
title: '心脑血管疾病 10 年风险：中度偏高',
|
||||
paras: [
|
||||
'基于 pooled cohort equations 风险模型，结合您本年度体检指标与健康档案问卷，AI 评估您未来 10 年发生心脑血管事件的概率为 <span class="kv">12.6%</span>（低危 <5%／中危 5%—10%／高危 ≥10%），属中度偏高风险区间。',
|
||||
'主要贡献因素：血脂谱异常（低密度脂蛋白胆固醇 4.1 mmol/L）、吸烟史 5 年、高血压家族史（父母双方）。',
|
||||
'建议：尽早至心血管内科门诊评估是否需药物干预；戒烟限酒；家庭自测血压每日 1 次；建议加做颈动脉超声与运动负荷心电图检查。'
|
||||
],
|
||||
ai: true,
|
||||
consultName: '冠心病'
|
||||
},
|
||||
'warn-predict': {
|
||||
time: '今天 10:34',
|
||||
title: '未来 6 个月痛风发作风险约 68%',
|
||||
paras: [
|
||||
'结合您近三年尿酸变化趋势（487 → 502 → 512 μmol/L）、饮食习惯问卷（高嘌呤饮食频次 >4 次/周）及 BMI 26.4，AI 模型预测您未来 6 个月痛风急性发作概率约 <span class="kv">68%</span>。',
|
||||
'风险升高触发因素：尿酸持续>540 μmol/L、短期内大量摄入高嘌呤食物或酒精、受凉与剧烈运动。',
|
||||
'建议：每月复查一次尿酸，若复测值 ≥540 μmol/L 请至风湿免疫科评估降尿酸治疗；限制动物内脏、海鲜、啤酒摄入；每日饮水 2000 ml 以上。'
|
||||
],
|
||||
ai: true,
|
||||
consultName: '痛风'
|
||||
},
|
||||
'notice-visit': {
|
||||
time: '08-26 18:00',
|
||||
title: '明日体检到院提醒',
|
||||
paras: [
|
||||
'您预约的体检时间为明日（2026-08-27），请于 7:30—10:30 空腹前往体检中心，采血、腹部超声、碳13 呼气试验为空腹项目。',
|
||||
'注意事项：今晚 20:00 后禁食禁饮，避免熬夜与饮酒；高血压患者可用少量清水照常服药；着宽松无金属扣衣物；携带本人身份证与体检通知单。'
|
||||
],
|
||||
ai: false,
|
||||
action: { label: '查看预约详情', url: 'my-appointments-all.html' }
|
||||
},
|
||||
'report-2025': {
|
||||
time: '2025-09-15',
|
||||
title: '2025年度体检报告已生成',
|
||||
paras: [
|
||||
'您的 2025 年度体检报告已生成，报告包含 32 个项目，其中 3 项指标异常。可查看完整报告及历年指标对比。'
|
||||
],
|
||||
ai: false,
|
||||
links: [{ label: '查看报告详情', url: 'report-query.html?msg=report-2025' }]
|
||||
}
|
||||
};
|
||||
|
||||
(function () {
|
||||
var id = new URLSearchParams(location.search).get('id');
|
||||
var msg = MESSAGES[id];
|
||||
var root = document.getElementById('detailRoot');
|
||||
if (!msg) {
|
||||
root.innerHTML = '<div class="detail-empty">消息不存在或已删除<br><br><a href="messages.html">返回消息列表</a></div>';
|
||||
return;
|
||||
}
|
||||
/* 进入详情即标记已读（与列表页共用 sessionStorage 键，标签页会话内有效） */
|
||||
var READ_KEY = 'hc_msg_read_v1';
|
||||
try {
|
||||
var s = JSON.parse(sessionStorage.getItem(READ_KEY)) || [];
|
||||
if (s.indexOf(id) < 0) { s.push(id); sessionStorage.setItem(READ_KEY, JSON.stringify(s)); }
|
||||
} catch (e) {}
|
||||
|
||||
document.title = msg.title;
|
||||
var html = '<div class="detail-card">';
|
||||
html += '<div class="detail-card__top"><span class="detail-card__cat">健康体检</span><span class="detail-card__time">' + msg.time + '</span></div>';
|
||||
html += '<div class="detail-card__title">' + msg.title + '</div>';
|
||||
html += '<div class="detail-card__body">';
|
||||
msg.paras.forEach(function (p) { html += '<p>' + p + '</p>'; });
|
||||
html += '</div>';
|
||||
|
||||
if (msg.ai) {
|
||||
/* [交互] 查看报告详情/快速咨询跳转，携带 msg 参数：目标页返回时回到本消息详情 */
|
||||
var consultUrl = '../health-consult/expert-list.html?type=disease&name=' + encodeURIComponent(msg.consultName || '') + '&msg=' + id;
|
||||
html += '<div class="ai-notice">'
|
||||
+ '<span class="ai-notice__icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>'
|
||||
+ '<span class="ai-notice__text">' + AI_NOTICE + '</span></div>';
|
||||
html += '<div class="ai-links">'
|
||||
+ '<a href="report-query.html?msg=' + id + '">查看报告详情 ›</a>'
|
||||
+ '<a href="' + consultUrl + '">快速咨询 ›</a>'
|
||||
+ '</div>';
|
||||
}
|
||||
if (msg.links) {
|
||||
/* [交互] 隐秘文字链入口：携带 msg 参数，目标页返回时回到本消息详情 */
|
||||
html += '<div class="quiet-links">'
|
||||
+ msg.links.map(function (l) { return '<a href="' + l.url + '">' + l.label + ' ›</a>'; }).join('')
|
||||
+ '</div>';
|
||||
}
|
||||
if (msg.action) {
|
||||
/* [交互] 明确动作跳转: {msg.action.url} */
|
||||
html += '<a class="action-row" href="' + msg.action.url + '">'
|
||||
+ '<span class="action-row__icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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></span>'
|
||||
+ '<span class="action-row__label">' + msg.action.label + '</span>'
|
||||
+ '<span class="action-row__arrow">›</span></a>';
|
||||
}
|
||||
html += '</div>';
|
||||
root.innerHTML = html;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!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;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
}
|
||||
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: #f7f9fb;
|
||||
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: linear-gradient(180deg, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%);
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
.msg-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.msg {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border: 1px solid #f0f0f0;
|
||||
box-shadow: 0 4px 14px rgba(0,0,0,0.05);
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
.msg:active { transform: scale(0.985); }
|
||||
.msg__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
background: #e6fffb;
|
||||
color: var(--primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
/* 未读红点：叠在类型图标右上角 */
|
||||
.msg--unread .msg__icon::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #ff4d4f;
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
.msg__body { flex: 1; min-width: 0; }
|
||||
.msg__top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
|
||||
/* 消息类型徽标：本模块统一为「健康体检」，其他模块可能出现其他类型 */
|
||||
.msg__cat {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 9px;
|
||||
flex-shrink: 0;
|
||||
color: #13c2c2;
|
||||
background: #e6fffb;
|
||||
}
|
||||
.msg__time { margin-left: auto; font-size: 11px; color: #bfbfbf; flex-shrink: 0; }
|
||||
.msg__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/* 已读样式：无红点、卡片淡化、文字转灰 */
|
||||
.msg--read { background: #fafbfc; box-shadow: none; }
|
||||
.msg--read .msg__title { color: var(--text-muted); font-weight: 500; }
|
||||
.msg--read .msg__icon { opacity: 0.55; }
|
||||
.bottom-spacer { height: 28px; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回: index.html -->
|
||||
<a class="nav-back" href="index.html">‹</a>
|
||||
<span class="nav-title">消息</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<div class="msg-list">
|
||||
<!-- 未读 | [交互] 点击跳转至: message-detail.html?id=report-2026，同时自动标记为已读 -->
|
||||
<div class="msg msg--unread" data-id="report-2026" onclick="openMsg('report-2026')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">今天 10:30</span>
|
||||
</div>
|
||||
<div class="msg__title">2026年度常规体检报告已生成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-indicator -->
|
||||
<div class="msg msg--unread" data-id="warn-indicator" onclick="openMsg('warn-indicator')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">今天 10:31</span>
|
||||
</div>
|
||||
<div class="msg__title">体检指标异常预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-risk -->
|
||||
<div class="msg msg--unread" data-id="warn-risk" onclick="openMsg('warn-risk')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">今天 10:33</span>
|
||||
</div>
|
||||
<div class="msg__title">心脑血管疾病风险预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 未读 | [交互] 点击跳转至: message-detail.html?id=warn-predict -->
|
||||
<div class="msg msg--unread" data-id="warn-predict" onclick="openMsg('warn-predict')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">今天 10:34</span>
|
||||
</div>
|
||||
<div class="msg__title">防范痛风发作风险预警</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已读 | [交互] 点击跳转至: message-detail.html?id=notice-visit -->
|
||||
<div class="msg msg--read" data-id="notice-visit" onclick="openMsg('notice-visit')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">08-26 18:00</span>
|
||||
</div>
|
||||
<div class="msg__title">明日体检到院提醒</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已读 | [交互] 点击跳转至: message-detail.html?id=report-2025 -->
|
||||
<div class="msg msg--read" data-id="report-2025" onclick="openMsg('report-2025')">
|
||||
<div class="msg__icon">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="msg__body">
|
||||
<div class="msg__top">
|
||||
<span class="msg__cat">健康体检</span>
|
||||
<span class="msg__time">2025-09-15</span>
|
||||
</div>
|
||||
<div class="msg__title">2025年度体检报告已生成</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* 已读状态用 sessionStorage：同一标签页内「点击→返回红点消失」联动保留；
|
||||
新标签页重新打开则恢复全部未读（原型演示友好，不留永久痕迹） */
|
||||
var READ_KEY = 'hc_msg_read_v1';
|
||||
function getReadSet() {
|
||||
try { return JSON.parse(sessionStorage.getItem(READ_KEY)) || []; }
|
||||
catch (e) { return []; }
|
||||
}
|
||||
function openMsg(id) {
|
||||
var s = getReadSet();
|
||||
if (s.indexOf(id) < 0) {
|
||||
s.push(id);
|
||||
sessionStorage.setItem(READ_KEY, JSON.stringify(s));
|
||||
}
|
||||
/* [交互] 跳转至: message-detail.html?id={消息ID} */
|
||||
location.href = 'message-detail.html?id=' + id;
|
||||
}
|
||||
/* 页面加载时同步已读态（从详情页返回后红点即时消失） */
|
||||
(function () {
|
||||
var s = getReadSet();
|
||||
document.querySelectorAll('.msg[data-id]').forEach(function (el) {
|
||||
if (s.indexOf(el.getAttribute('data-id')) >= 0) {
|
||||
el.classList.remove('msg--unread');
|
||||
el.classList.add('msg--read');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,19 +10,17 @@
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-bg: #f6ffed;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--warning-bg: #fff7e6;
|
||||
--warning-text: #fa8c16;
|
||||
--danger-bg: #fff1f0;
|
||||
--danger-text: #ff4d4f;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--border: #e8f3f3;
|
||||
--shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
body {
|
||||
background: var(--bg-page);
|
||||
@@ -35,80 +33,352 @@
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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); }
|
||||
.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);
|
||||
}
|
||||
/* 右上角圆形演示下拉 */
|
||||
.demo-select {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 50;
|
||||
}
|
||||
.demo-select__trigger {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(19, 194, 194, 0.35);
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.demo-select__menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 34px;
|
||||
width: 128px;
|
||||
background: #fff;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 12px 32px rgba(0,0,0,0.14);
|
||||
padding: 6px;
|
||||
}
|
||||
.demo-select__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
.demo-select__item:hover { background: #f5f7fa; }
|
||||
.demo-select__item--active { color: var(--primary-dark); font-weight: 700; background: var(--primary-light); }
|
||||
.demo-select__item .check { visibility: hidden; font-size: 12px; }
|
||||
.demo-select__item--active .check { visibility: visible; }
|
||||
.scroll-content {
|
||||
flex: 1; overflow-y: auto;
|
||||
background: linear-gradient(180deg, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
|
||||
padding: 14px 16px 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding: 14px 16px 24px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tabs {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
|
||||
background: rgba(255,255,255,0.92); border-radius: 18px;
|
||||
/* 顶部体检类型 Tab */
|
||||
.type-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
padding: 5px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
|
||||
position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
|
||||
margin-bottom: 14px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.tabs__item {
|
||||
height: 36px; border: none; border-radius: 14px; background: transparent;
|
||||
.type-tabs__btn {
|
||||
height: 38px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
.type-tabs__btn--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.summary-card, .info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
|
||||
.summary-list, .info-list { display: flex; flex-direction: column; gap: 14px; }
|
||||
.summary-item, .info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label, .info-item__label { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
|
||||
.summary-item__value, .info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
/* 签到码卡片 */
|
||||
.person-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4f7f5;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.person-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.code-switch {
|
||||
width: 28px; height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e4f7f5;
|
||||
background: #f2fbfa;
|
||||
color: var(--primary-dark);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.code-switch:active { background: var(--primary-light); }
|
||||
.qrcode-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
|
||||
.code-img {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #eef5f5;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.code-img:hover { transform: scale(1.04); }
|
||||
.code-img--qr { width: 160px; height: 160px; }
|
||||
.code-img--bar { width: 224px; height: 132px; }
|
||||
.qrcode-wrap__hint { font-size: 12px; color: var(--text-muted); }
|
||||
/* 条形码/二维码互斥显隐 */
|
||||
.person-card .code-only--bar { display: flex; }
|
||||
.person-card .code-only--qr { display: none; }
|
||||
.person-card--qr .code-only--bar { display: none; }
|
||||
.person-card--qr .code-only--qr { display: flex; }
|
||||
/* 放大遮罩 */
|
||||
.qr-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qr-overlay--visible { display: flex; }
|
||||
.qr-overlay__img--qr { width: 260px; height: 260px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); background:#fff; }
|
||||
.qr-overlay__img--bar { width: 300px; height: 176px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); background:#fff; }
|
||||
/* 体检须知 */
|
||||
.tips-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef5f5;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.tips-card__title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
|
||||
.tips-card__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tips-card__item:last-child { margin-bottom: 0; }
|
||||
.tips-card__dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--primary); margin-top: 8px; flex-shrink: 0;
|
||||
}
|
||||
/* 体检进度 */
|
||||
.progress-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.progress-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||||
.progress-card__title { font-size: 16px; font-weight: 700; }
|
||||
.progress-card__ratio { font-size: 13px; color: var(--primary-dark); font-weight: 600; }
|
||||
.progress-bar-lg {
|
||||
height: 10px; border-radius: 999px; background: #eef3f3;
|
||||
overflow: hidden; margin-bottom: 16px;
|
||||
}
|
||||
.progress-bar-lg__fill {
|
||||
height: 100%; border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.project-tabs {
|
||||
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
|
||||
}
|
||||
.project-tabs__btn {
|
||||
height: 34px; border: none; border-radius: 12px; background: #f5f7fa;
|
||||
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.tabs__item--active {
|
||||
.project-tabs__btn--active {
|
||||
background: var(--primary-light); color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.summary-bar {
|
||||
margin: 14px 0 12px; padding: 16px; border-radius: 20px;
|
||||
.project-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.project-item {
|
||||
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
|
||||
border-radius: 14px; background: #f9fbfb; border: 1px solid #f0f5f5;
|
||||
}
|
||||
.project-item__icon {
|
||||
width: 28px; height: 28px; border-radius: 8px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0; font-size: 14px;
|
||||
}
|
||||
.project-item__icon--done { background: var(--success-light); color: var(--success-text); }
|
||||
.project-item__icon--pending { background: #fff7e6; color: var(--warning-text); }
|
||||
.project-item__name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text-primary); }
|
||||
.project-item__status { font-size: 12px; font-weight: 600; }
|
||||
.project-item__status--done { color: var(--success-text); }
|
||||
.project-item__status--pending { color: var(--warning-text); }
|
||||
/* 已选体检项目（取消详情） */
|
||||
.project-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
|
||||
.project-section__count { font-size: 13px; color: var(--text-muted); }
|
||||
.project-section__count em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
|
||||
.fee-tabs {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
|
||||
padding: 5px; background: #f5f7f7; border-radius: 14px; margin-bottom: 14px;
|
||||
}
|
||||
.fee-tab {
|
||||
height: 34px; border: none; border-radius: 10px; background: transparent;
|
||||
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.fee-tab--active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
|
||||
.project-list-panel { max-height: 280px; overflow-y: auto; padding-right: 2px; }
|
||||
.project-list-panel::-webkit-scrollbar { display: none; }
|
||||
.picked-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 14px;
|
||||
background: #f9fbfb; border-radius: 14px; border: 1px solid #eef5f5;
|
||||
}
|
||||
.picked-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }
|
||||
.picked-item__info { flex: 1; }
|
||||
.picked-item__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
||||
.picked-item__desc { font-size: 12px; color: var(--text-muted); }
|
||||
.picked-item__price { font-size: 13px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; }
|
||||
.picked-item__badge {
|
||||
display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
|
||||
border-radius: 10px; font-size: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.picked-item__badge--normal { background: #f5f5f5; color: var(--text-muted); }
|
||||
.picked-item__badge--key { background: #fff1f0; color: #ff4d4f; }
|
||||
/* 底部操作按钮（重新预约/立即预约） */
|
||||
.rebook-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
margin-top: 16px;
|
||||
border: none;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
|
||||
box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
|
||||
cursor: pointer;
|
||||
}
|
||||
.summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||||
.summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
|
||||
.appointment-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.appointment-card {
|
||||
background: #fff; border-radius: 20px; padding: 16px;
|
||||
border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow);
|
||||
/* 无预约信息空态 */
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 64px 24px 40px;
|
||||
}
|
||||
.appointment-card[data-status="done"],
|
||||
.appointment-card[data-status="cancelled"] { opacity: 0.94; }
|
||||
.appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
||||
.appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
|
||||
.appointment-card__status--pending { background: var(--warning-bg); color: var(--warning-text); }
|
||||
.appointment-card__status--done { background: var(--success-bg); color: var(--success-text); }
|
||||
.appointment-card__status--cancelled { background: var(--danger-bg); color: var(--danger-text); }
|
||||
.appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
|
||||
.meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
|
||||
.meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
|
||||
.meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
|
||||
.appointment-card__progress { margin-bottom: 14px; }
|
||||
.progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
|
||||
.progress-bar { height: 8px; border-radius: 999px; background: #eef3f3; overflow: hidden; }
|
||||
.progress-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%); }
|
||||
.appointment-card__actions { display: flex; gap: 10px; }
|
||||
.appointment-card__btn {
|
||||
flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
|
||||
}
|
||||
.appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
|
||||
.appointment-card__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff; box-shadow: 0 8px 20px rgba(19, 194, 194, 0.18);
|
||||
.empty__icon {
|
||||
width: 88px; height: 88px; border-radius: 50%;
|
||||
background: #fff; box-shadow: var(--shadow);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.empty__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
|
||||
.empty__desc { font-size: 13px; color: var(--text-muted); line-height: 1.7; margin-bottom: 22px; max-width: 260px; }
|
||||
.hidden { display: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -120,81 +390,493 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" href="index.html">‹</a>
|
||||
<!-- [交互] 点击返回至: index.html -->
|
||||
<a class="nav-back" href="index.html">‹</a>
|
||||
<span class="nav-title">我的预约</span>
|
||||
<!-- [交互] 演示专用：点击展开状态下拉，切换查看各状态详情 -->
|
||||
<div class="demo-select">
|
||||
<button class="demo-select__trigger" type="button" id="demoTrigger" onclick="toggleDemoMenu(event)">
|
||||
演示
|
||||
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
|
||||
</button>
|
||||
<div class="demo-select__menu hidden" id="demoMenu">
|
||||
<div class="demo-select__item demo-select__item--active" data-status="pending" onclick="setDemoStatus('pending')">待体检<span class="check">✓</span></div>
|
||||
<div class="demo-select__item" data-status="cancelled" onclick="setDemoStatus('cancelled')">已取消<span class="check">✓</span></div>
|
||||
<div class="demo-select__item" data-status="done" onclick="setDemoStatus('done')">已完成<span class="check">✓</span></div>
|
||||
<div class="demo-select__item" data-status="none" onclick="setDemoStatus('none')">无预约信息<span class="check">✓</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="tabs">
|
||||
<a class="tabs__item tabs__item--active" href="my-appointments-all.html">全部</a>
|
||||
<a class="tabs__item" href="my-appointments.html">待体检</a>
|
||||
<a class="tabs__item" href="my-appointments-done.html">已体检</a>
|
||||
<a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
|
||||
<!-- [交互] 点击切换 常规体检/胃肠镜体检 详情 -->
|
||||
<div class="type-tabs">
|
||||
<button class="type-tabs__btn type-tabs__btn--active" type="button" id="tabRoutine" onclick="setType('routine')">常规体检</button>
|
||||
<button class="type-tabs__btn" type="button" id="tabGastro" onclick="setType('gastro')">胃肠镜体检</button>
|
||||
</div>
|
||||
|
||||
<div class="appointment-list">
|
||||
<!-- 待体检 -->
|
||||
<div class="appointment-card" data-status="pending">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--pending">待体检</div>
|
||||
<!-- ======================= 常规体检 · 待体检 ======================= -->
|
||||
<div class="panel" data-type="routine" data-status="pending">
|
||||
<div class="person-card" id="codeRoutine">
|
||||
<div class="person-card__header">
|
||||
<div class="section-title" style="margin-bottom:0">体检签到码</div>
|
||||
<!-- [交互] 点击右上角小图标切换条形码/二维码 -->
|
||||
<button class="code-switch" type="button" title="切换条形码/二维码" onclick="toggleCodeMode('codeRoutine')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
|
||||
<div class="qrcode-wrap code-only--bar">
|
||||
<!-- [交互] 点击条码放大展示 -->
|
||||
<svg class="code-img code-img--bar" onclick="openCodeOverlay('codeRoutine')" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="110" fill="#fff"/>
|
||||
<rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
|
||||
<text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">TJ2026032300871</text>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击条码可放大查看</span>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head"><span>体检进度</span><span>5/26</span></div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 19.2%;"></div></div>
|
||||
<div class="qrcode-wrap code-only--qr">
|
||||
<!-- [交互] 点击二维码放大展示 -->
|
||||
<svg class="code-img code-img--qr" onclick="openCodeOverlay('codeRoutine')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击二维码可放大查看</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 已体检 -->
|
||||
<div class="appointment-card" data-status="done">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--done">已体检</div>
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#fa8c16;">待体检</div></div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head"><span>体检进度</span><span>26/26</span></div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- 已取消 -->
|
||||
<div class="appointment-card" data-status="cancelled">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">胃肠镜体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio" id="rProgRatio">5 / 26 项</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-10</div></div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="rProgFill" style="width: 19.2%;"></div></div>
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="rTabDone" onclick="switchProg('r',0)">已检项目 (5)</button>
|
||||
<button class="project-tabs__btn" type="button" id="rTabPending" onclick="switchProg('r',1)">未检项目 (21)</button>
|
||||
</div>
|
||||
|
||||
<div class="project-list" id="rProgDoneList"></div>
|
||||
<div class="project-list hidden" id="rProgPendingList"></div>
|
||||
</div>
|
||||
<!-- 待体检 -->
|
||||
<div class="appointment-card" data-status="pending">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--pending">待体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head"><span>体检进度</span><span>0/26</span></div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 常规体检 · 已完成 ======================= -->
|
||||
<div class="panel hidden" data-type="routine" data-status="done">
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#52c41a;">已体检</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio">26 / 26 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 100%;"></div></div>
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="rdTabDone" onclick="switchProg('rd',0)">已检项目 (26)</button>
|
||||
<button class="project-tabs__btn" type="button" id="rdTabPending" onclick="switchProg('rd',1)">未检项目 (0)</button>
|
||||
</div>
|
||||
<div class="project-list" id="rdProgDoneList"></div>
|
||||
<div class="project-list hidden" id="rdProgPendingList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 常规体检 · 已取消 ======================= -->
|
||||
<div class="panel hidden" data-type="routine" data-status="cancelled">
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">预约日期</div><div class="summary-item__value">2026-03-23</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">张旭</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">单位部门</div><div class="summary-item__value">采油一厂·xx作业区</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="project-section__header">
|
||||
<div class="section-title" style="margin-bottom:0">已选体检项目</div>
|
||||
<span class="project-section__count">共 <em>14</em> 项</span>
|
||||
</div>
|
||||
<!-- [交互] 点击切换自选项目/必检项目 -->
|
||||
<div class="fee-tabs">
|
||||
<button class="fee-tab fee-tab--active" type="button" id="rcTabOptional" onclick="switchPicked('optional')">自选项目(6)</button>
|
||||
<button class="fee-tab" type="button" id="rcTabRequired" onclick="switchPicked('required')">必检项目(8)</button>
|
||||
</div>
|
||||
<div class="project-list-panel">
|
||||
<div class="project-list" id="rcPickedList"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: booking-type.html（重新走常规体检预约流程） -->
|
||||
<button class="rebook-btn" type="button" onclick="location.href='booking-type.html'">重新预约</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 常规体检 · 无预约信息 ======================= -->
|
||||
<div class="panel hidden" data-type="routine" data-status="none">
|
||||
<div class="empty">
|
||||
<div class="empty__icon">
|
||||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.6"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18"/><path d="M8 2v4M16 2v4"/><path d="M9 15l2.2 2.2L15 13.5"/></svg>
|
||||
</div>
|
||||
<div class="empty__title">暂无常规体检预约</div>
|
||||
<div class="empty__desc">您还没有预约本年度常规体检，预约成功后可在此查看预约详情、体检进度与签到码。</div>
|
||||
<!-- [交互] 点击跳转至: booking-type.html（进入常规体检预约流程） -->
|
||||
<button class="rebook-btn" style="width:auto;padding:0 40px;" type="button" onclick="location.href='booking-type.html'">立即预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 胃肠镜体检 · 待体检 ======================= -->
|
||||
<div class="panel hidden" data-type="gastro" data-status="pending">
|
||||
<div class="person-card" id="codeGastro">
|
||||
<div class="person-card__header">
|
||||
<div class="section-title" style="margin-bottom:0">体检签到码</div>
|
||||
<!-- [交互] 点击右上角小图标切换条形码/二维码 -->
|
||||
<button class="code-switch" type="button" title="切换条形码/二维码" onclick="toggleCodeMode('codeGastro')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="qrcode-wrap code-only--bar">
|
||||
<!-- [交互] 点击条码放大展示 -->
|
||||
<svg class="code-img code-img--bar" onclick="openCodeOverlay('codeGastro')" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="200" height="110" fill="#fff"/>
|
||||
<rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
|
||||
<text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">WC2026032300642</text>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击条码可放大查看</span>
|
||||
</div>
|
||||
<div class="qrcode-wrap code-only--qr">
|
||||
<!-- [交互] 点击二维码放大展示 -->
|
||||
<svg class="code-img code-img--qr" onclick="openCodeOverlay('codeGastro')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击二维码可放大查看</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="summary-card">
|
||||
<div class="section-title">胃肠镜体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#fa8c16;">待体检</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips-card">
|
||||
<div class="tips-card__title">体检须知</div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前3天请清淡饮食，避免高纤维、高脂肪食物。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前一天晚上需服用肠道清洁剂，具体用法请遵医嘱。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查当天需空腹，禁食禁水至少8小时。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>请携带本人身份证件按时前往医院。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若选择无痛胃肠镜，检查后24小时内请勿驾车。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
|
||||
</div>
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio">0 / 2 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 0%;"></div></div>
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs">
|
||||
<button class="project-tabs__btn" type="button" id="gTabDone" onclick="switchProg('g',0)">已检项目 (0)</button>
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="gTabPending" onclick="switchProg('g',1)">未检项目 (2)</button>
|
||||
</div>
|
||||
<div class="project-list hidden" id="gProgDoneList"></div>
|
||||
<div class="project-list" id="gProgPendingList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 胃肠镜体检 · 已完成 ======================= -->
|
||||
<div class="panel hidden" data-type="gastro" data-status="done">
|
||||
<div class="summary-card">
|
||||
<div class="section-title">胃肠镜体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#52c41a;">已体检</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio">2 / 2 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" style="width: 100%;"></div></div>
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="gdTabDone" onclick="switchProg('gd',0)">已检项目 (2)</button>
|
||||
<button class="project-tabs__btn" type="button" id="gdTabPending" onclick="switchProg('gd',1)">未检项目 (0)</button>
|
||||
</div>
|
||||
<div class="project-list" id="gdProgDoneList"></div>
|
||||
<div class="project-list hidden" id="gdProgPendingList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 胃肠镜体检 · 已取消 ======================= -->
|
||||
<div class="panel hidden" data-type="gastro" data-status="cancelled">
|
||||
<div class="summary-card">
|
||||
<div class="section-title">胃肠镜体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item"><div class="summary-item__label">体检医院</div><div class="summary-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检员工</div><div class="summary-item__value">刘韵琴</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检地址</div><div class="summary-item__value">银川市西夏区怀远路148号</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检日期</div><div class="summary-item__value">2026年3月23日</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">体检项目</div><div class="summary-item__value">胃肠镜体检</div></div>
|
||||
<div class="summary-item"><div class="summary-item__label">状态</div><div class="summary-item__value" style="color:#ff4d4f;">已取消</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: gastro-hospital.html（重新走胃肠镜预约流程） -->
|
||||
<button class="rebook-btn" type="button" onclick="location.href='gastro-hospital.html'">重新预约</button>
|
||||
</div>
|
||||
|
||||
<!-- ======================= 胃肠镜体检 · 无预约信息 ======================= -->
|
||||
<div class="panel hidden" data-type="gastro" data-status="none">
|
||||
<div class="empty">
|
||||
<div class="empty__icon">
|
||||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#bfbfbf" stroke-width="1.6"><rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18"/><path d="M8 2v4M16 2v4"/><path d="M9 15l2.2 2.2L15 13.5"/></svg>
|
||||
</div>
|
||||
<div class="empty__title">暂无胃肠镜体检预约</div>
|
||||
<div class="empty__desc">您还没有预约胃肠镜体检，预约成功后可在此查看预约详情、体检须知与签到码。</div>
|
||||
<!-- [交互] 点击跳转至: gastro-hospital.html（进入胃肠镜预约流程） -->
|
||||
<button class="rebook-btn" style="width:auto;padding:0 40px;" type="button" onclick="location.href='gastro-hospital.html'">立即预约</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 签到码放大遮罩 -->
|
||||
<div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
|
||||
<div onclick="event.stopPropagation()">
|
||||
<svg class="qr-overlay__img--bar" id="ovlBarcode" viewBox="0 0 200 110" xmlns="http://www.w3.org/2000/svg" style="display:none;">
|
||||
<rect width="200" height="110" fill="#fff"/>
|
||||
<rect x="10" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="16" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="20" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="25" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="32" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="36" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="41" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="45" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="50" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="54" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="58" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="65" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="69" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="74" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="78" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="83" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="87" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="94" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="98" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="102" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="107" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="111" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="118" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="122" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="126" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="131" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="136" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="140" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="147" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="151" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="155" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="160" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="164" y="10" width="2.5" height="72" fill="#1a1a1a"/><rect x="169" y="10" width="4" height="72" fill="#1a1a1a"/><rect x="176" y="10" width="1.5" height="72" fill="#1a1a1a"/><rect x="180" y="10" width="2" height="72" fill="#1a1a1a"/><rect x="184" y="10" width="3" height="72" fill="#1a1a1a"/><rect x="189" y="10" width="2.5" height="72" fill="#1a1a1a"/>
|
||||
<text x="100" y="97" text-anchor="middle" font-size="10" font-family="monospace" fill="#666">签到码编号</text>
|
||||
</svg>
|
||||
<svg class="qr-overlay__img--qr" id="ovlQr" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg" style="display:none;">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ===== 视图状态：体检类型 × 预约状态 =====
|
||||
var currentType = 'routine';
|
||||
var currentStatus = 'pending';
|
||||
|
||||
function applyView() {
|
||||
var panels = document.querySelectorAll('.panel');
|
||||
for (var i = 0; i < panels.length; i++) {
|
||||
var p = panels[i];
|
||||
var show = p.dataset.type === currentType && p.dataset.status === currentStatus;
|
||||
p.classList.toggle('hidden', !show);
|
||||
}
|
||||
}
|
||||
|
||||
// [交互] Tab 切换体检类型
|
||||
function setType(type) {
|
||||
currentType = type;
|
||||
document.getElementById('tabRoutine').classList.toggle('type-tabs__btn--active', type === 'routine');
|
||||
document.getElementById('tabGastro').classList.toggle('type-tabs__btn--active', type === 'gastro');
|
||||
applyView();
|
||||
}
|
||||
|
||||
// [交互] 演示下拉：切换预约状态
|
||||
function toggleDemoMenu(e) {
|
||||
e.stopPropagation();
|
||||
document.getElementById('demoMenu').classList.toggle('hidden');
|
||||
}
|
||||
function setDemoStatus(status) {
|
||||
currentStatus = status;
|
||||
var items = document.querySelectorAll('.demo-select__item');
|
||||
for (var i = 0; i < items.length; i++) {
|
||||
items[i].classList.toggle('demo-select__item--active', items[i].dataset.status === status);
|
||||
}
|
||||
document.getElementById('demoMenu').classList.add('hidden');
|
||||
applyView();
|
||||
}
|
||||
document.addEventListener('click', function(e) {
|
||||
var menu = document.getElementById('demoMenu');
|
||||
if (!menu.classList.contains('hidden') && !e.target.closest('.demo-select')) {
|
||||
menu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// ===== 签到码：条形码 ↔ 二维码切换 =====
|
||||
// [交互] 点击右上角小图标切换条形码/二维码，默认条形码
|
||||
function toggleCodeMode(cardId) {
|
||||
document.getElementById(cardId).classList.toggle('person-card--qr');
|
||||
}
|
||||
// [交互] 点击签到码放大查看（遮罩跟随当前类型）
|
||||
function openCodeOverlay(cardId) {
|
||||
var isQr = document.getElementById(cardId).classList.contains('person-card--qr');
|
||||
document.getElementById('ovlQr').style.display = isQr ? 'block' : 'none';
|
||||
document.getElementById('ovlBarcode').style.display = isQr ? 'none' : 'block';
|
||||
document.getElementById('qrOverlay').classList.add('qr-overlay--visible');
|
||||
}
|
||||
|
||||
// ===== 体检进度（已检/未检 Tab） =====
|
||||
var ROUTINE_PROJECTS = [
|
||||
'一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
|
||||
'血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
|
||||
'甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
|
||||
'甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
|
||||
'骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
|
||||
];
|
||||
var GASTRO_PROJECTS = ['胃镜检查', '肠镜检查'];
|
||||
|
||||
function renderItem(name, isDone) {
|
||||
return '<div class="project-item">' +
|
||||
'<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '✓' : '●') + '</div>' +
|
||||
'<div class="project-item__name">' + name + '</div>' +
|
||||
'<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '已体检' : '未检') + '</div></div>';
|
||||
}
|
||||
|
||||
// 按前缀填充某面板的已检/未检列表
|
||||
function fillProgress(prefix, projects, doneCount) {
|
||||
var doneList = projects.slice(0, doneCount);
|
||||
var pendingList = projects.slice(doneCount);
|
||||
document.getElementById(prefix + 'ProgDoneList').innerHTML =
|
||||
doneList.length ? doneList.map(function(n) { return renderItem(n, true); }).join('')
|
||||
: '<div class="project-item"><div class="project-item__icon project-item__icon--pending">●</div><div class="project-item__name">暂无已检项目</div></div>';
|
||||
document.getElementById(prefix + 'ProgPendingList').innerHTML =
|
||||
pendingList.length ? pendingList.map(function(n) { return renderItem(n, false); }).join('')
|
||||
: '<div class="project-item"><div class="project-item__icon project-item__icon--done">✓</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
|
||||
document.getElementById(prefix + 'TabDone').textContent = '已检项目 (' + doneCount + ')';
|
||||
document.getElementById(prefix + 'TabPending').textContent = '未检项目 (' + pendingList.length + ')';
|
||||
}
|
||||
|
||||
function switchProg(prefix, idx) {
|
||||
var done = document.getElementById(prefix + 'TabDone');
|
||||
var pending = document.getElementById(prefix + 'TabPending');
|
||||
done.classList.toggle('project-tabs__btn--active', idx === 0);
|
||||
pending.classList.toggle('project-tabs__btn--active', idx === 1);
|
||||
document.getElementById(prefix + 'ProgDoneList').classList.toggle('hidden', idx !== 0);
|
||||
document.getElementById(prefix + 'ProgPendingList').classList.toggle('hidden', idx !== 1);
|
||||
}
|
||||
|
||||
// ===== 已取消详情：已选体检项目（自选/必检） =====
|
||||
var PICKED_PROJECTS = [
|
||||
{ name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
|
||||
{ name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
|
||||
{ name: '尿常规', desc: '尿蛋白、尿糖、尿潜血等', price: 45, type: 'required', level: 'normal' },
|
||||
{ name: '肝功能', desc: 'ALT、AST、总胆红素等', price: 160, type: 'required', level: 'key' },
|
||||
{ name: '肾功能', desc: '肌酐、尿素氮、尿酸等', price: 110, type: 'required', level: 'key' },
|
||||
{ name: '血脂四项', desc: '总胆固醇、甘油三酯、HDL、LDL', price: 90, type: 'required', level: 'normal' },
|
||||
{ name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
|
||||
{ name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
|
||||
{ name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
|
||||
{ name: '腹部彩超', desc: '肝胆脾胰肾彩色超声', price: 180, type: 'optional', level: 'key' },
|
||||
{ name: '甲状腺彩超', desc: '甲状腺彩色多普勒超声', price: 150, type: 'optional', level: 'key' },
|
||||
{ name: '肿瘤标志物', desc: 'AFP、CEA、CA199等', price: 280, type: 'optional', level: 'key' },
|
||||
{ name: '幽门螺杆菌', desc: 'C14呼气试验', price: 120, type: 'optional', level: 'normal' },
|
||||
{ name: '骨密度检测', desc: '超声骨密度检测', price: 100, type: 'optional', level: 'normal' }
|
||||
];
|
||||
|
||||
function renderPicked(activeTab) {
|
||||
var list = PICKED_PROJECTS.filter(function(item) { return item.type === activeTab; });
|
||||
document.getElementById('rcPickedList').innerHTML = list.map(function(item) {
|
||||
var badgeText = item.level === 'key' ? '重点' : '一般';
|
||||
var badgeClass = item.level === 'key' ? 'picked-item__badge--key' : 'picked-item__badge--normal';
|
||||
return '<div class="picked-item">' +
|
||||
'<div class="picked-item__dot"></div>' +
|
||||
'<div class="picked-item__info"><div class="picked-item__name">' + item.name + '</div>' +
|
||||
'<div class="picked-item__desc">' + item.desc + '</div></div>' +
|
||||
'<div class="picked-item__price">¥' + item.price + '</div>' +
|
||||
'<div class="picked-item__badge ' + badgeClass + '">' + badgeText + '</div></div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// [交互] 切换自选项目/必检项目列表
|
||||
function switchPicked(tab) {
|
||||
document.getElementById('rcTabOptional').classList.toggle('fee-tab--active', tab === 'optional');
|
||||
document.getElementById('rcTabRequired').classList.toggle('fee-tab--active', tab === 'required');
|
||||
renderPicked(tab);
|
||||
}
|
||||
|
||||
// ===== 初始化 =====
|
||||
fillProgress('r', ROUTINE_PROJECTS, 5); // 常规·待体检 5/26
|
||||
fillProgress('rd', ROUTINE_PROJECTS, 26); // 常规·已完成 26/26
|
||||
fillProgress('g', GASTRO_PROJECTS, 0); // 胃肠镜·待体检 0/2
|
||||
fillProgress('gd', GASTRO_PROJECTS, 2); // 胃肠镜·已完成 2/2
|
||||
renderPicked('optional');
|
||||
|
||||
// [交互] URL 参数直达：?type=routine|gastro&status=pending|cancelled|done|none
|
||||
(function initFromUrl() {
|
||||
if (!window.URLSearchParams) { return; }
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var pType = params.get('type');
|
||||
var pStatus = params.get('status');
|
||||
if (pType === 'routine' || pType === 'gastro') { setType(pType); }
|
||||
if (pStatus === 'pending' || pStatus === 'cancelled' || pStatus === 'done' || pStatus === 'none') {
|
||||
setDemoStatus(pStatus);
|
||||
}
|
||||
})();
|
||||
applyView();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,150 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-bg: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--warning-bg: #fff7e6;
|
||||
--warning-text: #fa8c16;
|
||||
--danger-bg: #fff1f0;
|
||||
--danger-text: #ff4d4f;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--border: #e8f3f3;
|
||||
--shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
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: linear-gradient(180deg, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
|
||||
padding: 14px 16px 20px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tabs {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
|
||||
background: rgba(255,255,255,0.92); border-radius: 18px;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
|
||||
position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
|
||||
}
|
||||
.tabs__item {
|
||||
height: 36px; border: none; border-radius: 14px; background: transparent;
|
||||
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.tabs__item--active {
|
||||
background: var(--primary-light); color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.summary-bar {
|
||||
margin: 14px 0 12px; padding: 16px; border-radius: 20px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
|
||||
}
|
||||
.summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||||
.summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
|
||||
.appointment-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.appointment-card {
|
||||
background: #fff; border-radius: 20px; padding: 16px;
|
||||
border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow); opacity: 0.94;
|
||||
}
|
||||
.appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
||||
.appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
|
||||
.appointment-card__status--cancelled { background: var(--danger-bg); color: var(--danger-text); }
|
||||
.appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
|
||||
.meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
|
||||
.meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
|
||||
.meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
|
||||
.appointment-card__actions { display: flex; gap: 10px; }
|
||||
.appointment-card__btn {
|
||||
flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
|
||||
}
|
||||
.appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
|
||||
</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">‹</a>
|
||||
<span class="nav-title">我的预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="tabs">
|
||||
<a class="tabs__item" href="my-appointments-all.html">全部</a>
|
||||
<a class="tabs__item" href="my-appointments.html">待体检</a>
|
||||
<a class="tabs__item" href="my-appointments-done.html">已体检</a>
|
||||
<a class="tabs__item tabs__item--active" href="my-appointments-cancelled.html">已取消</a>
|
||||
</div>
|
||||
|
||||
<div class="appointment-list">
|
||||
<a class="appointment-card" href="my-appointments-detail-cancelled.html" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">胃肠镜体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-10</div></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<a class="appointment-card" href="my-appointments-detail-cancelled.html" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--cancelled">已取消</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-01-15</div></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,439 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>体检预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--border: #e8f3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 预约状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-bar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fa8c16;
|
||||
}
|
||||
.status-bar__text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
border-radius: 24px;
|
||||
padding: 22px 18px;
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
|
||||
}
|
||||
.status-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-card__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-card__desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.summary-card,
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-list,
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.summary-item,
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label,
|
||||
.info-item__label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-item__value,
|
||||
.info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.summary-item--fee {
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
align-items: center;
|
||||
}
|
||||
.summary-item--fee .summary-item__label {
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item--fee .summary-item__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.person-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4f7f5;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.person-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.person-card__avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.person-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.person-card__meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tips-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef5f5;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.tips-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tips-card__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tips-card__item:last-child { margin-bottom: 0; }
|
||||
.tips-card__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
/* 已选体检项目 */
|
||||
.project-section {
|
||||
background: #fff; border-radius: 20px; padding: 18px 16px;
|
||||
box-shadow: var(--shadow); border: 1px solid rgba(19,194,194,0.06); margin-top: 14px;
|
||||
}
|
||||
.project-section__header {
|
||||
display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;
|
||||
}
|
||||
.project-section__count { font-size: 13px; color: var(--text-muted); }
|
||||
.project-section__count em { font-style: normal; color: var(--primary-dark); font-weight: 700; }
|
||||
.project-tabs {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
|
||||
padding: 5px; background: #f5f7f7; border-radius: 14px; margin-bottom: 14px;
|
||||
}
|
||||
.project-tab {
|
||||
height: 34px; border: none; border-radius: 10px; background: transparent;
|
||||
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
}
|
||||
.project-tab--active {
|
||||
background: #fff; color: var(--primary-dark);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
.project-list-panel {
|
||||
max-height: 280px; overflow-y: auto; padding-right: 2px;
|
||||
}
|
||||
.project-list-panel::-webkit-scrollbar { display: none; }
|
||||
.project-list { display: flex; flex-direction: column; gap: 10px; }
|
||||
.project-item {
|
||||
display: flex; align-items: center; gap: 12px; padding: 12px 14px;
|
||||
background: #f9fbfb; border-radius: 14px; border: 1px solid #eef5f5;
|
||||
}
|
||||
.project-item__dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0;
|
||||
}
|
||||
.project-item__info { flex: 1; }
|
||||
.project-item__name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
||||
.project-item__desc { font-size: 12px; color: var(--text-muted); }
|
||||
.project-item__price { font-size: 13px; font-weight: 700; color: var(--primary-dark); flex-shrink: 0; }
|
||||
.project-item__badge {
|
||||
display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
|
||||
border-radius: 10px; font-size: 10px; font-weight: 600; flex-shrink: 0;
|
||||
}
|
||||
.project-item__badge--normal { background: #f5f5f5; color: var(--text-muted); }
|
||||
.project-item__badge--key { background: #fff1f0; color: #ff4d4f; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: my-appointments-cancelled.html -->
|
||||
<a class="nav-back" href="my-appointments-cancelled.html">‹</a>
|
||||
<span class="nav-title">体检预约详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 预约状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">
|
||||
<div class="status-bar__dot" style="background:#ff4d4f;"></div>
|
||||
<div class="status-bar__text" style="color:#ff4d4f;">已取消</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检医院</div>
|
||||
<div class="summary-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">预约日期</div>
|
||||
<div class="summary-item__value">2026-03-23</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检员工</div>
|
||||
<div class="summary-item__value">张旭</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">单位部门</div>
|
||||
<div class="summary-item__value">采油一厂·xx作业区</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已选体检项目 -->
|
||||
<div class="project-section">
|
||||
<div class="project-section__header">
|
||||
<div class="section-title" style="margin-bottom:0">已选体检项目</div>
|
||||
<span class="project-section__count">共 <em id="totalCount">14</em> 项</span>
|
||||
</div>
|
||||
<!-- [交互] 点击切换自选项目/必检项目 -->
|
||||
<div class="project-tabs">
|
||||
<button class="project-tab project-tab--active" type="button" data-tab="optional">自选项目(6)</button>
|
||||
<button class="project-tab" type="button" data-tab="required">必检项目(8)</button>
|
||||
</div>
|
||||
<div class="project-list-panel">
|
||||
<div class="project-list" id="projectList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const projects = [
|
||||
{ name: '一般检查', desc: '身高、体重、血压、视力', price: 120, type: 'required', level: 'normal' },
|
||||
{ name: '血常规', desc: '血红蛋白、白细胞、血小板等', price: 80, type: 'required', level: 'normal' },
|
||||
{ name: '尿常规', desc: '尿蛋白、尿糖、尿潜血等', price: 45, type: 'required', level: 'normal' },
|
||||
{ name: '肝功能', desc: 'ALT、AST、总胆红素等', price: 160, type: 'required', level: 'key' },
|
||||
{ name: '肾功能', desc: '肌酐、尿素氮、尿酸等', price: 110, type: 'required', level: 'key' },
|
||||
{ name: '血脂四项', desc: '总胆固醇、甘油三酯、HDL、LDL', price: 90, type: 'required', level: 'normal' },
|
||||
{ name: '空腹血糖', desc: '空腹静脉血糖检测', price: 40, type: 'required', level: 'normal' },
|
||||
{ name: '心电图', desc: '十二导联心电图检查', price: 75, type: 'required', level: 'key' },
|
||||
{ name: '胸部X光', desc: '胸部正位X线摄影', price: 140, type: 'optional', level: 'normal' },
|
||||
{ name: '腹部彩超', desc: '肝胆脾胰肾彩色超声', price: 180, type: 'optional', level: 'key' },
|
||||
{ name: '甲状腺彩超', desc: '甲状腺彩色多普勒超声', price: 150, type: 'optional', level: 'key' },
|
||||
{ name: '肿瘤标志物', desc: 'AFP、CEA、CA199等', price: 280, type: 'optional', level: 'key' },
|
||||
{ name: '幽门螺杆菌', desc: 'C14呼气试验', price: 120, type: 'optional', level: 'normal' },
|
||||
{ name: '骨密度检测', desc: '超声骨密度检测', price: 100, type: 'optional', level: 'normal' }
|
||||
];
|
||||
|
||||
let activeTab = 'optional';
|
||||
const listEl = document.getElementById('projectList');
|
||||
const tabButtons = document.querySelectorAll('.project-tab');
|
||||
|
||||
function renderProjects() {
|
||||
const filtered = projects.filter(item => item.type === activeTab);
|
||||
listEl.innerHTML = filtered.map(item => {
|
||||
const badgeText = item.level === 'key' ? '重点' : '一般';
|
||||
const badgeClass = item.level === 'key' ? 'project-item__badge--key' : 'project-item__badge--normal';
|
||||
return `
|
||||
<div class="project-item">
|
||||
<div class="project-item__dot"></div>
|
||||
<div class="project-item__info">
|
||||
<div class="project-item__name">${item.name}</div>
|
||||
<div class="project-item__desc">${item.desc}</div>
|
||||
</div>
|
||||
<div class="project-item__price">¥${item.price}</div>
|
||||
<div class="project-item__badge ${badgeClass}">${badgeText}</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
tabButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
tabButtons.forEach(item => item.classList.remove('project-tab--active'));
|
||||
btn.classList.add('project-tab--active');
|
||||
activeTab = btn.dataset.tab;
|
||||
renderProjects();
|
||||
});
|
||||
});
|
||||
|
||||
renderProjects();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,668 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>体检预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--border: #e8f3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 预约状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-bar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fa8c16;
|
||||
}
|
||||
.status-bar__text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.status-bar__btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-bar__btn--disabled {
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #f5f5f5;
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* 确认弹窗 */
|
||||
.confirm-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirm-overlay--visible { display: flex; }
|
||||
.confirm-dialog {
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px 20px 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.confirm-dialog__title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.confirm-dialog__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
background: #f9fbfb;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.confirm-dialog__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.confirm-dialog__label { color: var(--text-muted); }
|
||||
.confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
|
||||
.confirm-dialog__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.confirm-dialog__btn {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
border-radius: 21px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm-dialog__btn--cancel {
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid #ebeff2;
|
||||
}
|
||||
.confirm-dialog__btn--confirm {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,0.76);
|
||||
color: #fff;
|
||||
padding: 14px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
z-index: 200;
|
||||
text-align: center;
|
||||
max-width: 280px;
|
||||
line-height: 1.6;
|
||||
display: none;
|
||||
}
|
||||
.toast--visible { display: block; }
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
border-radius: 24px;
|
||||
padding: 22px 18px;
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
|
||||
}
|
||||
.status-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-card__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-card__desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.summary-card,
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-list,
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.summary-item,
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label,
|
||||
.info-item__label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-item__value,
|
||||
.info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.summary-item--fee {
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
align-items: center;
|
||||
}
|
||||
.summary-item--fee .summary-item__label {
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item--fee .summary-item__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.person-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4f7f5;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.person-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.person-card__avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.person-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.person-card__meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tips-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef5f5;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.tips-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tips-card__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tips-card__item:last-child { margin-bottom: 0; }
|
||||
.tips-card__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.qrcode-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.qrcode-wrap__img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #eef5f5;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.qrcode-wrap__img:hover { transform: scale(1.04); }
|
||||
.qrcode-wrap__hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/* 二维码放大遮罩 */
|
||||
.qr-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qr-overlay--visible { display: flex; }
|
||||
.qr-overlay__img {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
/* 体检进度 */
|
||||
.progress-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.progress-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.progress-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-card__ratio {
|
||||
font-size: 13px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-bar-lg {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #eef3f3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.progress-bar-lg__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.project-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.project-tabs__btn {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.project-tabs__btn--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.project-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f9fbfb;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.project-item__icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.project-item__icon--done {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.project-item__icon--pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.project-item__name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.project-item__status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-item__status--done { color: var(--success-text); }
|
||||
.project-item__status--pending { color: #fa8c16; }
|
||||
.hidden { display: none !important; }
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 18px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.bottom-actions__btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottom-actions__btn--ghost {
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
.bottom-actions__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
|
||||
}
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: my-appointments-done.html -->
|
||||
<a class="nav-back" href="my-appointments-done.html">‹</a>
|
||||
<span class="nav-title">体检预约详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 预约状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">
|
||||
<div class="status-bar__dot" style="background:#52c41a;"></div>
|
||||
<div class="status-bar__text" style="color:#52c41a;">已体检</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检医院</div>
|
||||
<div class="summary-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">预约日期</div>
|
||||
<div class="summary-item__value">2026-03-23</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检员工</div>
|
||||
<div class="summary-item__value">张旭</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">单位部门</div>
|
||||
<div class="summary-item__value">采油一厂·xx作业区</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检进度 -->
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio" id="progressRatio">26 / 26 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 100%;"></div></div>
|
||||
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs" id="projectTabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
|
||||
<button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
|
||||
</div>
|
||||
|
||||
<!-- 已检项目列表（JS动态生成） -->
|
||||
<div class="project-list" id="doneList"></div>
|
||||
|
||||
<!-- 未检项目列表（默认隐藏，JS动态生成） -->
|
||||
<div class="project-list hidden" id="pendingList"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="bottom-actions">-->
|
||||
<!-- <!– [交互] 点击跳转至: my-appointments.html –>-->
|
||||
<!-- <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='my-appointments.html'">取消预约</button>-->
|
||||
<!-- <!– [交互] 点击跳转至: hospital-checkin.html –>-->
|
||||
<!-- <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='hospital-checkin.html'">到院体检</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 二维码放大遮罩 -->
|
||||
<div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
|
||||
<svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
</div>
|
||||
<script>
|
||||
function switchTab(idx) {
|
||||
var btns = document.querySelectorAll('.project-tabs__btn');
|
||||
btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
|
||||
btns[idx].classList.add('project-tabs__btn--active');
|
||||
document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
|
||||
document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
|
||||
}
|
||||
|
||||
var totalCount = 26;
|
||||
var doneCount = 26;
|
||||
var allProjects = [
|
||||
'一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
|
||||
'血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
|
||||
'甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
|
||||
'甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
|
||||
'骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
|
||||
];
|
||||
|
||||
function renderItem(name) {
|
||||
return '<div class="project-item">' +
|
||||
'<div class="project-item__icon project-item__icon--done">✓</div>' +
|
||||
'<div class="project-item__name">' + name + '</div>' +
|
||||
'<div class="project-item__status project-item__status--done">已体检</div></div>';
|
||||
}
|
||||
|
||||
document.getElementById('doneList').innerHTML = allProjects.map(function(n) { return renderItem(n); }).join('');
|
||||
document.getElementById('pendingList').innerHTML = '<div class="project-item"><div class="project-item__icon project-item__icon--done">✓</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
|
||||
document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
|
||||
document.getElementById('tabPending').textContent = '未检项目 (0)';
|
||||
document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
|
||||
document.getElementById('progressFill').style.width = '100%';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,395 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>胃肠镜预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--border: #e8f3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 预约状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-bar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fa8c16;
|
||||
}
|
||||
.status-bar__text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.status-bar__btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-bar__btn--disabled {
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #f5f5f5;
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.summary-card,
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-list,
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.summary-item,
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label,
|
||||
.info-item__label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-item__value,
|
||||
.info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.summary-item--fee {
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
align-items: center;
|
||||
}
|
||||
.summary-item--fee .summary-item__label {
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item--fee .summary-item__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
/* 体检进度 */
|
||||
.progress-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.progress-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.progress-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-card__ratio {
|
||||
font-size: 13px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-bar-lg {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #eef3f3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.progress-bar-lg__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.project-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.project-tabs__btn {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.project-tabs__btn--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.project-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f9fbfb;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.project-item__icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.project-item__icon--done {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.project-item__icon--pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.project-item__name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.project-item__status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-item__status--done { color: var(--success-text); }
|
||||
.project-item__status--pending { color: #fa8c16; }
|
||||
.hidden { display: none !important; }
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: my-appointments-done.html -->
|
||||
<a class="nav-back" href="my-appointments-done.html">‹</a>
|
||||
<span class="nav-title">体检预约详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 预约状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">
|
||||
<div class="status-bar__dot" style="background:#52c41a;"></div>
|
||||
<div class="status-bar__text" style="color:#52c41a;">已体检</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="section-title">胃肠镜体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检医院</div>
|
||||
<div class="summary-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检员工</div>
|
||||
<div class="summary-item__value">刘韵琴</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检地址</div>
|
||||
<div class="summary-item__value">银川市西夏区怀远路148号</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检日期</div>
|
||||
<div class="summary-item__value">2026年3月23日</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检项目</div>
|
||||
<div class="summary-item__value">胃肠镜体检</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检进度 -->
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio" id="progressRatio">2 / 2 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 100%;"></div></div>
|
||||
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs" id="projectTabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
|
||||
<button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
|
||||
</div>
|
||||
|
||||
<!-- 已检项目列表（JS动态生成） -->
|
||||
<div class="project-list" id="doneList"></div>
|
||||
|
||||
<!-- 未检项目列表（默认隐藏，JS动态生成） -->
|
||||
<div class="project-list hidden" id="pendingList"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(idx) {
|
||||
var btns = document.querySelectorAll('.project-tabs__btn');
|
||||
btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
|
||||
btns[idx].classList.add('project-tabs__btn--active');
|
||||
document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
|
||||
document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
|
||||
}
|
||||
|
||||
var totalCount = 2;
|
||||
var doneCount = 2;
|
||||
var allProjects = ['胃镜检查', '肠镜检查'];
|
||||
|
||||
function renderItem(name) {
|
||||
return '<div class="project-item">' +
|
||||
'<div class="project-item__icon project-item__icon--done">✓</div>' +
|
||||
'<div class="project-item__name">' + name + '</div>' +
|
||||
'<div class="project-item__status project-item__status--done">已体检</div></div>';
|
||||
}
|
||||
|
||||
document.getElementById('doneList').innerHTML = allProjects.map(function(n) { return renderItem(n); }).join('');
|
||||
document.getElementById('pendingList').innerHTML = '<div class="project-item"><div class="project-item__icon project-item__icon--done">✓</div><div class="project-item__name">当前预约项目已全部完成</div><div class="project-item__status project-item__status--done">完成</div></div>';
|
||||
document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
|
||||
document.getElementById('tabPending').textContent = '未检项目 (0)';
|
||||
document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
|
||||
document.getElementById('progressFill').style.width = '100%';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,765 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>胃肠镜预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--border: #e8f3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 预约状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-bar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fa8c16;
|
||||
}
|
||||
.status-bar__text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.status-bar__btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-bar__btn--disabled {
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #f5f5f5;
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* 确认弹窗 */
|
||||
.confirm-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirm-overlay--visible { display: flex; }
|
||||
.confirm-dialog {
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px 20px 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.confirm-dialog__title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.confirm-dialog__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
background: #f9fbfb;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.confirm-dialog__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.confirm-dialog__label { color: var(--text-muted); }
|
||||
.confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
|
||||
.confirm-dialog__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.confirm-dialog__btn {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
border-radius: 21px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm-dialog__btn--cancel {
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid #ebeff2;
|
||||
}
|
||||
.confirm-dialog__btn--confirm {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,0.76);
|
||||
color: #fff;
|
||||
padding: 14px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
z-index: 200;
|
||||
text-align: center;
|
||||
max-width: 280px;
|
||||
line-height: 1.6;
|
||||
display: none;
|
||||
}
|
||||
.toast--visible { display: block; }
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
border-radius: 24px;
|
||||
padding: 22px 18px;
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
|
||||
}
|
||||
.status-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-card__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-card__desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.summary-card,
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-list,
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.summary-item,
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label,
|
||||
.info-item__label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-item__value,
|
||||
.info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.summary-item--fee {
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
align-items: center;
|
||||
}
|
||||
.summary-item--fee .summary-item__label {
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item--fee .summary-item__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.person-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4f7f5;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.person-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.person-card__avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.person-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.person-card__meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tips-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef5f5;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.tips-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tips-card__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tips-card__item:last-child { margin-bottom: 0; }
|
||||
.tips-card__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.qrcode-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.qrcode-wrap__img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #eef5f5;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.qrcode-wrap__img:hover { transform: scale(1.04); }
|
||||
.qrcode-wrap__hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/* 二维码放大遮罩 */
|
||||
.qr-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qr-overlay--visible { display: flex; }
|
||||
.qr-overlay__img {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
/* 体检进度 */
|
||||
.progress-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.progress-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.progress-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-card__ratio {
|
||||
font-size: 13px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-bar-lg {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #eef3f3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.progress-bar-lg__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.project-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.project-tabs__btn {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.project-tabs__btn--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.project-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f9fbfb;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.project-item__icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.project-item__icon--done {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.project-item__icon--pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.project-item__name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.project-item__status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-item__status--done { color: var(--success-text); }
|
||||
.project-item__status--pending { color: #fa8c16; }
|
||||
.hidden { display: none !important; }
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 18px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.bottom-actions__btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottom-actions__btn--ghost {
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
.bottom-actions__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
|
||||
}
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: my-appointments.html -->
|
||||
<a class="nav-back" href="my-appointments.html">‹</a>
|
||||
<span class="nav-title">体检预约详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 预约状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">
|
||||
<div class="status-bar__dot"></div>
|
||||
<div class="status-bar__text">待体检</div>
|
||||
</div>
|
||||
<button class="status-bar__btn" id="cancelBtn">取消预约</button>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="section-title">胃肠镜体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检医院</div>
|
||||
<div class="summary-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检员工</div>
|
||||
<div class="summary-item__value">刘韵琴</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检地址</div>
|
||||
<div class="summary-item__value">银川市西夏区怀远路148号</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检日期</div>
|
||||
<div class="summary-item__value">2026年3月23日</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检项目</div>
|
||||
<div class="summary-item__value">胃肠镜体检</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检须知 -->
|
||||
<div class="tips-card">
|
||||
<div class="tips-card__title">体检须知</div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前3天请清淡饮食，避免高纤维、高脂肪食物。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查前一天晚上需服用肠道清洁剂，具体用法请遵医嘱。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>检查当天需空腹，禁食禁水至少8小时。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>请携带本人身份证件按时前往医院。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若选择无痛胃肠镜，检查后24小时内请勿驾车。</span></div>
|
||||
<div class="tips-card__item"><span class="tips-card__dot"></span><span>若需取消预约，请至少提前一天操作。</span></div>
|
||||
</div>
|
||||
|
||||
<div class="person-card">
|
||||
<div class="section-title">体检签到码</div>
|
||||
<div class="qrcode-wrap">
|
||||
<!-- [交互] 点击二维码放大展示 -->
|
||||
<svg class="qrcode-wrap__img" onclick="document.getElementById('qrOverlay').classList.add('qr-overlay--visible')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击二维码可放大查看</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检进度 -->
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio" id="progressRatio">0 / 2 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 0%;"></div></div>
|
||||
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs" id="projectTabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
|
||||
<button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
|
||||
</div>
|
||||
|
||||
<!-- 已检项目列表（JS动态生成） -->
|
||||
<div class="project-list" id="doneList"></div>
|
||||
|
||||
<!-- 未检项目列表（默认隐藏，JS动态生成） -->
|
||||
<div class="project-list hidden" id="pendingList"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 二维码放大遮罩 -->
|
||||
<div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
|
||||
<svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
</div>
|
||||
<script>
|
||||
function switchTab(idx) {
|
||||
var btns = document.querySelectorAll('.project-tabs__btn');
|
||||
btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
|
||||
btns[idx].classList.add('project-tabs__btn--active');
|
||||
document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
|
||||
document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('cancelToast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--visible');
|
||||
setTimeout(function() { t.classList.remove('toast--visible'); }, 2000);
|
||||
}
|
||||
|
||||
// 读取 URL 参数
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var doneCount = parseInt(params.get('done') || '0', 10);
|
||||
var totalCount = parseInt(params.get('total') || '2', 10);
|
||||
var hospital = params.get('hospital') || '宁夏宝石花医院';
|
||||
var date = params.get('date') || '2026-03-23';
|
||||
|
||||
// 动态更新体检进度
|
||||
var pct = totalCount > 0 ? Math.round(doneCount / totalCount * 1000) / 10 : 0;
|
||||
document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
|
||||
document.getElementById('progressFill').style.width = pct + '%';
|
||||
|
||||
// 胃肠镜体检项目池
|
||||
var allProjects = ['胃镜检查', '肠镜检查'];
|
||||
var projects = allProjects.slice(0, totalCount);
|
||||
var doneProjects = projects.slice(0, doneCount);
|
||||
var pendingProjects = projects.slice(doneCount);
|
||||
|
||||
function renderItem(name, isDone) {
|
||||
return '<div class="project-item">' +
|
||||
'<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '✓' : '●') + '</div>' +
|
||||
'<div class="project-item__name">' + name + '</div>' +
|
||||
'<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '已体检' : '未检') + '</div></div>';
|
||||
}
|
||||
|
||||
document.getElementById('doneList').innerHTML = doneProjects.map(function(n) { return renderItem(n, true); }).join('');
|
||||
document.getElementById('pendingList').innerHTML = pendingProjects.map(function(n) { return renderItem(n, false); }).join('');
|
||||
document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
|
||||
document.getElementById('tabPending').textContent = '未检项目 (' + pendingProjects.length + ')';
|
||||
|
||||
// done=0 时默认显示未检 Tab
|
||||
if (doneCount === 0) {
|
||||
switchTab(1);
|
||||
}
|
||||
|
||||
// 根据进度控制取消按钮状态
|
||||
var cancelBtn = document.getElementById('cancelBtn');
|
||||
if (doneCount > 0) {
|
||||
// 已有体检进度 → 按钮禁用，点击弹 toast
|
||||
cancelBtn.classList.add('status-bar__btn--disabled');
|
||||
cancelBtn.disabled = false;
|
||||
cancelBtn.onclick = function() {
|
||||
showToast('您当前已体检了部分项目，无法取消预约');
|
||||
};
|
||||
} else {
|
||||
// 无体检进度 → 按钮可点击，弹二次确认
|
||||
cancelBtn.classList.remove('status-bar__btn--disabled');
|
||||
cancelBtn.disabled = false;
|
||||
cancelBtn.onclick = function() {
|
||||
document.getElementById('confirmHospital').textContent = hospital;
|
||||
document.getElementById('confirmDate').textContent = date;
|
||||
document.getElementById('confirmOverlay').classList.add('confirm-overlay--visible');
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div class="toast" id="cancelToast"></div>
|
||||
<!-- 取消预约二次确认弹窗 -->
|
||||
<div class="confirm-overlay" id="confirmOverlay">
|
||||
<div class="confirm-dialog">
|
||||
<div class="confirm-dialog__title">是否确认取消预约</div>
|
||||
<div class="confirm-dialog__info">
|
||||
<div class="confirm-dialog__row">
|
||||
<span class="confirm-dialog__label">体检医院</span>
|
||||
<span class="confirm-dialog__value" id="confirmHospital">宁夏宝石花医院</span>
|
||||
</div>
|
||||
<div class="confirm-dialog__row">
|
||||
<span class="confirm-dialog__label">预约日期</span>
|
||||
<span class="confirm-dialog__value" id="confirmDate">2026-03-23</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-dialog__actions">
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="document.getElementById('confirmOverlay').classList.remove('confirm-overlay--visible')">再想想</button>
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="window.location.href='my-appointments.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,771 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>体检预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-light: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--danger: #ff4d4f;
|
||||
--danger-light: #fff1f0;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--border: #e8f3f3;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--shadow: 0 10px 30px rgba(19, 194, 194, 0.08);
|
||||
}
|
||||
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: linear-gradient(180deg, #effbfb 0%, #f7f9fb 180px, #f7f9fb 100%);
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 预约状态栏 */
|
||||
.status-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-bar__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.status-bar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #fa8c16;
|
||||
}
|
||||
.status-bar__text {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.status-bar__btn {
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
border: 1px solid rgba(255, 77, 79, 0.3);
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
cursor: pointer;
|
||||
}
|
||||
.status-bar__btn--disabled {
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #f5f5f5;
|
||||
color: #bfbfbf;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* 确认弹窗 */
|
||||
.confirm-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.confirm-overlay--visible { display: flex; }
|
||||
.confirm-dialog {
|
||||
width: 300px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 24px 20px 18px;
|
||||
text-align: center;
|
||||
}
|
||||
.confirm-dialog__title {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.confirm-dialog__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 20px;
|
||||
padding: 12px;
|
||||
background: #f9fbfb;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.confirm-dialog__row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
}
|
||||
.confirm-dialog__label { color: var(--text-muted); }
|
||||
.confirm-dialog__value { color: var(--text-primary); font-weight: 600; }
|
||||
.confirm-dialog__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.confirm-dialog__btn {
|
||||
flex: 1;
|
||||
height: 42px;
|
||||
border-radius: 21px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm-dialog__btn--cancel {
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid #ebeff2;
|
||||
}
|
||||
.confirm-dialog__btn--confirm {
|
||||
background: var(--danger);
|
||||
color: #fff;
|
||||
}
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgba(0,0,0,0.76);
|
||||
color: #fff;
|
||||
padding: 14px 24px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
z-index: 200;
|
||||
text-align: center;
|
||||
max-width: 280px;
|
||||
line-height: 1.6;
|
||||
display: none;
|
||||
}
|
||||
.toast--visible { display: block; }
|
||||
.status-card {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
border-radius: 24px;
|
||||
padding: 22px 18px;
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 28px rgba(19, 194, 194, 0.24);
|
||||
}
|
||||
.status-card__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.status-card__title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.status-card__desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.summary-card,
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
margin-top: 14px;
|
||||
margin-top: 14px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.summary-list,
|
||||
.info-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
.summary-item,
|
||||
.info-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.summary-item__label,
|
||||
.info-item__label {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.summary-item__value,
|
||||
.info-item__value {
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.summary-item--fee {
|
||||
margin-top: 2px;
|
||||
padding: 14px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0fffe 0%, #f7fffd 100%);
|
||||
border: 1px solid #d7f5f3;
|
||||
align-items: center;
|
||||
}
|
||||
.summary-item--fee .summary-item__label {
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.summary-item--fee .summary-item__value {
|
||||
color: var(--primary-dark);
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
}
|
||||
.person-card {
|
||||
margin-top: 14px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8fffe 100%);
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #e4f7f5;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.person-card__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.person-card__avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.person-card__name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.person-card__meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.tips-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid #eef5f5;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.tips-card__title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.tips-card__item {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.tips-card__item:last-child { margin-bottom: 0; }
|
||||
.tips-card__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary);
|
||||
margin-top: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.qrcode-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.qrcode-wrap__img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #eef5f5;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.qrcode-wrap__img:hover { transform: scale(1.04); }
|
||||
.qrcode-wrap__hint {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
/* 二维码放大遮罩 */
|
||||
.qr-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 100;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.qr-overlay--visible { display: flex; }
|
||||
.qr-overlay__img {
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
||||
}
|
||||
/* 体检进度 */
|
||||
.progress-card {
|
||||
margin-top: 14px;
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 18px 16px;
|
||||
box-shadow: var(--shadow);
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
.progress-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.progress-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.progress-card__ratio {
|
||||
font-size: 13px;
|
||||
color: var(--primary-dark);
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-bar-lg {
|
||||
height: 10px;
|
||||
border-radius: 999px;
|
||||
background: #eef3f3;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.progress-bar-lg__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.project-tabs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.project-tabs__btn {
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.project-tabs__btn--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.project-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
.project-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f9fbfb;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.project-item__icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.project-item__icon--done {
|
||||
background: var(--success-light);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.project-item__icon--pending {
|
||||
background: #fff7e6;
|
||||
color: #fa8c16;
|
||||
}
|
||||
.project-item__name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.project-item__status {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.project-item__status--done { color: var(--success-text); }
|
||||
.project-item__status--pending { color: #fa8c16; }
|
||||
.hidden { display: none !important; }
|
||||
.bottom-actions {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 18px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
.bottom-actions__btn {
|
||||
flex: 1;
|
||||
height: 48px;
|
||||
border-radius: 24px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottom-actions__btn--ghost {
|
||||
background: var(--danger-light);
|
||||
color: var(--danger);
|
||||
border: 1px solid rgba(255, 77, 79, 0.2);
|
||||
}
|
||||
.bottom-actions__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 10px 20px rgba(19, 194, 194, 0.22);
|
||||
}
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: my-appointments.html -->
|
||||
<a class="nav-back" href="my-appointments.html">‹</a>
|
||||
<span class="nav-title">体检预约详情</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 预约状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-bar__left">
|
||||
<div class="status-bar__dot"></div>
|
||||
<div class="status-bar__text">待体检</div>
|
||||
</div>
|
||||
<button class="status-bar__btn status-bar__btn--disabled" id="cancelBtn" disabled>取消预约</button>
|
||||
</div>
|
||||
|
||||
<div class="summary-card">
|
||||
<div class="section-title">常规体检</div>
|
||||
<div class="summary-list">
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检医院</div>
|
||||
<div class="summary-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">预约日期</div>
|
||||
<div class="summary-item__value">2026-03-23</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">体检员工</div>
|
||||
<div class="summary-item__value">张旭</div>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<div class="summary-item__label">单位部门</div>
|
||||
<div class="summary-item__value">采油一厂·xx作业区</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="person-card">
|
||||
<div class="section-title">体检签到码</div>
|
||||
<div class="qrcode-wrap">
|
||||
<!-- [交互] 点击二维码放大展示 -->
|
||||
<svg class="qrcode-wrap__img" onclick="document.getElementById('qrOverlay').classList.add('qr-overlay--visible')" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<!-- 左上定位块 -->
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<!-- 右上定位块 -->
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<!-- 左下定位块 -->
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/>
|
||||
<rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/>
|
||||
<rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<!-- 数据区域模拟 -->
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
<span class="qrcode-wrap__hint">点击二维码可放大查看</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体检进度 -->
|
||||
<div class="progress-card">
|
||||
<div class="progress-card__header">
|
||||
<div class="progress-card__title">体检进度</div>
|
||||
<div class="progress-card__ratio" id="progressRatio">5 / 26 项</div>
|
||||
</div>
|
||||
<div class="progress-bar-lg"><div class="progress-bar-lg__fill" id="progressFill" style="width: 19.2%;"></div></div>
|
||||
|
||||
<!-- [交互] 点击切换已检/未检 Tab -->
|
||||
<div class="project-tabs" id="projectTabs">
|
||||
<button class="project-tabs__btn project-tabs__btn--active" type="button" id="tabDone" onclick="switchTab(0)">已检项目 (0)</button>
|
||||
<button class="project-tabs__btn" type="button" id="tabPending" onclick="switchTab(1)">未检项目 (0)</button>
|
||||
</div>
|
||||
|
||||
<!-- 已检项目列表（JS动态生成） -->
|
||||
<div class="project-list" id="doneList"></div>
|
||||
|
||||
<!-- 未检项目列表（默认隐藏，JS动态生成） -->
|
||||
<div class="project-list hidden" id="pendingList"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="bottom-actions">-->
|
||||
<!-- <!– [交互] 点击跳转至: my-appointments.html –>-->
|
||||
<!-- <button class="bottom-actions__btn bottom-actions__btn--ghost" onclick="window.location.href='my-appointments.html'">取消预约</button>-->
|
||||
<!-- <!– [交互] 点击跳转至: hospital-checkin.html –>-->
|
||||
<!-- <button class="bottom-actions__btn bottom-actions__btn--primary" onclick="window.location.href='hospital-checkin.html'">到院体检</button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- 二维码放大遮罩 -->
|
||||
<div class="qr-overlay" id="qrOverlay" onclick="this.classList.remove('qr-overlay--visible')">
|
||||
<svg class="qr-overlay__img" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="160" height="160" fill="#fff"/>
|
||||
<rect x="12" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="108" y="12" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="114" y="18" width="28" height="28" rx="2" fill="#fff"/><rect x="120" y="24" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="12" y="108" width="40" height="40" rx="4" fill="#1a1a1a"/><rect x="18" y="114" width="28" height="28" rx="2" fill="#fff"/><rect x="24" y="120" width="16" height="16" rx="2" fill="#1a1a1a"/>
|
||||
<rect x="60" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="12" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="12" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="24" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="24" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="36" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="36" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="28" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="60" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="60" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="20" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="44" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="72" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="72" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="12" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="36" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="60" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="84" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="84" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="28" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="52" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="68" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="96" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="96" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="108" width="8" height="8" fill="#1a1a1a"/><rect x="124" y="108" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="84" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="108" y="120" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="120" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="60" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="76" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="92" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="116" y="132" width="8" height="8" fill="#1a1a1a"/><rect x="140" y="132" width="8" height="8" fill="#1a1a1a"/>
|
||||
<rect x="68" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="100" y="140" width="8" height="8" fill="#1a1a1a"/><rect x="132" y="140" width="8" height="8" fill="#1a1a1a"/>
|
||||
</svg>
|
||||
</div>
|
||||
<script>
|
||||
function switchTab(idx) {
|
||||
var btns = document.querySelectorAll('.project-tabs__btn');
|
||||
btns.forEach(function(b) { b.classList.remove('project-tabs__btn--active'); });
|
||||
btns[idx].classList.add('project-tabs__btn--active');
|
||||
document.getElementById('doneList').classList.toggle('hidden', idx !== 0);
|
||||
document.getElementById('pendingList').classList.toggle('hidden', idx !== 1);
|
||||
}
|
||||
function showToast(msg) {
|
||||
var t = document.getElementById('cancelToast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('toast--visible');
|
||||
setTimeout(function() { t.classList.remove('toast--visible'); }, 2000);
|
||||
}
|
||||
|
||||
// 读取 URL 参数
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
var doneCount = parseInt(params.get('done') || '5', 10);
|
||||
var totalCount = parseInt(params.get('total') || '26', 10);
|
||||
var hospital = params.get('hospital') || '宁夏宝石花医院';
|
||||
var date = params.get('date') || '2026-03-23';
|
||||
|
||||
// 动态更新体检进度
|
||||
var pct = totalCount > 0 ? Math.round(doneCount / totalCount * 1000) / 10 : 0;
|
||||
document.getElementById('progressRatio').textContent = doneCount + ' / ' + totalCount + ' 项';
|
||||
document.getElementById('progressFill').style.width = pct + '%';
|
||||
|
||||
// 全部体检项目池（按常规体检顺序）
|
||||
var allProjects = [
|
||||
'一般检查', '内科', '外科', '眼科检查', '耳鼻喉科', '口腔科',
|
||||
'血常规', '尿常规', '肝功能', '肾功能', '血脂四项', '空腹血糖',
|
||||
'甲状腺功能', '肿瘤标志物', '心电图', '胸部DR', '腹部彩超',
|
||||
'甲状腺彩超', '泌尿系彩超', '心脏彩超', '颈动脉彩超',
|
||||
'骨密度检测', '肺功能', '幽门螺杆菌', '中医体质辨识', '总检报告'
|
||||
];
|
||||
// 取前 totalCount 个项目，前 doneCount 个为已检
|
||||
var projects = allProjects.slice(0, totalCount);
|
||||
var doneProjects = projects.slice(0, doneCount);
|
||||
var pendingProjects = projects.slice(doneCount);
|
||||
|
||||
function renderItem(name, isDone) {
|
||||
return '<div class="project-item">' +
|
||||
'<div class="project-item__icon project-item__icon--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '✓' : '●') + '</div>' +
|
||||
'<div class="project-item__name">' + name + '</div>' +
|
||||
'<div class="project-item__status project-item__status--' + (isDone ? 'done' : 'pending') + '">' +
|
||||
(isDone ? '已体检' : '未检') + '</div></div>';
|
||||
}
|
||||
|
||||
document.getElementById('doneList').innerHTML = doneProjects.map(function(n) { return renderItem(n, true); }).join('');
|
||||
document.getElementById('pendingList').innerHTML = pendingProjects.map(function(n) { return renderItem(n, false); }).join('');
|
||||
document.getElementById('tabDone').textContent = '已检项目 (' + doneCount + ')';
|
||||
document.getElementById('tabPending').textContent = '未检项目 (' + pendingProjects.length + ')';
|
||||
|
||||
// done=0 时默认显示未检 Tab
|
||||
if (doneCount === 0) {
|
||||
switchTab(1);
|
||||
}
|
||||
|
||||
// 根据进度控制取消按钮状态
|
||||
var cancelBtn = document.getElementById('cancelBtn');
|
||||
if (doneCount > 0) {
|
||||
// 已有体检进度 → 按钮禁用，点击弹 toast
|
||||
cancelBtn.classList.add('status-bar__btn--disabled');
|
||||
cancelBtn.disabled = false;
|
||||
cancelBtn.onclick = function() {
|
||||
showToast('您当前已体检了部分项目，无法取消预约');
|
||||
};
|
||||
} else {
|
||||
// 无体检进度 → 按钮可点击，弹二次确认
|
||||
cancelBtn.classList.remove('status-bar__btn--disabled');
|
||||
cancelBtn.disabled = false;
|
||||
cancelBtn.onclick = function() {
|
||||
document.getElementById('confirmHospital').textContent = hospital;
|
||||
document.getElementById('confirmDate').textContent = date;
|
||||
document.getElementById('confirmOverlay').classList.add('confirm-overlay--visible');
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<div class="toast" id="cancelToast"></div>
|
||||
<!-- 取消预约二次确认弹窗 -->
|
||||
<div class="confirm-overlay" id="confirmOverlay">
|
||||
<div class="confirm-dialog">
|
||||
<div class="confirm-dialog__title">是否确认取消预约</div>
|
||||
<div class="confirm-dialog__info">
|
||||
<div class="confirm-dialog__row">
|
||||
<span class="confirm-dialog__label">体检医院</span>
|
||||
<span class="confirm-dialog__value" id="confirmHospital">宁夏宝石花医院</span>
|
||||
</div>
|
||||
<div class="confirm-dialog__row">
|
||||
<span class="confirm-dialog__label">预约日期</span>
|
||||
<span class="confirm-dialog__value" id="confirmDate">2026-03-23</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-dialog__actions">
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--cancel" onclick="document.getElementById('confirmOverlay').classList.remove('confirm-overlay--visible')">再想想</button>
|
||||
<button class="confirm-dialog__btn confirm-dialog__btn--confirm" onclick="window.location.href='my-appointments.html'">确认取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,163 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-bg: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--warning-bg: #fff7e6;
|
||||
--warning-text: #fa8c16;
|
||||
--danger-bg: #fff1f0;
|
||||
--danger-text: #ff4d4f;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--border: #e8f3f3;
|
||||
--shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
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: linear-gradient(180deg, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
|
||||
padding: 14px 16px 20px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tabs {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px;
|
||||
background: rgba(255,255,255,0.92); border-radius: 18px;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
|
||||
position: sticky; top: 0; z-index: 5; backdrop-filter: blur(10px);
|
||||
}
|
||||
.tabs__item {
|
||||
height: 36px; border: none; border-radius: 14px; background: transparent;
|
||||
color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
|
||||
text-decoration: none; display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.tabs__item--active {
|
||||
background: var(--primary-light); color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.summary-bar {
|
||||
margin: 14px 0 12px; padding: 16px; border-radius: 20px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff; box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
|
||||
}
|
||||
.summary-bar__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
|
||||
.summary-bar__desc { font-size: 13px; line-height: 1.7; opacity: 0.92; }
|
||||
.appointment-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
.appointment-card {
|
||||
background: #fff; border-radius: 20px; padding: 16px;
|
||||
border: 1px solid rgba(19, 194, 194, 0.06); box-shadow: var(--shadow);
|
||||
}
|
||||
.appointment-card__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
|
||||
.appointment-card__title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
|
||||
.appointment-card__status { flex-shrink: 0; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
|
||||
.appointment-card__status--done { background: var(--success-bg); color: var(--success-text); }
|
||||
.appointment-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-bottom: 12px; }
|
||||
.meta-item { background: #f9fbfb; border-radius: 14px; padding: 10px 12px; border: 1px solid #f0f5f5; }
|
||||
.meta-item__label { font-size: 11px; color: var(--text-muted); margin-bottom: 5px; }
|
||||
.meta-item__value { font-size: 13px; color: var(--text-primary); font-weight: 600; line-height: 1.5; }
|
||||
.appointment-card__progress { margin-bottom: 14px; }
|
||||
.progress-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 12px; color: var(--text-secondary); }
|
||||
.progress-bar { height: 8px; border-radius: 999px; background: #eef3f3; overflow: hidden; }
|
||||
.progress-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%); }
|
||||
.appointment-card__actions { display: flex; gap: 10px; }
|
||||
.appointment-card__btn {
|
||||
flex: 1; height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer;
|
||||
}
|
||||
.appointment-card__btn--ghost { background: #f5f7fa; color: var(--text-secondary); border: 1px solid #ebeff2; }
|
||||
</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">‹</a>
|
||||
<span class="nav-title">我的预约</span>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- [交互] 点击 Tab 跳转对应页面 -->
|
||||
<div class="tabs">
|
||||
<a class="tabs__item" href="my-appointments-all.html">全部</a>
|
||||
<a class="tabs__item" href="my-appointments.html">待体检</a>
|
||||
<a class="tabs__item tabs__item--active" href="my-appointments-done.html">已体检</a>
|
||||
<a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
|
||||
</div>
|
||||
|
||||
<div class="appointment-list">
|
||||
<a class="appointment-card" href="my-appointments-detail-done.html" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--done">已体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head"><span>完成进度</span><span>26/26</span></div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
<a class="appointment-card" href="my-appointments-detail-gastro-done.html" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">胃肠镜体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--done">已体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item"><div class="meta-item__label">体检医院</div><div class="meta-item__value">宁夏宝石花医院</div></div>
|
||||
<div class="meta-item"><div class="meta-item__label">预约日期</div><div class="meta-item__value">2026-03-23</div></div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head"><span>完成进度</span><span>2/2</span></div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 100%;"></div></div>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,364 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
:root {
|
||||
--primary: #13c2c2;
|
||||
--primary-dark: #0f9b9b;
|
||||
--primary-light: #e6fffb;
|
||||
--success-bg: #f6ffed;
|
||||
--success-text: #52c41a;
|
||||
--warning-bg: #fff7e6;
|
||||
--warning-text: #fa8c16;
|
||||
--danger-bg: #fff1f0;
|
||||
--danger-text: #ff4d4f;
|
||||
--text-primary: #1a1a1a;
|
||||
--text-secondary: #666666;
|
||||
--text-muted: #8c8c8c;
|
||||
--bg-page: #f0f2f5;
|
||||
--bg-content: #f7f9fb;
|
||||
--border: #e8f3f3;
|
||||
--shadow: 0 10px 24px rgba(19, 194, 194, 0.06);
|
||||
}
|
||||
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: linear-gradient(180deg, #f0fbfb 0%, #f7f9fb 140px, #f7f9fb 100%);
|
||||
padding: 14px 16px 20px;
|
||||
}
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
background: rgba(255,255,255,0.92);
|
||||
border-radius: 18px;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.08);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.tabs__item {
|
||||
height: 36px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.tabs__item--active {
|
||||
background: var(--primary-light);
|
||||
color: var(--primary-dark);
|
||||
box-shadow: inset 0 0 0 1px rgba(19, 194, 194, 0.16);
|
||||
}
|
||||
.summary-bar {
|
||||
margin: 14px 0 12px;
|
||||
padding: 16px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 12px 24px rgba(19, 194, 194, 0.2);
|
||||
}
|
||||
.summary-bar__title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.summary-bar__desc {
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
opacity: 0.92;
|
||||
}
|
||||
.appointment-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.appointment-card {
|
||||
background: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 16px;
|
||||
border: 1px solid rgba(19, 194, 194, 0.06);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
.appointment-card__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.appointment-card__title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.appointment-card__status {
|
||||
flex-shrink: 0;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.appointment-card__status--pending {
|
||||
background: var(--warning-bg);
|
||||
color: var(--warning-text);
|
||||
}
|
||||
.appointment-card__status--done {
|
||||
background: var(--success-bg);
|
||||
color: var(--success-text);
|
||||
}
|
||||
.appointment-card__status--cancelled {
|
||||
background: var(--danger-bg);
|
||||
color: var(--danger-text);
|
||||
}
|
||||
.appointment-card__meta {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.meta-item {
|
||||
background: #f9fbfb;
|
||||
border-radius: 14px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #f0f5f5;
|
||||
}
|
||||
.meta-item__label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.meta-item__value {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.appointment-card__progress {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.progress-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
.progress-bar {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #eef3f3;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar__fill {
|
||||
height: 100%;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(90deg, #13c2c2 0%, #5cdbd3 100%);
|
||||
}
|
||||
.appointment-card__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
.appointment-card__btn {
|
||||
flex: 1;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.appointment-card__btn--ghost {
|
||||
background: #f5f7fa;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid #ebeff2;
|
||||
}
|
||||
.appointment-card__btn--primary {
|
||||
background: linear-gradient(135deg, #13c2c2 0%, #36cfc9 100%);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgba(19, 194, 194, 0.18);
|
||||
}
|
||||
.appointment-card[data-status="done"],
|
||||
.appointment-card[data-status="cancelled"] {
|
||||
opacity: 0.94;
|
||||
}
|
||||
</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">
|
||||
<!-- [交互] 点击返回至: index-v2.html -->
|
||||
<a class="nav-back" href="index.html">‹</a>
|
||||
<span class="nav-title">我的预约</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- [交互] 点击 Tab 跳转对应页面 -->
|
||||
<div class="tabs">
|
||||
<a class="tabs__item" href="my-appointments-all.html">全部</a>
|
||||
<a class="tabs__item tabs__item--active" href="my-appointments.html">待体检</a>
|
||||
<a class="tabs__item" href="my-appointments-done.html">已体检</a>
|
||||
<a class="tabs__item" href="my-appointments-cancelled.html">已取消</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="appointment-list">
|
||||
<!-- [交互] 点击卡片跳转至详情页，URL携带进度/医院/日期参数 -->
|
||||
<a class="appointment-card" data-status="pending" href="my-appointments-detail.html?done=5&total=26&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--pending">待体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">体检医院</div>
|
||||
<div class="meta-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">预约日期</div>
|
||||
<div class="meta-item__value">2026-03-23</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head">
|
||||
<span>体检进度</span>
|
||||
<span>5/26</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 19.2%;"></div></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="appointment-card" data-status="pending" href="my-appointments-detail.html?done=0&total=26&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">常规体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--pending">待体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">体检医院</div>
|
||||
<div class="meta-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">预约日期</div>
|
||||
<div class="meta-item__value">2026-03-23</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head">
|
||||
<span>体检进度</span>
|
||||
<span>0/26</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="appointment-card" data-status="pending" href="my-appointments-detail-gastro.html?done=0&total=2&hospital=宁夏宝石花医院&date=2026-03-23" style="text-decoration:none;color:inherit;">
|
||||
<div class="appointment-card__top">
|
||||
<div class="appointment-card__title">胃肠镜体检</div>
|
||||
<div class="appointment-card__status appointment-card__status--pending">待体检</div>
|
||||
</div>
|
||||
<div class="appointment-card__meta">
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">体检医院</div>
|
||||
<div class="meta-item__value">宁夏宝石花医院</div>
|
||||
</div>
|
||||
<div class="meta-item">
|
||||
<div class="meta-item__label">预约日期</div>
|
||||
<div class="meta-item__value">2026-03-23</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="appointment-card__progress">
|
||||
<div class="progress-head">
|
||||
<span>体检进度</span>
|
||||
<span>0/2</span>
|
||||
</div>
|
||||
<div class="progress-bar"><div class="progress-bar__fill" style="width: 0%;"></div></div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -417,8 +417,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<!-- [交互] 返回按钮：返回体检报告列表 -->
|
||||
<span class="nav-back" onclick="location.href='reports.html'">‹</span>
|
||||
<!-- [交互] 返回按钮：从消息详情进入（URL 带 msg）时返回该消息详情，否则返回体检报告列表 -->
|
||||
<span class="nav-back" onclick="goBack()">‹</span>
|
||||
<span class="nav-title">常规体检报告</span>
|
||||
<a class="nav-action" href="javascript:void(0)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
|
||||
@@ -725,8 +725,8 @@
|
||||
</div>
|
||||
|
||||
<div class="conclusion-wrap">
|
||||
<!-- [交互] 返回报告列表按钮 -->
|
||||
<button class="back-btn" onclick="location.href='reports.html'">
|
||||
<!-- [交互] 返回按钮：从消息详情进入时文案与目标切换为返回消息详情 -->
|
||||
<button class="back-btn" id="backBtn" onclick="goBack()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
|
||||
返回报告列表
|
||||
</button>
|
||||
@@ -752,6 +752,16 @@
|
||||
function toggleVoice(btn) {
|
||||
btn.classList.toggle('is-playing');
|
||||
}
|
||||
|
||||
/* [交互] 返回导航：URL 带 msg 参数（从体检消息详情进入）时返回该消息详情，否则返回报告列表 */
|
||||
function goBack() {
|
||||
var msgId = new URLSearchParams(location.search).get('msg');
|
||||
location.href = msgId ? 'message-detail.html?id=' + msgId : 'reports.html';
|
||||
}
|
||||
(function () {
|
||||
var msgId = new URLSearchParams(location.search).get('msg');
|
||||
if (msgId) document.getElementById('backBtn').lastChild.textContent = ' 返回消息详情';
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -35,24 +35,52 @@
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: linear-gradient(180deg, #f3fbfb 0%, #f7f9fb 160px, #f7f9fb 100%); }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.page-body { padding: 16px; }
|
||||
/* 顶部 AI 解读大卡片 */
|
||||
.ai-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #e6fffb 100%);
|
||||
border: 1px solid #b5f5ec; border-radius: 20px; padding: 20px 18px;
|
||||
box-shadow: 0 6px 18px rgba(20, 180, 176, 0.10); position: relative; overflow: hidden;
|
||||
/* 体检报告汇总卡 */
|
||||
.sum-card {
|
||||
background: linear-gradient(135deg, #1ec6c6 0%, #0d9292 100%);
|
||||
border-radius: 20px; padding: 16px 18px;
|
||||
box-shadow: 0 10px 26px rgba(17, 155, 155, 0.30);
|
||||
position: relative; overflow: hidden;
|
||||
display: flex; align-items: center; gap: 14px; color: #fff;
|
||||
}
|
||||
.ai-card::after {
|
||||
content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px;
|
||||
border-radius: 50%; background: rgba(19, 194, 194, 0.08);
|
||||
.sum-card::after {
|
||||
content: ''; position: absolute; right: -36px; top: -40px; width: 130px; height: 130px;
|
||||
border-radius: 50%; background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
.ai-card__badge {
|
||||
display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
|
||||
border-radius: 13px; background: rgba(19, 194, 194, 0.12); color: #08979c;
|
||||
font-size: 12px; font-weight: 600; margin-bottom: 10px;
|
||||
.sum-card::before {
|
||||
content: ''; position: absolute; right: 30px; bottom: -52px; width: 100px; height: 100px;
|
||||
border-radius: 50%; background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
.ai-card__title { font-size: 20px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; position: relative; z-index: 1; }
|
||||
.ai-card__sub { font-size: 13px; color: #13c2c2; font-weight: 600; margin-bottom: 8px; position: relative; z-index: 1; }
|
||||
.ai-card__desc { font-size: 13px; line-height: 1.7; color: #666; position: relative; z-index: 1; }
|
||||
.sum-card__num { font-size: 34px; font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 2px; }
|
||||
.sum-card__num small { font-size: 13px; font-weight: 600; opacity: 0.85; }
|
||||
.sum-card__cap { font-size: 11px; opacity: 0.78; margin-top: 5px; }
|
||||
.sum-card__divider { width: 1px; height: 44px; background: rgba(255, 255, 255, 0.30); flex-shrink: 0; }
|
||||
.sum-card__meta { display: flex; flex-direction: column; gap: 8px; font-size: 12px; position: relative; z-index: 1; }
|
||||
.sum-card__meta .k { opacity: 0.75; margin-right: 8px; }
|
||||
.sum-card__meta .v { font-weight: 700; }
|
||||
.sum-card__timeline { margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; }
|
||||
/* 五年趋势分析入口（精简条卡） */
|
||||
.trend-entry {
|
||||
margin-top: 10px;
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 11px 14px; border-radius: 16px;
|
||||
background: linear-gradient(135deg, #e6fbfb 0%, #f2fdfa 100%);
|
||||
border: 1px solid #b5f5ec;
|
||||
box-shadow: 0 4px 16px rgba(17, 155, 155, 0.06);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trend-entry:active { transform: scale(0.985); }
|
||||
.trend-entry__icon {
|
||||
width: 34px; height: 34px; border-radius: 11px; background: #fff;
|
||||
border: 1px solid #b5f5ec; display: flex; align-items: center; justify-content: center;
|
||||
color: #0d9292; flex-shrink: 0;
|
||||
}
|
||||
.trend-entry__icon svg { width: 18px; height: 18px; }
|
||||
.trend-entry__main { flex: 1; min-width: 0; }
|
||||
.trend-entry__title { font-size: 13px; font-weight: 700; color: #0d7878; margin-bottom: 2px; }
|
||||
.trend-entry__desc { font-size: 11px; color: #666; }
|
||||
.trend-entry__go { display: flex; align-items: center; color: #119b9b; flex-shrink: 0; }
|
||||
.trend-entry__go svg { width: 14px; height: 14px; }
|
||||
/* 报告列表 */
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 22px 2px 12px; }
|
||||
.report-list { display: flex; flex-direction: column; gap: 12px; }
|
||||
@@ -97,16 +125,41 @@
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<div class="page-body">
|
||||
<!-- 顶部 AI 解读大卡片 -->
|
||||
<div class="ai-card">
|
||||
<div class="ai-card__badge">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
|
||||
<span>AI解读</span>
|
||||
<!-- 体检报告汇总：连续年数 / 起始年份 / 报告总数 + 年度时间轴 -->
|
||||
<div class="sum-card">
|
||||
<div>
|
||||
<div class="sum-card__num">10<small>年</small></div>
|
||||
<div class="sum-card__cap">累计体检年份</div>
|
||||
</div>
|
||||
<div class="ai-card__title">体检报告解读</div>
|
||||
<div class="ai-card__desc">依托 AI 技术，自动解析体检报告数据，提供专业指标解读、风险评估与个性化健康指导。</div>
|
||||
<br>
|
||||
<div class="ai-card__sub">查看报告解读</div>
|
||||
<div class="sum-card__divider"></div>
|
||||
<div class="sum-card__meta">
|
||||
<div><span class="k">起始年份</span><span class="v">2012</span></div>
|
||||
<div><span class="k">报告总数</span><span class="v">11 份</span></div>
|
||||
</div>
|
||||
<svg class="sum-card__timeline" width="96" height="36" viewBox="0 0 96 36">
|
||||
<line x1="8" y1="11" x2="88" y2="11" stroke="rgba(255,255,255,0.4)" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="8" cy="11" r="4.5" fill="#fff"/>
|
||||
<circle cx="28" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
|
||||
<circle cx="48" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
|
||||
<circle cx="68" cy="11" r="2.8" fill="rgba(255,255,255,0.65)"/>
|
||||
<circle cx="88" cy="11" r="4.5" fill="#fff"/>
|
||||
<text x="1" y="31" font-size="9" fill="rgba(255,255,255,0.9)" text-anchor="start" font-weight="600">2021</text>
|
||||
<text x="95" y="31" font-size="9" fill="rgba(255,255,255,0.9)" text-anchor="end" font-weight="600">2025</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- [交互] 点击跳转至: indicator-compare.html（重点指标纵向对比总览） -->
|
||||
<div class="trend-entry" onclick="location.href='indicator-compare.html'">
|
||||
<div class="trend-entry__icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 7"/><polyline points="15 7 21 7 21 13"/></svg>
|
||||
</div>
|
||||
<div class="trend-entry__main">
|
||||
<div class="trend-entry__title">五年趋势分析</div>
|
||||
<div class="trend-entry__desc">17 项重点指标 · 较2024新增异常 1 / 改善 2</div>
|
||||
</div>
|
||||
<span class="trend-entry__go">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 报告列表 -->
|
||||
@@ -168,6 +221,34 @@
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: report-query.html（常规体检） -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon" style="background:#e6f7ff;color:#096dd9;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="report-item__content">
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2022年度体检报告</span>
|
||||
<span class="report-tag report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
<!-- [交互] 点击跳转至: report-query.html（常规体检） -->
|
||||
<div class="report-item" onclick="location.href='report-query.html'">
|
||||
<div class="report-item__icon" style="background:#e6f7ff;color:#096dd9;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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="report-item__content">
|
||||
<div class="report-item__header">
|
||||
<span class="report-item__title">2021年度体检报告</span>
|
||||
<span class="report-tag report-tag--regular">常规体检</span>
|
||||
</div>
|
||||
<div class="report-item__meta">CQ星龙园医院</div>
|
||||
</div>
|
||||
<span class="report-item__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
@@ -80,9 +80,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<!-- [交互] 点击返回按钮跳转到 find-expert.html -->
|
||||
<!-- [交互] 点击返回按钮跳转到 find-expert.html；从体检消息详情进入（URL 带 msg）时返回该消息详情 -->
|
||||
<div class="nav-bar">
|
||||
<a class="nav-back" onclick="window.location.href='find-expert.html'">‹</a>
|
||||
<a class="nav-back" id="navBack" href="find-expert.html">‹</a>
|
||||
<span class="nav-title" id="navTitle">科室专家</span>
|
||||
</div>
|
||||
|
||||
@@ -252,6 +252,9 @@
|
||||
/* ===== 根据 URL 参数动态切换页面内容 ===== */
|
||||
(function() {
|
||||
var params = new URLSearchParams(window.location.search);
|
||||
/* 从体检消息详情进入时（带 msg 参数），返回按钮指向该消息详情页 */
|
||||
var msgId = params.get('msg');
|
||||
if (msgId) document.getElementById('navBack').href = '../health-checkup/message-detail.html?id=' + msgId;
|
||||
var type = params.get('type');
|
||||
var name = params.get('name');
|
||||
if (!name) return;
|
||||
@@ -273,6 +276,14 @@
|
||||
{ n: '李明远', t: '主任医师', h: '北京协和医院·心内科', tags: ['高血压','心衰'], s: '4.9', c: '2100', r: '97%' },
|
||||
{ n: '赵雪梅', t: '主任医师', h: '广州中山医院·心内科', tags: ['高血压','冠心病'], s: '4.8', c: '1560', r: '95%' },
|
||||
{ n: '孙志强', t: '副主任医师', h: '北京天坛医院·心内科', tags: ['高血压','心律失常'], s: '4.7', c: '920', r: '92%' }
|
||||
],
|
||||
'高脂血症': [
|
||||
{ n: '吴永康', t: '主任医师', h: '上海瑞金医院·内分泌代谢科', tags: ['高脂血症','糖尿病'], s: '4.9', c: '1420', r: '95%' },
|
||||
{ n: '郑晓芬', t: '副主任医师', h: '广州中山医院·心内科', tags: ['高脂血症','动脉硬化'], s: '4.7', c: '780', r: '93%' }
|
||||
],
|
||||
'痛风': [
|
||||
{ n: '黄承志', t: '主任医师', h: '北京协和医院·风湿免疫科', tags: ['痛风','高尿酸血症'], s: '4.9', c: '1680', r: '96%' },
|
||||
{ n: '马文彬', t: '副主任医师', h: '上海瑞金医院·风湿免疫科', tags: ['痛风','关节炎'], s: '4.8', c: '940', r: '94%' }
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
+5
-7
@@ -593,17 +593,15 @@ const SITE_MAP = [
|
||||
{ file:'booking-project-selected.html', label:'预约-已选项目' },
|
||||
{ file:'booking-date.html', label:'预约-选择日期' },
|
||||
{ file:'booking-date-selected.html', label:'预约-已选日期' },
|
||||
{ file:'my-appointments-detail.html', label:'预约详情' },
|
||||
{ file:'my-appointments-detail-done.html', label:'预约详情-已完成' },
|
||||
{ file:'my-appointments-detail-cancelled.html', label:'预约详情-已取消' },
|
||||
{ file:'my-appointments.html', label:'我的预约-待体检' },
|
||||
{ file:'my-appointments-all.html', label:'我的预约-全部' },
|
||||
{ file:'my-appointments-done.html', label:'我的预约-已完成' },
|
||||
{ file:'my-appointments-cancelled.html', label:'我的预约-已取消' },
|
||||
{ file:'my-appointments-all.html', label:'我的预约' },
|
||||
{ file:'hospital-checkin.html', label:'到院体检' },
|
||||
{ file:'reports.html', label:'体检报告' },
|
||||
{ file:'report-query.html', label:'报告查询详情' },
|
||||
{ file:'indicator-compare.html', label:'指标纵向对比总览' },
|
||||
{ file:'indicator-compare-detail.html', label:'指标纵向对比详情' },
|
||||
{ file:'report-gastro.html', label:'胃肠镜报告详情' },
|
||||
{ file:'messages.html', label:'消息列表' },
|
||||
{ file:'message-detail.html', label:'消息详情' },
|
||||
{ file:'project-detail.html', label:'体检项目详情' }
|
||||
] },
|
||||
{ name:'体重管理', dir:'employee-app/weight-management', entry:'weight-main-v2.html', prd:'employee-app/weight-management/doc/PRD.md', done:true, pages:[
|
||||
|
||||
Reference in New Issue
Block a user