diff --git a/admin/css/admin.css b/admin/css/admin.css
index 1f04120..5279943 100644
--- a/admin/css/admin.css
+++ b/admin/css/admin.css
@@ -10,8 +10,8 @@
 }
 
 .pear-admin .layui-header {
-	left: 220px;
-	width: calc(100% - 220px);
+	left: 230px;
+	width: calc(100% - 230px);
 	background-color: white;
 	border-bottom: 1px solid whitesmoke;
 }
@@ -27,8 +27,9 @@
 }
 
 .pear-admin .layui-logo {
-	width: 220px;
+	width: 230px;
 	height: 60px;
+	line-height: 60px;
 	position: relative;
 	background-color: #28333E;
 
@@ -54,7 +55,7 @@
 
 .pear-admin .layui-side {
 	top: 0px;
-	width: 220px;
+	width: 230px;
 	box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
 	z-index: 9999;
 }
@@ -65,8 +66,9 @@
 }
 
 .pear-admin .layui-side-scroll {
-	height: calc(100% - 60px);
+	height: calc(100% - 60px)!important;
 	background-color: #28333E;
+	width: 230px;
 
 }
 
@@ -76,7 +78,7 @@
 }
 
 .pear-admin .layui-body {
-	left: 220px;
+	left: 230px;
 	bottom: 0px;
 }
 
diff --git a/admin/data/menu.json b/admin/data/menu.json
index 6f27078..eb03f77 100644
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@@ -10,7 +10,7 @@
 			"icon": "layui-icon layui-icon-console",
 			"type": 1,
 			"openType": "_iframe",
-			"href": "view/console/console1.html"
+			"href": "view/console/console.html"
 		}, {
 			"id": 13,
 			"title": "数据分析",
@@ -36,6 +36,14 @@
 			},
 			{
 				"id": 202,
+				"title": "表单",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/document/form.html"
+			},
+			{
+				"id": 203,
 				"title": "多选下拉",
 				"icon": "layui-icon layui-icon-face-cry",
 				"type": 1,
@@ -43,7 +51,7 @@
 				"href": "view/document/select.html"
 			},
 			{
-				"id": 203,
+				"id": 204,
 				"title": "抽屉组件",
 				"icon": "layui-icon layui-icon-face-cry",
 				"type": 1,
@@ -52,6 +60,40 @@
 			}
 		]
 	},
