ShowEasyFrontEnd/FrontEnd/components/service/contentModal/faqModal.vue

<template>
  <modal
    name="faq"
    height="auto"
    :scrollable="true"
    :clickToClose="true"
    class="tw-z-[9999]"
  >
    <div class="tw-text-base-primary xl:tw-p-[5px]">
      <div
        class="modal-header tw-flex tw-w-full tw-justify-center tw-mb-[32px] md:tw-mb-[21px] xl:tw-justify-start"
      >
        <button
          class="close tw-transition tw-btn-md"
          @click="$modal.hide('faq')"
        ></button>
        <div class="t18 tw-mt-[30px] xl:tw-text-[20px]">FAQ</div>
      </div>
      <div
        class="modal-content tw-head-body tw-grid tw-gap-[10px] tw-grid-cols-1 tw-px-[20px] md:tw-text-[12px]"
      >
        <div class="faq">
          <div
            class="tw-mb-[16px] md:tw-mb-[20px]"
            v-for="(item, index) in faq"
            :key="index"
          >
            <div
              class="tw-head-body tw-text-base-primary tw-font-medium md:tw-body-3"
            >
              Q: {{ item.question }}
            </div>
            <div class="tw-head-body tw-text-base-primary md:tw-body-3">
              A: {{ item.answer }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  name: "faq-Modal",
  data() {
    return {};
  },
  props: {
    faq: {
      type: Array,
    },
  },
};
</script>
<style lang="scss" scoped>
.close {
  position: absolute;
  right: 25px;
  top: 30px;
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;

  @media screen and (min-width: 1366px) {
    margin-left: 530px;
  }
}

.v--modal-overlay::v-deep {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 99999 !important;
  opacity: 1;
  .v--modal {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: 640px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0;
    @media screen and (min-width: 768px) {
      height: auto;
      max-height: 900px;
    }
  }

  .v--modal-box {
    overflow: auto;
  }
  .v--modal-background-click {
    display: flex;
    align-items: flex-end;
    @media screen and (min-width: 768px) {
      display: flex !important;
      align-items: flex-end !important;
    }
  }
}
</style>