<template>
    <div class="editPhoneStep">
        <el-row>
            <div class="content_title">
                <span>修改成功</span>
            </div>
        </el-row>
        <el-row>
            <div class="step">
                <el-steps :active="active" align-center>
                    <el-step description="验证当前手机号"></el-step>
                    <el-step description="绑定新手机号"></el-step>
                    <el-step description="完成"></el-step>
                </el-steps>
            </div>
        </el-row>
        <el-row class="img">
            <img src="../../assets/img_success.png" />
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'editPhoneStep3',
    data() {
        return {
            active: 2
        };
    }
};
</script>
<style lang="less">
.editPhoneStep {
    height: 520px;
}
.content_title {
    height: 60px;
    line-height: 60px;
    box-sizing: border-box;
    padding-bottom: 20px;
    border-bottom: #f2f3f5 1px solid;
    > span {
        font-size: 16px;
        color: #000000;
        line-height: 30px;
        font-weight: 700;
    }
}
.step {
    width: 500px;
    margin: 50px auto 0;
    .el-step__icon.is-text {
        border-width: 0px;
        background-color: #c8c9cc;
        color: #fff;
        &:nth-child(0) {
            background-color: #bf1616;
        }
    }
    .el-step__head.is-wait {
        font-size: 14px;
        font-weight: bold;
        color: #0f264d;
    }
    .el-step__head.is-process {
        color: #fff;
        .el-step__icon.is-text {
            background-color: #bf1616;
        }
    }

    .el-step__head.is-finish {
        color: #bf1616;
        .el-step__icon.is-text {
            background-color: #bf1616;
        }
        .el-step__line {
            background-color: #bf1616;
            border-color: #bf1616;
        }
    }
    .el-step__line {
        height: 1px;
    }

    .el-step__description.is-process {
        color: #bf1616;
    }

    .el-step__main {
        margin-top: 15px;
    }
}
.img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    img {
        width: 240px;
        height: 120px;
    }
}
</style>
