diff --git a/admin/css/admin.css b/admin/css/admin.css index e883c50..0905901 100644 --- a/admin/css/admin.css +++ b/admin/css/admin.css @@ -2,7 +2,7 @@ .pear-admin .layui-body, .pear-admin .layui-logo, .pear-admin .layui-side, -.pear-admin .layui-header .layui-layout-left{ +.pear-admin .layui-header .layui-layout-left { transition: all .3s; } @@ -67,7 +67,7 @@ } .pear-admin .layui-side-scroll { - height: calc(100% - 60px)!important; + height: calc(100% - 60px) !important; background-color: #28333E; width: 247px; @@ -92,68 +92,114 @@ .pear-mini .layui-logo .title { display: none; } + .pear-mini .layui-logo .logo { display: inline-block; } + .pear-mini .layui-side { width: 60px; } + .pear-mini .layui-header { left: 60px; width: calc(100% - 60px); } + .pear-mini .layui-body { left: 60px; } + .pear-mini .layui-logo { width: 60px; } + .pear-mini .layui-nav-tree .layui-nav-item span { display: none; } + .pear-mini .bottom-nav li { width: 100% !important; } + .pear-mini .layui-side-scroll { height: calc(100% - 60px); } + .pear-admin .layui-header .layui-nav .layui-nav-bar { top: 0px !important; height: 2px !important; background-color: #5FB878; } + .pear-admin .layui-header .layui-nav .layui-this:after { display: none; } + +.pear-collasped-pe { + display: none; + width: 50px; + position: absolute; + z-index: 400000; + bottom: 30px; + right: 30px; + background-color: #5FB878 !important; + height: 50px; + line-height: 50px; + text-align: center; + border-radius: 50px; + box-shadow: 2px 0 6px rgba(0, 21, 41, .35); +} + +.pear-collasped-pe a { + color: white !important; +} + /** 新增兼容 */ @media screen and (max-width:768px) { + .collaspe { + display: none !important; + } + + .pear-collasped-pe { + display: inline-block !important; + } + .pear-mini .bottom-nav { display: none; } + .pear-mini .layui-side-scroll { height: calc(100% - 62px); } + /** 隐 藏 布 局 样 式 */ .pear-mini .layui-side { width: 0px; } + .pear-mini .layui-header { left: 0px; width: 100%; } + .pear-mini .layui-body { left: 0px; } + .pear-mini .layui-logo { width: 0px; } + .pear-admin .layui-body { left: 0px; } + .pear-admin .layui-header { left: 0px; width: 100%; } + .pear-admin .pear-cover { width: 100%; height: 100%; @@ -164,10 +210,12 @@ opacity: 0; margin-top: -60px; } + .pear-mini .pear-cover { display: none; } } + @-webkit-keyframes am-horizontal-roll_show { 0% { opacity: 1; @@ -181,6 +229,7 @@ transform: translateX(0) } } + @keyframes am-horizontal-roll_show { 0% { opacity: 1; @@ -196,32 +245,43 @@ transform: translateX(0) } } + .layer-anim-right { -webkit-animation: am-horizontal-roll_show .6s ease-out; animation: am-horizontal-roll_show .6s ease-out; } + /** 亮色侧边风格 */ .light-theme .layui-logo { background-color: white !important; color: black !important; } + .light-theme .layui-side-scroll { background-color: white !important; color: black !important; } -.light-theme .layui-side{ - box-shadow: 2px 0 8px 0 rgba(29,35,41,.05)!important; + +.light-theme .layui-side { + box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05) !important; } + /** 主 题 选 择 界 面 样 式 */ -.pearone-color .color-title {padding: 15px 0 0px 20px;margin-bottom: 4px;} +.pearone-color .color-title { + padding: 15px 0 0px 20px; + margin-bottom: 4px; +} + .pearone-color .color-content { padding: 15px 10px 0 20px; } + .pearone-color .color-content ul { list-style: none; padding: 0px; } + .pearone-color .color-content ul li { position: relative; display: inline-block; @@ -235,6 +295,7 @@ font-size: 12px; color: #666; } + .pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after { width: 100%; @@ -246,6 +307,7 @@ opacity: 1; border-radius: 4px; } + .pearone-color .color-content li:after { content: ''; position: absolute; @@ -259,17 +321,21 @@ -webkit-transition: all .3s; opacity: 0; } + .select-color { margin-bottom: 30px; } + .select-color .select-color-title { padding: 15px 0 0px 20px; margin-bottom: 4px; } + .select-color .select-color-content { padding: 20px 0 0px 0px; margin-bottom: 4px; } + .select-color .select-color-content .select-color-item { background-color: gray; width: 30px; @@ -285,14 +351,56 @@ } /** 友情链接 */ -.more-setting {margin-top: 45px;} -.more-setting form {margin-top: 30px;} -.more-setting-title {padding: 15px 0 0px 20px;margin-bottom: 4px;} -.more-setting .layui-form-label {width: 60px;} -.more-menu-list {width: 100%;margin-top: 80px;} -.more-menu-item:first-child {border-top: 1px solid #e8e8e8;} -.more-menu-item .layui-icon {font-size: 18px;padding-right: 10px;} -.more-menu-item {color: #595959;height: 50px;line-height: 50px;font-size: 16px;padding: 0 25px;border-bottom: 1px solid #e8e8e8;font-style: normal;display: block;} -.more-menu-item:hover {background-color: whitesmoke;} -.more-menu-item:after {color: #8c8c8c;right: 16px;content: "\e602";position: absolute;font-family: layui-icon !important;} +.more-setting { + margin-top: 45px; +} +.more-setting form { + margin-top: 30px; +} + +.more-setting-title { + padding: 15px 0 0px 20px; + margin-bottom: 4px; +} + +.more-setting .layui-form-label { + width: 60px; +} + +.more-menu-list { + width: 100%; + margin-top: 80px; +} + +.more-menu-item:first-child { + border-top: 1px solid #e8e8e8; +} + +.more-menu-item .layui-icon { + font-size: 18px; + padding-right: 10px; +} + +.more-menu-item { + color: #595959; + height: 50px; + line-height: 50px; + font-size: 16px; + padding: 0 25px; + border-bottom: 1px solid #e8e8e8; + font-style: normal; + display: block; +} + +.more-menu-item:hover { + background-color: whitesmoke; +} + +.more-menu-item:after { + color: #8c8c8c; + right: 16px; + content: "\e602"; + position: absolute; + font-family: layui-icon !important; +} diff --git a/component/pear/modules/menu.js b/component/pear/modules/menu.js index e622b4c..c909f9c 100644 --- a/component/pear/modules/menu.js +++ b/component/pear/modules/menu.js @@ -383,13 +383,16 @@ layui.define(['table', 'jquery', 'element'], function(exports) { top: topLength }); }, function() { - $(this).children(".layui-nav-child").removeClass("layui-nav-hover"); - $(this).children(".layui-nav-child").css({ - left: '0px' - }); - $(this).children(".layui-nav-child").css({ - top: '0px' - }); + var that = $(this); + setTimeout(function() { + that.children(".layui-nav-child").removeClass("layui-nav-hover"); + that.children(".layui-nav-child").css({ + left: '0px' + }); + that.children(".layui-nav-child").css({ + top: '0px' + }); + }, 10); }) } else { $("#" + option.elem + " .layui-nav-item").off('mouseenter').unbind('mouseleave'); diff --git a/index.html b/index.html index 19142ab..44a79c6 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,8 @@
+ +