<template>
  <section class="first-enter-wrap" @touchmove.prevent @click.prevent>
    <div class="first-enter-container">
      <div class="bg-content">
        <p class="title">恭喜您</p>
        <p class="awards">参与活动奖励您<span>{{beanNum}}</span>勤奋分</p>
        <p class="tips">奖励发放可能会有延迟</p>
        <div class="know-btn" @click="cancel">我知道了</div>
      </div>
      <img
        class="cancel"
        src="~/assets/icon-dialog-cancel.png"
        @click="cancel"
      >
    </div>
  </section>
</template>

<script>
  export default {
    name: "index",
    props: {
      beanNum: {
        type: Object,
        default() {
          return 0
        }
      }
    },
    methods: {
      cancel() {
        this.$emit('handlerCancel',false)
      }
    }
  }
</script>

<style scoped lang="less">
.first-enter-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background:rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  .first-enter-container {
    .bg-content {
      width: 250px;
      height: 275px;
      background: url("../../assets/first-enter/first-enter-bg.png") no-repeat;
      background-size: cover;
      display: flex;
      flex-flow: column;
      .know-btn {
        width: 200px;
        height: 44px;
        background: linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
        border-radius: 25.5px;
        text-align: center;
        line-height: 44px;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin: auto auto 30px auto;

      }
      p {
        text-align: center;
      }
      .title {
        color: #FD5A2F;
        font-size: 18px;
        font-weight: 700;
        line-height: 18px;
        margin: 127.5px auto 8px auto;
      }
      .awards {
        color: #666666;
        font-size: 14px;
        line-height: 19px;
        span {
          color: #FD5A2F;
        }
      }
      .tips {
        color: #ACACAC;
        font-size: 12px;
        line-height: 19px;
      }
    }
    .cancel {
      display: block;
      width: 30px;
      height: 30px;
      margin: 20px auto 0 auto;
    }
  }
}
</style>