fashion-ssr-vue3/components/common/block/partner.vue

<script lang='ts' setup>
import partner_01 from '@/assets/images/partners/partner_01.png'
import partner_02 from '@/assets/images/partners/partner_02.png'
import partner_03 from '@/assets/images/partners/partner_03.png'
import partner_04 from '@/assets/images/partners/partner_04.png'
import partner_05 from '@/assets/images/partners/partner_05.png'
import partner_06 from '@/assets/images/partners/partner_06.png'
import partner_07 from '@/assets/images/partners/partner_07.png'
import partner_08 from '@/assets/images/partners/partner_08.png'
import partner_09 from '@/assets/images/partners/partner_09.png'
import partner_10 from '@/assets/images/partners/partner_10.png'
import partner_11 from '@/assets/images/partners/partner_11.png'
import partner_12 from '@/assets/images/partners/partner_12.png'
import partner_13 from '@/assets/images/partners/partner_13.png'
import partner_14 from '@/assets/images/partners/partner_14.png'
import partner_15 from '@/assets/images/partners/partner_15.png'

const avatarArray = [
  [partner_01, partner_02, partner_03, partner_04, partner_05],
  [partner_06, partner_07, partner_08, partner_09, partner_10],
  [partner_11, partner_12, partner_13, partner_14, partner_15],
]
const colorMode = useColorMode()
</script>

<template>
  <div
    class="bg-#fff py-120px data-section"
    data-section-color="#ffffff"
  >
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-86px custom-title-font">
        Our Bussiness <span class="custom-title-bg">Partners</span>
      </h2>
      <Vue3Marquee
        :pause-on-hover="true"
        :gradient="true"
        :gradient-color="colorMode !== 'light' ? [255, 255, 255] : [0, 0, 0]"
        gradient-length="5%"
      >
        <div v-for="avatar, i in avatarArray[0]" :key="i">
          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px bg-#fff img-shadow">
        </div>
      </Vue3Marquee>
      <Vue3Marquee
        :pause-on-hover="true"
        :gradient="true"
        gradient-length="5%"
      >
        <div v-for="avatar, i in avatarArray[1]" :key="i">
          <img :src="avatar" class="w-220px h-70px mr-30px mb-40px b-rd-6px bg-#fff img-shadow">
        </div>
      </Vue3Marquee>
      <Vue3Marquee
        :pause-on-hover="true"
        :gradient="true"
        gradient-length="5%"
      >
        <div v-for="avatar, i in avatarArray[2]" :key="i">
          <img :src="avatar" class="w-220px h-70px mr-30px b-rd-6px bg-#fff img-shadow">
        </div>
      </Vue3Marquee>
    </div>
  </div>
</template>

<style lang='less' scoped>
.img-shadow{
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.05);
}
</style>