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.
203 lines
7.5 KiB
203 lines
7.5 KiB
6 months ago
|
<!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>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|