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

<!-- @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 { getHomeBrandListApi } from '~/api/model/brand'

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

const solution = ref('category')
const list = ref([
  {
    key: 'category',
    title: 'By Category',
  },
  {
    key: 'trend',
    title: 'By Trend',
  },
])

getHomeBrandList()
async function getHomeBrandList() {
  try {
    const params = {
      pageNo: 1,
      pageSize: 8,
    }
    const data: any = await getHomeBrandListApi(params)
    categoryList.value = data.records
  }
  catch (error) {
    console.log('error', error)
  }
}

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 setTranslate(swiper: any, _translate: any) {
  // 设置第一个位置的背景色为#D7C4FF
  if (swiper) {
    swiper.slides.forEach((_slide: any, _i: number) => {
      const slider = swiper.slides[_i]
      if (_i === 1)
        slider.style.backgroundColor = '#D7C4FF'

      else
        slider.style.backgroundColor = ''
    })
  }
}
// function setTransition(swiper: any, _transition: any) {
//   if (!swiper)
//     return
//   for (let i = 0; i < swiper.slides.length; i++) {
//     const slider = swiper.slides[i]
//     // console.log('slide------222', slider)
//     slider.style.transition = `${_transition}ms`
//   }
// }
</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">
        Download EJET Spark  <span class="custom-title-bg">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="solution = item.key"
        >
          <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">
          View All
          <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>
        <!-- @set-transition="setTransition" -->
        <Swiper
          v-if="categoryList.length"
          :slides-per-view="3"
          :space-between="20"
          :modules="modules"
          :centered-slides="true"
          :loop="true"
          :navigation="false"
          :pagination="true"
          class="pos-relative"
          @set-translate="setTranslate"
          @swiper="onVerticalSwiper"
        >
          <SwiperSlide v-for="(item, index) in categoryList" :key="index">
            <common-catalogs-item :item="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;
}
.custom-title-bg{
  position: relative;
  display: inline-block;
  background: url(~/assets/images/title_bg02.png);
  background-repeat: no-repeat;
  background-position: center 100%;
  background-size: 100% auto;
  padding-bottom: 8px;
}
</style>