+	{
+		"id": "chart",
+		"title": "统计图表",
+		"icon": "layui-icon layui-icon-auz",
+		"type": 0,
+		"href": "",
+		"children": [{
+				"id": 501,
+				"title": "折线图",
+				"icon": "layui-icon layui-icon-face-smile",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/chart/line.html"
+			},
+			{
+				"id": 404,
+				"title": "404",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/error/404.html"
+			},
+
+			{
+				"id": 500,
+				"title": "500",
+				"icon": "layui-icon layui-icon-face-cry",
+				"type": 1,
+				"openType": "_iframe",
+				"href": "view/error/500.html"
+			}
+
+		]
+	},
 	{
 		"id": "error",
 		"title": "错误页面",
diff --git a/assets/console.css b/assets/console.css
new file mode 100644
index 0000000..ee5f974
--- /dev/null
+++ b/assets/console.css
@@ -0,0 +1,100 @@
+.top-panel {
+	border-radius: 4px;
+	text-align: center;
+}
+
+.top-panel>.layui-card-body {
+	height: 60px;
+}
+
+.top-panel-number {
+	line-height: 60px;
+	font-size: 30px;
+	border-right: 1px solid #eceff9;
+}
+
+.top-panel-tips {
+	padding-left: 8px;
+	padding-top: 16px;
+	line-height: 30px;
+	font-size: 12px;
+}
+
+.pear-container {
+	background-color: whitesmoke;
+	margin: 10px;
+}
+
+.card {
+	width: 100%;
+	height: 160px;
+	background-color: whitesmoke;
+	border-radius: 4px;
+}
+
+.card .header .avatar {
+	width: 28px;
+	height: 28px;
+	margin: 20px;
+	border-radius: 50px;
+}
+
+.card .header {
+	color: dimgray;
+}
+
+.card .body {
+	color: gray;
+}
+
+.card .body {
+	margin-left: 20px;
+	margin-right: 20px;
+}
+
+.card .footer {
+	margin-left: 20px;
+	margin-right: 20px;
+	margin-top: 20px;
+	font-size: 13px;
+	color: gray;
+	position: absolute;
+}
+
+.list .list-item {
+	height: 32px;
+	line-height: 32px;
+	color: gray;
+	padding: 5px;
+	padding-left: 15px;
+	border-radius: 4px;
+	margin-top: 5.2px;
+}
+
+.custom-tab .layui-tab-title {
+	border-bottom-width: 0px;
+	border-bottom-style: none;
+}
+
+.custom-tab .layui-tab-title li {
+	margin-left: 10px;
+}
+
+.list .list-item:hover {
+	background-color: whitesmoke;
+}
+
+.list .list-item .title {
+	font-size: 13px;
+	width: 100%;
+}
+
+.list .list-item .footer {
+	position: absolute;
+	right: 30px;
+	font-size: 12px;
+}
+
+.top-panel-tips i {
+	font-size: 33px;
+}
\ No newline at end of file
diff --git a/component/layui/lay/extends/pearAdmin.js b/component/layui/lay/extends/pearAdmin.js
deleted file mode 100644
index 870fdfb..0000000
--- a/component/layui/lay/extends/pearAdmin.js
+++ /dev/null
@@ -1,242 +0,0 @@
-layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pearFrame'],
-	function(exports) {
-		"use strict";
-
-		var $ = layui.jquery,
-			form = layui.form,
-			element = layui.element,
-			pearTab = layui.pearTab,
-			pearMenu = layui.pearMenu,
-			pearFrame = layui.pearFrame;
-
-		var bodyFrame;
-		var sideMenu;
-		var bodyTab;
-
-		var pearAdmin = new function() {
-
-			this.render = function(option) {
-				this.menuRender(option);
-				this.bodyRender(option);
-				this.keepLoad(option);
-				this.logoRender(option);
-			}
-
-			this.logoRender = function(option) {
-
-				$(".layui-logo .logo").attr("src", option.logoImage);
-				$(".layui-logo .title").html(option.logoTitle);
-			}
-
-			this.menuRender = function(option) {
-				sideMenu = pearMenu.render({
-					elem: 'sideMenu', //依赖容器
-					async: true, //数据形式
-					theme: option.theme,
-					height: '100%',
-					control: option.control ? 'control' : false, // control 
-					defaultMenu: 1,
-					defaultOpen: 0, //默认打开菜单
-					accordion: true,
-					url: option.data, //数据地址
-					parseData: false, //请求后是否进行数据解析 函数
-					change: option.change
-				})
-				sideMenu.selectItem(option.select);
-			}
-
-			this.bodyRender = function(option) {
-				if (option.muiltTab) {
-					bodyTab = pearTab.render({
-						elem: 'content',
-						roll: true,
-						tool: true,
-						width: '100%',
-						height: '100%',
-						index: 0,
-						tabMax: 20,
-						closeEvent: function(id) {
-							sideMenu.selectItem(id);
-						},
-						data: [{
-							id: '0',
-							url: option.index,
-							title: '首页',
-							close: false
-						}] //初始化数据
-					});
-
-					bodyTab.click(function(id) {
-						bodyTab.positionTab();
-						sideMenu.selectItem(id);
-					})
-
-					$("body").on("click", ".refresh", function() {
-
-						bodyTab.refresh(600);
-					})
-
-					sideMenu.click(function(dom, data) {
-
-						bodyTab.addTabOnly({
-							id: data.menuId,
-							title: data.menuTitle,
-							url: data.menuUrl,
-							icon: data.menuIcon,
-							close: true
-						}, 300);
-						compatible();
-					})
-
-				} else {
-					bodyFrame = pearFrame.render({
-						elem: 'content',
-						title: '工作空间 / 首页',
-						url: option.index,
-						width: '100%',
-						height: '100%'
-					});
-
-					$("body").on("click", ".refresh", function() {
-
-						bodyFrame.refresh(600);
-					})
-
-					sideMenu.click(function(dom, data) {
-						bodyFrame.changePage(data.menuUrl, data.menuPath, true);
-					})
-				}
-			}
-
-			this.keepLoad = function(option) {
-				setTimeout(function() {
-					$(".loader-main").fadeOut(option.done);
-				}, option.keepLoad)
-			}
-		};
-
-		$("body").on("click", ".collaspe,.pear-cover", function() {
-			sideMenu.collaspe();
-			if ($(".pear-admin").is(".pear-mini")) {
-				$(".layui-icon-spread-left").addClass("layui-icon-shrink-right")
-				$(".layui-icon-spread-left").removeClass("layui-icon-spread-left")
-				$(".pear-admin").removeClass("pear-mini");
-			} else {
-				$(".layui-icon-shrink-right").addClass("layui-icon-spread-left")
-				$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right")
-				$(".pear-admin").addClass("pear-mini");
-			}
-		})
-
-		$("body").on("click", ".fullScreen", function() {
-			if ($(this).hasClass("layui-icon-screen-restore")) {
-				screenFun(2).then(function() {
-					$(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
-				});
-			} else {
-				screenFun(1).then(function() {
-					$(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
-				});
-			}
-
-		});
-
-/* 		function compatible() {
-			if ($(window).width() <= 768) {
-				sideMenu.collaspe();
-				if ($(".pear-admin").is(".pear-mini")) {
-					$(".layui-icon-spread-left").addClass("layui-icon-shrink-right")
-					$(".layui-icon-spread-left").removeClass("layui-icon-spread-left")
-					$(".pear-admin").removeClass("pear-mini");
-				} else {
-					$(".layui-icon-shrink-right").addClass("layui-icon-spread-left")
-					$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right")
-					$(".pear-admin").addClass("pear-mini");
-				}
-			}
-		} */
-
-		function screenFun(num) {
-			num = num || 1;
-			num = num * 1;
-			var docElm = document.documentElement;
-
-			switch (num) {
-				case 1:
-					if (docElm.requestFullscreen) {
-						docElm.requestFullscreen();
-					} else if (docElm.mozRequestFullScreen) {
-						docElm.mozRequestFullScreen();
-					} else if (docElm.webkitRequestFullScreen) {
-						docElm.webkitRequestFullScreen();
-					} else if (docElm.msRequestFullscreen) {
-						docElm.msRequestFullscreen();
-					}
-					break;
-				case 2:
-					if (document.exitFullscreen) {
-						document.exitFullscreen();
-					} else if (document.mozCancelFullScreen) {
-						document.mozCancelFullScreen();
-					} else if (document.webkitCancelFullScreen) {
-						document.webkitCancelFullScreen();
-					} else if (document.msExitFullscreen) {
-						document.msExitFullscreen();
-					}
-					break;
-			}
-			return new Promise(function(res, rej) {
-				res("返回值");
-			});
-		}
-
-
-		$("body").on("click", ".setting", function() {
-
-			openRight("");
-
-		})
-
-		function openRight(html) {
-			layer.open({
-				type: 1,
-				offset: 'r',
-				area: ['340px', '100%'],
-				title: false,
-				shade: 0.1,
-				closeBtn: 0,
-				shadeClose: false,
-				anim: -1,
-				skin: 'layer-anim-right',
-				move: false,
-				content: html,
-				success: function(layero, index) {
-
-					form.render();
-
-					var color = localStorage.getItem("theme-color");
-					if (color != "null") {
-						$(".select-color-item").removeClass("layui-icon")
-							.removeClass("layui-icon-ok");
-
-						$(".select-color-item").each(function() {
-							if ($(this).css("background-color") === color) {
-								$(this).addClass("layui-icon").addClass("layui-icon-ok");
-							}
-						});
-					}
-
-					$('#layui-layer-shade' + index).click(function() {
-						var $layero = $('#layui-layer' + index);
-						$layero.animate({
-							left: $layero.offset().left + $layero.width()
-						}, 200, function() {
-							layer.close(index);
-						});
-					})
-				}
-			});
-		}
-
-		exports('pearAdmin', pearAdmin);
-	})
diff --git a/component/layui/lay/extends/pearFrame.js b/component/layui/lay/extends/pearFrame.js
deleted file mode 100644
index 11fe7e2..0000000
--- a/component/layui/lay/extends/pearFrame.js
+++ /dev/null
@@ -1,93 +0,0 @@
-layui.define(['table', 'jquery', 'element'], function (exports) {
-    "use strict";
-
-    var MOD_NAME = 'pearFrame',
-        $ = layui.jquery,
-		element = layui.element;
-		
-    var pearFrame = function (opt) {
-        this.option = opt;
-    };
-
-    pearFrame.prototype.render = function (opt) {
-        //默认配置值
-		var option = {
-			elem:opt.elem,
-			url:opt.url,
-			title:opt.title,
-			width:opt.width,
-			height:opt.height,
-			done:opt.done ? opt.done: function(){ console.log("菜单渲染成功");}
-		}
-		
-		
-	    createFrameHTML(option);
-	   
-	    $("#"+option.elem).width(option.width);
-	    $("#"+option.elem).height(option.height);
-		
-		return new pearFrame(option);
-    } 
-	
-	pearFrame.prototype.changePage = function(url,title,loading){
-		
-		if(loading){
-			var loading = $("#"+this.option.elem).find(".pear-frame-loading");
-			
-			loading.css({display:'block'});
-		}
-		
-		$("#"+this.option.elem+" iframe").attr("src",url);
-	 
-	    $("#"+this.option.elem+" .title").html(title);
-	
-	     if(loading){
-	     	var loading = $("#"+this.option.elem).find(".pear-frame-loading");
-	     	
-			setTimeout(function(){
-				
-				loading.css({display:'none'});
-			
-			},800)
-	     	
-	     }
-	
-	}
-	
-	pearFrame.prototype.refresh = function (time) {
-		
-		
-		// 刷 新 指 定 的 选 项 卡
-		if(time!=false){
-			
-			var loading = $("#"+this.option.elem).find(".pear-frame-loading");
-			
-			loading.css({display:'block'});
-			
-			if(time!=0){
-				
-				setTimeout(function(){
-					loading.css({display:'none'});
-				},time)
-			}
-			
-		}
-		
-		$("#"+this.option.elem).find("iframe")[0].contentWindow.location.reload(true);
-	}
-	
-	function createFrameHTML(option){
-		
-		 var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;'  scrolling='auto' frameborder='0' src='"+option.url+"' ></iframe>"
-	
-	     var loading = '<div class="pear-frame-loading">'+
-			       '<div class="ball-loader">'+
-				      '<span></span><span></span><span></span><span></span>'+
-			       '</div>'+
-		        '</div></div>'
-	
-	     $("#"+option.elem).html(iframe+loading);	
-	}
-	
-	exports(MOD_NAME,new pearFrame());
-})
\ No newline at end of file
diff --git a/component/layui/lay/extends/pearMenu.js b/component/layui/lay/extends/pearMenu.js
deleted file mode 100644
index 84ec4fd..0000000
--- a/component/layui/lay/extends/pearMenu.js
+++ /dev/null
@@ -1,526 +0,0 @@
-layui.define(['table', 'jquery', 'element'], function(exports) {
-	"use strict";
-
-	var MOD_NAME = 'pearMenu',
-		$ = layui.jquery,
-		element = layui.element;
-
-	var pearMenu = function(opt) {
-		this.option = opt;
-	};
-
-	pearMenu.prototype.render = function(opt) {
-		//默认配置值
-		var option = {
-			elem: opt.elem,
-			async: opt.async ? opt.async : false,
-			parseData: opt.parseData,
-			url: opt.url,
-			defaultOpen: opt.defaultOpen,
-			defaultSelect: opt.defaultSelect,
-			control: opt.control,
-			defaultMenu: opt.defaultMenu,
-			accordion: opt.accordion,
-			height: opt.height,
-			theme: opt.theme,
-			data: opt.data ? opt.data : [],
-			change: opt.change ? opt.change : function() {
-				console.log("切换")
-			},
-			done: opt.done ? opt.done : function() {
-				console.log("菜单渲染成功");
-			}
-		}
-
-		// 根 据 请 求 方 式 获 取 数 据
-		if (option.async) {
-			option.data = getData(option.url);
-			if (option.parseData != false) {
-				option.parseData(option.data);
-			}
-		}
-
-		if(option.data.length > 0){
-			if (option.control != false) {
-
-				createMenuAndControl(option);
-			} else {
-				createMenu(option);
-			}
-		}
-
-
-		// 渲 染 菜 单 结 束 并 完 成
-		element.init();
-
-		downShow(option);
-
-		option.done();
-		return new pearMenu(option);
-	}
-
-
-	/** 监听事件赋值 */
-	pearMenu.prototype.click = function(clickEvent) {
-
-		var _this = this;
-		$("#" + _this.option.elem + " .site-demo-active").parent().click(function() {
-			var dom = $(this).children(".site-demo-active");
-			var data = {
-				menuId: dom.attr("menu-id"),
-				menuTitle: dom.attr("menu-title"),
-				menuPath: dom.attr("menu-title"),
-				menuIcon: dom.attr("menu-icon"),
-				menuUrl: dom.attr("menu-url")
-			};
-
-			var doms = hash(dom);
-
-			if (doms.text() != '') {
-				data['menuPath'] = doms.find("span").text() + " / " + data['menuPath'];
-
-			}
-			var domss = hash(doms);
-
-			if (domss.text() != '') {
-
-				data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
-
-			}
-
-			var domsss = hash(domss);
-
-			if (domsss.text() != '') {
-
-				data['menuPath'] = domsss.find("span").text() + " / " + data['menuPath'];
-
-			}
-
-			clickEvent(dom, data);
-		});
-
-	}
-
-	function hash(dom) {
-
-		return dom.parent().parent().prev();
-	}
-
-
-	pearMenu.prototype.skin = function(skin) {
-
-		var menu = $(".pear-nav-tree[lay-filter='" + this.option.elem + "']").parent();
-
-		menu.removeClass("dark-theme");
-		menu.removeClass("light-theme");
-
-		menu.addClass(skin);
-	}
-
-
-	pearMenu.prototype.selectItem = function(pearId) {
-
-		if (this.option.control != false) {
-
-			$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find("ul").css({
-				display: "none"
-			});
-
-			$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find(".layui-this").removeClass(
-				"layui-this");
-
-			$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").css({
-				display: "block"
-			});
-
-			var controlId = $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").attr("pear-id");
-
-			$("#" + this.option.control).find(".layui-this").removeClass("layui-this");
-
-			$("#" + this.option.control).find("[pear-id='" + controlId + "']").addClass("layui-this");
-		}
-
-
-		// 根 据 菜 单 Id 选 中 菜 单 项 目
-
-
-		$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass(
-			"layui-nav-itemed");
-
-		$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass(
-			"layui-this");
-
-		// 通 过 动 画 打 开 当 前 菜 单 项 layui-nav-child
-
-		if (!$("#" + this.option.elem).is(".pear-nav-mini")) {
-
-			$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-nav-item").addClass("layui-nav-itemed");
-
-			$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("dd").addClass("layui-nav-itemed");
-
-		}
-
-		$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parent().addClass("layui-this");
-	}
-
-
-	var activeMenus;
-
-	pearMenu.prototype.collaspe = function(time) {
-
-		var elem = this.option.elem;
-
-		var config = this.option;
-
-		if ($("#" + this.option.elem).is(".pear-nav-mini")) {
-
-			$.each(activeMenus, function(i, item) {
-				$("#" + elem + " a[menu-id='" + $(this).attr("menu-id") + "']").parent().addClass("layui-nav-itemed");
-			})
-
-			$("#" + this.option.elem).removeClass("pear-nav-mini");
-
-			$("#" + this.option.elem).animate({
-				width: "220px"
-			}, 150);
-
-			isHoverMenu(false, config);
-
-		} else {
-
-			activeMenus = $("#" + this.option.elem).find(".layui-nav-itemed>a");
-			$("#" + this.option.elem).find(".layui-nav-itemed").removeClass("layui-nav-itemed");
-
-			$("#" + this.option.elem).addClass("pear-nav-mini");
-
-			$("#" + this.option.elem).animate({
-				width: "60px"
-			}, 400);
-			isHoverMenu(true, config);
-
-		}
-	}
-
-	/** 同 步 请 求 获 取 数 据 */
-	function getData(url) {
-
-		$.ajaxSettings.async = false;
-		var data = null;
-
-		$.get(url, function(result) {
-			data = result;
-		});
-
-		$.ajaxSettings.async = true;
-		return data;
-	}
-
-
-	function createMenu(option) {
-		// 声 明 头 部
-		var menuHtml = '<ul lay-filter="' + option.elem +
-			'" class="layui-nav arrow   pear-menu layui-nav-tree pear-nav-tree">'
-		// 开 启 同 步 操 作
-		$.each(option.data, function(i, item) {
-			// 创 建 每 一 个 菜 单 项
-
-			var content = '<li class="layui-nav-item" >';
-
-			if (i == option.defaultOpen) {
-				content = '<li class="layui-nav-item layui-nav-itemed" >';
-			}
-
-			var href = "javascript:;";
-			var target = "";
-			var className = "site-demo-active"
-
-			if (item.openType == "_blank" && item.type == 1) {
-				href = item.href;
-				target = "target='_blank'";
-				className = "";
-			}
-
-			// 判 断 菜 单 类 型 0 是 不可跳转的目录 1 是 可 点 击 跳 转 的 菜 单
-			if (item.type == 0) {
-				// 创 建 目 录 结 构
-				content += '<a  href="javascript:;" menu-type="' + item.type + '" menu-id="' + item.id + '" href="' + href +
-					'" ' + target + '><i class="' + item.icon + '"></i><span>' + item.title +
-					'</span></a>';
-			} else if (item.type == 1) {
-				
-				// 创 建 菜 单 结 构
-				content += '<a class="' + className + '" menu-type="' + item.type + '" menu-url="' + item.href + '" menu-id="' +
-					item.id +
-					'" menu-title="' + item.title + '"  href="' + href + '"  ' + target + '><i class="' + item.icon +
-					'"></i><span>' + item.title + '</span></a>';
-			}
-			// 调 用 递 归 方 法 加 载 无 限 层 级 的 子 菜 单 
-			content += loadchild(item);
-			// 结 束 一 个 根 菜 单 项
-			content += '</li>';
-			menuHtml += content;
-
-		});
-		// 结 束 菜 单 结 构 的 初 始 化
-		menuHtml += "</ul>";
-		// 将 菜 单 拼 接 到 初 始 化 容 器 中
-
-		$("#" + option.elem).html(menuHtml);
-
-	}
-
-
-	function createMenuAndControl(option) {
-
-		var control = '<ul class="layui-nav pear-nav-control">';
-		// 声 明 头 部
-		var menu = '<div class="layui-side-scroll ' + option.theme + '">'
-		// 开 启 同 步 操 作
-
-		var index = 0;
-
-		$.each(option.data, function(i, item) {
-
-			var menuItem = '';
-
-			var controlItem = '';
-
-
-			if (index === option.defaultMenu) {
-
-				controlItem = '<li pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
-					'" class="layui-this layui-nav-item"><a href="#">' + item.title + '</a></li>';
-
-				menuItem = '<ul  pear-id="' + item.id + '" lay-filter="' + option.elem +
-					'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
-
-			} else {
-
-				controlItem = '<li  pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
-					'" class="layui-nav-item"><a href="#">' + item.title + '</a></li>';
-
-				menuItem = '<ul style="display:none" pear-id="' + item.id + '" lay-filter="' + option.elem +
-					'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
-
-			}
-
-			index++;
-
-			$.each(item.children, function(i, note) {
-
-				// 创 建 每 一 个 菜 单 项
-				var content = '<li class="layui-nav-item" >';
-
-				var href = "javascript:;";
-
-				var target = "";
-
-				var className = "site-demo-active";
-
-				if (note.openType == "_blank" && note.type == 1) {
-
-					href = note.href;
-					target = "target='_blank'";
-					className = "";
-				}
-
-
-				// 判 断 菜 单 类 型 0 是 不可跳转的目录 1 是 可 点 击 跳 转 的 菜 单
-				if (note.type == 0) {
-					// 创 建 目 录 结 构
-					content += '<a  href="' + href + '" ' + target + ' menu-type="' + note.type + '" menu-id="' + note.id +
-						'" ><i class="' + note.icon + '"></i><span>' + note.title +
-						'</span></a>';
-				} else if (note.type == 1) {
-					// 创 建 菜 单 结 构
-					content += '<a ' + target + ' class="' + className + '" menu-type="' + note.type + '" menu-url="' + note.href +
-						'" menu-id="' + note.id +
-						'" menu-title="' + note.title + '" href="' + href + '"><i class="' + note.icon +
-						'"></i><span>' + note.title + '</span></a>';
-				}
-				// 调 用 递 归 方 法 加 载 无 限 层 级 的 子 菜 单 
-				content += loadchild(note);
-				// 结 束 一 个 根 菜 单 项
-				content += '</li>';
-
-				menuItem += content;
-
-			})
-
-
-			menu += menuItem + '</ul>';
-
-			control += controlItem;
-
-		})
-
-
-		$("#" + option.control).html(control);
-
-		$("#" + option.elem).html(menu);
-
-		$("#" + option.control + " .pear-nav-control").on("click", "li", function() {
-
-			$("#" + option.elem).find(".pear-nav-tree").css({
-				display: 'none'
-			});
-
-			$("#" + option.elem).find(".pear-nav-tree[pear-id='" + $(this).attr("pear-id") + "']").css({
-				display: 'block'
-			});
-
-			option.change($(this).attr("pear-id"), $(this).attr("pear-title"), $(this).attr("pear-href"))
-		})
-
-	}
-
-	/** 加载子菜单 (递归)*/
-	function loadchild(obj) {
-
-		// 判 单 是 否 是 菜 单， 如 果 是 菜 单 直 接 返 回
-		if (obj.type == 1) {
-			return "";
-		}
-
-		// 创 建 子 菜 单 结 构
-		var content = '<dl class="layui-nav-child">';
-
-		// 如 果 嵌 套 不 等 于 空 
-		if (obj.children != null && obj.children.length > 0) {
-			// 遍 历 子 项 目
-			$.each(obj.children, function(i, note) {
-				// 创 建 子 项 结 构
-				content += '<dd>';
-
-				var href = "javascript:;";
-
-				var target = "";
-
-				var className = "site-demo-active";
-
-				if (note.openType == "_blank" && note.type == 1) {
-					href = note.href;
-					target = "target='_blank'";
-					className = "";
-				}
-
-				// 判 断 子 项 类 型
-				if (note.type == 0) {
-					// 创 建 目 录 结 构
-					content += '<a ' + target + '  href="' + href + '" menu-type="' + note.type + '" menu-id="' + note.id +
-						'"><i class="' + note.icon + '"></i><span>' + note.title + '</span></a>';
-				} else if (note.type == 1) {
-					// 创 建 菜 单 结 构
-					content += '<a ' + target + ' class="' + className + '" menu-type="' + note.type + '" menu-url="' + note.href +
-						'" menu-id="' + note.id + '" menu-title="' + note.title + '" menu-icon="' + note.icon + '" href="' + href +
-						'" ><i class="' + note.icon + '"></i><span>' + note.title + '</span></a>';
-				}
-				// 加 载 子 项 目 录
-				content += loadchild(note);
-				// 结 束 当 前 子 菜 单
-				content += '</dd>';
-			});
-			// 封 装
-
-		} else {
-			content += '<div class="toast"> 无 内 容 </div>';
-		}
-
-		content += '</dl>';
-		return content;
-	}
-
-	function downShow(option) {
-		$("body #" + option.elem).on("click", "a[menu-type='0']", function() {
-
-			if (!$("#" + option.elem).is(".pear-nav-mini")) {
-
-				var superEle = $(this).parent();
-				var ele = $(this).next('.layui-nav-child');
-				var height = ele.height();
-				if ($(this).parent().is(".layui-nav-itemed")) {
-
-					if (option.accordion) {
-						// 手 风 琴 实 现
-						$(this).parent().parent().find(".layui-nav-itemed").removeClass("layui-nav-itemed");
-						$(this).parent().addClass("layui-nav-itemed");
-					}
-
-					ele.height(0);
-
-					ele.animate({
-						height: height + "px"
-					}, 200, function() {
-						ele.css({
-							height: "auto"
-						});
-					});
-
-				} else {
-					
-					$(this).parent().addClass("layui-nav-itemed");
-					
-					ele.animate({
-						height: "0px"
-					}, 200, function() {
-						ele.css({
-							height: "auto"
-						});
-						$(this).parent().removeClass("layui-nav-itemed");
-					});
-				}
-			}
-		})
-
-
-	}
-
-	/** 二 级 悬 浮 菜 单*/
-	function isHoverMenu(b, option) {
-		if (b) {
-			$("#" + option.elem + ".pear-nav-mini .layui-nav-item,#" + option.elem + ".pear-nav-mini dd").hover(function() {
-
-				$(this).children(".layui-nav-child").addClass("layui-nav-hover");
-
-				var top = $(this).offset().top + 5;
-
-
-				if (!$(this).is(".layui-nav-item")) {
-
-					var left = $(this).offset().left + 132;
-
-                    $(this).children(".layui-nav-child").offset({
-						left: left
-					});
-
-				} else {
-					var left = $(this).offset().left + 62;
-
-					$(this).children(".layui-nav-child").offset({
-						left: left
-					});
-
-				}
-				$(this).children(".layui-nav-child").offset({
-					top: top
-				});
-
-			}, 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'
-				});
-			})
-		} else {
-			$("#" + option.elem + " .layui-nav-item").off('mouseenter').unbind('mouseleave');
-			$("#" + option.elem + " dd").off('mouseenter').unbind('mouseleave');
-		}
-	}
-	exports(MOD_NAME, new pearMenu());
-})
diff --git a/component/layui/lay/extends/pearTab.js b/component/layui/lay/extends/pearTab.js
deleted file mode 100644
index 202bf94..0000000
--- a/component/layui/lay/extends/pearTab.js
+++ /dev/null
@@ -1,569 +0,0 @@
-layui.define(['jquery', 'element'], function(exports) {
-	"use strict";
-
-	var MOD_NAME = 'pearTab',
-		$ = layui.jquery,
-		element = layui.element;
-
-	var pearTab = function(opt) {
-		this.option = opt;
-	};
-
-
-	pearTab.prototype.render = function(opt) {
-		//默认配置值
-		var option = {
-			elem: opt.elem,
-			data: opt.data,
-			tool: opt.tool,
-			roll: opt.roll,
-			index: opt.index,
-			width: opt.width,
-			height: opt.height,
-			tabMax: opt.tabMax,
-			closeEvent: opt.closeEvent
-		}
-
-		var tab = createTab(option);
-
-		$("#" + option.elem).html(tab);
-
-		$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-prev").click(function() {
-			rollPage("left", option);
-		})
-
-		$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-next").click(function() {
-			rollPage("right", option);
-		})
-
-		element.init();
-
-		toolEvent(option);
-
-		$("#" + option.elem).width(opt.width);
-		$("#" + option.elem).height(opt.height);
-		$("#" + option.elem).css({
-			position: "relative"
-		});
-
-        closeEvent(option);
-
-		return new pearTab(option);
-	}
-
-	pearTab.prototype.click = function(callback) {
-
-		var elem = this.option.elem;
-
-		element.on('tab(' + this.option.elem + ')', function(data) {
-
-			var id = $("#" + elem + " .layui-tab-title .layui-this").attr("lay-id");
-
-			callback(id);
-
-		});
-	}
-
-	pearTab.prototype.positionTab = function() {
-		var $tabTitle = $('.layui-tab[lay-filter=' + this.option.elem + ']  .layui-tab-title');
-		var autoLeft = 0;
-		$tabTitle.children("li").each(function() {
-			if ($(this).hasClass('layui-this')) {
-				return false;
-			} else {
-				autoLeft += $(this).outerWidth();
-			}
-		});
-
-		$tabTitle.animate({
-			scrollLeft: autoLeft - $tabTitle.width() / 3
-		}, 200);
-	}
-
-	pearTab.prototype.addTab = function(opt) {
-
-		var title = '';
-
-		if (opt.close) {
-
-			title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-
-		} else {
-
-			title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-
-		}
-
-		element.tabAdd(this.option.elem, {
-			title: title,
-			content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
-				opt.url + '" style="width:100%;height:100%;"></iframe>',
-			id: opt.id
-		});
-
-
-		element.tabChange(this.option.elem, opt.id);
-
-	}
-
-	var index = 0;
-
-	pearTab.prototype.addTabOnlyByElem = function(elem, opt, time) {
-		var title = '';
-		if (opt.close) {
-			title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-		} else {
-			title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-		}
-		if ($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]").length <= 0) {
-
-			if (time != false && time != 0) {
-
-				var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
-					'<div class="ball-loader">' +
-					'<span></span><span></span><span></span><span></span>' +
-					'</div>' +
-					'</div>'
-
-				$("#" + elem).find(".pear-tab").append(load);
-
-				var pearLoad = $("#" + elem).find("#pear-tab-loading" + index);
-
-				pearLoad.css({
-					display: "block"
-				});
-
-				setTimeout(function() {
-
-					pearLoad.fadeOut(500, function() {
-						pearLoad.remove();
-					});
-
-				}, time);
-
-				index++;
-			}
-
-			element.tabAdd(elem, {
-				title: title,
-				content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
-					opt.url + '" style="width:100%;height:100%;"></iframe>',
-				id: opt.id
-			});
-		} else {
-
-			var isData = false;
-
-			$.each($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]"), function() {
-
-				if ($(this).attr("lay-id") == opt.id) {
-
-					isData = true;
-				}
-			})
-
-			if (isData == false) {
-
-				if (time != false && time != 0) {
-
-					var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
-						'<div class="ball-loader">' +
-						'<span></span><span></span><span></span><span></span>' +
-						'</div>' +
-						'</div>'
-
-					$("#" + elem).find(".pear-tab").append(load);
-
-					var pearLoad = $("#" + elem).find("#pear-tab-loading" + index);
-
-					pearLoad.css({
-						display: "block"
-					});
-
-					setTimeout(function() {
-
-						pearLoad.fadeOut(500, function() {
-							pearLoad.remove();
-						});
-
-					}, time);
-
-					index++;
-				}
-
-				element.tabAdd(elem, {
-					title: title,
-					content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
-						opt.url + '" style="width:100%;height:100%;"></iframe>',
-					id: opt.id
-				});
-
-
-			}
-		}
-		element.tabChange(elem, opt.id);
-	}
-
-
-	/** 添 加 唯 一 选 项 卡 */
-	pearTab.prototype.addTabOnly = function(opt, time) {
-
-		var title = '';
-
-		if (opt.close) {
-
-			title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-
-		} else {
-
-			title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-
-		}
-
-		if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length <= 0) {
-
-			if (time != false && time != 0) {
-
-				var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
-					'<div class="ball-loader">' +
-					'<span></span><span></span><span></span><span></span>' +
-					'</div>' +
-					'</div>'
-
-				$("#" + this.option.elem).find(".pear-tab").append(load);
-
-				var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
-
-				pearLoad.css({
-					display: "block"
-				});
-
-				setTimeout(function() {
-
-					pearLoad.fadeOut(500, function() {
-						pearLoad.remove();
-					});
-
-				}, time);
-
-				index++;
-			}
-
-
-			element.tabAdd(this.option.elem, {
-				title: title,
-				content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
-					opt.url + '" style="width:100%;height:100%;"></iframe>',
-				id: opt.id
-			});
-
-
-
-		} else {
-
-			var isData = false;
-
-			//查询当前选项卡数量
-			if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
-				layer.msg("最多打开" + this.option.tabMax + "个标签页",{icon:3,time:1000});
-				return false;
-			}
-
-
-			$.each($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]"), function() {
-
-				if ($(this).attr("lay-id") == opt.id) {
-
-					isData = true;
-				}
-			})
-			if (isData == false) {
-
-				if (time != false && time != 0) {
-
-					var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
-						'<div class="ball-loader">' +
-						'<span></span><span></span><span></span><span></span>' +
-						'</div>' +
-						'</div>'
-
-					$("#" + this.option.elem).find(".pear-tab").append(load);
-
-					var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
-
-					pearLoad.css({
-						display: "block"
-					});
-
-					setTimeout(function() {
-
-						pearLoad.fadeOut(500, function() {
-							pearLoad.remove();
-						});
-
-					}, time);
-
-					index++;
-				}
-
-				element.tabAdd(this.option.elem, {
-					title: title,
-					content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
-						opt.url + '" style="width:100%;height:100%;"></iframe>',
-					id: opt.id
-				});
-
-
-			}
-		}
-		element.tabChange(this.option.elem, opt.id);
-	}
-
-
-	// 刷 新 指 定 的 选 项 卡
-	pearTab.prototype.refresh = function(time) {
-
-
-		// 刷 新 指 定 的 选 项 卡
-		if (time != false && time != 0) {
-
-			var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
-				'<div class="ball-loader">' +
-				'<span></span><span></span><span></span><span></span>' +
-				'</div>' +
-				'</div>'
-
-			$("#" + this.option.elem).find(".pear-tab").append(load);
-
-			var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
-
-			pearLoad.css({
-				display: "block"
-			});
-
-			setTimeout(function() {
-
-				pearLoad.fadeOut(500, function() {
-					pearLoad.remove();
-				});
-
-			}, time);
-
-			index++;
-		}
-		$(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow
-			.location.reload(true);
-
-	}
-
-	// 重写 Tab Delete 删除 ， 源码存在 Bug 所以重写
-
-	function tabDelete(elem, id,callback) {
-
-		//根据 elem id 来删除指定的 layui title li
-
-		var tabTitle = $(".layui-tab[lay-filter='" + elem + "']").find(".layui-tab-title");
-
-		// 删除指定 id 的 title
-
-		var removeTab = tabTitle.find("li[lay-id='" + id + "']");
-
-		var nextNode = removeTab.next("li");
-		
-		var currId ;
-
-		if (nextNode.length) {
-			
-			nextNode.addClass("layui-this");
-
-			currId = nextNode.attr("lay-id");
-			
-			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
-
-		} else {
-
-			var prevNode = removeTab.prev("li");
-
-			prevNode.addClass("layui-this");
-
-			currId = prevNode.attr("lay-id");
-
-			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
-			
-		}
-		
-		callback(currId);
-
-		removeTab.remove();
-
-		// 删除 content
-		var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
-
-		tabContent.remove();
-
-	}
-
-
-	function createTab(option) {
-
-		var type = "";
-
-		if (option.roll == true) {
-
-			type = "layui-tab-roll";
-		}
-
-		if (option.tool != false) {
-			type = "layui-tab-tool";
-		}
-
-		if (option.roll == true && option.tool != false) {
-			type = "layui-tab-rollTool";
-		}
-
-		var tab = '<div class="pear-tab ' + type + ' layui-tab" lay-filter="' + option.elem + '" lay-allowClose="true">';
-
-		var title = '<ul class="layui-tab-title">';
-
-		var content = '<div class="layui-tab-content">';
-
-		var control =
-			'<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
-
-		// 处 理 选 项 卡 头 部
-
-		var index = 0;
-
-		$.each(option.data, function(i, item) {
-
-			var TitleItem = '';
-
-			if (option.index == index) {
-
-				TitleItem += '<li lay-id="' + item.id + '" class="layui-this"><span class="pear-tab-active"></span>';
-
-			} else {
-
-				TitleItem += '<li lay-id="' + item.id + '" ><span class="pear-tab-active"></span>';
-
-			}
-
-			if (item.close) {
-				// 当 前 选 项 卡 可 以 关 闭
-				TitleItem += '<span class="able-close">' + item.title + '</span>';
-			} else {
-				// 当 前 选 项 卡 不 允 许 关 闭
-				TitleItem += '<span class="disable-close">' + item.title + '</span>';
-			}
-
-			TitleItem += '<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>';
-
-			title += TitleItem;
-
-
-			if (option.index == index) {
-
-				// 处 理 显 示 内 容
-				content += '<div class="layui-show layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id +
-					'"  src="' + item.url +
-					'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
-
-			} else {
-
-				// 处 理 显 示 内 容
-				content += '<div class="layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id + '"  src="' +
-					item.url +
-					'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
-
-			}
-			index++;
-		});
-
-		title += '</ul>';
-		content += '</div>';
-
-		// 处 理 工 具 栏 
-
-		control += '<dd id="closeThis"><a href="#">关 闭 当 前</a></dd>'
-		control += '<dd id="closeOther"><a href="#">关 闭 其 他</a></dd>'
-		control += '<dd id="closeAll"><a href="#">关 闭 全 部</a></dd>'
-		control += '</dl></li></ul></li></div>';
-
-		tab += title;
-		tab += control;
-		tab += content;
-		tab += '</div>';
-		tab += ''
-		return tab;
-	}
-
-	function rollPage(d, option) {
-		var $tabTitle = $('#' + option.elem + '  .layui-tab-title');
-
-		var left = $tabTitle.scrollLeft();
-
-		if ('left' === d) {
-
-			$tabTitle.animate({
-				scrollLeft: left - 450
-			}, 200);
-
-		} else {
-
-			$tabTitle.animate({
-				scrollLeft: left + 450
-			}, 200);
-		}
-	}
-
-	function closeEvent(option) {
-		$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
-
-			var layid = $(this).parent().attr("lay-id");
-			tabDelete(option.elem, layid,option.closeEvent);
-		})
-	}
-
-	function toolEvent(option) {
-
-		$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeThis", function() {
-			var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
-			if (currentTab.find("span").is(".able-close")) {
-				var currentId = currentTab.attr("lay-id");
-				tabDelete(option.elem, currentId,option.closeEvent);
-			}
-
-		})
-
-		$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeOther", function() {
-			var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
-			var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
-			$.each(tabtitle, function(i) {
-				if ($(this).attr("lay-id") != currentId) {
-					if ($(this).find("span").is(".able-close")) {
-						tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
-					}
-				}
-			})
-		})
-
-		$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeAll", function() {
-
-			var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
-			var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
-			$.each(tabtitle, function(i) {
-				if ($(this).find("span").is(".able-close")) {
-					tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
-				}
-			})
-		})
-	}
-
-	exports(MOD_NAME, new pearTab());
-})
diff --git a/component/pear/css/pear-module/form.css b/component/pear/css/pear-module/form.css
new file mode 100644
index 0000000..fee0c13
--- /dev/null
+++ b/component/pear/css/pear-module/form.css
@@ -0,0 +1,3 @@
+.layui-input, .layui-textarea{
+	border-radius: 4px;
+}
\ No newline at end of file
diff --git a/component/pear/css/pear-module/layout.css b/component/pear/css/pear-module/layout.css
index 1e8ed13..3a9ed38 100644
--- a/component/pear/css/pear-module/layout.css
+++ b/component/pear/css/pear-module/layout.css
@@ -1,4 +1,32 @@
 .pear-container{
 	margin: 10px;
 	background-color: whitesmoke;
+}
+
+body::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+}
+
+body::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+body::-webkit-scrollbar-track {
+	background: white;
+	border-radius: 2px;
+}
+
+body::-webkit-scrollbar-thumb {
+	background: #E6E6E6;
+	border-radius: 2px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+	background: #E6E6E6;
+}
+
+body::-webkit-scrollbar-corner {
+	background: #f6f6f6;
 }
