<template>
  <div class="wechat_approve_page">
    <div class="title">支付认证</div>
    <div class="process">
      <el-steps :active="active" align-center>
        <el-step title="填写申请信息" />
        <el-step title="账户认证" />
        <el-step title="签约" />
        <el-step title="开通成功" />
      </el-steps>
    </div>
    <component
      :is="components[active]"
    />
  </div>
</template>

<script>
import info from './component/info'
import approve from './component/approve'
import sign from './component/sign'
import success from './component/success'
export default {
  components: {
    info,
    approve,
    sign,
    success
  },
  data() {
    return {
      active: 0
    }
  },
  computed: {
    components() {
      return ['info', 'approve', 'sign', 'success']
    }
  }
}
</script>

<style lang='less' scoped>
.wechat_approve_page {
    width: 60%;
    margin: 20px auto;
    border-radius:10px;
    min-height: calc(100% - 20px);
    background-color: #ffffff;
    .title {
        height:70px;
        line-height: 70px;
        text-align: center;
        background:rgba(58,104,242,1);
        border-radius:4px 4px 0px 0px;
        font-size:24px;
        color: #ffffff;
    }
   .process {
    height: 160px;
    background:rgba(238,243,255,.3);
    padding-top: 50px;
}
}
</style>
