hz_crm_web/src/views/login_manage/components/VerificationBox.vue

<template>
    <div class="verification-box-wrap">
        <div class="icon">
            <img :src="verifiesType==='mobile'?mobile_src:email_src" />
        </div>
        <div class="text">{{infoText}}</div>
        <el-button  type="primary" @click="goNext" v-if="!hideBtn" :disabled="countDown">{{countDown?`重发（${countDown}秒）`:btnText}}</el-button>
    </div>
</template>

<script>
export default {
    props:{
        verifiesType:{//安全验证 mobile or email
            type:String,
            default:'mobile'
        },
        infoText:{//手机号或邮箱
            type:String,
            default:'123456'
        },
        hideBtn:{
            type:Boolean,
            default:false
        },
        countDown:{
            type:Number,
            default:0
        },
        btnText:{
            type:String,
            default:'开始验证'
        }
    },
    data() {
        return {
            mobile_src:require('@/assets/img/home/phone_icon.png'),
            email_src:require('@/assets/img/home/email_icon.png'),
        };
    },
    methods: {
        goNext(){
            this.$emit('goNext',this.verifiesType)
        }
    },
};
</script>

<style scoped lang="scss">
.verification-box-wrap{
    display: flex;
    align-items: center;
    margin-bottom: 60px;
    cursor: pointer;
    .icon{
        width:40px;
        height:40px;
        box-sizing: border-box;
        padding:8px;
        border-radius: 50%;
        box-shadow: 0px 2px 12px 0px #0000001A;
        text-align: center;
        img{
            width: 24px;
            height: 24px;
        }
    }
    .text{
        margin-left: 20px;
        font-size: 18px;
    }
    .el-button{
        /* background-color: #3654C1;
        color: #fff; */
        margin-left: auto;
    }
}

</style>