<template>
  <section class="health-management">
    <div class="management-grid">
      <div v-for="(item, i) in managements" :key="i" class="management-item">
        <h3 class="item-title">{{ item.title }}</h3>
        <p class="item-desc">{{ item.desc }}</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const managements = [
  {
    title: '精准个性化AI健康管理',
    desc: '根据居民健康数据，提供个性化健康干预方案'
  },
  {
    title: '智能健康监测',
    desc: '利用可穿戴设备实时监测健康风险'
  },
  {
    title: '医疗资源整合',
    desc: '连接基层医疗机构，提升服务可及性'
  },
  {
    title: '健康教育与促进',
    desc: '普及健康知识，培育AI+大健康人才'
  }
]
</script>

<style scoped lang="less">
.health-management {
  padding: 80px 20px;
  max-width: 1200px;
  margin: 0 auto;

  .management-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

    @media (max-width: @tablet-breakpoint) {
      grid-template-columns: 1fr;
    }
  }
  .management-item {
    background: #fff;
    padding: 30px;
    border-radius: @border-radius-lg;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);

    .item-title {
      font-size: @font-size-lg;
      font-weight: bold;
      color: @text-color-primary;
      margin-bottom: 10px;
    }
    .item-desc {
      font-size: @font-size-sm;
      color: @text-color-light;
      line-height: 1.6;
    }
  }
}
</style>
