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

fix: 重构运动建议页——步数卡片改为每日消耗卡片、注意事项可折叠并扩充健康提醒、新增保存按钮

Browse Source
This commit is contained in:
liuyunqin
2026-07-06 17:30:14 +08:00
parent 8e2737be4a
commit e197cf8eb3
1 changed files with 163 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
employee-app/weight-management/exercise-advice.html
+163 -90
View File
@@ -18,25 +18,72 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.scroll-content { flex: 1; overflow-y: auto; background: #f5f7fa; }
.scroll-content::-webkit-scrollbar { display: none; }
/* ===== 步数目标卡片 ===== */
.step-goal { background: linear-gradient(135deg, #ffb066 0%, #ff8a3d 100%); margin: 12px 12px 0; border-radius: 16px; padding: 18px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 4px 14px rgba(255,138,61,0.25); }
.step-goal::after { content: ''; position: absolute; bottom: -30px; right: -20px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; }
.step-goal__label { font-size: 13px; opacity: 0.85; position: relative; z-index: 1; }
.step-goal__val { font-size: 42px; font-weight: 800; line-height: 1; margin: 6px 0 2px; position: relative; z-index: 1; }
.step-goal__unit { font-size: 16px; font-weight: 500; opacity: 0.8; }
.step-goal__sub { font-size: 12px; opacity: 0.7; position: relative; z-index: 1; }
.step-goal__bar-wrap { position: relative; z-index: 1; margin-top: 12px; background: rgba(255,255,255,0.2); border-radius: 6px; height: 8px; overflow: hidden; }
.step-goal__bar-fill { height: 100%; background: rgba(255,255,255,0.9); border-radius: 6px; }
.step-goal__bar-label { display: flex; justify-content: space-between; font-size: 11px; margin-top: 4px; opacity: 0.75; position: relative; z-index: 1; }
/* ===== 运动消耗卡片 ===== */
.burn-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 16px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.burn-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 12px; }
.burn-row { display: flex; gap: 10px; }
.burn-item { flex: 1; text-align: center; background: #f9fafb; border-radius: 12px; padding: 14px 8px; }
.burn-item__val { font-size: 24px; font-weight: 800; color: #ff8a3d; line-height: 1; }
.burn-item__unit { font-size: 12px; color: #999; font-weight: 400; margin-left: 2px; }
.burn-item__label { font-size: 11px; color: #999; margin-top: 4px; }
/* ===== 每日推荐消耗卡片 ===== */
.calorie-burn {
background: linear-gradient(145deg, #ff9a56 0%, #ff6b35 60%, #e55a2b 100%);
margin: 16px 12px 0;
border-radius: 20px;
padding: 20px 18px 16px;
color: #fff;
position: relative; overflow: hidden;
box-shadow: 0 6px 20px rgba(255,107,53,0.3);
}
.calorie-burn::before {
content: '';
position: absolute; top: -40px; right: -30px;
width: 140px; height: 140px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
pointer-events: none;
}
.calorie-burn::after {
content: '';
position: absolute; bottom: -50px; left: -20px;
width: 120px; height: 120px;
border-radius: 50%;
background: rgba(255,255,255,0.04);
pointer-events: none;
}
.calorie-burn__header {
display: flex; align-items: center; justify-content: space-between;
position: relative; z-index: 1;
}
.calorie-burn__label { font-size: 13px; opacity: 0.9; font-weight: 500; letter-spacing: .3px; }
.calorie-burn__bmr { font-size: 10px; opacity: 0.65; }
.calorie-burn__val {
font-size: 46px; font-weight: 800; line-height: 1;
margin: 6px 0 0; position: relative; z-index: 1;
letter-spacing: -1px;
}
.calorie-burn__unit { font-size: 17px; font-weight: 500; opacity: 0.75; margin-left: 2px; }
.calorie-burn__sub {
font-size: 11px; opacity: 0.7; margin-top: 4px;
position: relative; z-index: 1; line-height: 1.5;
}
/* 三大消耗进度条 */
.calorie-burn__bar-wrap {
position: relative; z-index: 1; margin-top: 14px;
display: flex; border-radius: 6px; height: 10px; overflow: hidden; gap: 3px;
}
.calorie-burn__bar-seg { height: 100%; position: relative; border-radius: 6px; overflow: hidden; }
.calorie-burn__bar-seg--bmr { background: rgba(84,112,198,0.25); }
.calorie-burn__bar-seg--sport { background: rgba(255,154,86,0.25); }
.calorie-burn__bar-seg--walk { background: rgba(115,209,61,0.25); }
.calorie-burn__bar-fill {
height: 100%; border-radius: 6px;
transition: width .5s cubic-bezier(.4,0,.2,1);
position: absolute; left: 0; top: 0;
}
.calorie-burn__bar-seg--bmr .calorie-burn__bar-fill { background: #7b9af5; }
.calorie-burn__bar-seg--sport .calorie-burn__bar-fill { background: #ffb88c; }
.calorie-burn__bar-seg--walk .calorie-burn__bar-fill { background: #95de64; }
.calorie-burn__bar-label {
display: flex; justify-content: center; gap: 16px;
font-size: 10px; margin-top: 8px; opacity: 0.8;
position: relative; z-index: 1;
}
.calorie-burn__bar-legend { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.calorie-burn__bar-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* ===== 运动类型推荐 ===== */
.exer-type-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 16px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
@@ -77,20 +124,46 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
.plan-item__desc { font-size: 11px; color: #999; margin-top: 2px; }
.plan-item__kcal { font-size: 12px; font-weight: 700; color: #ff8a3d; flex-shrink: 0; }
/* ===== 注意事项卡片 ===== */
.tips-card { background: #fff; border-radius: 16px; margin: 12px 12px 0; padding: 16px 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.04); }
.tips-card__title { font-size: 15px; font-weight: 800; color: #1a1a1a; margin-bottom: 10px; }
.tips-list { display: flex; flex-direction: column; gap: 8px; }
.tips-item { display: flex; align-items: flex-start; gap: 8px; padding: 10px; background: #f9fafb; border-radius: 10px; }
.tips-item__icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 800; color: #fff; }
.tips-item__icon--warn { background: #faad14; }
.tips-item__icon--good { background: #52c41a; }
.tips-item__icon--info { background: #1677ff; }
.tips-item__text { font-size: 12px; color: #555; line-height: 1.6; flex: 1; }
.tips-item__text strong { color: #333; }
.bottom-safe { height: 20px; flex-shrink: 0; }
</style>
/* ===== 运动注意事项（可折叠） ===== */
.alert-banner {
background: #fff; margin: 12px 12px 0;
border-radius: 12px; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
border-left: 3px solid #ff4d4f;
}
.alert-banner__header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; user-select: none; }
.alert-banner__icon { font-size: 18px; flex-shrink: 0; }
.alert-banner__title { font-size: 14px; font-weight: 700; color: #1a1a1a; flex: 1; }
.alert-banner__arrow { font-size: 12px; color: #999; transition: transform .25s ease; flex-shrink: 0; }
.alert-banner__arrow.collapsed { transform: rotate(180deg); }
.alert-banner__body { padding: 0 14px 14px; }
.alert-banner__body.collapsed { display: none; }
.tips-list { display: flex; flex-direction: column; gap: 8px; }
.tips-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: #f7f8fa; border-radius: 8px; transition: background .2s ease; }
.tips-item__icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; font-weight: 800; color: #fff; }
.tips-item__icon--warn { background: #faad14; }
.tips-item__icon--good { background: #52c41a; }
.tips-item__icon--info { background: #1677ff; }
.tips-item__icon--danger { background: #ff4d4f; }
.tips-item__text { font-size: 12px; color: #666; line-height: 1.65; flex: 1; }
.tips-item__text strong { color: #333; }
/* ===== 保存按钮 ===== */
.save-btn-wrap { padding: 16px 12px 12px; flex-shrink: 0; }
.save-btn {
width: 100%; height: 46px; border-radius: 12px; border: none;
font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
background: linear-gradient(135deg, #ff8a3d 0%, #e55a2b 100%);
box-shadow: 0 4px 14px rgba(255,138,61,0.3);
transition: all .2s ease;
letter-spacing: .5px;
}
.save-btn:hover { box-shadow: 0 6px 20px rgba(255,138,61,0.4); }
.save-btn:active { transform: scale(0.97); }
.bottom-safe { height: 24px; flex-shrink: 0; }
</style>
</head>
<body>
<div class="phone-shell">
@@ -111,33 +184,48 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
</div>
<div class="scroll-content">
<!-- 今日步数目标 -->
<div class="step-goal">
<div class="step-goal__label">今日运动目标</div>
<div class="step-goal__val">12586<span class="step-goal__unit">步</span></div>
<div class="step-goal__sub">目标 12000 步 · 已超额完成 586 步</div>
<div class="step-goal__bar-wrap">
<div class="step-goal__bar-fill" style="width:100%"></div>
</div>
<div class="step-goal__bar-label"><span>已完成 104.9%</span><span>目标达成 ✓</span></div>
</div>
<!-- 每日推荐消耗 -->
<div class="calorie-burn">
<div class="calorie-burn__header">
<span class="calorie-burn__label">每日推荐消耗</span>
<span class="calorie-burn__bmr">基础代谢 1600千卡</span>
</div>
<div class="calorie-burn__val">2645<span class="calorie-burn__unit">千卡</span></div>
<div class="calorie-burn__sub">今日已消耗 2186 千卡，还需消耗 459 千卡（热量缺口 300kcal）</div>
<div class="calorie-burn__bar-wrap">
<div class="calorie-burn__bar-seg calorie-burn__bar-seg--bmr" style="width:60.5%"><div class="calorie-burn__bar-fill" style="width:100%"></div></div>
<div class="calorie-burn__bar-seg calorie-burn__bar-seg--sport" style="width:22.7%"><div class="calorie-burn__bar-fill" style="width:64.3%"></div></div>
<div class="calorie-burn__bar-seg calorie-burn__bar-seg--walk" style="width:16.8%"><div class="calorie-burn__bar-fill" style="width:44.9%"></div></div>
</div>
<div class="calorie-burn__bar-label">
<span class="calorie-burn__bar-legend"><i style="background:#7b9af5"></i>基础消耗 1600</span>
<span class="calorie-burn__bar-legend"><i style="background:#ffb88c"></i>运动消耗 386</span>
<span class="calorie-burn__bar-legend"><i style="background:#95de64"></i>步行消耗 200</span>
</div>
</div>
<!-- 运动消耗 -->
<div class="burn-card">
<div class="burn-card__title">运动消耗概览</div>
<div class="burn-row">
<div class="burn-item">
<div class="burn-item__val">586<span class="burn-item__unit">千卡</span></div>
<div class="burn-item__label">今日运动消耗</div>
</div>
<div class="burn-item">
<div class="burn-item__val">1000<span class="burn-item__unit">千卡</span></div>
<div class="burn-item__label">每日消耗目标</div>
</div>
</div>
</div>
<!-- 运动注意事项（可折叠） -->
<div class="alert-banner" id="alertBanner">
<div class="alert-banner__header" onclick="toggleExerciseTips()">
<div class="alert-banner__icon">⚠️</div>
<div class="alert-banner__title">运动注意事项</div>
<div class="alert-banner__arrow" id="alertArrow">▲</div>
</div>
<div class="alert-banner__body" id="alertBody">
<div class="tips-list" style="margin-top:8px;">
<div class="tips-item"><div class="tips-item__icon tips-item__icon--danger">!</div><div class="tips-item__text"><strong>高血压注意：</strong>避免憋气用力动作（如大重量举重），运动中监测心率不超过(220-年龄)×70%。首选快走、游泳、太极等中低强度有氧运动。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--warn">!</div><div class="tips-item__text"><strong>高尿酸提醒：</strong>避免剧烈无氧运动（产生乳酸抑制尿酸排泄），运动后及时补水2000ml以上。急性发作期应暂停运动，待症状缓解后从低强度开始恢复。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--good">✓</div><div class="tips-item__text"><strong>热身先行：</strong>运动前做5-10分钟动态热身，活动关节、提高心率，预防运动损伤。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--warn">!</div><div class="tips-item__text"><strong>量力而行：</strong>根据自身身体状况选择运动强度，避免过度训练导致肌肉酸痛或损伤。如感到异常疲劳应适当减量。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--info">i</div><div class="tips-item__text"><strong>补水及时：</strong>运动前中后少量多次饮水，每15-20分钟补充150-200ml水分。高尿酸者建议每日饮水2000ml以上，促进尿酸排泄。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--good">✓</div><div class="tips-item__text"><strong>循序渐进：</strong>运动强度和时间逐步增加，每周运动量增幅不超过10%，给身体充分的适应和恢复时间。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--danger">!</div><div class="tips-item__text"><strong>身体不适立即停止：</strong>运动中如出现胸闷、头晕、关节疼痛、呼吸困难等不适，应立即停止并就医，切勿勉强坚持。</div></div>
<div class="tips-item"><div class="tips-item__icon tips-item__icon--info">i</div><div class="tips-item__text"><strong>拉伸放松：</strong>运动后做5-10分钟静态拉伸，每个动作保持15-30秒，帮助肌肉恢复、减少酸痛、提高柔韧性。</div></div>
</div>
</div>
</div>
<!-- 运动类型推荐 -->
<!-- 运动类型推荐 -->
<div class="exer-type-card">
<div class="exer-type-card__title">运动类型推荐</div>
<div class="exer-type-list">
@@ -194,42 +282,27 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
<div class="week-detail" id="weekDetail"></div>
</div>
<!-- 注意事项 -->
<div class="tips-card">
<div class="tips-card__title">运动注意事项</div>
<div class="tips-list">
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--good">✓</div>
<div class="tips-item__text"><strong>热身先行：</strong>运动前做5-10分钟动态热身，活动关节、提高心率，预防运动损伤。</div>
</div>
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--warn">!</div>
<div class="tips-item__text"><strong>量力而行：</strong>根据自身身体状况选择运动强度，避免过度训练导致肌肉酸痛或损伤。</div>
</div>
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--info">i</div>
<div class="tips-item__text"><strong>补水及时：</strong>运动前中后少量多次饮水，每15-20分钟补充150-200ml水分。</div>
</div>
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--good">✓</div>
<div class="tips-item__text"><strong>循序渐进：</strong>运动强度和时间逐步增加，每周运动量增幅不超过10%。</div>
</div>
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--warn">!</div>
<div class="tips-item__text"><strong>身体不适立即停止：</strong>运动中如出现胸闷、头晕、关节疼痛等不适，应立即停止并就医。</div>
</div>
<div class="tips-item">
<div class="tips-item__icon tips-item__icon--info">i</div>
<div class="tips-item__text"><strong>拉伸放松：</strong>运动后做5-10分钟静态拉伸，帮助肌肉恢复、减少酸痛。</div>
</div>
</div>
</div>
<div class="bottom-safe"></div>
<div class="save-btn-wrap">
<button class="save-btn">保存至本地</button>
</div>
<div class="bottom-safe"></div>
</div>
</div>
<script>
/* ===== 运动注意事项折叠 ===== */
function toggleExerciseTips() {
var body = document.getElementById('alertBody');
var arrow = document.getElementById('alertArrow');
if (body.classList.contains('collapsed')) {
body.classList.remove('collapsed');
arrow.classList.remove('collapsed');
} else {
body.classList.add('collapsed');
arrow.classList.add('collapsed');
}
}
/* ===== 一周运动计划数据 ===== */
var WEEK_PLANS = [
{ day:'周一', date:'08-10', total:'目标消耗 980千卡', items:[