ShowEasyFrontEnd/FrontEnd/components/swiper/youMightLike.vue

<template>
  <div
    :class="[
      'swiper-container youMightLikeSwiper xl:tw-max-w-[1246px] xl:tw-mx-auto',
    ]"
    ref="mySwiper"
  >
    <div class="swiper-wrapper">
      <div class="swiper-slide like" v-for="(item, index) in list" :key="index">
        <youMightLike :service="service" :item="item"></youMightLike>
      </div>
    </div>
  </div>
</template>
<script scoped>
import Swiper from "swiper/bundle";
import youMightLike from "@/components/service/content/youMightLikeCard.vue";
export default {
  components: { Swiper, youMightLike },
  data() {
    return {
      service: {
        rating: "4.6",
        reviews: "344",
        discount: "10",
        total: "500",
      },
      youMightLikeSwiper: null,
    };
  },
  props: {
    list: {
      type: Array,
    },
    countrycode: {
      type: Array,
    },
    regionName: {
      type: Array,
    },
  },
  watch: {
    list: {
      handler: function () {
        if (this.list) {
          this.list.forEach((item) => {
            if (this.regionName) {
              this.regionName.forEach((region) => {
                if (region.id == item.region) {
                  item.regionName = region.name;
                  return region;
                }
              });
            }
            if (this.countrycode) {
              this.countrycode.forEach((country) => {
                if (country.country_code === item.country) {
                  item.countryName = country.name;
                  return country;
                }
              });
            }
          });
        }
      },
    },
  },
  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.youMightLikeSwiper = new Swiper(".youMightLikeSwiper", {
        direction: "horizontal",
        initialSlide: 0,
        slidesPerView: 1.8,
        slidesPerGroup: 2,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 15,
        preloadImages: false,
        breakpoints: {
          768: {
            spaceBetween: 22,
            slidesPerView: 2.45,
            lazy: {
              loadPrevNext: true,
              loadOnTransitionStart: true,
              loadPrevNextAmount: 3,
            },
          },
          1366: {
            slidesPerView: 4,
            spaceBetween: 30,
            grabCursor: true,
          },
        },
      });
      vm.youMightLikeSwiper.init();
      vm.youMightLikeSwiper.update();
    });
  },
};
</script>
<style lang="scss" scoped>
:deep() {
  .swiper-container {
    &:hover {
      .swiper-button {
        &-prev {
          opacity: 1;
          transform: translateX(0);
        }

        &-next {
          opacity: 1;
          transform: translateX(0);
        }
      }
    }
  }

  .swiper-container {
    max-width: 100% !important;

    .swiper-slide.like {
      @media screen and (min-width: 1366px) {
        padding-right: 42px;
        width: 33.33333% !important;
      }

      .youMightLike > img {
        width: 100%;
        height: auto;
      }
    }
  }
}
</style>