purchase/purchase_H5/src/components/timeoutModal.vue

<template>
  <van-overlay :show="value" :duration="0.1" @click="$emit('change', false)">
    <div class="timeout-modal" @click.stop>
      <div>中国联通正在努力为您开通，</div>
      <div>请以收到开通成功的短信为准。</div>
      <div>感谢您的耐心等待！</div>
      <div class="btn" @click="$emit('change', false)">确认</div>
    </div>
  </van-overlay>
</template>
<script>
export default {
  model: { prop: "value", event: "change" },
  props: { value: Boolean },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.timeout-modal {
  color: #333;
  padding: 60px 65px;
  font-size: 28px;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 333px;
  transform: translateX(-50%);
  width: 530px;
  background-color: #fff;
  border-radius: 10px;
  .btn {
    width: 160px;
    line-height: 60px;
    margin: 50px auto 0;
    border-radius: 8px;
    background-color: #1876bc;
    color: #fff;
  }
}
</style>