66 lines
1.3 KiB
Vue
66 lines
1.3 KiB
Vue
<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>
|