登录页添加验证
This commit is contained in:
骆乐
parent
5948868300
commit
90760d8d8b
@ -2,17 +2,6 @@
|
||||
<!-- 登录 -->
|
||||
<div>
|
||||
<div class="login" v-if="projectType == 'common'">
|
||||
<!-- 滑动验证 -->
|
||||
<!-- <slide-verify :l="42"
|
||||
:r="10"
|
||||
:w="310"
|
||||
:h="155"
|
||||
slider-text="向右滑动"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
></slide-verify> -->
|
||||
<!-- <div>{{msg}}</div> -->
|
||||
<div class="title flex">
|
||||
<div class="title_l flex2">
|
||||
<img
|
||||
@ -99,7 +88,7 @@
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top: 39px" label="" prop="password">
|
||||
<el-form-item style="margin-top: 25px" label="" prop="password">
|
||||
<el-input
|
||||
v-model="form.password"
|
||||
style="height: 53px; font-size: 16px"
|
||||
@ -137,7 +126,7 @@
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
style="margin-top: 39px"
|
||||
style="margin-top: 25px"
|
||||
label=""
|
||||
prop="verificationCode"
|
||||
>
|
||||
@ -161,9 +150,19 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin-top: 40px">
|
||||
<!-- :disabled="pass" -->
|
||||
<el-button type="primary" class="logo_btn" @click="loginFn"
|
||||
<div style="margin-top: 25px">
|
||||
<!-- <el-button type="success" plain class="logo_btn" :disabled="verificateBtn" @click="verificateFn"
|
||||
>{{ verificateBtn==false?'立即点击验证':'验证成功'}}
|
||||
</el-button> -->
|
||||
<el-button type="success" v-if="verificateBtn==false" plain class="logo_btn" :disabled="verificateBtn" @click="verificateFn"
|
||||
><div class="point"></div> 立即点击验证
|
||||
</el-button>
|
||||
<el-button type="success" v-else plain class="logo_btn" :disabled="verificateBtn"
|
||||
><i class="el-icon-success"></i> 验证成功
|
||||
</el-button>
|
||||
</div>
|
||||
<div style="margin-top: 25px">
|
||||
<el-button type="primary" :disabled="pass" class="logo_btn" @click="loginFn"
|
||||
>{{ $t("message.login.login") }}
|
||||
</el-button>
|
||||
</div>
|
||||
@ -203,6 +202,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滑动验证 -->
|
||||
<div class="mask" v-if="showVerify" @click.self="showVerify = false">
|
||||
<div class="slideContainer">
|
||||
<slide-verify
|
||||
:l="42"
|
||||
:r="10"
|
||||
:w="330"
|
||||
:h="175"
|
||||
slider-text="向右滑动滑块填充拼图"
|
||||
ref="slideverify"
|
||||
@success="onSuccess"
|
||||
@fail="onFail"
|
||||
@refresh="onRefresh"
|
||||
></slide-verify>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zjsjLogin" v-if="projectType == 'zjsj'">
|
||||
@ -220,7 +235,6 @@
|
||||
@loginFn="loginFn"
|
||||
></LoginInfo>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -245,6 +259,8 @@ export default {
|
||||
return {
|
||||
msg: '',
|
||||
show: false,
|
||||
showVerify:false,
|
||||
verificateBtn:false,//验证按钮
|
||||
pass:true,
|
||||
input: "",
|
||||
radio: "",
|
||||
@ -316,6 +332,7 @@ export default {
|
||||
this.projectType = PROJECT_TYPE;
|
||||
},
|
||||
mounted() {
|
||||
this.$bus.$on('resetSlideVerify',this.onReset)
|
||||
delete this.$http.defaults.headers.common["Authorization"];
|
||||
if (window.location.href.indexOf("type=lgzbdp") != -1) {
|
||||
window.localStorage.setItem("isIframe", "1");
|
||||
@ -350,12 +367,19 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSuccess(){
|
||||
this.msg = 'login success'
|
||||
this.pass = false
|
||||
onReset() {
|
||||
//重置图片验证组件
|
||||
this.$refs.slideverify.reset();
|
||||
},
|
||||
onSuccess(){
|
||||
setTimeout(()=>{
|
||||
this.showVerify = false
|
||||
this.verificateBtn = true
|
||||
this.pass = false
|
||||
},500)
|
||||
},
|
||||
onFail(){
|
||||
this.msg = ''
|
||||
this.msg = '验证失败'
|
||||
},
|
||||
onRefresh(){
|
||||
this.msg = ''
|
||||
@ -393,6 +417,11 @@ export default {
|
||||
goSignIn() {
|
||||
this.$router.push({ path: "/sign" });
|
||||
},
|
||||
// 验证
|
||||
verificateFn(){
|
||||
this.showVerify = true,
|
||||
this.$bus.$emit('resetSlideVerify')
|
||||
},
|
||||
loginFn() {
|
||||
// 1系统管理员，2企业管理员账号，3企业区账号，4企业市账号，5项目账号 6项目子账号 7项目部账号
|
||||
if (this.loginType == 1) {
|
||||
@ -644,10 +673,31 @@ export default {
|
||||
// background-image: url("../../assets/images/login_bg.png");
|
||||
flex-direction: row-reverse;
|
||||
position: relative;
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.mask .slideContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 55%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 380px;
|
||||
height: 250px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
.login_info {
|
||||
width: 444px;
|
||||
height: 434px;
|
||||
height: 445px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 31px 0 rgba(13, 28, 91, 0.28);
|
||||
border-radius: 5px;
|
||||
@ -685,7 +735,7 @@ export default {
|
||||
}
|
||||
|
||||
.info_content {
|
||||
margin-top: 35px;
|
||||
margin-top: 25px;
|
||||
|
||||
img {
|
||||
width: 16.8px;
|
||||
@ -698,6 +748,23 @@ export default {
|
||||
width: 100%;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
// .point::after{
|
||||
// -webkit-animation-delay: .4s;
|
||||
// animation-delay: .4s;
|
||||
// }
|
||||
|
||||
// .point::before{
|
||||
// content: "";
|
||||
// display: block;
|
||||
// width: 20px;
|
||||
// height: 20px;
|
||||
// background: #67c23a;
|
||||
// position: absolute;
|
||||
// left: 30%;
|
||||
// // -webkit-animation: shield-breathing 1.4s ease infinite;
|
||||
// // animation: shield-breathing 1.4s ease infinite;
|
||||
// border-radius: 50%;
|
||||
// }
|
||||
}
|
||||
|
||||
.info_bottom {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user