\ No newline at end of file
diff --git a/component/pear/css/pear-module/menu.css b/component/pear/css/pear-module/menu.css
index 13280e0..a45784e 100644
--- a/component/pear/css/pear-module/menu.css
+++ b/component/pear/css/pear-module/menu.css
@@ -1,5 +1,5 @@
 .pear-nav-tree {
-	width: 220px;
+	width: 230px;
 	border-radius: 0px;
 	background-color: #28333E;
 }
diff --git a/component/pear/css/pear-module/tab.css b/component/pear/css/pear-module/tab.css
index 202df97..d81771d 100644
--- a/component/pear/css/pear-module/tab.css
+++ b/component/pear/css/pear-module/tab.css
@@ -64,6 +64,10 @@
 	display: inline-block;
 }
 
+.pear-tab .layui-tab-close{
+	font-size: 13px;
+}
+
 .pear-tab .layui-tab-control>li {
 	position: absolute;
 	top: 0px;
diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css
index 58a3d1a..c39db1e 100644
--- a/component/pear/css/pear.css
+++ b/component/pear/css/pear.css
@@ -6,4 +6,5 @@
 @import url("pear-module/frame.css");
 @import url("pear-module/menu.css");
 @import url("pear-module/form.css");
+@import url("pear-module/form.css");
 @import url("pear-module/tab.css");
diff --git a/component/pear/module/admin.js b/component/pear/module/admin.js
index fb0e00b..92738f8 100644
--- a/component/pear/module/admin.js
+++ b/component/pear/module/admin.js
@@ -72,8 +72,19 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 					})
 
 					$("body").on("click", ".refresh", function() {
-
-						bodyTab.refresh(600);
+						$(".refresh a").removeClass("layui-icon-refresh-1");
+						$(".refresh a").addClass("layui-anim");
+						$(".refresh a").addClass("layui-anim-rotate");
+						$(".refresh a").addClass("layui-anim-loop");
+						$(".refresh a").addClass("layui-icon-loading");
+						bodyTab.refresh(400);
+						setTimeout(function() {
+							$(".refresh a").addClass("layui-icon-refresh-1");
+							$(".refresh a").removeClass("layui-anim");
+							$(".refresh a").removeClass("layui-anim-rotate");
+							$(".refresh a").removeClass("layui-anim-loop");
+							$(".refresh a").removeClass("layui-icon-loading");
+						}, 600)
 					})
 
 					sideMenu.click(function(dom, data) {
@@ -100,27 +111,35 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
 					});
 
 					$("body").on("click", ".refresh", function() {
-
-						bodyFrame.refresh(600);
+						$(".refresh a").removeClass("layui-icon-refresh-1");
+						$(".refresh a").addClass("layui-anim");
+						$(".refresh a").addClass("layui-anim-rotate");
+						$(".refresh a").addClass("layui-anim-loop");
+						$(".refresh a").addClass("layui-icon-loading");
+						bodyFrame.refresh(400);
+						setTimeout(function() {
+							$(".refresh a").addClass("layui-icon-refresh-1");
+							$(".refresh a").removeClass("layui-anim");
+							$(".refresh a").removeClass("layui-anim-rotate");
+							$(".refresh a").removeClass("layui-anim-loop");
+							$(".refresh a").removeClass("layui-icon-loading");
+						}, 600)
 					})
 
 					sideMenu.click(function(dom, data) {
 						bodyFrame.changePage(data.menuUrl, data.menuPath, true);
-
 						compatible()
 					})
 				}
 			}
 
 			this.keepLoad = function(option) {
-				
+
 				compatible()
 
 				setTimeout(function() {
 					$(".loader-main").fadeOut(option.done);
 				}, option.keepLoad)
-
-
 			}
 		};
 
