<template>
    <div class="attestResult">
        <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-step description="完成"></el-step>
            </el-steps>
        </div>
        <div class="login_title">
            <span class="title">认证结果</span>
            <span style="color: #C8C9CC;cursor: pointer;" @click="$router.push({ name: 'home' })">返回首页</span>
        </div>
        <div class="content">
            <img src="../../assets/attest_img.png" />
            <h4>提交成功</h4>
            <p>企业申请提交成功，请等待系统审核</p>
            <button @click="$router.go(-1)">返回</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'attestResult',
    data() {
        return {
            active: 2
        };
    }
};
</script>
<style lang="less" scoped>
.attestResult {
    padding-bottom: 70px;
    .step {
        height: 120px;
        background: #6c594e;
        margin-bottom: 30px;
    }
    .login_title {
        margin: auto;
        width: 900px;
        height: 60px;
        line-height: 60px;
        border-left: 2px solid #bf1616;
        background: linear-gradient(90deg, #fbeeee 0%, #fff 100%);
        padding-left: 20px;

        .title {
            color: #bf1616;
            font-weight: 500;
            margin-right: 20px;
            padding-right: 20px;
            border-right: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
    .content {
        padding-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
            width: 240px;
            height: 120px;
        }
        h4 {
            font-size: 18px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 0px;
        }
        p {
            height: 24px;
            font-size: 14px;
            color: #939599;
            line-height: 24px;
        }
        button {
            cursor: pointer;
            margin-top: 20px;
            width: 110px;
            height: 36px;
            background: #bf1616;
            border-radius: 4px;
            font-size: 13px;
            color: #ffffff;
        }
    }
}
</style>

<style lang="less">
.el-input {
    width: 300px;
}
.step {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-steps {
        width: 600px;
    }
    .el-step__icon.is-text {
        border-width: 0px;
        background-color: #b59988;
        color: #dfd3cc;
        &:nth-child(0) {
            background-color: #fff;
        }
    }

    .el-step__head.is-wait {
        font-size: 14px;
        font-weight: bold;
        color: #0f264d;
    }
    .el-step__head.is-process {
        // color: #6c594e;
        .el-step__icon.is-text {
            background-color: #fff;
        }
    }
    .el-step.is-horizontal .el-step__line {
        height: 1px;
        background-color: #85766d;
        border-color: #85766d;
    }

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

    .step .el-step__head.is-process .el-step__icon.is-text {
        background-color: #fff;
        color: #6c594e !important;
    }
    .el-step__description.is-process {
        color: #fff;
    }
    .el-step__description.is-finish {
        color: #fff;
    }

    .el-step__main {
        margin-top: 15px;
    }
}
</style>
