优化后台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>

View File

@@ -50,13 +50,13 @@
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="#">网站首页</a>
<a href="{:url('front.Index/index')}">网站首页</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">修改密码</a>
<a href="{:url('/admin/user/editpwd')}">修改密码</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">修改资料</a>
<a href="{:url('/admin/user/edit')}">修改资料</a>
</div>
</div>
<!-- /.row -->
@@ -64,10 +64,10 @@
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">更新缓存</a>
<a href="{:url('/admin/index/clear')}" class="btn btn-default btn-flat">更新缓存</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">退出</a>
<a href="{:url('/admin/index/logout')}" class="btn btn-default btn-flat">退出</a>
</div>
</li>
</ul>

View File

@@ -24,8 +24,8 @@
<input type="hidden" name="{$field['name']}" value="{$info[$field['name']]|default=''}"/>
{else/}
<div class="form-group">
<label class="col-lg-2 control-label">{$field['title']|htmlspecialchars}</label>
<div class="col-lg-10 col-sm-10">
<label class="col-sm-2 control-label">{$field['title']|htmlspecialchars}</label>
<div class="col-sm-10">
{:form($field, $info)}
<div class="help-block">{$field['help']|default=''}</div>
</div>
@@ -42,8 +42,8 @@
<input type="hidden" name="{$field['name']}" value="{$info[$field['name']]|default=''}"/>
{else/}
<div class="form-group">
<label class="col-lg-2 control-label">{$field['title']|htmlspecialchars}</label>
<div class="col-lg-10 col-sm-10">
<label class="col-sm-2 control-label">{$field['title']|htmlspecialchars}</label>
<div class="col-sm-10">
{:form($field, $info)}
<div class="help-block">{$field['help']|default=''}</div>
</div>
@@ -52,7 +52,7 @@
{/volist}
{/if}
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="col-sm-offset-2 col-sm-10">
{if isset($info['id'])}<input type="hidden" name="id" value="{$info['id']|default=''}">{/if}
<button class="btn btn-success submit-btn ajax-post" type="submit" target-form="form-horizontal">确 定</button>
<button class="btn btn-danger btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>

View File

@@ -1,42 +1,41 @@
{extend name="admin/public/base"/}
{block name="body"}
<div class="main-box no-header clearfix">
<!-- 标题栏 -->
<div class="box box-primary">
<div class="box-header with-border">
<div class="pull-left">
<h2>修改昵称</h2>
</div>
<h3 class="box-title">{$meta_title}</h3>
<div class="pull-right">
</div>
<div class="box-header with-border">
</div>
<div class="box-body">
<!-- 修改密码表单 -->
<form method="post" class="form-horizontal">
<form method="post" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-2 control-label">原密码</label>
<div class="col-lg-6 col-sm-10">
<input type="password" name="oldpassword" class="form-control " autocomplete="off" />
<label class="col-sm-2 control-label">原密码:</label>
<div class="col-sm-10">
<input type="password" name="oldpassword" class="form-control " data-rule="required" autocomplete="off" />
<div class="help-block"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">新密码</label>
<div class="col-lg-6 col-sm-10">
<input type="password" name="password" class="form-control " autocomplete="off" />
<label class="col-sm-2 control-label">新密码:</label>
<div class="col-sm-10">
<input type="password" name="password" class="form-control " data-rule="required" autocomplete="off" />
<div class="help-block"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">确认密码</label>
<div class="col-lg-6 col-sm-10">
<input type="password" name="repassword" class="form-control " autocomplete="off" />
<label class="col-sm-2 control-label">确认密码:</label>
<div class="col-sm-10">
<input type="password" name="repassword" class="form-control " data-rule="required" autocomplete="off" />
<div class="help-block"></div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="col-sm-offset-2 col-sm-10">
<input type="hidden" name="uid" value="{:session('userInfo.uid')}">
<button type="submit" class="btn btn-primary submit-btn ajax-post" target-form="form-horizontal"> </button>
<button class="btn btn-default btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
<button type="submit" class="btn btn-success submit-btn ajax-post" target-form="form">确认提交</button>
<button class="btn btn-danger btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
</div>
</div>
</form>