ShowEasyFrontEnd/FrontEnd/components/home/newHighlightExhibitions.vue

<template>
  <section :class="['tw-relative xl:tw-max-w-[1246px] xl:tw-mx-auto']">
    <div class="tw-relative tw-grid tw-grid-cols-2 tw-gap-[10px] tw-float-right tw-top-[4px]">
      <div :class="[
        'swiper-button-prev highlightExhibitions tw-relative tw-text-black tw-w-[40px] tw-h-[40px] tw-left-0 tw-text-center  tw-border-solid tw-border tw-border-neutrals-300 tw-rounded-[10px]  tw-p-[8px] tw-hidden md:tw-block',
      ]"></div>
      <div :class="[
        'swiper-button-next highlightExhibitions tw-relative tw-text-black tw-w-[40px] tw-h-[40px] tw-right-0 tw-text-center tw-border-solid tw-border tw-border-neutrals-300 tw-rounded-[10px] tw-p-[8px] tw-hidden md:tw-block',
      ]"></div>
    </div>
    <div class="swiper-container highlightExhibitions" ref="highlightExhibitions">
      <div :class="[
        'swiper-wrapper tw-grid tw-grid-cols-2 tw-gap-y-[25px] md:tw-flex md:tw-grid-cols-none md:tw-gap-0',
      ]">
        <template v-for="(item, index) in exhibitions">
        <div :key="index" :class="['swiper-slide']" v-if="index <= useSwiper">
          <skeletonSlot>
            <template #default>
              <hightlightExhibitionsCard :item="item"></hightlightExhibitionsCard>
            </template>
            <template #fallback>
              <sk></sk>
            </template>
          </skeletonSlot>
        </div>
      </template>
      <template v-for="n in exhibitionsLength" >
        <div :key="n" :class="['swiper-slide']" v-if="windewWidth >= 1366">
        </div>
      </template>
      </div>
    </div>
    <a class="tw-block tw-border tw-border-solid tw-text-black tw-text-center tw-border-black tw-bg-white tw-py-[9px] tw-w-full tw-rounded-[12px] tw-mt-[44px] md:tw-hidden"
      :href="localePath('/exhibition')">
      {{ $t("See more") }}
    </a>
  </section>
