cfc/cfc-frontend/pages/health/diet-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">🌾 谷物类</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">每天吃 5 份以上蔬菜水果，不同颜色搭配，获取丰富的维生素、矿物质和膳食纤维。</text>
            </view>
            <view class="info-item">
              <text class="info-age">🥛 奶制品</text>
              <text class="info-desc">每天 300-500ml 奶制品，如牛奶、酸奶、奶酪，补充钙质和蛋白质，强健骨骼。</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 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">早餐提供全天 25-30% 的能量，保证谷物、蛋白质、水果搭配，开启活力一天。</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">每天饮水 800-1400ml（根据年龄），以白开水为主，少量多次，保持身体水分平衡。</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>