apeblog/app/admin/view/login/login.html

120 lines
5.2 KiB
HTML

<!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>登录页面 - {:system_config('title')}后台管理系统</title>
<link rel="icon" href="{:system_config('favicon')}" type="image/ico">
<meta name="keywords" content="{:system_config('keywords')}">
<meta name="description" content="{:system_config('description')}">
<meta name="author" content="{:system_config('author')}">
<link href="/static/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/admin/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/static/admin/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;
}
.login-center {
background: #fff;
min-width: 29.25rem;
padding: 2.14286em 3.57143em;
border-radius: 5px;
margin: 2.85714em;
}
.login-header {
margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
padding-left: 38px;
padding-right: 12px;
}
.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;
}
</style>
</head>
<body style="background: url('/static/admin/img/back.jpg')">
<div class="row lyear-wrapper">
<div class="lyear-login">
<div class="login-center">
<div class="login-header">
<div class="row" style="line-height: 36px;">
<div class="col-xs-8 text-left">
<a href="/index" style="font-size: 20px;color: #1c1e2f;">{:system_config('title')}后台管理系统</a>
</div>
</div>
</div>
<form action="#" method="post" style="height: 212px;width: 100%;" id="loginFrm">
<div class="form-group has-feedback feedback-left has-username" style="margin-bottom: 20px;">
<input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username"/>
<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback feedback-left has-password" style="margin-bottom: 20px;">
<input type="password" placeholder="请输入密码" class="form-control" id="password" name="password"/>
<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback feedback-left row" style="margin-bottom: 20px;">
<div class="col-xs-7 has-captchas">
<input type="text" name="captcha" id="captchas" class="form-control" placeholder="验证码">
<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-xs-5">
<img src="/admin/login/captcha" class="pull-right" id="captcha"
style="cursor: pointer;width: 120px;height: 38px;"
onclick="this.src='/admin/login/captcha?d='+Math.random();" title="点击刷新" alt="captcha">
</div>
</div>
<div class="form-group" style="margin-bottom: 20px;">
<button class="btn btn-block btn-primary" type="button" onclick="btnLogin()">立即登录</button>
</div>
</form>
<hr>
<footer class="col-sm-12 text-center">
<p class="m-b-0">{:system_config('copyright')}</p>
</footer>
</div>
</div>
</div>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/admin/js/layer/layer.js"></script>
<script>
// 账号登录
function btnLogin() {
if ($("#username").val() == "") {$(".has-username").addClass("has-error");return false;}
if ($("#password").val() == "") {$(".has-password").addClass("has-error");return false;}
if ($("#captchas").val() == "") {$(".has-captchas").addClass("has-error");return false;}
$.post(url="/admin/login/verify",$("#loginFrm").serialize(),function (res) {
if (res.status == 200) window.location = "/admin/index/index";
else layer.alert(res.msg, {icon:5})
return true;
});
$("#captcha").attr("src",'/admin/login/captcha?d='+Math.random());
return false;
}
</script>
</body>
</html>