Skip to content

S
syzy_se
Commit 503898b8 by yangbenyong
Options

菜单样式大小等调试

parent 0d1b178f
Showing with 125 additions and 40 deletions
src/main/resources/static/css/index.css
......@@ -7,6 +7,7 @@ body{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 14px;
}
a{
text-decoration: none;}
......@@ -31,13 +32,13 @@ ul,li{
.index-top {
position :relative;
height: 50px;
height: 70px;
}
.index-ex {
margin-right: 20px;
float: right;
font-family: "微软雅黑", Arial;
font-size: 12px;
font-size: 14px;
color: #FFF;
margin-top: 10px;
}
......@@ -48,27 +49,43 @@ ul,li{
.index-logo {
float: left;
}
.index-logo a{position: relative;display:block;}
.index-logo a:before{display: block;content: "";width: 100%;height: 100%;}
#userSetup .layui-nav-more{ display:none; }
.tabTopMenu {
position: relative;
text-decoration: none;
background-color: #3F94F2;
height: 50px;
height: 70px;
overflow:hidden;
margin-right: 55px;
padding-left: 10px;
}
.btnleft,
.btnright{
position: absolute;
top:12px;
}
.btnleft{ left: 10px; }
.btnright{ right: 10px;}
.btnleft .layui-btn,
.btnright .layui-btn{background: transparent;}
.btnleft .layui-btn:hover,
.btnright .layui-btn:hover{
background-color: #1E9FFF;
}
.tabTopMenuLi{
position: relative;
font-family: "微软雅黑", Arial;
font-size: 16px;
color: #FFF;
line-height: 50px;
height: 50px;
line-height: 70px;
height: 70px;
min-width: 100px;
padding: 0 15px;
text-align: center;
float: left;
display: inline-block;
cursor: pointer;
box-sizing: border-box;
}
......@@ -84,7 +101,7 @@ ul,li{
width: 120%;
height: 100%;
background-image: url(../images/tabActive.jpg);
background-size: 105% 42px;
background-size: 105% 64px;
color: #f0d268;
background-repeat: no-repeat;
background-position: center;
......@@ -96,11 +113,23 @@ ul,li{
color: #fff;
text-decoration: none;
font-family: "微软雅黑", Arial;
font-size: 14px;
font-size: 20px;
}
.tabTopCenter{
position: absolute;
right: 95px;
left: 95px;
height: 100%;
overflow: hidden;
}
.tabScroll{
position: absolute;
left: 0px;
white-space: nowrap;
}
.layui-nav .layui-nav-item{
line-height: 50px;
line-height: 70px;
}
.cen:after {
......@@ -111,11 +140,11 @@ ul,li{
}
.cen {
position:relative;
padding-top: 1px;
top:1px;
background: url(../images/mainBg.jpg) no-repeat right bottom/100% auto;
height: -webkit-calc(100vh - 50px);
height: -moz-calc(100vh - 50px);
height: calc(100vh - 50px);
height: -webkit-calc(100vh - 70px);
height: -moz-calc(100vh - 70px);
height: calc(100vh - 70px);
box-sizing : border-box;
}
.cen_zhuce {
......@@ -131,9 +160,9 @@ ul,li{
height : 100%;
box-sizing: border-box;
overflow: hidden;
min-height: -webkit-calc(100vh - 57px);
min-height: -moz-calc(100vh - 57px);
min-height: calc(100vh - 57px);
min-height: -webkit-calc(100vh - 77px);
min-height: -moz-calc(100vh - 77px);
min-height: calc(100vh - 77px);
background: url(../images/menuBtm.jpg) no-repeat center bottom,linear-gradient(#3F93F2 0%, #398AE5 60%) ;
background-size:100% auto;
}
......@@ -153,15 +182,14 @@ ul,li{
.menu-content{
padding-top:10px;
height: calc(100vh - 66px);
height: calc(100vh - 76px);
overflow: hidden;
}
.menu-left-left {
width: 212px;
width: 195px;
overflow-y: auto;
box-sizing: border-box;
height : 100%;
padding-right: 17px;
}
.menu-left-left li {
......@@ -169,10 +197,11 @@ ul,li{
font-size: 16px;
line-height: 50px;
color: #ba7f5a;
padding-left: 50px;
text-align:center;
}
.menu-left-left li a {
color: #fff;
}
.menu-left-left li.lay-active{
background: url(../images/menuBg.jpg) no-repeat center;
......@@ -190,13 +219,13 @@ ul,li{
width: -webkit-calc(100% - 220px);
width: -moz-calc(100% - 220px);
width: calc(100% - 220px);
height: -webkit-calc(100vh - 60px);
height: -moz-calc(100vh - 60px);
height: calc(100vh - 60px);
height: -webkit-calc(100vh - 80px);
height: -moz-calc(100vh - 80px);
height: calc(100vh - 80px);
}
.main .layui-tab-item,
.main .iframes{
height: calc(100vh - 60px);
height: calc(100vh - 80px);
width:100%;
border:0 none;
}
......
src/main/resources/static/css/login.css
......@@ -18,6 +18,8 @@
}
.subbtn-group{
position: relative;
z-index:2;
width: 320px;
display: flex;
justify-content: center;
......@@ -27,7 +29,6 @@
.button_login {
display: inline-block;
margin: 0;
color: #fff;
border-radius: 8px;
border-top-color: #915d3b;
border-right-color: #915d3b;
......@@ -40,10 +41,22 @@
font-size: 18px;
color:#ACB4C1;
}
#loginbox .submitBtn{
position:absolute;
left: 0px;
top:0px;
z-index: -1;
border-radius: 8px;
width: 50%;
height: 40px;
color: #fff;
line-height: 40px;
text-align:center;
font-size: 18px;
box-shadow: 0 0 10px 1px #3383df;
background: linear-gradient( #499AF6, #3383DF);
transition: 1s all;
}
#loginbox{
......
src/main/resources/templates/index.html
......@@ -5,17 +5,21 @@
var menusJson = @objectMapper.writeValueAsString(menus);
-->
<form class="layui-form layui-form-pane">
<div class="layui-header" style="height: 50px;">
<div class="layui-header" style="height: 70px;">
<!-- 顶部banner -->
<!-- <p><font size="50px" color="green">各位老师好:本系统将在19:00分更新维护,届时将不能访问系统,</font></p> -->
<div class="index-top layui-clear">
<div class="index-logo">
<a href=""><img height="50px" src="${ctxPath}/images/logo.jpg"/></a>
<a href=""><img height="70px" src="${ctxPath}/images/logo.jpg"/></a>
</div>
<div class="tabTopMenu">
<div class="tabTopMenuLi" style="display: none">
<div class="tabTopMenu" id="tabTopMenu">
<div class="btnleft"><button class="layui-btn layui-btn-lg layui-btn-normal" type="button"><i class="layui-icon layui-icon-prev"></i></button></div>
<div class="btnright"><button class="layui-btn layui-btn-lg layui-btn-normal" type="button"><i class="layui-icon layui-icon-next"></i></button></div>
<div class="tabTopCenter">
<div class="tabScroll" id="tabScroll">
<!-- <div class="tabTopMenuLi" style="display: none">
<a href="javascript:;">首页</a>
</div>
</div> -->
<!--#for(node in menus.children[0].children ){ -->
<!--#if(node.data.name!="成果转化" && node.data.name!="通知信息"){ -->
<div class="tabTopMenuLi">
......@@ -24,12 +28,13 @@
<!--#} -->
<!--#} -->
</div>
</div>
</div>
<div class="index-ex">
<ul class="layui-nav layui-layout-right">
<input type="hidden" id="userId" value="${session["core:user"].id}"/>
<input type="hidden" id="userPasswordMd5" value="${session["core:user"].password}"/>
<li class="layui-nav-item layui-hide-xs"><a id="userSetup" herf="javascript:;" style="font-size:20px;" class="layui-icon layui-icon-friends"></a>
<li class="layui-nav-item layui-hide-xs"><a id="userSetup" herf="javascript:;" style="font-size:26px;" class="layui-icon layui-icon-friends"></a>
<dl class="layui-nav-child" style="left: -40px;">
<dd><a id="changeCompanyButton" href="javascript:;">角色切换</a></dd>
<dd><a class="user-modify-password" style="cursor: pointer;">修改密码</a></dd>
......@@ -109,9 +114,38 @@ layui.use(['table','layer','form','element'],function(){
var listmenu = menus.children[0].children;
var roleId = "${roleId!}";
var navtop = navScroll = 0 ;
$(".btnleft , .btnright").click(function(){
navScroll = $(".tabTopCenter").width() - $(".tabScroll").width();
if($(this).hasClass("btnleft")){
navtop += 200;
$(".tabScroll").animate({
"left": navtop + 'px'
},500, function(){
if(navtop >= 0 ){
navtop = 0;
$(this).animate({
"left": navtop + 'px'
})
}
})
}else{
navtop -= 200;
$(".tabScroll").animate({
"left": navtop + 'px'
},500)
if(navtop < navScroll){
navtop = navScroll;
$(".tabScroll").animate({
"left": navtop + 'px'
})
}
}
});
$('.tabTopMenuLi').click(function(){
$(this).addClass('active').siblings('.active').removeClass('active');
//$('.menu-left-top').text($(this).text());
if($(this).index() == 0){
if(roleId==1){
$('.menu-left-left').html( $(['<li><a href="JavaScript:;" lay-href="/notifi/notification/index.do?flag=1">发布信息</a></li>',
......@@ -134,6 +168,7 @@ layui.use(['table','layer','form','element'],function(){
})
});
}
return false;
});
function getDate(){
......
src/main/resources/templates/login.html
......@@ -98,7 +98,7 @@
<!--小键盘承载器-->
<div class="banner-cen" style="padding-top:30px;">
<!-- 登录 -->
<div id="loginbox">
<div id="loginbox">
<div class="logo"><img height="60px" src="images/login/login1_03.png"></div>
<div class="centerSesion">
<form onsubmit="return false;" class="layui-form" name="loginForm" id="loginForm">
......@@ -121,8 +121,9 @@
<div class="layui-row">
<div align="center">
<div class="subbtn-group">
<a href="javascript:;" id="loginRegister" class="button_login">点击注册</a>
<a onclick="severCheck();" href="javascript:;" class="button_login submitBtn" id="to-recover">登&nbsp;录</a>
<a href="javascript:;" id="loginRegister" style="color: #fff;" class="button_login">点击注册</a>
<a onclick="severCheck();" href="javascript:;" class="button_login" id="to-recover">登&nbsp;录</a>
<span class="submitBtn"></span>
</div>
<label style="width:350px;margin: 10px;display:block;text-align:right; "><a href="javascript:;" id="loginPasswords" style="font-size:16px;color:#fff; ">忘记密码?</a></label>
......@@ -133,7 +134,7 @@
<input type="hidden" ID="ContainerName" name="ContainerName">
<input type="hidden" ID="strRandom" name="strRandom">
<input type="hidden" ID="loginType" name="loginType" value="0">
</form>
</form>
</div>
</div>
......@@ -159,7 +160,14 @@
})
$(".button_login").hover(function(){
$(this).addClass("submitBtn").siblings().removeClass("submitBtn")
if($(this).index()){
$(".submitBtn").css({ left: "50%" })
$(this).css("color","#fff").siblings().css("color","#ACB4C1");
}else{
$(".submitBtn").css({ left: "0%" })
$(this).css("color","#fff").siblings().css("color","#ACB4C1");
}
//$(this).addClass("submitBtn").siblings().removeClass("submitBtn")
})
//注册点击事件
$("#loginPasswords").click(function(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment