摘要:html>
JD homehtml>
*{margin: 0px;padding: 0px;}
.head{color: #fff;background:#2E6DA4;width:100%;height: 50px;}
.head_title{font-size: 20px;line-height: 50px;float:left;margin-left: 20px;}
.head_info{line-height: 50px;float:right;font-size: 14px;margin-right: 20px;}
.head_info a{color:#fff;text-decoration: none;}
.menu{width:200px;height:630px;background:#333744;position: absolute;}
.layui-collapse{border:none;}
.layui-colla-item{border:none;}
.layui-colla-title{background:#42485B;border:0px;color:#fff;}
.layui-colla-content{border-top:none;color: #C4C5C9;padding: 0px;}
.main{position: absolute;left: 200px;right: 0px;}
JD商城--后台管理系统
admin【系统管理员】 退出
管理员管理
- 管理员列表
权限管理
- 菜单管理
- 角色管理
系统设置
- 网站设置
商品分类
- 分类列表
产品管理
- 产品列表
幻灯片管理
- 首页首屏
layui.use(['element', 'layer'], function(){
var element = layui.element;
layer = layui.layer;
$= layui.jquery
resetMenuHeight()
});
function logout(){
layer.confirm('确定要退出么?', {
icon:3,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
html>
Document.header{border-bottom: 2px solid #009688}
.header span{color:#fff;background:#009688;line-height: 32px;margin-left: 30px;padding: 10px;}
.header button{float: right;}
管理员列表
添加
ID用户名真实姓名角色状态添加时间操作
1001temtd表秀峰系统管理员正常2018-11-20 14:03:09编辑
删除
1002ifgu表洁平系统管理员禁用2018-11-20 14:03:09编辑
删除
1003udee表翔月系统管理员正常2018-11-20 14:03:09编辑
删除
1004wxfd表倾城系统管理员正常2018-11-20 14:03:09编辑
删除
1005geit表海系统管理员正常2018-11-20 14:03:09编辑
删除
1006jeuu表明立系统管理员禁用2018-11-20 14:03:09编辑
删除
1007tjugm表冬瑞 系统管理员正常2018-11-20 14:03:09编辑
删除
1008gejq表果儿系统管理员正常2018-11-20 14:03:09编辑
删除
1009jxvi表昆妙系统管理员正常2018-11-20 14:03:09编辑
删除
layui.use(['layer'], function(){
var layer = layui.layer;
});
function del(){
layer.confirm('确定要删除么?', {
icon:3,
btn: ['确定', '取消'] //可以无限个按钮
}, function(index, layero){
//按钮【按钮一】的回调
}, function(index){
//按钮【按钮二】的回调
});
}
总结:经过前面章节学习,初步体会到了layui对页面布局美化操作过程简化和方便了不少。自己感觉layu对代码封装得太局限,没能完全按自已的实际需求,前端工作还得配合原生css样式才能把页面做得更加精美。做后台界面是个不错的选择。
批改老师:天蓬老师批改时间:2019-01-01 09:16:04
老师总结:不是封装的太局限,是你所很多东西写死了, 随着学习的深入, 你会使用的越来越灵活