You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.8 KiB
113 lines
2.8 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-19 11:53:35
|
|
* @LastEditTime: 2021-10-20 15:47:32
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/views/Login/index.vue
|
|
-->
|
|
<template>
|
|
<div class="login-outter">
|
|
<video class="f" playsinline="" autoplay muted loop="">
|
|
<source src="../../assets/images/login/4.mp4" type="video/mp4">
|
|
</video>
|
|
<div class="login-inner">
|
|
<div class="login-div">
|
|
<loginForm @forgetPassword="handlerForget" @register="showRegister" v-if="dateType===1"></loginForm>
|
|
<forgetPWD v-if="dateType===2" @reLogin="handlerRelogin" @nextStep="handlerNext"></forgetPWD>
|
|
<resetPassword v-if="dateType===3" @reLogin="handlerRelogin" :forgetForm="forgetForm"></resetPassword>
|
|
<register v-if="dateType === 4" @success="regSuc"></register>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import loginForm from "./loginForm";
|
|
import forgetPWD from "./forgetPWD";
|
|
import resetPassword from "./resetPassword";
|
|
import register from "./register/register.vue";
|
|
export default {
|
|
name: "Login",
|
|
components: {
|
|
loginForm,
|
|
forgetPWD,
|
|
resetPassword,
|
|
register
|
|
},
|
|
data() {
|
|
return {
|
|
forgetForm: {},
|
|
dateType: 1,
|
|
loginStyle: {
|
|
top: '50%',
|
|
height: '430px'
|
|
}
|
|
};
|
|
},
|
|
methods: {
|
|
handlerForget() {
|
|
this.dateType = 2;
|
|
},
|
|
handlerRelogin() {
|
|
this.dateType = 1;
|
|
},
|
|
handlerNext(obj) {
|
|
this.dateType = 3;
|
|
this.forgetForm = {...obj}
|
|
},
|
|
// 注册
|
|
showRegister(val) {
|
|
this.loginStyle = {
|
|
height: '650px',
|
|
}
|
|
this.dateType = val
|
|
},
|
|
// 注册成功
|
|
regSuc() {
|
|
this.loginStyle = {
|
|
height: '430px'
|
|
}
|
|
this.dateType = 1;
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.login-outter {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.f {
|
|
position: absolute;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
-webkit-transition: 1s opacity;
|
|
transition: 1s opacity;
|
|
}
|
|
.login-inner {
|
|
// position: absolute;
|
|
width: 100%;
|
|
// height: 100%;
|
|
// top: 0px;
|
|
// left: 0px;
|
|
// background-color: transparent;
|
|
.login-div {
|
|
position: absolute;
|
|
width: 580px;
|
|
// height: 600px;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-image: url("../../assets/images/login/img_dldt.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style>
|