<template>
    <div class="container center-content">
        <div class="title">修改交易密码</div>
        <div class="box">
            <div class="name">
                <div class="name1">修改交易密码</div>
                <div class="name2">修改交易密码后立即生效，下次交易请使用新密码</div>
            </div>
            <div class="border"></div>
            <div class="content">
                <el-steps :space="180" :active="3" align-center>
                    <el-step title="验证当前手机号"></el-step>
                    <el-step title="绑定新手机号"></el-step>
                    <el-step title="修改完成"></el-step>
                </el-steps>
                <div class="fail">
                    <img class="text1" src="../../assets/user/icon-xiugaichengg@3x (1).png" alt="" />
                    <div class="text2">修改成功，下次登录请使用新账号！</div>
                    <div class="botn" @click="all('accountdata')">返回</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import eventBus from '../../eventBus';
export default {
    data() {
        return {
            labelPosition: 'right'
        };
    },
    computed: {},
    methods: {
        // Login() {
        //     eventBus.$emit('login');
        // }
    }
};
</script>

<style lang="less" scoped>
/deep/ .el-steps {
    margin-left: 329px;
}
/deep/ .el-step__title.is-finish {
    color: #fdfb60;
}
/deep/ .el-step__head.is-finish {
    border-color: #fdfb60;
}
/deep/ .el-step__title {
    font-size: 12px !important;
}
/deep/.el-step:nth-child(1) {
    .el-step__icon {
        background: linear-gradient(143deg, @prim 0%, @warn 100%, @warn 100%);
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(2) {
    .el-step__icon {
        background: linear-gradient(143deg, @prim 0%, @warn 100%, @warn 100%);
        color: #ffffff;
        border: 0;
    }
}
/deep/.el-step:nth-child(3) {
    .el-step__icon {
        background: linear-gradient(143deg, @prim 0%, @warn 100%, @warn 100%);
        color: #ffffff;
        border: 0;
    }
}
.container {
    .fail {
        text-align: center;
        .text1 {
            width: 68px;
            height: 68px;
            margin-top: 60px;
        }
        .text2 {
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
            margin: 20px 0 59px;
        }
        .botn {
            width: 130px;
            height: 36px;
            font-size: 13px;
            color: #1a1a1a;
            cursor: pointer;
            line-height: 36px;
            text-align: center;
            background: linear-gradient(133deg, @prim 0%, @warn 100%);
            border-radius: 4px;
            margin: 0 auto;
        }
    }
    /deep/ .el-step__title {
        font-size: 13px;
    }
    .title {
        height: 30px;
        font-size: 30px;
        font-weight: 400;
        color: #ffffff;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        line-height: 30px;
        padding: 60px 0;
    }
    .box {
        height: 539px;
        background: #1c1e26;
    }
    .name {
        .flex();
        padding: 17px 16px;
        .name1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
        }
        .name2 {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            margin-left: 10px;
        }
    }
    .border {
        height: 1px;
        background: #494a4d;
        margin: 0 16px 40px;
    }
}
</style>
