<template>
	<div class="bheader">
		<div class="banner"></div>
		<div class="bcontent">
			<div class="tablist">
				<el-steps :active="active" finish-status="success" align-center :space="310">
				  <el-step title="填写申请信息"></el-step>
				  <el-step title="审核中"></el-step>
				  <el-step title="审核通过"></el-step>
				</el-steps>
			</div>
			<div class="apply-form">
				<div class="title-line">
					<h2>经纪商申请</h2>
				</div>
				<div class="apply-form-box">
          <img src="../../../static/img/success.png">
          <h2>恭喜您，已经成功申请成为经纪商！</h2>
          <p>您可以用现在的账号和密码登陆后台！如有疑问，可联系我们！</p>
          <router-link to='/brokers'>
            <button type="submit">登陆后台</button>
          </router-link>
				</div>

				
			</div>
		</div>
	</div>
</template>

<script>
	export default {
    data() {
      return {
        active: 3,
      }; 
    },

    methods: {
      next() {
        if (this.active++ > 2) this.active = 0;
      },
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

<style scoped>
.bcontent{
	height: 668px;
}
.bheader{
	position: relative;
	background: #f5f8ff;
	.banner{
		height: 400px;
		width: 100%;
		background: #ccc;
		margin-top: 75px;
		background: url('../../../src/assets/img/nbanner.png') no-repeat center center;
		margin-bottom: 10px;
	}

	.tablist{
		width: 1200px;
   	background: #fff;
   	margin: 0 auto;
   	margin-bottom: 10px;
   	height: 110px;
   	padding-top: 20px;
   	padding-left: 140px;
	}
	.tip{
		margin-top: 22px;
		padding-left: 28px;
    color: #3884d3;
    font-size: 14px;
	}
	.apply-form{
		background: #fff;
   	width: 1200px;
   	margin: 0 auto 20px;
   	.title-line{
   		border-bottom: 1px solid #e5e5e5;
   	  margin-bottom: 50px;
    	height: 80px;
    	h2{
    		line-height: 80px;
    		font-size: 24px;
   		  font-weight: 700;
    	}
   	}
   	.apply-form-box{
   		height: 325px;
      width: 400px;
      margin: 80px auto 0;
      text-align: center;
   		h2{
        margin-top: 40px;
        font-weight: bold;
        font-size: 25px;
        line-height: 28px;
        color: #333333;
      }
      p{
        margin-top: 38px;
        font-size: 14px;
        line-height: 28px;
        color: #999999;
      }
      button{
        margin-top: 32px;
        width: 140px;
        height: 40px;
        background-color: #ffffff;
        border-radius: 20px;
        border: solid 1px #e5e5e5;
        font-size: 18px;
        font-weight: bold;
        line-height: 28px;
        color: #1a6fa6;
      }
   				
   	}
	}
}
</style>

<style>
	.bheader{
		.el-step__icon{
			border:2px solid #bfcbd9;
		}
		.el-step__icon-inner{
			color: #bfcbd9;
		}
		.is-process .el-step__icon{
			background: #bfcbd9;
		}
		.is-process .el-step__icon-inner{
			color:#fff;
		}
		.is-success .el-step__icon{
			background: #20a0ff;
			border: none;
		}
		.is-success .el-step__icon-inner{
			color: #fff;
		}
		.is-success .el-step__line{
			border-color: #20a0ff;
		}
		.el-step__main .is-success{
			color: #20a0ff;
		}
		.el-form-item{
			margin-bottom: 22px;
			width: 530px;
		}
		.el-form-item__label{

		}
		.el-form-item__content{
			width: 342px;
			float: left;
			margin-left: 0 !important;
		}
		.el-input__inner{
			height: 36px;
		}
		.el-select{
			display: inline-block;
    	position: relative;
    	.el-input{
    		display: block;
    		position: relative;
    		font-size: 14px;
    	}
		}
		.el-form-item__label{
			width: 138px !important;
			text-align: right;
   		vertical-align: middle;
   		float: left;
   		font-size: 14px;
   		color: #48576a;
   		line-height: 1;
   		padding: 11px 12px 11px 0;
   		box-sizing: border-box;
		}
		
  	.input-with-select .el-input-group__prepend {
   	 	background-color: #fff;
  	}
	}
</style>