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/effect-cards'
import aboutShow01 from '@/assets/images/aboutUs/show_img01.png'
import aboutShow02 from '@/assets/images/aboutUs/show_img02.png'
import aboutShow03 from '@/assets/images/aboutUs/show_img03.png'
import { useUserStore } from '@/stores/modules/user'
// import 'swiper/css/bundle'   // 全部css
const modules = [Navigation, Pagination, EffectCards, Autoplay]

const { openLoginModal } = useLoginModal()
const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)

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([
  {
    img: aboutShow01,
    title: 'Insight-Driven Creativity',
    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.Aesthetics Design',
  },
  {
    img: aboutShow02,
    title: 'Aesthetics Design',
    description:
      'Good design isn’t just about aesthetics — it’s about function, emotion, and experience. Our design approach balances visual appeal with usability to make every product speak for itself.Trend-Driven Picks',
  },
  {
    img: aboutShow03,
    title: 'Trend-Driven Picks',
    description:
      'We stay ahead of the curve. From fashion to tech, we follow what’s trending globally and transform it into commercial-ready solutions that speak to Gen Z and beyond.',
  },
])
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">
              <img :src="item.img" class="w-480px h-480px object-cover" alt="">
            </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>
                <el-button class="!bg-#9B6CFF mt-40px !text-#fff !b-#9B6CFF w-160px !b-rd-380px text-16px fw-bold !h-40px px-20px">
                  <span v-if="!isLogin" @click="openLoginModal">
                    get started
                  </span>
                  <nuxt-link v-else to="/categories">
                    view catalogs
                  </nuxt-link>
                </el-button>
              </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>