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