ShowEasyFrontEnd/FrontEnd/components/home/FocusExhibition1.vue

<template>
  <section :class="['tw-relative tw-mt-[48px] xl:tw-mx-auto']">
    <div class="swiper-container focusExhibitionWrapper1 xl:tw-max-w-[1060px] xl:tw-mx-auto" ref="focusExhibitionWrapper1"
      @mouseenter="enter" @mouseleave="leave">
      <div :class="['swiper-wrapper']">
        <template v-for="(item, index) in focusExhibitionlist1">
        <div :key="index" :class="['swiper-slide tw-p-[10px]']"  v-if="item.ExhibitionList.length > 0 && index <=5">
          <div class="tw-px-[10px] md:tw-px-[20px] tw-py-[40px] tw-rounded-[24px] bg-col-to-tr tw-h-full">
            <div class="tw-flex tw-flex-col tw-rounded-[24px]">
              <div class="tw-flex tw-justify-center" style="width:100%;">
                  <div class="t18 tw-text-center tw-mb-[20px] tw-font-bold">
                    {{item.CategoryName}}
                  </div>
              </div>
              <div class="tw-justify-center tw-grid tw-grid-cols-2 md:tw-grid-cols-1 xl:tw-grid-cols-1 tw-gap-[10px]" style="width:100%;">
                <template v-if="item.ExhibitionList!=undefined && item.ExhibitionList && item.ExhibitionList.length>0">
                  <template v-for="(item2, index2) in item.ExhibitionList">
                    <div v-if="WindowsWidth<=414 ? index2<=3 : index2<=2"  :key="index2" class="tw-py-[10px] tw-h-full">
                      <skeletonSlot class="tw-h-full">
                          <focusExhibitionsCard :item="item2" class="tw-h-full"></focusExhibitionsCard>
                      </skeletonSlot>
                    </div>
                  </template>
                </template>
              </div>
              <nuxt-link :to="localePath(`/exhibition?category=${item.CategoryID}`)" class="tw-flex tw-justify-center tw-mt-[20px]">
                  <div class="tw-flex-none">
                    <v-img max-height="21" :src="require(`@/assets/svg/more.svg`)"></v-img>
                  </div>
                  <div class="tw-shrink tw-mx-[10px] tw-text-[#cecece]">
                    {{$t('Explore more')}}
                  </div>
                  <div class="tw-flex-none">
                    <v-img max-height="21" :src="require(`@/assets/svg/more.svg`)"></v-img>
                  </div>
              </nuxt-link>
            </div>   
          </div>
        </div>
      </template>
      </div>
    </div>
    <div
      :class="[
        'swiper-button-prev ad1 tw-text-black tw-hidden',
          focusExhibitionWrapper1
          ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
          : '',
        ]"
    ></div>
    <div
      :class="[
        'swiper-button-next ad1 tw-text-black tw-hidden',
          focusExhibitionWrapper1
          ? 'xl:tw-flex xl:tw-justify-center xl:tw-items-center'
          : '',
      ]"
    ></div>
  </section>
</template>
<script>
import skeletonSlot from "~/components/newComponent/skeleton/skeletonSlot.vue";
import focusExhibitionsCard from "~/components/home/FocusExhibitionsCard.vue";
import Swiper from "swiper/bundle";
export default {
  components: {
    skeletonSlot,
    focusExhibitionsCard,
    Swiper,
  },
  props: {
    focusExhibitionlist1: {
      type: Array,
    },
  },
  data() {
    return {
      focusExhibitionWrapper1: null,
      exhibitions: [],
      WindowsWidth: 1920,
    };
  },
  created() {
    if (process.client) {
      this.WindowsWidth = window.innerWidth;
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  computed: {
    WindowWidth() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
      return this.WindowsWidth;
    },
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.focusExhibitionWrapper1 = new Swiper(".swiper-container.focusExhibitionWrapper1", {
        direction: "horizontal",
        initialSlide: 0,
        slidesPerView: 1.2,
        centeredSlides: true,
        loop: false,
        loopedSlides: 0,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 32,
        // autoplay: {
        //   disableOnInteraction: true,
        //   delay: 5000,
        // },
        preloadImages: false,
        // lazy: {
        //   loadPrevNext: true,
        //   loadOnTransitionStart: true,
        //   loadPrevNextAmount: 6,
        // },
        watchSlidesProgress: false,
        navigation: {
          nextEl: ".swiper-button-next.ad1",
          prevEl: ".swiper-button-prev.ad1",
        },
        breakpoints: {
          414: {
            slidesPerView: 1,
            spaceBetween: 10,
          },
          768: {
            slidesPerView: 1.2,
            spaceBetween: 48,
          },
          1366: {
            slidesPerView: 2,
            spaceBetween: 24,
            centeredSlides: false,
            grabCursor: true,
          },
        },
      });
      vm.focusExhibitionWrapper1.init();
      vm.focusExhibitionWrapper1.update();
    });
  },
  methods: {
    onResize() {
      if (process.client) {
        this.WindowsWidth = window.innerWidth;
      }
    },
    enter() {
      this.focusExhibitionWrapper1.autoplay.stop();
    },
    leave() {
      this.focusExhibitionWrapper1.autoplay.start();
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100% !important;
}

.swiper-button {
  &-prev {
    left: 0;
    width: 50px;
    &::before {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background: white;
      border: 1px solid #e6e6e8;
      transform: rotate(180deg);
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      right: 15px;
      background-image: url('~/assets/svg/u-angle-left-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 24px;
      height: 24px;
    }
  }

  &-next {
    right: 0;
    width: 50px;
    &::before {
      content: "";
      display: block;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background: white;
      border: 1px solid #e6e6e8;
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      left: 15px;
      background-image: url('~/assets/svg/u-angle-right-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 24px;
      height: 24px;
    }
  }
}

.bg-col-to-tr{
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.08);
  background: linear-gradient(to bottom right, rgba(220, 217, 255, 0.8), rgba(63, 61, 86, 0.6));
}
</style>