diff --git a/component/pear/module/menu.js b/component/pear/module/menu.js
index 3fa0829..3d92550 100644
--- a/component/pear/module/menu.js
+++ b/component/pear/module/menu.js
@@ -83,7 +83,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
 			var domss = hash(doms);
 
 			if (domss.text() != '') {
-                data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
+				data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
 			}
 
 			var domsss = hash(domss);
@@ -110,7 +110,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
 
 		menu.removeClass("dark-theme");
 		menu.removeClass("light-theme");
-
 		menu.addClass(skin);
 	}
 
@@ -438,7 +437,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
 				if ($(this).parent().is(".layui-nav-itemed")) {
 
 					if (option.accordion) {
-						// 手 风 琴 实 现
 						$(this).parent().parent().find(".layui-nav-itemed").removeClass("layui-nav-itemed");
 						$(this).parent().addClass("layui-nav-itemed");
 					}
@@ -481,7 +479,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
 
 				var top = $(this).offset().top + 5;
 
-
 				if (!$(this).is(".layui-nav-item")) {
 
 					var left = $(this).offset().left + 132;
diff --git a/component/pear/module/tab.js b/component/pear/module/tab.js
index c36c2a1..c232a2a 100644
--- a/component/pear/module/tab.js
+++ b/component/pear/module/tab.js
@@ -46,7 +46,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			position: "relative"
 		});
 
