⚡ 处理悬浮延迟，移动端适配

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 {
-.more-setting form {margin-top: 30px;}
+	margin-top: 45px;
-.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 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;
+}

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");
+				var that = $(this);
-				$(this).children(".layui-nav-child").css({
+				setTimeout(function() {
+					that.children(".layui-nav-child").removeClass("layui-nav-hover");
+					that.children(".layui-nav-child").css({
 						left: '0px'
 					});
-				$(this).children(".layui-nav-child").css({
+					that.children(".layui-nav-child").css({
 						top: '0px'
 					});
+				}, 10);
 			})
 		} else {
 			$("#" + option.elem + " .layui-nav-item").off('mouseenter').unbind('mouseleave');

index.html

@@ -67,6 +67,8 @@
 		</div>
 		<!-- 遮 盖 层 -->
 		<div class="pear-cover"></div>
+		<!-- 移 动 端 便 捷 操 作 -->
+		<div class="pear-collasped-pe collaspe"><a href="#" class="layui-icon layui-icon-shrink-right"></a></div>
 		<!-- 加 载 动 画-->
 		<div class="loader-main">
 			<div class="loader"></div>