ShowEasyFrontEnd/FrontEnd/components/swiper/relatedService.vue

<template>
  <section :class="['tw-relative tw-mt-[30px] tw-overflow-hidden']">
    <div class="swiper-container relatedService tw-mx-auto tw-max-w-full tw-overflow-hidden" ref="relatedService">
      <div :class="['swiper-wrapper tw-z-0']">
        <button :class="[
          'swiper-slide tw-w-fit tw-body-4 tw-border tw-border-solid tw-border-neutral-700 tw-rounded-[12px] tw-px-[16px] tw-py-[10px]   md:tw-body-3',
          categoryid == 0 ? 'active' : '',
        ]" @click="getAll()">{{ $t('service.All') }}
        </button>
        <button :class="[
          'swiper-slide tw-w-fit tw-body-4 tw-border tw-border-solid tw-border-neutral-700  tw-rounded-[12px] tw-px-[16px] tw-py-[10px] tw-whitespace-nowrap  md:tw-body-3',
          categoryid == item.ids[0] ? 'active' : '',
        ]" v-for="(item, index) in getCategory" :key="index" @click="getCategoryId(item.ids[0])">
          {{ item.lang_text }}
        </button>
      </div>
      <div :class="['whitelinear tw-absolute tw-z-10 tw-mt-[-43px] tw-right-0']"></div>
      <div :class="[
        'swiper-button-prev rs',
        relatedServiceSwiper ? 'md:tw-block' : '',
      ]"></div>
      <div :class="[
        'swiper-button-next rs',
        relatedServiceSwiper ? 'md:tw-block' : '',
      ]"></div>
    </div>
  </section>
</template>
<script>
import { $ } from "dom7";
import Swiper from "swiper/bundle";

export default {
  components: {
    Swiper,
  },

  data() {
    return {
      relatedServiceSwiper: null,

      categoryName: "",
      categoryid: 0,
    };
  },
  props: {
    getCategory: {
      type: Array,
    },
  },

  mounted() {
    let vm = this;
    vm.$nextTick(function () {
      vm.relatedServiceSwiper = new Swiper(".swiper-container.relatedService", {
        direction: "horizontal",
        initialSlide: 0, //slide的索引值，從第0筆開始顯示
        slidesPerView: "auto", //顯示的slides数量
        slidesPerGroup: 4, //每次slide的數量
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        spaceBetween: 10,
        slideToClickedSlide: true,
        navigation: {
          nextEl: ".swiper-button-next.rs",
          prevEl: ".swiper-button-prev.rs",
        },
        breakpoints: {
          768: {
            spaceBetween: 12,
          },
        },
      });
    });
  },
  methods: {
    getCategoryId(data) {
      this.categoryid = data;
      this.$emit("test", this.categoryid);
      this.$emit("categoryid", `/service?category=${this.categoryid}`);
    },
    getAll() {
      this.categoryid = 0;
      this.$emit("getAllServiceList");
      this.$emit("categoryid", `/service`);
    },
    test() {
      if (this.activeIndex == this.categoryid) {
        return true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100% !important;
}

.swiper-slide {
  color: #696969;
  background-color: white;
}

.active {
  background-color: #757575;
  color: #fefefe;
}

.swiper-button {
  // &-prev.rs {
  //   z-index: 4;
  //   text-align: center;
  //   height: 45px;
  //   width: 45px;
  //   background-image: url("~/assets/svg/relatedServiceArrow.svg");
  //   background-size: 100%;
  //   transform: rotate(180deg);
  //   background-repeat: no-repeat;
  //   // &:focus-visible,
  //   // &:focus {
  //   //   outline: none;
  //   // }

  //   &::after {
  //     text-align: center;
  //     color: transparent;
  //     // background-image: url("~/assets/svg/relatedServiceArrow.svg");
  //     background-position: center;
  //     height: 45px;
  //     width: 45px;
  //     background-repeat: no-repeat;
  //     background-size: 100%;
  //   }
  // }

  // &-next.rs {
  //   z-index: 9;
  //   text-align: center;
  //   height: 45px;
  //   width: 45px;
  //   background-image: url("~/assets/svg/relatedServiceArrow.svg");
  //   background-size: 100%;
  //   background-repeat: no-repeat;
  //   // position: relative;

  //   &::after {
  //     text-align: center;
  //     color: transparent;
  //     // background-image: url("~/assets/svg/relatedServiceArrow.svg");
  //     background-position: center;

  //     background-repeat: no-repeat;
  //     background-size: cover;
  //   }
  // }
}

.swiper-button {
  &-prev.rs {
    left: 0;

    &::before {
      content: "";
      display: block;
      width: 60px;
      height: 100%;
      background-image: url("~/assets/svg/swiper_linear.svg");
      // background-image: linear-gradient(to left, transparent, #fff);
      position: absolute;
      left: 0;
      top: -4px;
      z-index: -1;
      transform: rotate(180deg);

      @media screen and (min-width: 1366px) {
        width: 56px;
      }
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 6px;
      right: -6px;
      background-image: url("~/assets/svg/relatedServiceArrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 32px;
      transform: rotate(180deg);
      width: 32px;
      height: 32px;
    }
  }

  &-next.rs {
    right: 0;

    &::before {
      content: "";
      display: block;
      width: 60px;
      height: 100%;
      background-image: url("~/assets/svg/swiper_linear.svg");
      // background-image: linear-gradient(to right, transparent, #fff);
      position: absolute;
      right: 0;
      top: 4px;
      z-index: -1;

      @media screen and (min-width: 1366px) {
        width: 56px;
      }
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      top: 6px;
      left: -6px;
      background-image: url("~/assets/svg/relatedServiceArrow.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 32px;
      width: 32px;
      height: 32px;
    }
  }
}

:deep(.swiper-container) {
  .swiper-slide {
    display: flex;
  }

  [aria-disabled="true"] {
    opacity: 0;

    &::after {
      pointer-events: none;
    }

    &::before {
      pointer-events: none;
    }
  }
}
</style>