huijia-website/app/pages/index/components/PartnershipSection.vue

<template>
  <section
    id="partnership"
    ref="partnershipRef"
    class="partnership transition-all duration-1000 ease-out"
    :class="[isPartnershipVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-100px']"
  >
    <div class="partnership-header">
      <div class="partnership-line-left"></div>
      <div class="partnership-title pf-sc-regular">与合作伙伴携手，深入产业共创价值</div>
      <div class="partnership-line-right"></div>
    </div>

    <div class="partnership-content">
      <InspiraMarquee class="partnership-marquee-row1">
        <div v-for="partner in partnersRow1" :key="partner" class="partner-item">
          <img :src="partner" alt="" class="wh-full object-contain" />
        </div>
      </InspiraMarquee>
      <InspiraMarquee reverse class="partnership-marquee-row2">
        <div v-for="partner in partnersRow2" :key="partner" class="partner-item">
          <img :src="partner" alt="" class="wh-full object-contain" />
        </div>
      </InspiraMarquee>
      <div class="partnership-mask-left"></div>
      <div class="partnership-mask-right"></div>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { partnersRow1, partnersRow2 } from '@/constants/common'

  const partnershipRef = ref<HTMLElement | null>(null)
  const isPartnershipVisible = ref(false)

  onMounted(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return
          isPartnershipVisible.value = true
          observer.unobserve(entry.target)
        })
      },
      { threshold: 0.1 }
    )

    if (partnershipRef.value) {
      observer.observe(partnershipRef.value)
    }
  })
</script>

<style scoped lang="scss">
  .partnership {
    @extend %landing-container;
    @media screen and (min-width: 1920px) {
      padding-left: 220px;
      padding-right: 220px;
    }
    @apply py-60px overflow-hidden;
    @apply lt-sm:py-60px lt-sm:px-0;
  }

  .partnership-header {
    @apply flex-center gap-32px mb-40px;
    @apply lt-sm:mb-40px lt-sm:gap-30px;
  }

  .partnership-line-left {
    @apply h-2px w-320px bg-[linear-gradient(90deg,transparent_0%,#E5E9F5_100%)];
    @apply lt-sm:w-85px;
  }

  .partnership-title {
    @apply text-center font-s-18px lh-21px text-#9CA0A7 whitespace-nowrap;
    @apply lt-sm:font-s-28px;
  }

  .partnership-line-right {
    @apply h-2px w-320px bg-[linear-gradient(90deg,#E5E9F5_0%,transparent_100%)];
    @apply lt-sm:w-85px;
  }

  .partnership-content {
    @apply relative flex flex-col gap-0px -mt-24px;
  }

  .partnership-marquee-row1 {
    @apply [--duration:80s] [--gap:24px] mb--31px;
  }

  .partnership-marquee-row2 {
    @apply [--duration:80s] [--delay:-20s] [--gap:24px];
  }

  .partnership-mask-left {
    @apply pointer-events-none absolute inset-y-0 left-0 w-1/4 bg-[linear-gradient(to_right,#fff,transparent)];
  }

  .partnership-mask-right {
    @apply pointer-events-none absolute inset-y-0 right-0 w-1/4 bg-[linear-gradient(to_left,#fff,transparent)];
  }

  .partner-item {
    @apply flex-center h-80px w-200px bg-white rounded-8px shadow-[0_2px_8px_2px_rgba(0,0,0,0.06)] px-24px;
    @apply lt-sm:h-105px lt-sm:w-290px;
  }
</style>