<template>
  <section class="medical-cooperation">
    <h2 class="section-title">医疗健康合作</h2>
    <p class="section-subtitle">赋能医疗健康产业升级，重新定义数字健康服务标准</p>
    <div class="cooperation-funnel">
      <img src="https://images.health.ufutx.com/202506/18/eco-funnel.png" alt="漏斗模型" class="funnel-img" />
      <!-- 标签可动态配置，此处简化 -->
      <div class="funnel-labels">
        <span>健康管理中心</span>
        <span>专科指导</span>
        <span>轻量化AI赋能</span>
        <span>数据反哺价值提升</span>
        <span>全链提效</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
/* 无业务逻辑 */
</script>

<style scoped lang="less">
.medical-cooperation {
  text-align: center;
  padding: 80px 20px;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color-primary;
    margin-bottom: 10px;
  }
  .section-subtitle {
    font-size: @font-size-md;
    color: @text-color-secondary;
    margin-bottom: 40px;
  }
  .cooperation-funnel {
    position: relative;
    .funnel-img {
      width: 60%;
      height: auto;
    }
    .funnel-labels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      span {
        font-size: @font-size-sm;
        color: @text-color-primary;
      }
    }
  }
}
</style>
