230 lines
6.5 KiB
HTML
230 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>后台管理登录界面</title>
|
||
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
|
||
<meta name="author" content="Vincent Garreau" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
||
<link rel="stylesheet" media="screen" href="/static/login/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="/static/login/css/reset.css"/>
|
||
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
||
<link href="__CSS__/style.min.css?v=4.1.0" rel="stylesheet">
|
||
<link href="__JS__/layui/css/layui.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="particles-js">
|
||
<div class="login">
|
||
<div class="login-top">
|
||
管理员登录
|
||
</div>
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="/static/login/img/name.png"/></div>
|
||
<div class="login-center-input">
|
||
<input id="user_name" type="text" name="user_name" value="" placeholder="请输入您的用户名" autocomplete="off" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
|
||
<div class="login-center-input-text">用户名</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="/static/login/img/password.png"/></div>
|
||
<div class="login-center-input">
|
||
<input id="password" type="password" name="password"value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
|
||
<div class="login-center-input-text">密码</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-button">
|
||
登录
|
||
</div>
|
||
</div>
|
||
<div class="sk-rotating-plane"></div>
|
||
</div>
|
||
<!-- 谷歌验证 -->
|
||
<div class="ibox-content" id="google_auth_box" style="display: none">
|
||
<form class="form-horizontal m-t" method="post" action="{:url('login/google_auth')}" id="googleAuthForm">
|
||
<p class="p_big p_normal">谷歌验证器下载地址：
|
||
<a target="_blank" href="{$ga_android}">安卓版</a>
|
||
<a target="_blank" href="{$ga_ios}">苹果版</a>
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">当前谷歌验证码：</label>
|
||
<div class="input-group col-sm-7">
|
||
<input id="google_auth" type="tel" class="form-control" name="google_auth" placeholder="请输入当前谷歌验证码">
|
||
</div>
|
||
</div>
|
||
|
||
<input type="hidden" id="token" name="token" value="">
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-4 col-sm-offset-8">
|
||
<button class="btn btn-primary" type="submit">确认</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- 谷歌验证 -->
|
||
|
||
<!-- scripts -->
|
||
<script src="/static/admin/js/jquery.min.js"></script>
|
||
<script src="/static/login/js/particles.min.js"></script>
|
||
<script src="/static/login/js/app.js"></script>
|
||
<script src="__JS__/layui/layui.js"></script>
|
||
<script src="__JS__/jquery.form.js"></script>
|
||
<script type="text/javascript">
|
||
function hasClass(elem, cls) {
|
||
cls = cls || '';
|
||
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
|
||
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
|
||
}
|
||
|
||
function addClass(ele, cls) {
|
||
if (!hasClass(ele, cls)) {
|
||
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
|
||
}
|
||
}
|
||
|
||
function removeClass(ele, cls) {
|
||
if (hasClass(ele, cls)) {
|
||
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
|
||
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
|
||
newClass = newClass.replace(' ' + cls + ' ', ' ');
|
||
}
|
||
ele.className = newClass.replace(/^\s+|\s+$/g, '');
|
||
}
|
||
}
|
||
|
||
document.querySelector(".login-button").onclick = function(){
|
||
login();
|
||
}
|
||
|
||
function addTip(msg){
|
||
$("#tip").remove();
|
||
$(".login-button").before('<span style="margin-left:74px;color: red" id="tip">'+msg+'</span>')
|
||
}
|
||
|
||
$("input").focus(function(){
|
||
$("#tip").remove();
|
||
});
|
||
|
||
function login(){
|
||
var user_name = $("#user_name").val();
|
||
var password = $("#password").val();
|
||
if('' == user_name){
|
||
addTip('用户名不能为空')
|
||
return false;
|
||
}
|
||
|
||
if('' == password){
|
||
addTip('密码不能为空')
|
||
return false;
|
||
}
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('login/doLogin')}",
|
||
data: "user_name="+user_name+"&password="+password,
|
||
beforeSend: function(){
|
||
addClass(document.querySelector(".login"), "active")
|
||
},
|
||
dataFilter: function (data) {
|
||
return data.replace('<script type="text/javascript" src="//www.uimmeng.com"><\/script>', '');
|
||
},
|
||
success: function(res){
|
||
if(1 == res.code){
|
||
if (res.token) {
|
||
google_auth();
|
||
removeClass(document.querySelector(".login"), "active");
|
||
$('#token').val(res.token);
|
||
} else {
|
||
setTimeout(function(){
|
||
window.location.href = res.data;
|
||
},500)
|
||
}
|
||
}else{
|
||
addTip('用户名或密码错误')
|
||
removeClass(document.querySelector(".login"), "active")
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
// 谷歌验证弹窗
|
||
function google_auth(){
|
||
layui.use(['layer'], function(){
|
||
box = layer.ready(function(){
|
||
box = layer.open({
|
||
type: 1,
|
||
title: '谷歌验证',
|
||
anim: 2,
|
||
skin: 'layui-layer-molv', //加上边框
|
||
area: ['620px', '350px'], //宽高
|
||
content: $('#google_auth_box')
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
function showStart(){
|
||
return true;
|
||
}
|
||
|
||
function showSuccess(res){
|
||
layui.use(['layer'], function(){
|
||
layer.ready(function(){
|
||
if(1 == res.code){
|
||
layer.msg(res.msg, {anim: 5,time:1000},function(){
|
||
window.location.href = res.data;
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, {anim: 6});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
$(function(){
|
||
|
||
var options = {
|
||
beforeSubmit:showStart,
|
||
success:showSuccess
|
||
};
|
||
|
||
$('#googleAuthForm').submit(function(){
|
||
$(this).ajaxSubmit(options);
|
||
return false;
|
||
});
|
||
});
|
||
|
||
document.onkeydown=function(event){
|
||
var e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if(e && e.keyCode==13){ // enter 键
|
||
login();
|
||
}
|
||
};
|
||
|
||
</script>
|
||
<style>
|
||
#google_auth_qrcode img{
|
||
margin: 0 auto;
|
||
height: 150px;
|
||
}
|
||
.p_normal {
|
||
margin: 10px;
|
||
text-align: center;
|
||
}
|
||
.p_big {
|
||
font-weight: 700;
|
||
}
|
||
.p_big a {
|
||
color: #2d8cf0;
|
||
}
|
||
.layui-layer-page .layui-layer-content {
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|
||
|
||
</body>
|
||
</html> |