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

<script lang='ts' setup>
const avatarArray = [
  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
  ['https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70', 'https://picsum.photos/240/70'],
]
const colorMode = useColorMode()
</script>

<template>
  <div class="bg-#fff py-120px">
    <div class="w-1200-auto text-center">
      <h2 class="text-36px fw-800 text-#333 !mb-86px">
        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="10%"
      >
        <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">
        </div>
      </Vue3Marquee>
      <Vue3Marquee
        :pause-on-hover="true"
        :gradient="true"
        gradient-length="10%"
      >
        <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">
        </div>
      </Vue3Marquee>
      <Vue3Marquee
        :pause-on-hover="true"
        :gradient="true"
        gradient-length="10%"
      >
        <div v-for="avatar, i in avatarArray[2]" :key="i">
          <img :src="avatar" class="w-220px h-70px mr-30px b-rd-6px">
        </div>
      </Vue3Marquee>
    </div>
  </div>
</template>

<style lang='less' scoped>
.custom-title-bg{
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg.png);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% auto;
  padding-bottom: 8px;
}
</style>