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