ShowEasyFrontEnd/FrontEnd/components/service/content/faq.vue

<template>
  <div class="faq tw-z-[9999]">
    <div
      v-show="index <= 2 || seeMore"
      class="tw-mb-[16px] md:tw-mb-[20px] tw-head-body tw-font-normal"
      v-for="(item, index) in faq"
      :key="index"
    >
      <faqItem :item="item"></faqItem>
    </div>
    <button
      v-show="length !== undefined && length > 3"
      :class="[
        'seeMore tw-transition tw-btn-md tw-text-primary-1 tw-border tw-border-solid tw-border-primary-1 tw-px-[30px] tw-py-[8.5px] tw-mt-[20px] tw-w-full tw-rounded-xl hover:tw-bg-primary-3 xl:hover:tw-bg-transparent xl:tw-border-none',
        seeMore ? 'open' : '',
      ]"
      @click="opendFaq"
    >
      {{ $t(seeMoreText) }}
    </button>
    <faqModal :faq="faq" class="tw-z-[9999]"></faqModal>
  </div>
</template>
<script>
import faqModal from "@/components/service/contentModal/faqModal.vue";
import faqItem from "@/components/service/content/faqItem.vue";
export default {
  props: {
    faq: {
      type: Array,
    },
  },
  components: {
    faqModal,
    faqItem,
  },
  data() {
    return {
      seeMore: false,
      window: {
        width: 0,
      },
    };
  },
  created() {
    if (process.browser) {
      window.addEventListener("resize", this.handleResize);
    }
    this.handleResize();
  },
  computed: {
    seeMoreText() {
      if (this.seeMore == false) {
        return "See more";
      } else {
        return "See less";
      }
    },
    length() {
      if (this.faq) {
        return this.faq.length;
      } else {
        return undefined;
      }
    },
  },
  methods: {
    handleResize() {
      if (process.browser) {
        this.window.width = window.innerWidth;
      }
    },
    opendFaq() {
      if (this.window.width >= 1366) {
        this.seeMore = !this.seeMore;
      } else {
        this.$modal.show("faq");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.seeMore {
  &-hide {
    position: relative;
    max-height: 295px;
    overflow: hidden;
    &::after {
      content: "";
      display: block;
      position: absolute;
      background: url("~/assets/img/gradient_white.png") repeat-x left bottom;
      width: 100%;
      height: 130px;
      left: 0;
      bottom: 0;
      z-index: 1;
      transition: bottom 0.5s;
    }
  }
  &-show {
    position: relative;
    max-height: 100%;
    overflow: initial;
    &::after {
      display: none;
    }
  }
  @media screen and (min-width: 1366px) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    &::after {
      content: "";
      display: inline-block;
      position: relative;
      background-image: url("~/assets/svg/arrow-down-primary.svg");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 100%;
      width: 9px;
      height: 6px;
      margin-left: 16px;
      transition: all 0.2s linear;
    }
    &.open {
      &::after {
        transform: rotate(180deg);
      }
    }
  }
}
</style>