ShowEasyFrontEnd/FrontEnd/components/home/TrendingService.vue

<template>
  <section :class="['tw-relative']">
    <div
      class="tw-relative tw-grid tw-grid-cols-2 tw-gap-[10px] tw-float-right tw-top-[4px]"
    >
      <div
        :class="[
          'swiper-button-prev trendingServices 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 xl:tw-block',
        ]"
      ></div>
      <div
        :class="[
          'swiper-button-next trendingServices 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 xl:tw-block',
        ]"
      ></div>
    </div>
    <div class="swiper-container trendingServices" ref="trendingServices">
      <div :class="['swiper-wrapper']">
        <div
          v-for="(item, index) in services"
          :key="index"
          :class="['swiper-slide']"
        >
          <skeletonSlot>
            <template #default
              ><TrendingServiceCard
                :item="item"
                :countryNameList="countryNameList"
                :cityNameList="cityNameList"
                :regionNameList="regionNameList"
            /></template>
            <template #fallback
              ><TrendingServiceSkeleton></TrendingServiceSkeleton
            ></template>
          </skeletonSlot>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Swiper from "swiper/bundle";
import TrendingServiceCard from "~/components/home/TrendingServiceCard.vue";
import TrendingServiceSkeleton from "~/components/newComponent/skeleton/trendingServiceSkeleton.vue";
import skeletonSlot from "~/components/newComponent/skeleton/skeletonSlot.vue";
export default {
  components: {
    Swiper,
    TrendingServiceCard,
    TrendingServiceSkeleton,
    skeletonSlot,
  },
  props: {
    services: {
      type: Array,
    },
  },
  data() {
    return {
      perColumn: null,
      service: {
        rating: "4.6",
        reviews: "344",
        discount: "10",
        total: "500"
      },
      countryNameList: [],
      cityNameList: [],
      regionNameList: [],
    };
  },
  created() {
    // this.getUnSortLocationList();
    this.countryNameList = [ 'Vietnam', 'Vietnam' ];
    this.cityNameList = [ 'Vietnam', 'Vietnam' ];
    this.regionNameList = [ 'Asia', 'Asia' ];
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.perColumn = new Swiper(".swiper-container.trendingServices", {
        direction: "horizontal",
        initialSlide: 0,
        slidesPerView: 1.8,
        slidesPerGroup: 2,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 15,
        preloadImages: false,
        lazy: {
          loadPrevNext: true,
          loadOnTransitionStart: true,
          loadPrevNextAmount: 3,
        },
        navigation: {
          prevEl: ".swiper-button-prev.trendingServices",
          nextEl: ".swiper-button-next.trendingServices",
        },
        breakpoints: {
          768: {
            spaceBetween: 22,
            slidesPerView: 2.45,
            lazy: {
              loadPrevNext: true,
              loadOnTransitionStart: true,
              loadPrevNextAmount: 3,
            },
          },
          1366: {
            slidesPerView: 4,
            slidesPerGroup: 4,
            spaceBetween: 30,
            grabCursor: true,
            lazy: {
              loadPrevNext: true,
              loadOnTransitionStart: true,
              loadPrevNextAmount: 4,
            },
          },
        },
      });
      vm.perColumn.lazy.load();
    });
  },
  methods: {
    async getUnSortLocationList() {
      // await this.$axios
      //   .get(
      //     `/t/exhibitions/locations?lang=${this.$i18n.localeProperties["langQuery"]}&sort=false`
      //   )
      //   .then((result) => {
      //     this.countryNameList = result.data.country_name_list;
      //     this.cityNameList = result.data.city_name_list;
      //     this.regionNameList = result.data.region_name_list;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100% !important;
}

.swiper-button {
  &-prev.trendingServices {
    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.trendingServices {
    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;
    }
  }
}

.row1 {
  position: relative;
}

.right-arrow {
  position: absolute;
  top: 20%;
  right: -20px;
  border: 2px solid;
  padding: 10px 15px;
  border-radius: 10px;
}

.card {
  border: 0.5px solid rgba(200, 200, 200, 0.5);
}

.inline-img {
  display: inline-block;
}

.card-image {
  position: relative;
}

.heart {
  position: absolute;
  top: 10%;
  right: 10%;
}

.text-to-grey {
  color: #9c9c9c !important;
}

#carousel:after {
  content: "";
  display: none;
  position: absolute;
  /*也可以设置绝对定位*/
  top: 0;
  left: 0;
  height: 320px;
  width: 100%;
  z-index: 3;
  background-image: url("~/assets/img/travelPic2.png");
  background-size: 100% 320px;
}

#slide-group:after {
  content: "";
  display: none;
  position: absolute;
  /*也可以设置绝对定位*/
  top: 0;
  left: 0;
  height: 350px;
  width: 100%;
  z-index: 3;
  background-image: url("~/assets/img/travelPic2.png");
  background-size: inherit 330px;
  background-position: 50% 50%;
  background-repeat: repeat-y;
}

:deep() {
  .v-carousel__controls {
    display: none;
  }
}
</style>