diff --git a/employee-app/weight-management/exercise-advice.html b/employee-app/weight-management/exercise-advice.html index 64cddc8..36a4d53 100644 --- a/employee-app/weight-management/exercise-advice.html +++ b/employee-app/weight-management/exercise-advice.html @@ -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; } - + /* ===== 运动注意事项（可折叠） ===== */ + .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; } +
@@ -111,33 +184,48 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
- -
-
今日运动目标
-
12586步
-
目标 12000 步 · 已超额完成 586 步
-
-
-
-
已完成 104.9%目标达成 ✓
-
+ +
+
+ 每日推荐消耗 + 基础代谢 1600千卡 +
+
2645千卡
+
今日已消耗 2186 千卡，还需消耗 459 千卡（热量缺口 300kcal）
+
+
+
+
+
+
+ 基础消耗 1600 + 运动消耗 386 + 步行消耗 200 +
+
- -
-
运动消耗概览
-
-
-
586千卡
-
今日运动消耗
-
-
-
1000千卡
-
每日消耗目标
-
-
-
+ +
+
+
⚠️
+
运动注意事项
+
▲
+
+
+
+
!
高血压注意：避免憋气用力动作（如大重量举重），运动中监测心率不超过(220-年龄)×70%。首选快走、游泳、太极等中低强度有氧运动。
+
!
高尿酸提醒：避免剧烈无氧运动（产生乳酸抑制尿酸排泄），运动后及时补水2000ml以上。急性发作期应暂停运动，待症状缓解后从低强度开始恢复。
+
✓
热身先行：运动前做5-10分钟动态热身，活动关节、提高心率，预防运动损伤。
+
!
量力而行：根据自身身体状况选择运动强度，避免过度训练导致肌肉酸痛或损伤。如感到异常疲劳应适当减量。
+
i
补水及时：运动前中后少量多次饮水，每15-20分钟补充150-200ml水分。高尿酸者建议每日饮水2000ml以上，促进尿酸排泄。
+
✓
循序渐进：运动强度和时间逐步增加，每周运动量增幅不超过10%，给身体充分的适应和恢复时间。
+
!
身体不适立即停止：运动中如出现胸闷、头晕、关节疼痛、呼吸困难等不适，应立即停止并就医，切勿勉强坚持。
+
i
拉伸放松：运动后做5-10分钟静态拉伸，每个动作保持15-30秒，帮助肌肉恢复、减少酸痛、提高柔韧性。
+
+
+
- +
运动类型推荐
@@ -194,42 +282,27 @@ body { background: #f0f2f5; display: flex; justify-content: center; align-items:
- -
-
运动注意事项
-
-
-
✓
-
热身先行：运动前做5-10分钟动态热身，活动关节、提高心率，预防运动损伤。
-
-
-
!
-
量力而行：根据自身身体状况选择运动强度，避免过度训练导致肌肉酸痛或损伤。
-
-
-
i
-
补水及时：运动前中后少量多次饮水，每15-20分钟补充150-200ml水分。
-
-
-
✓
-
循序渐进：运动强度和时间逐步增加，每周运动量增幅不超过10%。
-
-
-
!
-
身体不适立即停止：运动中如出现胸闷、头晕、关节疼痛等不适，应立即停止并就医。
-
-
-
i
-
拉伸放松：运动后做5-10分钟静态拉伸，帮助肌肉恢复、减少酸痛。
-
-
-
- -
+
+ +
+