<template>
  <section class="partner-section">
    <div class="partner-header">
      <h2 class="partner-title">合作伙伴</h2>
      <p class="partner-subtitle">正与众多客户一起创造更多价值</p>
    </div>
    <div class="partner-logos">
      <div v-for="index in 21" :key="index" class="partner-logo-item">
        <!--        <img :src="logo.src" :alt="logo.alt" class="partner-logo" />-->
        <img
          src="https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png"
          alt="新浪健康"
          class="partner-logo"
        />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
// 使用提供的图片链接作为所有合作伙伴Logo
// const partnerLogos = [
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   },
//   {
//     src: 'https://images.health.ufutx.com/202506/12/10fb15c77258a991b0028080a64fb42d.png',
//     alt: '新浪健康'
//   }
// ]
</script>

<style scoped lang="less">
@import '@/styles/global.less';

.partner-section {
  width: 100%;
  text-align: center;

  .partner-header {
    .my(50px);
    .partner-title {
      font-size: @font-size-xxl;
      font-weight: @font-weight-bold;
      color: @text-color;
      margin-bottom: @space-sm;
    }

    .partner-subtitle {
      font-size: 20px;
      color: @text-color-secondary;
      .mt(20px);
    }
  }

  .partner-logos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: @space-xl;
    justify-items: center;
    .px(160px);
    .pb(50px);
    .partner-logo-item {
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;

      .partner-logo {
        width: 230px;
        //max-height: 60px;
        object-fit: contain;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: @tablet-breakpoint) {
  .partner-logos {
    gap: @space-md;

    .partner-logo-item {
      height: 60px;
    }

    .partner-logo {
      max-height: 40px;
    }
  }
}
</style>
