<template>
      
 <van-overlay class-name="affirm-box" :show="affirmPopShow" @click="affirmPopShow = false">
  <div class="affiem-inner" @click.stop>
        <div class="affiem-text">{{mobile}}</div>
        <div class="affiem-hint">请再次确定号码填写无误</div>
        <div class="affiem-word">
            <div class="affiem-balck">重要提示：</div>
            <p>① 充值成功后 无法退换；</p>
            <p>② 切勿写错手机号，如充错，责任自行承担；</p>
            <p>③ 点击【确认提交】后，权益领取手机号会无法修改，请
确认无误后再点击确认。</p>
        </div>
        <div class="flex">
            <button class="affirm-cancel-btn m-r-37" @click="affirmPopShow = false">返回修改</button>
            <button class="affiem-btn" @click="affirmSubmitClick">确认提交</button>
        </div>
      </div>
</van-overlay>
</template>

<script>
import Vue from "vue";
import { Overlay } from "vant";

Vue.use(Overlay);

export default {
 props: ['mobile'],
 data(){
     return{
         affirmPopShow:false
     }
 },
 methods:{
     affirmSubmitClick(){
         this.affirmPopShow =false
         this.$emit('affirmSubmitClick')
     }
 }
}
</script>

<style lang="scss" scoped="scoped">
.affirm-box{
 z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}
.affiem-inner{
        background-color: #fff;
        border-radius: .2rem;
       width: 6rem;
       min-height:2rem ;
       padding:.4rem .2rem;
    }
    .affiem-text{
        margin-top: .09rem;
        font-size: .3rem;
        text-align: center;
        line-height: .54rem;
        color: #262626;
    }
    .affiem-hint{
        color: #f2270c;
        font-weight: 400;
         font-size: .26rem;
        text-align: center;
        line-height: .54rem;
    }
    .flex{
        display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .22rem;
    }
    .affirm-cancel-btn{
    width: 2rem;
    border-radius: .3rem;
    height: 0.6rem;
    background-color: #fff;
    border:1px solid #f2270c;
    color: #f2270c;
    text-align: center;
    font-size: 0.24rem;
    box-sizing: border-box;
    }
    .affiem-btn{
    width: 2rem;
    border-radius: .3rem;
    height: 0.6rem;
    color: #fff;
    text-align: center;
    font-size: 0.24rem;
    box-sizing: border-box;
    background: url(//img10.360buyimg.com/imgzone/jfs/t1/125769/5/21394/20372/6268eedeEa00c993d/dfd61890bb7e7fa9.png) no-repeat 100%;
    background-size: cover;
    }
    .m-r-37{
        margin-right: 0.37rem;
    }
    .affiem-word{
        color: #8c8c8c;
        font-size: .1rem;
        margin-top: .4rem;
        padding: 0 .2rem;
        line-height: .4rem;
    }
    .affiem-balck{
        color: #262626;
        line-height: .43rem;
    }
</style>