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

<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/19/61d397f0f9529af1d1c583bb9ff1cc41.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: 100px 192px;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color;
    margin-bottom: 10px;
  }
  .section-subtitle {
    font-size: @font-size-lg;
    color: @text-color-secondary;
    margin-bottom: 50px;
  }
  .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>