forked from hzzly/xyy-vue
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
805 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,322 @@ | ||
<template> | ||
<div class="login"> | ||
<div class="title"></div> | ||
<div class="coordinates-icon"> | ||
<div class="coordinates topAct"> | ||
<img src="../../assets/images/logo.png" /> | ||
</div> | ||
<div class="circle-1-1 circle-show-2"></div> | ||
<div class="circle-2-2 circle-show-1"></div> | ||
<div class="circle-3-3 circle-show"></div> | ||
</div> | ||
<div class="login-form"> | ||
<form action="#"> | ||
<div class="user-name common-div"> | ||
<span class="eamil-icon common-icon"> | ||
<i class="icon"></i> | ||
</span> | ||
<input type="text" name="username" v-model="username" placeholder="手机号" /> | ||
</div> | ||
<div class="user-pasw common-div"> | ||
<span class="pasw-icon common-icon"> | ||
<i class="icon"></i> | ||
</span> | ||
<input type="password" name="password" v-model="password" placeholder="密码" /> | ||
</div> | ||
<div class="login-btn" @click="_login">登录</div> | ||
</form> | ||
</div> | ||
<div class="forgets"> | ||
<router-link to="">忘记密码?</router-link> | ||
<router-link to="register">新来的?注册</router-link> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
import { mapActions } from 'vuex' | ||
export default { | ||
data() { | ||
return { | ||
username: '', | ||
password: '' | ||
} | ||
}, | ||
methods: { | ||
...mapActions(['login']), | ||
_login () { | ||
if (!this.username || !this.password) { | ||
alert('请填写完整') | ||
return | ||
} | ||
// if (!('/^1[34578]\d{9}$/').test(this.username)) { | ||
// alert('请输入有效手机号') | ||
// return | ||
// } | ||
// if (!('/^\w{6,15}$/').test(this.password)) { | ||
// alert('请设置6-15位密码,可以使用数字、字母及下划线') | ||
// return; | ||
// } | ||
let data = { | ||
username: this.username, | ||
password: this.password | ||
} | ||
this.login(data) | ||
.then(()=>{ | ||
setTimeout(()=>{ | ||
// _.leave(); | ||
this.$router.replace('/home'); | ||
}, 500); | ||
}) | ||
.catch((error)=>{ | ||
this.pwd = ''; | ||
}); | ||
} | ||
} | ||
} | ||
</script> | ||
|
||
<style lang="scss" scoped> | ||
@import '../../common/style/function'; | ||
.login{ | ||
width:100%; | ||
height: 100%; | ||
overflow:hidden; | ||
background-color: #323542; | ||
padding-bottom: px2rem(260px); | ||
.title{ | ||
width:100%; | ||
height:auto; | ||
overflow:hidden; | ||
font-size:18px; | ||
text-align:center; | ||
height:px2rem(200px); | ||
color:#fff; | ||
} | ||
.coordinates-icon{ | ||
width:px2rem(400px); | ||
height:px2rem(250px); | ||
margin:px2rem(50px) auto; | ||
position:relative; | ||
.coordinates{ | ||
width:px2rem(150px); | ||
overflow:hidden; | ||
position:absolute; | ||
z-index:8; | ||
left: 32%; | ||
img{ | ||
width:100%; | ||
height:auto; | ||
} | ||
} | ||
.circle-1-1{ | ||
width:100%; | ||
height:px2rem(150px); | ||
overflow:hidden; | ||
border:1px solid rgba(255,255,255,0.5); | ||
border-radius:100%; | ||
background-color:#3a3d4a; | ||
position:absolute; | ||
bottom:0; | ||
z-index:1; | ||
opacity:0; | ||
} | ||
.circle-2-2{ | ||
width:px2rem(230px); | ||
height:px2rem(80px); | ||
overflow:hidden; | ||
border:1px solid rgba(255,255,255,0.4); | ||
border-radius:100%; | ||
background-color:#4e515c; | ||
left:75%; | ||
margin-left:px2rem(-217px); | ||
bottom:px2rem(35px); | ||
position:absolute; | ||
z-index:2; | ||
opacity:0; | ||
} | ||
.circle-3-3{ | ||
width:px2rem(130px); | ||
height:px2rem(50px); | ||
overflow:hidden; | ||
border:1px solid rgba(255,255,255,0.3); | ||
border-radius:100%; | ||
background-color:#71747d; | ||
z-index:3; | ||
left:35%; | ||
margin-left:px2rem(-8px); | ||
bottom:px2rem(50px); | ||
position:absolute; | ||
opacity:0; | ||
} | ||
} | ||
.login-form{ | ||
width:px2rem(600px); | ||
height:auto; | ||
margin:0 auto; | ||
.common-div{ | ||
width:100%; | ||
height:px2rem(80px); | ||
overflow:hidden; | ||
border-radius:4px; | ||
margin-bottom: px2rem(50px); | ||
>.common-icon{ | ||
float:left; | ||
width:px2rem(40px); | ||
height:px2rem(40px); | ||
line-height: px2rem(40px); | ||
overflow:hidden; | ||
margin:px2rem(20px); | ||
text-align: center; | ||
img{ | ||
width:100%; | ||
height:auto; | ||
} | ||
} | ||
>input{ | ||
float:left; | ||
line-height: px2rem(80px); | ||
background-color:transparent; | ||
border:none; | ||
outline:none; | ||
font-size:18px; | ||
color:#fff; | ||
} | ||
} | ||
.user-name,.user-pasw{ | ||
background-color:rgba(255,255,255,0.1); | ||
} | ||
.login-btn{ | ||
background-color:#0bd38a; | ||
color:#fff; | ||
font-size:20px; | ||
text-align:center; | ||
height:px2rem(100px); | ||
line-height:px2rem(100px); | ||
margin-bottom: px2rem(50px); | ||
border-radius:4px; | ||
} | ||
} | ||
.forgets{ | ||
width:px2rem(600px); | ||
height:auto; | ||
margin:0 auto; | ||
>a{ | ||
color:#fff; | ||
opacity:0.2; | ||
font-size:16px; | ||
+a{ | ||
float:right; | ||
} | ||
} | ||
} | ||
} | ||
.topAct{ | ||
animation:topAct 3s ease-in-out infinite; | ||
-webkit-animation:topAct 3s ease-in-out infinite; | ||
-moz-animation:topAct 3s ease-in-out infinite; | ||
-o-animation:topAct 3s ease-in-out infinite; | ||
-ms-animation:topAct 3s ease-in-out infinite; | ||
} | ||
@keyframes topAct | ||
{ | ||
0% {top:px2rem(-100px);} | ||
50% {top:px2rem(-30px);} | ||
100%{top:px2rem(-100px);} | ||
} | ||
@-webkit-keyframes topAct | ||
{ | ||
0% {top:px2rem(-100px);} | ||
50% {top:px2rem(-30px);} | ||
100%{top:px2rem(-100px);} | ||
} | ||
@-moz-keyframes topAct | ||
{ | ||
0% {top:px2rem(-100px);} | ||
50% {top:px2rem(-30px);} | ||
100%{top:px2rem(-100px);} | ||
} | ||
.circle-show{ | ||
animation:circleShow 3s ease-in-out infinite 1s; | ||
-webkit-animation:circleShow 3s ease-in-out infinite 1s; | ||
-moz-animation:circleShow 3s ease-in-out infinite 1s; | ||
-ms-animation:circleShow 3s ease-in-out infinite 1s; | ||
-o-animation:circleShow 3s ease-in-out infinite 1s; | ||
} | ||
@keyframes circleShow | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-webkit-keyframes circleShow | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-moz-keyframes circleShow | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
.circle-show-1{ | ||
animation:circleShow1 3s ease-in-out infinite 1.2s; | ||
-webkit-animation:circleShow1 3s ease-in-out infinite 1.2s; | ||
-moz-animation:circleShow1 3s ease-in-out infinite 1.2s; | ||
-ms-animation:circleShow1 3s ease-in-out infinite 1.2s; | ||
-o-animation:circleShow1 3s ease-in-out infinite 1.2s; | ||
} | ||
@keyframes circleShow1 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-webkit-keyframes circleShow1 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-moz-keyframes circleShow1 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
.circle-show-2{ | ||
animation:circleShow2 3s ease-in-out infinite 1.4s; | ||
-webkit-animation:circleShow2 3s ease-in-out infinite 1.4s; | ||
-moz-animation:circleShow2 3s ease-in-out infinite 1.4s; | ||
-ms-animation:circleShow2 3s ease-in-out infinite 1.4s; | ||
-o-animation:circleShow2 3s ease-in-out infinite 1.4s; | ||
} | ||
@keyframes circleShow2 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-webkit-keyframes circleShow2 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
@-moz-keyframes circleShow2 | ||
{ | ||
0% {opacity:0;} | ||
50% {opacity:1;} | ||
100%{opacity:0;} | ||
} | ||
</style> |
Oops, something went wrong.