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"
      >
        <div>
          <h3 class="item-title">{{ item.title }}</h3>
          <p class="item-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>

    <!-- 中间扇形图片（1:1还原，不影响方块） -->
    <div class="sector-img-container">
      <img
        v-for="(item, index) in sections"
        :key="index"
        :src="getSectorImage(index)"
        class="sector-img"
        :alt="item.title"
        :class="`sector-img--${index}`"
        @mouseenter="highlightSector(index)"
        @mouseleave="resetHighlight"
      />
    </div>
  </section>
</template>

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

// 数据：新增「默认/高亮图」，保持原有title/desc
const sections = [
  {
    title: '精准个性化AI健康管理',
    desc: '根据居民的健康数据和风险评估结果，提供个性化的健康建议和干预措施。制定针对性的全方位健康改善计划，包括精准营养、饮食、运动、心理等方面的辅导。',
    defaultImg: 'https://images.health.ufutx.com/202506/24/67a0394f5bb3a8ac13ef46d894d578c3.png', // 左上默认
    activeImg: 'https://images.health.ufutx.com/202506/24/e1e7d82816b2b86deeb4d17071b95aca.png' // 左上高亮
  },
  {
    title: '智能健康监测',
    desc: '利用可穿戴设备实时收集居民的健康数据，如心率、血压、血糖等。通过大数据分析，对居民的健康状况进行动态监测和风险评估。',
    defaultImg: 'https://images.health.ufutx.com/202506/24/eb79c8579db7312346b80ddd7a6c5822.png', // 右上默认
    activeImg: 'https://images.health.ufutx.com/202506/24/5301fea3c74be8a7567eddde2ee0ead8.png' // 右上高亮
  },
  {
    title: '医疗资源整合', // 默认选中（索引2）
    desc: '连接社区卫生服务中心、乡镇卫生院、诊所等基层医疗机构，为居民提供便捷的医疗服务。实现远程健康管理的执行，提高医疗服务的可达性和效率。',
    defaultImg: 'https://images.health.ufutx.com/202506/24/0e9e555476da9d7efc74da331b648f12.png', // 左下默认
    activeImg: 'https://images.health.ufutx.com/202506/24/39b8854b191383d3d57f25e5bf0e1d75.png' // 左下高亮
  },
  {
    title: '健康教育与促进',
    desc: '通过社区活动、线上平台等方式，普及健康知识，提高居民的健康意识。健康人才培育场景，协同培训AI＋大健康领域新型人才，解决地区人才就业问题',
    defaultImg: 'https://images.health.ufutx.com/202506/24/94754978db12bfa48602d8165c148207.png', // 右下默认
    activeImg: 'https://images.health.ufutx.com/202506/24/4ca742d3f217da81edd59043d384d7d1.png' // 右下高亮
  }
]

const highlightedSector = ref(-1)
const isDefaultActive = ref(true)

// 初始化默认选中第三个扇形
onMounted(() => {
  highlightedSector.value = 2
})

// 动态切换图片
const getSectorImage = computed(() => (index: number) => {
  const isActive = highlightedSector.value === index || (isDefaultActive.value && index === 2)

  return isActive ? sections[index].activeImg : sections[index].defaultImg
})

// 交互逻辑
const highlightSector = (index: number) => {
  highlightedSector.value = index
  isDefaultActive.value = false
}

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

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

  /* 卡片布局：完全保留原有样式 */
  .health-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    position: relative;
    z-index: 1;

    .health-item {
      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;
        justify-items: end;
      }
      &:nth-child(3) {
        border-bottom-left-radius: 8px;
      }
      &:nth-child(4) {
        border-bottom-right-radius: 8px;
        justify-items: end;
      }

      &:hover {
        background: #e6ebf8;
        transform: translateY(-5px) translateZ(0);
        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;
        width: 500px;
        color: @text-color-secondary;
        line-height: 34px;
      }
    }
  }

  /* 扇形图片容器：仅替换渲染方式，保留定位逻辑 */
  .sector-img-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    z-index: 9; /* 与原SVG层级一致，不遮挡卡片 */
  }

  /* 扇形图片：四象限定位，尺寸适配 */
  .sector-img {
    position: absolute;
    width: 185px;
    height: 185px;
    object-fit: contain; /* 保证设计图比例 */
    transition: all 0.3s ease; /* 与卡片动画速度同步 */
  }

  /* 左上（索引0） */
  .sector-img--0 {
    top: 0;
    left: 0;
  }
  /* 右上（索引1） */
  .sector-img--1 {
    top: 0;
    right: 0;
  }
  /* 左下（索引2，默认高亮） */
  .sector-img--2 {
    bottom: 0;
    left: 0;
  }
  /* 右下（索引3） */
  .sector-img--3 {
    bottom: 0;
    right: 0;
  }

  /* 响应式：完全继承原有规则 */
  @media (max-width: 768px) {
    .health-grid {
      grid-template-columns: 1fr;
      gap: 20px;
      .health-item {
        border-radius: 8px !important;
        .item-desc {
          line-height: 12px !important;
        }
      }
    }
    .sector-img-container {
      display: none;
    }
  }
}
</style>