<template functional>
  <div class="loading-container pay" v-if="props.value">
    <cr-loading class="loading" size="24px" vertical>支付中</cr-loading>
  </div>
</template>

<script>
export default {
  name: "PayWaitLayer",
  props: {
    value: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="less" scoped>
@import "../style/var.less";
.loading-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  .loading {
    padding: 6px;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;

    @{deep} .cr-loading--text {
      color: #fff;
    }
  }
  &.pay {
    z-index: 1000;
    background-color: #fff;
    .loading {
      padding: 15px 25px;
      @{deep} .cr-loading--text {
        margin-top: 25px;
      }
    }
  }
}
</style>
