feat: 体重管理模块—目标管理多状态交互、承诺签订流程、类型切换导航
- goal-management: 7种状态页面（未选目标无/有活动、已选个人目标、待审核/通过/驳回/已签署），右上角类型切换菜单，返回按钮携带类型跳回目标承诺页 - goal-commitment: 类型状态同步跳转目标管理，按类型动态显示提示文字，默认类型改为未选目标-有活动 - promise-signing: 横屏承诺签订页，支持放弃签订二次确认 - my-promise: 证书风格已签署承诺书展示页 - basic-info: 身高测量底部弹窗交互
This commit is contained in:
liuyunqin
+118
-97
@@ -29,55 +29,63 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
.module__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.module__more { font-size: 12px; color: #999; cursor: pointer; }
|
||||
/* 体重管理 */
|
||||
.weight-header { background: linear-gradient(135deg, #ff6b6b, #ff9a56); border-radius: 12px 12px 0 0; margin: -16px -16px 0; padding: 16px 16px 20px; position: relative; }
|
||||
.weight-header__title { font-size: 20px; font-weight: 700; color: #fff; }
|
||||
.weight-header__info { position: absolute; top: 12px; right: 16px; font-size: 11px; color: rgba(255,255,255,0.85); }
|
||||
.weight-header__info strong { color: #fff; }
|
||||
.weight-ball-section { background: #fff; border-radius: 0 0 12px 12px; margin-bottom: 16px; overflow: hidden; }
|
||||
.weight-avatars { display: flex; align-items: center; justify-content: space-around; padding: 20px 16px 16px; }
|
||||
.weight-avatar-side { text-align: center; flex: 1; }
|
||||
.weight-avatar__img { width: 56px; height: 72px; margin: 0 auto 8px; position: relative; }
|
||||
.weight-avatar__img svg { width: 100%; height: 100%; }
|
||||
.weight-avatar__label { font-size: 13px; color: #666; margin-bottom: 4px; }
|
||||
.weight-avatar__val { font-size: 22px; font-weight: 700; color: #1a1a1a; }
|
||||
.weight-avatar__bmi { font-size: 12px; color: #999; margin-top: 2px; }
|
||||
.weight-ball-wrap { text-align: center; flex: 0 0 auto; position: relative; z-index: 1; margin: 0 8px; }
|
||||
.weight-ball-wrap__top { font-size: 12px; color: #666; margin-bottom: 2px; }
|
||||
.weight-ball-wrap__ruler { width: 2px; height: 12px; background: #ddd; margin: 0 auto 2px; }
|
||||
.weight-ball { width: 150px; height: 150px; border-radius: 50%; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(24,144,255,0.15); }
|
||||
.weight-ball__bg { position: absolute; inset: 0; background: linear-gradient(180deg, #f0f8ff 0%, #e6f7ff 50%, #7ec8e3 100%); }
|
||||
.weight-ball__wave { position: absolute; bottom: 0; left: 0; right: 0; height: 55%; }
|
||||
.weight-module { padding: 0; overflow: hidden; background: linear-gradient(180deg, #ff6a5f 0%, #ff8a6b 40%, #f5f7fa 100%); }
|
||||
.weight-header { position: relative; padding: 14px 16px 26px; display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
|
||||
.weight-header__watermark { position: absolute; left: 14px; top: 8px; font-size: 22px; font-weight: 900; letter-spacing: 2px; color: rgba(255,255,255,0.22); font-family: 'Arial Black', sans-serif; }
|
||||
.weight-header__tab { display: inline-block; background: #c8332c; color: #fff; font-size: 15px; font-weight: 700; padding: 6px 22px 6px 14px; border-radius: 8px 18px 0 18px; position: relative; margin-top: 14px; }
|
||||
.weight-header__tab::after { content: ''; position: absolute; right: -4px; top: 4px; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: -2px 6px 0 #fff; }
|
||||
.weight-header__info { font-size: 12px; color: #fff; font-weight: 500; margin-top: 14px; }
|
||||
.weight-header__info strong { color: #fff; font-size: 14px; font-weight: 700; margin: 0 1px; }
|
||||
.weight-card { background: #fff; border-radius: 16px; margin: 0 12px 12px; padding: 18px 12px 18px; position: relative; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
|
||||
.weight-avatars { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
|
||||
.weight-avatar-side { width: 78px; position: relative; display: flex; align-items: center; justify-content: center; }
|
||||
.weight-avatar__badge { position: absolute; top: -18px; right: -8px; background: #fff; color: #ff4d4f; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 12px; border: 1px solid #ff4d4f; z-index: 2; text-decoration: none; cursor: pointer; }
|
||||
.weight-avatar__img { width: 64px; height: 96px; }
|
||||
.weight-avatar__img svg { width: 100%; height: 100%; display: block; }
|
||||
.weight-avatar__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.weight-avatar__val { font-size: 26px; font-weight: 800; color: #1a1a1a; line-height: 1; }
|
||||
.weight-avatar__bmi { font-size: 12px; color: #bbb; margin-top: 4px; }
|
||||
.weight-ball-wrap { text-align: center; flex: 1; position: relative; }
|
||||
.weight-ball-wrap__top { font-size: 12px; color: #36cfc9; margin-bottom: 2px; position: absolute; top: 12px; left: 0; right: 0; z-index: 3; }
|
||||
.weight-ball { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; position: relative; overflow: hidden; box-shadow: 0 6px 20px rgba(54,207,201,0.18); }
|
||||
.weight-ball__bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #ffffff 0%, #e8fbfa 40%, #b6f0eb 100%); }
|
||||
.weight-ball__wave { position: absolute; bottom: 0; left: 0; right: 0; height: 58%; }
|
||||
.weight-ball__wave svg { width: 100%; height: 100%; display: block; }
|
||||
.weight-ball__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; }
|
||||
.weight-ball__rulers { position: absolute; inset: 0; pointer-events: none; }
|
||||
.weight-ball__rulers::before, .weight-ball__rulers::after { content: ''; position: absolute; top: 8px; bottom: 8px; width: 1px; background: repeating-linear-gradient(to bottom, rgba(54,207,201,0.4) 0 4px, transparent 4px 8px); }
|
||||
.weight-ball__rulers::before { left: 14px; }
|
||||
.weight-ball__rulers::after { right: 14px; }
|
||||
.weight-ball__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; padding-top: 18px; }
|
||||
.weight-ball__val { font-size: 36px; font-weight: 800; color: #1a1a1a; line-height: 1; }
|
||||
.weight-ball__unit { font-size: 13px; color: #333; }
|
||||
.weight-ball__meta { font-size: 11px; color: #666; margin-top: 2px; }
|
||||
.weight-middle { padding: 0 16px 16px; display: flex; justify-content: center; }
|
||||
.weight-change { text-align: center; }
|
||||
.weight-change__label { font-size: 12px; color: #999; }
|
||||
.weight-change__val { font-size: 20px; font-weight: 700; color: #1890ff; margin: 4px 0; }
|
||||
.weight-change__val.negative { color: #52c41a; }
|
||||
.weight-change__need { font-size: 12px; color: #faad14; }
|
||||
.weight-change__need span { font-weight: 600; }
|
||||
.daily-date { font-size: 13px; color: #666; text-align: center; margin-bottom: 12px; font-weight: 600; }
|
||||
.daily-checkin { display: flex; gap: 10px; margin-bottom: 16px; }
|
||||
.checkin-card { flex: 1; border-radius: 12px; padding: 14px 10px; text-align: center; color: #fff; }
|
||||
.checkin-card--eat { background: linear-gradient(135deg, #52c41a, #73d13d); }
|
||||
.checkin-card--move { background: linear-gradient(135deg, #fa8c16, #ffa940); }
|
||||
.checkin-card--weight { background: linear-gradient(135deg, #722ed1, #9254de); }
|
||||
.checkin-card__icon { font-size: 22px; margin-bottom: 4px; }
|
||||
.checkin-card__val { font-size: 18px; font-weight: 800; line-height: 1.2; }
|
||||
.checkin-card__unit { font-size: 12px; font-weight: 400; }
|
||||
.checkin-card__recommend { font-size: 11px; opacity: 0.85; margin-top: 4px; }
|
||||
.checkin-card__days { font-size: 11px; opacity: 0.85; margin-top: 2px; }
|
||||
.bmi-section { background: #f8f9fa; border-radius: 10px; padding: 14px; margin-bottom: 12px; }
|
||||
.bmi-formula { font-size: 13px; color: #666; text-align: center; margin-bottom: 12px; }
|
||||
.bmi-table { display: flex; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; }
|
||||
.bmi-table__cell { flex: 1; text-align: center; padding: 10px 4px; border-right: 1px solid #e0e0e0; }
|
||||
.bmi-table__cell:last-child { border-right: none; }
|
||||
.weight-ball__val .weight-ball__unit { font-size: 12px; color: #333; font-weight: 500; margin-left: 2px; }
|
||||
.weight-ball__meta { font-size: 11px; color: #36a39f; margin-top: 2px; }
|
||||
.weight-change-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 16px; padding: 0 4px; }
|
||||
.weight-change-row__cell { text-align: center; flex: 1; }
|
||||
.weight-change-row__label { font-size: 13px; color: #999; margin-bottom: 6px; }
|
||||
.weight-change-row__val { font-size: 26px; font-weight: 800; color: #1a1a1a; line-height: 1; }
|
||||
.weight-change-row__val.negative { color: #36cfc9; }
|
||||
.weight-change-row__sub { font-size: 12px; color: #bbb; margin-top: 6px; }
|
||||
.weight-change-row__need { font-size: 12px; color: #faad14; margin-top: 6px; }
|
||||
.daily-card { background: #fff; border-radius: 16px; margin: 0 12px 12px; padding: 14px 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
|
||||
.daily-date { font-size: 14px; color: #1f1f1f; text-align: center; margin-bottom: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 12px; }
|
||||
.daily-date::before, .daily-date::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #ff7a6b, transparent); max-width: 90px; }
|
||||
.daily-checkin { display: flex; gap: 10px; }
|
||||
.checkin-card { flex: 1; border-radius: 14px; padding: 14px 8px 12px; text-align: center; color: #fff; position: relative; }
|
||||
.checkin-card--eat { background: linear-gradient(160deg, #6ee16e 0%, #3ec46a 100%); }
|
||||
.checkin-card--move { background: linear-gradient(160deg, #ffb066 0%, #ff8a3d 100%); }
|
||||
.checkin-card--weight { background: linear-gradient(160deg, #b08cff 0%, #8b6cff 100%); }
|
||||
.checkin-card__label { font-size: 14px; font-weight: 600; margin-bottom: 6px; opacity: 0.95; }
|
||||
.checkin-card__val { font-size: 20px; font-weight: 800; line-height: 1.1; }
|
||||
.checkin-card__unit { font-size: 11px; font-weight: 500; margin-left: 1px; }
|
||||
.checkin-card__recommend { font-size: 11px; opacity: 0.92; margin-top: 8px; line-height: 1.5; }
|
||||
.checkin-card__days { font-size: 11px; opacity: 0.92; line-height: 1.5; }
|
||||
.bmi-card { background: #fff; border-radius: 16px; margin: 0 12px 4px; padding: 14px 14px 16px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
|
||||
.bmi-formula { font-size: 13px; color: #555; text-align: center; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
|
||||
.bmi-table { display: flex; padding: 14px 0 8px; }
|
||||
.bmi-table__cell { flex: 1; text-align: center; }
|
||||
.bmi-table__range { font-size: 12px; color: #333; font-weight: 600; }
|
||||
.bmi-table__label { font-size: 11px; color: #999; margin-top: 4px; }
|
||||
.bmi-center-note { font-size: 11px; color: #999; text-align: center; margin-top: 10px; }
|
||||
.bmi-table__label { font-size: 12px; color: #999; margin-top: 8px; }
|
||||
.bmi-center-note { font-size: 11px; color: #b0b0b0; text-align: center; margin-top: 6px; }
|
||||
/* 健康数据 */
|
||||
.health-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
|
||||
.health-scroll::-webkit-scrollbar { display: none; }
|
||||
@@ -162,106 +170,119 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
|
||||
</div>
|
||||
</div>
|
||||
<!-- 体重管理模块 -->
|
||||
<div class="module" style="padding:0;overflow:hidden;">
|
||||
<div class="weight-module">
|
||||
<div class="weight-header">
|
||||
<span class="weight-header__title">体重管理</span>
|
||||
<span class="weight-header__watermark">WEIGHT</span>
|
||||
<span class="weight-header__tab">体重管理</span>
|
||||
<span class="weight-header__info">体重管理活动 <strong>58</strong> 天，第 <strong>8</strong> 名 ›</span>
|
||||
</div>
|
||||
<div class="weight-ball-section">
|
||||
<!-- 当前/目标/初始 卡片 -->
|
||||
<div class="weight-card">
|
||||
<div class="weight-avatars">
|
||||
<div class="weight-avatar-side">
|
||||
<div class="weight-avatar__img">
|
||||
<svg viewBox="0 0 56 72" fill="none">
|
||||
<circle cx="28" cy="12" r="10" fill="#FFD591"/>
|
||||
<rect x="16" y="22" width="24" height="20" rx="4" fill="#FF4D4F"/>
|
||||
<rect x="12" y="42" width="10" height="22" rx="4" fill="#FF4D4F"/>
|
||||
<rect x="34" y="42" width="10" height="22" rx="4" fill="#FF4D4F"/>
|
||||
<circle cx="22" cy="10" r="1.5" fill="#333"/>
|
||||
<circle cx="34" cy="10" r="1.5" fill="#333"/>
|
||||
<path d="M25 14 Q28 16 31 14" stroke="#333" stroke-width="1" fill="none"/>
|
||||
<svg viewBox="0 0 64 80" fill="none">
|
||||
<circle cx="32" cy="13" r="10" fill="#FFD591"/>
|
||||
<path d="M14 30 Q14 24 20 24 L44 24 Q50 24 50 30 L50 50 Q50 56 44 56 L20 56 Q14 56 14 50 Z" fill="#FF4D4F"/>
|
||||
<rect x="10" y="22" width="10" height="14" rx="3" fill="#FF4D4F" transform="rotate(-20 15 28)"/>
|
||||
<rect x="44" y="22" width="10" height="14" rx="3" fill="#FF4D4F" transform="rotate(20 49 28)"/>
|
||||
<rect x="16" y="52" width="12" height="20" rx="3" fill="#1f1f1f"/>
|
||||
<rect x="36" y="52" width="12" height="20" rx="3" fill="#1f1f1f"/>
|
||||
<rect x="14" y="70" width="14" height="6" rx="2" fill="#36cfc9"/>
|
||||
<rect x="36" y="70" width="14" height="6" rx="2" fill="#36cfc9"/>
|
||||
<circle cx="27" cy="11" r="1.4" fill="#333"/>
|
||||
<circle cx="37" cy="11" r="1.4" fill="#333"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="weight-avatar__label">初始体重</div>
|
||||
<div class="weight-avatar__val">73.5</div>
|
||||
<div class="weight-avatar__bmi">BMI 23.6</div>
|
||||
</div>
|
||||
<div class="weight-ball-wrap">
|
||||
<div class="weight-ball-wrap__top">当前体重</div>
|
||||
<div class="weight-ball-wrap__ruler"></div>
|
||||
<div class="weight-ball">
|
||||
<div class="weight-ball__bg"></div>
|
||||
<div class="weight-ball__rulers"></div>
|
||||
<div class="weight-ball__wave">
|
||||
<svg viewBox="0 0 150 82" preserveAspectRatio="none">
|
||||
<path d="M0 30 Q25 15 50 30 Q75 45 100 30 Q125 15 150 30 L150 82 L0 82 Z" fill="#36cfc9" opacity="0.7"/>
|
||||
<path d="M0 35 Q25 20 50 35 Q75 50 100 35 Q125 20 150 35 L150 82 L0 82 Z" fill="#1890ff" opacity="0.5"/>
|
||||
<svg viewBox="0 0 150 90" preserveAspectRatio="none">
|
||||
<path d="M0 30 Q25 12 50 30 Q75 48 100 30 Q125 12 150 30 L150 90 L0 90 Z" fill="#36cfc9" opacity="0.85"/>
|
||||
<path d="M0 40 Q25 22 50 40 Q75 58 100 40 Q125 22 150 40 L150 90 L0 90 Z" fill="#5cdbd3" opacity="0.55"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="weight-ball__content">
|
||||
<span class="weight-ball__val">62.6</span>
|
||||
<span class="weight-ball__unit">公斤</span>
|
||||
<span class="weight-ball__val">62.6<span class="weight-ball__unit">公斤</span></span>
|
||||
<span class="weight-ball__meta">BMI 23.6</span>
|
||||
<span class="weight-ball__meta">体脂率 20%</span>
|
||||
<span class="weight-ball__meta">体脂率：20%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weight-avatar-side">
|
||||
<a href="../weight-management/goal-commitment.html" class="weight-avatar__badge">目标承诺</a>
|
||||
<div class="weight-avatar__img">
|
||||
<svg viewBox="0 0 56 72" fill="none">
|
||||
<circle cx="28" cy="12" r="10" fill="#FFD591"/>
|
||||
<rect x="16" y="22" width="24" height="20" rx="4" fill="#1890ff"/>
|
||||
<rect x="12" y="42" width="10" height="22" rx="4" fill="#1890ff"/>
|
||||
<rect x="34" y="42" width="10" height="22" rx="4" fill="#1890ff"/>
|
||||
<circle cx="22" cy="10" r="1.5" fill="#333"/>
|
||||
<circle cx="34" cy="10" r="1.5" fill="#333"/>
|
||||
<path d="M25 14 Q28 16 31 14" stroke="#333" stroke-width="1" fill="none"/>
|
||||
<svg viewBox="0 0 64 80" fill="none">
|
||||
<circle cx="32" cy="13" r="10" fill="#FFD591"/>
|
||||
<path d="M14 30 Q14 24 20 24 L44 24 Q50 24 50 30 L50 50 Q50 56 44 56 L20 56 Q14 56 14 50 Z" fill="#FF4D4F"/>
|
||||
<rect x="10" y="22" width="10" height="14" rx="3" fill="#FF4D4F" transform="rotate(-20 15 28)"/>
|
||||
<rect x="44" y="22" width="10" height="14" rx="3" fill="#FF4D4F" transform="rotate(20 49 28)"/>
|
||||
<rect x="16" y="52" width="12" height="20" rx="3" fill="#1f1f1f"/>
|
||||
<rect x="36" y="52" width="12" height="20" rx="3" fill="#1f1f1f"/>
|
||||
<rect x="14" y="70" width="14" height="6" rx="2" fill="#36cfc9"/>
|
||||
<rect x="36" y="70" width="14" height="6" rx="2" fill="#36cfc9"/>
|
||||
<circle cx="27" cy="11" r="1.4" fill="#333"/>
|
||||
<circle cx="37" cy="11" r="1.4" fill="#333"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#ff4d4f;margin-bottom:4px;">目标承诺</div>
|
||||
<div class="weight-avatar__label">目标体重</div>
|
||||
<div class="weight-avatar__val">56</div>
|
||||
<div class="weight-avatar__bmi">BMI 22.5</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weight-middle">
|
||||
<div class="weight-change">
|
||||
<div class="weight-change__label">体重变化</div>
|
||||
<div class="weight-change__val negative">-10.9</div>
|
||||
<div class="weight-change__need">还要减 <span>6.6</span></div>
|
||||
<div class="weight-change-row">
|
||||
<div class="weight-change-row__cell">
|
||||
<div class="weight-change-row__label">初始体重</div>
|
||||
<div class="weight-change-row__val">73.5</div>
|
||||
<div class="weight-change-row__sub">BMI 23.6</div>
|
||||
</div>
|
||||
<div class="weight-change-row__cell">
|
||||
<div class="weight-change-row__label">体重变化</div>
|
||||
<div class="weight-change-row__val negative">-10.9 <span style="font-size:14px;">▼</span></div>
|
||||
<div class="weight-change-row__need">还要减 6.6</div>
|
||||
</div>
|
||||
<div class="weight-change-row__cell">
|
||||
<div class="weight-change-row__label">目标体重</div>
|
||||
<div class="weight-change-row__val">56</div>
|
||||
<div class="weight-change-row__sub">BMI 22.5</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:0 16px;">
|
||||
<!-- 今日打卡 -->
|
||||
<div class="daily-card">
|
||||
<div class="daily-date">2025年08月12日</div>
|
||||
<div class="daily-checkin">
|
||||
<div class="checkin-card checkin-card--eat">
|
||||
<div class="checkin-card__icon">🍽️</div>
|
||||
<div class="checkin-card__label">吃</div>
|
||||
<div class="checkin-card__val">1086<span class="checkin-card__unit">kcal</span></div>
|
||||
<div class="checkin-card__recommend">推荐 1950千卡</div>
|
||||
<div class="checkin-card__days">累计行动52天</div>
|
||||
</div>
|
||||
<div class="checkin-card checkin-card--move">
|
||||
<div class="checkin-card__icon">🏃</div>
|
||||
<div class="checkin-card__label">动</div>
|
||||
<div class="checkin-card__val">12586<span class="checkin-card__unit">步</span></div>
|
||||
<div class="checkin-card__recommend">推荐 12000步</div>
|
||||
<div class="checkin-card__days">累计行动362天</div>
|
||||
</div>
|
||||
<div class="checkin-card checkin-card--weight">
|
||||
<div class="checkin-card__icon">⚖️</div>
|
||||
<div class="checkin-card__label">体重</div>
|
||||
<div class="checkin-card__val">62.60<span class="checkin-card__unit">kg</span></div>
|
||||
<div class="checkin-card__recommend">推荐 75-80公斤</div>
|
||||
<div class="checkin-card__days">累计行动3122天</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bmi-section">
|
||||
<div class="bmi-formula">BMI = 体重(kg) ÷ 身高(m)²</div>
|
||||
<div class="bmi-table">
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">BMI<18.5</div><div class="bmi-table__label">消瘦</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">18.5≤BMI<24</div><div class="bmi-table__label">正常</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">24≤BMI<28</div><div class="bmi-table__label">超重</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">BMI≥28</div><div class="bmi-table__label">肥胖</div></div>
|
||||
</div>
|
||||
<div class="bmi-center-note">（中心型肥胖：男性腰围≥90cm、女性≥85cm）</div>
|
||||
</div>
|
||||
<!-- BMI 说明 -->
|
||||
<div class="bmi-card">
|
||||
<div class="bmi-formula">BMI = 体重(kg) ÷ 身高(m)²</div>
|
||||
<div class="bmi-table">
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">BMI<18.5</div><div class="bmi-table__label">消瘦</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">18.5≤BMI<24</div><div class="bmi-table__label">正常</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">24≤BMI<28</div><div class="bmi-table__label">超重</div></div>
|
||||
<div class="bmi-table__cell"><div class="bmi-table__range">BMI≥28</div><div class="bmi-table__label">肥胖</div></div>
|
||||
</div>
|
||||
<div class="bmi-center-note">（中心型肥胖：男性腰围≥90cm、女性≥85cm）</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 健康数据模块 -->
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<!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: #f0f3f6; 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: #f0f3f6; }
|
||||
.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: #f0f3f6; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.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; padding: 6px 14px 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
.card { background: #fff; border-radius: 14px; padding: 16px 16px 8px; margin-bottom: 12px; }
|
||||
|
||||
/* 活动头部 */
|
||||
.act-head__top { display: flex; align-items: center; gap: 8px; }
|
||||
.act-head__badge { font-size: 11px; font-weight: 700; color: #fff; background: #4dc472; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; }
|
||||
.act-head__name { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
|
||||
.act-head__period { font-size: 13px; color: #999; margin: 8px 0 14px 0; }
|
||||
.act-head__divider { border-top: 1px solid #f0f0f0; margin: 0 -16px; }
|
||||
|
||||
.act-row { display: flex; align-items: center; padding: 14px 0; border-bottom: 1px solid #f5f7fa; gap: 10px; }
|
||||
.act-row:last-child { border-bottom: none; }
|
||||
.act-row__label { font-size: 14px; color: #1a1a1a; font-weight: 500; min-width: 76px; flex-shrink: 0; }
|
||||
.act-row__value { flex: 1; font-size: 14px; color: #5a607f; }
|
||||
.act-row__btn { height: 32px; padding: 0 14px; background: #fff; color: #1f9d8f; border: 1.5px solid #4dc4b6; border-radius: 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
|
||||
.act-row__btn svg { width: 14px; height: 14px; }
|
||||
|
||||
/* 段落卡片 */
|
||||
.section__title { font-size: 15px; font-weight: 800; color: #1a1a1a; padding: 4px 0 14px; border-bottom: 1px solid #f0f0f0; margin-bottom: 14px; }
|
||||
.section__title .sub { font-size: 13px; font-weight: 500; color: #5a607f; margin-left: 2px; }
|
||||
.section__body { font-size: 14px; color: #1a1a1a; line-height: 1.9; padding-bottom: 12px; }
|
||||
.section__body p { margin-bottom: 2px; }
|
||||
|
||||
/* 附件 */
|
||||
.attach { padding: 14px 4px 6px; font-size: 14px; font-weight: 700; color: #1f9d8f; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">15:20</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">活动详情</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 活动基本信息 -->
|
||||
<div class="card">
|
||||
<div class="act-head__top">
|
||||
<span class="act-head__badge">进行中</span>
|
||||
<span class="act-head__name">公共事务中心2026年二季度体重管理</span>
|
||||
</div>
|
||||
<div class="act-head__period">2026-04-01 ~ 2026-06-30</div>
|
||||
<div class="act-head__divider"></div>
|
||||
<div class="act-row">
|
||||
<span class="act-row__label">参与人数：</span>
|
||||
<span class="act-row__value">242人</span>
|
||||
</div>
|
||||
<div class="act-row">
|
||||
<span class="act-row__label">组织部门：</span>
|
||||
<span class="act-row__value">健康服务中心</span>
|
||||
</div>
|
||||
<div class="act-row">
|
||||
<span class="act-row__label">负责人：</span>
|
||||
<span class="act-row__value">陈天宇</span>
|
||||
<button class="act-row__btn" onclick="alert('拨打：13581557014')">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
联系电话
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 奖励等级标准 -->
|
||||
<div class="card">
|
||||
<div class="section__title">奖励等级标准</div>
|
||||
<div class="section__body">按照油田公司相关通知和体重管理活动排名进行奖励</div>
|
||||
</div>
|
||||
|
||||
<!-- 综合分规则 -->
|
||||
<div class="card">
|
||||
<div class="section__title">综合分规则 <span class="sub">（活动期间计分）</span></div>
|
||||
<div class="section__body">
|
||||
<p>综合分 = 减重量分×35%+减重率分×20% +（就餐记录分+运动记录分+体重记录分）× 15%</p>
|
||||
<p>就餐、运动、体重的记录得分公式：</p>
|
||||
<p>（实际记录次数 / 应记录次数）× 100。</p>
|
||||
<p>其中，体重7天记录一次就可以。</p>
|
||||
<p>实际记录次数7天多次也算一次。</p>
|
||||
<p>就餐和运动，一天记录三次也算一次。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 行动分规则 -->
|
||||
<div class="card">
|
||||
<div class="section__title">行动分规则 <span class="sub">（活动期间计分）</span></div>
|
||||
<div class="section__body">
|
||||
<p>记录一次一分；</p>
|
||||
<p>就餐记录每天不能超过3分；</p>
|
||||
<p>运动记录每天不能超过1分；</p>
|
||||
<p>体重记录每天不能超过1分；</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 附件 -->
|
||||
<div class="attach" onclick="alert('下载附件')">附件《长庆油田体重管理三年行动计划.docx》</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,294 @@
|
||||
<!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; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.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; }
|
||||
|
||||
/* 信息表单 */
|
||||
.info-card { background: #fff; border-radius: 14px; padding: 4px 18px; }
|
||||
.info-row { display: flex; align-items: center; justify-content: space-between; height: 56px; border-bottom: 1px solid #f0f0f0; }
|
||||
.info-row:last-child { border-bottom: none; }
|
||||
.info-row__label { font-size: 15px; font-weight: 600; color: #1f1f1f; }
|
||||
.info-row__value { font-size: 15px; color: #7a8aa0; font-weight: 500; }
|
||||
.info-row__value--action { color: #36cfc9; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 底部弹窗 */
|
||||
.mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: none; z-index: 10; }
|
||||
.mask.show { display: block; }
|
||||
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 18px 18px 0 0; z-index: 11; transform: translateY(100%); transition: transform .25s ease; padding-bottom: 16px; }
|
||||
.sheet.show { transform: translateY(0); }
|
||||
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f0f0; }
|
||||
.sheet__cancel { font-size: 15px; color: #999; cursor: pointer; }
|
||||
.sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.sheet__submit { font-size: 15px; color: #36cfc9; font-weight: 600; cursor: pointer; }
|
||||
.sheet__list { padding: 6px 0; max-height: 360px; overflow-y: auto; }
|
||||
.sheet__list::-webkit-scrollbar { display: none; }
|
||||
.sheet__item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px; color: #333; cursor: pointer; }
|
||||
.sheet__item.active { color: #36cfc9; font-weight: 600; background: #f0fdfb; }
|
||||
.sheet__check { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d0d0d0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sheet__item.active .sheet__check { background: #36cfc9; border-color: #36cfc9; }
|
||||
.sheet__check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; display: none; }
|
||||
.sheet__item.active .sheet__check svg { display: block; }
|
||||
|
||||
/* 身高测量弹窗（滚轮标尺） */
|
||||
.height-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
|
||||
.height-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.height-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; z-index: 21; padding: 10px 0 22px; transform: translateY(100%); transition: transform 0.3s ease; max-height: 88%; display: flex; flex-direction: column; }
|
||||
.height-sheet.show { transform: translateY(0); }
|
||||
.height-sheet__handle { width: 40px; height: 4px; background: #d8dde3; border-radius: 2px; margin: 0 auto 8px; flex-shrink: 0; }
|
||||
.height-sheet__head { display: flex; align-items: center; gap: 12px; padding: 8px 22px 16px; border-bottom: 1px solid #f1f3f5; flex-shrink: 0; }
|
||||
.height-sheet__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(135deg, #8a7bff 0%, #6f5bf5 100%); }
|
||||
.height-sheet__icon svg { width: 22px; height: 22px; }
|
||||
.height-sheet__meta { flex: 1; min-width: 0; }
|
||||
.height-sheet__title { font-size: 17px; font-weight: 700; color: #1a1a1a; }
|
||||
.height-sheet__hint { font-size: 13px; color: #9aa3ad; margin-top: 4px; }
|
||||
.height-sheet__body { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
|
||||
.height-sheet__body::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 测量字段 */
|
||||
.height-field { padding: 18px 16px 8px; position: relative; }
|
||||
.height-field__label { position: absolute; left: 18px; top: 22px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.height-field__value { text-align: center; margin: 22px 0 16px; min-height: 44px; }
|
||||
.height-field__num { font-size: 40px; font-weight: 800; color: #1a1a1a; letter-spacing: 1px; }
|
||||
.height-field__unit { font-size: 14px; color: #9aa3ad; margin-left: 8px; vertical-align: middle; }
|
||||
|
||||
/* 标尺 */
|
||||
.height-ruler { position: relative; height: 64px; margin: 0 16px; }
|
||||
.height-ruler__pointer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
|
||||
.height-ruler__pointer-flag { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #4dc4b6; }
|
||||
.height-ruler__pointer-line { width: 2px; height: 22px; background: #4dc4b6; margin-top: -1px; }
|
||||
.height-ruler__scale { position: absolute; left: 0; right: 0; top: 16px; height: 22px; }
|
||||
.height-ruler__tick { position: absolute; bottom: 0; width: 1px; background: #b6e3dd; }
|
||||
.height-ruler__tick--minor { height: 8px; }
|
||||
.height-ruler__tick--major { height: 16px; }
|
||||
.height-ruler__labels { position: absolute; left: 0; right: 0; top: 42px; height: 16px; font-size: 12px; color: #9aa3ad; }
|
||||
.height-ruler__label { position: absolute; transform: translateX(-50%); }
|
||||
|
||||
.height-sheet__submit-bar { padding: 14px 16px 0; flex-shrink: 0; }
|
||||
.height-sheet__submit { display: block; width: 100%; height: 46px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 23px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">基本信息</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="info-card">
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">姓名</span>
|
||||
<span class="info-row__value">陈天宇</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">性别</span>
|
||||
<span class="info-row__value">男</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">出生年月</span>
|
||||
<span class="info-row__value">1990-06-04</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">身高 (cm)</span>
|
||||
<span id="heightValue" class="info-row__value info-row__value--action" onclick="openHeightSheet()">添加</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体重 (kg)</span>
|
||||
<span class="info-row__value">90.5</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">BMI</span>
|
||||
<span class="info-row__value">27.93</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体脂率 (%)</span>
|
||||
<span class="info-row__value">30.3</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">腰围 (cm)</span>
|
||||
<span class="info-row__value">94</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">体力活动</span>
|
||||
<span id="activityValue" class="info-row__value info-row__value--action" onclick="openSheet()">添加</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">基础代谢率 (kcal)</span>
|
||||
<span class="info-row__value">1963.2</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">身份证号</span>
|
||||
<span class="info-row__value">640382199006054618</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-row__label">手机号</span>
|
||||
<span class="info-row__value">13581557014</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 身高测量弹窗 -->
|
||||
<div class="height-mask" id="heightMask" onclick="closeHeightSheet()">
|
||||
<div class="height-sheet" onclick="event.stopPropagation()">
|
||||
<div class="height-sheet__handle"></div>
|
||||
<div class="height-sheet__head">
|
||||
<div class="height-sheet__icon">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7 3v18"/>
|
||||
<path d="M3 7l4-4 4 4"/>
|
||||
<path d="M17 21V3"/>
|
||||
<path d="M13 17l4 4 4-4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="height-sheet__meta">
|
||||
<div class="height-sheet__title">身高</div>
|
||||
<div class="height-sheet__hint">请设置您的身高</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="height-sheet__body">
|
||||
<div class="height-field">
|
||||
<div class="height-field__value">
|
||||
<span class="height-field__num" id="heightNum">175</span>
|
||||
<span class="height-field__unit">cm</span>
|
||||
</div>
|
||||
<div class="height-ruler">
|
||||
<div class="height-ruler__pointer">
|
||||
<div class="height-ruler__pointer-flag"></div>
|
||||
<div class="height-ruler__pointer-line"></div>
|
||||
</div>
|
||||
<div class="height-ruler__scale" id="heightRulerScale"></div>
|
||||
<div class="height-ruler__labels" id="heightRulerLabels"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="height-sheet__submit-bar">
|
||||
<button class="height-sheet__submit" onclick="submitHeight()">提 交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 体力活动选择弹窗 -->
|
||||
<div class="mask" id="mask" onclick="closeSheet()"></div>
|
||||
<div class="sheet" id="sheet">
|
||||
<div class="sheet__head">
|
||||
<span class="sheet__cancel" onclick="closeSheet()">取消</span>
|
||||
<span class="sheet__title">体力活动</span>
|
||||
<span class="sheet__submit" onclick="submitActivity()">提交</span>
|
||||
</div>
|
||||
<div class="sheet__list" id="activityList">
|
||||
<div class="sheet__item" data-val="久坐不运动"><span>久坐不运动</span><span class="sheet__check"><svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg></span></div>
|
||||
<div class="sheet__item" data-val="久坐运动或久站"><span>久坐运动或久站</span><span class="sheet__check"><svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg></span></div>
|
||||
<div class="sheet__item" data-val="体力劳动者"><span>体力劳动者</span><span class="sheet__check"><svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg></span></div>
|
||||
<div class="sheet__item" data-val="久站+运动"><span>久站+运动</span><span class="sheet__check"><svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg></span></div>
|
||||
<div class="sheet__item" data-val="健身+体力劳动"><span>健身+体力劳动</span><span class="sheet__check"><svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var selectedActivity = null;
|
||||
var mask = document.getElementById('mask');
|
||||
var sheet = document.getElementById('sheet');
|
||||
var valueEl = document.getElementById('activityValue');
|
||||
var items = document.querySelectorAll('#activityList .sheet__item');
|
||||
|
||||
function openSheet() {
|
||||
mask.classList.add('show');
|
||||
setTimeout(function(){ sheet.classList.add('show'); }, 10);
|
||||
}
|
||||
function closeSheet() {
|
||||
sheet.classList.remove('show');
|
||||
setTimeout(function(){ mask.classList.remove('show'); }, 250);
|
||||
}
|
||||
items.forEach(function(item) {
|
||||
item.addEventListener('click', function() {
|
||||
items.forEach(function(i) { i.classList.remove('active'); });
|
||||
item.classList.add('active');
|
||||
selectedActivity = item.getAttribute('data-val');
|
||||
});
|
||||
});
|
||||
function submitActivity() {
|
||||
if (!selectedActivity) {
|
||||
alert('请选择体力活动类型');
|
||||
return;
|
||||
}
|
||||
valueEl.innerHTML = '<span style="color:#7a8aa0;font-weight:500;margin-right:8px;">' + selectedActivity + '</span><span style="color:#36cfc9;font-weight:600;">修改</span>';
|
||||
closeSheet();
|
||||
}
|
||||
|
||||
/* —— 身高测量弹窗 —— */
|
||||
var heightValue = 175;
|
||||
var heightMask = document.getElementById('heightMask');
|
||||
var heightSheet = document.querySelector('.height-sheet');
|
||||
var heightNumEl = document.getElementById('heightNum');
|
||||
var heightRulerScale = document.getElementById('heightRulerScale');
|
||||
var heightRulerLabels = document.getElementById('heightRulerLabels');
|
||||
|
||||
function openHeightSheet() {
|
||||
renderHeightRuler();
|
||||
heightMask.classList.add('show');
|
||||
heightSheet.classList.add('show');
|
||||
}
|
||||
|
||||
function closeHeightSheet() {
|
||||
heightSheet.classList.remove('show');
|
||||
setTimeout(function(){ heightMask.classList.remove('show'); }, 250);
|
||||
}
|
||||
|
||||
function submitHeight() {
|
||||
var heightEl = document.getElementById('heightValue');
|
||||
heightEl.innerHTML = '<span style="color:#7a8aa0;font-weight:500;margin-right:8px;">' + heightValue + '</span><span style="color:#36cfc9;font-weight:600;">修改</span>';
|
||||
closeHeightSheet();
|
||||
}
|
||||
|
||||
function renderHeightRuler() {
|
||||
heightRulerScale.innerHTML = '';
|
||||
heightRulerLabels.innerHTML = '';
|
||||
var pxPerStep = 8;
|
||||
var rulerWidth = 358;
|
||||
var totalTicks = Math.floor(rulerWidth / pxPerStep);
|
||||
var centerIndex = Math.floor(totalTicks / 2);
|
||||
for (var i = 0; i < totalTicks; i++) {
|
||||
var offsetSteps = i - centerIndex;
|
||||
var tick = document.createElement('div');
|
||||
tick.className = 'height-ruler__tick';
|
||||
var isMajor = (Math.abs(offsetSteps) % 10) === 0;
|
||||
tick.classList.add(isMajor ? 'height-ruler__tick--major' : 'height-ruler__tick--minor');
|
||||
if (offsetSteps > 0) tick.classList.add('height-ruler__tick--right');
|
||||
tick.style.left = (i * pxPerStep) + 'px';
|
||||
heightRulerScale.appendChild(tick);
|
||||
if (isMajor) {
|
||||
var lbl = document.createElement('div');
|
||||
lbl.className = 'height-ruler__label';
|
||||
lbl.textContent = String(heightValue + offsetSteps);
|
||||
lbl.style.left = (i * pxPerStep) + 'px';
|
||||
heightRulerLabels.appendChild(lbl);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
<!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: #eafaf7; 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: transparent; }
|
||||
.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: transparent; display: flex; align-items: center; padding: 0 16px; flex-shrink: 0; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: #1a1a1a; margin-right: 28px; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #eafaf7; padding: 4px 16px 24px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 禁忌证条目 */
|
||||
.contra-item { background: #fff; border: 1px solid #b6e7df; border-radius: 14px; padding: 14px 14px 14px 44px; margin-bottom: 12px; position: relative; min-height: 56px; display: flex; align-items: center; }
|
||||
.contra-item__index { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #b6e7df; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #1f9d8f; }
|
||||
.contra-item__text { font-size: 14px; color: #2bb8a6; line-height: 1.7; word-break: break-word; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">13:36</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">禁忌证</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">1</span>
|
||||
<span class="contra-item__text">静息心电图有明显的缺血表现、2周内有心肌梗死或者其他急性心血管事件；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">2</span>
|
||||
<span class="contra-item__text">不稳定型心绞痛；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">3</span>
|
||||
<span class="contra-item__text">未控制的心律失常；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">4</span>
|
||||
<span class="contra-item__text">重度主动脉瓣狭窄或者其他瓣膜疾病；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">5</span>
|
||||
<span class="contra-item__text">心力衰竭失代偿；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">6</span>
|
||||
<span class="contra-item__text">急性肺栓塞或肺梗死；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">7</span>
|
||||
<span class="contra-item__text">急性甲状腺功能亢进；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">8</span>
|
||||
<span class="contra-item__text">急性心肌炎或心包炎；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">9</span>
|
||||
<span class="contra-item__text">急性血栓性静脉炎；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">10</span>
|
||||
<span class="contra-item__text">其他妨碍安全和运动锻炼的残疾；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">11</span>
|
||||
<span class="contra-item__text">电解质异常；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">12</span>
|
||||
<span class="contra-item__text">梗阻性肥厚型心脏病，静息最大左心室流出道压差 >25mmHg；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">13</span>
|
||||
<span class="contra-item__text">主动脉夹层；</span>
|
||||
</div>
|
||||
<div class="contra-item">
|
||||
<span class="contra-item__index">14</span>
|
||||
<span class="contra-item__text">经专业人员检查确定不适合参加体重管理的其他禁忌证等。</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,402 @@
|
||||
<!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; position: relative; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; }
|
||||
.nav-more { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.nav-menu { position: absolute; top: 44px; right: 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 6px 0; min-width: 180px; z-index: 30; display: none; }
|
||||
.nav-menu.show { display: block; }
|
||||
.nav-menu__item { padding: 11px 18px; font-size: 14px; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
|
||||
.nav-menu__item:hover { background: #f5f7fa; }
|
||||
.nav-menu__item.active { color: #1f9d8f; font-weight: 600; }
|
||||
.nav-menu__item.active::after { content: '✓'; color: #1f9d8f; font-size: 13px; font-weight: 700; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; padding-bottom: 30px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 顶部 Banner */
|
||||
.hero { position: relative; background: linear-gradient(180deg, #4dc4b6 0%, #46b8af 60%, #3aa9a0 100%); padding: 22px 20px 80px; overflow: hidden; }
|
||||
.hero__mountain { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; opacity: 0.35; }
|
||||
.hero__title { font-size: 22px; font-weight: 800; color: #fff; line-height: 1.4; letter-spacing: 1px; }
|
||||
.hero__subtitle { font-size: 16px; font-weight: 600; color: #fff; margin-top: 6px; letter-spacing: 0.5px; }
|
||||
.hero__runners { position: absolute; right: 12px; top: 30px; width: 160px; height: 100px; }
|
||||
|
||||
/* 步骤卡 */
|
||||
.steps-card { background: #fff; border-radius: 14px; margin: -54px 16px 16px; padding: 18px 16px 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); position: relative; z-index: 2; }
|
||||
.card-activity { text-align: center; margin-bottom: 14px; }
|
||||
.card-activity__name { font-size: 17px; font-weight: 800; color: #1a1a1a; letter-spacing: 1px; }
|
||||
.card-activity__period { font-size: 13px; color: #999; margin-top: 4px; }
|
||||
.card-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.card-progress__label { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.card-progress__days { font-size: 13px; color: #5a607f; }
|
||||
.card-progress__days .hi { color: #1f9d8f; font-weight: 700; font-size: 14px; }
|
||||
.card-targets { display: flex; background: #f5f7fa; border-radius: 10px; padding: 14px 8px; margin-bottom: 14px; }
|
||||
.card-target { flex: 1; text-align: center; }
|
||||
.card-target__value { font-size: 18px; font-weight: 800; color: #1a1a1a; }
|
||||
.card-target__label { font-size: 12px; color: #8a93a0; margin-top: 4px; }
|
||||
.card-status { font-size: 13px; font-weight: 600; text-align: center; padding: 4px 0 14px; border-bottom: 1px dashed #ececec; margin-bottom: 16px; }
|
||||
.card-status--wait { color: #faad14; }
|
||||
.card-status--pass { color: #1f9d8f; }
|
||||
.card-status--reject { color: #ff4d4f; }
|
||||
.card-status__link { color: inherit; text-decoration: underline; cursor: pointer; }
|
||||
.card-tip { font-size: 15px; font-weight: 600; color: #1a1a1a; text-align: center; padding: 10px 0 16px; }
|
||||
.steps-row { display: flex; align-items: flex-start; justify-content: space-between; }
|
||||
|
||||
/* 驳回原因弹窗 */
|
||||
.reason-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
|
||||
.reason-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.reason { width: 100%; background: #fff; border-radius: 14px; padding: 22px 22px 18px; transform: scale(0.95); transition: transform 0.2s; }
|
||||
.reason-mask.show .reason { transform: scale(1); }
|
||||
.reason__title { font-size: 17px; font-weight: 800; color: #1a1a1a; text-align: center; margin-bottom: 14px; }
|
||||
.reason__body { font-size: 14px; line-height: 1.7; color: #333; background: #fff5f5; border-left: 3px solid #ff4d4f; border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
|
||||
.reason__meta { display: flex; justify-content: space-between; font-size: 12px; color: #9aa3ad; margin-bottom: 16px; }
|
||||
.reason__btn { display: block; width: 100%; height: 42px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 21px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 4px; }
|
||||
.steps-item { flex: 1; text-align: center; position: relative; cursor: pointer; }
|
||||
.steps-item a { text-decoration: none; color: inherit; display: block; }
|
||||
.steps-item__icon { width: 44px; height: 44px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; color: #4dc4b6; }
|
||||
.steps-item__icon svg { width: 32px; height: 32px; }
|
||||
.steps-item__name { font-size: 13px; color: #333; }
|
||||
.steps-item__name--warn { color: #ff8a3d; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.steps-item__warn-icon { width: 12px; height: 12px; flex-shrink: 0; }
|
||||
.steps-item__name--signed { color: #1f9d8f; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
|
||||
.steps-item__check-icon { width: 12px; height: 12px; flex-shrink: 0; }
|
||||
.steps-arrow { width: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-top: 14px; color: #c8c8c8; font-size: 12px; }
|
||||
|
||||
/* 说明区 */
|
||||
.intro { background: #fff; border-radius: 14px; margin: 0 16px 16px; padding: 22px 18px 26px; }
|
||||
.intro__title { font-size: 18px; font-weight: 800; color: #1a1a1a; text-align: center; margin-bottom: 18px; }
|
||||
.intro__body { font-size: 14px; color: #333; line-height: 2; text-indent: 2em; }
|
||||
.intro__body p { margin-bottom: 4px; }
|
||||
.intro__hi { color: #1f9d8f; }
|
||||
.intro__warn { color: #ff4d4f; font-weight: 600; }
|
||||
.intro__warn-link { color: #ff4d4f; font-weight: 700; }
|
||||
.intro__attach { font-size: 13px; color: #666; margin-top: 18px; text-indent: 0; }
|
||||
.intro__attach-link { color: #1f86ff; text-decoration: underline; cursor: pointer; }
|
||||
|
||||
/* 落款 */
|
||||
.signature { padding: 26px 32px 12px; font-size: 14px; color: #333; }
|
||||
.signature__line { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 14px; }
|
||||
.signature__label { font-weight: 600; }
|
||||
.signature__value { display: inline-block; width: 140px; border-bottom: 1px solid #bbb; height: 22px; }
|
||||
|
||||
/* 底部确认按钮（交互辅助） */
|
||||
.btn-bar { padding: 16px 16px 22px; background: #fff; }
|
||||
.btn-confirm { display: block; width: 100%; height: 46px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 23px; font-size: 16px; font-weight: 600; cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="location.href='../home/index.html'">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">目标承诺</div>
|
||||
<div class="nav-more" onclick="toggleTypeMenu(event)">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
|
||||
</div>
|
||||
<div class="nav-menu" id="typeMenu">
|
||||
<div class="nav-menu__item active" data-type="unset-noact" onclick="setGoalType('unset-noact')">未选目标 - 无活动</div>
|
||||
<div class="nav-menu__item" data-type="unset-hasact" onclick="setGoalType('unset-hasact')">未选目标 - 有活动</div>
|
||||
<div class="nav-menu__item" data-type="personal" onclick="setGoalType('personal')">已选个人目标</div>
|
||||
<div class="nav-menu__item" data-type="wait" onclick="setGoalType('wait')">单位活动 - 待审核</div>
|
||||
<div class="nav-menu__item" data-type="pass" onclick="setGoalType('pass')">单位活动 - 审核通过</div>
|
||||
<div class="nav-menu__item" data-type="reject" onclick="setGoalType('reject')">单位活动 - 已驳回</div>
|
||||
<div class="nav-menu__item" data-type="signed" onclick="setGoalType('signed')">单位活动 - 已签署承诺书</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-content">
|
||||
<!-- 顶部 Banner -->
|
||||
<div class="hero">
|
||||
<div class="hero__title">体重管理</div>
|
||||
<div class="hero__subtitle">让健康行动走进生活</div>
|
||||
<!-- 跑步小人插画 -->
|
||||
<svg class="hero__runners" viewBox="0 0 200 110" fill="none">
|
||||
<!-- 后跑步者（女） -->
|
||||
<circle cx="55" cy="32" r="9" fill="#FFD0A8"/>
|
||||
<path d="M52 24 Q55 18 62 22 Q66 26 60 32 Z" fill="#3a3a3a"/>
|
||||
<path d="M45 42 Q45 38 50 38 L60 38 Q65 38 65 42 L65 60 Q65 64 60 64 L50 64 Q45 64 45 60 Z" fill="#ffb74d"/>
|
||||
<rect x="48" y="62" width="6" height="20" rx="2" fill="#5a4a3a"/>
|
||||
<rect x="56" y="62" width="6" height="20" rx="2" fill="#5a4a3a" transform="rotate(15 59 72)"/>
|
||||
<rect x="38" y="44" width="6" height="16" rx="2" fill="#ffb74d" transform="rotate(-30 41 52)"/>
|
||||
<rect x="64" y="42" width="6" height="14" rx="2" fill="#ffb74d" transform="rotate(40 67 49)"/>
|
||||
<!-- 中跑步者（男主） -->
|
||||
<circle cx="95" cy="36" r="10" fill="#FFCFA0"/>
|
||||
<path d="M88 28 Q95 20 104 26 Q106 32 100 36 Z" fill="#2c2c2c"/>
|
||||
<path d="M84 48 Q84 44 89 44 L102 44 Q107 44 107 48 L107 68 Q107 72 102 72 L89 72 Q84 72 84 68 Z" fill="#1f8c83"/>
|
||||
<rect x="86" y="70" width="7" height="22" rx="2" fill="#2a2a2a" transform="rotate(-10 89.5 81)"/>
|
||||
<rect x="98" y="70" width="7" height="22" rx="2" fill="#2a2a2a" transform="rotate(20 101.5 81)"/>
|
||||
<rect x="76" y="50" width="6" height="18" rx="2" fill="#FFCFA0" transform="rotate(-40 79 59)"/>
|
||||
<rect x="108" y="46" width="6" height="18" rx="2" fill="#FFCFA0" transform="rotate(35 111 55)"/>
|
||||
<!-- 右后跑步者（男） -->
|
||||
<circle cx="140" cy="34" r="9" fill="#FFCFA0"/>
|
||||
<path d="M134 26 Q140 19 147 24 Q148 30 144 34 Z" fill="#3a2a1a"/>
|
||||
<path d="M131 44 Q131 40 136 40 L147 40 Q152 40 152 44 L152 62 Q152 66 147 66 L136 66 Q131 66 131 62 Z" fill="#ff7e4a"/>
|
||||
<rect x="133" y="64" width="6" height="20" rx="2" fill="#2a2a2a"/>
|
||||
<rect x="144" y="64" width="6" height="20" rx="2" fill="#2a2a2a" transform="rotate(18 147 74)"/>
|
||||
<rect x="124" y="46" width="6" height="16" rx="2" fill="#ff7e4a" transform="rotate(-25 127 54)"/>
|
||||
<rect x="151" y="42" width="6" height="16" rx="2" fill="#ff7e4a" transform="rotate(45 154 50)"/>
|
||||
</svg>
|
||||
<!-- 底部远山剪影 -->
|
||||
<svg class="hero__mountain" viewBox="0 0 400 60" preserveAspectRatio="none">
|
||||
<path d="M0 40 L40 20 L70 40 L110 15 L150 40 L190 25 L230 40 L270 18 L310 40 L350 22 L400 40 L400 60 L0 60 Z" fill="#ffffff" opacity="0.25"/>
|
||||
<path d="M0 50 L60 30 L120 50 L180 28 L240 50 L300 32 L360 50 L400 36 L400 60 L0 60 Z" fill="#ffffff" opacity="0.35"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 步骤卡 -->
|
||||
<div class="steps-card">
|
||||
<!-- 活动头（仅单位活动类型展示） -->
|
||||
<div class="card-activity" id="cardActivity" style="display:none;">
|
||||
<div class="card-activity__name">XX单位第一季度减重活动</div>
|
||||
<div class="card-activity__period">（2025.1.5 ~ 2025.4.5）</div>
|
||||
</div>
|
||||
<!-- 进度行 -->
|
||||
<div class="card-progress" id="cardProgress">
|
||||
<span class="card-progress__label" id="cardProgressLabel">您当前已设置个人目标</span>
|
||||
<span class="card-progress__days">已进行 <span class="hi">0/100</span> 天</span>
|
||||
</div>
|
||||
<!-- 目标统计 -->
|
||||
<div class="card-targets" id="cardTargets">
|
||||
<div class="card-target">
|
||||
<div class="card-target__value">59kg</div>
|
||||
<div class="card-target__label">目标体重</div>
|
||||
</div>
|
||||
<div class="card-target">
|
||||
<div class="card-target__value">16%</div>
|
||||
<div class="card-target__label">目标体脂</div>
|
||||
</div>
|
||||
<div class="card-target">
|
||||
<div class="card-target__value">80cm</div>
|
||||
<div class="card-target__label">目标腰围</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 审核状态（仅单位活动类型展示） -->
|
||||
<div class="card-status" id="cardStatus" style="display:none;"></div>
|
||||
<!-- 未选目标提示（仅未选目标类型展示） -->
|
||||
<div class="card-tip" id="cardTip" style="display:none;">请先完成目标管理，再签订活动承诺书!</div>
|
||||
<div class="steps-row">
|
||||
<div class="steps-item">
|
||||
<a href="basic-info.html">
|
||||
<div class="steps-item__icon">
|
||||
<svg viewBox="0 0 32 32" fill="none" stroke="#4dc4b6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="5" y="5" width="22" height="22" rx="3"/>
|
||||
<circle cx="12" cy="14" r="2.5"/>
|
||||
<path d="M8 22 Q12 18 16 22"/>
|
||||
<line x1="18" y1="12" x2="24" y2="12"/>
|
||||
<line x1="18" y1="16" x2="24" y2="16"/>
|
||||
<line x1="18" y1="20" x2="22" y2="20"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="steps-item__name">基本信息</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="steps-arrow">›</div>
|
||||
<div class="steps-item">
|
||||
<a href="indicators-diseases.html">
|
||||
<div class="steps-item__icon">
|
||||
<svg viewBox="0 0 32 32" fill="none" stroke="#4dc4b6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="5" y="5" width="22" height="22" rx="3"/>
|
||||
<path d="M8 18 L12 18 L14 12 L17 22 L20 16 L24 16"/>
|
||||
<circle cx="25" cy="9" r="3"/>
|
||||
<line x1="25" y1="7" x2="25" y2="11"/>
|
||||
<line x1="23" y1="9" x2="27" y2="9"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="steps-item__name steps-item__name--warn">
|
||||
<svg class="steps-item__warn-icon" viewBox="0 0 16 16" fill="none" stroke="#ff8a3d" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M8 1.5 L15 14 L1 14 Z"/>
|
||||
<line x1="8" y1="6" x2="8" y2="10"/>
|
||||
<circle cx="8" cy="12" r="0.6" fill="#ff8a3d" stroke="none"/>
|
||||
</svg>
|
||||
指标慢病
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="steps-arrow">›</div>
|
||||
<div class="steps-item">
|
||||
<a id="goalMgmtLink" href="goal-management.html">
|
||||
<div class="steps-item__icon">
|
||||
<svg viewBox="0 0 32 32" fill="none" stroke="#4dc4b6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="5" y="5" width="22" height="22" rx="3"/>
|
||||
<line x1="9" y1="11" x2="20" y2="11"/>
|
||||
<line x1="9" y1="15" x2="17" y2="15"/>
|
||||
<circle cx="20" cy="20" r="4"/>
|
||||
<path d="M18.5 20 L19.5 21 L21.5 19"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="steps-item__name">目标管理</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="steps-arrow">›</div>
|
||||
<div class="steps-item" id="stepSign">
|
||||
<a href="promise-signing.html" id="stepSignLink">
|
||||
<div class="steps-item__icon" id="stepSignIcon">
|
||||
<svg viewBox="0 0 32 32" fill="none" stroke="#4dc4b6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="5" y="5" width="22" height="22" rx="3"/>
|
||||
<line x1="9" y1="11" x2="20" y2="11"/>
|
||||
<line x1="9" y1="15" x2="17" y2="15"/>
|
||||
<polygon points="22,16 23.2,19 26.5,19 23.8,21 24.8,24 22,22.2 19.2,24 20.2,21 17.5,19 20.8,19" fill="#4dc4b6" stroke="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="steps-item__name" id="stepSignName">签署承诺</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动说明 -->
|
||||
<div class="intro">
|
||||
<div class="intro__title">体重管理活动说明</div>
|
||||
<div class="intro__body">
|
||||
<p>健康体重，一起行动！欢迎您参加体重管理活动，您和运动等生活习惯方面改变的一小步，将使您的健康状况改善一大步！</p>
|
||||
<p>根据最新体检数据和《集团公司体重管理指导手册》内超重和肥胖相关的判定标准，您当前的体重是：<span class="intro__hi" id="introCurWeight">--kg</span>，您的目标体重是：<span class="intro__hi" id="introTgtWeight">--kg</span>，您当前的体脂是：<span class="intro__hi" id="introCurFat">--%</span>，您的目标体脂是：<span class="intro__hi" id="introTgtFat">--%</span>，您当前的腰围是：<span class="intro__hi" id="introCurWaist">--cm</span>，您的目标腰围是：<span class="intro__hi" id="introTgtWaist">--cm</span>，为达到标准体重，您应减重：<span class="intro__hi" id="introLoseWeight">--kg</span>，共需 <span class="intro__hi" id="introDays">--</span> 天。如您有基础疾病或其他身体特殊状况，请及时联系本单位健康管理员，并调整减重目标。<span class="intro__warn">如您有以下禁忌症，不建议您参加本次体重管理活动：</span><a href="contraindications.html" class="intro__warn-link">点击查看禁忌证详情。</a></p>
|
||||
<p>为使您的体重异常状况得到显著改善，有效降低心脑血管疾病、糖尿病等患病风险，您应在本次活动中应参考膳食和运动处方指导，实时关注自身体重和体脂率，结合个人情况，按时完成以下打卡。</p>
|
||||
</div>
|
||||
<div class="intro__attach">附件：<a class="intro__attach-link" href="javascript:void(0)" onclick="alert('打开《体重管理指导原则》')">《体重管理指导原则》</a></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 驳回原因弹窗 -->
|
||||
<div class="reason-mask" id="reasonMask" onclick="closeReasonModal(event)">
|
||||
<div class="reason" onclick="event.stopPropagation()">
|
||||
<div class="reason__title">驳回原因</div>
|
||||
<div class="reason__body">您设置的目标体重（59kg）与基础代谢及减重周期不匹配，建议在 14 周内分阶段减重，目标体重不低于 62kg；目标体脂率请控制在 18% 以上，避免过度消耗。</div>
|
||||
<div class="reason__meta">
|
||||
<span>审核人：张管理员</span>
|
||||
<span>2025-02-08 14:32</span>
|
||||
</div>
|
||||
<button class="reason__btn" onclick="goAdjust()">去调整</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleTypeMenu(e) {
|
||||
if (e) e.stopPropagation();
|
||||
document.getElementById('typeMenu').classList.toggle('show');
|
||||
}
|
||||
|
||||
document.addEventListener('click', function(){
|
||||
document.getElementById('typeMenu').classList.remove('show');
|
||||
});
|
||||
|
||||
var STATUS_MAP = {
|
||||
'unset-noact': { activity:false, tip:true, tipText:'请先前往目标管理页面确定目标', progress:false, label:'', status:'', introData:false },
|
||||
'unset-hasact': { activity:true, tip:true, tipText:'请前往目标管理页面确认数据并提交审核', progress:false, label:'', status:'', introData:false },
|
||||
personal: { activity:false, tip:false, progress:true, label:'您当前已设置个人目标', status:'', introData:true },
|
||||
wait: { activity:true, tip:false, progress:true, label:'您当前参与单位活动', status:'<span class="card-status--wait">管理员审核中，请耐心等待...</span>', introData:false },
|
||||
pass: { activity:true, tip:false, progress:true, label:'您当前参与单位活动', status:'<span class="card-status--pass">管理员已审核通过，请尽快签订承诺书参加活动</span>', introData:false },
|
||||
reject: { activity:true, tip:false, progress:true, label:'您当前参与单位活动', status:'<span class="card-status--reject">管理员审核驳回，<a class="card-status__link" onclick="openReasonModal()">查看原因</a>，请重新调整目标</span>', introData:false },
|
||||
signed: { activity:true, tip:false, progress:true, label:'您当前参与单位活动', status:'', signedStep:true, introData:true }
|
||||
};
|
||||
|
||||
// 活动说明区模拟数据
|
||||
var INTRO_VALUES = {
|
||||
curWeight:'90kg', tgtWeight:'77kg', curFat:'28%', tgtFat:'25%', curWaist:'100cm', tgtWaist:'86cm', loseWeight:'13kg', days:'90'
|
||||
};
|
||||
|
||||
function setGoalType(type) {
|
||||
var cfg = STATUS_MAP[type];
|
||||
if (!cfg) return;
|
||||
document.getElementById('cardActivity').style.display = cfg.activity ? 'block' : 'none';
|
||||
document.getElementById('cardTip').style.display = cfg.tip ? 'block' : 'none';
|
||||
if (cfg.tip) document.getElementById('cardTip').textContent = cfg.tipText || '请先完成目标管理，再签订活动承诺书!';
|
||||
document.getElementById('cardProgress').style.display = cfg.progress ? 'flex' : 'none';
|
||||
document.getElementById('cardTargets').style.display = cfg.progress ? 'flex' : 'none';
|
||||
if (cfg.label) document.getElementById('cardProgressLabel').textContent = cfg.label;
|
||||
var statusEl = document.getElementById('cardStatus');
|
||||
if (cfg.status) {
|
||||
statusEl.style.display = 'block';
|
||||
statusEl.innerHTML = cfg.status;
|
||||
} else {
|
||||
statusEl.style.display = 'none';
|
||||
statusEl.innerHTML = '';
|
||||
}
|
||||
// 签署承诺步骤 ✅ 标记
|
||||
var nameEl = document.getElementById('stepSignName');
|
||||
if (nameEl) {
|
||||
var stepText = cfg.signedStep ? '我的承诺' : '签署承诺';
|
||||
if (cfg.signedStep) {
|
||||
nameEl.className = 'steps-item__name steps-item__name--signed';
|
||||
nameEl.innerHTML = '<svg class="steps-item__check-icon" viewBox="0 0 16 16" fill="none" stroke="#1f9d8f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,8.5 6.5,12 13,4"/></svg>' + stepText;
|
||||
} else {
|
||||
nameEl.className = 'steps-item__name';
|
||||
nameEl.innerHTML = stepText;
|
||||
}
|
||||
}
|
||||
// 签署承诺跳转链接
|
||||
var linkEl = document.getElementById('stepSignLink');
|
||||
if (linkEl) linkEl.href = cfg.signedStep ? 'my-promise.html' : 'promise-signing.html';
|
||||
// 活动说明区数据填充
|
||||
var d = INTRO_VALUES;
|
||||
if (cfg.introData) {
|
||||
document.getElementById('introCurWeight').textContent = d.curWeight;
|
||||
document.getElementById('introTgtWeight').textContent = d.tgtWeight;
|
||||
document.getElementById('introCurFat').textContent = d.curFat;
|
||||
document.getElementById('introTgtFat').textContent = d.tgtFat;
|
||||
document.getElementById('introCurWaist').textContent = d.curWaist;
|
||||
document.getElementById('introTgtWaist').textContent = d.tgtWaist;
|
||||
document.getElementById('introLoseWeight').textContent = d.loseWeight;
|
||||
document.getElementById('introDays').textContent = d.days;
|
||||
} else {
|
||||
// 恢复占位符
|
||||
document.getElementById('introCurWeight').textContent = '--kg';
|
||||
document.getElementById('introTgtWeight').textContent = '--kg';
|
||||
document.getElementById('introCurFat').textContent = '--%';
|
||||
document.getElementById('introTgtFat').textContent = '--%';
|
||||
document.getElementById('introCurWaist').textContent = '--cm';
|
||||
document.getElementById('introTgtWaist').textContent = '--cm';
|
||||
document.getElementById('introLoseWeight').textContent = '--kg';
|
||||
document.getElementById('introDays').textContent = '--';
|
||||
}
|
||||
document.querySelectorAll('.nav-menu__item').forEach(function(el){
|
||||
el.classList.toggle('active', el.dataset.type === type);
|
||||
});
|
||||
document.getElementById('typeMenu').classList.remove('show');
|
||||
}
|
||||
|
||||
// 优先读取 URL 参数中的状态，否则默认未选目标-无活动
|
||||
function getQueryParam(key) {
|
||||
var params = window.location.search.slice(1).split('&');
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
var pair = params[i].split('=');
|
||||
if (pair[0] === key) return decodeURIComponent(pair[1] || '');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
var defaultType = getQueryParam('type') || 'unset-hasact';
|
||||
setGoalType(defaultType);
|
||||
document.getElementById('goalMgmtLink').href = 'goal-management.html?type=' + defaultType;
|
||||
|
||||
function openReasonModal() {
|
||||
document.getElementById('reasonMask').classList.add('show');
|
||||
}
|
||||
function closeReasonModal(e) {
|
||||
if (e && e.target !== e.currentTarget) return;
|
||||
document.getElementById('reasonMask').classList.remove('show');
|
||||
}
|
||||
function goAdjust() {
|
||||
window.location.href = 'goal-management.html?type=' + defaultType;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,812 @@
|
||||
<!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: #f4f6f7; 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; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.nav-title { flex: 1; text-align: center; font-size: 17px; font-weight: 600; color: #1a1a1a; margin-right: 28px; }
|
||||
.nav-more { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; flex-shrink: 0; }
|
||||
.nav-menu { position: absolute; top: 44px; right: 12px; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); padding: 6px 0; min-width: 180px; z-index: 30; display: none; }
|
||||
.nav-menu.show { display: block; }
|
||||
.nav-menu__item { padding: 11px 18px; font-size: 14px; color: #1a1a1a; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
|
||||
.nav-menu__item:hover { background: #f5f7fa; }
|
||||
.nav-menu__item.active { color: #1f9d8f; font-weight: 600; }
|
||||
.nav-menu__item.active::after { content: '✓'; color: #1f9d8f; font-size: 13px; font-weight: 700; }
|
||||
.scroll-content { flex: 1; overflow-y: auto; background: #f4f6f7; padding-bottom: 16px; }
|
||||
.scroll-content::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 通用卡片 */
|
||||
.gm-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px; transition: opacity 0.2s; }
|
||||
.gm-card--selectable { cursor: pointer; border: 1.5px solid transparent; }
|
||||
.gm-card--active { border-color: #36cfc9; }
|
||||
.gm-card--active .gm-card__title-icon { display: inline-flex; }
|
||||
.gm-card--disabled { opacity: 0.5; }
|
||||
.gm-card--disabled .gm-select,
|
||||
.gm-card--disabled .gm-input,
|
||||
.gm-card--disabled .gm-btn-action { pointer-events: none; }
|
||||
.gm-card--disabled .gm-card__title-icon { display: none; }
|
||||
.gm-card__hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.gm-card__title { font-size: 14px; font-weight: 700; color: #1a1a1a; }
|
||||
.gm-card__title-icon { width: 14px; height: 14px; display: none; align-items: center; justify-content: center; background: #36cfc9; color: #fff; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
|
||||
.gm-card__title-icon svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; }
|
||||
.gm-card__more { font-size: 12px; color: #1f86ff; cursor: pointer; }
|
||||
|
||||
/* 自我管理天数输入 */
|
||||
.gm-self-days { display: inline-flex; align-items: center; gap: 2px; }
|
||||
.gm-self-days__input { width: 48px; height: 24px; padding: 0 6px; background: #f5f7fa; border: none; border-radius: 4px; font-size: 13px; font-weight: 700; color: #36cfc9; text-align: center; outline: none; }
|
||||
|
||||
/* 下拉选择 */
|
||||
.gm-select { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 12px; background: #f5f7fa; border-radius: 6px; font-size: 13px; color: #999; cursor: pointer; }
|
||||
.gm-select--filled { color: #1a1a1a; font-weight: 600; }
|
||||
.gm-select__arrow { color: #bbb; font-size: 12px; }
|
||||
|
||||
/* 活动选择底部弹窗 */
|
||||
.act-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
|
||||
.act-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.act-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 16px 16px 0 0; z-index: 31; padding: 10px 0 18px; transform: translateY(100%); transition: transform 0.3s; max-height: 70%; display: flex; flex-direction: column; }
|
||||
.act-sheet.show { transform: translateY(0); }
|
||||
.act-sheet__handle { width: 38px; height: 4px; background: #d8dde3; border-radius: 2px; margin: 0 auto 8px; }
|
||||
.act-sheet__title { font-size: 16px; font-weight: 700; color: #1a1a1a; text-align: center; padding: 6px 0 12px; border-bottom: 1px solid #f1f3f5; }
|
||||
.act-sheet__list { flex: 1; overflow-y: auto; padding: 4px 0; }
|
||||
.act-sheet__list::-webkit-scrollbar { display: none; }
|
||||
.act-item { padding: 14px 18px; border-bottom: 1px solid #f5f7fa; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
|
||||
.act-item__main { flex: 1; min-width: 0; }
|
||||
.act-item__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
|
||||
.act-item__period { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
.act-item__check { color: #36cfc9; font-weight: 800; opacity: 0; }
|
||||
.act-item.selected .act-item__check { opacity: 1; }
|
||||
.act-sheet__empty { padding: 48px 0; text-align: center; font-size: 14px; color: #c8d0d8; }
|
||||
.act-sheet__confirm-bar { padding: 12px 16px 0; }
|
||||
.act-sheet__confirm { display: block; width: 100%; height: 42px; background: #36cfc9; color: #fff; border: none; border-radius: 21px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 4px; }
|
||||
|
||||
/* 输入 + 按钮 */
|
||||
.gm-input-row { display: flex; gap: 8px; align-items: center; }
|
||||
.gm-input { flex: 1; height: 38px; padding: 0 12px; background: #f5f7fa; border-radius: 6px; border: none; font-size: 13px; color: #333; outline: none; }
|
||||
.gm-input::placeholder { color: #b8b8b8; }
|
||||
.gm-btn-action { height: 38px; padding: 0 14px; background: #36cfc9; color: #fff; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
|
||||
.gm-btn-action:disabled, .gm-btn-action.is-disabled { background: #c8d0d8; color: #fff; cursor: not-allowed; }
|
||||
|
||||
/* 三列基本信息 */
|
||||
.gm-info-row { display: flex; justify-content: space-between; padding-top: 6px; }
|
||||
.gm-info-cell { flex: 1; text-align: center; }
|
||||
.gm-info-cell__value { font-size: 18px; font-weight: 700; color: #1a1a1a; }
|
||||
.gm-info-cell__label { font-size: 12px; color: #999; margin-top: 4px; }
|
||||
|
||||
/* 数据录入行 */
|
||||
.gm-data-row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px dashed #f0f0f0; }
|
||||
.gm-data-row:first-of-type { border-top: none; padding-top: 4px; }
|
||||
.gm-data-row__label { width: 72px; font-size: 13px; color: #333; flex-shrink: 0; }
|
||||
.gm-data-row__input { flex: 1; height: 36px; padding: 0 12px; background: #f5f7fa; border-radius: 6px; border: none; font-size: 14px; font-weight: 600; color: #333; outline: none; min-width: 0; }
|
||||
.gm-data-row__sources { display: flex; gap: 6px; flex-shrink: 0; }
|
||||
.gm-chip { padding: 6px 10px; border-radius: 6px; background: #f0f2f5; color: #777; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
|
||||
.gm-chip.active { background: #1f86ff; color: #fff; border-color: #1f86ff; }
|
||||
.gm-chip--cyan.active { background: #36cfc9; border-color: #36cfc9; }
|
||||
|
||||
/* 人群结果（自动计算） */
|
||||
.gm-group { display: flex; align-items: center; gap: 8px; padding: 6px 0 2px; }
|
||||
.gm-group__label { font-size: 13px; color: #9aa3ad; font-weight: 500; flex-shrink: 0; }
|
||||
.gm-group__tag { display: inline-block; padding: 4px 14px; border-radius: 14px; background: #e6fffb; color: #36cfc9; font-size: 13px; font-weight: 700; border: 1px solid #36cfc9; }
|
||||
.gm-group__source { font-size: 12px; color: #c8cdd3; margin-left: auto; }
|
||||
|
||||
/* 主按钮 */
|
||||
.gm-cta { display: block; width: calc(100% - 24px); margin: 14px 12px 0; height: 44px; background: linear-gradient(135deg, #36cfc9, #1890ff); color: #fff; border: none; border-radius: 22px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 目标设定 */
|
||||
.gm-target-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px dashed #f0f0f0; gap: 8px; }
|
||||
.gm-target-row:first-of-type { border-top: none; padding-top: 4px; }
|
||||
.gm-target-row__main { flex: 1; min-width: 0; }
|
||||
.gm-target-row__label { font-size: 13px; color: #333; }
|
||||
.gm-target-row__value { font-size: 16px; font-weight: 700; color: #36cfc9; margin: 0 4px; }
|
||||
.gm-target-row__tip { font-size: 11px; color: #999; }
|
||||
.gm-target-row__tip-warn { font-size: 11px; color: #f5222d; margin-top: 4px; }
|
||||
.gm-target-row__edit { color: #36cfc9; font-size: 13px; cursor: pointer; font-weight: 600; flex-shrink: 0; }
|
||||
|
||||
/* 任务列表 */
|
||||
.gm-task-card { background: #fff; border-radius: 12px; margin: 10px 12px 0; padding: 14px 14px 16px; position: relative; }
|
||||
.gm-task-card::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 14px; background: radial-gradient(circle, #fff 4px, transparent 4.5px); background-size: 14px 14px; background-position: 0 0; }
|
||||
.gm-task-card__title { text-align: center; font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }
|
||||
.gm-task-card__item { font-size: 13px; color: #333; line-height: 1.9; }
|
||||
.gm-task-card__item strong { color: #1a1a1a; font-weight: 700; }
|
||||
|
||||
/* 底部按钮组 */
|
||||
.gm-action-row { display: flex; gap: 10px; margin: 14px 12px 12px; }
|
||||
.gm-action-row__btn { flex: 1; height: 38px; border: 1px solid #36cfc9; background: #fff; color: #36cfc9; border-radius: 19px; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.gm-action-row__btn--primary { background: #36cfc9; color: #fff; }
|
||||
|
||||
/* 目标修改底部弹窗（滚轮标尺） */
|
||||
.target-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
|
||||
.target-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.target-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; z-index: 41; padding: 10px 0 22px; transform: translateY(100%); transition: transform 0.3s ease; max-height: 88%; display: flex; flex-direction: column; }
|
||||
.target-sheet.show { transform: translateY(0); }
|
||||
.target-sheet__handle { width: 40px; height: 4px; background: #d8dde3; border-radius: 2px; margin: 0 auto 8px; flex-shrink: 0; }
|
||||
.target-sheet__head { display: flex; align-items: center; gap: 12px; padding: 8px 22px 16px; border-bottom: 1px solid #f1f3f5; flex-shrink: 0; }
|
||||
.target-sheet__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.target-sheet__icon svg { width: 22px; height: 22px; }
|
||||
.target-sheet__meta { flex: 1; min-width: 0; }
|
||||
.target-sheet__title { font-size: 17px; font-weight: 700; color: #1a1a1a; }
|
||||
.target-sheet__hint { font-size: 13px; color: #9aa3ad; margin-top: 4px; }
|
||||
.target-sheet__body { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
|
||||
.target-sheet__body::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* 测量字段 */
|
||||
.target-field { padding: 18px 16px 8px; position: relative; }
|
||||
.target-field__value { text-align: center; margin: 22px 0 16px; min-height: 44px; }
|
||||
.target-field__num { font-size: 40px; font-weight: 800; color: #1a1a1a; letter-spacing: 1px; }
|
||||
.target-field__unit { font-size: 14px; color: #9aa3ad; margin-left: 8px; vertical-align: middle; }
|
||||
|
||||
/* 标尺 */
|
||||
.target-ruler { position: relative; height: 64px; margin: 0 16px; }
|
||||
.target-ruler__pointer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
|
||||
.target-ruler__pointer-flag { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #4dc4b6; }
|
||||
.target-ruler__pointer-line { width: 2px; height: 22px; background: #4dc4b6; margin-top: -1px; }
|
||||
.target-ruler__scale { position: absolute; left: 0; right: 0; top: 16px; height: 22px; }
|
||||
.target-ruler__tick { position: absolute; bottom: 0; width: 1px; background: #b6e3dd; }
|
||||
.target-ruler__tick--minor { height: 8px; }
|
||||
.target-ruler__tick--major { height: 16px; }
|
||||
.target-ruler__tick--right { background: #ffd9a8; }
|
||||
.target-ruler__labels { position: absolute; left: 0; right: 0; top: 42px; height: 16px; font-size: 12px; color: #9aa3ad; }
|
||||
.target-ruler__label { position: absolute; transform: translateX(-50%); }
|
||||
|
||||
.target-sheet__submit-bar { padding: 14px 16px 0; flex-shrink: 0; }
|
||||
.target-sheet__submit { display: block; width: 100%; height: 46px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 23px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 6px; }
|
||||
|
||||
/* 提交确认弹窗（中央卡片） */
|
||||
.confirm-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
|
||||
.confirm-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.confirm-card { width: 100%; background: #fff; border-radius: 16px; padding: 24px 22px 20px; transform: scale(0.95); transition: transform 0.2s; }
|
||||
.confirm-mask.show .confirm-card { transform: scale(1); }
|
||||
.confirm-card__title { font-size: 17px; font-weight: 800; color: #1a1a1a; text-align: center; margin-bottom: 10px; }
|
||||
.confirm-card__msg { font-size: 14px; color: #333; text-align: center; line-height: 1.7; margin-bottom: 20px; }
|
||||
.confirm-card__btns { display: flex; gap: 12px; }
|
||||
.confirm-card__btn { flex: 1; height: 42px; border: none; border-radius: 21px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.confirm-card__btn--cancel { background: #f0f2f5; color: #999; }
|
||||
.confirm-card__btn--confirm { background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; }
|
||||
|
||||
/* 状态提示栏 */
|
||||
.gm-status-bar { margin: 10px 12px 0; padding: 12px 16px; background: #fff; border-radius: 12px; font-size: 13px; font-weight: 600; text-align: center; display: none; }
|
||||
.gm-status-bar--wait { color: #faad14; }
|
||||
.gm-status-bar--pass { color: #1f9d8f; }
|
||||
.gm-status-bar--reject { color: #ff4d4f; }
|
||||
.gm-status-bar--reject .gm-status-bar__link { color: #ff4d4f; text-decoration: underline; cursor: pointer; }
|
||||
.gm-status-bar--signed { color: #1f9d8f; }
|
||||
|
||||
/* 驳回原因弹窗 */
|
||||
.reject-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 55; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
|
||||
.reject-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.reject-card { width: 100%; background: #fff; border-radius: 14px; padding: 22px 22px 18px; transform: scale(0.95); transition: transform 0.2s; }
|
||||
.reject-mask.show .reject-card { transform: scale(1); }
|
||||
.reject-card__title { font-size: 17px; font-weight: 800; color: #1a1a1a; text-align: center; margin-bottom: 14px; }
|
||||
.reject-card__body { font-size: 14px; line-height: 1.7; color: #333; background: #fff5f5; border-left: 3px solid #ff4d4f; border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
|
||||
.reject-card__meta { display: flex; justify-content: space-between; font-size: 12px; color: #9aa3ad; margin-bottom: 16px; }
|
||||
.reject-card__btn { display: block; width: 100%; height: 42px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 21px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 4px; }
|
||||
|
||||
/* 锁定态 */
|
||||
.gm-locked .gm-data-row__input { pointer-events: none; background: #f0f2f5; color: #999; }
|
||||
.gm-locked .gm-chip { pointer-events: none; }
|
||||
.gm-locked .gm-target-row__edit { pointer-events: none; color: #c8d0d8; }
|
||||
.gm-locked .gm-card__more { pointer-events: none; }
|
||||
.gm-locked .gm-self-days__input { pointer-events: none; }
|
||||
.gm-locked #selfNameInput { pointer-events: none; background: #f0f2f5; color: #999; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">12:00</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="location.href='goal-commitment.html?type=' + (getQueryParam('type') || 'unset-hasact')">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">目标管理</div>
|
||||
<div class="nav-more" onclick="toggleTypeMenu(event)">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
|
||||
</div>
|
||||
<div class="nav-menu" id="typeMenu">
|
||||
<div class="nav-menu__item" data-type="unset-noact" onclick="setGoalType('unset-noact')">未选目标 - 无活动</div>
|
||||
<div class="nav-menu__item" data-type="unset-hasact" onclick="setGoalType('unset-hasact')">未选目标 - 有活动</div>
|
||||
<div class="nav-menu__item" data-type="personal" onclick="setGoalType('personal')">已选个人目标</div>
|
||||
<div class="nav-menu__item" data-type="wait" onclick="setGoalType('wait')">单位活动 - 待审核</div>
|
||||
<div class="nav-menu__item" data-type="pass" onclick="setGoalType('pass')">单位活动 - 审核通过</div>
|
||||
<div class="nav-menu__item" data-type="reject" onclick="setGoalType('reject')">单位活动 - 已驳回</div>
|
||||
<div class="nav-menu__item" data-type="signed" onclick="setGoalType('signed')">单位活动 - 已签署承诺书</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- 活动目标管理 -->
|
||||
<div class="gm-card gm-card--selectable" id="cardActivity" onclick="selectMode('activity')">
|
||||
<div class="gm-card__hd">
|
||||
<div>
|
||||
<span class="gm-card__title">活动目标管理</span>
|
||||
<span class="gm-card__title-icon" id="checkActivity">
|
||||
<svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
<span class="gm-card__more" id="actDetailLink" onclick="event.stopPropagation(); location.href='activity-detail.html'">查看活动详情 ›</span>
|
||||
</div>
|
||||
<div class="gm-select gm-select--filled" id="actSelect" onclick="event.stopPropagation(); openActSheet()">
|
||||
<span id="actSelectText">公共事务中心2026年二季度体重管理</span>
|
||||
<span class="gm-select__arrow">▾</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 自我目标管理 -->
|
||||
<div class="gm-card gm-card--selectable" id="cardSelf" onclick="selectMode('self')">
|
||||
<div class="gm-card__hd">
|
||||
<div>
|
||||
<span class="gm-card__title">自我目标管理</span>
|
||||
<span class="gm-card__title-icon" id="checkSelf">
|
||||
<svg viewBox="0 0 12 12"><polyline points="2,6.5 5,9.5 10,3"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gm-input-row">
|
||||
<input class="gm-input" id="selfNameInput" placeholder="请给您的减重行动取一个名字" onclick="event.stopPropagation()">
|
||||
<button class="gm-btn-action" id="selfNameBtn" onclick="event.stopPropagation(); alert('已为您起名')">自动起名</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 个人信息 -->
|
||||
<div class="gm-card">
|
||||
<div class="gm-card__hd">
|
||||
<span class="gm-card__title">个人信息</span>
|
||||
<span class="gm-card__more" onclick="location.href='basic-info.html'">完善基本信息 ›</span>
|
||||
</div>
|
||||
<div class="gm-info-row">
|
||||
<div class="gm-info-cell">
|
||||
<div class="gm-info-cell__value">--</div>
|
||||
<div class="gm-info-cell__label">身高</div>
|
||||
</div>
|
||||
<div class="gm-info-cell">
|
||||
<div class="gm-info-cell__value">男</div>
|
||||
<div class="gm-info-cell__label">性别</div>
|
||||
</div>
|
||||
<div class="gm-info-cell">
|
||||
<div class="gm-info-cell__value">36</div>
|
||||
<div class="gm-info-cell__label">年龄</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 初始数据录入 -->
|
||||
<div class="gm-card">
|
||||
<div class="gm-card__hd">
|
||||
<span class="gm-card__title">初始数据录入</span>
|
||||
</div>
|
||||
<div class="gm-data-row">
|
||||
<span class="gm-data-row__label">初始体重：</span>
|
||||
<input class="gm-data-row__input" value="90 kg" readonly>
|
||||
<div class="gm-data-row__sources">
|
||||
<span class="gm-chip">身高秤</span>
|
||||
<span class="gm-chip">蓝牙秤</span>
|
||||
<span class="gm-chip active">自记</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gm-data-row">
|
||||
<span class="gm-data-row__label">初始体脂：</span>
|
||||
<input class="gm-data-row__input" value="28 %" readonly>
|
||||
<div class="gm-data-row__sources">
|
||||
<span class="gm-chip">身高秤</span>
|
||||
<span class="gm-chip">蓝牙秤</span>
|
||||
<span class="gm-chip active">自记</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gm-data-row">
|
||||
<span class="gm-data-row__label">初始腰围：</span>
|
||||
<input class="gm-data-row__input" value="100 cm" readonly>
|
||||
<div class="gm-data-row__sources">
|
||||
<span class="gm-chip active">自记</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 人群计算结果 -->
|
||||
<div class="gm-card">
|
||||
<div class="gm-group">
|
||||
<span class="gm-group__label">您属于：</span>
|
||||
<span class="gm-group__tag" id="groupTag">减重人群</span>
|
||||
<span class="gm-group__source">根据初始数据自动计算</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 开始计算按钮 -->
|
||||
<button class="gm-cta" onclick="alert('开始计算目标')">开始计算</button>
|
||||
|
||||
<!-- 目标设定 -->
|
||||
<div class="gm-card">
|
||||
<div class="gm-card__hd">
|
||||
<span class="gm-card__title">目标设定</span>
|
||||
<span class="gm-card__more" style="color:#999;" id="actDays">参加活动天数：90 天</span>
|
||||
<span class="gm-self-days" id="selfDays" style="display:none;"><span style="font-size:12px;color:#999;">自我管理天数：</span><input class="gm-self-days__input" id="selfDaysInput" value="30" type="number" min="1"><span style="font-size:12px;color:#999;"> 天</span></span>
|
||||
</div>
|
||||
<div class="gm-target-row">
|
||||
<div class="gm-target-row__main">
|
||||
<span class="gm-target-row__label">目标体重：</span>
|
||||
<span class="gm-target-row__value" id="targetWeightValue">59 kg</span>
|
||||
<span class="gm-target-row__tip">（系统推荐 60~85kg）</span>
|
||||
<div class="gm-target-row__tip-warn">当前体重不符合健康减重规律</div>
|
||||
</div>
|
||||
<span class="gm-target-row__edit" onclick="openTargetSheet('targetWeight')">修改</span>
|
||||
</div>
|
||||
<div class="gm-target-row">
|
||||
<div class="gm-target-row__main">
|
||||
<span class="gm-target-row__label">目标体脂：</span>
|
||||
<span class="gm-target-row__value" id="targetFatValue">25 %</span>
|
||||
<span class="gm-target-row__tip">（系统推荐 23~28%）</span>
|
||||
</div>
|
||||
<span class="gm-target-row__edit" onclick="openTargetSheet('targetFat')">修改</span>
|
||||
</div>
|
||||
<div class="gm-target-row">
|
||||
<div class="gm-target-row__main">
|
||||
<span class="gm-target-row__label">目标腰围：</span>
|
||||
<span class="gm-target-row__value" id="targetWaistValue">86 cm</span>
|
||||
<span class="gm-target-row__tip">（系统推荐 65~94cm）</span>
|
||||
</div>
|
||||
<span class="gm-target-row__edit" onclick="openTargetSheet('targetWaist')">修改</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 您将要完成的任务 -->
|
||||
<div class="gm-task-card">
|
||||
<div class="gm-task-card__title">您将要完成的任务</div>
|
||||
<div class="gm-task-card__item">• <strong>目标</strong>：体重 85kg 减至 77kg</div>
|
||||
<div class="gm-task-card__item">• <strong>时间</strong>：2025年4月1日 至 2025年6月30日，共 90 天</div>
|
||||
<div class="gm-task-card__item">• <strong>减重</strong>：您共需减重 8kg</div>
|
||||
<div class="gm-task-card__item">• <strong>平均</strong>：日均减重 0.10kg，周均减重 0.625kg</div>
|
||||
<div class="gm-task-card__item">• <strong>饮食</strong>：日均少摄入 350 千卡，相当于少吃 100g 米饭</div>
|
||||
<div class="gm-task-card__item">• <strong>运动</strong>：日均多消耗 600 千卡，相当于快走 12000 步</div>
|
||||
</div>
|
||||
|
||||
<!-- 状态提示栏 -->
|
||||
<div class="gm-status-bar" id="statusBar"></div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="gm-action-row" id="actionRow">
|
||||
<button class="gm-action-row__btn gm-action-row__btn--primary" id="btnSubmitReview" onclick="openConfirm()">提交审核</button>
|
||||
<button class="gm-action-row__btn gm-action-row__btn--primary" id="btnConfirmGoal" onclick="openPersonalConfirm()">确定目标</button>
|
||||
<button class="gm-action-row__btn gm-action-row__btn--primary" id="btnResubmit" style="display:none;" onclick="openConfirm()">重新提交</button>
|
||||
</div>
|
||||
<div class="gm-action-row" id="btnModifyRow" style="display:none;margin:14px 12px 12px;">
|
||||
<button class="gm-action-row__btn gm-action-row__btn--primary" style="flex:1;" onclick="unlockPersonal()">修改目标</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 目标修改底部弹窗 -->
|
||||
<div class="target-mask" id="targetMask" onclick="closeTargetSheet()">
|
||||
<div class="target-sheet" onclick="event.stopPropagation()">
|
||||
<div class="target-sheet__handle"></div>
|
||||
<div class="target-sheet__head">
|
||||
<div class="target-sheet__icon" id="targetSheetIcon"></div>
|
||||
<div class="target-sheet__meta">
|
||||
<div class="target-sheet__title" id="targetSheetTitle">目标体重</div>
|
||||
<div class="target-sheet__hint" id="targetSheetHint">请设置您的目标值</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="target-sheet__body">
|
||||
<div class="target-field">
|
||||
<div class="target-field__value">
|
||||
<span class="target-field__num" id="targetNum">59</span>
|
||||
<span class="target-field__unit" id="targetUnit">kg</span>
|
||||
</div>
|
||||
<div class="target-ruler">
|
||||
<div class="target-ruler__pointer">
|
||||
<div class="target-ruler__pointer-flag"></div>
|
||||
<div class="target-ruler__pointer-line"></div>
|
||||
</div>
|
||||
<div class="target-ruler__scale" id="targetRulerScale"></div>
|
||||
<div class="target-ruler__labels" id="targetRulerLabels"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="target-sheet__submit-bar">
|
||||
<button class="target-sheet__submit" onclick="submitTarget()">提 交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提交审核确认弹窗 -->
|
||||
<div class="confirm-mask" id="confirmMask" onclick="closeConfirm()">
|
||||
<div class="confirm-card" onclick="event.stopPropagation()">
|
||||
<div class="confirm-card__title">确认提交审核</div>
|
||||
<div class="confirm-card__msg">提交后，您的目标设置将由管理员审核，<br/>请耐心等待审核结果。</div>
|
||||
<div class="confirm-card__btns">
|
||||
<button class="confirm-card__btn confirm-card__btn--cancel" onclick="closeConfirm()">再想想</button>
|
||||
<button class="confirm-card__btn confirm-card__btn--confirm" onclick="doSubmitReview()">确认提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 确定个人目标确认弹窗 -->
|
||||
<div class="confirm-mask" id="personalConfirmMask" onclick="closePersonalConfirm()">
|
||||
<div class="confirm-card" onclick="event.stopPropagation()">
|
||||
<div class="confirm-card__title">是否确定目标</div>
|
||||
<div class="confirm-card__msg">确定后，您的个人目标将正式生效</div>
|
||||
<div class="confirm-card__btns">
|
||||
<button class="confirm-card__btn confirm-card__btn--cancel" onclick="closePersonalConfirm()">再想想</button>
|
||||
<button class="confirm-card__btn confirm-card__btn--confirm" onclick="doConfirmPersonalGoal()">确认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 驳回原因弹窗 -->
|
||||
<div class="reject-mask" id="rejectMask" onclick="closeRejectModal(event)">
|
||||
<div class="reject-card" onclick="event.stopPropagation()">
|
||||
<div class="reject-card__title">驳回原因</div>
|
||||
<div class="reject-card__body">您设置的目标体重（59kg）与基础代谢及减重周期不匹配，建议在 14 周内分阶段减重，目标体重不低于 62kg；目标体脂率请控制在 18% 以上，避免过度消耗。</div>
|
||||
<div class="reject-card__meta">
|
||||
<span>审核人：张管理员</span>
|
||||
<span>2025-02-08 14:32</span>
|
||||
</div>
|
||||
<button class="reject-card__btn" onclick="closeRejectModal()">我知道了</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 活动选择底部弹窗 -->
|
||||
<div class="act-mask" id="actMask" onclick="closeActSheet()"></div>
|
||||
<div class="act-sheet" id="actSheet">
|
||||
<div class="act-sheet__handle"></div>
|
||||
<div class="act-sheet__title">请选择活动</div>
|
||||
<div class="act-sheet__list" id="actList"></div>
|
||||
<div class="act-sheet__confirm-bar">
|
||||
<button class="act-sheet__confirm" onclick="confirmActivity()">确 认</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var ACTIVITIES = [
|
||||
{ id:'a1', name:'公共事务中心2026年二季度体重管理', period:'2026-04-01 ~ 2026-06-30' },
|
||||
{ id:'a2', name:'采油五厂2026年春季减重挑战赛', period:'2026-03-01 ~ 2026-05-31' },
|
||||
{ id:'a3', name:'勘探开发研究院健康行动季', period:'2026-04-15 ~ 2026-07-15' },
|
||||
{ id:'a4', name:'机关综合部年度健康管理活动', period:'2026-01-01 ~ 2026-12-31' },
|
||||
{ id:'a5', name:'长庆油田公司2025年员工减重活动', period:'2025-10-01 ~ 2025-12-31' }
|
||||
];
|
||||
var selectedActivityId = 'a1';
|
||||
var pendingActivityId = 'a1';
|
||||
var personalLocked = false; // 个人目标是否处于锁定态
|
||||
|
||||
function openActSheet() {
|
||||
if (personalLocked || isReadOnly()) return;
|
||||
pendingActivityId = selectedActivityId;
|
||||
renderActList();
|
||||
document.getElementById('actMask').classList.add('show');
|
||||
document.getElementById('actSheet').classList.add('show');
|
||||
}
|
||||
function closeActSheet() {
|
||||
document.getElementById('actMask').classList.remove('show');
|
||||
document.getElementById('actSheet').classList.remove('show');
|
||||
}
|
||||
function renderActList() {
|
||||
var list = document.getElementById('actList');
|
||||
list.innerHTML = '';
|
||||
if (currentState === 'unset-noact') {
|
||||
list.innerHTML = '<div class="act-sheet__empty">暂无可参加的活动</div>';
|
||||
return;
|
||||
}
|
||||
ACTIVITIES.forEach(function(a){
|
||||
var row = document.createElement('div');
|
||||
row.className = 'act-item' + (a.id === pendingActivityId ? ' selected' : '');
|
||||
row.innerHTML = '<div class="act-item__main"><div class="act-item__name">' + a.name + '</div>' +
|
||||
'<div class="act-item__period">' + a.period + '</div></div>' +
|
||||
'<span class="act-item__check">✓</span>';
|
||||
row.onclick = function() { if (!personalLocked && !isReadOnly()) { pendingActivityId = a.id; renderActList(); } };
|
||||
list.appendChild(row);
|
||||
});
|
||||
}
|
||||
function confirmActivity() {
|
||||
selectedActivityId = pendingActivityId;
|
||||
var act = ACTIVITIES.find(function(a){ return a.id === selectedActivityId; });
|
||||
document.getElementById('actSelectText').textContent = act ? act.name : '请选择您要参加的活动';
|
||||
document.getElementById('actDetailLink').style.display = act ? 'inline' : 'none';
|
||||
closeActSheet();
|
||||
}
|
||||
|
||||
/* —— URL 参数读取 —— */
|
||||
function getQueryParam(key) {
|
||||
var params = window.location.search.slice(1).split('&');
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
var pair = params[i].split('=');
|
||||
if (pair[0] === key) return decodeURIComponent(pair[1] || '');
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
/* —— 状态配置 —— */
|
||||
var STATE_CONFIG = {
|
||||
'unset-noact': { mode:'activity', hideDetail:true, hideSelect:false, readOnly:false, selfLock:false, btnMode:'normal', status:'' },
|
||||
'unset-hasact':{ mode:'activity', hideDetail:false, hideSelect:false, readOnly:false, selfLock:false, btnMode:'normal', status:'' },
|
||||
'personal': { mode:'self', hideDetail:true, hideSelect:true, readOnly:false, selfLock:true, btnMode:'modify', status:'' },
|
||||
'wait': { mode:'activity', hideDetail:false, hideSelect:false, readOnly:true, selfLock:false, btnMode:'none', status:'<span class="gm-status-bar--wait">管理员审核中，请耐心等待...</span>' },
|
||||
'pass': { mode:'activity', hideDetail:false, hideSelect:false, readOnly:true, selfLock:false, btnMode:'none', status:'<span class="gm-status-bar--pass">管理员已审核通过，请尽快签订承诺书参加活动</span>' },
|
||||
'reject': { mode:'activity', hideDetail:false, hideSelect:false, readOnly:false, selfLock:false, btnMode:'resubmit', status:'<span class="gm-status-bar--reject">管理员审核驳回，<a class="gm-status-bar__link" onclick="openRejectModal()">查看原因</a>，请重新调整目标</span>' },
|
||||
'signed': { mode:'activity', hideDetail:false, hideSelect:false, readOnly:true, selfLock:false, btnMode:'none', status:'<span class="gm-status-bar--signed">已签署承诺书并参与活动</span>' }
|
||||
};
|
||||
var currentState = getQueryParam('type') || 'unset-hasact';
|
||||
var currentCfg = STATE_CONFIG[currentState] || STATE_CONFIG['unset-hasact'];
|
||||
|
||||
function isReadOnly() { return currentCfg.readOnly; }
|
||||
|
||||
function selectMode(mode) {
|
||||
var isActivity = mode === 'activity';
|
||||
var cardA = document.getElementById('cardActivity');
|
||||
var cardS = document.getElementById('cardSelf');
|
||||
cardA.classList.toggle('gm-card--active', isActivity);
|
||||
cardA.classList.toggle('gm-card--disabled', !isActivity);
|
||||
cardS.classList.toggle('gm-card--active', !isActivity);
|
||||
cardS.classList.toggle('gm-card--disabled', isActivity);
|
||||
|
||||
var nameBtn = document.getElementById('selfNameBtn');
|
||||
nameBtn.classList.toggle('is-disabled', isActivity);
|
||||
nameBtn.disabled = isActivity;
|
||||
|
||||
// 切换天数显示
|
||||
document.getElementById('actDays').style.display = isActivity ? 'inline' : 'none';
|
||||
document.getElementById('selfDays').style.display = isActivity ? 'none' : 'inline-flex';
|
||||
}
|
||||
|
||||
/* —— 初始化页面状态 —— */
|
||||
function initState() {
|
||||
var cfg = currentCfg;
|
||||
selectMode(cfg.mode);
|
||||
|
||||
// 活动目标管理卡片
|
||||
var detailLink = document.getElementById('actDetailLink');
|
||||
detailLink.style.display = cfg.hideDetail ? 'none' : 'inline';
|
||||
var actSelect = document.getElementById('actSelect');
|
||||
actSelect.style.display = cfg.hideSelect ? 'none' : 'flex';
|
||||
if (currentState === 'unset-noact') {
|
||||
document.getElementById('actSelectText').textContent = '请选择您要参加的活动';
|
||||
actSelect.classList.remove('gm-select--filled');
|
||||
} else {
|
||||
var act = ACTIVITIES.find(function(a){ return a.id === selectedActivityId; });
|
||||
document.getElementById('actSelectText').textContent = act ? act.name : '请选择您要参加的活动';
|
||||
}
|
||||
|
||||
// 自我目标管理 - 锁定态
|
||||
if (cfg.selfLock) {
|
||||
personalLocked = true;
|
||||
document.getElementById('selfNameInput').value = '我的春季减重行动';
|
||||
document.getElementById('selfNameBtn').classList.add('is-disabled');
|
||||
document.getElementById('selfNameBtn').disabled = true;
|
||||
// 锁定自我目标管理卡片（名字输入框）
|
||||
document.getElementById('cardSelf').classList.add('gm-locked');
|
||||
// 锁定数据录入和目标设定
|
||||
document.querySelectorAll('.gm-data-row').forEach(function(r){ r.classList.add('gm-locked'); });
|
||||
document.getElementById('groupTag').parentElement.parentElement.classList.add('gm-locked');
|
||||
document.querySelectorAll('.gm-target-row__edit').forEach(function(e){ e.style.pointerEvents = 'none'; e.style.color = '#c8d0d8'; });
|
||||
document.querySelector('.gm-cta').style.pointerEvents = 'none';
|
||||
document.querySelector('.gm-cta').style.background = '#c8d0d8';
|
||||
// 隐藏确定目标按钮，显示修改目标按钮
|
||||
document.getElementById('btnConfirmGoal').style.display = 'none';
|
||||
document.getElementById('btnSubmitReview').style.display = 'none';
|
||||
document.getElementById('btnModifyRow').style.display = 'flex';
|
||||
} else {
|
||||
personalLocked = false;
|
||||
document.getElementById('btnModifyRow').style.display = 'none';
|
||||
}
|
||||
|
||||
// 只读态（审核中/已通过/已签署）
|
||||
if (cfg.readOnly && !cfg.selfLock) {
|
||||
document.getElementById('cardActivity').classList.add('gm-card--disabled');
|
||||
document.getElementById('cardActivity').classList.remove('gm-card--selectable');
|
||||
document.getElementById('cardSelf').classList.add('gm-card--disabled');
|
||||
document.getElementById('cardSelf').classList.remove('gm-card--selectable');
|
||||
document.querySelectorAll('.gm-data-row').forEach(function(r){ r.classList.add('gm-locked'); });
|
||||
document.querySelectorAll('.gm-target-row__edit').forEach(function(e){ e.style.pointerEvents = 'none'; e.style.color = '#c8d0d8'; });
|
||||
document.querySelector('.gm-cta').style.pointerEvents = 'none';
|
||||
document.querySelector('.gm-cta').style.background = '#c8d0d8';
|
||||
document.getElementById('actSelect').style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
// 底部按钮和状态栏
|
||||
var btnSubmit = document.getElementById('btnSubmitReview');
|
||||
var btnConfirm = document.getElementById('btnConfirmGoal');
|
||||
var btnResubmit = document.getElementById('btnResubmit');
|
||||
var statusBar = document.getElementById('statusBar');
|
||||
var actionRow = document.getElementById('actionRow');
|
||||
|
||||
if (cfg.btnMode === 'normal') {
|
||||
btnSubmit.style.display = cfg.mode === 'activity' ? 'block' : 'none';
|
||||
btnConfirm.style.display = cfg.mode === 'self' ? 'block' : 'none';
|
||||
btnResubmit.style.display = 'none';
|
||||
actionRow.style.display = 'flex';
|
||||
statusBar.style.display = 'none';
|
||||
} else if (cfg.btnMode === 'none') {
|
||||
btnSubmit.style.display = 'none';
|
||||
btnConfirm.style.display = 'none';
|
||||
btnResubmit.style.display = 'none';
|
||||
actionRow.style.display = 'none';
|
||||
statusBar.style.display = 'block';
|
||||
statusBar.innerHTML = cfg.status;
|
||||
} else if (cfg.btnMode === 'resubmit') {
|
||||
btnSubmit.style.display = 'none';
|
||||
btnConfirm.style.display = 'none';
|
||||
btnResubmit.style.display = 'block';
|
||||
actionRow.style.display = 'flex';
|
||||
statusBar.style.display = 'block';
|
||||
statusBar.innerHTML = cfg.status;
|
||||
} else if (cfg.btnMode === 'modify') {
|
||||
btnSubmit.style.display = 'none';
|
||||
btnConfirm.style.display = 'none';
|
||||
btnResubmit.style.display = 'none';
|
||||
actionRow.style.display = 'none';
|
||||
statusBar.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
initState();
|
||||
|
||||
/* —— 高亮当前类型菜单项 —— */
|
||||
document.querySelectorAll('#typeMenu .nav-menu__item').forEach(function(el){
|
||||
el.classList.toggle('active', el.dataset.type === currentState);
|
||||
});
|
||||
|
||||
/* —— 类型切换菜单 —— */
|
||||
function toggleTypeMenu(e) {
|
||||
e.stopPropagation();
|
||||
document.getElementById('typeMenu').classList.toggle('show');
|
||||
}
|
||||
function setGoalType(type) {
|
||||
location.href = 'goal-management.html?type=' + type;
|
||||
}
|
||||
document.addEventListener('click', function() {
|
||||
document.getElementById('typeMenu').classList.remove('show');
|
||||
});
|
||||
|
||||
/* —— 解锁个人目标（点击修改目标） —— */
|
||||
function unlockPersonal() {
|
||||
personalLocked = false;
|
||||
document.getElementById('btnModifyRow').style.display = 'none';
|
||||
document.getElementById('btnConfirmGoal').style.display = 'block';
|
||||
document.getElementById('btnSubmitReview').style.display = 'none';
|
||||
document.getElementById('actionRow').style.display = 'flex';
|
||||
document.getElementById('cardSelf').classList.remove('gm-locked');
|
||||
document.querySelectorAll('.gm-data-row').forEach(function(r){ r.classList.remove('gm-locked'); });
|
||||
document.querySelectorAll('.gm-target-row__edit').forEach(function(e){ e.style.pointerEvents = 'auto'; e.style.color = '#36cfc9'; });
|
||||
document.querySelector('.gm-cta').style.pointerEvents = 'auto';
|
||||
document.querySelector('.gm-cta').style.background = 'linear-gradient(135deg, #36cfc9, #1890ff)';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.gm-data-row').forEach(function(row) {
|
||||
var chips = row.querySelectorAll('.gm-chip');
|
||||
chips.forEach(function(c) {
|
||||
c.addEventListener('click', function() {
|
||||
if (personalLocked || isReadOnly()) return;
|
||||
chips.forEach(function(x) { x.classList.remove('active'); });
|
||||
c.classList.add('active');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/* —— 目标修改底部弹窗 —— */
|
||||
var TARGET_CONFIG = {
|
||||
targetWeight: {
|
||||
title:'目标体重', hint:'请设置您的目标体重',
|
||||
iconBg:'background:linear-gradient(135deg,#8a7bff 0%,#6f5bf5 100%)',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M9 5 V3 H15 V5"/><path d="M9 13 L12 9 L13 11"/></svg>',
|
||||
value:59, unit:'kg', step:0.1, majorEvery:10, fmt:1, elId:'targetWeightValue'
|
||||
},
|
||||
targetFat: {
|
||||
title:'目标体脂', hint:'请设置您的目标体脂率',
|
||||
iconBg:'background:linear-gradient(135deg,#ffb574 0%,#ff9a4d 100%)',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/></svg>',
|
||||
value:28, unit:'%', step:0.1, majorEvery:10, fmt:1, elId:'targetFatValue'
|
||||
},
|
||||
targetWaist: {
|
||||
title:'目标腰围', hint:'请设置您的目标腰围',
|
||||
iconBg:'background:linear-gradient(135deg,#ff9ec0 0%,#ff7aa8 100%)',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><ellipse cx="12" cy="12" rx="9" ry="5"/><path d="M12 7v10"/></svg>',
|
||||
value:86, unit:'cm', step:1, majorEvery:10, fmt:0, elId:'targetWaistValue'
|
||||
}
|
||||
};
|
||||
var currentTargetKey = null;
|
||||
var currentTargetValue = 59;
|
||||
|
||||
function openTargetSheet(key) {
|
||||
if (personalLocked || isReadOnly()) return;
|
||||
currentTargetKey = key;
|
||||
var cfg = TARGET_CONFIG[key];
|
||||
currentTargetValue = cfg.value;
|
||||
document.getElementById('targetSheetTitle').textContent = cfg.title;
|
||||
document.getElementById('targetSheetHint').textContent = cfg.hint;
|
||||
document.getElementById('targetNum').textContent = cfg.fmt === 1 ? currentTargetValue.toFixed(1) : String(currentTargetValue);
|
||||
document.getElementById('targetUnit').textContent = cfg.unit;
|
||||
var iconEl = document.getElementById('targetSheetIcon');
|
||||
iconEl.setAttribute('style', cfg.iconBg);
|
||||
iconEl.innerHTML = cfg.icon;
|
||||
renderTargetRuler(cfg);
|
||||
document.getElementById('targetMask').classList.add('show');
|
||||
document.querySelector('.target-sheet').classList.add('show');
|
||||
}
|
||||
|
||||
function closeTargetSheet() {
|
||||
document.querySelector('.target-sheet').classList.remove('show');
|
||||
setTimeout(function(){ document.getElementById('targetMask').classList.remove('show'); }, 250);
|
||||
}
|
||||
|
||||
function submitTarget() {
|
||||
var cfg = TARGET_CONFIG[currentTargetKey];
|
||||
var displayVal = cfg.fmt === 1 ? currentTargetValue.toFixed(1) : String(currentTargetValue);
|
||||
var valueEl = document.getElementById(cfg.elId);
|
||||
valueEl.textContent = displayVal + ' ' + cfg.unit;
|
||||
closeTargetSheet();
|
||||
}
|
||||
|
||||
function renderTargetRuler(cfg) {
|
||||
var scale = document.getElementById('targetRulerScale');
|
||||
var labels = document.getElementById('targetRulerLabels');
|
||||
scale.innerHTML = '';
|
||||
labels.innerHTML = '';
|
||||
var pxPerStep = 8;
|
||||
var rulerWidth = 358;
|
||||
var totalTicks = Math.floor(rulerWidth / pxPerStep);
|
||||
var centerIndex = Math.floor(totalTicks / 2);
|
||||
for (var i = 0; i < totalTicks; i++) {
|
||||
var offsetSteps = i - centerIndex;
|
||||
var tick = document.createElement('div');
|
||||
tick.className = 'target-ruler__tick';
|
||||
var isMajor = (Math.abs(offsetSteps) % cfg.majorEvery) === 0;
|
||||
tick.classList.add(isMajor ? 'target-ruler__tick--major' : 'target-ruler__tick--minor');
|
||||
if (offsetSteps > 0) tick.classList.add('target-ruler__tick--right');
|
||||
tick.style.left = (i * pxPerStep) + 'px';
|
||||
scale.appendChild(tick);
|
||||
if (isMajor) {
|
||||
var lbl = document.createElement('div');
|
||||
lbl.className = 'target-ruler__label';
|
||||
var labelVal = cfg.value + offsetSteps * cfg.step;
|
||||
lbl.textContent = cfg.fmt === 1 ? labelVal.toFixed(1) : String(Math.round(labelVal));
|
||||
lbl.style.left = (i * pxPerStep) + 'px';
|
||||
labels.appendChild(lbl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* —— 提交审核确认弹窗 —— */
|
||||
function openConfirm() {
|
||||
document.getElementById('confirmMask').classList.add('show');
|
||||
}
|
||||
function closeConfirm() {
|
||||
document.getElementById('confirmMask').classList.remove('show');
|
||||
}
|
||||
function doSubmitReview() {
|
||||
closeConfirm();
|
||||
window.location.href = 'goal-commitment.html?type=wait';
|
||||
}
|
||||
|
||||
/* —— 确定个人目标确认弹窗 —— */
|
||||
function openPersonalConfirm() {
|
||||
document.getElementById('personalConfirmMask').classList.add('show');
|
||||
}
|
||||
function closePersonalConfirm() {
|
||||
document.getElementById('personalConfirmMask').classList.remove('show');
|
||||
}
|
||||
function doConfirmPersonalGoal() {
|
||||
closePersonalConfirm();
|
||||
window.location.href = 'goal-commitment.html?type=personal';
|
||||
}
|
||||
|
||||
/* —— 驳回原因弹窗 —— */
|
||||
function openRejectModal() {
|
||||
document.getElementById('rejectMask').classList.add('show');
|
||||
}
|
||||
function closeRejectModal(e) {
|
||||
if (e && e.target !== e.currentTarget) return;
|
||||
document.getElementById('rejectMask').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,609 @@
|
||||
<!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; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.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; }
|
||||
|
||||
/* Tab 切换 */
|
||||
.tabs { display: flex; background: #eef0f3; margin: 14px 16px 8px; border-radius: 26px; padding: 4px; position: relative; }
|
||||
.tab-item { flex: 1; height: 40px; line-height: 40px; text-align: center; font-size: 15px; font-weight: 600; color: #9aa3ad; border-radius: 22px; cursor: pointer; transition: all 0.2s; }
|
||||
.tab-item.active { background: #fff; color: #1f9d8f; box-shadow: 0 2px 6px rgba(31,157,143,0.18); border: 1px solid #4dc4b6; }
|
||||
|
||||
.tab-panel { display: none; padding: 8px 16px 30px; }
|
||||
.tab-panel.active { display: block; }
|
||||
|
||||
/* —— 重点指标 —— */
|
||||
.metric-card { background: #fff; border-radius: 14px; margin-bottom: 12px; padding: 6px 16px 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
|
||||
.metric-card__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; border-bottom: 1px solid #f1f3f5; }
|
||||
.metric-card__title { font-size: 16px; font-weight: 800; color: #1a1a1a; }
|
||||
.metric-card__ref { font-size: 13px; color: #9aa3ad; margin-left: 4px; font-weight: 500; }
|
||||
.metric-card__arrow { color: #c8c8c8; font-size: 14px; }
|
||||
|
||||
.metric-row { display: flex; align-items: center; padding: 14px 0; gap: 12px; }
|
||||
.metric-row + .metric-row { border-top: 1px dashed #f0f0f0; }
|
||||
.metric-row__icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.metric-row__main { flex: 1; min-width: 0; }
|
||||
.metric-row__value { font-size: 16px; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
|
||||
.metric-row__value .extra { margin-left: 6px; }
|
||||
.metric-row__meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13px; color: #9aa3ad; }
|
||||
.metric-row__status { font-size: 13px; font-weight: 600; color: #1f9d8f; }
|
||||
.metric-row__status--abnormal { color: #ff4d4f; }
|
||||
.metric-row__year { font-size: 13px; color: #9aa3ad; }
|
||||
.metric-row__btn { flex-shrink: 0; height: 30px; line-height: 28px; padding: 0 14px; border-radius: 16px; background: #fff; border: 1px solid #4dc4b6; color: #1f9d8f; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* 子项列表（血脂） */
|
||||
.metric-sub { padding: 12px 0 4px 50px; }
|
||||
.metric-sub__item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
|
||||
.metric-sub__item + .metric-sub__item { border-top: 1px dashed #f0f0f0; }
|
||||
.metric-sub__name { font-size: 15px; font-weight: 700; color: #1a1a1a; flex: 1 1 100%; }
|
||||
.metric-sub__name .val { font-weight: 700; color: #1a1a1a; margin-left: 4px; }
|
||||
.metric-sub__name .val--abnormal { color: #ff4d4f; }
|
||||
.metric-sub__meta { font-size: 13px; color: #9aa3ad; }
|
||||
.metric-sub__status { font-size: 13px; font-weight: 600; color: #1f9d8f; }
|
||||
.metric-sub__status--abnormal { color: #ff4d4f; }
|
||||
|
||||
/* 图标背景色 */
|
||||
.icon-weight { background: linear-gradient(135deg, #8a7bff 0%, #6f5bf5 100%); }
|
||||
.icon-bp { background: linear-gradient(135deg, #ff8a7a 0%, #ff6a5a 100%); }
|
||||
.icon-glucose { background: linear-gradient(135deg, #ff9ec0 0%, #ff7aa8 100%); }
|
||||
.icon-uric { background: linear-gradient(135deg, #7ec9f5 0%, #5fb3ef 100%); }
|
||||
.icon-lipid { background: linear-gradient(135deg, #ffb574 0%, #ff9a4d 100%); }
|
||||
|
||||
/* —— 慢性疾病 —— */
|
||||
.disease-card { background: #fff; border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
|
||||
.disease-card__main { flex: 1; min-width: 0; }
|
||||
.disease-card__name { font-size: 16px; font-weight: 700; color: #1a1a1a; }
|
||||
.disease-card__time { font-size: 13px; color: #9aa3ad; margin-top: 8px; }
|
||||
.disease-card__btn { flex-shrink: 0; height: 32px; line-height: 30px; padding: 0 18px; border-radius: 17px; background: #fff; border: 1px solid #4dc4b6; color: #1f9d8f; font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
|
||||
/* —— 底部弹窗（测量） —— */
|
||||
.sheet-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 20; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
|
||||
.sheet-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 20px 20px 0 0; z-index: 21; padding: 10px 0 22px; transform: translateY(100%); transition: transform 0.3s ease; max-height: 88%; display: flex; flex-direction: column; }
|
||||
.sheet.show { transform: translateY(0); }
|
||||
.sheet__handle { width: 40px; height: 4px; background: #d8dde3; border-radius: 2px; margin: 0 auto 8px; flex-shrink: 0; }
|
||||
.sheet__head { display: flex; align-items: center; gap: 12px; padding: 8px 22px 16px; border-bottom: 1px solid #f1f3f5; flex-shrink: 0; }
|
||||
.sheet__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.sheet__icon svg { width: 22px; height: 22px; }
|
||||
.sheet__meta { flex: 1; min-width: 0; }
|
||||
.sheet__title { font-size: 17px; font-weight: 700; color: #1a1a1a; }
|
||||
.sheet__hint { font-size: 13px; color: #9aa3ad; margin-top: 4px; }
|
||||
|
||||
.sheet__body { flex: 1; overflow-y: auto; padding: 8px 0 12px; }
|
||||
.sheet__body::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* —— 字段 —— */
|
||||
.sheet-field { padding: 18px 16px 8px; position: relative; }
|
||||
.sheet-field__label { position: absolute; left: 18px; top: 22px; font-size: 15px; font-weight: 700; color: #1a1a1a; }
|
||||
.sheet-field__value { text-align: center; margin: 6px 0 14px; min-height: 44px; }
|
||||
.sheet-field--single .sheet-field__value { margin: 22px 0 16px; }
|
||||
.sheet-field__num { font-size: 34px; font-weight: 800; color: #1a1a1a; letter-spacing: 1px; }
|
||||
.sheet-field--single .sheet-field__num { font-size: 40px; }
|
||||
.sheet-field__unit { font-size: 14px; color: #9aa3ad; margin-left: 8px; vertical-align: middle; }
|
||||
|
||||
/* 尺子 */
|
||||
.ruler { position: relative; height: 64px; margin: 0 16px; }
|
||||
.ruler__pointer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
|
||||
.ruler__pointer-flag { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #4dc4b6; }
|
||||
.ruler__pointer-line { width: 2px; height: 22px; background: #4dc4b6; margin-top: -1px; }
|
||||
.ruler__scale { position: absolute; left: 0; right: 0; top: 16px; height: 22px; }
|
||||
.ruler__tick { position: absolute; bottom: 0; width: 1px; background: #b6e3dd; }
|
||||
.ruler__tick--minor { height: 8px; }
|
||||
.ruler__tick--major { height: 16px; }
|
||||
.ruler__tick--right { background: #ffd9a8; }
|
||||
.ruler__labels { position: absolute; left: 0; right: 0; top: 42px; height: 16px; font-size: 12px; color: #9aa3ad; }
|
||||
.ruler__label { position: absolute; transform: translateX(-50%); }
|
||||
|
||||
.sheet__submit-bar { padding: 14px 16px 0; flex-shrink: 0; }
|
||||
.sheet__submit { display: block; width: 100%; height: 46px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 23px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 6px; }
|
||||
|
||||
/* —— 慢病修改弹窗（中央卡片） —— */
|
||||
.modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 20px; }
|
||||
.modal-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.modal { width: 100%; background: #fff; border-radius: 16px; padding: 22px 20px 20px; transform: scale(0.95); transition: transform 0.2s; }
|
||||
.modal-mask.show .modal { transform: scale(1); }
|
||||
.modal__title { font-size: 17px; font-weight: 800; color: #1a1a1a; margin-bottom: 18px; }
|
||||
.modal__radios { display: flex; align-items: center; justify-content: space-around; padding: 4px 0 14px; }
|
||||
.radio { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #1a1a1a; cursor: pointer; }
|
||||
.radio__dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #c8d0d8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.18s; }
|
||||
.radio.checked .radio__dot { background: #4dc4b6; border-color: #4dc4b6; }
|
||||
.radio.checked .radio__dot::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
|
||||
|
||||
.modal__detail { display: none; padding-top: 6px; }
|
||||
.modal__detail.show { display: block; }
|
||||
.modal__hospital { background: #f4f6f8; border-radius: 10px; padding: 14px 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
|
||||
.modal__hospital-label { font-size: 14px; font-weight: 600; color: #1a1a1a; flex-shrink: 0; }
|
||||
.modal__hospital-input { flex: 1; border: none; background: transparent; font-size: 14px; color: #1a1a1a; outline: none; }
|
||||
.modal__hospital-input::placeholder { color: #b8c0c8; }
|
||||
|
||||
/* 滚轮日期选择 */
|
||||
.wheel { display: flex; gap: 12px; height: 180px; position: relative; }
|
||||
.wheel__col { flex: 1; position: relative; overflow: hidden; }
|
||||
.wheel__indicator { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; border-top: 1px solid #ececec; border-bottom: 1px solid #ececec; pointer-events: none; z-index: 1; }
|
||||
.wheel__list { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; }
|
||||
.wheel__item { height: 36px; line-height: 36px; font-size: 18px; color: #c8cdd3; font-weight: 600; transition: all 0.18s; user-select: none; cursor: pointer; }
|
||||
.wheel__item--active { color: #1a1a1a; font-size: 20px; font-weight: 700; }
|
||||
.wheel__item--near { color: #8a93a0; }
|
||||
|
||||
.modal__submit-bar { padding-top: 18px; }
|
||||
.modal__submit { display: block; width: 100%; height: 46px; background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border: none; border-radius: 23px; font-size: 16px; font-weight: 600; cursor: pointer; letter-spacing: 6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">指标慢病</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<!-- Tab 切换 -->
|
||||
<div class="tabs">
|
||||
<div class="tab-item active" data-tab="metrics" onclick="switchTab('metrics')">重点指标</div>
|
||||
<div class="tab-item" data-tab="diseases" onclick="switchTab('diseases')">慢性疾病</div>
|
||||
</div>
|
||||
|
||||
<!-- 重点指标 Panel -->
|
||||
<div class="tab-panel active" id="panel-metrics">
|
||||
<!-- 体重 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-card__head">
|
||||
<div>
|
||||
<span class="metric-card__title">体重</span>
|
||||
<span class="metric-card__ref">(参考值: 60~78)</span>
|
||||
</div>
|
||||
<span class="metric-card__arrow">›</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-row__icon icon-weight">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="4" y="5" width="16" height="15" rx="2"/>
|
||||
<path d="M9 5 V3 H15 V5"/>
|
||||
<path d="M9 13 L12 9 L13 11"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-row__main">
|
||||
<div class="metric-row__value">90.50kg<span class="extra">BMI: 27.93</span></div>
|
||||
<div class="metric-row__meta">
|
||||
<span class="metric-row__year">2026年</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="metric-row__btn" onclick="openSheet('weight')">测量</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 血压 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-card__head">
|
||||
<div>
|
||||
<span class="metric-card__title">血压</span>
|
||||
</div>
|
||||
<span class="metric-card__arrow">›</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-row__icon icon-bp">
|
||||
<svg width="20" height="22" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-row__main">
|
||||
<div class="metric-row__value">86 /140mmHg</div>
|
||||
<div class="metric-row__meta">
|
||||
<span class="metric-row__status">正常</span>
|
||||
<span class="metric-row__year">2025年</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="metric-row__btn" onclick="openSheet('bp')">测量</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 血糖 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-card__head">
|
||||
<div>
|
||||
<span class="metric-card__title">血糖</span>
|
||||
<span class="metric-card__ref">(参考值: 3.89--6.11)</span>
|
||||
</div>
|
||||
<span class="metric-card__arrow">›</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-row__icon icon-glucose">
|
||||
<svg width="20" height="22" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/>
|
||||
<path d="M10 12 h4 M12 10 v4" stroke="#ff7aa8" stroke-width="1.6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-row__main">
|
||||
<div class="metric-row__value">4.48 mmol/L</div>
|
||||
<div class="metric-row__meta">
|
||||
<span class="metric-row__status">正常</span>
|
||||
<span class="metric-row__year">2025年</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="metric-row__btn" onclick="openSheet('glucose')">测量</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 尿酸 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-card__head">
|
||||
<div>
|
||||
<span class="metric-card__title">尿酸</span>
|
||||
<span class="metric-card__ref">(参考值: 202--416)</span>
|
||||
</div>
|
||||
<span class="metric-card__arrow">›</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-row__icon icon-uric">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M8 3 C5 8 4 11 4 14 a4.5 4.5 0 0 0 9 0 C13 11 11 8 8 3 Z"/>
|
||||
<path d="M16 9 C14 12.5 13 14.5 13 16.5 a3 3 0 0 0 6 0 C19 14.5 18 12.5 16 9 Z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-row__main">
|
||||
<div class="metric-row__value">283 mmol/L</div>
|
||||
<div class="metric-row__meta">
|
||||
<span class="metric-row__status">正常</span>
|
||||
<span class="metric-row__year">2025年</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="metric-row__btn" onclick="openSheet('uric')">测量</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 血脂 -->
|
||||
<div class="metric-card">
|
||||
<div class="metric-card__head">
|
||||
<div>
|
||||
<span class="metric-card__title">血脂</span>
|
||||
</div>
|
||||
<span class="metric-card__arrow">›</span>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-row__icon icon-lipid">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff">
|
||||
<path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/>
|
||||
<text x="12" y="17" text-anchor="middle" font-size="7" font-weight="700" fill="#ff9a4d">Fat</text>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="metric-row__main">
|
||||
<div class="metric-row__value">总胆固醇: 3.66 mmol/L</div>
|
||||
<div class="metric-row__meta">
|
||||
<span class="metric-row__status">正常</span>
|
||||
<span class="metric-row__year">(参考值: 2.33--5.2)</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="metric-row__btn" onclick="openSheet('lipid')">测量</button>
|
||||
</div>
|
||||
<div class="metric-sub">
|
||||
<div class="metric-sub__item">
|
||||
<div class="metric-sub__name">甘油三脂: <span class="val">0.91 mmol/L</span></div>
|
||||
<span class="metric-sub__status">正常</span>
|
||||
<span class="metric-sub__meta">(参考值: 0.57--1.7)</span>
|
||||
</div>
|
||||
<div class="metric-sub__item">
|
||||
<div class="metric-sub__name">高密度脂蛋白: <span class="val val--abnormal">0.90 mmol/L</span></div>
|
||||
<span class="metric-sub__status metric-sub__status--abnormal">异常</span>
|
||||
<span class="metric-sub__meta">(参考值: 1.04--1.66)</span>
|
||||
</div>
|
||||
<div class="metric-sub__item">
|
||||
<div class="metric-sub__name">低密度脂蛋白: <span class="val">2.08 mmol/L</span></div>
|
||||
<span class="metric-sub__status">正常</span>
|
||||
<span class="metric-sub__meta">(参考值: 2.07--3.12)</span>
|
||||
</div>
|
||||
<div class="metric-sub__item">
|
||||
<div class="metric-sub__meta" style="flex:1 1 100%;">2025年</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 慢性疾病 Panel -->
|
||||
<div class="tab-panel" id="panel-diseases">
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">原发性高血压</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('原发性高血压')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">冠状动脉硬化性心脏病</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('冠状动脉硬化性心脏病')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">脑血管病后遗症</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('脑血管病后遗症')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">慢性再生障碍性贫血</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('慢性再生障碍性贫血')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">风湿性心脏病</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('风湿性心脏病')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">慢性活动性肝炎、肝硬化</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('慢性活动性肝炎、肝硬化')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">慢性阻塞性肺疾病</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('慢性阻塞性肺疾病')">修改</button>
|
||||
</div>
|
||||
<div class="disease-card">
|
||||
<div class="disease-card__main">
|
||||
<div class="disease-card__name">肺源性心脏病</div>
|
||||
<div class="disease-card__time">确诊时间：无</div>
|
||||
</div>
|
||||
<button class="disease-card__btn" onclick="openDiseaseModal('肺源性心脏病')">修改</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部测量弹窗 -->
|
||||
<div class="sheet-mask" id="sheetMask" onclick="closeSheet()"></div>
|
||||
<div class="sheet" id="sheet">
|
||||
<div class="sheet__handle"></div>
|
||||
<div class="sheet__head">
|
||||
<div class="sheet__icon" id="sheetIcon"></div>
|
||||
<div class="sheet__meta">
|
||||
<div class="sheet__title" id="sheetTitle">体重</div>
|
||||
<div class="sheet__hint" id="sheetHint">请设置您的体重</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sheet__body" id="sheetBody"></div>
|
||||
<div class="sheet__submit-bar">
|
||||
<button class="sheet__submit" onclick="closeSheet()">提 交</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 慢病修改弹窗 -->
|
||||
<div class="modal-mask" id="diseaseModalMask" onclick="closeDiseaseModal(event)">
|
||||
<div class="modal" onclick="event.stopPropagation()">
|
||||
<div class="modal__title" id="diseaseModalTitle">原发性高血压</div>
|
||||
<div class="modal__radios">
|
||||
<div class="radio checked" id="radioUndiagnosed" onclick="setDiagnosed(false)">
|
||||
<div class="radio__dot"></div>
|
||||
<span>未确诊</span>
|
||||
</div>
|
||||
<div class="radio" id="radioDiagnosed" onclick="setDiagnosed(true)">
|
||||
<div class="radio__dot"></div>
|
||||
<span>已确诊</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__detail" id="diseaseModalDetail">
|
||||
<div class="modal__hospital">
|
||||
<span class="modal__hospital-label">确诊医院：</span>
|
||||
<input class="modal__hospital-input" type="text" placeholder="请输入确诊医院" />
|
||||
</div>
|
||||
<div class="wheel">
|
||||
<div class="wheel__col">
|
||||
<div class="wheel__indicator"></div>
|
||||
<div class="wheel__list" id="wheelYear"></div>
|
||||
</div>
|
||||
<div class="wheel__col">
|
||||
<div class="wheel__indicator"></div>
|
||||
<div class="wheel__list" id="wheelMonth"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__submit-bar">
|
||||
<button class="modal__submit" onclick="closeDiseaseModal()">提 交</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('.tab-item').forEach(function(el){
|
||||
el.classList.toggle('active', el.dataset.tab === tab);
|
||||
});
|
||||
document.getElementById('panel-metrics').classList.toggle('active', tab === 'metrics');
|
||||
document.getElementById('panel-diseases').classList.toggle('active', tab === 'diseases');
|
||||
}
|
||||
|
||||
/* —— 测量底部弹窗 —— */
|
||||
var METRIC_CONFIG = {
|
||||
weight: {
|
||||
title:'体重', hint:'请设置您的体重', iconBg:'icon-weight',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M9 5 V3 H15 V5"/><path d="M9 13 L12 9 L13 11"/></svg>',
|
||||
fields:[ { label:'', unit:'公斤', value:90.50, step:0.1, majorEvery:10 } ]
|
||||
},
|
||||
bp: {
|
||||
title:'血压', hint:'请设置以下体检项', iconBg:'icon-bp',
|
||||
icon:'<svg width="20" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/></svg>',
|
||||
fields:[
|
||||
{ label:'收缩压', unit:'mmHg', value:140, step:1, majorEvery:10 },
|
||||
{ label:'舒张压', unit:'mmHg', value:86, step:1, majorEvery:10 }
|
||||
]
|
||||
},
|
||||
glucose: {
|
||||
title:'血糖', hint:'请设置您的血糖值', iconBg:'icon-glucose',
|
||||
icon:'<svg width="20" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/></svg>',
|
||||
fields:[ { label:'', unit:'mmol/L', value:4.48, step:0.01, majorEvery:100 } ]
|
||||
},
|
||||
uric: {
|
||||
title:'尿酸', hint:'请设置您的尿酸值', iconBg:'icon-uric',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M8 3 C5 8 4 11 4 14 a4.5 4.5 0 0 0 9 0 C13 11 11 8 8 3 Z"/><path d="M16 9 C14 12.5 13 14.5 13 16.5 a3 3 0 0 0 6 0 C19 14.5 18 12.5 16 9 Z"/></svg>',
|
||||
fields:[ { label:'', unit:'mmol/L', value:283, step:1, majorEvery:20 } ]
|
||||
},
|
||||
lipid: {
|
||||
title:'血脂', hint:'请设置以下体检项', iconBg:'icon-lipid',
|
||||
icon:'<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M12 2 C7 9 5 12 5 16 a7 7 0 0 0 14 0 C19 12 17 9 12 2 Z"/></svg>',
|
||||
fields:[
|
||||
{ label:'总胆固醇', unit:'mmol/L', value:3.66, step:0.01, majorEvery:100 },
|
||||
{ label:'甘油三脂', unit:'mmol/L', value:0.91, step:0.01, majorEvery:100 },
|
||||
{ label:'高密度脂蛋白', unit:'mmol/L', value:0.90, step:0.01, majorEvery:100 },
|
||||
{ label:'低密度脂蛋白', unit:'mmol/L', value:2.08, step:0.01, majorEvery:100 }
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
function openSheet(key) {
|
||||
var cfg = METRIC_CONFIG[key];
|
||||
if (!cfg) return;
|
||||
var iconEl = document.getElementById('sheetIcon');
|
||||
iconEl.className = 'sheet__icon ' + cfg.iconBg;
|
||||
iconEl.innerHTML = cfg.icon;
|
||||
document.getElementById('sheetTitle').textContent = cfg.title;
|
||||
document.getElementById('sheetHint').textContent = cfg.hint;
|
||||
renderFields(cfg.fields);
|
||||
document.getElementById('sheetMask').classList.add('show');
|
||||
document.getElementById('sheet').classList.add('show');
|
||||
}
|
||||
|
||||
function closeSheet() {
|
||||
document.getElementById('sheetMask').classList.remove('show');
|
||||
document.getElementById('sheet').classList.remove('show');
|
||||
}
|
||||
|
||||
function formatNum(v, step) {
|
||||
if (step >= 1) return String(Math.round(v));
|
||||
if (step >= 0.1) return v.toFixed(1);
|
||||
return v.toFixed(2);
|
||||
}
|
||||
|
||||
function renderFields(fields) {
|
||||
var body = document.getElementById('sheetBody');
|
||||
body.innerHTML = '';
|
||||
fields.forEach(function(f, idx) {
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'sheet-field' + (fields.length === 1 ? ' sheet-field--single' : '');
|
||||
var labelHtml = f.label ? '<div class="sheet-field__label">' + f.label + '</div>' : '';
|
||||
wrap.innerHTML =
|
||||
labelHtml +
|
||||
'<div class="sheet-field__value">' +
|
||||
'<span class="sheet-field__num">' + formatNum(f.value, f.step) + '</span>' +
|
||||
'<span class="sheet-field__unit">' + f.unit + '</span>' +
|
||||
'</div>' +
|
||||
'<div class="ruler">' +
|
||||
'<div class="ruler__pointer">' +
|
||||
'<div class="ruler__pointer-flag"></div>' +
|
||||
'<div class="ruler__pointer-line"></div>' +
|
||||
'</div>' +
|
||||
'<div class="ruler__scale" data-idx="' + idx + '"></div>' +
|
||||
'<div class="ruler__labels" data-idx="' + idx + '"></div>' +
|
||||
'</div>';
|
||||
body.appendChild(wrap);
|
||||
renderRulerInto(wrap.querySelector('.ruler__scale'), wrap.querySelector('.ruler__labels'), f);
|
||||
});
|
||||
}
|
||||
|
||||
function renderRulerInto(scale, labels, cfg) {
|
||||
scale.innerHTML = '';
|
||||
labels.innerHTML = '';
|
||||
var pxPerStep = 8;
|
||||
var majorEvery = cfg.majorEvery;
|
||||
var rulerWidth = 358;
|
||||
var totalTicks = Math.floor(rulerWidth / pxPerStep);
|
||||
var centerIndex = Math.floor(totalTicks / 2);
|
||||
for (var i = 0; i < totalTicks; i++) {
|
||||
var offsetSteps = i - centerIndex;
|
||||
var tick = document.createElement('div');
|
||||
tick.className = 'ruler__tick';
|
||||
var isMajor = (Math.abs(offsetSteps) % majorEvery) === 0;
|
||||
tick.classList.add(isMajor ? 'ruler__tick--major' : 'ruler__tick--minor');
|
||||
if (offsetSteps > 0) tick.classList.add('ruler__tick--right');
|
||||
tick.style.left = (i * pxPerStep) + 'px';
|
||||
scale.appendChild(tick);
|
||||
if (isMajor) {
|
||||
var lbl = document.createElement('div');
|
||||
lbl.className = 'ruler__label';
|
||||
var labelVal = cfg.value + offsetSteps * cfg.step;
|
||||
lbl.textContent = formatNum(labelVal, cfg.step);
|
||||
lbl.style.left = (i * pxPerStep) + 'px';
|
||||
labels.appendChild(lbl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* —— 慢病修改弹窗 —— */
|
||||
var currentYear = 2026;
|
||||
var currentMonth = 6;
|
||||
|
||||
function openDiseaseModal(name) {
|
||||
document.getElementById('diseaseModalTitle').textContent = name;
|
||||
setDiagnosed(false);
|
||||
renderWheels();
|
||||
document.getElementById('diseaseModalMask').classList.add('show');
|
||||
}
|
||||
|
||||
function closeDiseaseModal(e) {
|
||||
if (e && e.target !== e.currentTarget) return;
|
||||
document.getElementById('diseaseModalMask').classList.remove('show');
|
||||
}
|
||||
|
||||
function setDiagnosed(yes) {
|
||||
document.getElementById('radioUndiagnosed').classList.toggle('checked', !yes);
|
||||
document.getElementById('radioDiagnosed').classList.toggle('checked', yes);
|
||||
document.getElementById('diseaseModalDetail').classList.toggle('show', yes);
|
||||
}
|
||||
|
||||
function renderWheels() {
|
||||
var years = [];
|
||||
for (var y = currentYear - 4; y <= currentYear; y++) years.push(y);
|
||||
renderWheelCol('wheelYear', years, currentYear, function(v){ return String(v); });
|
||||
var months = [];
|
||||
for (var m = 2; m <= 6; m++) months.push(m);
|
||||
renderWheelCol('wheelMonth', months, currentMonth, function(v){ return v < 10 ? '0' + v : String(v); });
|
||||
}
|
||||
|
||||
function renderWheelCol(elId, values, activeVal, fmt) {
|
||||
var col = document.getElementById(elId);
|
||||
col.innerHTML = '';
|
||||
values.forEach(function(v) {
|
||||
var item = document.createElement('div');
|
||||
item.className = 'wheel__item';
|
||||
var dist = Math.abs(v - activeVal);
|
||||
if (dist === 0) item.classList.add('wheel__item--active');
|
||||
else if (dist === 1) item.classList.add('wheel__item--near');
|
||||
item.textContent = fmt(v);
|
||||
col.appendChild(item);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,111 @@
|
||||
<!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; }
|
||||
.nav-back { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
.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; }
|
||||
|
||||
/* 承诺书卡片 */
|
||||
.cert-card { background: linear-gradient(180deg, #fef9f0 0%, #fdf6ea 40%, #faf1e0 100%); border-radius: 14px; padding: 0; overflow: hidden; position: relative; }
|
||||
.cert-card__top { background: linear-gradient(135deg, #f0e6d2 0%, #e8dcc6 100%); height: 120px; position: relative; overflow: hidden; }
|
||||
.cert-card__top::after { content: ''; position: absolute; right: -20px; top: 0; width: 200px; height: 200px; background: linear-gradient(225deg, #e8dcc6 0%, transparent 60%); }
|
||||
|
||||
/* 奖章 */
|
||||
.cert-medal { position: absolute; left: 24px; top: -10px; z-index: 2; }
|
||||
.cert-medal__ribbon { width: 48px; height: 56px; position: relative; }
|
||||
.cert-medal__ribbon::before { content: ''; position: absolute; left: 8px; top: 0; width: 14px; height: 36px; background: linear-gradient(180deg, #d44a2e 0%, #c0392b 100%); transform: rotate(-15deg); transform-origin: top center; }
|
||||
.cert-medal__ribbon::after { content: ''; position: absolute; right: 8px; top: 0; width: 14px; height: 36px; background: linear-gradient(180deg, #e74c3c 0%, #d44a2e 100%); transform: rotate(15deg); transform-origin: top center; }
|
||||
.cert-medal__badge { width: 52px; height: 52px; background: linear-gradient(135deg, #f6d365 0%, #e8b84b 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 28px auto 0; box-shadow: 0 2px 8px rgba(232,184,75,0.4); position: relative; }
|
||||
.cert-medal__badge svg { width: 26px; height: 26px; }
|
||||
|
||||
/* 证书内容 */
|
||||
.cert-body { padding: 18px 28px 28px; position: relative; }
|
||||
.cert-body__title { text-align: center; font-size: 20px; font-weight: 800; color: #2c2c2c; margin-bottom: 4px; letter-spacing: 1px; }
|
||||
.cert-body__divider { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
|
||||
.cert-body__divider-line { width: 40px; height: 1px; background: #c8b896; }
|
||||
.cert-body__divider-dot { width: 4px; height: 4px; background: #c8b896; border-radius: 50%; }
|
||||
|
||||
.cert-prompt { font-size: 16px; font-weight: 700; color: #2c2c2c; margin-bottom: 16px; }
|
||||
.cert-item { font-size: 15px; color: #3a3a3a; line-height: 2; margin-bottom: 4px; text-indent: 2em; }
|
||||
|
||||
/* 落款 */
|
||||
.cert-sign { margin-top: 30px; padding-right: 8px; }
|
||||
.cert-sign__row { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; margin-bottom: 14px; font-size: 14px; color: #3a3a3a; }
|
||||
.cert-sign__name { font-family: 'STKaiti', 'KaiTi', '楷体', serif; font-size: 22px; color: #2c2c2c; font-weight: 700; }
|
||||
.cert-sign__date { font-size: 14px; color: #3a3a3a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<div class="status-bar">
|
||||
<span class="time">9:41</span>
|
||||
<div class="icons">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#333" 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="#333" 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">
|
||||
<div class="nav-back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
<div class="nav-title">我的承诺</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<div class="cert-card">
|
||||
<!-- 顶部装饰区 -->
|
||||
<div class="cert-card__top">
|
||||
<div class="cert-medal">
|
||||
<div class="cert-medal__ribbon"></div>
|
||||
<div class="cert-medal__badge">
|
||||
<svg viewBox="0 0 24 24" fill="#fff" stroke="#c89a30" stroke-width="1">
|
||||
<circle cx="12" cy="12" r="8" fill="none" stroke="#c89a30" stroke-width="1.5"/>
|
||||
<path d="M8 12 Q10 14 12 12 Q14 10 16 12" fill="none" stroke="#c89a30" stroke-width="1.2"/>
|
||||
<path d="M10 10 L12 8 L14 10" fill="none" stroke="#c89a30" stroke-width="1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 证书内容 -->
|
||||
<div class="cert-body">
|
||||
<div class="cert-body__title">体重管理活动承诺书</div>
|
||||
<div class="cert-body__divider">
|
||||
<span class="cert-body__divider-line"></span>
|
||||
<span class="cert-body__divider-dot"></span>
|
||||
<span class="cert-body__divider-line"></span>
|
||||
</div>
|
||||
|
||||
<div class="cert-prompt">我承诺：</div>
|
||||
<div class="cert-item">一、在活动结束时体重、体脂率和腰围均达到目标。</div>
|
||||
<div class="cert-item">二、一日三餐打卡、每日运动打卡、每周至少一次体重打卡。</div>
|
||||
<div class="cert-item">三、我非禁忌证人群，我承诺按照体重管理指南的指导原则或在医生指导下开展运动。</div>
|
||||
|
||||
<!-- 落款 -->
|
||||
<div class="cert-sign">
|
||||
<div class="cert-sign__row">
|
||||
<span>承诺人：</span>
|
||||
<span class="cert-sign__name">陈晓</span>
|
||||
</div>
|
||||
<div class="cert-sign__row">
|
||||
<span>日期：2025年2月28日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,125 @@
|
||||
<!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: 844px; height: 390px; background: #f4f5f8; 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: row; }
|
||||
|
||||
/* 左侧竖条 */
|
||||
.side-bar { width: 64px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 0; flex-shrink: 0; border-right: 1px solid #eee; }
|
||||
.side-bar__status { display: flex; flex-direction: column; align-items: center; gap: 6px; }
|
||||
.side-bar__time { font-size: 13px; font-weight: 700; color: #333; writing-mode: vertical-lr; }
|
||||
.side-bar__icons { display: flex; gap: 4px; align-items: center; }
|
||||
.side-bar__title { font-size: 14px; font-weight: 800; color: #1a1a1a; writing-mode: vertical-rl; letter-spacing: 2px; }
|
||||
.side-bar__back { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #1a1a1a; }
|
||||
|
||||
/* 右侧主内容 */
|
||||
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
|
||||
/* 承诺条款 */
|
||||
.commitment-list { flex: 1; padding: 28px 36px 12px; }
|
||||
.commitment-item { font-size: 15px; color: #6b7b8d; line-height: 1.8; margin-bottom: 8px; }
|
||||
.commitment-item__warn { color: #4dc4b6; font-weight: 600; }
|
||||
|
||||
/* 签名区 */
|
||||
.sign-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 36px; }
|
||||
.sign-canvas { width: 100%; height: 100%; border: 1px dashed #d8dde3; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #d0d5db; letter-spacing: 2px; cursor: crosshair; background: #fafbfc; }
|
||||
|
||||
/* 底部按钮 */
|
||||
.bottom-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 36px 22px; background: #f4f5f8; }
|
||||
.btn { height: 40px; padding: 0 24px; border-radius: 20px; font-size: 15px; font-weight: 600; cursor: pointer; border: 1.5px solid #4dc4b6; }
|
||||
.btn--outline { background: #fff; color: #4dc4b6; }
|
||||
.btn--primary { background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; border-color: transparent; }
|
||||
.bottom-bar__left { display: flex; }
|
||||
.bottom-bar__right { display: flex; gap: 12px; }
|
||||
|
||||
/* 确认弹窗（中央卡片） */
|
||||
.confirm-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
|
||||
.confirm-mask.show { opacity: 1; pointer-events: auto; }
|
||||
.confirm-card { width: 320px; background: #fff; border-radius: 16px; padding: 24px 22px 20px; transform: scale(0.95); transition: transform 0.2s; }
|
||||
.confirm-mask.show .confirm-card { transform: scale(1); }
|
||||
.confirm-card__title { font-size: 17px; font-weight: 800; color: #1a1a1a; text-align: center; margin-bottom: 10px; }
|
||||
.confirm-card__btns { display: flex; gap: 12px; margin-top: 18px; }
|
||||
.confirm-card__btn { flex: 1; height: 42px; border: none; border-radius: 21px; font-size: 15px; font-weight: 600; cursor: pointer; }
|
||||
.confirm-card__btn--cancel { background: #f0f2f5; color: #999; }
|
||||
.confirm-card__btn--confirm { background: linear-gradient(135deg, #4dc4b6 0%, #46b8af 100%); color: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-shell">
|
||||
<!-- 左侧状态栏 -->
|
||||
<div class="side-bar">
|
||||
<div class="side-bar__status">
|
||||
<div class="side-bar__icons">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><path d="M1 6l5 5 5-5"/><path d="M4 9l3 3 3-3" opacity="0.5"/></svg>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2"><rect x="1" y="6" width="18" height="12" rx="2"/><path d="M21 10v4"/></svg>
|
||||
</div>
|
||||
<span class="side-bar__time">12:00</span>
|
||||
</div>
|
||||
<div class="side-bar__title">体重管理活动承诺签订</div>
|
||||
<div class="side-bar__back" onclick="history.back()">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧主内容 -->
|
||||
<div class="main-content">
|
||||
<!-- 承诺条款 -->
|
||||
<div class="commitment-list">
|
||||
<div class="commitment-item">一、我承诺在活动结束时体重、体脂率和腰围均达到目标。</div>
|
||||
<div class="commitment-item">二、我承诺一日三餐打卡、每日运动打卡、每周至少一次体重打卡。</div>
|
||||
<div class="commitment-item">三、我非<span class="commitment-item__warn">禁忌证人群</span>，我承诺按照体重管理指南的指导原则或在医生指导下开展运动。</div>
|
||||
</div>
|
||||
|
||||
<!-- 签名区 -->
|
||||
<div class="sign-area">
|
||||
<div class="sign-canvas">请清晰书写您的签名</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-bar__left">
|
||||
<button class="btn btn--outline" onclick="openGiveup()">放弃签订承诺书</button>
|
||||
</div>
|
||||
<div class="bottom-bar__right">
|
||||
<button class="btn btn--outline" onclick="alert('已清除签名')">重写</button>
|
||||
<button class="btn btn--primary" onclick="doComplete()">完成</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 放弃签订确认弹窗 -->
|
||||
<div class="confirm-mask" id="giveupMask" onclick="closeGiveup()">
|
||||
<div class="confirm-card" onclick="event.stopPropagation()">
|
||||
<div class="confirm-card__title">是否放弃签订承诺书？</div>
|
||||
<div class="confirm-card__btns">
|
||||
<button class="confirm-card__btn confirm-card__btn--cancel" onclick="closeGiveup()">取消</button>
|
||||
<button class="confirm-card__btn confirm-card__btn--confirm" onclick="doGiveup()">确认放弃</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function openGiveup() {
|
||||
document.getElementById('giveupMask').classList.add('show');
|
||||
}
|
||||
function closeGiveup() {
|
||||
document.getElementById('giveupMask').classList.remove('show');
|
||||
}
|
||||
function doGiveup() {
|
||||
closeGiveup();
|
||||
history.back();
|
||||
}
|
||||
function doComplete() {
|
||||
window.location.href = 'goal-commitment.html?type=signed';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user