<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" data-section data-section-color="#ffffff" > <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>