cfc/cfc-frontend/pages/health/exercise-index.vue

<template>
  <view class="page">
    <view class="nav-bar">
      <view class="nav-back" @tap="goBack">
        <text class="back-text">‹ 返回</text>
      </view>
      <text class="nav-title">运动</text>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">每日运动建议</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">3-6 岁（学龄前）</text>
              <text class="info-desc">每天至少 60 分钟中等强度运动，以游戏和趣味活动为主，如跑步、跳跃、球类游戏。</text>
            </view>
            <view class="info-item">
              <text class="info-age">6-12 岁（学龄期）</text>
              <text class="info-desc">每天 60 分钟以上中等强度运动，每周至少 3 次高强度有氧运动，如游泳、骑自行车、跳绳。</text>
            </view>
            <view class="info-item">
              <text class="info-age">12-18 岁（青少年）</text>
              <text class="info-desc">每天 60 分钟中高强度运动，每周 3 次力量训练，培养终身运动习惯。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">运动类型推荐</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">🏃 有氧运动</text>
              <text class="info-desc">提高心肺功能，增强耐力。推荐：跑步、游泳、骑自行车、跳绳、球类运动。</text>
            </view>
            <view class="info-item">
              <text class="info-age">💪 力量训练</text>
              <text class="info-desc">增强肌肉力量和骨骼密度。推荐：俯卧撑、仰卧起坐、深蹲、弹力带训练。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🧘 柔韧性训练</text>
              <text class="info-desc">改善身体灵活性，预防运动损伤。推荐：拉伸、瑜伽、舞蹈、体操。</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card">
        <view class="card-accent"></view>
        <view class="card-body">
          <text class="card-title">运动安全提示</text>
          <view class="info-list">
            <view class="info-item">
              <text class="info-age">做好热身</text>
              <text class="info-desc">运动前进行 5-10 分钟动态热身，如慢跑、关节活动，预防肌肉拉伤。</text>
            </view>
            <view class="info-item">
              <text class="info-age">补充水分</text>
              <text class="info-desc">运动前中后适量饮水，每 15-20 分钟补充 100-150ml 水，避免脱水。</text>
            </view>
            <view class="info-item">
              <text class="info-age">正确姿势</text>
              <text class="info-desc">保持正确运动姿势，避免过度训练。如有不适立即停止，必要时就医。</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    goBack: function() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #F5F7FA;
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  padding-top: var(--status-bar-height, 0);
  background-color: #FFFFFF;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-back {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  padding: 10rpx;
}

.back-text {
  font-size: 28rpx;
  color: #333;
}

.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.card {
  display: flex;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.card-accent {
  width: 8rpx;
  background-color: #FF8C42;
  flex-shrink: 0;
}

.card-body {
  flex: 1;
  padding: 30rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.info-age {
  font-size: 26rpx;
  font-weight: 500;
  color: #FF8C42;
  display: block;
}

.info-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}
</style>