ShowEasyFrontEnd/FrontEnd/components/newComponent/modal/unLinkModal.vue

<template>
  <modal name="unLinkModal" width="100%" height="auto" :scrollable="true" :clickToClose="true">
    <div class="tw-w-full tw-p-[30px] tw-h-full tw-overflow-auto">
      <div class="modal-content">
        <div>
          <div class="tw-text-[18px] tw-text-neutrals-800 tw-break-words">
            {{$t('userProfile.unLinkText')}}
          </div>
          <button @click="$modal.hide('unLinkModal')"
            class="tw-mt-[40px] tw-bg-black tw-text-white tw-w-full tw-py-[12px] tw-rounded-[16px]">{{$t('userProfile.unLinkOK')}}</button>
        </div>
      </div>
    </div>
  </modal>
</template>
<script>
export default {
  data() {
    return {

    };
  },

  methods: {

  },
};
</script>
<style lang="scss" scoped>
.v--modal-overlay[data-modal="unLinkModal"]::v-deep() .v--modal-background-click {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.v--modal) {
  border-radius: 16px;
  max-width: 432px;
  min-height: max-content !important;
}

.close {
  background-image: url("~/assets/svg/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 14px;
  height: 14px;
}
</style>