优化后台UI

完善表单上传组件
This commit is contained in:
2020-04-08 21:07:23 +08:00
parent f8c58b15cd
commit f42b62738d
18 changed files with 389 additions and 247 deletions

View File

@@ -1,23 +1,16 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<META content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>欢迎您登录SentCMS管理平台</title>
<link rel="stylesheet" type="text/css" href="__static__/plugins/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="__static__/common/css/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="__static__/common/css/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="__static__/plugins/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__css__/login.css"/>
<script type="text/javascript" src="__static__/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="__static__/plugins/layui/layui.all.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<meta charset="UTF-8">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>SentCMS网站管理系统后台</title>
<link rel="stylesheet" type="text/css" href="__css__/login.css?time={:time()}">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="__static__/common/js/html5shiv.min.js"></script>
<script src="__static__/common/js/ie8polyfill.min.js"></script>
<script src="__static__/common/js/html5shiv.js"></script>
<script src="__static__/common/js/respond.min.js"></script>
<![endif]-->
</head>
<body id="login-page-full">
@@ -45,7 +38,7 @@
<!-- 页面表单主体 开始 -->
<div class="container">
<form onsubmit="return false;" method="post" class="content layui-form animated fadeInDown">
<form method="post" class="content animated fadeInDown">
<div class="people">
<div class="tou"></div>
<div id="left-hander" class="initial_left_hand transition"></div>
@@ -80,53 +73,11 @@
<!-- 底部版本信息 结束 -->
</div>
<script>
$(function () {
$('[name="password"]').on('focus', function () {
$('#left-hander').removeClass('initial_left_hand').addClass('left_hand');
$('#right-hander').removeClass('initial_right_hand').addClass('right_hand')
}).on('blur', function () {
$('#left-hander').addClass('initial_left_hand').removeClass('left_hand');
$('#right-hander').addClass('initial_right_hand').removeClass('right_hand')
});
//表单提交
$(document).ajaxStart(function(){
$("button:submit").addClass("log-in").attr("disabled", true);
}).ajaxStop(function(){
$("button:submit").removeClass("log-in").attr("disabled", false);
});
$("form").submit(function(){
var self = $(this);
$.post(self.attr("action"), self.serialize(), success, "json");
return false;
function success(data){
if(data.code){
layer.msg(data.msg, {time:3000, end:function(){
window.location.href = data.url;
}});
} else {
layer.msg(data.msg, {time:3000, end:function(){
//刷新验证码
$(".reloadverify").click();
}});
}
}
});
//初始化选中用户名输入框
$("#itemBox").find("input[name=username]").focus();
//刷新验证码
var verifyimg = $(".verifyimg").attr("src");
$(".reloadverify").click(function(){
if( verifyimg.indexOf('?')>0){
$(".verifyimg").attr("src", verifyimg+'&random='+Math.random());
}else{
$(".verifyimg").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
}
});
});
<script type="text/javascript">
var require = {
config: {"site": {$config|json_encode|raw}, 'module': 'admin', 'jsname': "{$require['jsname']|default=''}", 'actionname': "{$require['actionname']|default=''}", }
}
</script>
<script src="__plugins__/require/require.js" data-main="__js__/login.js"></script>
</body>
</html>