fashion-ssr-vue3/components/business/about/show.vue

<!-- @format -->

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, EffectCards, Navigation, Pagination } from 'swiper/modules'
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/autoplay'
import 'swiper/css/pagination'
// import 'swiper/css/bundle'   // 全部css
const modules = [Navigation, Pagination, EffectCards, Autoplay]
const swiperVertical = ref<any>(null)
const swiperHorizontal = ref<any>(null)
function onVerticalSwiper(swiper: any) {
  swiperVertical.value = swiper
}
function onHorizontalSwiper(swiper: any) {
  swiperHorizontal.value = swiper
}
function onSlideChange(swiper: any) {
  if (!swiperVertical.value)
    return
  swiperVertical.value.slideTo(swiper.realIndex)
}
function onSlideChange2(swiper: any) {
  if (!swiperHorizontal.value)
    return
  swiperHorizontal.value.slideTo(swiper.realIndex)
}
const list = ref([
  {
    title: 'Insight-Driven Creativity111',
    description:
      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
  },
  {
    title: 'Insight-Driven Creativity22',
    description:
      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
  },
  {
    title: 'Insight-Driven Creativity333',
    description:
      'We believe creativity should be rooted in real consumer insights. Every idea starts with what the new generation truly wants — we turn those insights into inspiring products.',
  },
])
onUnmounted(() => {
  if (swiperVertical.value) {
    swiperVertical.value.destroy()
    swiperVertical.value = null
  }
})
</script>

<template>
  <div class="bg-#EAE5FA">
    <div class="w-1200-auto">
      <div class="flex justify-between ">
        <div class="w-50% block-left flex user-select justify-center items-center pr-100px">
          <Swiper
            :modules="modules"
            mousewheel="false"
            :loop="true"
            effect="cards"
            grab-cursor="true"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true,
            }"
            :pagination="{
              clickable: true,
            }"
            class="pos-relative"
            @slide-change="onSlideChange2"
            @swiper="onVerticalSwiper"
          >
            <SwiperSlide v-for="(item, index) in list" :key="index">
              Slide {{ index }}
            </SwiperSlide>
          </Swiper>
        </div>
        <div class="w-50% h-700px pos-relative block-right">
          <Swiper
            direction="vertical"
            :modules="modules"
            mousewheel="false"
            :loop="true"
            :allow-touch-move="false"
            :pagination="false"
            class="pos-relative"
            @swiper="onHorizontalSwiper"
          >
            <SwiperSlide v-for="(item, index) in list" :key="index">
              <div class="text-left user-select">
                <div class="text-40px fw-800 text-#333 custom-title-font">
                  {{ item.title }}
                </div>
                <div class="text-#999 mt-20px lh-24px">
                  {{ item.description }}
                </div>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.user-select{
  user-select: none;
}
:deep(.block-right) {
  .swiper {
    position: relative;
    width: 100%;
    height: 100%;
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }
}
:deep(.block-left) {
   .swiper {
      width: 480px;
      height: 480px;
    }
    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }
     .swiper-pagination{
        top: unset;
        bottom: -80px;
        left: unset;
        right: -100px;
        display: flex;
        justify-content: end;
    }
  .swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
  }

  .swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
  }

  .swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
  }
}
</style>