<!-- @format --> <script lang="ts" setup> import { Swiper, SwiperSlide } from 'swiper/vue' import { Navigation, Pagination } from 'swiper/modules' import 'swiper/css' import 'swiper/css/navigation' import { Api } from '@/api/model/url' const modules = [Navigation, Pagination] const catalogueList = ref<any>([]) const swiperVertical = ref<any>(null) const solution = ref('category') const list = ref([ { key: 'category', title: 'By Category', }, { key: 'trend', title: 'By Trend', }, ]) const requestUrl = `${process.env.MY_ENV_DEV_URL}${Api.CatalogueList}` const params = { pageNo: 1, pageSize: 9, state: 1, trend: 0, order: 'desc' } const { data, pending, error, refresh } = await useAsyncData( 'catalogue-list', () => $fetch(requestUrl, { params }), ) watch(() => data.value, (newValue) => { if (newValue?.result) catalogueList.value = newValue?.result?.records || [] }, { immediate: true }) function onVerticalSwiper(swiper: any) { swiperVertical.value = swiper } function onClickLeft() { // swiperVertical.value.slideTo() swiperVertical.value.slidePrev() } function onClickRight() { // swiperVertical.value.slideTo(4) swiperVertical.value.slideNext() } function switchCatalogs(item: any) { solution.value = item.key if (item.key === 'category') params.trend = 0 else params.trend = 1 refresh() } </script> <template> <div id="catalogs" class="bg-#0F0820 pt-100px pb-160px data-section" data-section-color="#0F0820" > <div class="w-1200-auto text-left pos-relative"> <h2 class="text-36px fw-800 text-#fff !mb-40px custom-title-font"> Download EJET Spark <span class="custom-title-bg02">Catalogs</span> </h2> <div class="flex gap-20px mb-30px text-center"> <div v-for="(item, index) in list" :key="index" class="py-8px w-132px b-rd-6px text-14px fw-bold b-solid b-1px cursor-pointer hover:bg-#fff hover:text-#000 transition-all duration-300" :class=" solution === item.key ? '!bg-#fff !text-#000 b-#fff' : 'bg-#0F0820 text-#fff b-#fff' " @click="switchCatalogs(item)" > <div>{{ item.title }}</div> </div> </div> <div class="w-1200-auto pos-relative"> <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer"> <nuxt-link class="text-#fff hover:text-#D7C4FF" :to="solution === 'category' ? '/categories' : '/trends'"> View All </nuxt-link> <svgo-arrow-line-r class="w-16px h-16px ml-10px" /> </div> <div class="pos-absolute cursor-pointer left-48% bottom--60px w-30px h-30px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center" @click="onClickLeft()" > <img src="~/assets/images/swiper_icon2_l.png" alt="" class="!w-2430px !h-30px" srcset="" > </div> <div class="pos-absolute cursor-pointer left-52% bottom--60px w-28px h-28px transform-translate-x--50% cursor-not-allowed !cursor-pointer flex justify-center items-center" @click="onClickRight()" > <img src="~/assets/images/swiper_icon2_r.png" alt="" class="!w-30px !h-30px" srcset="" > </div> <Swiper v-if="catalogueList.length" :slides-per-view="3" :space-between="20" :modules="modules" :centered-slides="true" :loop="true" :navigation="false" :pagination="true" class="pos-relative" @swiper="onVerticalSwiper" > <SwiperSlide v-for="(item, index) in catalogueList" :key="index"> <common-catalogs-item :item="item" class="catalog-item" /> </SwiperSlide> </Swiper> </div> <img class="w-240px h-148px pos-absolute right-0 bottom--160px z-101" src="~/assets/images/catalogs_img01.png" alt="" > </div> </div> </template> <style lang="less" scoped> .swiper-slide{ border-radius: 10px; background-color: #fff; } .swiper-slide{ background-color: #F3F4FB; &.swiper-slide-prev{ background-color: #D7C4FF!important; transition: all 0.3s ease-in-out; } } </style>