<template>
|
<div class="register">
|
<!-- 页头 -->
|
<Header></Header>
|
<div class="registerHeart">
|
<div class="registerForm" v-if="!isResetPassword">
|
<!-- 表头 -->
|
<div class="title">
|
<div class="left">欢迎注册贝思科SAAS平台</div>
|
<div class="right">
|
已有账号？<span class="colorBlue"
|
><router-link to="/login">快速登录</router-link></span
|
>
|
</div>
|
</div>
|
|
<!-- 步骤条 -->
|
<Steps :active="active"></Steps>
|
|
<!-- 两步的表单 -->
|
<BaseInfo v-if="active == 0" @next="next"></BaseInfo>
|
<SelectType v-if="active == 1" :userInfo="userInfo"></SelectType>
|
</div>
|
|
<ResetPassword v-else></ResetPassword>
|
</div>
|
<!-- 页尾 -->
|
<Footer :isBlack="true"></Footer>
|
</div>
|
</template>
|
|
<script>
|
import Header from "@/components/Header";
|
import Steps from "@/views/register/components/Steps";
|
import BaseInfo from "@/views/register/components/BaseInfo";
|
import SelectType from "@/views/register/components/SelectType";
|
import ResetPassword from "@/views/register/components/ResetPassword";
|
import Footer from "@/components/Footer";
|
|
export default {
|
created() {
|
if (this.$route.query.isReset) {
|
this.isResetPassword = true;
|
}
|
},
|
data() {
|
return {
|
userInfo: {},
|
active: 0, //步骤
|
isResetPassword: false,
|
};
|
},
|
components: {
|
Header,
|
BaseInfo,
|
Steps,
|
SelectType,
|
ResetPassword,
|
Footer,
|
},
|
methods: {
|
next(info) {
|
this.userInfo = info;
|
this.active = 1;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.register {
|
position: absolute;
|
height: 100%;
|
width: 100%;
|
min-width: 1280px;
|
min-height: 960px;
|
background: url("/images/register/register.png");
|
background-size: 100% 100%;
|
font-size: 14px;
|
|
.Header ::v-deep {
|
.right .link {
|
color: #3d3d3d;
|
|
&:hover {
|
color: #0065ff;
|
}
|
}
|
}
|
|
.registerHeart {
|
margin: 0 auto;
|
width: 1200px;
|
overflow: hidden;
|
|
.registerForm {
|
position: relative;
|
overflow: hidden;
|
margin-top: 5vh;
|
width: 660px;
|
height: 730px;
|
background: #ffffff;
|
|
.title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin: 0 30px 0 30px;
|
height: 74px;
|
border-bottom: 1px solid #e9ebee;
|
|
.left {
|
font-size: 28px;
|
}
|
|
.right {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
.colorBlue {
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
}
|
|
.Footer {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
}
|
}
|
</style>
|
