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

<template>
  <modal name="Details" height="auto" weight="100%" :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-flex-col tw-justify-center tw-items-center tw-w-full tw-mb-[21px] md:tw-mb-[21px] xl:tw-justify-start">
        <button class="close tw-transition tw-btn-md" @click="$modal.hide('Details')"></button>
        <div class="t18 tw-mt-[30px] md:tw-text-[20px]">Service Details</div>
      </div>
      <div
        class="editor-styleguide modal-content tw-head-body tw-grid tw-gap-[10px] tw-grid-cols-1 tw-px-[20px] md:tw-text-[16px]">
        <div v-html="detail"></div>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  name: "service-details-modal",
  data() {
    return {};
  },
  props: {
    detail: {
      type: String,
    },
  },
};
</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;
}

.v--modal-overlay::v-deep {
  position: fixed;
  box-sizing: border-box;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999 !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>