ufutx-pc-website/src/views/Ecosystem/sections/HealthManagement.vue

<template>
  <section class="health-management">
    <!-- 2x2卡片布局 -->
    <div class="health-grid">
      <div
        v-for="(item, index) in sections"
        :key="index"
        class="health-item"
        @mouseenter="highlightSector(index)"
        @mouseleave="resetHighlight"
      >
        <h3 class="item-title">{{ item.title }}</h3>
        <p class="item-desc">{{ item.desc }}</p>
      </div>
    </div>

    <!-- 中间扇形（SVG实现） -->
    <div class="sector-svg-container">
      <svg class="sector-svg" viewBox="0 0 400 400">
        <defs>
          <linearGradient id="sectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#1E6DD8" />
            <stop offset="100%" stop-color="#4B89DC" />
          </linearGradient>
        </defs>
        <!-- 圆心平移到(200,200) -->
        <g transform="translate(200, 200)">
          <!-- 左上扇形：精准个性化AI健康管理 -->
          <path d="M0,0 L0,-100 A100,100 0 0,0 -100,0 Z" class="sector" :class="{ active: highlightedSector === 0 }" />
          <!-- 右上扇形：智能健康监测 -->
          <path d="M0,0 L100,0 A100,100 0 0,0 0,-100 Z" class="sector" :class="{ active: highlightedSector === 1 }" />
          <!-- 左下扇形：医疗资源整合 -->
          <path d="M0,0 L-100,0 A100,100 0 0,0 0,100 Z" class="sector" :class="{ active: highlightedSector === 2 }" />
          <!-- 右下扇形：健康教育与促进 -->
          <path d="M0,0 L0,100 A100,100 0 0,0 100,0 Z" class="sector" :class="{ active: highlightedSector === 3 }" />
        </g>
      </svg>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sections = [
  {
    title: '精准个性化AI健康管理',
    desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。'
  },
  {
    title: '智能健康监测',
    desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。'
  },
  {
    title: '医疗资源整合',
    desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。'
  },
  {
    title: '健康教育与促进',
    desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI+大健康领域新型人才，解决地区人才就业问题'
  }
]

const highlightedSector = ref(3)

const highlightSector = (index: number) => {
  highlightedSector.value = index
}

const resetHighlight = () => {
  highlightedSector.value = -1
}
</script>

<style scoped lang="less">
.health-management {
  position: relative;
  padding: 0px 192px;
  //max-width: 1200px;
  margin: 0 auto;

  .health-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;

    .health-item {
      //width: 762px;
      padding: 100px 50px;
      background: #f6f8fe;
      text-align: left;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;

      &:nth-child(1) {
        border-top-left-radius: 8px;
      }
      &:nth-child(2) {
        border-top-right-radius: 8px;
      }
      &:nth-child(3) {
        border-bottom-left-radius: 8px;
      }
      &:nth-child(4) {
        border-bottom-right-radius: 8px;
      }

      &:hover {
        background: #e6ebf8;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      }

      .item-title {
        font-size: 50px;
        margin-bottom: 16px;
        font-weight: 400;
        color: @text-color;
      }

      .item-desc {
        font-size: 20px;
        color: @text-color-secondary;
        line-height: 34px;
      }
    }
  }

  .sector-svg-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 468px;
    height: 468px;
    z-index: 9;
  }

  .sector-svg {
    width: 100%;
    height: 100%;
  }

  .sector {
    fill: #cde2ff;
    stroke: none;
    //stroke-width: 10;
    transition: all 0.3s ease;
  }

  .sector.active {
    fill: url(#sectorGradient);
    transform: scale(1.05);
    filter: drop-shadow(0 0 10px rgba(30, 109, 216, 0.5));
  }

  @media (max-width: 768px) {
    .health-grid {
      grid-template-columns: 1fr;
      gap: 20px;

      .health-item {
        border-radius: 8px !important;
      }
    }

    .sector-svg-container {
      display: none;
    }
  }
}
</style>