compdfkit_web_cn/components/Modal.vue

<template>
  <transition name="modal">
    <div
      v-show="modalShow"
      class="fixed top-0 bottom-0 left-0 right-0 z-1040 flex justify-center items-center duration-300"
    >
      <div class="fixed top-0 bottom-0 left-0 right-0 z-1050 opacity-30 bg-black" @click.self="doClose"></div>
      <div class="modal-dialog relative z-1060 max-w-460px w-full transition-opacity duration-150 ease-linear">
        <div class="modal-content relative py-65px px-35px text-center bg-white rounded-6px outline-0 transition-transform duration-300">
          <div class="modal-header">
            <span class="close absolute top-12px right-12px w-20px h-20px opacity-50 cursor-pointer hover:opacity-100" @click="doClose"></span>
          </div>
          <div>
            <img class="inline-block w-87px" src="/images/contact/success.png" alt="success">
            <div class="mt-16px mb-2px text-28px leading-44px font-bold text-brand-1">感谢您的联系！</div>
            <div class="text-sm text-brand-4">您的信息已成功发送给ComPDFKit团队，我们将在一个工作日内，以邮件或电话的方式与您取得联系。</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    modalShow: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  methods: {
    doClose () {
      this.$emit('close', false)
    }
  }
}
</script>


<style lang="scss" scoped>
  .modal-enter, .modal-leave-to {
    .modal-dialog {
      opacity: 0;
      .modal-content {
        transform: translate(0, -50px);
      }
    }
  }
  .modal-content {
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    .close {
      background: url('~/assets/images/icons/close.png') center no-repeat;
      background-size: 15px auto;
    }
  }
</style>