fashion-ssr-vue3/components/business/home/banner.vue

<!-- @format -->

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination } from 'swiper/modules'
import { Api } from '@/api/model/url'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/autoplay'

const config = useRuntimeConfig()
const baseURL = config.public.apiBaseUrl

const modules = [Navigation, Pagination, Autoplay]
const categoryList = ref<any>([])
const swiperVertical = ref<any>(null)

const requestUrl = `${baseURL}${Api.CategoryList}`
const { data, pending, error, refresh } = await useAsyncData(
  'category-catalogue',
  () => $fetch(`${requestUrl}`, { params: { all: true } }),
)
categoryList.value = data.value?.result || []
console.log('categoryList.value', categoryList.value, requestUrl)

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 scrollToCatalogs() {
  const catalogs = document.getElementById('catalogs')
  if (catalogs)
    catalogs.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
onUnmounted(() => {
  if (swiperVertical.value) {
    swiperVertical.value.destroy()
    swiperVertical.value = null
  }
})
</script>

<template>
  <div
    class="bg-#0F0820 data-section"
    data-section-color="#0F0820"
  >
    <div class="w-1200-auto pos-relative h-800px">
      <div class="text-center pos-absolute top-200px left-50% translate-x--50%">
        <div class="pos-relative">
          <h1 class="text-58px text-#fff fw-800 ls-2 custom-title-font">
            Spark The Trend
          </h1>
          <h1 class="text-58px text-#fff fw-800 ls-2 custom-title-font">
            Ignite Sales
          </h1>
          <div
            class="pos-absolute top--26px right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
          >
            #Trendy Product
          </div>
          <div
            class="pos-absolute bottom-24px left--46px py-8px w-120px text-#fff bg-#1AC18E b-rd-20px transform-rotate--12deg"
          >
            #Wholesale
          </div>
        </div>

        <el-button class="my-80px !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-400px" round @click="scrollToCatalogs">
          View Catalogs
        </el-button>
      </div>
      <div
        v-if="categoryList.length"
        class="pos-absolute bottom--100px left-50% translate-x--50% w-1100px mx-auto"
      >
        <div
          class="pos-absolute cursor-pointer left--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickLeft()"
        >
          <img
            src="~/assets/images/swiper_icon_l.png"
            alt=""
            class="!w-24px !h-24px"
            srcset=""
          >
        </div>
        <div
          class="pos-absolute cursor-pointer right--46px top-200px w-28px h-28px transform-translate-y--50% cursor-not-allowed !cursor-pointer flex justify-center items-center"
          @click="onClickRight()"
        >
          <img
            src="~/assets/images/swiper_icon_r.png"
            alt=""
            class="!w-24px !h-24px"
            srcset=""
          >
        </div>
        <Swiper
          :slides-per-view="3"
          :space-between="30"
          :modules="modules"
          :centered-slides="true"
          :loop="true"
          :autoplay="{
            delay: 3000,
            disableOnInteraction: false,
            pauseOnMouseEnter: true,
          }"
          :navigation="false"
          :pagination="true"
          class="pos-relative"
          @swiper="onVerticalSwiper"
        >
          <SwiperSlide v-for="(item, index) in categoryList" :key="index">
            <common-category-item :item="item" />
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.835);
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}
</style>