<template>
  <cr-overlay class="user-mask" :show="value" @click="hide">
    <cr-image class="user-mask-image" round width="86px" height="86px" fit="cover" :src="record" />
    <p class="user-mask-title">平台备案中</p>
    <p class="user-mask-desc">{{ desc }}</p>
  </cr-overlay>
</template>

<script>
import record from "@/assets/images/user/for_the_record@2x.png";

export default {
  name: "Tabbar",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    desc: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      record
    };
  },
  methods: {
    hide() {
      this.$emit("input", false);
    }
  }
};
</script>

<style lang="less">
.user-mask {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 101;
  &-image {
    margin-bottom: 10px;
  }
  &-title {
    font-size: 15px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
  }
  &-desc {
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    color: #ffffff;
  }
}
</style>
