diff --git a/admin/css/admin.dark.css b/admin/css/admin.dark.css
index 3b225b4059e8ec026e27c48e890e8573eaeafcea..2660bb229601c54154a4fbb3fae2d2f28fdb8f7b 100644
--- a/admin/css/admin.dark.css
+++ b/admin/css/admin.dark.css
@@ -51,6 +51,15 @@
     color: var(--global-primary-color) !important;
 }
 
+.pear-admin-dark .pear-page-title{
+   background-color: #141414 !important;
+   border: #141414 1px solid;   
+}
+
+.pear-admin-dark .pear-page-title .breadcrumb{
+	color: #fff !important;
+}
+
 /** side */
 .pear-admin-dark .layui-side {
     box-shadow: 0 3px 4px rgba(0, 0, 0, .6) !important;
diff --git a/component/pear/css/module/page.css b/component/pear/css/module/page.css
index 2131056b2371015c2a541e0c8835d02b850c3eb0..6ecf6f689eaf260f08d1a4fe2156bc2c6ad77599 100644
--- a/component/pear/css/module/page.css
+++ b/component/pear/css/module/page.css
@@ -5,7 +5,7 @@
 	height: 100%;
 }
 
-.pear-page .dot {
+/*.pear-page .dot {
 	width: 5px;
 	height: 24px;
 	background-color: #5FB878;
@@ -20,6 +20,32 @@
 	line-height: 40px;
 	background-color: white;
 	border: whitesmoke 1px solid;
+}*/
+
+.pear-page .dot {
+	width: 5px;
+	height: 24px;
+	background-color: var(--global-primary-color);
+	margin-top: 8px;
+	margin-left: 15px;
+	border-radius: 2px;
+	display: inline-block;
+}
+
+.pear-page .pear-page-title {
+	height: 40px;
+	line-height: 40px;
+	background-color: white; 
+	border: whitesmoke 1px solid;
+}
+
+.pear-page .breadcrumb {
+	position: absolute;
+	margin-top: 0px;
+	margin-left: 12px;
+	color: dimgray;
+	display: inline-block;
+	letter-spacing: 2px;
 }
 
 .pear-page .pear-page-content,
diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js
index 3231e9415b802bbd97a92d6602851dc5d7518417..64b60131a1902ee7401989ca279bcf7d22fe04da 100644
--- a/component/pear/module/admin.js
+++ b/component/pear/module/admin.js
@@ -262,7 +262,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
 						if (data.menuOpenType === "_layer") {
 							layer.open({ type: 2, title: data.menuTitle, content: data.menuUrl, area: ['80%', '80%'], maxmin: true })
 						} else {
-							bodyFrame.changePage({ href: data.menuUrl, type: data.menuOpenType });
+							bodyFrame.changePage({ href: data.menuUrl, type: data.menuOpenType, path:data.menuPath  });
 						}
 						compatible()
 					})
@@ -380,7 +380,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
 				this.footer(footer);
 			}
 
-			this.footer = function (footer) {
+			/*this.footer = function (footer) {
 				var bodyDOM = $(".pear-admin .layui-body");
 				var footerDOM = $(".pear-admin .layui-footer");
 				if (footer === true || footer === "true") {
@@ -390,6 +390,18 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
 					footerDOM.addClass("close");
 					bodyDOM.css("bottom", "");
 				}
+			}*/
+
+			this.footer = function (footer) {
+				var bodyDOM = $("#content");				
+				var footerDOM = $(".pear-admin .layui-footer");
+				if (footer === true || footer === "true") {
+					footerDOM.removeClass("close");
+					bodyDOM.css({"height": "calc(100% - 44px)"});
+				} else {
+					footerDOM.addClass("close");
+					bodyDOM.css({"height": "calc(100% - 0px)"});
+				}
 			}
 
 			this.bannerSkin = function (theme) {
diff --git a/component/pear/module/page.js b/component/pear/module/page.js
index de90eac322d328ad8b48852e75bd50fa5648f14f..9f06076a836065cfcfbf5d108aa47b6bd1832f4d 100644
--- a/component/pear/module/page.js
+++ b/component/pear/module/page.js
@@ -17,6 +17,7 @@ layui.define(['jquery', 'element'], function (exports) {
 		var option = {
 			elem: opt.elem,
 			url: opt.url,
+			path: opt.path,
 			width: opt.width || "100%",
 			height: opt.height || "100%",
 			title: opt.title
@@ -51,6 +52,7 @@ layui.define(['jquery', 'element'], function (exports) {
 				}
 			});
 		}
+		$('.pear-page-title .breadcrumb').html(options.path);	
 		$frame.attr("type", options.type);
 		$frame.attr("href", options.href);
 	}
@@ -95,7 +97,7 @@ layui.define(['jquery', 'element'], function (exports) {
 
 	function renderContent(option) {
 
-		$("#" + option.elem).html(`
+	/*	$("#" + option.elem).html(`
 			<div class='pear-page'>
 				<div class='pear-page-content' type='${option.type}' href='${option.url}'></div>
 				<div class="pear-page-loading">
@@ -107,6 +109,15 @@ layui.define(['jquery', 'element'], function (exports) {
 					</div>
 				</div>
 			</div>`);
+	*/
+		$("#" + option.elem).html(`
+			<div class='pear-page'>
+			    <ul class="pear-page-title">
+                  <li class="dot"></li>
+                  <li class="breadcrumb">${option.title}</li>
+                </ul>
+				<div class='pear-page-content' type='${option.type}' href='${option.url}'></div>
+			</div>`);	
 
 		var $frame = $("#" + option.elem).find(".pear-page-content");