</template>
<script>
import { dateCountDown } from "~/utils/assist";
import skeletonSlot from "~/components/newComponent/skeleton/skeletonSlot.vue";
import hightlightExhibitionsCard from "~/components/home/HightlightExhibitionsCard.vue";
import sk from '~/components/newComponent/skeleton/homeExhibitionCardSkeleton.vue';
import TrendingServiceVue from "./TrendingService.vue";
import Swiper from "swiper/bundle";
export default {
  components: {
    hightlightExhibitionsCard,
    sk,
    skeletonSlot,
    Swiper
  },
  data() {
    return {
      highlightExhibitionsSwiper: undefined,
      carousel: 0,
      carouselPagesNum: 3,
      exhibitions: [],
      windewWidth: "",
    };
  },
  async created() {
    // await this.getData();
    this.exhibitions = [
        {
          id: '1',
          name: 'VISA',
          logo: require('/assets/img/thems/Frame33.png'),
          startdate: '2023-03-01',
          enddate: '2023-03-30',
          region:{
            name: 'Vietnam'
          },
          country:{
            name: 'Vietnam'
          },
          city:{
            name: 'Vietnam'
          }
        },
        {
          id: '1',
          name: 'VISA',
          logo: require('/assets/img/thems/Frame33.png'),
          startdate: '2023-03-01',
          enddate: '2023-03-30',
          region:{
            name: 'Vietnam'
          },
          country:{
            name: 'Vietnam'
          },
          city:{
            name: 'Vietnam'
          }
        },{
          id: '1',
          name: 'VISA',
          logo: require('/assets/img/thems/Frame33.png'),
          startdate: '2023-03-01',
          enddate: '2023-03-30',
          region:{
            name: 'Vietnam'
          },
          country:{
            name: 'Vietnam'
          },
          city:{
            name: 'Vietnam'
          }
        }
      ];
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.initSwiper();
    });
  },
  destroyed() {
    if (process.browser) {
      window.removeEventListener("resize", this.handleResize);
    }
  },
  computed: {
    useSwiper() {
      if (this.windewWidth < 768) {
        return 5;
      } else {
        return this.exhibitions.length;
      }
    },
    exhibitionsLength() {
      if (this.exhibitions.length > 6 && this.exhibitions.length < 12) {
        return 12 - this.exhibitions.length;
      }
      if (this.exhibitions.length > 9 && this.exhibitions.length < 18) {
        return 18 - this.exhibitions.length;
      }
    },
  },
  methods: {
    async getData() {
      let langQuery = "?lang=" + this.$i18n.localeProperties["langQuery"] + "&";
      this.$axios
        .get("/trending/exhibitions" + langQuery)
        .then((res) => {
          this.exhibitions = res.data.exhibitions;
          this.exhibitions = this.exhibitions.filter((item) => {
            let day = this.dateCountDown(item.startdate);
            return day > 0;
          })
        })
        .catch((err) => {
          console.error(err);
        });
    },
    handleResize() {
      if (process.browser) {
        this.windewWidth = window.innerWidth;
        this.initSwiper();
      }
    },
    initSwiper() {
      let vm = this;
      vm.$nextTick(function () {
        vm.highlightExhibitionsSwiper = new Swiper(
          ".swiper-container.highlightExhibitions",
          {
            direction: "horizontal",
            initialSlide: 0,
            slidesPerView: 2,
            slidesPerColumn: 3,
            // slidesPerGroup: 3,
            slidesPerColumnFill: 'row',
            allowTouchMove: false,
            grabCursor: true,
            observer: true, //修改swiper自己或子元素时，自动初始化swiper
            observeParents: true, //修改swiper的父元素时，自动初始化swiper
            rebuildOnUpdate: true,
            preloadImages: false,
            spaceBetween: 10,
            lazy: {
              loadPrevNext: true,
              loadOnTransitionStart: true,
              loadPrevNextAmount: 6,
            },
            navigation: {
              prevEl: ".swiper-button-prev.highlightExhibitions",
              nextEl: ".swiper-button-next.highlightExhibitions",
            },
            breakpoints: {
              768: {
                slidesPerView: 1,
                slidesPerColumn: 6,
                slidesPerGroup: 1,
                spaceBetween: 20,
                allowTouchMove: true,
                lazy: {
                  loadPrevNext: true,
                  loadOnTransitionStart: true,
                  loadPrevNextAmount: 10,
                },
              },
              1366: {
                slidesPerView: 2,
                slidesPerColumn: 3,
                slidesPerGroup: 2,
                spaceBetween: 20,
                slidesPerColumnFill: 'row',
                allowTouchMove: true,
              },
            },
          }
        );
        vm.highlightExhibitionsSwiper.init();
        vm.highlightExhibitionsSwiper.update();
      });
    },
    dateCountDown
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100% !important;
}

.swiper-slide {
  margin-right: 20px;

  // @media screen and (min-width:768px) {
  //   &:first-child {
  //     margin-bottom: 20px;
  //   }
  // }
}

.swiper-button {
  &-prev.highlightExhibitions {
    z-index: 4;

    &:focus-visible {
      outline: none;
    }

    &::after {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: transparent;
      background-image: url('~/assets/svg/u-angle-left-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    &:focus-visible,
    &:focus {
      outline: none;
    }
  }

  &-next.highlightExhibitions {
    z-index: 4;

    &:focus-visible {
      outline: none;
    }

    &::after {
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      color: transparent;
      background-image: url('~/assets/svg/u-angle-right-b.svg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    &:focus-visible,
    &:focus {
      outline: none;
    }
  }
}

.active {
  position: relative;

  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -12px;
    width: 100%;
    height: 2px;
    background-color: #f48800;
  }
}
</style>