parent
5c10534930
commit
8853369f9f
Binary file not shown.
@ -0,0 +1,87 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-19 11:53:35
|
||||
* @LastEditTime: 2021-10-19 15:53:03
|
||||
* @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" v-if="dateType===1"></loginForm>
|
||||
<forgetPWD v-if="dateType===2" @reLogin="handlerRelogin"></forgetPWD>
|
||||
<resetPassword v-if="dateType===3" @reLogin="handlerRelogin"></resetPassword>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loginForm from "./loginForm";
|
||||
import forgetPWD from "./forgetPWD";
|
||||
import resetPassword from "./resetPassword"
|
||||
export default {
|
||||
name: "Login",
|
||||
components: {
|
||||
loginForm,
|
||||
forgetPWD,
|
||||
resetPassword
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateType: 1,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlerForget() {
|
||||
this.dateType = 2;
|
||||
},
|
||||
handlerRelogin() {
|
||||
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: 560px;
|
||||
height: 560px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -60%);
|
||||
background: rgba(12, 35, 66, 0.7);
|
||||
box-shadow: 0px 1px 40px 0px rgba(42, 112, 206, 0.5);
|
||||
border-radius: 8px;
|
||||
border: 3px solid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-19 14:14:52
|
||||
* @LastEditTime: 2021-10-19 14:47:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/Login/loginForm/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="lgf-outter">
|
||||
<a-form-model layout="horizontal" :model="form" :rules="rules">
|
||||
<a-form-model-item label="用户名" prop="phone">
|
||||
<a-input v-model="form.phone" placeholder="请输入账号" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="密码" prop="pwd">
|
||||
<a-input v-model="form.pwd" :type="pwdType" placeholder="请输入密码">
|
||||
<span slot="suffix" class="iconfont icon-zhengyan-21 login-eye" v-if="pwdType==='password'" @click="changePwdType"></span>
|
||||
<span slot="suffix" class="iconfont icon-in_biyan login-eye" v-else @click="changePwdType"></span>
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="验证码" prop="code">
|
||||
<a-input v-model="form.code" placeholder="请输入验证码">
|
||||
<a-button slot="addonAfter" style="width: 100px" @click="countdown" v-if="showCode">FNMAK</a-button>
|
||||
<a-button slot="addonAfter" style="width: 100px" v-else>{{count}}</a-button>
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
<div class="login-d1">
|
||||
<a-checkbox v-model="remCheck">
|
||||
<span style="color: #3373CC">记住密码</span>
|
||||
</a-checkbox>
|
||||
<span class="stn" style="color: #3373CC" @click="forgetPassword">忘记密码</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "loginForm",
|
||||
data() {
|
||||
const validatePass = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入密码"));
|
||||
} else {
|
||||
let reg=/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,}$/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("密码由大小写字母、数字和特殊字符组成"));
|
||||
} else if(value.length < 8 || value.length > 16) {
|
||||
callback(new Error("密码8~16位"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
const validateAccount = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入账户"));
|
||||
} else {
|
||||
let reg=/^[0-9a-zA-Z]*$/;
|
||||
if (!reg.test(value)) {
|
||||
callback(new Error("用户名是英文字母或英文字母与数字的组合"));
|
||||
} else if(value.length < 8 || value.length > 13) {
|
||||
callback(new Error("账号在8~13位之间"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
}
|
||||
const validateCode = (rule, value, callback) => {
|
||||
if (value === "") {
|
||||
callback(new Error("请输入验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
return {
|
||||
pwdType: "password",
|
||||
remCheck: false,
|
||||
count: 0,
|
||||
showCode: true,
|
||||
timer: null,
|
||||
form: {
|
||||
phone: "",
|
||||
pwd: "",
|
||||
code: "",
|
||||
},
|
||||
rules: {
|
||||
phone: [{ validator: validateAccount, trigger: "change" }],
|
||||
pwd: [{ validator: validatePass, trigger: "change" }],
|
||||
code: [{ validator: validateCode, trigger: "change" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 改变是否可以看密码
|
||||
changePwdType() {
|
||||
this.pwdType = this.pwdType === "password" ? "" : "password";
|
||||
},
|
||||
// 倒计时
|
||||
countdown() {
|
||||
const TIME_COUNT = 60;
|
||||
if (!this.timer) {
|
||||
this.count = TIME_COUNT;
|
||||
this.showCode = false;
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= TIME_COUNT) {
|
||||
this.count--;
|
||||
} else {
|
||||
this.showCode = true;
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
//忘记密码
|
||||
forgetPassword(){
|
||||
this.$emit('forgetPassword')
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.lgf-outter {
|
||||
width: 380px;
|
||||
margin: 0 auto;
|
||||
margin-top: 80px;
|
||||
}
|
||||
.login-eye {
|
||||
font-size: 16px;
|
||||
color: #3373cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.login-d1 {
|
||||
width: 380px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
.stn {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue