You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
202 lines
7.5 KiB
202 lines
7.5 KiB
<!DOCTYPE html> |
|
<html lang="zh"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> |
|
<title>登录页面 -Zero后台管理系统模板</title> |
|
<link rel="icon" href="favicon.ico" type="image/ico"> |
|
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板"> |
|
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。"> |
|
<meta name="author" content="yinqi"> |
|
<link href="css/bootstrap.min.css" rel="stylesheet"> |
|
<link href="css/materialdesignicons.min.css" rel="stylesheet"> |
|
<link href="css/style.min.css" rel="stylesheet"> |
|
<style> |
|
.lyear-wrapper { |
|
position: relative; |
|
} |
|
|
|
.lyear-login { |
|
display: flex !important; |
|
min-height: 100vh; |
|
align-items: center !important; |
|
justify-content: center !important; |
|
} |
|
|
|
.lyear-login:after { |
|
content: ''; |
|
min-height: inherit; |
|
font-size: 0; |
|
} |
|
|
|
.login-center { |
|
background-color: rgba(255,255,255,.075); |
|
min-width: 29.25rem; |
|
padding: 2.14286em 3.57143em; |
|
border-radius: 3px; |
|
margin: 2.85714em; |
|
} |
|
|
|
.login-header { |
|
margin-bottom: 1.5rem !important; |
|
} |
|
|
|
.login-center .has-feedback.feedback-left .form-control { |
|
padding-left: 38px; |
|
padding-right: 12px; |
|
background-color: rgba(255,255,255,.075); |
|
border-color: rgba(255,255,255,.075) |
|
} |
|
|
|
.login-center .has-feedback.feedback-left .form-control-feedback { |
|
left: 0; |
|
right: auto; |
|
width: 38px; |
|
height: 38px; |
|
line-height: 38px; |
|
z-index: 4; |
|
color: #dcdcdc; |
|
} |
|
|
|
.login-center .has-feedback.feedback-left.row .form-control-feedback { |
|
left: 15px; |
|
} |
|
|
|
.login-center .form-control::-webkit-input-placeholder { |
|
color: rgba(255, 255, 255, .8); |
|
} |
|
|
|
.login-center .form-control:-moz-placeholder { |
|
color: rgba(255, 255, 255, .8); |
|
} |
|
|
|
.login-center .form-control::-moz-placeholder { |
|
color: rgba(255, 255, 255, .8); |
|
} |
|
|
|
.login-center .form-control:-ms-input-placeholder { |
|
color: rgba(255, 255, 255, .8); |
|
} |
|
|
|
.login-center .custom-control-label::before { |
|
background: rgba(0, 0, 0, 0.3); |
|
border-color: rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.login-center .lyear-checkbox span::before { |
|
border-color: rgba(255,255,255,.075) |
|
} |
|
.red { |
|
color: #fcc525; |
|
padding:3px 0; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
<div id="loginbox" class="row lyear-wrapper" style="background-image: url(images/login-bg-3.jpg); background-size: cover;"> |
|
<div class="lyear-login"> |
|
<div class="login-center"> |
|
<div class="login-header text-center"> |
|
<a href="index.html"> <img alt="light year admin" src="images/logo-sidebar.png"> </a> |
|
</div> |
|
<form @submit.prevent="login"> |
|
<div class=" red">{{message}}</div> |
|
<div class="form-group has-feedback feedback-left"> |
|
<input type="text" placeholder="请输入您的用户名" class="form-control" v-model="userName" required> |
|
<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span> |
|
</div> |
|
<div class="form-group has-feedback feedback-left"> |
|
<input type="password" placeholder="请输入密码" class="form-control" v-model="password" required> |
|
<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span> |
|
</div> |
|
<div class="form-group has-feedback feedback-left row" style="min-width:300px"> |
|
<div class="col-xs-7"> |
|
<!--<input type="text" v-model="verifyCode" class="form-control" placeholder="验证码" required> |
|
<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>--> |
|
</div> |
|
<div class="col-xs-5"> |
|
<!--<img :src="verifyCodeSrc.Src" @click="refreshVerifyCode" class="pull-right" style="cursor: pointer;" title="点击刷新" alt="captcha">--> |
|
</div> |
|
</div> |
|
<div class="form-group"> |
|
<button @click="login" class="btn btn-block btn-primary" type="button">立即登录</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
</div> |
|
<script src="js/jquery.min.js"></script> |
|
<script src="js/vue.js"></script> |
|
<script src="js/axios.min.js"></script> |
|
<script src="js/tools.js"></script> |
|
<script src="js/crypto/core.js"></script> |
|
<script src="js/crypto/md5.js"></script> |
|
<script> |
|
var vueObj = new Vue({ |
|
el: '#loginbox', |
|
data: { |
|
userName: '', |
|
password: '', |
|
verifyCode: '', |
|
verifyCodeSrc: {}, |
|
rememberMe: false, |
|
message: "初始账号admin密码为123456" |
|
}, |
|
mounted() { |
|
this.refreshVerifyCode(); |
|
}, |
|
methods: { |
|
refreshVerifyCode: function () { |
|
axios.get('/Public/InitApi_VerifyCode') |
|
.then(response => { |
|
this.verifyCodeSrc = response.data; |
|
}) |
|
.catch(error => { |
|
console.error(error); |
|
}); |
|
}, |
|
login: function () { |
|
var th = this; |
|
if (!this.userName || !this.password) { |
|
this.message = "用户名或者密码不能为空"; |
|
} |
|
//else if (this.verifyCodeSrc.Code != CryptoJS.MD5(this.verifyCode.toLowerCase()).toString()) |
|
//{ |
|
// this.message = "验证码错误"; |
|
//} |
|
else { |
|
axios.post("/api/rezero/token", { userName: this.userName, password: CryptoJS.MD5(this.password + "").toString() }) |
|
.then(response => { |
|
this.error = null; |
|
this.result = response.data; |
|
if (response.data.message) { |
|
th.message = response.data.message; |
|
} else { |
|
localStorage["@@authorizationLocalStorageName"] = response.data; |
|
setTimeout(function () { |
|
window.location.href = "/rezero"; |
|
}, 50); |
|
} |
|
}) |
|
.catch(error => { |
|
this.error = error.message; |
|
this.data = null; |
|
}); |
|
} |
|
}, |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|