优化前端页面更加扁平有线条感,优化主页面容器大小占比问题,统一封装前端css,统一页面风格,更加美化

This commit is contained in:
zxm 2018-01-28 00:19:48 +08:00
parent e384143ad9
commit c97d7a1789
11 changed files with 101 additions and 97 deletions

View File

@ -93,7 +93,7 @@
</#if>
</#macro>
<@tree data=menu start="start" end="end"/>
<div class="layui-body" id="container">
<div class="layui-body" <#--style="border:1px solid red;padding-bottom:0;"--> id="container">
<!-- 内容主体区域 -->
<div style="padding: 15px;"><i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop">&#xe63e;</i> 请稍等...</div>
</div>

View File

@ -13,29 +13,14 @@
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
<link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"
charset="utf-8"></script>
<style>
.layui-input {
height: 30px;
width: 120px;
}
.x-nav {
padding: 0 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<br/>
<div class="x-nav">
<div class="lenos-search">
<div class="select">
任务名称:
<div class="layui-inline">
@ -47,7 +32,7 @@
</div>
<button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm" id="refresh" style="float: right;"
<button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
data-type="reload">
<i class="layui-icon">ဂ</i>
</button>
@ -156,7 +141,7 @@
, {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBar"}
]]
, page: true
, height: 'full-105'
, height: 'full-83'
});
var $ = layui.$, active = {

View File

@ -14,29 +14,14 @@
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
<link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"
charset="utf-8"></script>
<style>
.layui-input {
height: 30px;
width: 120px;
}
.x-nav {
padding: 0 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<br/>
<div class="x-nav">
<div class="lenos-search">
<div class="select">
操作用户:
<div class="layui-inline">
@ -48,7 +33,7 @@
</div>
<button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm" id="refresh" style="float: right;"
<button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
data-type="reload">
<i class="layui-icon">ဂ</i>
</button>
@ -131,7 +116,7 @@
]]
, page: true
, height: 'full-105'
, height: 'full-83'
});
var $ = layui.$, active = {

View File

@ -9,19 +9,10 @@
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<link rel="stylesheet" href="${re.contextPath}/plugin/layuitree/layui/css/layui.css">
<link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css"/>
</head>
<style>
.x-nav {
padding: 3px 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
height: 40px;
overflow: hidden;
}
</style>
<body>
<div class="x-nav">
<div class="layui-col-md13">
<div class="layui-btn-group">
<@shiro.hasPermission name="nemu:add">
<button class="layui-btn layui-btn-normal" data-type="add">
@ -29,8 +20,8 @@
</button>
</@shiro.hasPermission>
</div>
<button class="layui-btn layui-btn-sm" id="refresh" style="float: right;" onclick="javascript:location.replace(location.href);">
<i class="layui-icon">ဂ</i>
<button class="layui-btn layui-btn-sm icon-position-no-button" id="refresh" style="float: right;" onclick="javascript:location.replace(location.href);">
<i class="layui-icon i-icon" style="font-size: 21px">ဂ</i>
</button>
</div>
<div id="menuTree"></div>

View File

@ -14,29 +14,14 @@
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
<link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"
charset="utf-8"></script>
<style>
.layui-input {
height: 30px;
width: 120px;
}
.x-nav {
padding: 0 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<br/>
<div class="x-nav">
<div class="lenos-search">
<div class="select">
角色名:
<div class="layui-inline">
@ -48,7 +33,7 @@
</div>
<button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm" id="refresh" style="float: right;"
<button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
data-type="reload">
<i class="layui-icon">ဂ</i>
</button>
@ -143,7 +128,7 @@
, {field: 'remark', title: '操作', width: '20%', toolbar: "#toolBar"}
]]
, page: true
, height: 'full-105'
, height: 'full-83'
});
var $ = layui.$, active = {

View File

@ -226,11 +226,6 @@ To change this template use File | Settings | File Templates.-->
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
/* form.on('checkbox(check)', function(data){
if(data.elem.checked){
console.log(data.value);
}
});*/
//监听提交
form.on('submit(add)', function(data){
var r=document.getElementsByName("role");
@ -242,7 +237,6 @@ To change this template use File | Settings | File Templates.-->
}
}
data.field.role=role;
console.info(data.field.role);
$.ajax({
url:'updateUser',
type:'post',

View File

@ -14,29 +14,15 @@
<meta name="viewport"
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css">
<link rel="stylesheet" href="${re.contextPath}/plugin/lenos/main.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.all.js"
charset="utf-8"></script>
<style>
.layui-input {
height: 30px;
width: 120px;
}
.x-nav {
padding: 0 20px;
position: relative;
z-index: 99;
border-bottom: 1px solid #e5e5e5;
height: 32px;
overflow: hidden;
}
</style>
</head>
<body>
<br/>
<div class="x-nav">
<div class="lenos-search">
<div class="select">
用户名:
<div class="layui-inline">
@ -48,7 +34,7 @@
</div>
<button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
</button>
<button class="layui-btn layui-btn-sm" id="refresh" style="float: right;"
<button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
data-type="reload">
<i class="layui-icon">ဂ</i>
</button>
@ -125,7 +111,7 @@
, {field: 'right', title: '操作', width: '20%', toolbar: "#barDemo"}
]]
, page: true,
height: 'full-105'
height: 'full-83'
});
var $ = layui.$, active = {

View File

@ -201,7 +201,7 @@ layui.define(['jquery', 'element', 'nprogress', 'utils'], function(exports) {
$('.kit-tab .layui-tab-content').height(currBoxHeight - 43);
break;
case renderType.iframe:
$('.kit-tab .layui-tab-content iframe').height(currBoxHeight - 47);
$('.kit-tab .layui-tab-content iframe').height(currBoxHeight - 45);
break;
}
}).resize();

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,47 @@
.layui-input {
height: 30px;
width: 120px;
}
.lenos-search {
padding: 3px 10px;
position: relative;
top:2px;
z-index: 99;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
height: 30px;
overflow: hidden;
}
.layui-col-md12{
height:41px;margin-top:4px;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 1px;
}
.icon-position-button{
padding-right: 8px;
padding-left: 10px;
}
.layui-col-md13{
height:41px;margin-top:2px;
padding-top:3px;
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
}
.icon-position-no-button{
padding:1px 9px;
padding-left:12px;
height:36px;
margin-left:9px;
float: right;
margin-right: 10px;
}
.icon-position-no-button i {
font-size: 21px!important;
}

View File

@ -54,4 +54,35 @@ function postAjaxre(url,data,tableId){
}
}
});
}
function layerAjax(url,data,tableId){
$.ajax({
url:url,
type:'post',
data:data,
traditional: true,
success:function(d){
var index = parent.layer.getFrameIndex(window.name);
if(d.flag){
parent.layer.close(index);
window.parent.layui.table.reload(tableId);
window.top.layer.msg(d.msg,{icon:6,offset: 'rb',area:['200px','80px'],anim:2});
}else{
layer.msg(d.msg,{icon:5});
}
},error:function(){
layer.alert("请求失败", {icon: 6},function () {
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
});
}
});
}
function eleClick(active,ele){
$(ele).on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
}