feat: 员工端新增一线医疗模块及医疗点PAD用药信息调整
- 新增 employee-app/frontline-medical 一线医疗模块共22个页面 - index.html 站点地图挂载一线医疗入口与页面清单 - 医疗点PAD端随访/日常用药卡片信息对齐（用法用量、价格、数量）
This commit is contained in:
liuyunqin
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>申请记录</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__date { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.status--pending { background: #fff3e6; color: #fa8c16; }
|
||||
.status--done { background: #e6f9ef; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.empty { text-align: center; color: #999; padding: 60px 0; font-size: 14px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="follow-list.html">‹</a><span class="nav-title">申请记录</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="card__head">
|
||||
<span class="card__date">申请随访日期：2026-09-16</span>
|
||||
<span class="status status--pending">待处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>症状描述：</b>偶有头晕，血压波动，服药后未见明显缓解</div>
|
||||
<div><b>申请时间：</b>2026-09-10 10:20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card__head">
|
||||
<span class="card__date">申请随访日期：2026-08-12</span>
|
||||
<span class="status status--done">已处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>症状描述：</b>血糖控制不佳，口渴多饮，近期体重下降</div>
|
||||
<div><b>申请时间：</b>2026-08-05 09:15</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card__head">
|
||||
<span class="card__date">申请随访日期：2026-06-18</span>
|
||||
<span class="status status--done">已处理</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>症状描述：</b>晨起头晕，血压偏高，请求医生评估用药方案</div>
|
||||
<div><b>申请时间：</b>2026-06-10 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.sec { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.sec__title { font-size: 15px; font-weight: 700; color: #1a1a1a; border-left: 3px solid #1677ff; padding-left: 8px; margin-bottom: 12px; }
|
||||
.namecard { display: flex; gap: 14px; align-items: center; }
|
||||
.namecard__name { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.namecard__meta { font-size: 12px; color: #666; line-height: 1.7; }
|
||||
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; font-size: 13px; color: #666; line-height: 1.7; }
|
||||
.kv b { color: #333; font-weight: 500; }
|
||||
.kv__full { grid-column: 1 / -1; }
|
||||
.pill { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 11px; background: rgba(49,156,255,.1); color: #319cff; margin-left: 6px; }
|
||||
.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 11px; margin-right: 4px; }
|
||||
.tag--ht { background: rgba(24,144,255,.12); color: #1890ff; }
|
||||
.tag--dm { background: rgba(42,193,139,.12); color: #2ac18b; }
|
||||
.med-card { background: #f2f6ff; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #4a5a7f; line-height: 1.9; margin-bottom: 10px; }
|
||||
.med-card b { color: #333; font-size: 14px; }
|
||||
.sign-box { height: 90px; border: 1px solid #e5e8ef; border-radius: 8px; background: #fbfcfe; display: flex; align-items: center; justify-content: center; }
|
||||
.sign-box span { font-family: KaiTi, serif; font-size: 30px; color: #333; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="follow-list.html">‹</a><span class="nav-title">随访详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="sec">
|
||||
<div class="namecard">
|
||||
<div class="namecard__info">
|
||||
<div class="namecard__name">岳春生<span class="pill">第3次</span></div>
|
||||
<div class="namecard__meta">男 · 54岁 · 员工编号 1035678</div>
|
||||
<div class="namecard__meta">联系电话：13956282214</div>
|
||||
<div class="namecard__meta">单位部门：陕E作业区-管理四中心</div>
|
||||
<div class="namecard__meta">慢病干预：<span class="tag tag--ht">高血压</span><span class="tag tag--dm">糖尿病</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">随访信息</div>
|
||||
<div class="kv" style="grid-template-columns:1fr">
|
||||
<div>随访医生：<b>石维国</b></div>
|
||||
<div>随访日期：<b>2026-08-20</b></div>
|
||||
<div>随访形式：<b>门诊随访</b></div>
|
||||
<div>效果评价：<b>良好</b></div>
|
||||
<div>下次随访：<b>2026-09-20</b></div>
|
||||
<div>症状：<b>偶有头晕，血压波动</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">体征</div>
|
||||
<div class="kv">
|
||||
<div>血压：<b>158/98 mmHg</b></div>
|
||||
<div>心率：<b>76 次/分</b></div>
|
||||
<div>血糖：<b>8.2 mmol/L</b></div>
|
||||
<div>身高：<b>172 cm</b></div>
|
||||
<div>体重：<b>78.5 kg</b></div>
|
||||
<div>BMI：<b>26.5（自动）</b></div>
|
||||
<div>腰围：<b>94 cm</b></div>
|
||||
<div>臀围：<b>98 cm</b></div>
|
||||
<div>腰身比：<b>0.96（自动）</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">生活方式</div>
|
||||
<div class="kv" style="grid-template-columns:1fr">
|
||||
<div>吸烟量：<b>10 支/日</b></div>
|
||||
<div>饮酒量：<b>偶尔</b></div>
|
||||
<div>运动：<b>3 次/周 · 30 分钟/次</b></div>
|
||||
<div>摄盐情况：<b>偏重</b></div>
|
||||
<div>心理调整：<b>良好</b></div>
|
||||
<div>遵医行为：<b>一般（服药不规律）</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">用药情况</div>
|
||||
<div class="med-card"><b>苯磺酸氨氯地平片</b><br>用法用量：口服，一日1次，一次1片</div>
|
||||
<div class="kv">
|
||||
<div>用药依从性：<b>一般</b></div>
|
||||
<div>药物不良反应：<b>无</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">风险评估与生活建议</div>
|
||||
<div class="kv" style="grid-template-columns:1fr">
|
||||
<div>原因：<b>服药不规律、高盐饮食、吸烟</b></div>
|
||||
<div>措施：<b>调整降压方案，加强戒烟与限盐宣教</b></div>
|
||||
<div>膳食处方：<b>低盐低脂，每日主食控制在 6 两以内</b></div>
|
||||
<div>运动处方：<b>每日快走 30 分钟，每周不少于 5 次</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">员工签字</div>
|
||||
<div class="sign-box"><span>岳春生</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,156 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>随访记录</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__date { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__form { font-size: 12px; color: #1677ff; background: #e6f2ff; border-radius: 8px; padding: 2px 8px; }
|
||||
.card__times { font-size: 11px; color: #319cff; background: rgba(49,156,255,.1); border-radius: 10px; padding: 2px 10px; font-weight: 500; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.card__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
|
||||
.effect { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.effect--good { background: #e6f9ef; color: #52c41a; }
|
||||
.effect--mid { background: #fff3e6; color: #fa8c16; }
|
||||
.effect--bad { background: #fff1f0; color: #f5222d; }
|
||||
.next { font-size: 12px; color: #999; }
|
||||
|
||||
/* 底部固定操作区 */
|
||||
.footer { flex-shrink: 0; background: #fff; padding: 10px 16px 14px; box-shadow: 0 -2px 6px rgba(0,0,0,0.04); }
|
||||
.footer__btn { width: 100%; height: 44px; border-radius: 22px; border: none; background: #1677ff; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; }
|
||||
.footer__link { text-align: center; font-size: 13px; color: #1677ff; margin-top: 8px; cursor: pointer; }
|
||||
|
||||
/* 申请随访弹窗 */
|
||||
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; display: none; align-items: flex-end; }
|
||||
.overlay.open { display: flex; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 28px; }
|
||||
.sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; }
|
||||
.sheet__field { margin-bottom: 14px; }
|
||||
.sheet__field label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
|
||||
.sheet__field input, .sheet__field textarea { width: 100%; border: 1px solid #e0e0e0; border-radius: 8px; padding: 0 12px; font-size: 14px; color: #333; outline: none; font-family: inherit; }
|
||||
.sheet__field input { height: 40px; }
|
||||
.sheet__field textarea { height: 88px; padding: 10px 12px; resize: none; }
|
||||
.sheet__field input:focus, .sheet__field textarea:focus { border-color: #1677ff; }
|
||||
.sheet__foot { display: flex; gap: 12px; margin-top: 20px; }
|
||||
.sheet__foot button { flex: 1; height: 44px; border-radius: 22px; font-size: 15px; cursor: pointer; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-confirm { background: #1677ff; color: #fff; border: none; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="card" onclick="window.location.href='follow-detail.html'">
|
||||
<div class="card__head">
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span class="card__date">2026-08-20</span>
|
||||
<span class="card__times">第3次</span>
|
||||
</div>
|
||||
<span class="card__form">门诊随访</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>随访医生：</b>石维国</div>
|
||||
<div><b>症状：</b>偶有头晕，血压波动</div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<span class="effect effect--good">随访效果 · 良好</span>
|
||||
<span class="next">下次随访 2026-09-20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="window.location.href='follow-detail.html'">
|
||||
<div class="card__head">
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span class="card__date">2026-07-20</span>
|
||||
<span class="card__times">第2次</span>
|
||||
</div>
|
||||
<span class="card__form">巡诊随访</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>随访医生：</b>石维国</div>
|
||||
<div><b>症状：</b>血压偏高，偶有头晕</div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<span class="effect effect--mid">随访效果 · 一般</span>
|
||||
<span class="next">下次随访 2026-08-20</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="window.location.href='follow-detail.html'">
|
||||
<div class="card__head">
|
||||
<div style="display:flex;align-items:center;gap:8px">
|
||||
<span class="card__date">2026-06-15</span>
|
||||
<span class="card__times">第1次</span>
|
||||
</div>
|
||||
<span class="card__form">电话随访</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>随访医生：</b>李静</div>
|
||||
<div><b>症状：</b>血糖控制尚可</div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<span class="effect effect--good">随访效果 · 良好</span>
|
||||
<span class="next">下次随访 2026-07-20</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部固定操作区 -->
|
||||
<div class="footer">
|
||||
<button class="footer__btn" onclick="openApplySheet()">申请随访</button>
|
||||
<div class="footer__link" onclick="window.location.href='follow-apply-records.html'">申请记录</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请随访弹窗 -->
|
||||
<div class="overlay" id="applySheet">
|
||||
<div class="sheet">
|
||||
<div class="sheet__title">申请随访</div>
|
||||
<div class="sheet__field">
|
||||
<label>申请随访日期</label>
|
||||
<input type="date" id="applyDate" value="2026-09-16">
|
||||
</div>
|
||||
<div class="sheet__field">
|
||||
<label>症状描述</label>
|
||||
<textarea id="applySymptom" placeholder="请输入症状描述"></textarea>
|
||||
</div>
|
||||
<div class="sheet__foot">
|
||||
<button class="btn-cancel" onclick="closeApplySheet()">取消</button>
|
||||
<button class="btn-confirm" onclick="submitApply()">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openApplySheet() { document.getElementById('applySheet').classList.add('open'); }
|
||||
function closeApplySheet() { document.getElementById('applySheet').classList.remove('open'); }
|
||||
function submitApply() {
|
||||
var date = document.getElementById('applyDate').value;
|
||||
var symptom = document.getElementById('applySymptom').value.trim();
|
||||
if (!date) { alert('请选择申请随访日期'); return; }
|
||||
if (!symptom) { alert('请填写症状描述'); return; }
|
||||
closeApplySheet();
|
||||
alert('随访申请已提交');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__room { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.card__status--booked { background: #fff7e6; color: #fa8c16; }
|
||||
.card__status--done { background: #e6f9ef; color: #52c41a; }
|
||||
.card__status--cancelled { background: #f5f5f5; color: #999; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.card__main { display: flex; gap: 10px; align-items: center; }
|
||||
.card__img { width: 64px; height: 64px; border-radius: 8px; background: #f5f7fa; border: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; flex-shrink: 0; }
|
||||
.card__qr { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
|
||||
.qr-mini { width: 56px; height: 56px; padding: 3px; background: #fff; border: 1px solid #eee; border-radius: 6px; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); }
|
||||
.qr-cell { background: #fff; }
|
||||
.qr-cell--dark { background: #1a1a1a; }
|
||||
.card__foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
|
||||
.btn-cancel { font-size: 12px; color: #f5222d; border: 1px solid #f5222d; border-radius: 14px; padding: 4px 14px; background: #fff; cursor: pointer; }
|
||||
|
||||
/* 取消预约二次确认弹窗 */
|
||||
.dialog-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-overlay.open { display: flex; }
|
||||
.dialog { width: 280px; background: #fff; border-radius: 14px; padding: 24px 20px 16px; text-align: center; }
|
||||
.dialog__title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.dialog__text { font-size: 13px; color: #666; margin-bottom: 20px; }
|
||||
.dialog__foot { display: flex; gap: 12px; }
|
||||
.dialog__foot button { flex: 1; height: 40px; border-radius: 20px; font-size: 14px; cursor: pointer; }
|
||||
.btn-dialog-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-dialog-confirm { background: #f5222d; color: #fff; border: none; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="tab-bar">
|
||||
<div class="tab-bar__item tab-bar__item--active">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-booked.html'">已预约</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-done.html'">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('樊学站点健康小屋','booked','血压检测仪','2026-09-09','09:00 - 09:30')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-09 09:00 - 09:30</span>
|
||||
<span class="card__status card__status--booked">已预约</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血压检测仪</div>
|
||||
<div><b>健康小屋：</b>樊学站点健康小屋</div>
|
||||
</div>
|
||||
<div class="card__qr"><div class="qr-mini" data-seed="101"></div></div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<button class="btn-cancel" onclick="event.stopPropagation();openCancelDialog(this)">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('兴隆园健康小屋','booked','血糖检测仪','2026-09-10','10:00 - 10:15')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-10 10:00 - 10:15</span>
|
||||
<span class="card__status card__status--booked">已预约</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血糖检测仪</div>
|
||||
<div><b>健康小屋：</b>兴隆园健康小屋</div>
|
||||
</div>
|
||||
<div class="card__qr"><div class="qr-mini" data-seed="202"></div></div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<button class="btn-cancel" onclick="event.stopPropagation();openCancelDialog(this)">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('樊学站点健康小屋','done','体脂秤','2026-09-02','09:00 - 09:15')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-02 09:00 - 09:15</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>体脂秤</div>
|
||||
<div><b>健康小屋：</b>樊学站点健康小屋</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('兴隆园健康小屋','done','血压检测仪','2026-08-25','14:00 - 14:30')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-08-25 14:00 - 14:30</span>
|
||||
<span class="card__status card__status--done">已完成</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血压检测仪</div>
|
||||
<div><b>健康小屋：</b>兴隆园健康小屋</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 取消预约二次确认弹窗 -->
|
||||
<div class="dialog-overlay" id="cancelDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__title">取消预约</div>
|
||||
<div class="dialog__text">确定要取消该预约吗？取消后需重新预约。</div>
|
||||
<div class="dialog__foot">
|
||||
<button class="btn-dialog-cancel" onclick="closeCancelDialog()">暂不取消</button>
|
||||
<button class="btn-dialog-confirm" onclick="confirmCancel()">确定取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 跳转预约详情，携带预约信息
|
||||
function goDetail(hut, status, dev, date, time) {
|
||||
var q = new URLSearchParams({ hut: hut, status: status, dev: dev, date: date, time: time });
|
||||
window.location.href = 'hut-booking-detail.html?' + q.toString();
|
||||
}
|
||||
// 取消预约：二次确认后原地改为已取消状态
|
||||
var cancelCard = null;
|
||||
function openCancelDialog(btn) {
|
||||
cancelCard = btn.closest('.card');
|
||||
document.getElementById('cancelDialog').classList.add('open');
|
||||
}
|
||||
function closeCancelDialog() { document.getElementById('cancelDialog').classList.remove('open'); }
|
||||
function confirmCancel() {
|
||||
if (cancelCard) {
|
||||
var badge = cancelCard.querySelector('.card__status');
|
||||
badge.textContent = '已取消';
|
||||
badge.className = 'card__status card__status--cancelled';
|
||||
var foot = cancelCard.querySelector('.card__foot');
|
||||
if (foot) foot.remove();
|
||||
var qr = cancelCard.querySelector('.card__qr');
|
||||
if (qr) qr.remove();
|
||||
}
|
||||
closeCancelDialog();
|
||||
}
|
||||
// 生成卡片小二维码（21×21 伪码，含三个定位角框，按 data-seed 确定性填充）
|
||||
document.querySelectorAll('.qr-mini').forEach(function (box) {
|
||||
var N = 21, s = parseInt(box.dataset.seed, 10) || 1;
|
||||
function rand() { s = (s * 9301 + 49297) % 233280; return s / 233280; }
|
||||
function finder(r, c) {
|
||||
if (r < 7 && c < 7) return true;
|
||||
if (r < 7 && c >= N - 7) return true;
|
||||
if (r >= N - 7 && c < 7) return true;
|
||||
return false;
|
||||
}
|
||||
function finderDark(r, c) {
|
||||
var local = function (rr, cc) {
|
||||
var outer = rr === 0 || rr === 6 || cc === 0 || cc === 6;
|
||||
var inner = rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4;
|
||||
return outer || inner;
|
||||
};
|
||||
if (r < 7 && c < 7) return local(r, c);
|
||||
if (r < 7 && c >= N - 7) return local(r, c - (N - 7));
|
||||
if (r >= N - 7 && c < 7) return local(r - (N - 7), c);
|
||||
return false;
|
||||
}
|
||||
for (var r = 0; r < N; r++) {
|
||||
for (var c = 0; c < N; c++) {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'qr-cell';
|
||||
if (finder(r, c)) {
|
||||
if (finderDark(r, c)) cell.classList.add('qr-cell--dark');
|
||||
} else if (rand() > 0.5) {
|
||||
cell.classList.add('qr-cell--dark');
|
||||
}
|
||||
box.appendChild(cell);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约 · 已预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__room { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; background: #fff7e6; color: #fa8c16; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.card__main { display: flex; gap: 10px; align-items: center; }
|
||||
.card__img { width: 64px; height: 64px; border-radius: 8px; background: #f5f7fa; border: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; flex-shrink: 0; }
|
||||
.card__qr { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
|
||||
.qr-mini { width: 56px; height: 56px; padding: 3px; background: #fff; border: 1px solid #eee; border-radius: 6px; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); }
|
||||
.qr-cell { background: #fff; }
|
||||
.qr-cell--dark { background: #1a1a1a; }
|
||||
.card__foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
|
||||
.btn-cancel { font-size: 12px; color: #f5222d; border: 1px solid #f5222d; border-radius: 14px; padding: 4px 14px; background: #fff; cursor: pointer; }
|
||||
|
||||
/* 取消预约二次确认弹窗 */
|
||||
.dialog-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-overlay.open { display: flex; }
|
||||
.dialog { width: 280px; background: #fff; border-radius: 14px; padding: 24px 20px 16px; text-align: center; }
|
||||
.dialog__title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.dialog__text { font-size: 13px; color: #666; margin-bottom: 20px; }
|
||||
.dialog__foot { display: flex; gap: 12px; }
|
||||
.dialog__foot button { flex: 1; height: 40px; border-radius: 20px; font-size: 14px; cursor: pointer; }
|
||||
.btn-dialog-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-dialog-confirm { background: #f5222d; color: #fff; border: none; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-all.html'">全部</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已预约</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-done.html'">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('樊学站点健康小屋','booked','血压检测仪','2026-09-09','09:00 - 09:30')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-09 09:00 - 09:30</span>
|
||||
<span class="card__status">已预约</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血压检测仪</div>
|
||||
<div><b>健康小屋：</b>樊学站点健康小屋</div>
|
||||
</div>
|
||||
<div class="card__qr"><div class="qr-mini" data-seed="101"></div></div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<button class="btn-cancel" onclick="event.stopPropagation();openCancelDialog(this)">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('兴隆园健康小屋','booked','血糖检测仪','2026-09-10','10:00 - 10:15')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-10 10:00 - 10:15</span>
|
||||
<span class="card__status">已预约</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血糖检测仪</div>
|
||||
<div><b>健康小屋：</b>兴隆园健康小屋</div>
|
||||
</div>
|
||||
<div class="card__qr"><div class="qr-mini" data-seed="202"></div></div>
|
||||
</div>
|
||||
<div class="card__foot">
|
||||
<button class="btn-cancel" onclick="event.stopPropagation();openCancelDialog(this)">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 取消预约二次确认弹窗 -->
|
||||
<div class="dialog-overlay" id="cancelDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__title">取消预约</div>
|
||||
<div class="dialog__text">确定要取消该预约吗？取消后需重新预约。</div>
|
||||
<div class="dialog__foot">
|
||||
<button class="btn-dialog-cancel" onclick="closeCancelDialog()">暂不取消</button>
|
||||
<button class="btn-dialog-confirm" onclick="confirmCancel()">确定取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 跳转预约详情，携带预约信息
|
||||
function goDetail(hut, status, dev, date, time) {
|
||||
var q = new URLSearchParams({ hut: hut, status: status, dev: dev, date: date, time: time });
|
||||
window.location.href = 'hut-booking-detail.html?' + q.toString();
|
||||
}
|
||||
// 取消预约：二次确认后原地改为已取消状态
|
||||
var cancelCard = null;
|
||||
function openCancelDialog(btn) {
|
||||
cancelCard = btn.closest('.card');
|
||||
document.getElementById('cancelDialog').classList.add('open');
|
||||
}
|
||||
function closeCancelDialog() { document.getElementById('cancelDialog').classList.remove('open'); }
|
||||
function confirmCancel() {
|
||||
if (cancelCard) {
|
||||
var badge = cancelCard.querySelector('.card__status');
|
||||
badge.textContent = '已取消';
|
||||
badge.style.background = '#f5f5f5';
|
||||
badge.style.color = '#999';
|
||||
var foot = cancelCard.querySelector('.card__foot');
|
||||
if (foot) foot.remove();
|
||||
var qr = cancelCard.querySelector('.card__qr');
|
||||
if (qr) qr.remove();
|
||||
}
|
||||
closeCancelDialog();
|
||||
}
|
||||
// 生成卡片小二维码（21×21 伪码，含三个定位角框，按 data-seed 确定性填充）
|
||||
document.querySelectorAll('.qr-mini').forEach(function (box) {
|
||||
var N = 21, s = parseInt(box.dataset.seed, 10) || 1;
|
||||
function rand() { s = (s * 9301 + 49297) % 233280; return s / 233280; }
|
||||
function finder(r, c) {
|
||||
if (r < 7 && c < 7) return true;
|
||||
if (r < 7 && c >= N - 7) return true;
|
||||
if (r >= N - 7 && c < 7) return true;
|
||||
return false;
|
||||
}
|
||||
function finderDark(r, c) {
|
||||
var local = function (rr, cc) {
|
||||
var outer = rr === 0 || rr === 6 || cc === 0 || cc === 6;
|
||||
var inner = rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4;
|
||||
return outer || inner;
|
||||
};
|
||||
if (r < 7 && c < 7) return local(r, c);
|
||||
if (r < 7 && c >= N - 7) return local(r, c - (N - 7));
|
||||
if (r >= N - 7 && c < 7) return local(r - (N - 7), c);
|
||||
return false;
|
||||
}
|
||||
for (var r = 0; r < N; r++) {
|
||||
for (var c = 0; c < N; c++) {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'qr-cell';
|
||||
if (finder(r, c)) {
|
||||
if (finderDark(r, c)) cell.classList.add('qr-cell--dark');
|
||||
} else if (rand() > 0.5) {
|
||||
cell.classList.add('qr-cell--dark');
|
||||
}
|
||||
box.appendChild(cell);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.qrcode-card { background: #fff; border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 12px; }
|
||||
.qrcode-card__head { display: flex; align-items: center; gap: 10px; }
|
||||
.qrcode-card__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; }
|
||||
.status--booked { background: #fff7e6; color: #fa8c16; }
|
||||
.status--done { background: #e6f9ef; color: #52c41a; }
|
||||
.status--cancelled { background: #f5f5f5; color: #999; }
|
||||
.qrcode-card__hint { font-size: 12px; color: #999; margin: 6px 0 18px; }
|
||||
.qr-box { width: 180px; height: 180px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); gap: 1px; }
|
||||
.qr-cell { background: #fff; }
|
||||
.qr-cell--dark { background: #1a1a1a; }
|
||||
.qrcode-card__expire { font-size: 12px; color: #fa8c16; margin-top: 14px; }
|
||||
.info-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.info-card__status { display: none; justify-content: flex-end; margin-bottom: 10px; }
|
||||
.row { display: flex; font-size: 13px; line-height: 1.7; margin-bottom: 8px; align-items: center; }
|
||||
.row:last-child { margin-bottom: 0; }
|
||||
.row__label { width: 96px; color: #999; flex-shrink: 0; }
|
||||
.row__value { flex: 1; color: #333; }
|
||||
.row__value--bold { font-weight: 600; color: #1a1a1a; }
|
||||
.nav-btn { width: 28px; height: 28px; border-radius: 50%; background: #e6f2ff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
|
||||
.cancel-bar { margin-top: 16px; display: none; }
|
||||
.btn-cancel-booking { width: 100%; height: 44px; border-radius: 22px; border: 1px solid #f5222d; background: #fff; color: #f5222d; font-size: 15px; cursor: pointer; }
|
||||
|
||||
/* 取消预约二次确认弹窗 */
|
||||
.dialog-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-overlay.open { display: flex; }
|
||||
.dialog { width: 280px; background: #fff; border-radius: 14px; padding: 24px 20px 16px; text-align: center; }
|
||||
.dialog__title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; }
|
||||
.dialog__text { font-size: 13px; color: #666; margin-bottom: 20px; }
|
||||
.dialog__foot { display: flex; gap: 12px; }
|
||||
.dialog__foot button { flex: 1; height: 40px; border-radius: 20px; font-size: 14px; cursor: pointer; }
|
||||
.btn-dialog-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-dialog-confirm { background: #f5222d; color: #fff; border: none; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="hut-booking-all.html">‹</a><span class="nav-title">预约详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<!-- 电子二维码 + 预约状态 -->
|
||||
<div class="qrcode-card" id="qrCard">
|
||||
<div class="qrcode-card__head">
|
||||
<div class="qrcode-card__title">预约电子码</div>
|
||||
<span class="status status--booked" id="statusBadge">已预约</span>
|
||||
</div>
|
||||
<div class="qrcode-card__hint">请向医务人员出示，扫码核验预约信息</div>
|
||||
<div class="qr-box" id="qrBox"></div>
|
||||
<div class="qrcode-card__expire">本码仅用于本次预约核验，请勿转借他人</div>
|
||||
</div>
|
||||
|
||||
<!-- 预约信息 -->
|
||||
<div class="info-card">
|
||||
<div class="info-card__status" id="infoStatus"><span class="status" id="statusBadge2">已预约</span></div>
|
||||
<div class="row"><span class="row__label">预约单号</span><span class="row__value row__value--bold" id="fNo">—</span></div>
|
||||
<div class="row"><span class="row__label">预约人</span><span class="row__value">张旭</span></div>
|
||||
<div class="row"><span class="row__label">预约手机号</span><span class="row__value">18544555589</span></div>
|
||||
<div class="row"><span class="row__label">预约健康小屋</span><span class="row__value" id="fHut">—</span></div>
|
||||
<div class="row">
|
||||
<span class="row__label">健康小屋位置</span>
|
||||
<span class="row__value" id="fAddr">—</span>
|
||||
<span class="nav-btn"><svg width="15" height="15" viewBox="0 0 24 24" fill="#1677ff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="row"><span class="row__label">预约设备</span><span class="row__value" id="fDev">—</span></div>
|
||||
<div class="row"><span class="row__label">预约时段</span><span class="row__value" id="fTime">—</span></div>
|
||||
<div class="row" id="rowCheckin" style="display:none"><span class="row__label">签到时间</span><span class="row__value" id="fCheckin">—</span></div>
|
||||
<div class="row" id="rowCancelTime" style="display:none"><span class="row__label">取消时间</span><span class="row__value" id="fCancelTime">—</span></div>
|
||||
<div class="row"><span class="row__label">创建时间</span><span class="row__value" id="fCreated">—</span></div>
|
||||
</div>
|
||||
|
||||
<!-- 取消预约（仅已预约状态显示） -->
|
||||
<div class="cancel-bar" id="cancelBar">
|
||||
<button class="btn-cancel-booking" onclick="openCancelDialog()">取消预约</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 取消预约二次确认弹窗 -->
|
||||
<div class="dialog-overlay" id="cancelDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__title">取消预约</div>
|
||||
<div class="dialog__text">确定要取消该预约吗？取消后需重新预约。</div>
|
||||
<div class="dialog__foot">
|
||||
<button class="btn-dialog-cancel" onclick="closeCancelDialog()">暂不取消</button>
|
||||
<button class="btn-dialog-confirm" onclick="confirmCancel()">确定取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var ADDR = {
|
||||
'樊学站点健康小屋': '定边县樊学镇樊学站点院内',
|
||||
'兴隆园健康小屋': '西安市未央区CQ兴隆园小区',
|
||||
'机关健康小屋': 'CQ能源公司机关大楼一层'
|
||||
};
|
||||
var q = new URLSearchParams(location.search);
|
||||
var hut = q.get('hut') || '樊学站点健康小屋';
|
||||
var dev = q.get('dev') || '血压检测仪';
|
||||
var date = q.get('date') || '2026-09-09';
|
||||
var time = q.get('time') || '09:00 - 09:30';
|
||||
var status = q.get('status') || 'booked';
|
||||
|
||||
// 预约状态：已预约徽标在电子码卡片上；已完成/已隐藏电子码时在信息卡片右上角补显
|
||||
function statusInfo() {
|
||||
if (status === 'done') return { t: '已完成', c: 'status--done' };
|
||||
if (status === 'cancelled') return { t: '已取消', c: 'status--cancelled' };
|
||||
return { t: '已预约', c: 'status--booked' };
|
||||
}
|
||||
var badge = document.getElementById('statusBadge');
|
||||
function renderStatus() {
|
||||
var s = statusInfo();
|
||||
badge.textContent = s.t;
|
||||
badge.className = 'status ' + s.c;
|
||||
var alt = document.getElementById('statusBadge2');
|
||||
alt.textContent = s.t;
|
||||
alt.className = 'status ' + s.c;
|
||||
}
|
||||
if (status === 'done' || status === 'cancelled') {
|
||||
document.getElementById('qrCard').style.display = 'none';
|
||||
document.getElementById('infoStatus').style.display = 'flex';
|
||||
}
|
||||
// 已取消：预约时间下方展示取消时间（取预约时段开始前 1 小时）
|
||||
function showCancelTime() {
|
||||
var start = (time.split(' - ')[0] || '09:00').split(':');
|
||||
var dc = new Date(date + 'T00:00:00');
|
||||
dc.setHours(parseInt(start[0], 10), parseInt(start[1], 10) - 60);
|
||||
var p = function (n) { return (n < 10 ? '0' : '') + n; };
|
||||
document.getElementById('fCancelTime').textContent = date + ' ' + p(dc.getHours()) + ':' + p(dc.getMinutes());
|
||||
document.getElementById('rowCancelTime').style.display = 'flex';
|
||||
}
|
||||
if (status === 'cancelled') showCancelTime();
|
||||
renderStatus();
|
||||
|
||||
// 取消预约：仅已预约状态展示按钮，点击后弹二次确认，确认才改为已取消
|
||||
var cancelBar = document.getElementById('cancelBar');
|
||||
if (status === 'booked') cancelBar.style.display = 'block';
|
||||
function openCancelDialog() { document.getElementById('cancelDialog').classList.add('open'); }
|
||||
function closeCancelDialog() { document.getElementById('cancelDialog').classList.remove('open'); }
|
||||
function confirmCancel() {
|
||||
status = 'cancelled';
|
||||
renderStatus();
|
||||
cancelBar.style.display = 'none';
|
||||
document.getElementById('qrCard').style.display = 'none';
|
||||
document.getElementById('infoStatus').style.display = 'flex';
|
||||
showCancelTime();
|
||||
closeCancelDialog();
|
||||
}
|
||||
|
||||
// 预约单号：按预约信息生成确定性编号
|
||||
var seedStr = hut + dev + date;
|
||||
var seed = 0;
|
||||
for (var i = 0; i < seedStr.length; i++) seed = (seed * 31 + seedStr.charCodeAt(i)) % 100000;
|
||||
document.getElementById('fNo').textContent = 'HB' + date.replace(/-/g, '') + ('0000' + seed).slice(-4);
|
||||
|
||||
document.getElementById('fHut').textContent = hut;
|
||||
document.getElementById('fAddr').textContent = ADDR[hut] || ADDR['樊学站点健康小屋'];
|
||||
document.getElementById('fDev').textContent = dev;
|
||||
document.getElementById('fTime').textContent = date + ' ' + time;
|
||||
|
||||
// 已完成：不显示电子码，预约时间下方展示签到时间（取预约时段开始后 3 分钟）
|
||||
if (status === 'done') {
|
||||
document.getElementById('qrCard').style.display = 'none';
|
||||
var start = (time.split(' - ')[0] || '09:00').split(':');
|
||||
var d0 = new Date(date + 'T00:00:00');
|
||||
d0.setHours(parseInt(start[0], 10), parseInt(start[1], 10) + 3);
|
||||
var pad = function (n) { return (n < 10 ? '0' : '') + n; };
|
||||
document.getElementById('fCheckin').textContent = date + ' ' + pad(d0.getHours()) + ':' + pad(d0.getMinutes());
|
||||
document.getElementById('rowCheckin').style.display = 'flex';
|
||||
}
|
||||
|
||||
// 创建时间：预约日期前一天
|
||||
var d = new Date(date + 'T00:00:00');
|
||||
d.setDate(d.getDate() - 1);
|
||||
var pad = function (n) { return (n < 10 ? '0' : '') + n; };
|
||||
document.getElementById('fCreated').textContent = d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' 16:32';
|
||||
|
||||
// 生成 21×21 伪二维码（含三个定位角框，按预约单号作 seed 确定性填充）
|
||||
(function () {
|
||||
var N = 21, s = seed || 1;
|
||||
function rand() { s = (s * 9301 + 49297) % 233280; return s / 233280; }
|
||||
var box = document.getElementById('qrBox');
|
||||
function finder(r, c) {
|
||||
if (r < 7 && c < 7) return true;
|
||||
if (r < 7 && c >= N - 7) return true;
|
||||
if (r >= N - 7 && c < 7) return true;
|
||||
return false;
|
||||
}
|
||||
function finderDark(r, c) {
|
||||
var local = function (rr, cc) {
|
||||
var outer = rr === 0 || rr === 6 || cc === 0 || cc === 6;
|
||||
var inner = rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4;
|
||||
return outer || inner;
|
||||
};
|
||||
if (r < 7 && c < 7) return local(r, c);
|
||||
if (r < 7 && c >= N - 7) return local(r, c - (N - 7));
|
||||
if (r >= N - 7 && c < 7) return local(r - (N - 7), c);
|
||||
return false;
|
||||
}
|
||||
for (var r = 0; r < N; r++) {
|
||||
for (var c = 0; c < N; c++) {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'qr-cell';
|
||||
if (finder(r, c)) {
|
||||
if (finderDark(r, c)) cell.classList.add('qr-cell--dark');
|
||||
} else if (rand() > 0.5) {
|
||||
cell.classList.add('qr-cell--dark');
|
||||
}
|
||||
box.appendChild(cell);
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的预约 · 已完成</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.tab-bar { display: flex; background: #fff; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
|
||||
.tab-bar__item { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; color: #666; cursor: pointer; border-bottom: 2px solid transparent; }
|
||||
.tab-bar__item--active { color: #1677ff; font-weight: 600; border-bottom-color: #1677ff; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__room { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__status { font-size: 12px; padding: 2px 10px; border-radius: 10px; font-weight: 500; background: #e6f9ef; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.card__main { display: flex; gap: 10px; align-items: center; }
|
||||
.card__img { width: 64px; height: 64px; border-radius: 8px; background: #f5f7fa; border: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; flex-shrink: 0; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="tab-bar">
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-all.html'">全部</div>
|
||||
<div class="tab-bar__item" onclick="window.location.href='hut-booking-booked.html'">已预约</div>
|
||||
<div class="tab-bar__item tab-bar__item--active">已完成</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('樊学站点健康小屋','done','体脂秤','2026-09-02','09:00 - 09:15')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-09-02 09:00 - 09:15</span>
|
||||
<span class="card__status">已完成</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>体脂秤</div>
|
||||
<div><b>健康小屋：</b>樊学站点健康小屋</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" onclick="goDetail('兴隆园健康小屋','done','血压检测仪','2026-08-25','14:00 - 14:30')">
|
||||
<div class="card__head">
|
||||
<span class="card__room">2026-08-25 14:00 - 14:30</span>
|
||||
<span class="card__status">已完成</span>
|
||||
</div>
|
||||
<div class="card__main">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div><b>设备：</b>血压检测仪</div>
|
||||
<div><b>健康小屋：</b>兴隆园健康小屋</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 跳转预约详情，携带预约信息
|
||||
function goDetail(hut, status, dev, date, time) {
|
||||
var q = new URLSearchParams({ hut: hut, status: status, dev: dev, date: date, time: time });
|
||||
window.location.href = 'hut-booking-detail.html?' + q.toString();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约信息</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #fff; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 预约人/设备信息 */
|
||||
.ti-row { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
|
||||
.ti-row__label { font-size: 17px; font-weight: 700; color: #1a1a1a; }
|
||||
.ti-row__value { font-size: 16px; color: #999; }
|
||||
.divider { height: 10px; background: #f0f2f5; }
|
||||
|
||||
.sec-title { padding: 18px 16px 4px; font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.sec-title--sub { font-size: 16px; font-weight: 400; color: #333; padding-top: 20px; }
|
||||
|
||||
/* 日历 */
|
||||
.cal__head { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 10px 0 2px; }
|
||||
.cal__arrow { cursor: pointer; color: #666; font-size: 20px; line-height: 1; padding: 6px 12px; user-select: none; }
|
||||
.cal__arrow--off { color: #d0d0d0; cursor: default; }
|
||||
.cal__month { font-size: 19px; font-weight: 700; color: #1a1a1a; }
|
||||
.cal__week, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 10px; }
|
||||
.cal__week span { text-align: center; font-size: 15px; color: #333; font-weight: 600; padding: 14px 0 6px; }
|
||||
.cal-cell { height: 48px; display: flex; align-items: center; justify-content: center; }
|
||||
.cal-cell span { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #333; }
|
||||
.cal-cell--dim span, .cal-cell--off span { color: #c8c9cc; }
|
||||
.cal-cell--sel span { background: #00b578; color: #fff; font-weight: 600; }
|
||||
.cal-cell--pick { cursor: pointer; }
|
||||
|
||||
/* 时段网格 */
|
||||
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; padding: 10px 16px 16px; }
|
||||
.slot-chip { width: 100%; height: 44px; border: 1px solid #e0e0e0; border-radius: 22px; background: #fff; font-size: 15px; color: #333; cursor: pointer; }
|
||||
.slot-chip--active { border-color: #00b578; color: #00b578; background: #e8f8f1; }
|
||||
.slot-chip--off { background: #d9d9d9; border-color: #d9d9d9; color: #aaa; cursor: not-allowed; }
|
||||
|
||||
/* 底部确定按钮 */
|
||||
.footbar { flex-shrink: 0; padding: 10px 16px 24px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.btn-submit { width: 100%; height: 46px; border: none; border-radius: 23px; background: #00b578; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.btn-submit--disabled { background: #d9d9d9; cursor: not-allowed; }
|
||||
|
||||
/* 确定预约二次确认弹窗 */
|
||||
.dialog-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 70; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-overlay.open { display: flex; }
|
||||
.dialog { width: 330px; background: #fff; border-radius: 14px; padding: 24px 20px 16px; text-align: center; }
|
||||
.dialog__title { font-size: 16px; font-weight: 600; color: #1a1a1a; margin-bottom: 16px; }
|
||||
.dialog__info { background: #f7f8fa; border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; text-align: left; }
|
||||
.dialog__row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; line-height: 2.2; }
|
||||
.dialog__row span:first-child { color: #999; flex-shrink: 0; }
|
||||
.dialog__row span:last-child { color: #1a1a1a; font-weight: 600; white-space: nowrap; text-align: right; }
|
||||
.dialog__foot { display: flex; gap: 12px; }
|
||||
.dialog__foot button { flex: 1; height: 40px; border-radius: 20px; font-size: 14px; cursor: pointer; }
|
||||
.btn-dialog-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-dialog-confirm { background: #00b578; color: #fff; border: none; }
|
||||
</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="hut-detail.html">‹</a><span class="nav-title">预约信息</span></div>
|
||||
<div class="scroll-content">
|
||||
<!-- 预约人 / 预约设备 -->
|
||||
<div class="ti-row"><span class="ti-row__label">预约人</span><span class="ti-row__value">张旭-男-健康科</span></div>
|
||||
<div class="ti-row"><span class="ti-row__label">预约设备</span><span class="ti-row__value" id="tiDev">血压检测仪</span></div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 选择时间 -->
|
||||
<div class="sec-title">选择时间</div>
|
||||
<div class="cal__head">
|
||||
<span class="cal__arrow" id="calPrev">‹</span>
|
||||
<span class="cal__month" id="calMonth">2026年09月</span>
|
||||
<span class="cal__arrow" id="calNext">›</span>
|
||||
</div>
|
||||
<div class="cal__week"><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></div>
|
||||
<div class="cal__grid" id="calGrid"></div>
|
||||
|
||||
<!-- 选择具体时间 -->
|
||||
<div class="sec-title sec-title--sub">选择具体时间</div>
|
||||
<div class="slots" id="slotGrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- 底部确定 -->
|
||||
<div class="footbar">
|
||||
<button class="btn-submit btn-submit--disabled" id="btnConfirm" disabled>确定预约</button>
|
||||
</div>
|
||||
|
||||
<!-- 确定预约二次确认弹窗 -->
|
||||
<div class="dialog-overlay" id="confirmDialog">
|
||||
<div class="dialog">
|
||||
<div class="dialog__title">确认预约</div>
|
||||
<div class="dialog__info">
|
||||
<div class="dialog__row"><span>预约设备</span><span id="dlgDev">—</span></div>
|
||||
<div class="dialog__row"><span>预约时段</span><span id="dlgTime">—</span></div>
|
||||
</div>
|
||||
<div class="dialog__foot">
|
||||
<button class="btn-dialog-cancel" id="dlgCancelBtn">取消</button>
|
||||
<button class="btn-dialog-confirm" id="dlgOkBtn">确定预约</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 原型时间锚定 2026-09-10 12:00（与列表页"今天 09-10"、状态栏时间一致）
|
||||
var TODAY = { y: 2026, m: 9, d: 10, h: 12, min: 0 };
|
||||
var view = { y: 2026, m: 9 };
|
||||
var FULL = { 13: 1, 17: 1, 18: 1, 19: 1, 20: 1, 21: 1, 22: 1, 23: 1, 24: 1, 25: 1, 26: 1, 27: 1, 28: 1, 29: 1, 30: 1 }; // 9月已约满/不可约
|
||||
var sel = null;
|
||||
var slotSel = null;
|
||||
|
||||
var params = new URLSearchParams(location.search);
|
||||
document.getElementById('tiDev').textContent = params.get('name') || '血压检测仪';
|
||||
|
||||
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
||||
function daysInMonth(y, m) { return new Date(y, m, 0).getDate(); }
|
||||
function firstWeekday(y, m) { return new Date(y, m - 1, 1).getDay(); }
|
||||
function isPast(y, m, d) { return y < TODAY.y || (y === TODAY.y && m < TODAY.m) || (y === TODAY.y && m === TODAY.m && d < TODAY.d); }
|
||||
function isOff(y, m, d) { return isPast(y, m, d) || (y === 2026 && m === 9 && FULL[d]); }
|
||||
|
||||
function renderCal() {
|
||||
document.getElementById('calMonth').textContent = view.y + '年' + pad(view.m) + '月';
|
||||
document.getElementById('calPrev').className = view.y === 2026 && view.m === 9 ? 'cal__arrow cal__arrow--off' : 'cal__arrow';
|
||||
document.getElementById('calNext').className = view.y === 2026 && view.m === 12 ? 'cal__arrow cal__arrow--off' : 'cal__arrow';
|
||||
var grid = document.getElementById('calGrid');
|
||||
grid.innerHTML = '';
|
||||
var prevM = view.m === 1 ? 12 : view.m - 1, prevY = view.m === 1 ? view.y - 1 : view.y;
|
||||
var nextM = view.m === 12 ? 1 : view.m + 1, nextY = view.m === 12 ? view.y + 1 : view.y;
|
||||
var dim = daysInMonth(view.y, view.m), lead = firstWeekday(view.y, view.m);
|
||||
var cells = Math.ceil((lead + dim) / 7) * 7;
|
||||
for (var i = 0; i < cells; i++) {
|
||||
(function (i) {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'cal-cell';
|
||||
var span = document.createElement('span');
|
||||
if (i < lead) {
|
||||
span.textContent = daysInMonth(prevY, prevM) - lead + 1 + i;
|
||||
cell.classList.add('cal-cell--dim');
|
||||
} else if (i >= lead + dim) {
|
||||
span.textContent = i - (lead + dim) + 1;
|
||||
cell.classList.add('cal-cell--dim');
|
||||
} else {
|
||||
var d = i - lead + 1;
|
||||
span.textContent = d;
|
||||
if (isOff(view.y, view.m, d)) {
|
||||
cell.classList.add('cal-cell--off');
|
||||
} else {
|
||||
cell.classList.add('cal-cell--pick');
|
||||
if (sel && sel.y === view.y && sel.m === view.m && sel.d === d) cell.classList.add('cal-cell--sel');
|
||||
cell.addEventListener('click', function () {
|
||||
sel = { y: view.y, m: view.m, d: d };
|
||||
clearSlots();
|
||||
renderCal();
|
||||
});
|
||||
}
|
||||
}
|
||||
cell.appendChild(span);
|
||||
grid.appendChild(cell);
|
||||
})(i);
|
||||
}
|
||||
}
|
||||
|
||||
// 时段：off 停用 / full 已约满 / 今天已开始的时刻均置灰不可选
|
||||
var SLOTS = [
|
||||
{ t: '09:30 - 09:50' }, { t: '09:50 - 10:10', full: true }, { t: '10:10 - 10:30' },
|
||||
{ t: '10:30 - 10:50' }, { t: '10:50 - 11:10' }, { t: '11:10 - 11:30' },
|
||||
{ t: '11:30 - 11:50' }, { t: '12:00 - 12:20' }, { t: '12:20 - 12:40' },
|
||||
{ t: '12:40 - 13:00' }, { t: '13:00 - 13:20', off: true }, { t: '13:20 - 13:40', off: true }
|
||||
];
|
||||
|
||||
function slotOff(y, m, d, s) {
|
||||
if (s.off || s.full) return true;
|
||||
if (y === TODAY.y && m === TODAY.m && d === TODAY.d) {
|
||||
var hm = s.t.split(' - ')[0].split(':');
|
||||
return (+hm[0]) * 60 + (+hm[1]) < TODAY.h * 60 + TODAY.min;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function renderSlots() {
|
||||
var wrap = document.getElementById('slotGrid');
|
||||
wrap.innerHTML = '';
|
||||
SLOTS.forEach(function (s) {
|
||||
var cell = document.createElement('div');
|
||||
var btn = document.createElement('button');
|
||||
btn.type = 'button';
|
||||
var off = slotOff(sel.y, sel.m, sel.d, s);
|
||||
btn.className = 'slot-chip' + (off ? ' slot-chip--off' : '') + (slotSel === s.t ? ' slot-chip--active' : '');
|
||||
btn.textContent = s.t;
|
||||
if (off) {
|
||||
btn.disabled = true;
|
||||
} else {
|
||||
btn.addEventListener('click', function () {
|
||||
slotSel = s.t;
|
||||
renderSlots();
|
||||
setConfirm(true);
|
||||
});
|
||||
}
|
||||
cell.appendChild(btn);
|
||||
wrap.appendChild(cell);
|
||||
});
|
||||
}
|
||||
|
||||
function clearSlots() { slotSel = null; renderSlots(); setConfirm(false); }
|
||||
function setConfirm(on) {
|
||||
var b = document.getElementById('btnConfirm');
|
||||
b.disabled = !on;
|
||||
b.className = 'btn-submit' + (on ? '' : ' btn-submit--disabled');
|
||||
}
|
||||
|
||||
// 确定预约：先弹设备/时间段二次确认，确认后进入预约详情（已预约）
|
||||
function selDateStr() { return sel.y + '-' + pad(sel.m) + '-' + pad(sel.d); }
|
||||
document.getElementById('btnConfirm').addEventListener('click', function () {
|
||||
if (!slotSel) return;
|
||||
document.getElementById('dlgDev').textContent = document.getElementById('tiDev').textContent;
|
||||
document.getElementById('dlgTime').textContent = selDateStr() + ' ' + slotSel;
|
||||
document.getElementById('confirmDialog').classList.add('open');
|
||||
});
|
||||
document.getElementById('dlgCancelBtn').addEventListener('click', function () {
|
||||
document.getElementById('confirmDialog').classList.remove('open');
|
||||
});
|
||||
document.getElementById('dlgOkBtn').addEventListener('click', function () {
|
||||
location.href = 'hut-booking-detail.html?dev=' + encodeURIComponent(document.getElementById('tiDev').textContent)
|
||||
+ '&date=' + selDateStr()
|
||||
+ '&time=' + encodeURIComponent(slotSel)
|
||||
+ '&status=booked';
|
||||
});
|
||||
document.getElementById('calPrev').addEventListener('click', function () {
|
||||
if (view.y === 2026 && view.m === 9) return;
|
||||
view.m -= 1; if (view.m === 0) { view.m = 12; view.y -= 1; }
|
||||
clearSlots(); renderCal();
|
||||
});
|
||||
document.getElementById('calNext').addEventListener('click', function () {
|
||||
if (view.y === 2026 && view.m === 12) return;
|
||||
view.m += 1; if (view.m === 13) { view.m = 1; view.y += 1; }
|
||||
clearSlots(); renderCal();
|
||||
});
|
||||
|
||||
sel = { y: TODAY.y, m: TODAY.m, d: TODAY.d };
|
||||
renderCal();
|
||||
renderSlots();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,315 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>预约设备</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #fff; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 小屋信息 */
|
||||
.hut { display: flex; gap: 12px; padding: 14px 16px; align-items: flex-start; }
|
||||
.hut__img { width: 84px; height: 84px; border-radius: 8px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; flex-shrink: 0; }
|
||||
.hut__body { flex: 1; min-width: 0; }
|
||||
.hut__name { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
|
||||
.hut__addr { font-size: 13px; color: #999; margin-top: 8px; }
|
||||
.hut__time { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.hut__nav { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: 4px; }
|
||||
.hut__nav-btn { width: 36px; height: 36px; border-radius: 50%; background: #c9cdd4; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.hut__dist { font-size: 13px; color: #666; }
|
||||
.hut-tip { margin: 0 16px 4px; padding: 7px 10px; border-radius: 6px; background: #fff3e6; color: #fa8c16; font-size: 12px; display: none; align-items: center; gap: 5px; }
|
||||
|
||||
/* 设备分类 Tab */
|
||||
.tabs { display: flex; padding: 0 8px; border-bottom: 1px solid #f0f0f0; }
|
||||
.tab { flex: 1; text-align: center; font-size: 15px; color: #333; padding: 12px 0 10px; cursor: pointer; position: relative; }
|
||||
.tab--active { color: #1a1a1a; font-weight: 600; }
|
||||
.tab--active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #3a7bf2, #00c48c); }
|
||||
|
||||
/* 设备列表 */
|
||||
.dev-list { padding: 0 16px; }
|
||||
.dev { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f0f0f0; align-items: center; cursor: pointer; }
|
||||
.dev:last-child { border-bottom: none; }
|
||||
.dev__img { width: 84px; height: 84px; border-radius: 8px; background: #f5f7fa; border: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 12px; flex-shrink: 0; }
|
||||
.dev__body { flex: 1; min-width: 0; }
|
||||
.dev__name { font-size: 16px; font-weight: 600; color: #1a1a1a; }
|
||||
.dev__desc { font-size: 13px; color: #999; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.btn-book { flex-shrink: 0; height: 34px; padding: 0 14px; border-radius: 17px; border: none; background: #00b578; color: #fff; font-size: 14px; cursor: pointer; }
|
||||
.btn-book--disabled { background: #d9d9d9; cursor: not-allowed; }
|
||||
|
||||
/* 预约弹窗 */
|
||||
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; display: none; align-items: flex-end; }
|
||||
.overlay.open { display: flex; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 28px; }
|
||||
.sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.sheet__sub { font-size: 12px; color: #999; margin-bottom: 16px; }
|
||||
.sheet__label { font-size: 13px; color: #666; margin-bottom: 8px; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
||||
.chip { padding: 7px 14px; border-radius: 16px; border: 1px solid #e0e0e0; font-size: 13px; color: #333; cursor: pointer; }
|
||||
.chip--active { border-color: #00b578; color: #00b578; background: #e8f8f1; }
|
||||
.chip--disabled { color: #ccc; border-color: #f0f0f0; cursor: not-allowed; }
|
||||
.sheet__foot { display: flex; gap: 12px; margin-top: 20px; }
|
||||
.sheet__foot button { flex: 1; height: 44px; border-radius: 22px; font-size: 15px; cursor: pointer; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-confirm { background: #00b578; color: #fff; border: none; }
|
||||
.notice { font-size: 13px; color: #666; line-height: 1.9; white-space: pre-line; }
|
||||
.sheet__dev { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
|
||||
.sheet__dev-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.sheet__dev-tag { padding: 2px 8px; border-radius: 5px; font-size: 11px; color: #fff; }
|
||||
.sheet__dev-tag--measure { background: #00b578; }
|
||||
.sheet__dev-tag--psych { background: #7a72e6; }
|
||||
.sheet__dev-tag--treat { background: #3a7bf2; }
|
||||
.sheet__dev-tag--monitor { background: #fa8c16; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="hut-list.html">‹</a><span class="nav-title">预约设备</span></div>
|
||||
<div class="scroll-content">
|
||||
<!-- 小屋信息 -->
|
||||
<div class="hut">
|
||||
<div class="hut__img">小屋图片</div>
|
||||
<div class="hut__body">
|
||||
<div class="hut__name">樊学站点健康小屋</div>
|
||||
<div class="hut__addr">定边县樊学镇樊学站点院内</div>
|
||||
<div class="hut__time">07:30 - 12:00 | 12:00 - 18:30</div>
|
||||
</div>
|
||||
<div class="hut__nav">
|
||||
<div class="hut__nav-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg></div>
|
||||
<span class="hut__dist">3.5 km</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 不可用提示 -->
|
||||
<div class="hut-tip" id="hutTip"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fa8c16" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16.5v.01"/></svg>当前所在单位不在可用范围</div>
|
||||
|
||||
<!-- 设备分类 -->
|
||||
<div class="tabs" id="tabs">
|
||||
<span class="tab tab--active" data-cat="measure">测量设备</span>
|
||||
<span class="tab" data-cat="psych">心理检测</span>
|
||||
<span class="tab" data-cat="treat">治疗设备</span>
|
||||
<span class="tab" data-cat="monitor">监测设备</span>
|
||||
</div>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<div class="dev-list" id="devList">
|
||||
<div class="dev" data-cat="measure">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">血压检测仪</div>
|
||||
<div class="dev__desc">自动测量血压与脉搏，语音引导操作</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('血压检测仪')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="measure">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">血糖检测仪</div>
|
||||
<div class="dev__desc">指尖采血快速检测，5 秒出结果</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('血糖检测仪')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="measure">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">体脂秤</div>
|
||||
<div class="dev__desc">多频生物电阻抗技术，体成分分析</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('体脂秤')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="treat" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">智能艾灸治疗仪</div>
|
||||
<div class="dev__desc">恒温艾灸理疗，缓解疲劳不适</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('智能艾灸治疗仪')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="treat" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">中频脉冲治疗仪</div>
|
||||
<div class="dev__desc">中频脉冲理疗，改善局部血液循环</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('中频脉冲治疗仪')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="monitor" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">动态血压监测仪</div>
|
||||
<div class="dev__desc">监测设备免预约，到店登记使用</div>
|
||||
</div>
|
||||
<button class="btn-book btn-book--disabled" disabled>免预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="monitor" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">动态心电监测仪</div>
|
||||
<div class="dev__desc">监测设备免预约，到店登记使用</div>
|
||||
</div>
|
||||
<button class="btn-book btn-book--disabled" disabled>免预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">经络深睡眠舱</div>
|
||||
<div class="dev__desc">心理学、催眠技术</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('经络深睡眠舱')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">3D心理数字训练舱</div>
|
||||
<div class="dev__desc">3D情景互动训练，改善情绪与认知</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('3D心理数字训练舱')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">沉浸式冥想放松舱</div>
|
||||
<div class="dev__desc">沉浸式冥想引导，舒缓压力放松身心</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('沉浸式冥想放松舱')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">运动心理康养舱</div>
|
||||
<div class="dev__desc">运动与心理双向调节，缓解身心疲劳</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('运动心理康养舱')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">心理智能穿戴设备</div>
|
||||
<div class="dev__desc">情绪、压力等心理指标实时监测</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('心理智能穿戴设备')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">心理测评一体机</div>
|
||||
<div class="dev__desc">多种专业心理量表，自动生成测评报告</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('心理测评一体机')">立即预约</button>
|
||||
</div>
|
||||
<div class="dev" data-cat="psych" style="display:none">
|
||||
<div class="dev__img">设备图片</div>
|
||||
<div class="dev__body">
|
||||
<div class="dev__name">心理测试一体机</div>
|
||||
<div class="dev__desc">常规心理测试，评估心理健康状态</div>
|
||||
</div>
|
||||
<button class="btn-book" onclick="openSheet('心理测试一体机')">立即预约</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 预约须知弹窗 -->
|
||||
<div class="overlay" id="bookSheet">
|
||||
<div class="sheet">
|
||||
<div class="sheet__title">预约须知</div>
|
||||
<div class="sheet__dev">
|
||||
<span class="sheet__dev-name" id="sheetDevName">血压检测仪</span>
|
||||
<span class="sheet__dev-tag" id="sheetDevTag">测量设备</span>
|
||||
</div>
|
||||
<div class="notice" id="noticeBody"></div>
|
||||
<div class="sheet__foot">
|
||||
<button class="btn-cancel" onclick="closeSheet()">取消</button>
|
||||
<button class="btn-confirm" id="btnGoBooking">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var CAT_LABEL = { measure: '测量设备', psych: '心理检测', treat: '治疗设备', monitor: '监测设备' };
|
||||
var DEV_INFO = {
|
||||
'血压检测仪': 'measure', '血糖检测仪': 'measure', '体脂秤': 'measure',
|
||||
'经络深睡眠舱': 'psych', '3D心理数字训练舱': 'psych', '沉浸式冥想放松舱': 'psych',
|
||||
'运动心理康养舱': 'psych', '心理智能穿戴设备': 'psych', '心理测评一体机': 'psych', '心理测试一体机': 'psych',
|
||||
'智能艾灸治疗仪': 'treat', '中频脉冲治疗仪': 'treat',
|
||||
'动态血压监测仪': 'monitor', '动态心电监测仪': 'monitor'
|
||||
};
|
||||
// 每台设备各自的预约须知
|
||||
var NOTICES = {
|
||||
'血压检测仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测量前静坐 5 分钟，避免剧烈运动、吸烟、饮咖啡后立即测量；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 测量数据将自动同步至个人健康档案。',
|
||||
'血糖检测仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 建议空腹或餐后 2 小时检测，采血前用温水洗手促进循环；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 检测数据将自动同步至个人健康档案。',
|
||||
'体脂秤': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测量时赤足上秤、穿着轻薄衣物，测前避免大量饮水与剧烈运动；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 心脏起搏器植入者等特殊人群请勿使用。',
|
||||
'经络深睡眠舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，入场请摘除手表、首饰等金属物品；\n3. 着装宽松，舱内温度较高，如有不适请随时按呼叫铃；\n4. 孕妇及心脑血管疾病急性期人群不建议使用。',
|
||||
'3D心理数字训练舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次训练 30 分钟，训练前请听从工作人员引导完成基础测评；\n3. 训练过程中如出现眩晕等不适请立即暂停；\n4. 训练报告将自动同步至个人健康档案。',
|
||||
'沉浸式冥想放松舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，入场请保持安静，手机调至静音；\n3. 着装宽松舒适，舱内备有一次性卫生垫；\n4. 有幽闭恐惧史请提前告知工作人员。',
|
||||
'运动心理康养舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，请穿着运动服装与防滑袜入场；\n3. 体验前后适量补水，避免空腹或饱腹状态参与；\n4. 高血压、心脏病人群请遵医嘱使用。',
|
||||
'心理智能穿戴设备': '1. 请按预约时段到店，凭个人电子码签到领取设备；\n2. 佩戴于手腕、松紧适度，单次采集 30 分钟；\n3. 采集期间保持情绪平稳，避免剧烈活动影响数据；\n4. 设备请勿浸水、磕碰，使用完毕归还工作人员。',
|
||||
'心理测评一体机': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测评约 20-30 分钟，请在安静状态下独立作答，答案无对错之分；\n3. 测评结束自动生成报告，可在个人健康档案中查看；\n4. 结果异常建议预约专业心理咨询进一步评估。',
|
||||
'心理测试一体机': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次测试约 20 分钟，请在安静状态下独立作答；\n3. 测试结束即出结果，结果仅供自我了解参考；\n4. 测试数据将自动同步至个人健康档案。',
|
||||
'智能艾灸治疗仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次理疗 30 分钟，理疗部位皮肤保持清洁干燥；\n3. 温热感适宜即可，如有灼痛请立即告知工作人员；\n4. 孕妇、皮肤破损及糖尿病末梢感觉障碍者请勿使用。',
|
||||
'中频脉冲治疗仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次理疗 30 分钟，强度由低到高缓慢调节，以耐受为宜；\n3. 皮肤破损、感染部位请勿放置电极片；\n4. 孕妇、心脏起搏器植入者请勿使用。',
|
||||
'动态血压监测仪': '1. 免预约设备，到店登记后领取使用；\n2. 佩戴 24 小时，按日常作息活动，测量时保持手臂静止；\n3. 请勿自行摘除袖带或触碰设备按键；\n4. 监测结束归还设备，报告由工作人员解读并同步健康档案。',
|
||||
'动态心电监测仪': '1. 免预约设备，到店登记后领取使用；\n2. 佩戴期间避免大量出汗、淋雨，电极片脱落请及时回店更换；\n3. 请记录佩戴期间不适症状的时间，便于报告分析；\n4. 监测结束归还设备，报告由专业医师解读。'
|
||||
};
|
||||
var DEFAULT_NOTICE = '1. 请按预约时段到店，凭个人电子码签到使用设备；\n2. 单次时长 30 分钟，每人每日最多预约 2 台设备；\n3. 如无法按时到店，请提前在预约记录中取消；\n4. 具体注意事项请咨询小屋工作人员。';
|
||||
var currentDev = '血压检测仪';
|
||||
function openSheet(dev) {
|
||||
currentDev = dev;
|
||||
document.getElementById('sheetDevName').textContent = dev;
|
||||
var cat = DEV_INFO[dev] || 'measure';
|
||||
var tag = document.getElementById('sheetDevTag');
|
||||
tag.textContent = CAT_LABEL[cat];
|
||||
tag.className = 'sheet__dev-tag sheet__dev-tag--' + cat;
|
||||
document.getElementById('noticeBody').textContent = NOTICES[dev] || DEFAULT_NOTICE;
|
||||
document.getElementById('bookSheet').classList.add('open');
|
||||
}
|
||||
function closeSheet() { document.getElementById('bookSheet').classList.remove('open'); }
|
||||
// 预约须知确定 → 预约信息页
|
||||
document.getElementById('btnGoBooking').addEventListener('click', function () {
|
||||
location.href = 'hut-booking-info.html?name=' + encodeURIComponent(currentDev);
|
||||
});
|
||||
// 设备分类 Tab 切换
|
||||
document.querySelectorAll('#tabs .tab').forEach(function (tab) {
|
||||
tab.addEventListener('click', function () {
|
||||
document.querySelectorAll('#tabs .tab').forEach(function (t) { t.classList.remove('tab--active'); });
|
||||
tab.classList.add('tab--active');
|
||||
document.querySelectorAll('#devList .dev').forEach(function (dev) {
|
||||
dev.style.display = dev.dataset.cat === tab.dataset.cat ? 'flex' : 'none';
|
||||
});
|
||||
});
|
||||
});
|
||||
// 点击设备条目跳转设备详情，预约状态随参数带过去
|
||||
document.querySelectorAll('#devList .btn-book').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) { e.stopPropagation(); });
|
||||
});
|
||||
document.querySelectorAll('#devList .dev').forEach(function (row) {
|
||||
row.addEventListener('click', function () {
|
||||
var bookable = row.querySelector('.btn-book--disabled') ? 0 : 1;
|
||||
var available = new URLSearchParams(location.search).get('available') === '0' ? 0 : 1;
|
||||
location.href = 'hut-device-detail.html?name=' + encodeURIComponent(row.querySelector('.dev__name').textContent)
|
||||
+ '&cat=' + row.dataset.cat + '&bookable=' + bookable + '&available=' + available;
|
||||
});
|
||||
});
|
||||
// 接收列表页带来的可用状态：available=0 表示当前单位不在可用范围
|
||||
if (new URLSearchParams(location.search).get('available') === '0') {
|
||||
document.getElementById('hutTip').style.display = 'flex';
|
||||
document.querySelectorAll('.btn-book:not(.btn-book--disabled)').forEach(function (btn) {
|
||||
btn.disabled = true;
|
||||
btn.classList.add('btn-book--disabled');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>设备详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #fff; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 设备大图 */
|
||||
.hero { height: 250px; background: linear-gradient(135deg, #eef5ff, #e2ecfb); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #9db4d0; }
|
||||
.hero__txt { font-size: 13px; }
|
||||
|
||||
/* 名称与归属信息 */
|
||||
.head { padding: 16px 16px 18px; }
|
||||
.head__name-row { display: flex; align-items: center; gap: 10px; }
|
||||
.head__name { font-size: 20px; font-weight: 700; color: #1a1a1a; }
|
||||
.tag { flex-shrink: 0; padding: 3px 10px; border-radius: 6px; font-size: 12px; color: #fff; }
|
||||
.tag--measure { background: #00b578; }
|
||||
.tag--psych { background: #7a72e6; }
|
||||
.tag--treat { background: #3a7bf2; }
|
||||
.tag--monitor { background: #fa8c16; }
|
||||
.head__hut { font-size: 14px; color: #999; margin-top: 10px; }
|
||||
.head__addr { font-size: 14px; color: #999; margin-top: 4px; }
|
||||
|
||||
.divider { height: 10px; background: #f0f2f5; }
|
||||
|
||||
/* 设备介绍 */
|
||||
.intro { padding: 18px 16px 24px; }
|
||||
.intro__title { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.intro__text { font-size: 15px; color: #666; line-height: 1.9; white-space: pre-line; }
|
||||
|
||||
/* 底部预约栏 */
|
||||
.footbar { flex-shrink: 0; padding: 10px 16px 24px; background: #fff; border-top: 1px solid #f0f0f0; }
|
||||
.btn-main { width: 100%; height: 46px; border: none; border-radius: 23px; background: linear-gradient(90deg, #00c48c, #3a7bf2); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
.btn-main--disabled { background: #d9d9d9; cursor: not-allowed; }
|
||||
|
||||
/* 预约弹窗 */
|
||||
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; display: none; align-items: flex-end; }
|
||||
.overlay.open { display: flex; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 28px; }
|
||||
.sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.sheet__sub { font-size: 12px; color: #999; margin-bottom: 16px; }
|
||||
.sheet__label { font-size: 13px; color: #666; margin-bottom: 8px; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
||||
.chip { padding: 7px 14px; border-radius: 16px; border: 1px solid #e0e0e0; font-size: 13px; color: #333; cursor: pointer; }
|
||||
.chip--active { border-color: #00b578; color: #00b578; background: #e8f8f1; }
|
||||
.chip--disabled { color: #ccc; border-color: #f0f0f0; cursor: not-allowed; }
|
||||
.sheet__foot { display: flex; gap: 12px; margin-top: 20px; }
|
||||
.sheet__foot button { flex: 1; height: 44px; border-radius: 22px; font-size: 15px; cursor: pointer; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-confirm { background: #00b578; color: #fff; border: none; }
|
||||
.notice { font-size: 13px; color: #666; line-height: 1.9; white-space: pre-line; }
|
||||
.sheet__dev { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
|
||||
.sheet__dev-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.sheet__dev-tag { padding: 2px 8px; border-radius: 5px; font-size: 11px; color: #fff; }
|
||||
.sheet__dev-tag--measure { background: #00b578; }
|
||||
.sheet__dev-tag--psych { background: #7a72e6; }
|
||||
.sheet__dev-tag--treat { background: #3a7bf2; }
|
||||
.sheet__dev-tag--monitor { background: #fa8c16; }
|
||||
</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" id="navBack" href="hut-detail.html">‹</a><span class="nav-title">设备详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<!-- 设备大图 -->
|
||||
<div class="hero">
|
||||
<svg width="72" height="72" viewBox="0 0 24 24" fill="none" stroke="#b8cbe2" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M7 20h10M12 16v4"/><path d="M8 8h8M8 11h5"/></svg>
|
||||
<span class="hero__txt">设备图片</span>
|
||||
</div>
|
||||
|
||||
<!-- 名称与归属 -->
|
||||
<div class="head">
|
||||
<div class="head__name-row">
|
||||
<span class="head__name" id="devName">血压检测仪</span>
|
||||
<span class="tag tag--measure" id="devTag">测量设备</span>
|
||||
</div>
|
||||
<div class="head__hut">樊学站点健康小屋</div>
|
||||
<div class="head__addr">定边县樊学镇樊学站点院内</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- 设备介绍 -->
|
||||
<div class="intro">
|
||||
<div class="intro__title">设备介绍</div>
|
||||
<div class="intro__text" id="devIntro"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部预约栏 -->
|
||||
<div class="footbar">
|
||||
<button class="btn-main" id="btnMain" onclick="openSheet()">立即预约</button>
|
||||
</div>
|
||||
|
||||
<!-- 预约须知弹窗 -->
|
||||
<div class="overlay" id="bookSheet">
|
||||
<div class="sheet">
|
||||
<div class="sheet__title">预约须知</div>
|
||||
<div class="sheet__dev">
|
||||
<span class="sheet__dev-name" id="sheetDevName">血压检测仪</span>
|
||||
<span class="sheet__dev-tag" id="sheetDevTag">测量设备</span>
|
||||
</div>
|
||||
<div class="notice" id="noticeBody"></div>
|
||||
<div class="sheet__foot">
|
||||
<button class="btn-cancel" onclick="closeSheet()">取消</button>
|
||||
<button class="btn-confirm" id="btnGoBooking">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var CAT_LABEL = { measure: '测量设备', psych: '心理检测', treat: '治疗设备', monitor: '监测设备' };
|
||||
var INTROS = {
|
||||
'血压检测仪': '采用示波法自动测量收缩压、舒张压与脉搏，全程语音引导，适合中老年员工自主操作。\n测量数据自动同步至个人健康档案，异常数值现场提示并给出复测建议。\n适用于高血压筛查、日常血压监测与用药效果跟踪。',
|
||||
'血糖检测仪': '指尖采血快速检测，5 秒出结果，试纸自动校准，操作简单。\n支持空腹血糖与餐后血糖记录，测量数据自动同步至个人健康档案。\n适用于糖尿病筛查、血糖日常监测与随访管理。',
|
||||
'体脂秤': '采用多频生物电阻抗技术，一次测量体重、体脂率、肌肉量、基础代谢等十余项体成分指标。\n测量报告自动上传健康档案，可查看历史趋势曲线。\n适用于超重肥胖干预与体重管理效果评估。',
|
||||
'经络深睡眠舱': '融合经络理论与现代催眠技术，通过温热理疗、经络疏导与助眠音疗，帮助身心进入深度放松状态。\n适用于睡眠质量差、易醒多梦、精神紧张人群的放松调理。',
|
||||
'3D心理数字训练舱': '通过 3D 沉浸情景互动开展认知与情绪训练，结合脑电生物反馈实时调节训练难度。\n适用于压力管理、情绪调节与认知功能维护。',
|
||||
'沉浸式冥想放松舱': '提供沉浸式冥想引导与音乐放松，配合呼吸训练与光影氛围，快速缓解身心疲劳。\n适用于高压人群减压、焦虑舒缓与日常情绪调适。',
|
||||
'运动心理康养舱': '将运动康复与心理调适相结合，通过低强度有氧运动配合心理放松训练，实现身心双向调节。\n适用于久坐人群与亚健康状态的康复调理。',
|
||||
'心理智能穿戴设备': '实时监测心率变异性、皮电、呼吸等情绪与压力相关指标，自动生成个人心理状态报告。\n适用于压力评估、情绪监测与放松训练效果评价。',
|
||||
'心理测评一体机': '内置多种专业心理量表，涵盖情绪、压力、睡眠、职业倦怠等维度，测评结束自动生成报告。\n支持匿名测评，结果同步至个人健康档案，异常结果建议寻求专业咨询。',
|
||||
'心理测试一体机': '提供常规心理测试与心理健康评估，操作简便，测试完成即出结果。\n适用于员工心理健康普查与日常自我评估。',
|
||||
'智能艾灸治疗仪': '恒温艾灸理疗，模拟传统艾灸温热刺激，无烟无尘，自动控温防烫。\n适用于肩颈腰背不适、畏寒肢冷、疲劳综合征的调理。',
|
||||
'中频脉冲治疗仪': '中频治疗仪是模拟传统的中医针灸，用 CPU 控制的脉冲电流针对穴道起到疏导血管、神经，达到顺畅传达的功效。\n适用症状：\n镇痛作用：肩周炎、肱骨外上髁炎、颈椎病、腰椎间盘突出症、退行性骨性关节病、风湿性关节炎、类风湿关节炎、捩伤、挫伤、肌纤维织炎、肌肉劳损、狭窄性腱鞘炎、盆腔炎、附件炎、慢性咽喉炎、乳腺增生、坐骨神经痛、周围神经损伤、关节挛缩、慢性前列腺炎。\n软化瘢痕松解粘连：瘢痕、瘢痕挛缩、术后粘连、肠粘连、炎症后硬化、注射后硬结、血肿机化、狭窄性腱鞘炎。\n兴奋神经肌肉：神经或肌肉伤病后肌肉功能障碍、废用性肌萎缩。',
|
||||
'动态血压监测仪': '便携佩戴式动态血压监测，24 小时连续记录血压波动，自动生成监测日报。\n免预约设备，到店登记后领取使用，数据回传至个人健康档案。',
|
||||
'动态心电监测仪': '便携式动态心电监测，长时间记录心电波形，捕捉偶发心律失常。\n免预约设备，到店登记后领取使用，报告由专业医师解读。'
|
||||
};
|
||||
var DEFAULT_INTRO = '本设备为健康小屋配套设备，具体功能与使用方式请到店咨询工作人员。';
|
||||
// 每台设备各自的预约须知
|
||||
var NOTICES = {
|
||||
'血压检测仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测量前静坐 5 分钟，避免剧烈运动、吸烟、饮咖啡后立即测量；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 测量数据将自动同步至个人健康档案。',
|
||||
'血糖检测仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 建议空腹或餐后 2 小时检测，采血前用温水洗手促进循环；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 检测数据将自动同步至个人健康档案。',
|
||||
'体脂秤': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测量时赤足上秤、穿着轻薄衣物，测前避免大量饮水与剧烈运动；\n3. 单次预约时长 30 分钟，每人每日最多预约 2 台设备；\n4. 心脏起搏器植入者等特殊人群请勿使用。',
|
||||
'经络深睡眠舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，入场请摘除手表、首饰等金属物品；\n3. 着装宽松，舱内温度较高，如有不适请随时按呼叫铃；\n4. 孕妇及心脑血管疾病急性期人群不建议使用。',
|
||||
'3D心理数字训练舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次训练 30 分钟，训练前请听从工作人员引导完成基础测评；\n3. 训练过程中如出现眩晕等不适请立即暂停；\n4. 训练报告将自动同步至个人健康档案。',
|
||||
'沉浸式冥想放松舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，入场请保持安静，手机调至静音；\n3. 着装宽松舒适，舱内备有一次性卫生垫；\n4. 有幽闭恐惧史请提前告知工作人员。',
|
||||
'运动心理康养舱': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次体验 30 分钟，请穿着运动服装与防滑袜入场；\n3. 体验前后适量补水，避免空腹或饱腹状态参与；\n4. 高血压、心脏病人群请遵医嘱使用。',
|
||||
'心理智能穿戴设备': '1. 请按预约时段到店，凭个人电子码签到领取设备；\n2. 佩戴于手腕、松紧适度，单次采集 30 分钟；\n3. 采集期间保持情绪平稳，避免剧烈活动影响数据；\n4. 设备请勿浸水、磕碰，使用完毕归还工作人员。',
|
||||
'心理测评一体机': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 测评约 20-30 分钟，请在安静状态下独立作答，答案无对错之分；\n3. 测评结束自动生成报告，可在个人健康档案中查看；\n4. 结果异常建议预约专业心理咨询进一步评估。',
|
||||
'心理测试一体机': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次测试约 20 分钟，请在安静状态下独立作答；\n3. 测试结束即出结果，结果仅供自我了解参考；\n4. 测试数据将自动同步至个人健康档案。',
|
||||
'智能艾灸治疗仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次理疗 30 分钟，理疗部位皮肤保持清洁干燥；\n3. 温热感适宜即可，如有灼痛请立即告知工作人员；\n4. 孕妇、皮肤破损及糖尿病末梢感觉障碍者请勿使用。',
|
||||
'中频脉冲治疗仪': '1. 请按预约时段到店，凭个人电子码签到使用；\n2. 单次理疗 30 分钟，强度由低到高缓慢调节，以耐受为宜；\n3. 皮肤破损、感染部位请勿放置电极片；\n4. 孕妇、心脏起搏器植入者请勿使用。',
|
||||
'动态血压监测仪': '1. 免预约设备，到店登记后领取使用；\n2. 佩戴 24 小时，按日常作息活动，测量时保持手臂静止；\n3. 请勿自行摘除袖带或触碰设备按键；\n4. 监测结束归还设备，报告由工作人员解读并同步健康档案。',
|
||||
'动态心电监测仪': '1. 免预约设备，到店登记后领取使用；\n2. 佩戴期间避免大量出汗、淋雨，电极片脱落请及时回店更换；\n3. 请记录佩戴期间不适症状的时间，便于报告分析；\n4. 监测结束归还设备，报告由专业医师解读。'
|
||||
};
|
||||
var DEFAULT_NOTICE = '1. 请按预约时段到店，凭个人电子码签到使用设备；\n2. 单次时长 30 分钟，每人每日最多预约 2 台设备；\n3. 如无法按时到店，请提前在预约记录中取消；\n4. 具体注意事项请咨询小屋工作人员。';
|
||||
|
||||
// 从列表页带过来的参数：name 设备名 / cat 分类 / bookable 是否可预约 / available 小屋是否可用
|
||||
var params = new URLSearchParams(location.search);
|
||||
var devName = params.get('name') || '血压检测仪';
|
||||
var cat = params.get('cat') || 'measure';
|
||||
var bookable = params.get('bookable') !== '0';
|
||||
var available = params.get('available') !== '0';
|
||||
|
||||
document.title = devName + ' - 设备详情';
|
||||
document.getElementById('devName').textContent = devName;
|
||||
var tag = document.getElementById('devTag');
|
||||
tag.textContent = CAT_LABEL[cat] || '健康设备';
|
||||
tag.className = 'tag tag--' + cat;
|
||||
document.getElementById('devIntro').textContent = INTROS[devName] || DEFAULT_INTRO;
|
||||
document.getElementById('sheetDevName').textContent = devName;
|
||||
var sheetTag = document.getElementById('sheetDevTag');
|
||||
sheetTag.textContent = CAT_LABEL[cat] || '健康设备';
|
||||
sheetTag.className = 'sheet__dev-tag sheet__dev-tag--' + cat;
|
||||
document.getElementById('noticeBody').textContent = NOTICES[devName] || DEFAULT_NOTICE;
|
||||
|
||||
var btnMain = document.getElementById('btnMain');
|
||||
if (!bookable) {
|
||||
btnMain.textContent = '免预约';
|
||||
btnMain.disabled = true;
|
||||
btnMain.classList.add('btn-main--disabled');
|
||||
} else if (!available) {
|
||||
btnMain.textContent = '立即预约';
|
||||
btnMain.disabled = true;
|
||||
btnMain.classList.add('btn-main--disabled');
|
||||
}
|
||||
|
||||
// 返回列表时保留可用状态参数
|
||||
if (params.get('available') === '0') {
|
||||
document.getElementById('navBack').href = 'hut-detail.html?available=0';
|
||||
}
|
||||
|
||||
function openSheet() { if (btnMain.disabled) return; document.getElementById('bookSheet').classList.add('open'); }
|
||||
function closeSheet() { document.getElementById('bookSheet').classList.remove('open'); }
|
||||
// 预约须知确定 → 预约信息页
|
||||
document.getElementById('btnGoBooking').addEventListener('click', function () {
|
||||
location.href = 'hut-booking-info.html?name=' + encodeURIComponent(devName);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>在线预约</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__img { width: 92px; height: 92px; border-radius: 8px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; flex-shrink: 0; }
|
||||
.card__body { flex: 1; min-width: 0; }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
|
||||
.card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__loc { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: 6px; font-size: 13px; color: #1677ff; font-weight: 600; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.card__tip { width: 100%; margin-top: 10px; padding: 7px 10px; border-radius: 6px; background: #fff3e6; color: #fa8c16; font-size: 12px; display: flex; align-items: center; gap: 5px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="card" onclick="window.location.href='hut-detail.html?available=1'">
|
||||
<div class="card__img">小屋图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">樊学站点健康小屋</span>
|
||||
<span class="card__loc">3.5 km<svg width="14" height="14" viewBox="0 0 24 24" fill="#1677ff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>开放时间：</b>07:30 - 12:00 | 12:00 - 18:30</div>
|
||||
<div><b>设备数量：</b>4</div>
|
||||
<div><b>地址：</b>定边县樊学镇樊学站点院内</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='hut-detail.html?available=1'">
|
||||
<div class="card__img">小屋图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">兴隆园健康小屋</span>
|
||||
<span class="card__loc">1.2 km<svg width="14" height="14" viewBox="0 0 24 24" fill="#1677ff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>开放时间：</b>08:00 - 12:00 | 14:00 - 18:00</div>
|
||||
<div><b>设备数量：</b>6</div>
|
||||
<div><b>地址：</b>西安市未央区CQ兴隆园小区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='hut-detail.html?available=0'">
|
||||
<div class="card__img">小屋图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">机关健康小屋</span>
|
||||
<span class="card__loc">2.6 km<svg width="14" height="14" viewBox="0 0 24 24" fill="#1677ff"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg></span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>开放时间：</b>07:30 - 12:00 | 12:00 - 18:30</div>
|
||||
<div><b>设备数量：</b>5</div>
|
||||
<div><b>地址：</b>CQ能源公司机关大楼一层</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__tip"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#fa8c16" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16.5v.01"/></svg>当前所在单位不在可用范围</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,109 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>测量记录</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__img { width: 64px; height: 64px; border-radius: 8px; background: #f5f7fa; border: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 11px; flex-shrink: 0; }
|
||||
.card__info { flex: 1; min-width: 0; }
|
||||
.card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__meta { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.card__arrow { font-size: 18px; color: #ccc; flex-shrink: 0; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="card" onclick="goReport('多功能按摩椅','樊学站点健康小屋','2026-09-08 14:30')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">多功能按摩椅</div>
|
||||
<div class="card__meta">樊学站点健康小屋</div>
|
||||
<div class="card__meta">2026-09-08 14:30</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('中频治疗仪','樊学站点健康小屋','2026-09-08 10:15')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">中频治疗仪</div>
|
||||
<div class="card__meta">樊学站点健康小屋</div>
|
||||
<div class="card__meta">2026-09-08 10:15</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('经络深睡眠舱','兴隆园健康小屋','2026-09-05 16:20')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">经络深睡眠舱</div>
|
||||
<div class="card__meta">兴隆园健康小屋</div>
|
||||
<div class="card__meta">2026-09-05 16:20</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('红外热治疗仪','樊学站点健康小屋','2026-09-03 09:40')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">红外热治疗仪</div>
|
||||
<div class="card__meta">樊学站点健康小屋</div>
|
||||
<div class="card__meta">2026-09-03 09:40</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('多功能理疗床','兴隆园健康小屋','2026-08-30 15:10')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">多功能理疗床</div>
|
||||
<div class="card__meta">兴隆园健康小屋</div>
|
||||
<div class="card__meta">2026-08-30 15:10</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('沉浸式冥想训练','兴隆园健康小屋','2026-08-28 11:25')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">沉浸式冥想训练</div>
|
||||
<div class="card__meta">兴隆园健康小屋</div>
|
||||
<div class="card__meta">2026-08-28 11:25</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
<div class="card" onclick="goReport('多功能按摩椅','兴隆园健康小屋','2026-08-25 09:00')">
|
||||
<div class="card__img">设备图片</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">多功能按摩椅</div>
|
||||
<div class="card__meta">兴隆园健康小屋</div>
|
||||
<div class="card__meta">2026-08-25 09:00</div>
|
||||
</div>
|
||||
<span class="card__arrow">›</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 每条测量记录对应各自的测量报告
|
||||
function goReport(dev, hut, time) {
|
||||
var q = new URLSearchParams({ dev: dev, hut: hut, time: time });
|
||||
window.location.href = 'hut-measure-report.html?' + q.toString();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>测评报告</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.head { background: linear-gradient(135deg, #1677ff, #3a94ff); border-radius: 12px; padding: 18px 16px; color: #fff; margin-bottom: 12px; }
|
||||
.head__title { font-size: 17px; font-weight: 700; }
|
||||
.head__meta { font-size: 12px; opacity: 0.9; margin-top: 6px; }
|
||||
.sec { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.sec__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.info-row { display: flex; font-size: 13px; line-height: 2; }
|
||||
.info-row__label { width: 84px; color: #999; flex-shrink: 0; }
|
||||
.info-row__val { flex: 1; color: #333; }
|
||||
.metric { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
|
||||
.metric:last-child { border-bottom: none; padding-bottom: 0; }
|
||||
.metric__name { font-size: 13px; color: #666; }
|
||||
.metric__val { font-size: 14px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 8px; }
|
||||
.tag { font-size: 11px; padding: 2px 8px; border-radius: 8px; font-weight: 400; }
|
||||
.tag--ok { background: #e6f9ef; color: #52c41a; }
|
||||
.tag--warn { background: #fff7e6; color: #fa8c16; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="hut-measure-list.html">‹</a><span class="nav-title">测评报告</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="head">
|
||||
<div class="head__title" id="headTitle">测评报告</div>
|
||||
<div class="head__meta" id="headMeta">—</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">本次测量信息</div>
|
||||
<div class="info-row"><span class="info-row__label">设备名称</span><span class="info-row__val" id="fDev">—</span></div>
|
||||
<div class="info-row"><span class="info-row__label">健康小屋</span><span class="info-row__val" id="fHut">—</span></div>
|
||||
<div class="info-row"><span class="info-row__label">测量时间</span><span class="info-row__val" id="fTime">—</span></div>
|
||||
<div class="info-row"><span class="info-row__label">使用时长</span><span class="info-row__val" id="fDuration">—</span></div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">监测数据</div>
|
||||
<div id="metricList"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 各设备的最终监测数据
|
||||
var REPORTS = {
|
||||
'多功能按摩椅': {
|
||||
title: '按摩理疗测评报告', duration: '30 分钟',
|
||||
metrics: [
|
||||
{ name: '疲劳缓解度', val: '82 分', tag: '良好', ok: true },
|
||||
{ name: '肌肉紧张度', val: '轻度（中→轻）', tag: '良好', ok: true },
|
||||
{ name: '平均心率', val: '78 次/分', tag: '正常', ok: true }
|
||||
]
|
||||
},
|
||||
'中频治疗仪': {
|
||||
title: '中频治疗测评报告', duration: '20 分钟',
|
||||
metrics: [
|
||||
{ name: '治疗部位', val: '腰部', tag: '—', ok: true },
|
||||
{ name: '治疗强度', val: '18 mA', tag: '正常', ok: true },
|
||||
{ name: '疼痛评分（VAS）', val: '5 分 → 3 分', tag: '好转', ok: true }
|
||||
]
|
||||
},
|
||||
'经络深睡眠舱': {
|
||||
title: '深睡眠测评报告', duration: '40 分钟',
|
||||
metrics: [
|
||||
{ name: '睡眠质量评分', val: '86 分', tag: '良好', ok: true },
|
||||
{ name: '入睡时长', val: '12 分钟', tag: '正常', ok: true },
|
||||
{ name: '心率变异性（HRV）', val: '58 ms', tag: '正常', ok: true },
|
||||
{ name: '呼吸率', val: '15 次/分', tag: '正常', ok: true }
|
||||
]
|
||||
},
|
||||
'红外热治疗仪': {
|
||||
title: '红外理疗测评报告', duration: '25 分钟',
|
||||
metrics: [
|
||||
{ name: '治疗部位', val: '肩部', tag: '—', ok: true },
|
||||
{ name: '体表温升', val: '+2.3 ℃', tag: '正常', ok: true },
|
||||
{ name: '局部血液循环', val: '改善明显', tag: '良好', ok: true },
|
||||
{ name: '皮肤状态', val: '轻微发红', tag: '关注', ok: false }
|
||||
]
|
||||
},
|
||||
'多功能理疗床': {
|
||||
title: '脊柱理疗测评报告', duration: '30 分钟',
|
||||
metrics: [
|
||||
{ name: '脊柱压力分布', val: '改善', tag: '良好', ok: true },
|
||||
{ name: '腰肌紧张度', val: '轻度', tag: '正常', ok: true },
|
||||
{ name: '体态评分', val: '76 分', tag: '良好', ok: true },
|
||||
{ name: '舒适度评分', val: '90 分', tag: '良好', ok: true }
|
||||
]
|
||||
},
|
||||
'沉浸式冥想训练': {
|
||||
title: '冥想放松测评报告', duration: '30 分钟',
|
||||
metrics: [
|
||||
{ name: '压力指数', val: '68 → 42', tag: '明显改善', ok: true },
|
||||
{ name: '专注度评分', val: '81 分', tag: '良好', ok: true },
|
||||
{ name: '放松度评分', val: '88 分', tag: '良好', ok: true },
|
||||
{ name: '呼吸训练完成度', val: '95 %', tag: '良好', ok: true }
|
||||
]
|
||||
}
|
||||
};
|
||||
// 未知设备的兜底数据
|
||||
var FALLBACK = {
|
||||
title: '健康测评报告', duration: '30 分钟',
|
||||
metrics: [{ name: '综合评分', val: '85 分', tag: '良好', ok: true }]
|
||||
};
|
||||
|
||||
var q = new URLSearchParams(location.search);
|
||||
var dev = q.get('dev') || '多功能按摩椅';
|
||||
var hut = q.get('hut') || '樊学站点健康小屋';
|
||||
var time = q.get('time') || '2026-09-08 14:30';
|
||||
var r = REPORTS[dev] || FALLBACK;
|
||||
|
||||
document.title = r.title;
|
||||
document.getElementById('headTitle').textContent = r.title;
|
||||
document.getElementById('headMeta').textContent = '岳春生 · 测量时间 ' + time + ' · ' + hut;
|
||||
document.getElementById('fDev').textContent = dev;
|
||||
document.getElementById('fHut').textContent = hut;
|
||||
document.getElementById('fTime').textContent = time;
|
||||
document.getElementById('fDuration').textContent = r.duration;
|
||||
|
||||
// 最终监测数据
|
||||
document.getElementById('metricList').innerHTML = r.metrics.map(function (m) {
|
||||
return '<div class="metric"><span class="metric__name">' + m.name + '</span>' +
|
||||
'<span class="metric__val">' + m.val + '<span class="tag ' + (m.ok ? 'tag--ok' : 'tag--warn') + '">' + m.tag + '</span></span></div>';
|
||||
}).join('');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的电子码</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.qrcode-card { background: #fff; border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 4px rgba(0,0,0,0.06); margin-bottom: 12px; }
|
||||
.qrcode-card__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.qrcode-card__hint { font-size: 12px; color: #999; margin: 6px 0 18px; }
|
||||
.qr-box { width: 180px; height: 180px; padding: 10px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: grid; grid-template-columns: repeat(21, 1fr); grid-template-rows: repeat(21, 1fr); gap: 1px; }
|
||||
.qr-cell { background: #fff; }
|
||||
.qr-cell--dark { background: #1a1a1a; }
|
||||
.qrcode-card__expire { font-size: 12px; color: #fa8c16; margin-top: 14px; }
|
||||
.info-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.row { display: flex; font-size: 13px; line-height: 1.7; margin-bottom: 8px; }
|
||||
.row:last-child { margin-bottom: 0; }
|
||||
.row__label { width: 84px; color: #999; flex-shrink: 0; }
|
||||
.row__value { flex: 1; color: #333; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="qrcode-card">
|
||||
<div class="qrcode-card__title">个人身份二维码</div>
|
||||
<div class="qrcode-card__hint">请向医务人员出示，扫码核验身份</div>
|
||||
<div class="qr-box" id="qrBox"></div>
|
||||
<div class="qrcode-card__expire">本码仅用于身份核验，请勿转借他人</div>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<div class="row"><span class="row__label">姓名</span><span class="row__value">张旭</span></div>
|
||||
<div class="row"><span class="row__label">员工编号</span><span class="row__value">56999852</span></div>
|
||||
<div class="row"><span class="row__label">单位</span><span class="row__value">公司机关</span></div>
|
||||
<div class="row"><span class="row__label">部门</span><span class="row__value">健康科</span></div>
|
||||
<div class="row"><span class="row__label">手机号</span><span class="row__value">18544555589</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 生成 21×21 伪二维码（含三个定位角框，中间按员工编号作 seed 确定性填充）
|
||||
(function () {
|
||||
var N = 21, seed = 56999852;
|
||||
function rand() { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }
|
||||
var box = document.getElementById('qrBox');
|
||||
// 定位角：左上、右上、左下
|
||||
function finder(r, c) {
|
||||
if (r < 7 && c < 7) return true;
|
||||
if (r < 7 && c >= N - 7) return true;
|
||||
if (r >= N - 7 && c < 7) return true;
|
||||
return false;
|
||||
}
|
||||
function finderDark(r, c) {
|
||||
var local = function (rr, cc) {
|
||||
var outer = rr === 0 || rr === 6 || cc === 0 || cc === 6;
|
||||
var inner = rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4;
|
||||
return outer || inner;
|
||||
};
|
||||
if (r < 7 && c < 7) return local(r, c);
|
||||
if (r < 7 && c >= N - 7) return local(r, c - (N - 7));
|
||||
if (r >= N - 7 && c < 7) return local(r - (N - 7), c);
|
||||
return false;
|
||||
}
|
||||
for (var r = 0; r < N; r++) {
|
||||
for (var c = 0; c < N; c++) {
|
||||
var cell = document.createElement('div');
|
||||
cell.className = 'qr-cell';
|
||||
if (finder(r, c)) {
|
||||
if (finderDark(r, c)) cell.classList.add('qr-cell--dark');
|
||||
} else if (rand() > 0.5) {
|
||||
cell.classList.add('qr-cell--dark');
|
||||
}
|
||||
box.appendChild(cell);
|
||||
}
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>一线医疗</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 我的医疗点卡片 */
|
||||
.my-point { margin: 16px; background: linear-gradient(135deg, #1677ff, #3a94ff); border-radius: 14px; padding: 18px 16px; color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(22,119,255,0.25); }
|
||||
.my-point__label { font-size: 12px; opacity: 0.85; margin-bottom: 8px; }
|
||||
.my-point__name { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
|
||||
.my-point__meta { font-size: 12px; opacity: 0.9; line-height: 1.8; }
|
||||
.my-point__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
|
||||
.my-point__tag { font-size: 11px; background: rgba(255,255,255,0.22); border-radius: 10px; padding: 3px 10px; }
|
||||
.my-point__go { font-size: 13px; font-weight: 500; }
|
||||
|
||||
/* 分组 */
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; padding: 12px 16px 10px; }
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
|
||||
.func-card { background: #fff; border-radius: 12px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: transform 0.15s; }
|
||||
.func-card:active { transform: scale(0.97); }
|
||||
.func-card__icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||||
.func-card__label { font-size: 14px; font-weight: 500; color: #1a1a1a; }
|
||||
.func-card__desc { font-size: 11px; color: #999; text-align: center; line-height: 1.4; }
|
||||
.ic-blue { background: #e6f2ff; } .ic-green { background: #e6f9ef; } .ic-orange { background: #fff3e6; } .ic-purple { background: #f0edff; }
|
||||
|
||||
/* 健康小屋渐变入口卡片 */
|
||||
.hut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
|
||||
.hut-card { position: relative; border-radius: 14px; padding: 16px; color: #fff; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.15s; }
|
||||
.hut-card:active { transform: scale(0.97); }
|
||||
.hut-card__icon { width: 34px; height: 34px; border: 1.5px solid rgba(255,255,255,0.85); border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
|
||||
.hut-card__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
|
||||
.hut-card__desc { font-size: 11px; line-height: 1.6; opacity: 0.95; }
|
||||
.hut-card__deco { position: absolute; right: -10px; bottom: -10px; opacity: 0.16; pointer-events: none; }
|
||||
.hut-card--green { background: linear-gradient(135deg, #3ede80, #0eb95e); }
|
||||
.hut-card--blue { background: linear-gradient(135deg, #30c8f2, #1f8fe0); }
|
||||
.hut-card--red { background: linear-gradient(135deg, #ff8a85, #f2565e); }
|
||||
.hut-card--purple { background: linear-gradient(135deg, #9aa6f5, #7a72e6); }
|
||||
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="window.location.href='../home/index.html'">‹</span>
|
||||
<span class="nav-title">一线医疗</span>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 我的医疗点 -->
|
||||
<div class="my-point" onclick="window.location.href='medical-point.html'">
|
||||
<div class="my-point__label">我所分配的医疗点</div>
|
||||
<div class="my-point__name">吴堡作业区医疗点</div>
|
||||
<div class="my-point__meta">
|
||||
<div>所属医院：CQ能源职工医院</div>
|
||||
<div>联系电话：020-88556985</div>
|
||||
</div>
|
||||
<div class="my-point__foot">
|
||||
<span class="my-point__tag">医护 3 人</span>
|
||||
<span class="my-point__go">查看详情 ›</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 一线医疗 -->
|
||||
<div class="section-title">一线医疗</div>
|
||||
<div class="grid">
|
||||
<div class="func-card" onclick="window.location.href='visit-list.html'">
|
||||
<div class="func-card__icon ic-blue">📋</div>
|
||||
<div class="func-card__label">就诊查看</div>
|
||||
<div class="func-card__desc">就诊记录与详情</div>
|
||||
</div>
|
||||
<div class="func-card" onclick="window.location.href='follow-list.html'">
|
||||
<div class="func-card__icon ic-green">🩺</div>
|
||||
<div class="func-card__label">随访记录</div>
|
||||
<div class="func-card__desc">历次随访记录</div>
|
||||
</div>
|
||||
<div class="func-card" onclick="window.location.href='medication-plan.html'">
|
||||
<div class="func-card__icon ic-orange">💊</div>
|
||||
<div class="func-card__label">慢病管理</div>
|
||||
<div class="func-card__desc">慢病类型与用药方案</div>
|
||||
</div>
|
||||
<div class="func-card" onclick="window.location.href='nearby-list.html'">
|
||||
<div class="func-card__icon ic-purple">📍</div>
|
||||
<div class="func-card__label">附近医疗点</div>
|
||||
<div class="func-card__desc">附近医疗点列表</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 健康小屋 -->
|
||||
<div class="section-title">健康小屋</div>
|
||||
<div class="hut-grid">
|
||||
<div class="hut-card hut-card--green" onclick="window.location.href='hut-list.html'">
|
||||
<div class="hut-card__icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
|
||||
</div>
|
||||
<div class="hut-card__title">在线预约</div>
|
||||
<div class="hut-card__desc">自主选择使用日期、时段和设备</div>
|
||||
<svg class="hut-card__deco" width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>
|
||||
</div>
|
||||
<div class="hut-card hut-card--blue" onclick="window.location.href='hut-qrcode.html'">
|
||||
<div class="hut-card__icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM21 14v3M14 21h3M21 21h.01"/></svg>
|
||||
</div>
|
||||
<div class="hut-card__title">我的电子码</div>
|
||||
<div class="hut-card__desc">预约身份证明，查看预约二维码</div>
|
||||
<svg class="hut-card__deco" width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><path d="M14 14h3v3h-3zM21 14v3M14 21h3M21 21h.01"/></svg>
|
||||
</div>
|
||||
<div class="hut-card hut-card--red" onclick="window.location.href='hut-booking-all.html'">
|
||||
<div class="hut-card__icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M12 13v3l2 1.2"/></svg>
|
||||
</div>
|
||||
<div class="hut-card__title">我的预约</div>
|
||||
<div class="hut-card__desc">查看自己所有预约的项目及详细信息</div>
|
||||
<svg class="hut-card__deco" width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4M12 13v3l2 1.2"/></svg>
|
||||
</div>
|
||||
<div class="hut-card hut-card--purple" onclick="window.location.href='hut-measure-list.html'">
|
||||
<div class="hut-card__icon">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1.2-3.2 3.8-5 7-5s5.8 1.8 7 5"/></svg>
|
||||
</div>
|
||||
<div class="hut-card__title">测量记录</div>
|
||||
<div class="hut-card__desc">查看历史测量记录，关注自身健康</div>
|
||||
<svg class="hut-card__deco" width="84" height="84" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="3.5"/><path d="M5 20c1.2-3.2 3.8-5 7-5s5.8 1.8 7 5"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="height:16px"></div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>医护人员</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.avatar { width: 48px; height: 48px; border-radius: 50%; background: #e6f2ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 600; flex-shrink: 0; }
|
||||
.card__info { flex: 1; }
|
||||
.card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__title { font-size: 13px; color: #666; margin-top: 2px; }
|
||||
.card__phone { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.btn-call { width: 32px; height: 32px; border-radius: 50%; border: none; background: #1677ff; color: #fff; font-size: 15px; cursor: pointer; flex-shrink: 0; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="medical-point.html">‹</a><span class="nav-title">医护人员</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="card">
|
||||
<div class="avatar">石</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">石维国</div>
|
||||
<div class="card__title">主治医师</div>
|
||||
<div class="card__phone">13956282214</div>
|
||||
</div>
|
||||
<button class="btn-call">📞</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="avatar">李</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">李静</div>
|
||||
<div class="card__title">护师</div>
|
||||
<div class="card__phone">138****2291</div>
|
||||
</div>
|
||||
<button class="btn-call">📞</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="avatar">王</div>
|
||||
<div class="card__info">
|
||||
<div class="card__name">王振华</div>
|
||||
<div class="card__title">执业医师</div>
|
||||
<div class="card__phone">137****8834</div>
|
||||
</div>
|
||||
<button class="btn-call">📞</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>分配医疗点</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.hero-img { width: 100%; height: 170px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.intro-text { font-size: 14px; color: #666; line-height: 1.8; }
|
||||
.staff-card { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.staff-card:last-child { border-bottom: none; }
|
||||
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #e6f2ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; }
|
||||
.staff-card__info { flex: 1; }
|
||||
.staff-card__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.staff-card__title { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.role { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 500; flex-shrink: 0; }
|
||||
.role--doctor { background: #e6f2ff; color: #1677ff; }
|
||||
.role--nurse { background: #e6f9ef; color: #52c41a; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="hero-img">医疗点图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">吴堡作业区医疗点</div>
|
||||
<div class="info-row"><label>所属医院：</label>CQ能源职工医院</div>
|
||||
<div class="info-row"><label>所属单位：</label>第一采油厂</div>
|
||||
<div class="info-row"><label>负责人：</label>石维国</div>
|
||||
<div class="info-row"><label>联系电话：</label>020-88556985</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口CQ兴隆园小区</div>
|
||||
<div class="info-row"><label>辐射范围：</label>吴堡作业区及周边站点</div>
|
||||
<div class="action-btns">
|
||||
<button class="btn btn-phone">📞 电话</button>
|
||||
<button class="btn btn-nav">📍 导航</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医疗点简介</div>
|
||||
<div class="intro-text">吴堡作业区医疗点隶属于CQ能源职工医院，为一线员工提供日常诊疗、慢病随访、健康宣教等基础医疗服务，配备急救药品与常用监测设备。</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医护人员</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">石</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">石维国</div><div class="staff-card__title">主治医师</div></div>
|
||||
<span class="role role--doctor">医生</span>
|
||||
</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">李</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">李静</div><div class="staff-card__title">护师</div></div>
|
||||
<span class="role role--nurse">护士</span>
|
||||
</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">王</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">王振华</div><div class="staff-card__title">执业医师</div></div>
|
||||
<span class="role role--doctor">医生</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>慢病管理</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.sec { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.sec--highlight { border: 1px solid #b7eb8f; background: #f6ffed; }
|
||||
.sec__title { font-size: 15px; font-weight: 700; color: #1a1a1a; border-left: 3px solid #1677ff; padding-left: 8px; margin-bottom: 12px; }
|
||||
.sec--highlight .sec__title { border-left-color: #52c41a; }
|
||||
.tag { display: inline-block; padding: 4px 14px; border-radius: 6px; font-size: 13px; margin-right: 10px; font-weight: 500; }
|
||||
.tag--ht { background: rgba(24,144,255,.12); color: #1890ff; }
|
||||
.tag--dm { background: rgba(42,193,139,.12); color: #2ac18b; }
|
||||
.med-card { background: #fff; border: 1px solid #e6f4ff; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #4a5a7f; line-height: 1.9; margin-bottom: 10px; }
|
||||
.med-card:last-child { margin-bottom: 0; }
|
||||
.med-card__name { color: #333; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
||||
.med-card__end { color: #52c41a; }
|
||||
.med-card__end--over { color: #969eb0; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="sec">
|
||||
<div class="sec__title">我的慢病</div>
|
||||
<div>
|
||||
<span class="tag tag--ht">高血压</span>
|
||||
<span class="tag tag--dm">糖尿病</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec sec--highlight">
|
||||
<div class="sec__title">用药方案</div>
|
||||
<div class="med-card">
|
||||
<div class="med-card__name">苯磺酸氨氯地平片</div>
|
||||
<div>规格：5mg×7片</div>
|
||||
<div>用法用量：口服，一日1次，一次1片</div>
|
||||
<div>服用开始日期：2026-06-01</div>
|
||||
<div>服用结束日期：<span class="med-card__end">长期</span></div>
|
||||
</div>
|
||||
<div class="med-card">
|
||||
<div class="med-card__name">二甲双胍缓释片</div>
|
||||
<div>规格：0.5g×30片</div>
|
||||
<div>用法用量：口服，一日2次，一次1片</div>
|
||||
<div>服用开始日期：2026-03-15</div>
|
||||
<div>服用结束日期：<span class="med-card__end">长期</span></div>
|
||||
</div>
|
||||
<div class="med-card">
|
||||
<div class="med-card__name">硝苯地平控释片</div>
|
||||
<div>规格：30mg×7片</div>
|
||||
<div>用法用量：口服，一日1次，一次1片</div>
|
||||
<div>服用开始日期：2024-09-01</div>
|
||||
<div>服用结束日期：<span class="med-card__end--over">2025-08-31</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>医疗点详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.hero-img { width: 100%; height: 170px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; }
|
||||
.info-section { background: #fff; padding: 16px; margin-bottom: 10px; }
|
||||
.detail-name { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.info-row { font-size: 14px; color: #666; margin-top: 10px; line-height: 1.6; }
|
||||
.info-row label { color: #999; margin-right: 4px; }
|
||||
.action-btns { display: flex; gap: 12px; margin-top: 16px; }
|
||||
.action-btns .btn { flex: 1; height: 40px; border-radius: 20px; border: none; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-phone { background: #1677ff; color: #fff; }
|
||||
.btn-nav { background: #fff; color: #1677ff; border: 1px solid #1677ff !important; }
|
||||
.section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
|
||||
.intro-text { font-size: 14px; color: #666; line-height: 1.8; }
|
||||
.staff-card { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.staff-card:last-child { border-bottom: none; }
|
||||
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #e6f2ff; color: #1677ff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; flex-shrink: 0; }
|
||||
.staff-card__info { flex: 1; }
|
||||
.staff-card__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.staff-card__title { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.role { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 500; flex-shrink: 0; }
|
||||
.role--doctor { background: #e6f2ff; color: #1677ff; }
|
||||
.role--nurse { background: #e6f9ef; color: #52c41a; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="nearby-list.html">‹</a><span class="nav-title">医疗点详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="hero-img">医疗点图片</div>
|
||||
<div class="info-section">
|
||||
<div class="detail-name">吴堡作业区医疗点</div>
|
||||
<div class="info-row"><label>所属医院：</label>CQ能源职工医院</div>
|
||||
<div class="info-row"><label>所属单位：</label>第一采油厂</div>
|
||||
<div class="info-row"><label>联系电话：</label>020-88556985</div>
|
||||
<div class="info-row"><label>地址：</label>西安市未央区凤城五路与开元路交叉口CQ兴隆园小区</div>
|
||||
<div class="action-btns"><button class="btn btn-phone">📞 电话</button><button class="btn btn-nav">📍 导航</button></div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医疗点简介</div>
|
||||
<div class="intro-text">吴堡作业区医疗点隶属于CQ能源职工医院，为一线员工提供日常诊疗、慢病随访、健康宣教等基础医疗服务，配备急救药品与常用监测设备。</div>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<div class="section-title">医护人员</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">石</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">石维国</div><div class="staff-card__title">主治医师</div></div>
|
||||
<span class="role role--doctor">医生</span>
|
||||
</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">李</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">李静</div><div class="staff-card__title">护师</div></div>
|
||||
<span class="role role--nurse">护士</span>
|
||||
</div>
|
||||
<div class="staff-card">
|
||||
<div class="avatar">王</div>
|
||||
<div class="staff-card__info"><div class="staff-card__name">王振华</div><div class="staff-card__title">执业医师</div></div>
|
||||
<span class="role role--doctor">医生</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>附近医疗</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; display: flex; gap: 12px; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__img { width: 84px; height: 84px; border-radius: 8px; background: linear-gradient(135deg, #e8f4ff, #d6e8ff); display: flex; align-items: center; justify-content: center; color: #999; font-size: 12px; flex-shrink: 0; }
|
||||
.card__body { flex: 1; min-width: 0; }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
|
||||
.card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__dist { font-size: 13px; color: #1677ff; font-weight: 600; flex-shrink: 0; margin-left: 6px; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="card" onclick="window.location.href='nearby-detail.html'">
|
||||
<div class="card__img">医疗点图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">吴堡作业区医疗点</span>
|
||||
<span class="card__dist">1.2 km</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>医护人员：</b>3 人</div>
|
||||
<div>📍 西安市未央区凤城五路与开元路交叉口</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='nearby-detail.html'">
|
||||
<div class="card__img">医疗点图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">樊学站点健康小屋</span>
|
||||
<span class="card__dist">3.5 km</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>医护人员：</b>2 人</div>
|
||||
<div>📍 定边县樊学镇樊学站点院内</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card" onclick="window.location.href='nearby-detail.html'">
|
||||
<div class="card__img">医疗点图片</div>
|
||||
<div class="card__body">
|
||||
<div class="card__head">
|
||||
<span class="card__name">定边采油厂医疗点</span>
|
||||
<span class="card__dist">8.0 km</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>医护人员：</b>4 人</div>
|
||||
<div>📍 定边县定边镇新区采油厂家属区</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>就诊详情</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.sec { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
|
||||
.sec__title { font-size: 15px; font-weight: 700; color: #1a1a1a; border-left: 3px solid #1677ff; padding-left: 8px; margin-bottom: 12px; }
|
||||
.namecard { display: flex; gap: 14px; align-items: center; }
|
||||
.namecard__name { font-size: 17px; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
|
||||
.namecard__meta { font-size: 12px; color: #666; line-height: 1.7; }
|
||||
.row { display: flex; font-size: 13px; line-height: 1.7; margin-bottom: 8px; }
|
||||
.row__label { width: 74px; color: #999; flex-shrink: 0; }
|
||||
.row__value { flex: 1; color: #333; }
|
||||
.row--block { flex-direction: column; }
|
||||
.row--block .row__value { margin-top: 2px; }
|
||||
.med-card { background: #f2f6ff; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #4a5a7f; line-height: 1.9; margin-bottom: 10px; }
|
||||
.med-card b { color: #333; font-size: 13px; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="visit-list.html">‹</a><span class="nav-title">就诊详情</span></div>
|
||||
<div class="scroll-content">
|
||||
<div class="sec">
|
||||
<div class="namecard">
|
||||
<div class="namecard__info">
|
||||
<div class="namecard__name">岳春生</div>
|
||||
<div class="namecard__meta">男 · 54岁 · 员工编号 1035678</div>
|
||||
<div class="namecard__meta">联系电话：13956282214</div>
|
||||
<div class="namecard__meta">单位部门：CQ能源陕E作业区 / 管理四中心</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">就诊信息</div>
|
||||
<div class="row"><span class="row__label">就诊医生</span><span class="row__value">石维国</span></div>
|
||||
<div class="row"><span class="row__label">就诊日期</span><span class="row__value">2026-09-04 10:32</span></div>
|
||||
<div class="row"><span class="row__label">是否复诊</span><span class="row__value">复诊</span></div>
|
||||
<div class="row row--block"><span class="row__label">主诉</span><span class="row__value">晨起后头晕、后颈部发紧，测血压 165/102mmHg</span></div>
|
||||
<div class="row row--block"><span class="row__label">查体</span><span class="row__value">BP 162/100mmHg，心率 78 次/分，律齐，双肺呼吸音清，未闻及干湿啰音。</span></div>
|
||||
<div class="row row--block"><span class="row__label">现病史</span><span class="row__value">近1周劳累后症状加重，自述降压药服用不规律。</span></div>
|
||||
<div class="row row--block"><span class="row__label">既往史</span><span class="row__value">高血压8年，2型糖尿病4年，规律服药。</span></div>
|
||||
<div class="row"><span class="row__label">过敏史</span><span class="row__value">青霉素过敏</span></div>
|
||||
<div class="row row--block"><span class="row__label">诊断</span><span class="row__value" style="font-weight:600">原发性高血压3级（很高危）；2型糖尿病</span></div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">医药信息</div>
|
||||
<div class="med-card"><b>苯磺酸氨氯地平片</b>（5mg×7片 · 23.80元）<br>数量：2盒 用法用量：口服，一日1次，一次1片</div>
|
||||
<div class="med-card"><b>硝苯地平控释片</b>（30mg×7片 · 34.20元）<br>数量：1盒 用法用量：口服，一日1次，一次1片</div>
|
||||
</div>
|
||||
|
||||
<div class="sec">
|
||||
<div class="sec__title">生活建议</div>
|
||||
<div class="row row--block"><span class="row__label">医嘱</span><span class="row__value">规律服药，每日早晚监测血压并记录，2周后复查。</span></div>
|
||||
<div class="row row--block"><span class="row__label">运动处方</span><span class="row__value">每日快走30分钟，避免剧烈运动。</span></div>
|
||||
<div class="row row--block"><span class="row__label">膳食处方</span><span class="row__value">低盐（<5g/日）低脂饮食，控制主食量。</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>就诊记录</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #f0f2f5; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif; }
|
||||
.phone-shell { width: 390px; min-height: 844px; background: #fff; border-radius: 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 0 0 2px #e0e0e0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
|
||||
.phone-status-bar { height: 44px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 12px; font-weight: 600; flex-shrink: 0; }
|
||||
.phone-status-bar .time { font-size: 15px; font-weight: 700; }
|
||||
.phone-status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; display: flex; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #f0f0f0; flex-shrink: 0; position: relative; }
|
||||
.nav-bar .nav-back { font-size: 14px; color: #1a1a1a; cursor: pointer; text-decoration: none; }
|
||||
.nav-bar .nav-title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f5f5; padding: 12px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
.filter-bar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; }
|
||||
.filter-bar__label { font-size: 13px; color: #666; flex-shrink: 0; }
|
||||
.filter-bar__value { flex: 1; font-size: 13px; color: #333; }
|
||||
.filter-bar__arrow { font-size: 16px; color: #ccc; }
|
||||
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); cursor: pointer; transition: transform 0.15s; }
|
||||
.card:active { transform: scale(0.98); }
|
||||
.card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.card__time { font-size: 15px; font-weight: 600; color: #1a1a1a; }
|
||||
.card__type { font-size: 11px; padding: 2px 10px; border-radius: 8px; font-weight: 500; }
|
||||
.type-followup { background: #e6f2ff; color: #1677ff; }
|
||||
.type-first { background: #e6f9ef; color: #52c41a; }
|
||||
.card__info { font-size: 13px; color: #666; line-height: 1.8; }
|
||||
.card__info b { color: #333; font-weight: 500; }
|
||||
.empty { text-align: center; color: #999; padding: 60px 0; font-size: 14px; display: none; }
|
||||
|
||||
/* 底部弹窗 */
|
||||
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 60; display: none; align-items: flex-end; }
|
||||
.overlay.open { display: flex; }
|
||||
.sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 20px 28px; }
|
||||
.sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; }
|
||||
.sheet__label { font-size: 13px; color: #666; margin-bottom: 8px; }
|
||||
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
||||
.chip-row--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
|
||||
.chip { padding: 7px 14px; border-radius: 16px; border: 1px solid #e0e0e0; font-size: 13px; color: #333; cursor: pointer; text-align: center; }
|
||||
.chip--active { border-color: #1677ff; color: #1677ff; background: #e6f2ff; }
|
||||
.sheet__foot { display: flex; gap: 12px; margin-top: 20px; }
|
||||
.sheet__foot button { flex: 1; height: 44px; border-radius: 22px; font-size: 15px; cursor: pointer; }
|
||||
.btn-cancel { background: #f5f5f5; color: #666; border: none; }
|
||||
.btn-confirm { background: #1677ff; color: #fff; border: none; }
|
||||
.bottom-spacer { height: 34px; flex-shrink: 0; }
|
||||
</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="filter-bar" onclick="openMonthSheet()">
|
||||
<span class="filter-bar__label">就诊月份</span>
|
||||
<span class="filter-bar__value" id="monthText">全部</span>
|
||||
<span class="filter-bar__arrow">›</span>
|
||||
</div>
|
||||
|
||||
<div class="card" data-month="2026-09" onclick="window.location.href='visit-detail.html'">
|
||||
<div class="card__head">
|
||||
<span class="card__time">2026-09-04 10:32</span>
|
||||
<span class="card__type type-followup">复诊</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>就诊医疗点：</b>吴堡作业区医疗点</div>
|
||||
<div><b>就诊医生：</b>石维国</div>
|
||||
<div><b>诊断：</b>原发性高血压3级（很高危）；2型糖尿病</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-month="2026-08" onclick="window.location.href='visit-detail.html'">
|
||||
<div class="card__head">
|
||||
<span class="card__time">2026-08-12 09:15</span>
|
||||
<span class="card__type type-first">初诊</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>就诊医疗点：</b>吴堡作业区医疗点</div>
|
||||
<div><b>就诊医生：</b>石维国</div>
|
||||
<div><b>诊断：</b>高血压2级（高危）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-month="2026-07" onclick="window.location.href='visit-detail.html'">
|
||||
<div class="card__head">
|
||||
<span class="card__time">2026-07-20 14:00</span>
|
||||
<span class="card__type type-first">初诊</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>就诊医疗点：</b>吴堡作业区医疗点</div>
|
||||
<div><b>就诊医生：</b>王振华</div>
|
||||
<div><b>诊断：</b>2型糖尿病</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-month="2026-06" onclick="window.location.href='visit-detail.html'">
|
||||
<div class="card__head">
|
||||
<span class="card__time">2026-06-18 08:50</span>
|
||||
<span class="card__type type-first">初诊</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>就诊医疗点：</b>吴堡作业区医疗点</div>
|
||||
<div><b>就诊医生：</b>李静</div>
|
||||
<div><b>诊断：</b>高血压1级</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" data-month="2025-11" onclick="window.location.href='visit-detail.html'">
|
||||
<div class="card__head">
|
||||
<span class="card__time">2025-11-10 09:40</span>
|
||||
<span class="card__type type-followup">复诊</span>
|
||||
</div>
|
||||
<div class="card__info">
|
||||
<div><b>就诊医疗点：</b>吴堡作业区医疗点</div>
|
||||
<div><b>就诊医生：</b>石维国</div>
|
||||
<div><b>诊断：</b>高血压1级</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="empty" id="empty">该月份暂无就诊记录</div>
|
||||
</div>
|
||||
<div class="bottom-spacer"></div>
|
||||
|
||||
<!-- 年月联动选择弹窗 -->
|
||||
<div class="overlay" id="monthSheet">
|
||||
<div class="sheet">
|
||||
<div class="sheet__title">选择就诊月份</div>
|
||||
<div class="sheet__label">年份</div>
|
||||
<div class="chip-row" id="yearChips">
|
||||
<span class="chip chip--active" data-year="all">全部</span>
|
||||
<span class="chip" data-year="2026">2026年</span>
|
||||
<span class="chip" data-year="2025">2025年</span>
|
||||
</div>
|
||||
<div class="sheet__label">月份</div>
|
||||
<div class="chip-row chip-row--grid" id="monthChips">
|
||||
<span class="chip" data-month="01">1月</span>
|
||||
<span class="chip" data-month="02">2月</span>
|
||||
<span class="chip" data-month="03">3月</span>
|
||||
<span class="chip" data-month="04">4月</span>
|
||||
<span class="chip" data-month="05">5月</span>
|
||||
<span class="chip" data-month="06">6月</span>
|
||||
<span class="chip" data-month="07">7月</span>
|
||||
<span class="chip" data-month="08">8月</span>
|
||||
<span class="chip" data-month="09">9月</span>
|
||||
<span class="chip" data-month="10">10月</span>
|
||||
<span class="chip" data-month="11">11月</span>
|
||||
<span class="chip" data-month="12">12月</span>
|
||||
</div>
|
||||
<div class="sheet__foot">
|
||||
<button class="btn-cancel" onclick="resetMonth()">重置</button>
|
||||
<button class="btn-confirm" onclick="applyMonth()">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currentYear = 'all';
|
||||
var currentMonth = null;
|
||||
|
||||
function openMonthSheet() {
|
||||
// 回显当前选中状态
|
||||
document.querySelectorAll('#yearChips .chip').forEach(function (c) {
|
||||
c.classList.toggle('chip--active', c.getAttribute('data-year') === currentYear);
|
||||
});
|
||||
document.querySelectorAll('#monthChips .chip').forEach(function (c) {
|
||||
c.classList.toggle('chip--active', c.getAttribute('data-month') === currentMonth);
|
||||
});
|
||||
document.getElementById('monthSheet').classList.add('open');
|
||||
}
|
||||
|
||||
// 年份联动：选中「全部」时清空月份；选中具体年份时保留月份选择
|
||||
document.querySelectorAll('#yearChips .chip').forEach(function (chip) {
|
||||
chip.addEventListener('click', function () {
|
||||
document.querySelectorAll('#yearChips .chip').forEach(function (c) { c.classList.remove('chip--active'); });
|
||||
chip.classList.add('chip--active');
|
||||
currentYear = chip.getAttribute('data-year');
|
||||
if (currentYear === 'all') {
|
||||
currentMonth = null;
|
||||
document.querySelectorAll('#monthChips .chip').forEach(function (c) { c.classList.remove('chip--active'); });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 月份选择
|
||||
document.querySelectorAll('#monthChips .chip').forEach(function (chip) {
|
||||
chip.addEventListener('click', function () {
|
||||
document.querySelectorAll('#monthChips .chip').forEach(function (c) { c.classList.remove('chip--active'); });
|
||||
chip.classList.add('chip--active');
|
||||
currentMonth = chip.getAttribute('data-month');
|
||||
});
|
||||
});
|
||||
|
||||
function resetMonth() {
|
||||
currentYear = 'all';
|
||||
currentMonth = null;
|
||||
document.querySelectorAll('#yearChips .chip').forEach(function (c) {
|
||||
c.classList.toggle('chip--active', c.getAttribute('data-year') === 'all');
|
||||
});
|
||||
document.querySelectorAll('#monthChips .chip').forEach(function (c) { c.classList.remove('chip--active'); });
|
||||
document.getElementById('monthText').textContent = '全部';
|
||||
document.getElementById('monthSheet').classList.remove('open');
|
||||
applyFilter();
|
||||
}
|
||||
|
||||
function applyMonth() {
|
||||
var text = '全部';
|
||||
if (currentYear !== 'all') {
|
||||
text = currentYear + '年';
|
||||
if (currentMonth) { text += parseInt(currentMonth, 10) + '月'; }
|
||||
}
|
||||
document.getElementById('monthText').textContent = text;
|
||||
document.getElementById('monthSheet').classList.remove('open');
|
||||
applyFilter();
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
var cards = document.querySelectorAll('.card');
|
||||
var count = 0;
|
||||
cards.forEach(function (c) {
|
||||
var dm = c.getAttribute('data-month');
|
||||
var show;
|
||||
if (currentYear === 'all') {
|
||||
show = true;
|
||||
} else if (currentMonth) {
|
||||
show = dm === (currentYear + '-' + currentMonth);
|
||||
} else {
|
||||
show = dm.indexOf(currentYear + '-') === 0;
|
||||
}
|
||||
c.style.display = show ? 'block' : 'none';
|
||||
if (show) count++;
|
||||
});
|
||||
document.getElementById('empty').style.display = count === 0 ? 'block' : 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user