mkm/dev_oa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加海军蓝主题，优化左边菜单体验效果：如果菜单太长时，滚动条默认不出现，鼠标接触菜单时才出现。

Browse Source
This commit is contained in:
hdm 2023-02-09 23:09:38 +08:00
parent 222f1b7251
commit 92aaa8c416
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/home/view/index/index.html
View File

@ -70,7 +70,7 @@
<!-- 侧边菜单 --> <!-- 侧边菜单 -->
<div class="layui-side layui-side-menu layui-side-{$theme}"> <div class="layui-side layui-side-menu layui-side-{$theme}">
<div class="layui-side-scroll"> <div class="layui-side-scroll no-scroll">
<div class="layui-logo" gg-event="closeAllTabs"> <div class="layui-logo" gg-event="closeAllTabs">
<img src="{__IMG__}/syslogo.png" style="height: 40px;" class="syslogo"> <img src="{__IMG__}/syslogo.png" style="height: 40px;" class="syslogo">
<img src="{__IMG__}/syslogo_small.png" style="height: 40px;" class="logo"> <img src="{__IMG__}/syslogo_small.png" style="height: 40px;" class="logo">
@ -170,6 +170,12 @@
} }
} }
} }
$('.layui-side-scroll').hover(function(){
$(this).removeClass('no-scroll');
},function(){
$(this).addClass('no-scroll');
});
$('#GouguApp').on("click",'[gg-event="logout"]',function () { $('#GouguApp').on("click",'[gg-event="logout"]',function () {
layer.confirm('确认注销登录吗?', { icon: 7, title: '警告' }, function (index) { layer.confirm('确认注销登录吗?', { icon: 7, title: '警告' }, function (index) {
@ -198,6 +204,9 @@
},{ },{
title: '简约白', title: '简约白',
theme: 'white' theme: 'white'
},{
title: '海军蓝',
theme: 'blue'
}], }],
click: function(data, othis){ click: function(data, othis){
$.ajax({ $.ajax({

21
public/static/assets/gougu/css/layout.css
View File

@ -23,7 +23,8 @@
.gg-layout .layui-logo a {color: #f1f1f1; text-align:center;} .gg-layout .layui-logo a {color: #f1f1f1; text-align:center;}
.layui-side-menu {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);background-color: #001529; color: #fff} .layui-side-menu {box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .05);background-color: #001529; color: #fff}
.layui-side-menu .layui-side-scroll {width: 100%} .layui-side-menu .layui-side-scroll {width: 100%;}
.layui-side-menu .layui-side-scroll.no-scroll{overflow-y:hidden;}
.layui-side-menu .layui-nav {width: 200px; margin-top: 50px; background: 0 0} .layui-side-menu .layui-nav {width: 200px; margin-top: 50px; background: 0 0}
.layui-side-menu .layui-nav .layui-nav-item a {height: 40px;line-height: 40px; padding-left: 44px; padding-right: 20px} .layui-side-menu .layui-nav .layui-nav-item a {height: 40px;line-height: 40px; padding-left: 44px; padding-right: 20px}
.layui-side-menu .layui-nav .layui-nav-item>a {padding-top: 2px;padding-bottom: 2px} .layui-side-menu .layui-nav .layui-nav-item>a {padding-top: 2px;padding-bottom: 2px}
@ -62,10 +63,26 @@
.layui-side-white .layui-nav-tree .layui-this, .layui-side-white .layui-nav-tree .layui-this,
.layui-side-white .layui-nav-tree .layui-this>a, .layui-side-white .layui-nav-tree .layui-this>a,
.layui-side-white .layui-nav-tree .layui-this>a:hover {background-color: #ECF6FF;color: #187FDD;} .layui-side-white .layui-nav-tree .layui-this>a:hover {background-color: #ECF6FF;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-child dd a:hover{background-color:#ffffff;color: #187FDD;} .layui-side-white .layui-nav-tree .layui-nav-child dd a:hover{background-color:#ffffff;color: #187FDD;}
.layui-side-white .layui-nav-tree .layui-nav-bar{background-color: #187FDD;width:3px;left:inherit;right:0} .layui-side-white .layui-nav-tree .layui-nav-bar{background-color: #187FDD;width:3px;left:inherit;right:0}
.layui-side-blue{background-color:#192A5E; color: #C5C9D2}
.layui-side-blue .layui-logo {background-color: #122150;border-bottom: 1px solid #122150;}
.layui-side-blue .layui-nav .layui-nav-item a{color: #C5C9D2}
.layui-side-blue .layui-nav .layui-nav-item .iconfont{font-weight:600;}
.layui-side-blue .layui-nav-itemed>.layui-nav-child{background-color:#122150!important;}
.layui-side-blue .layui-nav-itemed>a,
.layui-side-blue .layui-nav-tree .layui-nav-title a,
.layui-side-blue .layui-nav-tree .layui-nav-title a:hover{color:#C5C9D2!important;}
.layui-side-blue .layui-nav-tree .layui-nav-child dd.layui-this,
.layui-side-blue .layui-nav-tree .layui-nav-child dd.layui-this a,
.layui-side-blue .layui-nav-tree .layui-this,
.layui-side-blue .layui-nav-tree .layui-this>a,
.layui-side-blue .layui-nav-tree .layui-this>a:hover {background-color: #3c508c;color: #fff;}
.layui-side-blue .layui-nav-tree .layui-nav-child dd a:hover{background-color:#2b3e79;color: #C5C9D2;}
.layui-side-blue .layui-nav-tree .layui-nav-bar{background-color: #122150;width:3px;left:inherit;right:0}
.page-tabs{ position: fixed;top: 50px;right: 0; z-index: 999; height: 40px; line-height: 40px; padding: 0 80px 0 40px; background-color: #fff;box-sizing: border-box; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 8%)} .page-tabs{ position: fixed;top: 50px;right: 0; z-index: 999; height: 40px; line-height: 40px; padding: 0 80px 0 40px; background-color: #fff;box-sizing: border-box; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 8%)}
.page-tabs, .page-tabs,
.gg-layout .layui-body, .gg-layout .layui-body,