后台框架作业总结
作业总结：这次作业没什么问题，主要是练习了layui，
作业如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后台登录</title>
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<script type="text/javascript" src="/static/layui/layui.js"></script>
<style type="text/css">
body{margin:0px;}
/* .header{width:100%;height:50px;background-color:#01AAED;padding:20px;color:#ffffff;line-height:50px;}
.title{margin-left:20px;}
.userinfo{float:right;margin-right:20px;}*/
.header{width: 100%;height: 50px;line-height: 50px;background: #01AAED;color:#ffffff;}
.title{margin-left: 50px;font-size: 20px;}
.userinfo{float: right;margin-right: 50px;}
.userinfo a{color:#ffffff;text-decoration:none;}
.menu{width:200px;background-color:#333744;position:absolute;}
.layui-collapse{border: none;overflow:hidden;}
.layui-colla-item{border-top: none;}
.layui-colla-title{background: #42485b;color: #ffffff;}
.layui-colla-content{border-top: none;}
</style>
</head>
<body>
<!-- 头部 -->
<div>
<span>后台管理系统</span>
<span>admin【系统管理员】<a href="javascript:;" onclick="logout()">退出</a></span>
</div>
<!-- menu -->
<div id="menu">
<div lay-accordion>
<div>
<h2>管理员目录</h2>
<div>
<ul class="layui-nav layui-nav-tree">
<li>
<a href="javascript:;">管理员列表</a>
</li>
<li>
<a href="javascript:;">添加管理员</a>
</li>
</ul>
</div>
</div>
<div>
<h2>管理员目录</h2>
<div>
<ul class="layui-nav layui-nav-tree">
<li>
<a href="javascript:;">管理员列表</a>
</li>
<li>
<a href="javascript:;">添加管理员</a>
</li>
</ul>
</div>
</div>
<div>
<h2>管理员目录</h2>
<div>
<ul class="layui-nav layui-nav-tree">
<li>
<a href="javascript:;">管理员列表</a>
</li>
<li>
<a href="javascript:;">添加管理员</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- main -->
<div>
<iframe src="" style="width: 100%;height: 100%;" frameborder="0" scrolling="0" onload="resetMainHeight(this)"></iframe>
</div>
</body>
</html>
<script type="text/javascript">
layui.use(['element','layer'],function(){
var element = layui.element;
$ = layui.jquery;
layer=layui.layer;
resetMenuHeight();
});
// 重新设置页面高度
function resetMenuHeight(){
var height = document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
// 重新设置主操作区高度
function resetMainHeight(obj){
var height = parent.document.documentElement.clientHeight - 53;
$(obj).parent('div').height(height);
}
//退出登录
function logout(){
layer.confirm('确定要删除吗',{icon:2,btn:['确定','取消']},function(){
$.get('{:url(\'account/logout\')}',function(res){
if(res.data>0)
{
layer.msg(res.msg,{'icon':2})
}else{
layer.msg(res.msg,{'icon':1})
setTimeout(function(){
window.location.href="{:url('account/login')}"
},1000);
}
},'json');
});
}
</script>