cfc/cfc-frontend/pages/health/sleep-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-5 岁（学龄前）</text>
              <text class="info-desc">每天推荐 10-13 小时睡眠（含午睡），养成固定作息，促进大脑和身体发育。</text>
            </view>
            <view class="info-item">
              <text class="info-age">6-12 岁（学龄期）</text>
              <text class="info-desc">每天推荐 9-11 小时睡眠，保证充足休息，提升学习注意力和记忆力。</text>
            </view>
            <view class="info-item">
              <text class="info-age">13-18 岁（青少年）</text>
              <text class="info-desc">每天推荐 8-10 小时睡眠，帮助身体恢复和激素调节，维持良好精神状态。</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">睡前 1 小时停止使用电子设备，蓝光会抑制褪黑素分泌，影响入睡。</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">以 21:00-7:00 为参考睡眠时段，根据年龄调整，保证上学日与节假日作息一致。</text>
            </view>
            <view class="info-item">
              <text class="info-age">午睡要适度</text>
              <text class="info-desc">学龄前儿童可午睡 1-2 小时，学龄期如有需要控制在 30 分钟内，避免影响夜间睡眠。</text>
            </view>
            <view class="info-item">
              <text class="info-age">过渡期调整</text>
              <text class="info-desc">节假日前后逐渐调整作息，每次调整 15-30 分钟，让孩子平稳过渡，避免睡眠紊乱。</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>