-        closeEvent(option);
+		closeEvent(option);
 
 		return new pearTab(option);
 	}
@@ -93,7 +93,6 @@ layui.define(['jquery', 'element'], function(exports) {
 
 			title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
 				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
-
 		}
 
 		element.tabAdd(this.option.elem, {
@@ -103,9 +102,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			id: opt.id
 		});
 
-
 		element.tabChange(this.option.elem, opt.id);
-
 	}
 
 	var index = 0;
@@ -265,7 +262,10 @@ layui.define(['jquery', 'element'], function(exports) {
 
 			//查询当前选项卡数量
 			if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
-				layer.msg("最多打开" + this.option.tabMax + "个标签页",{icon:3,time:1000});
+				layer.msg("最多打开" + this.option.tabMax + "个标签页", {
+					icon: 3,
+					time: 1000
+				});
 				return false;
 			}
 
@@ -321,7 +321,6 @@ layui.define(['jquery', 'element'], function(exports) {
 	// 刷 新 指 定 的 选 项 卡
 	pearTab.prototype.refresh = function(time) {
 
-
 		// 刷 新 指 定 的 选 项 卡
 		if (time != false && time != 0) {
 
@@ -349,17 +348,13 @@ layui.define(['jquery', 'element'], function(exports) {
 			}, time);
 
 			index++;
-		}else{
+		} else {
 			$(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow
 				.location.reload(true);
 		}
-		
-
 	}
-
-	// 重写 Tab Delete 删除 ， 源码存在 Bug 所以重写
-
-	function tabDelete(elem, id,callback) {
+	
+	function tabDelete(elem, id, callback) {
 
 		//根据 elem id 来删除指定的 layui title li
 
@@ -370,15 +365,15 @@ layui.define(['jquery', 'element'], function(exports) {
 		var removeTab = tabTitle.find("li[lay-id='" + id + "']");
 
 		var nextNode = removeTab.next("li");
-		
-		var currId ;
+
+		var currId;
 
 		if (nextNode.length) {
-			
+
 			nextNode.addClass("layui-this");
 
 			currId = nextNode.attr("lay-id");
-			
+
 			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
 
 		} else {
@@ -390,9 +385,9 @@ layui.define(['jquery', 'element'], function(exports) {
 			currId = prevNode.attr("lay-id");
 
 			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
-			
+
 		}
-		
+
 		callback(currId);
 
 		removeTab.remove();
@@ -521,7 +516,7 @@ layui.define(['jquery', 'element'], function(exports) {
 		$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
 
 			var layid = $(this).parent().attr("lay-id");
-			tabDelete(option.elem, layid,option.closeEvent);
+			tabDelete(option.elem, layid, option.closeEvent);
 		})
 	}
 
@@ -531,7 +526,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
 			if (currentTab.find("span").is(".able-close")) {
 				var currentId = currentTab.attr("lay-id");
-				tabDelete(option.elem, currentId,option.closeEvent);
+				tabDelete(option.elem, currentId, option.closeEvent);
 			}
 
 		})
@@ -542,7 +537,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			$.each(tabtitle, function(i) {
 				if ($(this).attr("lay-id") != currentId) {
 					if ($(this).find("span").is(".able-close")) {
-						tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
+						tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
 					}
 				}
 			})
@@ -554,7 +549,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
 			$.each(tabtitle, function(i) {
 				if ($(this).find("span").is(".able-close")) {
-					tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
+					tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
 				}
 			})
 		})
diff --git a/index.html b/index.html
index 969f5eb..8682ed3 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<title>Pear Admin Layui</title>
 		<!-- 依 赖 样 式 -->
 		<link rel="stylesheet" href="component/pear/css/pear.css" />
 		<link rel="stylesheet" href="admin/css/load.css" />
@@ -68,12 +69,12 @@
 
 				var config = {
 					keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
-					muiltTab: false, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
+					muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
 					control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
-					index: 'view/console/console1.html', // 默 认 加 载 主 页
+					index: 'view/console/console.html', // 默 认 加 载 主 页
 					data: 'admin/data/menu.json', // 菜 单 数 据 加 载 地 址
 					select: '0', // 默 认 选 中 菜 单 项
-					logoTitle: "Data Pipeline", // 网站标题
+					logoTitle: "Pear Admin", // 网站标题
 					logoImage: "admin/images/logo.png" // 网站Logo
 				};
 				admin.render(config);
diff --git a/view/chart/line.html b/view/chart/line.html
new file mode 100644
index 0000000..b3d07d7
--- /dev/null
+++ b/view/chart/line.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header"></div>
+					<div class="layui-card-body">
+						<div id="echarts-line-1" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['echarts'], function() {
+			var echarts = layui.echarts;
+
+			var echartsLineOne = echarts.init(document.getElementById('echarts-line-1'));
+
+			var option1 = {
+				tooltip: {
+					trigger: 'axis'
+				},
+				xAxis: [{
+					type: 'category',
+					data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
+					axisLine: {
+						lineStyle: {
+							color: "#999"
+						}
+					}
+				}],
+				yAxis: [{
+					type: 'value',
+					splitNumber: 4,
+					splitLine: {
+						lineStyle: {
+							type: 'dashed',
+							color: '#DDD'
+						}
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: "#333"
+						},
+					},
+					nameTextStyle: {
+						color: "#999"
+					},
+					splitArea: {
+						show: false
+					}
+				}],
+				series: [{
+					name: '课时',
+					type: 'line',
+					data: [23, 60, 20, 36, 23, 85],
+					lineStyle: {
+						normal: {
+							width: 8,
+							color: {
+								type: 'linear',
+
+								colorStops: [{
+									offset: 0,
+									color: '#A9F387' // 0% 处的颜色
+								}, {
+									offset: 1,
+									color: '#48D8BF' // 100% 处的颜色
+								}],
+								globalCoord: false // 缺省为 false
+							},
+							shadowColor: 'rgba(72,216,191, 0.3)',
+							shadowBlur: 10,
+							shadowOffsetY: 20
+						}
+					},
+					itemStyle: {
+						normal: {
+							color: '#fff',
+							borderWidth: 10,
+							/*shadowColor: 'rgba(72,216,191, 0.3)',
+							shadowBlur: 100,*/
+							borderColor: "#A9F387"
+						}
+					},
+					smooth: true
+				}]
+			};
+			echartsLineOne.setOption(option1);
+
+			window.onresize = function() {
+				echartsLineOne.resize();
+			}
+		});
+	</script>
+</html>
diff --git a/view/console/console.html b/view/console/console.html
new file mode 100644
index 0000000..448f0c3
--- /dev/null
+++ b/view/console/console.html
@@ -0,0 +1,198 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>首页三</title>
+		<meta name="renderer" content="webkit">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+		<link rel="stylesheet" href="../../assets/console.css" />
+	</head>
+	<body class="pear-container">
+		<div>
+			<div class="layui-row layui-col-space10">
+				<div class="layui-col-xs6 layui-col-md3">
+					<div class="layui-card top-panel">
+						<div class="layui-card-header">今日访问</div>
+						<div class="layui-card-body">
+							<div class="layui-row layui-col-space5">
+								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
+									9,04,0
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-xs6 layui-col-md3">
+					<div class="layui-card top-panel">
+						<div class="layui-card-header">提交次数</div>
+						<div class="layui-card-body">
+							<div class="layui-row layui-col-space5">
+								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
+									6,34,4
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-xs6 layui-col-md3">
+					<div class="layui-card top-panel">
+						<div class="layui-card-header">下载数量</div>
+						<div class="layui-card-body">
+							<div class="layui-row layui-col-space5">
+								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
+									1,34,1
+								</div>
+								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
+									<i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-xs6 layui-col-md3">
+					<div class="layui-card top-panel">
+						<div class="layui-card-header">流量统计</div>
+						<div class="layui-card-body">
+							<div class="layui-row layui-col-space5">
+								<div class="layui-col-xs8 layui-col-md8 top-panel-number">
+									7,04,6
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-row layui-col-space10">
+				<div class="layui-col-md9">
+					<div class="layui-card">
+						<div class="layui-card-body">
+							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+								<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md3">
+					<div class="layui-card">
+						<div class="layui-card-header">最近更新</div>
+						<div class="layui-card-body">
+							<ul class="list">
+								<li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span></li>
+								<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span></li>
+								<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span></li>
+								<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span></li>
+								<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2020-05-13 16:32</span></li>
+								<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span></li>
+								<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span></li>
+								<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span></li>
+							</ul>
+						</div>
+					</div>
+					
+				</div>
+			</div>
+		</div>
+		<!--</div>-->
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['layer', 'echarts', 'element'], function() {
+				var $ = layui.jquery,
+					layer = layui.layer,
+					element = layui.element,
+					echarts = layui.echarts;
+
+				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
+
+				var option = {
+					tooltip: {
+						trigger: 'axis'
+					},
+					xAxis: [{
+						type: 'category',
+						data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
+						axisLine: {
+							lineStyle: {
+								color: "#999"
+							}
+						}
+					}],
+					yAxis: [{
+						type: 'value',
+						splitNumber: 4,
+						splitLine: {
+							lineStyle: {
+								type: 'dashed',
+								color: '#DDD'
+							}
+						},
+						axisLine: {
+							show: false,
+							lineStyle: {
+								color: "#333"
+							},
+						},
+						nameTextStyle: {
+							color: "#999"
+						},
+						splitArea: {
+							show: false
+						}
+					}],
+					series: [{
+						name: '课时',
+						type: 'line',
+						data: [23, 60, 20, 36, 23, 85],
+						lineStyle: {
+							normal: {
+								width: 8,
+								color: {
+									type: 'linear',
+
+									colorStops: [{
+										offset: 0,
+										color: '#A9F387' // 0% 处的颜色
+									}, {
+										offset: 1,
+										color: '#48D8BF' // 100% 处的颜色
+									}],
+									globalCoord: false // 缺省为 false
+								},
+								shadowColor: 'rgba(72,216,191, 0.3)',
+								shadowBlur: 10,
+								shadowOffsetY: 20
+							}
+						},
+						itemStyle: {
+							normal: {
+								color: '#fff',
+								borderWidth: 10,
+								/*shadowColor: 'rgba(72,216,191, 0.3)',
+								shadowBlur: 100,*/
+								borderColor: "#A9F387"
+							}
+						},
+						smooth: true
+					}]
+				};
+				echartsRecords.setOption(option);
+
+				window.onresize = function() {
+					echartsRecords.resize();
+				}
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/view/document/drawer.html b/view/document/drawer.html
index 2d9d065..0648437 100644
--- a/view/document/drawer.html
+++ b/view/document/drawer.html
@@ -20,7 +20,6 @@
 				<button class="drawer-right pear-btn pear-btn-danger">右</button>
 			</div>
 		</div>
-
 		<div class="layui-card">
 			<div class="layui-card-header">进阶</div>
 			<div class="layui-card-body">
@@ -29,16 +28,13 @@
 			</div>
 
 		</div>
-
 		<div class="layui-card">
 			<div class="layui-card-header">扩展</div>
 			<div class="layui-card-body">
 				<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
 				<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
 			</div>
-
 		</div>
-
 		<div class="wrap">
 			<div class="layer-left">
 				<br/>
@@ -64,7 +60,6 @@
 			<div class="layer-close-mask">
 				<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
 			</div>
-			
 			<div class="layer-auto-close">
 				<br/>
 				<h3>打开 2秒 后自动关闭...</h3>
diff --git a/view/document/form.html b/view/document/form.html
new file mode 100644
index 0000000..de67082
--- /dev/null
+++ b/view/document/form.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+		<title>富文本编辑器</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet">
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space15">
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header">输入框</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md12">
+							<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md6">
+							<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md6">
+							<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
+						</div>
+
+						<div class="layui-col-md6">
+							<input type="text" name="title" round placeholder="用户名" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md6">
+							<input type="password" name="title" round placeholder="密码" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md6">
+							<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md6">
+							<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
+						</div>
+
+					</div>
+				</div>
+<div class="layui-card layui-form" lay-filter="component-form-element">
+					<div class="layui-card-header">下拉选择框</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md6">
+							<select name="city" lay-verify="">
+								<option value="">请选择一个城市</option>
+								<option value="010">北京</option>
+								<option value="021">上海</option>
+								<option value="0571">杭州</option>
+							</select>
+						</div>
+						<div class="layui-col-md6">
+							<select name="city" lay-verify="">
+								<option value="010">北京</option>
+								<option value="021" disabled>上海（禁用效果）</option>
+								<option value="0571" selected>杭州</option>
+							</select>
+						</div>
+						<div class="layui-col-md6">
+							<select name="quiz">
+								<option value="">请选择</option>
+								<optgroup label="城市记忆">
+									<option value="你工作的第一个城市">你工作的第一个城市？</option>
+								</optgroup>
+								<optgroup label="学生时代">
+									<option value="你的工号">你的工号？</option>
+									<option value="你最喜欢的老师">你最喜欢的老师？</option>
+								</optgroup>
+							</select>
+						</div>
+						<div class="layui-col-md6">
+							<select name="city" lay-verify="required" lay-search>
+								<option value="">带搜索的选择框</option>
+								<option value="1">layer</option>
+								<option value="2">form</option>
+								<option value="3">layim</option>
+								<option value="4">element</option>
+								<option value="5">laytpl</option>
+								<option value="6">upload</option>
+								<option value="7">laydate</option>
+								<option value="8">laypage</option>
+								<option value="9">flow</option>
+								<option value="10">util</option>
+								<option value="11">code</option>
+								<option value="12">tree</option>
+								<option value="13">layedit</option>
+								<option value="14">nav</option>
+								<option value="15">tab</option>
+								<option value="16">table</option>
+								<option value="17">select</option>
+								<option value="18">checkbox</option>
+								<option value="19">switch</option>
+								<option value="20">radio</option>
+							</select>
+						</div>
+						<div class="layui-col-md12">
+							<select name="city" lay-verify="">
+								<option value="">请选择一个城市</option>
+								<option value="010">北京</option>
+								<option value="021">上海</option>
+								<option value="0571">杭州</option>
+							</select>
+						</div>
+					</div>
+				</div>
+				<div class="layui-card layui-form" lay-filter="component-form-element">
+					<div class="layui-card-header">复选框</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md12">
+							<input type="checkbox" name="" title="写作" checked>
+							<input type="checkbox" name="" title="发呆">
+							<input type="checkbox" name="" title="禁用" disabled>
+						</div>
+						<div class="layui-col-md12">
+							<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
+							<input type="checkbox" name="" title="发呆" lay-skin="primary">
+							<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
+							<input type="checkbox" name="" lay-skin="primary">
+						</div>
+					</div>
+				</div>
+				<div class="layui-card layui-form" lay-filter="component-form-element">
+					<div class="layui-card-header">开关</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md12">
+							<input type="checkbox" name="xxx" lay-skin="switch">
+							<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
+							<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
+							<input type="checkbox" name="aaa" lay-skin="switch" disabled>
+						</div>
+					</div>
+				</div>
+				<div class="layui-card layui-form" lay-filter="component-form-element">
+					<div class="layui-card-header">单选框</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md12">
+							<input type="radio" name="sex" value="nan" title="男">
+							<input type="radio" name="sex" value="nv" title="女" checked>
+							<input type="radio" name="sex" value="" title="中性" disabled>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header">文本域</div>
+					<div class="layui-card-body layui-row layui-col-space10">
+						<div class="layui-col-md12">
+							<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
+						</div>
+					</div>
+				</div>
+				<div class="layui-card">
+					<div class="layui-card-header">响应式组合</div>
+					<div class="layui-card-body">
+						<form class="layui-form" action="" lay-filter="component-form-element">
+							<div class="layui-row layui-col-space10 layui-form-item">
+								<div class="layui-col-lg6">
+									<label class="layui-form-label">员工姓名：</label>
+									<div class="layui-input-block">
+										<input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
+									</div>
+								</div>
+								<div class="layui-col-lg6">
+									<label class="layui-form-label">技术工种：</label>
+									<div class="layui-input-block">
+										<select name="type" lay-verify="required" lay-filter="aihao">
+											<option value=""></option>
+											<option value="0">前端工程师</option>
+											<option value="1">Node.js工程师</option>
+											<option value="2">PHP工程师</option>
+											<option value="3">Java工程师</option>
+											<option value="4">运维</option>
+											<option value="4">视觉设计师</option>
+										</select>
+									</div>
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<label class="layui-form-label">兴趣爱好：</label>
+								<div class="layui-input-block">
+									<input type="checkbox" name="interest[write]" title="写作">
+									<input type="checkbox" name="interest[read]" title="阅读">
+									<input type="checkbox" name="interest[code]" title="代码" checked>
+									<input type="checkbox" name="interest[dreaming]" title="做梦">
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<label class="layui-form-label">是否婚姻：</label>
+								<div class="layui-input-block">
+									<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<label class="layui-form-label">所属职称：</label>
+								<div class="layui-input-block">
+									<input type="radio" name="role" value="" title="经理">
+									<input type="radio" name="role" value="" title="主管">
+									<input type="radio" name="role" value="" title="码农" checked>
+									<input type="radio" name="role" value="" title="端水">
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<label class="layui-form-label">其它信息：</label>
+								<div class="layui-input-block">
+									<textarea name="other" placeholder="" class="layui-textarea"></textarea>
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<label class="layui-form-label"> </label>
+								<div class="layui-input-block">
+									<input type="checkbox" name="agreement" title="同意" lay-skin="primary" checked>
+								</div>
+							</div>
+							<div class="layui-form-item">
+								<div class="layui-input-block">
+									<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
+									<button type="reset" class="layui-btn layui-btn-primary">重置</button>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form'], function() {
+				var form = layui.form;
+
+			});
+		</script>
+	</body>
+</html>