feat: 新增活动详情页+问卷填写页+问卷详情查看页
- 活动详情页:活动基本信息(名称/日期/状态/组织/联系人电话等)+问卷列表 - 联系电话支持点击拨打 - 问卷列表统一一个"去填写"按钮 - 填写流程:去填写→答题→提交→返回→已填写样式变化+隐藏按钮 - 已填写卡片可点击查看填写内容(绿色高亮已选答案) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
liuyunqin
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
1b3a6f591a
commit
b9ff7b1be5
@@ -4,6 +4,22 @@
|
||||
|
||||
---
|
||||
|
||||
## [2026-06-05] feat: 新增活动详情页+问卷填写页+问卷详情查看页
|
||||
|
||||
**涉及文件（3个新增）：**
|
||||
- `health-checkup/activity-detail.html` — 活动详情页
|
||||
- `health-checkup/activity-fill.html` — 问卷填写页
|
||||
- `health-checkup/questionnaire-fill.html` — 问卷详情查看页（已填写）
|
||||
|
||||
**变更说明：**
|
||||
- **活动详情页**：顶部展示活动基本信息（名称、起止日期、状态、组织单位/部门、负责人、联系电话、描述），联系电话支持点击拨打
|
||||
- **问卷列表**：展示问卷名称、适用人群、题目数量，统一一个"去填写"按钮
|
||||
- **填写流程**：点击"去填写"跳转问卷填写页 → 答题 → 提交 → 返回活动详情页 → 弹窗提示提交成功 → 问卷卡片变为"已填写"样式 → 隐藏"去填写"按钮
|
||||
- **查看已填写内容**：已填写卡片变为可点击查看状态，展示题目及用户选择的答案
|
||||
- 根目录 `index.html` — SITE_MAP 新增上述 3 个页面条目
|
||||
|
||||
---
|
||||
|
||||
## [2026-06-05] fix: 活动列表Tab顺序交换+状态文案调整
|
||||
|
||||
**涉及文件（1个修改）：**
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>活动详情 - 员工端 | 健康CQ原型</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; height: 844px; background: #f5f7fa; 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; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 活动基本信息卡片 */
|
||||
.activity-info { margin: 12px 12px 0; background: #fff; border-radius: 16px; padding: 18px; }
|
||||
.activity-info__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
|
||||
.activity-info__name { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.4; flex: 1; }
|
||||
.activity-info__status { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-left: 10px; }
|
||||
.status--pending { color: #faad14; background: #fffbe6; border: 1px solid #ffe58f; }
|
||||
.status--ongoing { color: #1890ff; background: #e6f7ff; border: 1px solid #91d5ff; }
|
||||
.status--ended { color: #999; background: #fafafa; border: 1px solid #d9d9d9; }
|
||||
|
||||
.activity-info__rows { display: flex; flex-direction: column; gap: 10px; }
|
||||
.activity-info__row { display: flex; align-items: flex-start; font-size: 13px; }
|
||||
.activity-info__label { width: 80px; color: #999; flex-shrink: 0; }
|
||||
.activity-info__value { color: #333; flex: 1; min-width: 0; }
|
||||
.activity-info__value.phone { color: #1890ff; cursor: pointer; text-decoration: underline; }
|
||||
.activity-info__divider { height: 1px; background: #f0f0f0; margin: 4px 0; }
|
||||
.activity-info__desc { font-size: 13px; color: #666; line-height: 1.7; }
|
||||
|
||||
/* 分隔条 */
|
||||
.section-divider { height: 12px; background: #f5f7fa; }
|
||||
|
||||
/* 问卷列表区域 */
|
||||
.questionnaire-section { padding: 0 12px; }
|
||||
.questionnaire-section__title { font-size: 15px; font-weight: 700; color: #1a1a1a; padding: 14px 4px 10px; display: flex; align-items: center; gap: 6px; }
|
||||
.questionnaire-list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
|
||||
|
||||
/* 问卷卡片 */
|
||||
.q-card { background: #fff; border-radius: 14px; padding: 16px; position: relative; }
|
||||
.q-card--filled { background: #f8f9fb; }
|
||||
.q-card__header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
|
||||
.q-card__name { font-size: 15px; font-weight: 600; color: #1a1a1a; flex: 1; cursor: pointer; }
|
||||
.q-card__badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-left: 10px; }
|
||||
.badge--unfilled { color: #faad14; background: #fffbe6; border: 1px solid #ffe58f; }
|
||||
.badge--filled { color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; }
|
||||
.q-card__meta { display: flex; gap: 16px; font-size: 12px; color: #999; }
|
||||
.q-card__meta span { color: #666; }
|
||||
.q-card__arrow { position: absolute; right: 16px; bottom: 16px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
|
||||
.q-card--filled .q-card__arrow { display: none; }
|
||||
|
||||
/* 已填写标记 */
|
||||
.q-card__done-mark { display: none; align-items: center; gap: 4px; font-size: 12px; color: #52c41a; margin-top: 8px; }
|
||||
.q-card--filled .q-card__done-mark { display: flex; }
|
||||
.q-card--filled .q-card__name { color: #555; font-weight: 500; }
|
||||
|
||||
/* 底部按钮 */
|
||||
.submit-bar { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-submit { width: 100%; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 24px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
|
||||
.btn-submit:active { transform: scale(0.97); }
|
||||
.submit-bar--hidden { display: none; }
|
||||
|
||||
/* 底部安全区 */
|
||||
.bottom-safe { height: 20px; flex-shrink: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
|
||||
<svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
|
||||
<svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="location.href='index.html'">
|
||||
<svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">活动详情</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 活动基本信息 -->
|
||||
<div class="activity-info">
|
||||
<div class="activity-info__header">
|
||||
<div class="activity-info__name">2026年第二季度健康排查</div>
|
||||
<div class="activity-info__status status--ongoing">进行中</div>
|
||||
</div>
|
||||
<div class="activity-info__rows">
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">起止日期</span>
|
||||
<span class="activity-info__value">2026-06-01 ~ 2026-06-30</span>
|
||||
</div>
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">组织单位</span>
|
||||
<span class="activity-info__value">采油一厂</span>
|
||||
</div>
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">组织部门</span>
|
||||
<span class="activity-info__value">工会办公室</span>
|
||||
</div>
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">负责人</span>
|
||||
<span class="activity-info__value">王建国</span>
|
||||
</div>
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">联系电话</span>
|
||||
<span class="activity-info__value phone" onclick="window.location.href='tel:13812345678'">138-1234-5678</span>
|
||||
</div>
|
||||
<div class="activity-info__divider"></div>
|
||||
<div class="activity-info__row">
|
||||
<span class="activity-info__label">活动描述</span>
|
||||
<span class="activity-info__desc">为全面掌握职工健康状况，组织开展第二季度健康排查活动。请全体职工认真填写健康问卷，如实反馈自身健康情况。本次活动由工会办公室统一组织，各单位积极配合。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分隔条 -->
|
||||
<div class="section-divider"></div>
|
||||
|
||||
<!-- 问卷列表 -->
|
||||
<div class="questionnaire-section">
|
||||
<div class="questionnaire-section__title">📋 问卷列表</div>
|
||||
<div class="questionnaire-list" id="questionnaireList">
|
||||
|
||||
<!-- 问卷1 -->
|
||||
<div class="q-card" data-index="0">
|
||||
<div class="q-card__header">
|
||||
<div class="q-card__name">职工健康状况问卷</div>
|
||||
<div class="q-card__badge badge--unfilled">未填写</div>
|
||||
</div>
|
||||
<div class="q-card__meta">
|
||||
适用人群：<span>全体职工</span>
|
||||
</div>
|
||||
<div class="q-card__meta" style="margin-top:4px;">
|
||||
题目数量：<span>12 题</span>
|
||||
</div>
|
||||
<div class="q-card__done-mark">
|
||||
<svg width="14" height="14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#52c41a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
已填写 2026-06-05 10:30
|
||||
</div>
|
||||
<div class="q-card__arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
</div>
|
||||
|
||||
<!-- 问卷2 -->
|
||||
<div class="q-card" data-index="1">
|
||||
<div class="q-card__header">
|
||||
<div class="q-card__name">职业健康危害因素调查</div>
|
||||
<div class="q-card__badge badge--unfilled">未填写</div>
|
||||
</div>
|
||||
<div class="q-card__meta">
|
||||
适用人群：<span>一线作业岗位</span>
|
||||
</div>
|
||||
<div class="q-card__meta" style="margin-top:4px;">
|
||||
题目数量：<span>8 题</span>
|
||||
</div>
|
||||
<div class="q-card__done-mark">
|
||||
<svg width="14" height="14" fill="none"><path d="M2 7l3.5 3.5L12 4" stroke="#52c41a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
已填写 2026-06-05 10:30
|
||||
</div>
|
||||
<div class="q-card__arrow"><svg width="7" height="12" fill="none"><path d="M1 1l5 5-5 5" stroke="#ccc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部去填写按钮 -->
|
||||
<div class="submit-bar" id="submitBar">
|
||||
<button class="btn-submit" onclick="goFill()">
|
||||
<svg width="20" height="20" fill="none"><path d="M10 1v18M1 10h18" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/></svg>
|
||||
去填写
|
||||
</button>
|
||||
</div>
|
||||
<div class="bottom-safe" id="bottomSafe" style="display:none;"></div>
|
||||
|
||||
<!-- 已填写成功提示弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__icon">
|
||||
<svg width="32" height="32" fill="none"><path d="M8 16l5 5 11-11" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="dialog__title">提交成功</div>
|
||||
<div class="dialog__desc">问卷已全部填写完成</div>
|
||||
<button class="dialog__btn" onclick="closeDialog()">确 认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 弹窗样式 -->
|
||||
<style>
|
||||
.dialog-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 300; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-mask.show { display: flex; }
|
||||
.dialog { background: #fff; border-radius: 20px; width: 300px; padding: 32px 24px 24px; text-align: center; box-shadow: 0 12px 48px rgba(0,0,0,0.2); animation: dialogIn 0.25s ease; }
|
||||
@keyframes dialogIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
.dialog__icon { width: 64px; height: 64px; margin: 0 auto 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.dialog__title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.dialog__desc { font-size: 13px; color: #999; margin-bottom: 20px; }
|
||||
.dialog__btn { width: 100%; height: 44px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 22px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; }
|
||||
.dialog__btn:active { transform: scale(0.97); }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function goFill() {
|
||||
location.href = 'activity-fill.html';
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
document.getElementById('dialogMask').classList.remove('show');
|
||||
}
|
||||
|
||||
/* 点击已填写的问卷卡片，查看填写内容 */
|
||||
document.querySelectorAll('.q-card').forEach(function(card) {
|
||||
card.addEventListener('click', function() {
|
||||
if (this.classList.contains('q-card--filled')) {
|
||||
location.href = 'questionnaire-fill.html';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* 根据 URL 参数判断是否已提交 */
|
||||
if (location.search.indexOf('filled=1') !== -1) {
|
||||
var bar = document.getElementById('submitBar');
|
||||
var safe = document.getElementById('bottomSafe');
|
||||
document.querySelectorAll('.q-card').forEach(function(card) {
|
||||
card.classList.add('q-card--filled');
|
||||
});
|
||||
bar.classList.add('submit-bar--hidden');
|
||||
safe.style.display = 'block';
|
||||
/* 弹出提交成功提示 */
|
||||
document.getElementById('dialogMask').classList.add('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,253 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>填写问卷 - 员工端 | 健康CQ原型</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; height: 844px; background: #f5f7fa; 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; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; padding: 12px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 问卷名称卡片 */
|
||||
.q-title-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 14px; padding: 18px; color: #fff; margin-bottom: 14px; position: relative; overflow: hidden; }
|
||||
.q-title-card::after { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.08); border-radius: 50%; }
|
||||
.q-title-card__name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
|
||||
.q-title-card__meta { font-size: 12px; opacity: 0.85; display: flex; gap: 14px; }
|
||||
|
||||
/* 分类标题 */
|
||||
.category-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 16px 0 10px; padding-left: 10px; border-left: 3px solid #667eea; }
|
||||
.category-title:first-child { margin-top: 0; }
|
||||
|
||||
/* 问题卡片 */
|
||||
.question-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
|
||||
.question-card__header { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
|
||||
.question-card__title { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.5; flex: 1; }
|
||||
.tag-required { font-size: 10px; color: #ff4d4f; background: #fff2f0; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; border: 1px solid #ffccc7; }
|
||||
.tag-optional { font-size: 10px; color: #999; background: #f5f5f5; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; }
|
||||
|
||||
/* 单选选项 */
|
||||
.question-card__options { display: flex; flex-direction: column; gap: 8px; }
|
||||
.option-item { padding: 10px 14px; border-radius: 8px; border: 1px solid #e8e8e8; font-size: 13px; color: #666; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all 0.15s; }
|
||||
.option-item:active { transform: scale(0.98); }
|
||||
.option-item.selected { border-color: #667eea; background: #f8f6ff; color: #667eea; font-weight: 500; }
|
||||
.option-item__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
|
||||
.option-item.selected .option-item__radio { border-color: #667eea; background: #667eea; }
|
||||
.option-item.selected .option-item__radio::after { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; }
|
||||
|
||||
/* 多选选项 */
|
||||
.option-item--check .option-item__checkbox { width: 18px; height: 18px; border-radius: 4px; border: 2px solid #ddd; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
|
||||
.option-item--check.selected .option-item__checkbox { border-color: #667eea; background: #667eea; }
|
||||
.option-item--check.selected .option-item__checkbox::after { content: ''; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
|
||||
|
||||
/* 文本输入 */
|
||||
.text-input { width: 100%; height: 80px; border: 1px solid #e8e8e8; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #333; resize: none; font-family: inherit; outline: none; transition: border-color 0.15s; }
|
||||
.text-input:focus { border-color: #667eea; }
|
||||
.text-input::placeholder { color: #ccc; }
|
||||
|
||||
/* 底部提交 */
|
||||
.submit-bar { padding: 12px 16px; background: #fff; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
|
||||
.btn-submit { width: 100%; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 24px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; transition: transform 0.15s; }
|
||||
.btn-submit:active { transform: scale(0.97); }
|
||||
.bottom-safe { height: 20px; flex-shrink: 0; background: #fff; }
|
||||
|
||||
/* 提交成功弹窗 */
|
||||
.dialog-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 300; display: none; align-items: center; justify-content: center; }
|
||||
.dialog-mask.show { display: flex; }
|
||||
.dialog { background: #fff; border-radius: 20px; width: 300px; padding: 32px 24px 24px; text-align: center; box-shadow: 0 12px 48px rgba(0,0,0,0.2); animation: dialogIn 0.25s ease; }
|
||||
@keyframes dialogIn { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
|
||||
.dialog__icon { width: 64px; height: 64px; margin: 0 auto 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
|
||||
.dialog__title { font-size: 20px; font-weight: 800; color: #1a1a1a; margin-bottom: 6px; }
|
||||
.dialog__desc { font-size: 13px; color: #999; margin-bottom: 20px; }
|
||||
.dialog__btn { width: 100%; height: 44px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 22px; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; }
|
||||
.dialog__btn:active { transform: scale(0.97); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
|
||||
<svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
|
||||
<svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="location.href='activity-detail.html'">
|
||||
<svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">填写问卷</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 问卷名称卡片 -->
|
||||
<div class="q-title-card">
|
||||
<div class="q-title-card__name">职工健康状况问卷</div>
|
||||
<div class="q-title-card__meta">
|
||||
<span>共 12 题</span>
|
||||
<span>预计用时 5 分钟</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体状况 -->
|
||||
<div class="category-title">身体状况</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">1. 您近三个月是否有持续性的身体不适？</div>
|
||||
<span class="tag-required">必填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>无，身体状况良好</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>偶尔有轻微不适</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>经常感到不适</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>持续不适，需要就医</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">2. 您的睡眠质量如何？</div>
|
||||
<span class="tag-required">必填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>良好，入睡快且少醒</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>一般，偶尔失眠</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>较差，经常难以入睡</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">3. 您是否有以下慢性疾病？</div>
|
||||
<span class="tag-optional">选填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>高血压</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>糖尿病</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>冠心病</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>呼吸系统疾病</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>无上述疾病</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 心理状态 -->
|
||||
<div class="category-title">心理状态</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">4. 您近一个月的情绪状态如何？</div>
|
||||
<span class="tag-required">必填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>心情愉悦，积极乐观</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>情绪基本稳定</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>偶有焦虑或低落</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>长期情绪低落</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">5. 您的工作压力程度如何？</div>
|
||||
<span class="tag-required">必填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>压力适中，能正常应对</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>略有压力，基本可控</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>压力较大，有些吃力</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>压力很大，需要帮助</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="category-title">生活习惯</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">6. 您每周运动锻炼的频率？</div>
|
||||
<span class="tag-required">必填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>每周 3 次以上</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>每周 1-2 次</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>偶尔运动</div>
|
||||
<div class="option-item" onclick="selectRadio(this)"><span class="option-item__radio"></span>基本不运动</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">7. 您是否有吸烟、饮酒等习惯？</div>
|
||||
<span class="tag-optional">选填</span>
|
||||
</div>
|
||||
<div class="question-card__options">
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>吸烟</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>饮酒</div>
|
||||
<div class="option-item option-item--check" onclick="selectCheck(this)"><span class="option-item__checkbox"></span>无上述习惯</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 补充说明 -->
|
||||
<div class="category-title">补充说明</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">8. 其他需要说明的健康情况</div>
|
||||
<span class="tag-optional">选填</span>
|
||||
</div>
|
||||
<textarea class="text-input" placeholder="如有其他健康情况需要说明，请在此填写..."></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部提交按钮 -->
|
||||
<div class="submit-bar">
|
||||
<button class="btn-submit" onclick="submitForm()">提交问卷</button>
|
||||
</div>
|
||||
<div class="bottom-safe"></div>
|
||||
|
||||
<!-- 提交成功弹窗 -->
|
||||
<div class="dialog-mask" id="dialogMask">
|
||||
<div class="dialog">
|
||||
<div class="dialog__icon">
|
||||
<svg width="32" height="32" fill="none"><path d="M8 16l5 5 11-11" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="dialog__title">提交成功</div>
|
||||
<div class="dialog__desc">问卷已提交，正在返回活动详情...</div>
|
||||
<button class="dialog__btn" onclick="goBack()">确 认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function selectRadio(el) {
|
||||
var parent = el.closest('.question-card__options');
|
||||
parent.querySelectorAll('.option-item').forEach(function(s) { s.classList.remove('selected'); });
|
||||
el.classList.add('selected');
|
||||
}
|
||||
|
||||
function selectCheck(el) {
|
||||
el.classList.toggle('selected');
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
document.getElementById('dialogMask').classList.add('show');
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
location.href = 'activity-detail.html?filled=1';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>问卷填写 - 员工端 | 健康CQ原型</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; height: 844px; background: #f5f7fa; 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; }
|
||||
.status-bar { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0; background: #fff; }
|
||||
.status-bar .time { font-size: 15px; font-weight: 700; color: #333; }
|
||||
.status-bar .icons { display: flex; gap: 6px; align-items: center; }
|
||||
.nav-bar { height: 44px; background: #fff; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; border-bottom: 1px solid #f0f0f0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; padding: 12px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 问卷名称卡片 */
|
||||
.q-title-card { border-radius: 14px; padding: 18px; color: #fff; margin-bottom: 14px; position: relative; overflow: hidden; }
|
||||
.q-title-card--view { background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%); }
|
||||
.q-title-card--edit { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
||||
.q-title-card::after { content: ''; position: absolute; top: -20px; right: -20px; width: 80px; height: 80px; background: rgba(255,255,255,0.08); border-radius: 50%; }
|
||||
.q-title-card__name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
|
||||
.q-title-card__meta { font-size: 12px; opacity: 0.85; display: flex; gap: 14px; }
|
||||
|
||||
/* 分类标题 */
|
||||
.category-title { font-size: 14px; font-weight: 700; color: #1a1a1a; margin: 16px 0 10px; padding-left: 10px; border-left: 3px solid #52c41a; }
|
||||
.category-title:first-child { margin-top: 0; }
|
||||
|
||||
/* 问题卡片 - 查看模式 */
|
||||
.question-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
|
||||
.question-card__header { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
|
||||
.question-card__title { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.5; flex: 1; }
|
||||
.tag-answered { font-size: 10px; color: #52c41a; background: #f6ffed; padding: 1px 6px; border-radius: 3px; flex-shrink: 0; border: 1px solid #b7eb8f; }
|
||||
|
||||
/* 已选答案 */
|
||||
.answer-item { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
|
||||
.answer-item--selected { background: #f6ffed; color: #52c41a; font-weight: 500; border: 1px solid #b7eb8f; }
|
||||
.answer-item--normal { background: #fafafa; color: #999; border: 1px solid #f0f0f0; }
|
||||
.answer-item__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.answer-item__dot--selected { background: #52c41a; }
|
||||
.answer-item__dot--normal { background: #ddd; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<span class="icons">
|
||||
<svg width="16" height="16" fill="none"><rect x="1" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="5" y="3" width="3" height="9" rx="1" fill="#333"/><rect x="9" y="1" width="3" height="11" rx="1" fill="#333"/><rect x="13" y="0" width="3" height="12" rx="1" fill="#333" opacity=".3"/></svg>
|
||||
<svg width="16" height="16" fill="none"><path d="M8 3C5.5 3 3.2 4 1.5 5.5l1.4 1.4C4.3 5.5 6.1 5 8 5s3.7.5 5.1 1.9l1.4-1.4C12.8 4 10.5 3 8 3zm0 4c-1.4 0-2.6.5-3.5 1.3L6 9.8c.6-.5 1.3-.8 2-.8s1.4.3 2 .8l1.5-1.5C10.6 7.5 9.4 7 8 7zm0 4c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z" fill="#333"/></svg>
|
||||
<svg width="22" height="12" fill="none"><rect x=".5" y=".5" width="19" height="11" rx="2" stroke="#333"/><rect x="20" y="3.5" width="1.5" height="5" rx=".75" fill="#333"/><rect x="2" y="2" width="14" height="8" rx="1" fill="#333"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-back" onclick="location.href='activity-detail.html?filled=1'">
|
||||
<svg width="12" height="20" fill="none"><path d="M10 2L2 10l8 8" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">问卷详情</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
|
||||
<!-- 问卷名称卡片 -->
|
||||
<div class="q-title-card q-title-card--view">
|
||||
<div class="q-title-card__name">职工健康状况问卷</div>
|
||||
<div class="q-title-card__meta">
|
||||
<span>共 12 题</span>
|
||||
<span>已提交 2026-06-05 10:30</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身体状况 -->
|
||||
<div class="category-title">身体状况</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">1. 您近三个月是否有持续性的身体不适？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>无，身体状况良好</div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>偶尔有轻微不适</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>经常感到不适</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>持续不适，需要就医</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">2. 您的睡眠质量如何？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>良好，入睡快且少醒</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>一般，偶尔失眠</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>较差，经常难以入睡</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">3. 您是否有以下慢性疾病？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>高血压</div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>糖尿病</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>冠心病</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>呼吸系统疾病</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>无上述疾病</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 心理状态 -->
|
||||
<div class="category-title">心理状态</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">4. 您近一个月的情绪状态如何？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>心情愉悦，积极乐观</div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>情绪基本稳定</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>偶有焦虑或低落</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>长期情绪低落</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">5. 您的工作压力程度如何？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>压力适中，能正常应对</div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>略有压力，基本可控</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>压力较大，有些吃力</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>压力很大，需要帮助</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活习惯 -->
|
||||
<div class="category-title">生活习惯</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">6. 您每周运动锻炼的频率？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>每周 1-2 次</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>每周 3 次以上</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>偶尔运动</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>基本不运动</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">7. 您是否有吸烟、饮酒等习惯？</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>吸烟</div>
|
||||
<div class="answer-item answer-item--normal"><span class="answer-item__dot answer-item__dot--normal"></span>饮酒</div>
|
||||
<div class="answer-item answer-item--selected"><span class="answer-item__dot answer-item__dot--selected"></span>无上述习惯</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 补充说明 -->
|
||||
<div class="category-title">补充说明</div>
|
||||
|
||||
<div class="question-card">
|
||||
<div class="question-card__header">
|
||||
<div class="question-card__title">8. 其他需要说明的健康情况</div>
|
||||
<span class="tag-answered">已答</span>
|
||||
</div>
|
||||
<div class="answer-item answer-item--selected" style="display:block; padding: 14px; line-height: 1.7;">
|
||||
近期体检时发现血糖偏高，正在遵医嘱控制饮食，目前指标稳定。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 底部安全区 -->
|
||||
<div class="bottom-safe" style="height:20px;flex-shrink:0;background:#fff;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -583,6 +583,9 @@ const SITE_MAP = [
|
||||
{ file:'health-screening/checkin-record.html', label:'打卡记录' },
|
||||
{ file:'health-screening/questionnaire-detail.html', label:'问卷详情' },
|
||||
{ file:'health-checkup/index.html', label:'健康排查活动列表' },
|
||||
{ file:'health-checkup/activity-detail.html', label:'活动详情' },
|
||||
{ file:'health-checkup/activity-fill.html', label:'问卷填写' },
|
||||
{ file:'health-checkup/questionnaire-fill.html', label:'问卷详情查看' },
|
||||
{ file:'weight/index.html', label:'体重监测首页' },
|
||||
{ file:'weight/history.html', label:'体重历史数据' },
|
||||
{ file:'weight/report-detail.html', label:'体重详细报告' },
|
||||
|
||||
Reference in New Issue
Block a user