<template>
|
<div class="login" id="login">
|
<a href="javascript:;" class="log-close"><i class="icons close"></i></a>
|
<div class="log-bg">
|
<div class="log-cloud cloud1"></div>
|
<div class="log-cloud cloud2"></div>
|
<div class="log-cloud cloud3"></div>
|
<div class="log-cloud cloud4"></div>
|
|
<div class="log-logo">Welcome!</div>
|
<div class="log-text"></div>
|
</div>
|
<div class="log-email" v-loading="isLoging" >
|
<input type="text" placeholder="用户名" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="密码" :class="'log-input' + (password==''?' log-input-empty':'')" v-model="password">
|
<a href="javascript:;" class="log-btn" @click="login" >登录</a>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import crypto from 'crypto'
|
export default {
|
name: 'Login',
|
data(){
|
return {
|
isLoging: false,
|
username: '',
|
password: ''
|
}
|
},
|
created(){
|
var that = this;
|
document.onkeydown = function(e) {
|
var key = window.event.keyCode;
|
if (key == 13) {
|
that.login();
|
}
|
}
|
},
|
methods:{
|
|
//登录逻辑
|
login(){
|
if(this.username!='' && this.password!=''){
|
this.toLogin();
|
}
|
},
|
|
//登录请求
|
toLogin(){
|
|
//一般要跟后端了解密码的加密规则
|
//这里例子用的哈希算法来自./js/sha1.min.js
|
|
//需要想后端发送的登录参数
|
let loginParam = {
|
username: this.username,
|
password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
|
}
|
var that = this;
|
//设置在登录状态
|
this.isLoging = true;
|
|
this.$axios({
|
method: 'get',
|
url:"/api/user/login",
|
params: loginParam
|
}).then(function (res) {
|
console.log(JSON.stringify(res));
|
if (res.data == "success") {
|
that.$cookies.set("session", {"username": that.username}) ;
|
//登录成功后
|
that.cancelEnterkeyDefaultAction();
|
that.$router.push('/');
|
}else{
|
that.isLoging = false;
|
that.$message({
|
showClose: true,
|
message: '登录失败，用户名或密码错误',
|
type: 'error'
|
});
|
}
|
}).catch(function (error) {
|
that.$message.error(error.response.statusText);
|
that.isLoging = false;
|
});
|
},
|
setCookie: function (cname, cvalue, exdays) {
|
var d = new Date();
|
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
|
var expires = "expires=" + d.toUTCString();
|
console.info(cname + "=" + cvalue + "; " + expires);
|
document.cookie = cname + "=" + cvalue + "; " + expires;
|
console.info(document.cookie);
|
},
|
cancelEnterkeyDefaultAction: function() {
|
document.onkeydown = function(e) {
|
var key = window.event.keyCode;
|
if (key == 13) {
|
return false;
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.login{position: fixed; overflow: hidden;left: 50%; margin-left: -250px; top:50%; margin-top: -350px; width: 500px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
|
-moz-border-radius: 5px;
|
-ms-border-radius: 5px;
|
-o-border-radius: 5px;
|
border-radius: 5px; -webkit-box-shadow: 0px 3px 16px -5px #070707; box-shadow: 0px 3px 16px -5px #070707}
|
.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
|
.log-close:hover .icons{transform: rotate(180deg);}
|
.log-close .icons{opacity: 1; transition: all .3s}
|
.log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
|
.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
|
.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
|
.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
|
.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
|
.log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
|
.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
|
.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
|
.log-logo,.log-text{z-index: 2}
|
.icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
|
.close{height:16px;width:16px;background-position:-13px 0;}
|
.login-email{height:17px;width:29px;background-position:-117px 0;}
|
|
.log-btns{padding: 15px 0; margin: 0 auto;}
|
.log-btn{width:402px; display: block; text-align: left; line-height: 50px;margin:0 auto 15px; height:50px; color:#fff; font-size:13px;-webkit-border-radius: 5px; background-color: #3B5999;
|
-moz-border-radius: 5px;
|
-ms-border-radius: 5px;
|
-o-border-radius: 5px;
|
border-radius: 5px;
|
position: relative;}
|
.log-btn.tw{background-color: #13B4E9}
|
.log-btn.email{background-color: #50E3CE}
|
.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}
|
|
.log-email{text-align: center; margin-top: 20px;}
|
.log-email .log-btn{background-color: #50E3CE;text-align: center;}
|
.log-input-empty{border: 1px solid #f37474 !important;}
|
.isloading{background: #d6d6d6}
|
.log-btn .icons{margin-left: 30px; vertical-align: middle;}
|
.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
|
.log-input{width: 370px;overflow: hidden; padding: 0 15px;font-size: 13px; border: 1px solid #EBEBEB; margin:0 auto 15px; height: 48px; line-height: 48px; -webkit-border-radius: 5px;
|
-moz-border-radius: 5px;
|
-ms-border-radius: 5px;
|
-o-border-radius: 5px;
|
border-radius: 5px;}
|
.log-input.warn{border: 1px solid #f88787}
|
|
@-webkit-keyframes cloud1 {
|
0%{left: 200px}
|
100%{left:-130px;}
|
}
|
@keyframes cloud1{
|
0%{left: 200px}
|
100%{left:-130px;}
|
}
|
|
@-webkit-keyframes cloud2 {
|
0%{left:500px;}
|
100%{left:-90px;}
|
}
|
@keyframes cloud2{
|
0%{left:500px;}
|
100%{left:-90px;}
|
}
|
|
@-webkit-keyframes cloud3 {
|
0%{left:620px;}
|
100%{left:-70px;}
|
}
|
@keyframes cloud3{
|
0%{left:620px;}
|
100%{left:-70px;}
|
}@-webkit-keyframes cloud4 {
|
0%{left:100px;}
|
100%{left:-70px;}
|
}
|
@keyframes cloud4{
|
0%{left:100px;}
|
100%{left:-70px;}
|
}
|
|
</style>
|
