diff --git a/app/admin/controller/addon/Addons.php b/app/admin/controller/addon/Addons.php
index bf70dbe..bec3001 100644
--- a/app/admin/controller/addon/Addons.php
+++ b/app/admin/controller/addon/Addons.php
@@ -390,6 +390,9 @@ class Addons extends AdminController
     public function upgrade()
     {
         $data = Request::only(['name','version','uid','token']);
+        // 接口
+        $response = HttpHelper::withHost()->post('/v1/getaddons',$data)->toJson();
+        if($response->code < 0) return json($response);
         // 获取配置信息
         $config = get_addons_config($data['name']);
         // 卸载插件
@@ -406,7 +409,9 @@ class Addons extends AdminController
 
         try {
             // 升级安装，第二个type参数false为升级，true安装
-            $res = $this->install($data,false);
+            $installRes = $this->install($data,false);
+            $res = $installRes->getData();
+            if($res['code'] == -1) return json(['code' => -1, 'msg' => $res['msg']]);
             // 升级sql
             $sqlUpdateFile = root_path().'addons/'.$data['name'].'/update.sql';
             if(file_exists($sqlUpdateFile)) {
diff --git a/app/admin/controller/user/User.php b/app/admin/controller/user/User.php
index 3372eff..e4bcaca 100644
--- a/app/admin/controller/user/User.php
+++ b/app/admin/controller/user/User.php
@@ -37,7 +37,7 @@ class User extends AdminController
 		if(Request::isAjax()){
 			$datas = Request::only(['id','name','email','sex','status']);
 			$map = array_filter($datas,[$this,'filtrArr']);
-            halt($map);
+
 			$user = Db::name('user')->where(['delete_time'=>0])->where($map)->order('id desc')->paginate([
                 'list_rows' => input('limit'),
                 'page' => input('page')
diff --git a/app/common/model/Comment.php b/app/common/model/Comment.php
index f54d1b7..8654763 100644
--- a/app/common/model/Comment.php
+++ b/app/common/model/Comment.php
@@ -35,8 +35,12 @@ class Comment extends Model
 	//获取评论
     public function getComment($id, $page)
     {
-	    $comments = $this::with(['user'])->where(['article_id'=>(int)$id,'status'=>1])->order(['cai'=>'asc','create_time'=>'asc'])->paginate(['list_rows'=>10, 'page'=>$page]);
-	    return $comments;
+        return $this::with(['user'])
+            ->where(['article_id'=>(int)$id,'status'=>1])
+            ->order(['cai'=>'asc','create_time'=>'asc'])
+            ->paginate(['list_rows'=>10, 'page'=>$page])
+            ->toArray();
+
     }
 
     //回帖榜
diff --git a/app/index/controller/Article.php b/app/index/controller/Article.php
index dbb80bd..cec1c24 100644
--- a/app/index/controller/Article.php
+++ b/app/index/controller/Article.php
@@ -137,6 +137,7 @@ class Article extends BaseController
 
 		//评论
 		$comments = $this->getComments($id, $page);
+        //halt($comments);
 		//最新评论时间
 		$lrDate_time = Db::name('comment')->where('article_id', $id)->max('update_time',false) ?? time();
 		//	热议文章
@@ -149,7 +150,7 @@ class Article extends BaseController
         $ad_comm = $ad->getSliderList(7);
 		//push
 		$push_js = Db::name('push_jscode')->where(['delete_time'=>0,'type'=>1])->cache(true)->select();
-		
+
 		View::assign([
 			'article'	=> $artDetail,
 			'pv'		=> $pv,
diff --git a/app/index/route/route.php b/app/index/route/route.php
index d1e02ec..faf047b 100644
--- a/app/index/route/route.php
+++ b/app/index/route/route.php
@@ -68,6 +68,7 @@ Route::get('arttag','tag/getArticleTag')->name('get_art_tag');
 Route::group(function () use($detail_as, $cate_as){
 	// 动态路径路由会影响下面的路由，所以动态路由放下面
 	Route::get($detail_as . ':id$', 'article/detail')->name('article_detail');
+    Route::get($detail_as . '<id>/<page>$', 'article/detail')->name('article_comment');
 	Route::get($cate_as . '<ename>$','article/cate')->name('cate');
 	Route::get($cate_as . '<ename>/<type>$', 'article/cate')->name('cate_type');
 	Route::get($cate_as . '<ename>/<type>/<page>$', 'article/cate')->name('cate_page');
diff --git a/config/taoler.php b/config/taoler.php
index c29298a..dacee23 100644
--- a/config/taoler.php
+++ b/config/taoler.php
@@ -16,7 +16,7 @@ return [
 	// 应用名,此项不可更改
 	'appname'	=> 'TaoLer',
     // 版本配置
-    'version'   => '2.2.5',
+    'version'   => '2.2.7',
 	// 加盐
 	'salt'		=> 'taoler',
 	// 数据库备份目录
diff --git a/public/view/common/blog/js/theme.js b/public/view/common/blog/js/theme.js
new file mode 100644
index 0000000..17d091a
--- /dev/null
+++ b/public/view/common/blog/js/theme.js
@@ -0,0 +1 @@
+function ncPopupTips(f,d){var e=f?'<span class="d-block h1 text-success mb-2"><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1553065772988" class="icon w-56" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M666.272 472.288l-175.616 192a31.904 31.904 0 0 1-23.616 10.4h-0.192a32 32 0 0 1-23.68-10.688l-85.728-96a32 32 0 1 1 47.744-42.624l62.144 69.6 151.712-165.888a32 32 0 1 1 47.232 43.2m-154.24-344.32C300.224 128 128 300.32 128 512c0 211.776 172.224 384 384 384 211.68 0 384-172.224 384-384 0-211.68-172.32-384-384-384" p-id="2923"></path></svg></span>':'<span class="d-block h1 text-danger mb-2"><?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1553065784656" class="icon w-56" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3053" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M544 576a32 32 0 0 1-64 0v-256a32 32 0 0 1 64 0v256z m-32 160a32 32 0 1 1 0-64 32 32 0 0 1 0 64z m0-608C300.256 128 128 300.256 128 512s172.256 384 384 384 384-172.256 384-384S723.744 128 512 128z" p-id="3054"></path></svg></span>',F=f?"tips-success":"tips-error",g='<section class="nice-tips '+F+' nice-tips-sm nice-tips-open"><div class="nice-tips-overlay"></div><div class="nice-tips-body text-center"><div class="nice-tips-content px-5">'+e+'<div class="text-sm text-muted">'+d+"</div></div></div></section>",eb=$(g);$("body").append(eb);$("body").addClass("modal-open");typeof lazyLoadInstance!="undefined"&&lazyLoadInstance.update();setTimeout(function(){$("body").removeClass("modal-open");eb.removeClass("nice-tips-open");eb.addClass("nice-tips-close");setTimeout(function(){eb.removeClass("nice-tips-close");setTimeout(function(){eb.remove()},200)},400)},1200)}function ncPopup(f,d,e,F){var e=e?'style="'+e+'"':"",g="",eb,T,c;f=="big"?g="nice-tips-lg":f=="no-padding"?g="nice-tips-nopd":f=="cover"?g="nice-tips-cover nice-tips-nopd":f=="full"?g="nice-tips-xl":f=="scroll"?g="nice-tips-scroll":f=="middle"?g="nice-tips-md":f=="small"&&(g="nice-tips-sm");eb='\t<div class="nice-tips '+g+' nice-tips-open">\t\t<div class="nice-tips-overlay" '+e+'></div>\t\t<div class="nice-tips-body">\t\t\t<div class="nice-tips-content">\t\t\t\t'+d+'\t\t\t</div>\t\t\t<div class="btn-close-tips">\t\t\t\t<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1553064665406" class="icon w-32" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3368" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 12C235.9 12 12 235.9 12 512s223.9 500 500 500 500-223.9 500-500S788.1 12 512 12z m166.3 609.7c15.6 15.6 15.6 40.9 0 56.6-7.8 7.8-18 11.7-28.3 11.7s-20.5-3.9-28.3-11.7L512 568.6 402.3 678.3c-7.8 7.8-18 11.7-28.3 11.7s-20.5-3.9-28.3-11.7c-15.6-15.6-15.6-40.9 0-56.6L455.4 512 345.7 402.3c-15.6-15.6-15.6-40.9 0-56.6 15.6-15.6 40.9-15.6 56.6 0L512 455.4l109.7-109.7c15.6-15.6 40.9-15.6 56.6 0 15.6 15.6 15.6 40.9 0 56.6L568.6 512l109.7 109.7z" p-id="3369"></path></svg>\t\t\t</div>\t\t</div>\t</div>\t';T=$(eb);$("body").append(T);$("body").addClass("modal-open");typeof lazyLoadInstance!="undefined"&&lazyLoadInstance.update();c=function(){$("body").removeClass("modal-open");$(T).removeClass("nice-tips-open");$(T).addClass("nice-tips-close");setTimeout(function(){$(T).removeClass("nice-tips-close");setTimeout(function(){T.remove()},200)},600)};$(T).on("click touchstart",".btn-close-tips, .nice-tips-overlay",function(f){f.preventDefault();c()});return typeof F=="object"&&Object.keys(F).forEach(function(f){$(T).on("click touchstart",f,function(d){var e=F[f](d,c)})}),T}function toggleDarkMode(){$("body").toggleClass("nice-dark-mode");$("body").hasClass("nice-dark-mode")?($(".logo-dark").removeClass("d-none"),$(".logo-dark").addClass("d-inline-block"),$(".logo-light").removeClass("d-inline-block"),$(".logo-light").addClass("d-none")):($(".logo-dark").removeClass("d-inline-block"),$(".logo-dark").addClass("d-none"),$(".logo-light").removeClass("d-none"),$(".logo-light").addClass("d-inline-block"))}function toggleSidebar(){$(".sidebar-close, .mobile-overlay").on("click",function(){$("body").removeClass("modal-open");$(".mobile-sidebar").removeClass("active");$(".mobile-overlay").removeClass("active")});$("#sidebarCollapse").on("click",function(){$("body").addClass("modal-open");$(".mobile-sidebar").addClass("active");$(".mobile-overlay").addClass("active");$(".collapse.in").toggleClass("in");$("a[aria-expanded=true]").attr("aria-expanded","false")})}function switchNightMode(){var f=document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/,"$1")||"0";f=="0"?(document.body.classList.add("nice-dark-mode"),document.cookie="night=1;path=/",console.log("夜间模式开启")):(document.body.classList.remove("nice-dark-mode"),document.cookie="night=0;path=/",console.log("夜间模式关闭"))}jQuery(document).ready(function(f){function d(f){var d=f.getBoundingClientRect();return d.top>=0&&d.left>=0&&d.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&d.right<=(window.innerWidth||document.documentElement.clientWidth)}var e,F,g,eb;if(toggleSidebar(),e=window.innerHeight,F=f("main").innerHeight(),F>e){g=f(".header").height();f(window).on("scroll",{TopPrev:0},function(){var d=f(window).scrollTop();d<this.TopPrev?d>0&&f(".header").hasClass("fixed-header")?f(".header").addClass("visible-scroll-up"):f(".header").removeClass("visible-scroll-up fixed-header"):(f(".header").removeClass("visible-scroll-up"),d>g&&!f(".header").hasClass("fixed-header")&&f(".header").addClass("fixed-header"));this.TopPrev=d})}f(window).scroll(function(){var d=f(window),e=d.width();f(this).scrollTop()>200&&e>=1024?f("#scroll_to_top").filter(":hidden").fadeIn("fast"):f("#scroll_to_top").filter(":visible").fadeOut("fast")});f("#scroll_to_top").on("click",function(){return f("html, body").animate({scrollTop:0},"slow"),!1});f('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var d=f(this.hash);if(d=d.length?d:f("[name="+this.hash.slice(1)+"]"),d.length)return f("html, body").animate({scrollTop:d.offset().top-60},1e3,"easeInOutExpo"),!1}});f('[data-toggle="tooltip"]').tooltip();f('[data-toggle="tooltip"]').on("shown.bs.tooltip",function(){f(".tooltip").addClass("animated fadeIn")});f(".sidebar").theiaStickySidebar({additionalMarginTop:20,additionalMarginBottom:20});f(".sidebar-author").theiaStickySidebar({additionalMarginTop:100,additionalMarginBottom:20});f(".main-menu li").hasClass("menu-item-has-children")&&f(".main-menu .menu-item-has-children").prepend('<span class="icon-sub-menu"><i class="iconfont icon-arrow-down-s-line"></i></span>');f(".mobile-sidebar-menu .menu-item-has-children > a").append('<div class="dropdown-sub-menu"><span class="iconfont icon-arrow-drop-down-fill"></span></div>');f(".dropdown-sub-menu").on("click",function(){f(this).parents("li").children(".sub-menu").slideToggle();f(this).parents("li").children(".dropdown-sub-menu").toggleClass("current")});eb=f(".list-banner .owl-carousel");eb.length>0&&eb.owlCarousel({items:1,loop:!0,margin:10,smartSpeed:1e3,autoplay:!0,autoplayTimeout:5e3,autoplayHoverPause:!0,responsiveClass:!0,responsive:{0:{items:1,margin:10,nav:!1},768:{nav:!0,navText:['<i class="iconfont icon-left"></i>','<i class="iconfont icon-right"></i>']},992:{nav:!0,navText:['<i class="iconfont icon-left"></i>','<i class="iconfont icon-right"></i>']}}});f(document).on("click",".single-popup",function(d){d.preventDefault();var e=f(this).data("img"),F=f(this).data("title"),g=f(this).data("desc"),eb='<div class="text-center"><h6 class="py-1">'+F+'</h6>                    <div class="text-muted text-sm mb-2" > '+g+' </div>                    <img src="'+e+'" alt="'+F+'" style="width:100%;height:auto;">                    </div>';ncPopup("small",eb)})});jQuery(document).ready(function(f){var d=f("#monavber").attr("data-type");f(".navbar>li ").each(function(){var e,F,g,eb;try{if(e=f(this).attr("id"),"index"==d)e=="nvabar-item-index"&&f("#nvabar-item-index").addClass("current-menu-item");else if("category"==d){if(eb=f("#monavber").attr("data-infoid"),eb!=null)for(F=eb.split(" "),g=0;g<F.length;g++)e=="navbar-category-"+F[g]&&f("#navbar-category-"+F[g]+"").addClass("current-menu-item")}else if("article"==d){if(eb=f("#monavber").attr("data-infoid"),eb!=null)for(F=eb.split(" "),g=0;g<F.length;g++)e=="navbar-category-"+F[g]&&f("#navbar-category-"+F[g]+"").addClass("current-menu-item")}else"page"==d?(eb=f("#monavber").attr("data-infoid"),eb!=null&&e=="navbar-page-"+eb&&f("#navbar-page-"+eb+"").addClass("current-menu-item")):"tag"==d&&(eb=f("#monavber").attr("data-infoid"),eb!=null&&e=="navbar-tag-"+eb&&f("#navbar-tag-"+eb+"").addClass("current-menu-item"))}catch(f){}});f("#monavber").delegate("a","click",function(){f(".navbar>li").each(function(){f(this).removeClass("current-menu-item")});f(this).closest("ul")!=null&&f(this).closest("ul").length!=0&&(f(this).closest("ul").attr("id")=="munavber"?f(this).addClass("current-menu-item"):f(this).closest("ul").closest("li").addClass("current-menu-item"))})});!function(f){f.fn.theiaStickySidebar=function(d){function e(d,e){var g=F(d,e);g||(console.log("TSS: Body width smaller than options.minWidth. Init is delayed."),f(document).on("scroll."+d.namespace,function(d,e){return function(g){var eb=F(d,e);eb&&f(this).unbind(g)}}(d,e)),f(window).on("resize."+d.namespace,function(d,e){return function(g){var eb=F(d,e);eb&&f(this).unbind(g)}}(d,e)))}function F(d,e){return d.initialized===!0||!(f("body").width()<d.minWidth)&&(g(d,e),!0)}function g(d,e){d.initialized=!0;var F=f("#theia-sticky-sidebar-stylesheet-"+d.namespace);0===F.length&&f("head").append(f('<style id="theia-sticky-sidebar-stylesheet-'+d.namespace+'">.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>'));e.each(function(){function e(){g.fixedScrollTop=0;g.sidebar.css({"min-height":"1px"});g.stickySidebar.css({position:"static",width:"",transform:"none"})}function F(d){var e=d.height();return d.children().each(function(){e=Math.max(e,f(this).height())}),e}var g={},T,c,P;(g.sidebar=f(this),g.options=d||{},g.container=f(g.options.containerSelector),0==g.container.length&&(g.container=g.sidebar.parent()),g.sidebar.parents().css("-webkit-transform","none"),g.sidebar.css({position:g.options.defaultPosition,overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),g.stickySidebar=g.sidebar.find(".theiaStickySidebar"),0==g.stickySidebar.length)&&(T=/(?:text|application)\/(?:x-)?(?:javascript|ecmascript)/i,g.sidebar.find("script").filter(function(f,d){return 0===d.type.length||d.type.match(T)}).remove(),g.stickySidebar=f("<div>").addClass("theiaStickySidebar").append(g.sidebar.children()),g.sidebar.append(g.stickySidebar));g.marginBottom=parseInt(g.sidebar.css("margin-bottom"));g.paddingTop=parseInt(g.sidebar.css("padding-top"));g.paddingBottom=parseInt(g.sidebar.css("padding-bottom"));c=g.stickySidebar.offset().top;P=g.stickySidebar.outerHeight();g.stickySidebar.css("padding-top",1);g.stickySidebar.css("padding-bottom",1);c-=g.stickySidebar.offset().top;P=g.stickySidebar.outerHeight()-P-c;0==c?(g.stickySidebar.css("padding-top",0),g.stickySidebarPaddingTop=0):g.stickySidebarPaddingTop=1;0==P?(g.stickySidebar.css("padding-bottom",0),g.stickySidebarPaddingBottom=0):g.stickySidebarPaddingBottom=1;g.previousScrollTop=null;g.fixedScrollTop=0;e();g.onScroll=function(g){var T,c,P,dX,b,X;if(g.stickySidebar.is(":visible")){if(f("body").width()<g.options.minWidth||g.options.disableOnResponsiveLayouts&&(T=g.sidebar.outerWidth("none"==g.sidebar.css("float")),T+50>g.container.width()))return void e();if(c=f(document).scrollTop(),P="static",c>=g.sidebar.offset().top+(g.paddingTop-g.options.additionalMarginTop)){var gf,eC=g.paddingTop+d.additionalMarginTop,eD=g.paddingBottom+g.marginBottom+d.additionalMarginBottom,cS=g.sidebar.offset().top,a=g.sidebar.offset().top+F(g.container),D=0+d.additionalMarginTop,da=g.stickySidebar.outerHeight()+eC+eD<f(window).height();gf=da?D+g.stickySidebar.outerHeight():f(window).height()-g.marginBottom-g.paddingBottom-d.additionalMarginBottom;var fT=cS-c+g.paddingTop,eT=a-c-g.paddingBottom-g.marginBottom,eR=g.stickySidebar.offset().top-c,gG=g.previousScrollTop-c;"fixed"==g.stickySidebar.css("position")&&"modern"==g.options.sidebarBehavior&&(eR+=gG);"stick-to-top"==g.options.sidebarBehavior&&(eR=d.additionalMarginTop);"stick-to-bottom"==g.options.sidebarBehavior&&(eR=gf-g.stickySidebar.outerHeight());eR=gG>0?Math.min(eR,D):Math.max(eR,gf-g.stickySidebar.outerHeight());eR=Math.max(eR,fT);eR=Math.min(eR,eT-g.stickySidebar.outerHeight());dX=g.container.height()==g.stickySidebar.outerHeight();P=(dX||eR!=D)&&(dX||eR!=gf-g.stickySidebar.outerHeight())?c+eR-g.sidebar.offset().top-g.paddingTop<=d.additionalMarginTop?"static":"absolute":"fixed"}"fixed"==P?(b=f(document).scrollLeft(),g.stickySidebar.css({position:"fixed",width:eb(g.stickySidebar)+"px",transform:"translateY("+eR+"px)",left:g.sidebar.offset().left+parseInt(g.sidebar.css("padding-left"))-b+"px",top:"0px"})):"absolute"==P?(X={},"absolute"!=g.stickySidebar.css("position")&&(X.position="absolute",X.transform="translateY("+(c+eR-g.sidebar.offset().top-g.stickySidebarPaddingTop-g.stickySidebarPaddingBottom)+"px)",X.top="0px"),X.width=eb(g.stickySidebar)+"px",X.left="",g.stickySidebar.css(X)):"static"==P&&e();"static"!=P&&1==g.options.updateSidebarHeight&&g.sidebar.css({"min-height":g.stickySidebar.outerHeight()+g.stickySidebar.offset().top-g.sidebar.offset().top+g.paddingBottom});g.previousScrollTop=c}};g.onScroll(g);f(document).on("scroll."+g.options.namespace,function(f){return function(){f.onScroll(f)}}(g));f(window).on("resize."+g.options.namespace,function(f){return function(){f.stickySidebar.css({position:"static"});f.onScroll(f)}}(g));"undefined"!=typeof ResizeSensor&&new ResizeSensor(g.stickySidebar[0],function(f){return function(){f.onScroll(f)}}(g))})}function eb(f){var d;try{d=f[0].getBoundingClientRect().width}catch(f){}return"undefined"==typeof d&&(d=f.width()),d}return d=f.extend({containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,disableOnResponsiveLayouts:!0,sidebarBehavior:"modern",defaultPosition:"relative",namespace:"TSS"},d),d.additionalMarginTop=parseInt(d.additionalMarginTop)||0,d.additionalMarginBottom=parseInt(d.additionalMarginBottom)||0,e(d,this),this}}(jQuery);window.$=jQuery;isApollo=$("meta[name=apollo-enabled]").attr("content")==="1";!function(f,d){"object"==typeof exports&&"undefined"!=typeof module?d(exports,require("jquery")):"function"==typeof define&&define.amd?define(["exports","jquery"],d):d((f=f||self).bootstrap={},f.jQuery)}(this,function(f,d){"use strict";function e(f,d){for(var e,F=0;F<d.length;F++)e=d[F],e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(f,e.key,e)}function F(f,d,F){return d&&e(f.prototype,d),F&&e(f,F),f}function g(f){for(var d,e,F=1;F<arguments.length;F++)d=null!=arguments[F]?arguments[F]:{},e=Object.keys(d),"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(d).filter(function(f){return Object.getOwnPropertyDescriptor(d,f).enumerable}))),e.forEach(function(e){var F,g,eb;F=f;eb=d[g=e];g in F?Object.defineProperty(F,g,{value:eb,enumerable:!0,configurable:!0,writable:!0}):F[g]=eb});return f}function eb(f){var e=this,F=!1;return d(this).one(r.TRANSITION_END,function(){F=!0}),setTimeout(function(){F||r.triggerTransitionEnd(e)},f),this}function T(f){return f&&"[object Function]"==={}.toString.call(f)}function c(f,d){if(1!==f.nodeType)return[];var e=f.ownerDocument.defaultView.getComputedStyle(f,null);return d?e[d]:e}function P(f){return"HTML"===f.nodeName?f:f.parentNode||f.host}function dX(f){if(!f)return document.body;switch(f.nodeName){case"HTML":case"BODY":return f.ownerDocument.body;case"#document":return f.body}var d=c(f),e=d.overflow,F=d.overflowX,g=d.overflowY;return/(auto|scroll|overlay)/.test(e+g+F)?f:dX(P(f))}function b(f){return 11===f?t:10===f?u:t||u}function X(f){var d,e,F;if(!f)return document.documentElement;for(d=b(10)?document.body:null,e=f.offsetParent||null;e===d&&f.nextElementSibling;)e=(f=f.nextElementSibling).offsetParent;return F=e&&e.nodeName,F&&"BODY"!==F&&"HTML"!==F?-1!==["TH","TD","TABLE"].indexOf(e.nodeName)&&"static"===c(e,"position")?X(e):e:f?f.ownerDocument.documentElement:document.documentElement}function gf(f){return null!==f.parentNode?gf(f.parentNode):f}function eC(f,d){var e,F,g,eb;if(!(f&&f.nodeType&&d&&d.nodeType))return document.documentElement;var T=f.compareDocumentPosition(d)&Node.DOCUMENT_POSITION_FOLLOWING,c=T?f:d,P=T?d:f,dX=document.createRange();return(dX.setStart(c,0),dX.setEnd(P,0),g=dX.commonAncestorContainer,f!==g&&d!==g||c.contains(P))?"BODY"===(F=(e=g).nodeName)||"HTML"!==F&&X(e.firstElementChild)!==e?X(g):g:(eb=gf(f),eb.host?eC(eb.host,d):eC(f,gf(d).host))}function eD(f){var d="top"===(1<arguments.length&&void 0!==arguments[1]?arguments[1]:"top")?"scrollTop":"scrollLeft",e=f.nodeName,F;return"BODY"!==e&&"HTML"!==e?f[d]:(F=f.ownerDocument.documentElement,(f.ownerDocument.scrollingElement||F)[d])}function cS(f,d){var e="x"===d?"Left":"Top",F="Left"===e?"Right":"Bottom";return parseFloat(f["border"+e+"Width"],10)+parseFloat(f["border"+F+"Width"],10)}function a(f,d,e,F){return Math.max(d["offset"+f],d["scroll"+f],e["client"+f],e["offset"+f],e["scroll"+f],b(10)?parseInt(e["offset"+f])+parseInt(F["margin"+("Height"===f?"Top":"Left")])+parseInt(F["margin"+("Height"===f?"Bottom":"Right")]):0)}function D(f){var d=f.body,e=f.documentElement,F=b(10)&&getComputedStyle(e);return{height:a("Height",d,e,F),width:a("Width",d,e,F)}}function da(f){return vf({},f,{right:f.left+f.width,bottom:f.top+f.height})}function fT(f){var d={},e,F,g;try{b(10)?(d=f.getBoundingClientRect(),e=eD(f,"top"),F=eD(f,"left"),d.top+=e,d.left+=F,d.bottom+=e,d.right+=F):d=f.getBoundingClientRect()}catch(f){}var eb={left:d.left,top:d.top,width:d.right-d.left,height:d.bottom-d.top},T="HTML"===f.nodeName?D(f.ownerDocument):{},P=T.width||f.clientWidth||eb.right-eb.left,dX=T.height||f.clientHeight||eb.bottom-eb.top,X=f.offsetWidth-P,gf=f.offsetHeight-dX;return(X||gf)&&(g=c(f),X-=cS(g,"x"),gf-=cS(g,"y"),eb.width-=X,eb.height-=gf),da(eb)}function eT(f,d){var e=2<arguments.length&&void 0!==arguments[2]&&arguments[2],F=b(10),g="HTML"===d.nodeName,eb=fT(f),T=fT(d),P=dX(f),X=c(d),gf=parseFloat(X.borderTopWidth,10),eC=parseFloat(X.borderLeftWidth,10),cS,a,D;return e&&g&&(T.top=Math.max(T.top,0),T.left=Math.max(T.left,0)),cS=da({top:eb.top-T.top-gf,left:eb.left-T.left-eC,width:eb.width,height:eb.height}),(cS.marginTop=0,cS.marginLeft=0,!F&&g)&&(a=parseFloat(X.marginTop,10),D=parseFloat(X.marginLeft,10),cS.top-=gf-a,cS.bottom-=gf-a,cS.left-=eC-D,cS.right-=eC-D,cS.marginTop=a,cS.marginLeft=D),(F&&!e?d.contains(P):d===P&&"BODY"!==P.nodeName)&&(cS=function(f,d){var e=2<arguments.length&&void 0!==arguments[2]&&arguments[2],F=eD(d,"top"),g=eD(d,"left"),eb=e?-1:1;return f.top+=F*eb,f.bottom+=F*eb,f.left+=g*eb,f.right+=g*eb,f}(cS,d)),cS}function eR(f){if(!f||!f.parentElement||b())return document.documentElement;for(var d=f.parentElement;d&&"none"===c(d,"transform");)d=d.parentElement;return d||document.documentElement}function gG(f,d,e,F){var g=4<arguments.length&&void 0!==arguments[4]&&arguments[4],eb={top:0,left:0},T=g?eR(f):eC(f,d),b,X,gf;if("viewport"===F)eb=function(f){var d=1<arguments.length&&void 0!==arguments[1]&&arguments[1],e=f.ownerDocument.documentElement,F=eT(f,e),g=Math.max(e.clientWidth,window.innerWidth||0),eb=Math.max(e.clientHeight,window.innerHeight||0),T=d?0:eD(e),c=d?0:eD(e,"left");return da({top:T-F.top+F.marginTop,left:c-F.left+F.marginLeft,width:g,height:eb})}(T,g);else if(b=void 0,"scrollParent"===F?"BODY"===(b=dX(P(d))).nodeName&&(b=f.ownerDocument.documentElement):b="window"===F?f.ownerDocument.documentElement:F,X=eT(b,T,g),"HTML"!==b.nodeName||function f(d){var e=d.nodeName,F;return"BODY"===e||"HTML"===e?!1:"fixed"===c(d,"position")?!0:(F=P(d),!!F&&f(F))}(T))eb=X;else{var cS=D(f.ownerDocument),a=cS.height,fT=cS.width;eb.top+=X.top-X.marginTop;eb.bottom=a+X.top;eb.left+=X.left-X.marginLeft;eb.right=fT+X.left}return gf="number"==typeof(e=e||0),eb.left+=gf?e:e.left||0,eb.top+=gf?e:e.top||0,eb.right-=gf?e:e.right||0,eb.bottom-=gf?e:e.bottom||0,eb}function cT(f,d,e,F,g){var eb=5<arguments.length&&void 0!==arguments[5]?arguments[5]:0;if(-1===f.indexOf("auto"))return f;var T=gG(e,F,eb,g),c={top:{width:T.width,height:d.top-T.top},right:{width:T.right-d.right,height:T.height},bottom:{width:T.width,height:T.bottom-d.bottom},left:{width:d.left-T.left,height:T.height}},P=Object.keys(c).map(function(f){return vf({key:f},c[f],{area:(d=c[f],d.width*d.height)});var d}).sort(function(f,d){return d.area-f.area}),dX=P.filter(function(f){var d=f.width,F=f.height;return d>=e.clientWidth&&F>=e.clientHeight}),b=0<dX.length?dX[0].key:P[0].key,X=f.split("-")[1];return b+(X?"-"+X:"")}function eA(f,d,e){var F=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return eT(e,F?eR(d):eC(d,e),F)}function cH(f){var d=f.ownerDocument.defaultView.getComputedStyle(f),e=parseFloat(d.marginTop||0)+parseFloat(d.marginBottom||0),F=parseFloat(d.marginLeft||0)+parseFloat(d.marginRight||0);return{width:f.offsetWidth+F,height:f.offsetHeight+e}}function dg(f){var d={left:"right",right:"left",bottom:"top",top:"bottom"};return f.replace(/left|right|bottom|top/g,function(f){return d[f]})}function cg(f,d,e){e=e.split("-")[0];var F=cH(f),g={width:F.width,height:F.height},eb=-1!==["right","left"].indexOf(e),T=eb?"top":"left",c=eb?"left":"top",P=eb?"height":"width",dX=eb?"width":"height";return g[T]=d[T]+d[P]/2-F[P]/2,g[c]=e===c?d[c]-F[dX]:d[dg(c)],g}function cSb(f,d){return Array.prototype.find?f.find(d):f.filter(d)[0]}function W(f,d,e){return(void 0===e?f:f.slice(0,function(f,d,e){if(Array.prototype.findIndex)return f.findIndex(function(f){return f[d]===e});var F=cSb(f,function(f){return f[d]===e});return f.indexOf(F)}(f,"name",e))).forEach(function(f){f.function&&console.warn("`modifier.function` is deprecated, use `modifier.fn`!");var e=f.function||f.fn;f.enabled&&T(e)&&(d.offsets.popper=da(d.offsets.popper),d.offsets.reference=da(d.offsets.reference),d=e(d,f))}),d}function ec(f,d){return f.some(function(f){var e=f.name;return f.enabled&&e===d})}function bA(f){for(var d,e,F=[!1,"ms","Webkit","Moz","O"],g=f.charAt(0).toUpperCase()+f.slice(1),eb=0;eb<F.length;eb++)if(d=F[eb],e=d?""+d+g:f,"undefined"!=typeof document.body.style[e])return e;return null}function h(f){var d=f.ownerDocument;return d?d.defaultView:window}function i(f,d,e,F){e.updateBound=F;h(f).addEventListener("resize",e.updateBound,{passive:!0});var g=dX(f);return function f(d,e,F,g){var eb="BODY"===d.nodeName,T=eb?d.ownerDocument.defaultView:d;T.addEventListener(e,F,{passive:!0});eb||f(dX(T.parentNode),e,F,g);g.push(T)}(g,"scroll",e.updateBound,e.scrollParents),e.scrollElement=g,e.eventsEnabled=!0,e}function j(){var f,d;this.state.eventsEnabled&&(cancelAnimationFrame(this.scheduleUpdate),this.state=(f=this.reference,d=this.state,h(f).removeEventListener("resize",d.updateBound),d.scrollParents.forEach(function(f){f.removeEventListener("scroll",d.updateBound)}),d.updateBound=null,d.scrollParents=[],d.scrollElement=null,d.eventsEnabled=!1,d))}function k(f){return""!==f&&!isNaN(parseFloat(f))&&isFinite(f)}function l(f,d){Object.keys(d).forEach(function(e){var F="";-1!==["width","height","top","right","bottom","left"].indexOf(e)&&k(d[e])&&(F="px");f.style[e]=d[e]+F})}function m(f,d,e){var F=cSb(f,function(f){return f.name===d}),g=!!F&&f.some(function(f){return f.name===e&&f.enabled&&f.order<F.order}),eb,T;return g||(eb="`"+d+"`",T="`"+e+"`",console.warn(T+" modifier is required by "+eb+" modifier in order to work, be sure to include it before "+eb+"!")),g}function n(f){var d=1<arguments.length&&void 0!==arguments[1]&&arguments[1],e=x.indexOf(f),F=x.slice(e+1).concat(x.slice(0,e));return d?F.reverse():F}function o(f,d,e,F){var g=[0,0],eb=-1!==["right","left"].indexOf(F),T=f.split(/(\+|\-)/).map(function(f){return f.trim()}),c=T.indexOf(cSb(T,function(f){return-1!==f.search(/,|\s/)})),P,dX;return T[c]&&-1===T[c].indexOf(",")&&console.warn("Offsets separated by white space(s) are deprecated, use a comma (,) instead."),P=/\s*,\s*|\s+/,dX=-1!==c?[T.slice(0,c).concat([T[c].split(P)[0]]),[T[c].split(P)[1]].concat(T.slice(c+1))]:[T],(dX=dX.map(function(f,F){var g=(1===F?!eb:eb)?"height":"width",T=!1;return f.reduce(function(f,d){return""===f[f.length-1]&&-1!==["+","-"].indexOf(d)?(f[f.length-1]=d,T=!0,f):T?(f[f.length-1]+=d,T=!1,f):f.concat(d)},[]).map(function(f){return function(f,d,e,F){var g=f.match(/((?:\-|\+)?\d*\.?\d*)(.*)/),eb=+g[1],T=g[2],c;if(!eb)return f;if(0!==T.indexOf("%"))return"vh"!==T&&"vw"!==T?eb:("vh"===T?Math.max(document.documentElement.clientHeight,window.innerHeight||0):Math.max(document.documentElement.clientWidth,window.innerWidth||0))/100*eb;c=void 0;switch(T){case"%p":c=e;break;case"%":case"%r":default:c=F}return da(c)[d]/100*eb}(f,g,d,e)})})).forEach(function(f,d){f.forEach(function(e,F){k(e)&&(g[d]+=e*("-"===f[F-1]?-1:1))})}),g}function p(f,d,e){if(0===f.length)return f;if(e&&"function"==typeof e)return e(f);for(var F=(new window.DOMParser).parseFromString(f,"text/html"),g=Object.keys(d),eb=[].slice.call(F.body.querySelectorAll("*")),T=function(f){var e=eb[f],F=e.nodeName.toLowerCase(),T,c;if(-1===g.indexOf(e.nodeName.toLowerCase()))return e.parentNode.removeChild(e),"continue";T=[].slice.call(e.attributes);c=[].concat(d["*"]||[],d[F]||[]);T.forEach(function(f){(function(f,d){var e=f.nodeName.toLowerCase();if(-1!==d.indexOf(e))return-1===gd.indexOf(e)||Boolean(f.nodeValue.match(ebd)||f.nodeValue.match(Td));for(var F=d.filter(function(f){return f instanceof RegExp}),g=0,eb=F.length;g<eb;g++)if(e.match(F[g]))return!0;return!1})(f,c)||e.removeAttribute(f.nodeName)})},c=0,P=eb.length;c<P;c++)T(c);return F.body.innerHTML}var q,r,s,t,u,v,w,x,y,z;d=d&&d.hasOwnProperty("default")?d.default:d;q="transitionend";r={TRANSITION_END:"bsTransitionEnd",getUID:function(f){for(;f+=~~(1e6*Math.random()),document.getElementById(f););return f},getSelectorFromElement:function(f){var d=f.getAttribute("data-target"),e;d&&"#"!==d||(e=f.getAttribute("href"),d=e&&"#"!==e?e.trim():"");try{return document.querySelector(d)?d:null}catch(f){return null}},getTransitionDurationFromElement:function(f){if(!f)return 0;var e=d(f).css("transition-duration"),F=d(f).css("transition-delay"),g=parseFloat(e),eb=parseFloat(F);return g||eb?(e=e.split(",")[0],F=F.split(",")[0],1e3*(parseFloat(e)+parseFloat(F))):0},reflow:function(f){return f.offsetHeight},triggerTransitionEnd:function(f){d(f).trigger(q)},supportsTransitionEnd:function(){return Boolean(q)},isElement:function(f){return(f[0]||f).nodeType},typeCheckConfig:function(f,d,e){var F,g;for(F in e)if(Object.prototype.hasOwnProperty.call(e,F)){var eb=e[F],T=d[F],c=T&&r.isElement(T)?"element":(g=T,{}.toString.call(g).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(eb).test(c))throw new Error(f.toUpperCase()+': Option "'+F+'" provided type "'+c+'" but expected type "'+eb+'".')}},findShadowRoot:function(f){if(!document.documentElement.attachShadow)return null;if("function"!=typeof f.getRootNode)return f instanceof ShadowRoot?f:f.parentNode?r.findShadowRoot(f.parentNode):null;var d=f.getRootNode();return d instanceof ShadowRoot?d:null}};d.fn.emulateTransitionEnd=eb;d.event.special[r.TRANSITION_END]={bindType:q,delegateType:q,handle:function(f){if(d(f.target).is(this))return f.handleObj.handler.apply(this,arguments)}};var A="button",B="bs.button",C="."+B,E=".data-api",G=d.fn[A],H="active",I="btn",J="focus",K='[data-toggle^="button"]',L='[data-toggle="buttons"]',M='input:not([type="hidden"])',N=".active",O=".btn",Q={CLICK_DATA_API:"click"+C+E,FOCUS_BLUR_DATA_API:"focus"+C+E+" blur"+C+E},R=function(){function f(f){this._element=f}var e=f.prototype;return e.toggle=function(){var f=!0,e=!0,F=d(this._element).closest(L)[0],g,eb;if(F&&(g=this._element.querySelector(M),g)){if("radio"===g.type&&(g.checked&&this._element.classList.contains(H)?f=!1:(eb=F.querySelector(N),eb&&d(eb).removeClass(H))),f){if(g.hasAttribute("disabled")||F.hasAttribute("disabled")||g.classList.contains("disabled")||F.classList.contains("disabled"))return;g.checked=!this._element.classList.contains(H);d(g).trigger("change")}g.focus();e=!1}e&&this._element.setAttribute("aria-pressed",!this._element.classList.contains(H));f&&d(this._element).toggleClass(H)},e.dispose=function(){d.removeData(this._element,B);this._element=null},f._jQueryInterface=function(e){return this.each(function(){var F=d(this).data(B);F||(F=new f(this),d(this).data(B,F));"toggle"===e&&F[e]()})},F(f,null,[{key:"VERSION",get:function(){return"4.3.1"}}]),f}();d(document).on(Q.CLICK_DATA_API,K,function(f){f.preventDefault();var e=f.target;d(e).hasClass(I)||(e=d(e).closest(O));R._jQueryInterface.call(d(e),"toggle")}).on(Q.FOCUS_BLUR_DATA_API,K,function(f){var e=d(f.target).closest(O)[0];d(e).toggleClass(J,/^focus(in)?$/.test(f.type))});d.fn[A]=R._jQueryInterface;d.fn[A].Constructor=R;d.fn[A].noConflict=function(){return d.fn[A]=G,R._jQueryInterface};var S="carousel",U="bs.carousel",V="."+U,Y=".data-api",Z=d.fn[S],$={interval:5e3,keyboard:!0,slide:!1,pause:"hover",wrap:!0,touch:!0},_={interval:"(number|boolean)",keyboard:"boolean",slide:"(boolean|string)",pause:"(string|boolean)",wrap:"boolean",touch:"boolean"},ff="next",df="prev",ef="left",Ff="right",ebf={SLIDE:"slide"+V,SLID:"slid"+V,KEYDOWN:"keydown"+V,MOUSEENTER:"mouseenter"+V,MOUSELEAVE:"mouseleave"+V,TOUCHSTART:"touchstart"+V,TOUCHMOVE:"touchmove"+V,TOUCHEND:"touchend"+V,POINTERDOWN:"pointerdown"+V,POINTERUP:"pointerup"+V,DRAG_START:"dragstart"+V,LOAD_DATA_API:"load"+V+Y,CLICK_DATA_API:"click"+V+Y},Tf="carousel",cf="active",Pf="slide",dXf="carousel-item-right",bf="carousel-item-left",Xf="carousel-item-next",gff="carousel-item-prev",eCf="pointer-event",eDf=".active",cSf=".active.carousel-item",af=".carousel-item",Df=".carousel-item img",daf=".carousel-item-next, .carousel-item-prev",fTf=".carousel-indicators",eTf='[data-ride="carousel"]',eRf={TOUCH:"touch",PEN:"pen"},gGf=function(){function f(f,d){this._items=null;this._interval=null;this._activeElement=null;this._isPaused=!1;this._isSliding=!1;this.touchTimeout=null;this.touchStartX=0;this.touchDeltaX=0;this._config=this._getConfig(d);this._element=f;this._indicatorsElement=this._element.querySelector(fTf);this._touchSupported="ontouchstart"in document.documentElement||0<navigator.maxTouchPoints;this._pointerEvent=Boolean(window.PointerEvent||window.MSPointerEvent);this._addEventListeners()}var e=f.prototype;return e.next=function(){this._isSliding||this._slide(ff)},e.nextWhenVisible=function(){!document.hidden&&d(this._element).is(":visible")&&"hidden"!==d(this._element).css("visibility")&&this.next()},e.prev=function(){this._isSliding||this._slide(df)},e.pause=function(f){f||(this._isPaused=!0);this._element.querySelector(daf)&&(r.triggerTransitionEnd(this._element),this.cycle(!0));clearInterval(this._interval);this._interval=null},e.cycle=function(f){f||(this._isPaused=!1);this._interval&&(clearInterval(this._interval),this._interval=null);this._config.interval&&!this._isPaused&&(this._interval=setInterval((document.visibilityState?this.nextWhenVisible:this.next).bind(this),this._config.interval))},e.to=function(f){var e=this,F,g;if(this._activeElement=this._element.querySelector(cSf),F=this._getItemIndex(this._activeElement),!(f>this._items.length-1||f<0))if(this._isSliding)d(this._element).one(ebf.SLID,function(){return e.to(f)});else{if(F===f)return this.pause(),void this.cycle();g=F<f?ff:df;this._slide(g,this._items[f])}},e.dispose=function(){d(this._element).off(V);d.removeData(this._element,U);this._items=null;this._config=null;this._element=null;this._interval=null;this._isPaused=null;this._isSliding=null;this._activeElement=null;this._indicatorsElement=null},e._getConfig=function(f){return f=g({},$,f),r.typeCheckConfig(S,f,_),f},e._handleSwipe=function(){var f=Math.abs(this.touchDeltaX),d;f<=40||(d=f/this.touchDeltaX,0<d&&this.prev(),d<0&&this.next())},e._addEventListeners=function(){var f=this;this._config.keyboard&&d(this._element).on(ebf.KEYDOWN,function(d){return f._keydown(d)});"hover"===this._config.pause&&d(this._element).on(ebf.MOUSEENTER,function(d){return f.pause(d)}).on(ebf.MOUSELEAVE,function(d){return f.cycle(d)});this._config.touch&&this._addTouchEventListeners()},e._addTouchEventListeners=function(){var f=this,e,F;this._touchSupported&&(e=function(d){f._pointerEvent&&eRf[d.originalEvent.pointerType.toUpperCase()]?f.touchStartX=d.originalEvent.clientX:f._pointerEvent||(f.touchStartX=d.originalEvent.touches[0].clientX)},F=function(d){f._pointerEvent&&eRf[d.originalEvent.pointerType.toUpperCase()]&&(f.touchDeltaX=d.originalEvent.clientX-f.touchStartX);f._handleSwipe();"hover"===f._config.pause&&(f.pause(),f.touchTimeout&&clearTimeout(f.touchTimeout),f.touchTimeout=setTimeout(function(d){return f.cycle(d)},500+f._config.interval))},d(this._element.querySelectorAll(Df)).on(ebf.DRAG_START,function(f){return f.preventDefault()}),this._pointerEvent?(d(this._element).on(ebf.POINTERDOWN,function(f){return e(f)}),d(this._element).on(ebf.POINTERUP,function(f){return F(f)}),this._element.classList.add(eCf)):(d(this._element).on(ebf.TOUCHSTART,function(f){return e(f)}),d(this._element).on(ebf.TOUCHMOVE,function(d){var e;f.touchDeltaX=(e=d).originalEvent.touches&&1<e.originalEvent.touches.length?0:e.originalEvent.touches[0].clientX-f.touchStartX}),d(this._element).on(ebf.TOUCHEND,function(f){return F(f)})))},e._keydown=function(f){if(!/input|textarea/i.test(f.target.tagName))switch(f.which){case 37:f.preventDefault();this.prev();break;case 39:f.preventDefault();this.next()}},e._getItemIndex=function(f){return this._items=f&&f.parentNode?[].slice.call(f.parentNode.querySelectorAll(af)):[],this._items.indexOf(f)},e._getItemByDirection=function(f,d){var e=f===ff,F=f===df,g=this._getItemIndex(d),eb=this._items.length-1,T;return(F&&0===g||e&&g===eb)&&!this._config.wrap?d:(T=(g+(f===df?-1:1))%this._items.length,-1===T?this._items[this._items.length-1]:this._items[T])},e._triggerSlideEvent=function(f,e){var F=this._getItemIndex(f),g=this._getItemIndex(this._element.querySelector(cSf)),eb=d.Event(ebf.SLIDE,{relatedTarget:f,direction:e,from:g,to:F});return d(this._element).trigger(eb),eb},e._setActiveIndicatorElement=function(f){var e,F;this._indicatorsElement&&(e=[].slice.call(this._indicatorsElement.querySelectorAll(eDf)),d(e).removeClass(cf),F=this._indicatorsElement.children[this._getItemIndex(f)],F&&d(F).addClass(cf))},e._slide=function(f,e){var F,g,eb,T=this,c=this._element.querySelector(cSf),P=this._getItemIndex(c),dX=e||c&&this._getItemByDirection(f,c),b=this._getItemIndex(dX),X=Boolean(this._interval),gf,eC,eD;(eb=f===ff?(F=bf,g=Xf,ef):(F=dXf,g=gff,Ff),dX&&d(dX).hasClass(cf))?this._isSliding=!1:!this._triggerSlideEvent(dX,eb).isDefaultPrevented()&&c&&dX&&(this._isSliding=!0,X&&this.pause(),this._setActiveIndicatorElement(dX),gf=d.Event(ebf.SLID,{relatedTarget:dX,direction:eb,from:P,to:b}),d(this._element).hasClass(Pf)?(d(dX).addClass(g),r.reflow(dX),d(c).addClass(F),d(dX).addClass(F),eC=parseInt(dX.getAttribute("data-interval"),10),this._config.interval=eC?(this._config.defaultInterval=this._config.defaultInterval||this._config.interval,eC):this._config.defaultInterval||this._config.interval,eD=r.getTransitionDurationFromElement(c),d(c).one(r.TRANSITION_END,function(){d(dX).removeClass(F+" "+g).addClass(cf);d(c).removeClass(cf+" "+g+" "+F);T._isSliding=!1;setTimeout(function(){return d(T._element).trigger(gf)},0)}).emulateTransitionEnd(eD)):(d(c).removeClass(cf),d(dX).addClass(cf),this._isSliding=!1,d(this._element).trigger(gf)),X&&this.cycle())},f._jQueryInterface=function(e){return this.each(function(){var F=d(this).data(U),eb=g({},$,d(this).data()),T;if("object"==typeof e&&(eb=g({},eb,e)),T="string"==typeof e?e:eb.slide,F||(F=new f(this,eb),d(this).data(U,F)),"number"==typeof e)F.to(e);else if("string"==typeof T){if("undefined"==typeof F[T])throw new TypeError('No method named "'+T+'"');F[T]()}else eb.interval&&eb.ride&&(F.pause(),F.cycle())})},f._dataApiClickHandler=function(e){var F=r.getSelectorFromElement(this),eb,T,c;F&&(eb=d(F)[0],eb&&d(eb).hasClass(Tf)&&(T=g({},d(eb).data(),d(this).data()),c=this.getAttribute("data-slide-to"),c&&(T.interval=!1),f._jQueryInterface.call(d(eb),T),c&&d(eb).data(U).to(c),e.preventDefault()))},F(f,null,[{key:"VERSION",get:function(){return"4.3.1"}},{key:"Default",get:function(){return $}}]),f}();d(document).on(ebf.CLICK_DATA_API,"[data-slide], [data-slide-to]",gGf._dataApiClickHandler);d(window).on(ebf.LOAD_DATA_API,function(){for(var f,e=[].slice.call(document.querySelectorAll(eTf)),F=0,g=e.length;F<g;F++)f=d(e[F]),gGf._jQueryInterface.call(f,f.data())});d.fn[S]=gGf._jQueryInterface;d.fn[S].Constructor=gGf;d.fn[S].noConflict=function(){return d.fn[S]=Z,gGf._jQueryInterface};var cTf="collapse",eAf="bs.collapse",cHf="."+eAf,dgf=d.fn[cTf],cgf={toggle:!0,parent:""},cSbf={toggle:"boolean",parent:"(string|element)"},Wf={SHOW:"show"+cHf,SHOWN:"shown"+cHf,HIDE:"hide"+cHf,HIDDEN:"hidden"+cHf,CLICK_DATA_API:"click"+cHf+".data-api"},ecf="show",bAf="collapse",hf="collapsing",jf="collapsed",kf="width",lf="height",mf=".show, .collapsing",nf='[data-toggle="collapse"]',of=function(){function f(f,d){this._isTransitioning=!1;this._element=f;this._config=this._getConfig(d);this._triggerArray=[].slice.call(document.querySelectorAll('[data-toggle="collapse"][href="#'+f.id+'"],[data-toggle="collapse"][data-target="#'+f.id+'"]'));for(var e=[].slice.call(document.querySelectorAll(nf)),F=0,g=e.length;F<g;F++){var eb=e[F],T=r.getSelectorFromElement(eb),c=[].slice.call(document.querySelectorAll(T)).filter(function(d){return d===f});null!==T&&0<c.length&&(this._selector=T,this._triggerArray.push(eb))}this._parent=this._config.parent?this._getParent():null;this._config.parent||this._addAriaAndCollapsedClass(this._element,this._triggerArray);this._config.toggle&&this.toggle()}var e=f.prototype;return e.toggle=function(){d(this._element).hasClass(ecf)?this.hide():this.show()},e.show=function(){var e,F,g=this,eb,T,c,P;this._isTransitioning||d(this._element).hasClass(ecf)||(this._parent&&0===(e=[].slice.call(this._parent.querySelectorAll(mf)).filter(function(f){return"string"==typeof g._config.parent?f.getAttribute("data-parent")===g._config.parent:f.classList.contains(bAf)})).length&&(e=null),e&&(F=d(e).not(this._selector).data(eAf))&&F._isTransitioning)||(eb=d.Event(Wf.SHOW),(d(this._element).trigger(eb),eb.isDefaultPrevented())||(e&&(f._jQueryInterface.call(d(e).not(this._selector),"hide"),F||d(e).data(eAf,null)),T=this._getDimension(),d(this._element).removeClass(bAf).addClass(hf),this._element.style[T]=0,this._triggerArray.length&&d(this._triggerArray).removeClass(jf).attr("aria-expanded",!0),this.setTransitioning(!0),c="scroll"+(T[0].toUpperCase()+T.slice(1)),P=r.getTransitionDurationFromElement(this._element),d(this._element).one(r.TRANSITION_END,function(){d(g._element).removeClass(hf).addClass(bAf).addClass(ecf);g._element.style[T]="";g.setTransitioning(!1);d(g._element).trigger(Wf.SHOWN)}).emulateTransitionEnd(P),this._element.style[T]=this._element[c]+"px"))},e.hide=function(){var f=this,e,F,g,eb,T,c,P;if(!this._isTransitioning&&d(this._element).hasClass(ecf)&&(e=d.Event(Wf.HIDE),d(this._element).trigger(e),!e.isDefaultPrevented())){if(F=this._getDimension(),this._element.style[F]=this._element.getBoundingClientRect()[F]+"px",r.reflow(this._element),d(this._element).addClass(hf).removeClass(bAf).removeClass(ecf),g=this._triggerArray.length,0<g)for(eb=0;eb<g;eb++)T=this._triggerArray[eb],c=r.getSelectorFromElement(T),null!==c&&(d([].slice.call(document.querySelectorAll(c))).hasClass(ecf)||d(T).addClass(jf).attr("aria-expanded",!1));this.setTransitioning(!0);this._element.style[F]="";P=r.getTransitionDurationFromElement(this._element);d(this._element).one(r.TRANSITION_END,function(){f.setTransitioning(!1);d(f._element).removeClass(hf).addClass(bAf).trigger(Wf.HIDDEN)}).emulateTransitionEnd(P)}},e.setTransitioning=function(f){this._isTransitioning=f},e.dispose=function(){d.removeData(this._element,eAf);this._config=null;this._parent=null;this._element=null;this._triggerArray=null;this._isTransitioning=null},e._getConfig=function(f){return(f=g({},cgf,f)).toggle=Boolean(f.toggle),r.typeCheckConfig(cTf,f,cSbf),f},e._getDimension=function(){return d(this._element).hasClass(kf)?kf:lf},e._getParent=function(){var e,F=this,g,eb;return r.isElement(this._config.parent)?(e=this._config.parent,"undefined"!=typeof this._config.parent.jquery&&(e=this._config.parent[0])):e=document.querySelector(this._config.parent),g='[data-toggle="collapse"][data-parent="'+this._config.parent+'"]',eb=[].slice.call(e.querySelectorAll(g)),d(eb).each(function(d,e){F._addAriaAndCollapsedClass(f._getTargetFromElement(e),[e])}),e},e._addAriaAndCollapsedClass=function(f,e){var F=d(f).hasClass(ecf);e.length&&d(e).toggleClass(jf,!F).attr("aria-expanded",F)},f._getTargetFromElement=function(f){var d=r.getSelectorFromElement(f);return d?document.querySelector(d):null},f._jQueryInterface=function(e){return this.each(function(){var F=d(this),eb=F.data(eAf),T=g({},cgf,F.data(),"object"==typeof e&&e?e:{});if(!eb&&T.toggle&&/show|hide/.test(e)&&(T.toggle=!1),eb||(eb=new f(this,T),F.data(eAf,eb)),"string"==typeof e){if("undefined"==typeof eb[e])throw new TypeError('No method named "'+e+'"');eb[e]()}})},F(f,null,[{key:"VERSION",get:function(){return"4.3.1"}},{key:"Default",get:function(){return cgf}}]),f}();d(document).on(Wf.CLICK_DATA_API,nf,function(f){"A"===f.currentTarget.tagName&&f.preventDefault();var e=d(this),F=r.getSelectorFromElement(this),g=[].slice.call(document.querySelectorAll(F));d(g).each(function(){var f=d(this),F=f.data(eAf)?"toggle":e.data();of._jQueryInterface.call(f,F)})});d.fn[cTf]=of._jQueryInterface;d.fn[cTf].Constructor=of;d.fn[cTf].noConflict=function(){return d.fn[cTf]=dgf,of._jQueryInterface};for(var pf="undefined"!=typeof window&&"undefined"!=typeof document,qf=["Edge","Trident","Firefox"],rf=0,sf=0;sf<qf.length;sf+=1)if(pf&&0<=navigator.userAgent.indexOf(qf[sf])){rf=1;break}s=pf&&window.Promise?function(f){var d=!1;return function(){d||(d=!0,window.Promise.resolve().then(function(){d=!1;f()}))}}:function(f){var d=!1;return function(){d||(d=!0,setTimeout(function(){d=!1;f()},rf))}};t=pf&&!(!window.MSInputMethodContext||!document.documentMode);u=pf&&/MSIE 10/.test(navigator.userAgent);var tf=function(){function f(f,d){for(var e,F=0;F<d.length;F++)e=d[F],e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(f,e.key,e)}return function(d,e,F){return e&&f(d.prototype,e),F&&f(d,F),d}}(),uf=function(f,d,e){return d in f?Object.defineProperty(f,d,{value:e,enumerable:!0,configurable:!0,writable:!0}):f[d]=e,f},vf=Object.assign||function(f){for(var d,e,F=1;F<arguments.length;F++){d=arguments[F];for(e in d)Object.prototype.hasOwnProperty.call(d,e)&&(f[e]=d[e])}return f};v=pf&&/Firefox/i.test(navigator.userAgent);w=["auto-start","auto","auto-end","top-start","top","top-end","right-start","right","right-end","bottom-end","bottom","bottom-start","left-end","left","left-start"];x=w.slice(3);var wf="flip",xf="clockwise",yf="counterclockwise";y={placement:"bottom",positionFixed:!1,eventsEnabled:!0,removeOnDestroy:!1,onCreate:function(){},onUpdate:function(){},modifiers:{shift:{order:100,enabled:!0,fn:function(f){var d=f.placement,e=d.split("-")[0],F=d.split("-")[1];if(F){var g=f.offsets,eb=g.reference,T=g.popper,c=-1!==["bottom","top"].indexOf(e),P=c?"left":"top",dX=c?"width":"height",b={start:uf({},P,eb[P]),end:uf({},P,eb[P]+eb[dX]-T[dX])};f.offsets.popper=vf({},T,b[F])}return f}},offset:{order:200,enabled:!0,fn:function(f,d){var e=d.offset,F=f.placement,g=f.offsets,eb=g.popper,T=g.reference,c=F.split("-")[0],P=void 0;return P=k(+e)?[+e,0]:o(e,eb,T,c),"left"===c?(eb.top+=P[0],eb.left-=P[1]):"right"===c?(eb.top+=P[0],eb.left+=P[1]):"top"===c?(eb.left+=P[0],eb.top-=P[1]):"bottom"===c&&(eb.left+=P[0],eb.top+=P[1]),f.popper=eb,f},offset:0},preventOverflow:{order:300,enabled:!0,fn:function(f,d){var e=d.boundariesElement||X(f.instance.popper),F;f.instance.reference===e&&(e=X(e));var g=bA("transform"),eb=f.instance.popper.style,T=eb.top,c=eb.left,P=eb[g];eb.top="";eb.left="";eb[g]="";F=gG(f.instance.popper,f.instance.reference,d.padding,e,f.positionFixed);eb.top=T;eb.left=c;eb[g]=P;d.boundaries=F;var dX=d.priority,b=f.offsets.popper,gf={primary:function(f){var e=b[f];return b[f]<F[f]&&!d.escapeWithReference&&(e=Math.max(b[f],F[f])),uf({},f,e)},secondary:function(f){var e="right"===f?"left":"top",g=b[e];return b[f]>F[f]&&!d.escapeWithReference&&(g=Math.min(b[e],F[f]-("right"===f?b.width:b.height))),uf({},e,g)}};return dX.forEach(function(f){var d=-1!==["left","top"].indexOf(f)?"primary":"secondary";b=vf({},b,gf[d](f))}),f.offsets.popper=b,f},priority:["left","right","top","bottom"],padding:5,boundariesElement:"scrollParent"},keepTogether:{order:400,enabled:!0,fn:function(f){var d=f.offsets,e=d.popper,F=d.reference,g=f.placement.split("-")[0],eb=Math.floor,T=-1!==["top","bottom"].indexOf(g),c=T?"right":"bottom",P=T?"left":"top",dX=T?"width":"height";return e[c]<eb(F[P])&&(f.offsets.popper[P]=eb(F[P])-e[dX]),e[P]>eb(F[c])&&(f.offsets.popper[P]=eb(F[c])),f}},arrow:{order:500,enabled:!0,fn:function(f,d){var e,F;if(!m(f.instance.modifiers,"arrow","keepTogether"))return f;if(F=d.element,"string"==typeof F){if(!(F=f.instance.popper.querySelector(F)))return f}else if(!f.instance.popper.contains(F))return console.warn("WARNING: `arrow.element` must be child of its popper element!"),f;var g=f.placement.split("-")[0],eb=f.offsets,T=eb.popper,P=eb.reference,dX=-1!==["left","right"].indexOf(g),b=dX?"height":"width",X=dX?"Top":"Left",gf=X.toLowerCase(),eC=dX?"left":"top",eD=dX?"bottom":"right",cS=cH(F)[b];P[eD]-cS<T[gf]&&(f.offsets.popper[gf]-=T[gf]-(P[eD]-cS));P[gf]+cS>T[eD]&&(f.offsets.popper[gf]+=P[gf]+cS-T[eD]);f.offsets.popper=da(f.offsets.popper);var a=P[gf]+P[b]/2-cS/2,D=c(f.instance.popper),fT=parseFloat(D["margin"+X],10),eT=parseFloat(D["border"+X+"Width"],10),eR=a-f.offsets.popper[gf]-fT-eT;return eR=Math.max(Math.min(T[b]-cS,eR),0),f.arrowElement=F,f.offsets.arrow=(uf(e={},gf,Math.round(eR)),uf(e,eC,""),e),f},element:"[x-arrow]"},flip:{order:600,enabled:!0,fn:function(f,d){if(ec(f.instance.modifiers,"inner")||f.flipped&&f.placement===f.originalPlacement)return f;var e=gG(f.instance.popper,f.instance.reference,d.padding,d.boundariesElement,f.positionFixed),F=f.placement.split("-")[0],g=dg(F),eb=f.placement.split("-")[1]||"",T=[];switch(d.behavior){case wf:T=[F,g];break;case xf:T=n(F);break;case yf:T=n(F,!0);break;default:T=d.behavior}return T.forEach(function(c,P){if(F!==c||T.length===P+1)return f;F=f.placement.split("-")[0];g=dg(F);var dX,b=f.offsets.popper,X=f.offsets.reference,gf=Math.floor,eC="left"===F&&gf(b.right)>gf(X.left)||"right"===F&&gf(b.left)<gf(X.right)||"top"===F&&gf(b.bottom)>gf(X.top)||"bottom"===F&&gf(b.top)<gf(X.bottom),eD=gf(b.left)<gf(e.left),cS=gf(b.right)>gf(e.right),a=gf(b.top)<gf(e.top),D=gf(b.bottom)>gf(e.bottom),da="left"===F&&eD||"right"===F&&cS||"top"===F&&a||"bottom"===F&&D,fT=-1!==["top","bottom"].indexOf(F),eT=!!d.flipVariations&&(fT&&"start"===eb&&eD||fT&&"end"===eb&&cS||!fT&&"start"===eb&&a||!fT&&"end"===eb&&D);(eC||da||eT)&&(f.flipped=!0,(eC||da)&&(F=T[P+1]),eT&&(eb="end"===(dX=eb)?"start":"start"===dX?"end":dX),f.placement=F+(eb?"-"+eb:""),f.offsets.popper=vf({},f.offsets.popper,cg(f.instance.popper,f.offsets.reference,f.placement)),f=W(f.instance.modifiers,f,"flip"))}),f},behavior:"flip",padding:5,boundariesElement:"viewport"},inner:{order:700,enabled:!1,fn:function(f){var d=f.placement,e=d.split("-")[0],F=f.offsets,g=F.popper,eb=F.reference,T=-1!==["left","right"].indexOf(e),c=-1===["top","left"].indexOf(e);return g[T?"left":"top"]=eb[e]-(c?g[T?"width":"height"]:0),f.placement=dg(d),f.offsets.popper=da(g),f}},hide:{order:800,enabled:!0,fn:function(f){if(!m(f.instance.modifiers,"hide","preventOverflow"))return f;var d=f.offsets.reference,e=cSb(f.instance.modifiers,function(f){return"preventOverflow"===f.name}).boundaries;if(d.bottom<e.top||d.left>e.right||d.top>e.bottom||d.right<e.left){if(!0===f.hide)return f;f.hide=!0;f.attributes["x-out-of-boundaries"]=""}else{if(!1===f.hide)return f;f.hide=!1;f.attributes["x-out-of-boundaries"]=!1}return f}},computeStyle:{order:850,enabled:!0,fn:function(f,d){var e=d.x,F=d.y,g=f.offsets.popper,eb=cSb(f.instance.modifiers,function(f){return"applyStyle"===f.name}).gpuAcceleration,T,c,P;void 0!==eb&&console.warn("WARNING: `gpuAcceleration` option moved to `computeStyle` modifier and will not be supported in future versions of Popper.js!");var dX,b,gf,eC,eD,cS,a,D,da,eT,eR,gG,cT,eA,cH=void 0!==eb?eb:d.gpuAcceleration,dg=X(f.instance.popper),cg=fT(dg),W={position:g.position},ec=(dX=f,b=window.devicePixelRatio<2||!v,gf=dX.offsets,eC=gf.popper,eD=gf.reference,cS=Math.round,a=Math.floor,D=function(f){return f},da=cS(eD.width),eT=cS(eC.width),eR=-1!==["left","right"].indexOf(dX.placement),gG=-1!==dX.placement.indexOf("-"),eA=b?cS:D,{left:(cT=b?eR||gG||da%2==eT%2?cS:a:D)(da%2==1&&eT%2==1&&!gG&&b?eC.left-1:eC.left),top:eA(eC.top),bottom:eA(eC.bottom),right:cT(eC.right)}),h="bottom"===e?"top":"bottom",i="right"===F?"left":"right",j=bA("transform"),k=void 0,l=void 0;return(l="bottom"===h?"HTML"===dg.nodeName?-dg.clientHeight+ec.bottom:-cg.height+ec.bottom:ec.top,k="right"===i?"HTML"===dg.nodeName?-dg.clientWidth+ec.right:-cg.width+ec.right:ec.left,cH&&j)?(W[j]="translate3d("+k+"px, "+l+"px, 0)",W[h]=0,W[i]=0,W.willChange="transform"):(T="bottom"===h?-1:1,c="right"===i?-1:1,W[h]=l*T,W[i]=k*c,W.willChange=h+", "+i),P={"x-placement":f.placement},f.attributes=vf({},P,f.attributes),f.styles=vf({},W,f.styles),f.arrowStyles=vf({},f.offsets.arrow,f.arrowStyles),f},gpuAcceleration:!0,x:"bottom",y:"right"},applyStyle:{order:900,enabled:!0,fn:function(f){var d,e;return l(f.instance.popper,f.styles),d=f.instance.popper,e=f.attributes,Object.keys(e).forEach(function(f){!1!==e[f]?d.setAttribute(f,e[f]):d.removeAttribute(f)}),f.arrowElement&&Object.keys(f.arrowStyles).length&&l(f.arrowElement,f.arrowStyles),f},onLoad:function(f,d,e,F,g){var eb=eA(g,d,f,e.positionFixed),T=cT(e.placement,eb,d,f,e.modifiers.flip.boundariesElement,e.modifiers.flip.padding);return d.setAttribute("x-placement",T),l(d,{position:e.positionFixed?"fixed":"absolute"}),e},gpuAcceleration:void 0}}};z=function(){function f(d,e){var F=this,g=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{},eb;!function(f,d){if(!(f instanceof d))throw new TypeError("Cannot call a class as a function")}(this,f);this.scheduleUpdate=function(){return requestAnimationFrame(F.update)};this.update=s(this.update.bind(this));this.options=vf({},f.Defaults,g);this.state={isDestroyed:!1,isCreated:!1,scrollParents:[]};this.reference=d&&d.jquery?d[0]:d;this.popper=e&&e.jquery?e[0]:e;this.options.modifiers={};Object.keys(vf({},f.Defaults.modifiers,g.modifiers)).forEach(function(d){F.options.modifiers[d]=vf({},f.Defaults.modifiers[d]||{},g.modifiers?g.modifiers[d]:{})});this.modifiers=Object.keys(this.options.modifiers).map(function(f){return vf({name:f},F.options.modifiers[f])}).sort(function(f,d){return f.order-d.order});this.modifiers.forEach(function(f){f.enabled&&T(f.onLoad)&&f.onLoad(F.reference,F.popper,F.options,f,F.state)});this.update();eb=this.options.eventsEnabled;eb&&this.enableEventListeners();this.state.eventsEnabled=eb}return tf(f,[{key:"update",value:function(){return function(){if(!this.state.isDestroyed){var f={instance:this,styles:{},arrowStyles:{},attributes:{},flipped:!1,offsets:{}};f.offsets.reference=eA(this.state,this.popper,this.reference,this.options.positionFixed);f.placement=cT(this.options.placement,f.offsets.reference,this.popper,this.reference,this.options.modifiers.flip.boundariesElement,this.options.modifiers.flip.padding);f.originalPlacement=f.placement;f.positionFixed=this.options.positionFixed;f.offsets.popper=cg(this.popper,f.offsets.reference,f.placement);f.offsets.popper.position=this.options.positionFixed?"fixed":"absolute";f=W(this.modifiers,f);this.state.isCreated?this.options.onUpdate(f):(this.state.isCreated=!0,this.options.onCreate(f))}}.call(this)}},{key:"destroy",value:function(){return function(){return this.state.isDestroyed=!0,ec(this.modifiers,"applyStyle")&&(this.popper.removeAttribute("x-placement"),this.popper.style.position="",this.popper.style.top="",this.popper.style.left="",this.popper.style.right="",this.popper.style.bottom="",this.popper.style.willChange="",this.popper.style[bA("transform")]=""),this.disableEventListeners(),this.options.removeOnDestroy&&this.popper.parentNode.removeChild(this.popper),this}.call(this)}},{key:"enableEventListeners",value:function(){return function(){this.state.eventsEnabled||(this.state=i(this.reference,this.options,this.state,this.scheduleUpdate))}.call(this)}},{key:"disableEventListeners",value:function(){return j.call(this)}}]),f}();z.Utils=("undefined"!=typeof window?window:global).PopperUtils;z.placements=w;z.Defaults=y;var zf="dropdown",Af="bs.dropdown",Bf="."+Af,Cf=".data-api",Ef=d.fn[zf],Gf=new RegExp("38|40|27"),Hf={HIDE:"hide"+Bf,HIDDEN:"hidden"+Bf,SHOW:"show"+Bf,SHOWN:"shown"+Bf,CLICK:"click"+Bf,CLICK_DATA_API:"click"+Bf+Cf,KEYDOWN_DATA_API:"keydown"+Bf+Cf,KEYUP_DATA_API:"keyup"+Bf+Cf},If="disabled",Jf="show",Kf="dropup",Lf="dropright",Mf="dropleft",Nf="dropdown-menu-right",Of="position-static",Qf='[data-toggle="dropdown"]',Rf=".dropdown-menu",Sf=".navbar-nav",Uf=".dropdown-menu .dropdown-item:not(.disabled):not(:disabled)",Vf="top-start",Yf="top-end",Zf="bottom-start",$f="bottom-end",_f="right-start",fd="left-start",dd={offset:0,flip:!0,boundary:"scrollParent",reference:"toggle",display:"dynamic"},ed={offset:"(number|string|function)",flip:"boolean",boundary:"(string|element)",reference:"(string|element)",display:"string"},Fd=function(){function f(f,d){this._element=f;this._popper=null;this._config=this._getConfig(d);this._menu=this._getMenuElement();this._inNavbar=this._detectNavbar();this._addEventListeners()}var e=f.prototype;return e.toggle=function(){var e,F,g,eb,T;if(!this._element.disabled&&!d(this._element).hasClass(If)&&(e=f._getParentFromElement(this._element),F=d(this._menu).hasClass(Jf),(f._clearMenus(),!F)&&(g={relatedTarget:this._element},eb=d.Event(Hf.SHOW,g),d(e).trigger(eb),!eb.isDefaultPrevented()))){if(!this._inNavbar){if("undefined"==typeof z)throw new TypeError("Bootstrap's dropdowns require Popper.js (https://popper.js.org/)");T=this._element;"parent"===this._config.reference?T=e:r.isElement(this._config.reference)&&(T=this._config.reference,"undefined"!=typeof this._config.reference.jquery&&(T=this._config.reference[0]));"scrollParent"!==this._config.boundary&&d(e).addClass(Of);this._popper=new z(T,this._menu,this._getPopperConfig())}"ontouchstart"in document.documentElement&&0===d(e).closest(Sf).length&&d(document.body).children().on("mouseover",null,d.noop);this._element.focus();this._element.setAttribute("aria-expanded",!0);d(this._menu).toggleClass(Jf);d(e).toggleClass(Jf).trigger(d.Event(Hf.SHOWN,g))}},e.show=function(){if(!(this._element.disabled||d(this._element).hasClass(If)||d(this._menu).hasClass(Jf))){var e={relatedTarget:this._element},F=d.Event(Hf.SHOW,e),g=f._getParentFromElement(this._element);d(g).trigger(F);F.isDefaultPrevented()||(d(this._menu).toggleClass(Jf),d(g).toggleClass(Jf).trigger(d.Event(Hf.SHOWN,e)))}},e.hide=function(){if(!this._element.disabled&&!d(this._element).hasClass(If)&&d(this._menu).hasClass(Jf)){var e={relatedTarget:this._element},F=d.Event(Hf.HIDE,e),g=f._getParentFromElement(this._element);d(g).trigger(F);F.isDefaultPrevented()||(d(this._menu).toggleClass(Jf),d(g).toggleClass(Jf).trigger(d.Event(Hf.HIDDEN,e)))}},e.dispose=function(){d.removeData(this._element,Af);d(this._element).off(Bf);this._element=null;(this._menu=null)!==this._popper&&(this._popper.destroy(),this._popper=null)},e.update=function(){this._inNavbar=this._detectNavbar();null!==this._popper&&this._popper.scheduleUpdate()},e._addEventListeners=function(){var f=this;d(this._element).on(Hf.CLICK,function(d){d.preventDefault();d.stopPropagation();f.toggle()})},e._getConfig=function(f){return f=g({},this.constructor.Default,d(this._element).data(),f),r.typeCheckConfig(zf,f,this.constructor.DefaultType),f},e._getMenuElement=function(){if(!this._menu){var d=f._getParentFromElement(this._element);d&&(this._menu=d.querySelector(Rf))}return this._menu},e._getPlacement=function(){var f=d(this._element.parentNode),e=Zf;return f.hasClass(Kf)?(e=Vf,d(this._menu).hasClass(Nf)&&(e=Yf)):f.hasClass(Lf)?e=_f:f.hasClass(Mf)?e=fd:d(this._menu).hasClass(Nf)&&(e=$f),e},e._detectNavbar=function(){return 0<d(this._element).closest(".navbar").length},e._getOffset=function(){var f=this,d={};return"function"==typeof this._config.offset?d.fn=function(d){return d.offsets=g({},d.offsets,f._config.offset(d.offsets,f._element)||{}),d}:d.offset=this._config.offset,d},e._getPopperConfig=function(){var f={placement:this._getPlacement(),modifiers:{offset:this._getOffset(),flip:{enabled:this._config.flip},preventOverflow:{boundariesElement:this._config.boundary}}};return"static"===this._config.display&&(f.modifiers.applyStyle={enabled:!1}),f},f._jQueryInterface=function(e){return this.each(function(){var F=d(this).data(Af);if(F||(F=new f(this,"object"==typeof e?e:null),d(this).data(Af,F)),"string"==typeof e){if("undefined"==typeof F[e])throw new TypeError('No method named "'+e+'"');F[e]()}})},f._clearMenus=function(e){var F,g;if(!e||3!==e.which&&("keyup"!==e.type||9===e.which))for(var eb=[].slice.call(document.querySelectorAll(Qf)),T=0,c=eb.length;T<c;T++){var P=f._getParentFromElement(eb[T]),dX=d(eb[T]).data(Af),b={relatedTarget:eb[T]};(e&&"click"===e.type&&(b.clickEvent=e),dX)&&(F=dX._menu,!d(P).hasClass(Jf)||e&&("click"===e.type&&/input|textarea/i.test(e.target.tagName)||"keyup"===e.type&&9===e.which)&&d.contains(P,e.target)||(g=d.Event(Hf.HIDE,b),d(P).trigger(g),g.isDefaultPrevented()||("ontouchstart"in document.documentElement&&d(document.body).children().off("mouseover",null,d.noop),eb[T].setAttribute("aria-expanded","false"),d(F).removeClass(Jf),d(P).removeClass(Jf).trigger(d.Event(Hf.HIDDEN,b)))))}},f._getParentFromElement=function(f){var d,e=r.getSelectorFromElement(f);return e&&(d=document.querySelector(e)),d||f.parentNode},f._dataApiKeydownHandler=function(e){var F,g,eb,T,c;(/input|textarea/i.test(e.target.tagName)?32===e.which||27!==e.which&&(40!==e.which&&38!==e.which||d(e.target).closest(Rf).length):!Gf.test(e.which))||(e.preventDefault(),e.stopPropagation(),this.disabled||d(this).hasClass(If))||(F=f._getParentFromElement(this),g=d(F).hasClass(Jf),g&&(!g||27!==e.which&&32!==e.which)?(eb=[].slice.call(F.querySelectorAll(Uf)),0!==eb.length&&(T=eb.indexOf(e.target),38===e.which&&0<T&&T--,40===e.which&&T<eb.length-1&&T++,T<0&&(T=0),eb[T].focus())):(27===e.which&&(c=F.querySelector(Qf),d(c).trigger("focus")),d(this).trigger("click")))},F(f,null,[{key:"VERSION",get:function(){return"4.3.1"}},{key:"Default",get:function(){return dd}},{key:"DefaultType",get:function(){return ed}}]),f}();d(document).on(Hf.KEYDOWN_DATA_API,Qf,Fd._dataApiKeydownHandler).on(Hf.KEYDOWN_DATA_API,Rf,Fd._dataApiKeydownHandler).on(Hf.CLICK_DATA_API+" "+Hf.KEYUP_DATA_API,Fd._clearMenus).on(Hf.CLICK_DATA_API,Qf,function(f){f.preventDefault();f.stopPropagation();Fd._jQueryInterface.call(d(this),"toggle")}).on(Hf.CLICK_DATA_API,".dropdown form",function(f){f.stopPropagation()});d.fn[zf]=Fd._jQueryInterface;d.fn[zf].Constructor=Fd;d.fn[zf].noConflict=function(){return d.fn[zf]=Ef,Fd._jQueryInterface};var gd=["background","cite","href","itemtype","longdesc","poster","src","xlink:href"],ebd=/^(?:(?:https?|mailto|ftp|tel|file):|[^&:/?#]*(?:[/?#]|$))/gi,Td=/^data:(?:image\/(?:bmp|gif|jpeg|jpg|png|tiff|webp)|video\/(?:mpeg|mp4|ogg|webm)|audio\/(?:mp3|oga|ogg|opus));base64,[a-z0-9+/]+=*$/i,cd="tooltip",Pd="bs.tooltip",dXd="."+Pd,bd=d.fn[cd],Xd="bs-tooltip",gfd=new RegExp("(^|\\s)"+Xd+"\\S+","g"),eCd=["sanitize","whiteList","sanitizeFn"],eDd={animation:"boolean",template:"string",title:"(string|element|function)",trigger:"string",delay:"(number|object)",html:"boolean",selector:"(string|boolean)",placement:"(string|function)",offset:"(number|string|function)",container:"(string|element|boolean)",fallbackPlacement:"(string|array)",boundary:"(string|element)",sanitize:"boolean",sanitizeFn:"(null|function)",whiteList:"object"},cSd={AUTO:"auto",TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"},ad={animation:!0,template:'<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,selector:!1,placement:"top",offset:0,container:!1,fallbackPlacement:"flip",boundary:"scrollParent",sanitize:!0,sanitizeFn:null,whiteList:{"*":["class","dir","id","lang","role",/^aria-[\w-]*$/i],a:["target","href","title","rel"],area:[],b:[],br:[],col:[],code:[],div:[],em:[],hr:[],h1:[],h2:[],h3:[],h4:[],h5:[],h6:[],i:[],img:["src","alt","title","width","height"],li:[],ol:[],p:[],pre:[],s:[],small:[],span:[],sub:[],sup:[],strong:[],u:[],ul:[]}},Dd="show",dad="out",fTd={HIDE:"hide"+dXd,HIDDEN:"hidden"+dXd,SHOW:"show"+dXd,SHOWN:"shown"+dXd,INSERTED:"inserted"+dXd,CLICK:"click"+dXd,FOCUSIN:"focusin"+dXd,FOCUSOUT:"focusout"+dXd,MOUSEENTER:"mouseenter"+dXd,MOUSELEAVE:"mouseleave"+dXd},eTd="fade",eRd="show",gGd=".tooltip-inner",cTd=".arrow",eAd="hover",cHd="focus",dgd="click",cgd="manual",cSbd=function(){function f(f,d){if("undefined"==typeof z)throw new TypeError("Bootstrap's tooltips require Popper.js (https://popper.js.org/)");this._isEnabled=!0;this._timeout=0;this._hoverState="";this._activeTrigger={};this._popper=null;this.element=f;this.config=this._getConfig(d);this.tip=null;this._setListeners()}var e=f.prototype;return e.enable=function(){this._isEnabled=!0},e.disable=function(){this._isEnabled=!1},e.toggleEnabled=function(){this._isEnabled=!this._isEnabled},e.toggle=function(f){if(this._isEnabled)if(f){var e=this.constructor.DATA_KEY,F=d(f.currentTarget).data(e);F||(F=new this.constructor(f.currentTarget,this._getDelegateConfig()),d(f.currentTarget).data(e,F));F._activeTrigger.click=!F._activeTrigger.click;F._isWithActiveTrigger()?F._enter(null,F):F._leave(null,F)}else{if(d(this.getTipElement()).hasClass(eRd))return void this._leave(null,this);this._enter(null,this)}},e.dispose=function(){clearTimeout(this._timeout);d.removeData(this.element,this.constructor.DATA_KEY);d(this.element).off(this.constructor.EVENT_KEY);d(this.element).closest(".modal").off("hide.bs.modal");this.tip&&d(this.tip).remove();this._isEnabled=null;this._timeout=null;this._hoverState=null;(this._activeTrigger=null)!==this._popper&&this._popper.destroy();this._popper=null;this.element=null;this.config=null;this.tip=null},e.show=function(){var f=this,e,F,g,eb,T,c,P,dX,b,X;if("none"===d(this.element).css("display"))throw new Error("Please use show on visible elements");if(e=d.Event(this.constructor.Event.SHOW),this.isWithContent()&&this._isEnabled){if(d(this.element).trigger(e),F=r.findShadowRoot(this.element),g=d.contains(null!==F?F:this.element.ownerDocument.documentElement,this.element),e.isDefaultPrevented()||!g)return;eb=this.getTipElement();T=r.getUID(this.constructor.NAME);eb.setAttribute("id",T);this.element.setAttribute("aria-describedby",T);this.setContent();this.config.animation&&d(eb).addClass(eTd);c="function"==typeof this.config.placement?this.config.placement.call(this,eb,this.element):this.config.placement;P=this._getAttachment(c);this.addAttachmentClass(P);dX=this._getContainer();d(eb).data(this.constructor.DATA_KEY,this);d.contains(this.element.ownerDocument.documentElement,this.tip)||d(eb).appendTo(dX);d(this.element).trigger(this.constructor.Event.INSERTED);this._popper=new z(this.element,eb,{placement:P,modifiers:{offset:this._getOffset(),flip:{behavior:this.config.fallbackPlacement},arrow:{element:cTd},preventOverflow:{boundariesElement:this.config.boundary}},onCreate:function(d){d.originalPlacement!==d.placement&&f._handlePopperPlacementChange(d)},onUpdate:function(d){return f._handlePopperPlacementChange(d)}});d(eb).addClass(eRd);"ontouchstart"in document.documentElement&&d(document.body).children().on("mouseover",null,d.noop);b=function(){f.config.animation&&f._fixTransition();var e=f._hoverState;f._hoverState=null;d(f.element).trigger(f.constructor.Event.SHOWN);e===dad&&f._leave(null,f)};d(this.tip).hasClass(eTd)?(X=r.getTransitionDurationFromElement(this.tip),d(this.tip).one(r.TRANSITION_END,b).emulateTransitionEnd(X)):b()}},e.hide=function(f){var e=this,F=this.getTipElement(),g=d.Event(this.constructor.Event.HIDE),eb=function(){e._hoverState!==Dd&&F.parentNode&&F.parentNode.removeChild(F);e._cleanTipClass();e.element.removeAttribute("aria-describedby");d(e.element).trigger(e.constructor.Event.HIDDEN);null!==e._popper&&e._popper.destroy();f&&f()},T;(d(this.element).trigger(g),g.isDefaultPrevented())||((d(F).removeClass(eRd),"ontouchstart"in document.documentElement&&d(document.body).children().off("mouseover",null,d.noop),this._activeTrigger[dgd]=!1,this._activeTrigger[cHd]=!1,this._activeTrigger[eAd]=!1,d(this.tip).hasClass(eTd))?(T=r.getTransitionDurationFromElement(F),d(F).one(r.TRANSITION_END,eb).emulateTransitionEnd(T)):eb(),this._hoverState="")},e.update=function(){null!==this._popper&&this._popper.scheduleUpdate()},e.isWithContent=function(){return Boolean(this.getTitle())},e.addAttachmentClass=function(f){d(this.getTipElement()).addClass(Xd+"-"+f)},e.getTipElement=function(){return this.tip=this.tip||d(this.config.template)[0],this.tip},e.setContent=function(){var f=this.getTipElement();this.setElementContent(d(f.querySelectorAll(gGd)),this.getTitle());d(f).removeClass(eTd+" "+eRd)},e.setElementContent=function(f,e){"object"!=typeof e||!e.nodeType&&!e.jquery?this.config.html?(this.config.sanitize&&(e=p(e,this.config.whiteList,this.config.sanitizeFn)),f.html(e)):f.text(e):this.config.html?d(e).parent().is(f)||f.empty().append(e):f.text(d(e).text())},e.getTitle=function(){var f=this.element.getAttribute("data-original-title");return f||(f="function"==typeof this.config.title?this.config.title.call(this.element):this.config.title),f},e._getOffset=function(){var f=this,d={};return"function"==typeof this.config.offset?d.fn=function(d){return d.offsets=g({},d.offsets,f.config.offset(d.offsets,f.element)||{}),d}:d.offset=this.config.offset,d},e._getContainer=function(){return!1===this.config.container?document.body:r.isElement(this.config.container)?d(this.config.container):d(document).find(this.config.container)},e._getAttachment=function(f){return cSd[f.toUpperCase()]},e._setListeners=function(){var f=this;this.config.trigger.split(" ").forEach(function(e){if("click"===e)d(f.element).on(f.constructor.Event.CLICK,f.config.selector,function(d){return f.toggle(d)});else if(e!==cgd){var F=e===eAd?f.constructor.Event.MOUSEENTER:f.constructor.Event.FOCUSIN,g=e===eAd?f.constructor.Event.MOUSELEAVE:f.constructor.Event.FOCUSOUT;d(f.element).on(F,f.config.selector,function(d){return f._enter(d)}).on(g,f.config.selector,function(d){return f._leave(d)})}});d(this.element).closest(".modal").on("hide.bs.modal",function(){f.element&&f.hide()});this.config.selector?this.config=g({},this.config,{trigger:"manual",selector:""}):this._fixTitle()},e._fixTitle=function(){var f=typeof this.element.getAttribute("data-original-title");(this.element.getAttribute("title")||"string"!==f)&&(this.element.setAttribute("data-original-title",this.element.getAttribute("title")||""),this.element.setAttribute("title",""))},e._enter=function(f,e){var F=this.constructor.DATA_KEY;(e=e||d(f.currentTarget).data(F))||(e=new this.constructor(f.currentTarget,this._getDelegateConfig()),d(f.currentTarget).data(F,e));f&&(e._activeTrigger["focusin"===f.type?cHd:eAd]=!0);d(e.getTipElement()).hasClass(eRd)||e._hoverState===Dd?e._hoverState=Dd:(clearTimeout(e._timeout),e._hoverState=Dd,e.config.delay&&e.config.delay.show?e._timeout=setTimeout(function(){e._hoverState===Dd&&e.show()},e.config.delay.show):e.show())},e._leave=function(f,e){var F=this.constructor.DATA_KEY;(e=e||d(f.currentTarget).data(F))||(e=new this.constructor(f.currentTarget,this._getDelegateConfig()),d(f.currentTarget).data(F,e));f&&(e._activeTrigger["focusout"===f.type?cHd:eAd]=!1);e._isWithActiveTrigger()||(clearTimeout(e._timeout),e._hoverState=dad,e.config.delay&&e.config.delay.hide?e._timeout=setTimeout(function(){e._hoverState===dad&&e.hide()},e.config.delay.hide):e.hide())},e._isWithActiveTrigger=function(){for(var f in this._activeTrigger)if(this._activeTrigger[f])return!0;return!1},e._getConfig=function(f){var e=d(this.element).data();return Object.keys(e).forEach(function(f){-1!==eCd.indexOf(f)&&delete e[f]}),"number"==typeof(f=g({},this.constructor.Default,e,"object"==typeof f&&f?f:{})).delay&&(f.delay={show:f.delay,hide:f.delay}),"number"==typeof f.title&&(f.title=f.title.toString()),"number"==typeof f.content&&(f.content=f.content.toString()),r.typeCheckConfig(cd,f,this.constructor.DefaultType),f.sanitize&&(f.template=p(f.template,f.whiteList,f.sanitizeFn)),f},e._getDelegateConfig=function(){var f={},d;if(this.config)for(d in this.config)this.constructor.Default[d]!==this.config[d]&&(f[d]=this.config[d]);return f},e._cleanTipClass=function(){var f=d(this.getTipElement()),e=f.attr("class").match(gfd);null!==e&&e.length&&f.removeClass(e.join(""))},e._handlePopperPlacementChange=function(f){var d=f.instance;this.tip=d.popper;this._cleanTipClass();this.addAttachmentClass(this._getAttachment(f.placement))},e._fixTransition=function(){var f=this.getTipElement(),e=this.config.animation;null===f.getAttribute("x-placement")&&(d(f).removeClass(eTd),this.config.animation=!1,this.hide(),this.show(),this.config.animation=e)},f._jQueryInterface=function(e){return this.each(function(){var F=d(this).data(Pd),g="object"==typeof e&&e;if((F||!/dispose|hide/.test(e))&&(F||(F=new f(this,g),d(this).data(Pd,F)),"string"==typeof e)){if("undefined"==typeof F[e])throw new TypeError('No method named "'+e+'"');F[e]()}})},F(f,null,[{key:"VERSION",get:function(){return"4.3.1"}},{key:"Default",get:function(){return ad}},{key:"NAME",get:function(){return cd}},{key:"DATA_KEY",get:function(){return Pd}},{key:"Event",get:function(){return fTd}},{key:"EVENT_KEY",get:function(){return dXd}},{key:"DefaultType",get:function(){return eDd}}]),f}();d.fn[cd]=cSbd._jQueryInterface;d.fn[cd].Constructor=cSbd;d.fn[cd].noConflict=function(){return d.fn[cd]=bd,cSbd._jQueryInterface}});
\ No newline at end of file
diff --git a/public/view/console/console1.html b/public/view/console/console1.html
new file mode 100644
index 0000000..763eea9
--- /dev/null
+++ b/public/view/console/console1.html
@@ -0,0 +1,451 @@
+<!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="../../admin/css/other/console1.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" style="color: #28333E;" id="value1">
+									0
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="200" height="200" t="1591462258798"
+									 p-id="942" version="1.1">
+										<path fill="#fcc66f" d="M 262.7 835 c -15.3 0 -28.1 -11.4 -29.8 -26.6 L 174.1 291 c -0.6 -5.1 1 -10.2 4.5 -14 s 8.3 -6 13.4 -6 h 640 c 5.1 0 10 2.2 13.4 6 s 5 8.9 4.5 14 l -58.8 517.4 c -1.7 15.2 -14.5 26.6 -29.8 26.6 H 262.7 Z"
+										 p-id="943" />
+										<path fill="#ffd79c" d="M 802 289 l -58.8 517.4 c -0.7 6.1 -5.8 10.6 -11.9 10.6 h 30 c 6.1 0 11.2 -4.6 11.9 -10.6 L 832 289 h -30 Z"
+										 p-id="944" />
+										<path fill="#f56e73" d="M 164 307 c -16.5 0 -30 -13.5 -30 -30 v -58 c 0 -16.5 13.5 -30 30 -30 h 696 c 16.5 0 30 13.5 30 30 v 58 c 0 16.5 -13.5 30 -30 30 H 164 Z"
+										 p-id="945" />
+										<path fill="#ffa1a8" d="M 860 207 h -30 c 6.6 0 12 5.4 12 12 v 58 c 0 6.6 -5.4 12 -12 12 h 30 c 6.6 0 12 -5.4 12 -12 v -58 c 0 -6.6 -5.4 -12 -12 -12 Z"
+										 p-id="946" />
+										<path fill="#65c8ff" d="M 190.9 651.5 c -31.4 0 -56.9 -25.5 -56.9 -56.9 V 219 c 0 -16.5 13.5 -30 30 -30 h 466.2 c 9.9 0 18 8.1 18 18 v 301.1 c 0 34.7 -28.2 62.9 -62.9 62.9 s -62.9 -28.2 -62.9 -62.9 V 393.5 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 68.1 c 0 29.4 -23.9 53.4 -53.4 53.4 s -53.4 -23.9 -53.4 -53.4 v -68.1 c 0 -23.2 -18.8 -42 -42 -42 s -42 18.8 -42 42 v 201.1 c 0.1 31.4 -25.4 56.9 -56.7 56.9 Z"
+										 p-id="947" />
+										<path fill="#b3eaff" d="M 277.8 321.5 c -33.1 0 -60 26.9 -60 60 v 201.1 c 0 21.5 -17.4 38.9 -38.9 38.9 c -7.7 0 -14.8 -2.2 -20.8 -6.1 c 6.9 10.9 19 18.1 32.8 18.1 c 21.5 0 38.9 -17.4 38.9 -38.9 V 393.5 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z M 618.3 207 v 289.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -9.3 0 -18 -2.8 -25.2 -7.7 c 8.1 11.9 21.7 19.7 37.2 19.7 c 24.8 0 44.9 -20.1 44.9 -44.9 V 207 h -12 Z M 468.5 321.5 c -33.1 0 -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -6.7 0 -12.9 -1.9 -18.3 -5.1 c 6.2 10.2 17.4 17.1 30.3 17.1 c 19.5 0 35.4 -15.8 35.4 -35.4 v -68.1 c 0 -33.1 26.9 -60 60 -60 c 13.5 0 25.9 4.5 36 12 c -11 -14.5 -28.4 -24 -48 -24 Z"
+										 p-id="948" />
+										<path fill="#453b56" d="M 698 729.4 m -18 0 a 18 18 0 1 0 36 0 a 18 18 0 1 0 -36 0 Z" p-id="949" />
+										<path fill="#453b56" d="M 860 171 H 632.5 v 0.1 c -0.7 0 -1.5 -0.1 -2.2 -0.1 H 164 c -26.5 0 -48 21.5 -48 48 v 375.6 c 0 41.3 33.6 74.9 74.9 74.9 c 2.7 0 5.4 -0.2 8.1 -0.5 l 16 141.4 c 2.8 24.3 23.3 42.6 47.7 42.6 h 498.6 c 24.4 0 44.9 -18.3 47.7 -42.6 l 55.2 -485.6 c 24.5 -2.1 43.8 -22.7 43.8 -47.8 v -58 c 0 -26.5 -21.5 -48 -48 -48 Z M 190.9 633.5 c -21.5 0 -38.9 -17.4 -38.9 -38.9 V 219 c 0 -6.6 5.4 -12 12 -12 h 466.3 v 301.1 c 0 24.8 -20.1 44.9 -44.9 44.9 c -24.8 0 -44.9 -20.1 -44.9 -44.9 V 393.5 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 68.1 c 0 19.5 -15.8 35.4 -35.4 35.4 c -19.5 0 -35.4 -15.8 -35.4 -35.4 v -68.1 c 0 -33.1 -26.9 -60 -60 -60 s -60 26.9 -60 60 v 201.1 c 0.1 21.5 -17.4 38.9 -38.8 38.9 Z m 582.3 172.9 c -0.7 6.1 -5.8 10.6 -11.9 10.6 H 262.7 c -6.1 0 -11.2 -4.6 -11.9 -10.6 l -6.7 -59 h 396.6 c 9.9 0 18 -8.1 18 -18 s -8.1 -18 -18 -18 H 240 l -6.3 -55.4 c 19.3 -13.6 32.1 -36 32.1 -61.3 V 393.5 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 68.1 c 0 39.4 32 71.4 71.4 71.4 s 71.4 -32 71.4 -71.4 v -68.1 c 0 -13.2 10.8 -24 24 -24 s 24 10.8 24 24 v 114.6 c 0 44.6 36.3 80.9 80.9 80.9 c 44.6 0 80.9 -36.3 80.9 -80.9 V 325 h 161.7 l -54.9 481.4 Z M 872 277 c 0 6.6 -5.4 12 -12 12 H 666.3 v -82 H 860 c 6.6 0 12 5.4 12 12 v 58 Z"
+										 p-id="950" /></svg>
+								</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" style="color: #28333E;" id="value2">
+									0
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<svg t="1591462430908" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+									 p-id="3170" width="200" height="200">
+										<path d="M532 784.2c0 24.4-19.8 44.3-44.3 44.3s-44.3-19.8-44.3-44.3c0-24.4 44.3-80.3 44.3-80.3s44.3 55.8 44.3 80.3zM766 784.2c0 24.4 19.8 44.3 44.3 44.3 24.4 0 44.3-19.8 44.3-44.3 0-24.4-44.3-80.3-44.3-80.3S766 759.7 766 784.2z"
+										 fill="#97DCFF" p-id="3171"></path>
+										<path d="M123.5 471.3c-9.9 0-18-8.1-18-18v-302c0-9.9 8.1-18 18-18h58c9.9 0 18 8.1 18 18v302c0 9.9-8.1 18-18 18h-58z"
+										 fill="#FCC66F" p-id="3172"></path>
+										<path d="M181.5 151.3v302h-58v-302h58m0-36h-58c-19.9 0-36 16.1-36 36v302c0 19.9 16.1 36 36 36h58c19.9 0 36-16.1 36-36v-302c0-19.8-16.1-36-36-36z"
+										 fill="#453B56" p-id="3173"></path>
+										<path d="M266.4 210.7m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3174"></path>
+										<path d="M430.8 641.1c-9.9 0-18-8.1-18-18v-21.6c0-130.3 106-236.3 236.3-236.3s236.3 106 236.3 236.3v21.6c0 9.9-8.1 18-18 18H430.8z"
+										 fill="#FCC66F" p-id="3175"></path>
+										<path d="M649 383.2c-5 0-10 0.2-15 0.6 113.5 7.7 203.3 102.2 203.3 217.7v21.6h30v-21.6c0-120.6-97.7-218.3-218.3-218.3z"
+										 fill="#FFD79C" p-id="3176"></path>
+										<path d="M419.6 694.4c-22.1 0-40.1-18-40.1-40.1s18-40.1 40.1-40.1h458.8c22.1 0 40.1 18 40.1 40.1s-18 40.1-40.1 40.1H419.6z"
+										 fill="#F56E73" p-id="3177"></path>
+										<path d="M878.4 632.3h-30c12.2 0 22.1 9.9 22.1 22.1s-9.9 22.1-22.1 22.1h30c12.2 0 22.1-9.9 22.1-22.1s-9.9-22.1-22.1-22.1z"
+										 fill="#FFA1A8" p-id="3178"></path>
+										<path d="M693.3 846.4c0 24.4-19.8 44.3-44.3 44.3-24.4 0-44.3-19.8-44.3-44.3s44.3-80.3 44.3-80.3 44.3 55.9 44.3 80.3z"
+										 fill="#97DCFF" p-id="3179"></path>
+										<path d="M649 908.7c-34.3 0-62.3-27.9-62.3-62.3 0-28.5 36.9-77.2 48.1-91.4 3.4-4.3 8.6-6.8 14.1-6.8s10.7 2.5 14.1 6.8c11.3 14.2 48.1 62.9 48.1 91.4 0.2 34.3-27.8 62.3-62.1 62.3z m0-112.3c-14.1 20.4-26.3 41.9-26.3 50 0 14.5 11.8 26.3 26.3 26.3s26.3-11.8 26.3-26.3c0-8.1-12.1-29.6-26.3-50z"
+										 fill="#453B56" p-id="3180"></path>
+										<path d="M903.3 601.9v-0.5c0-134.1-104.4-244.3-236.3-253.6v-30.7c0-68.7-55.9-124.6-124.6-124.6H326.5c-9.9 0-18 8.1-18 18s8.1 18 18 18h215.9c48.8 0 88.6 39.7 88.6 88.6v30.7c-131.8 9.3-236.3 119.4-236.3 253.6v0.5c-19.6 9.3-33.2 29.3-33.2 52.4 0 32 26 58.1 58.1 58.1H459c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.2-27.9 62.2-62.3 0-20.3-18.6-50.7-33.5-71.8h264.9c-14.8 21-33.5 51.5-33.5 71.8 0 34.3 27.9 62.3 62.3 62.3 34.3 0 62.3-27.9 62.3-62.3 0-20.3-18.6-50.7-33.5-71.8h39.4c32 0 58.1-26 58.1-58.1 0-23.1-13.6-43-33.2-52.4zM487.8 810.4c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.2 41.9 26.2 50 0 14.5-11.8 26.3-26.2 26.3z m322.5 0c-14.5 0-26.3-11.8-26.3-26.3 0-8.1 12.1-29.6 26.3-50 14.1 20.4 26.3 41.9 26.3 50-0.1 14.5-11.9 26.3-26.3 26.3zM649 383.2c118.8 0 215.4 94.9 218.1 213.1H430.9c2.8-118.1 99.3-213.1 218.1-213.1z m251.5 271.1c0 12.2-9.9 22.1-22.1 22.1H419.6c-12.2 0-22.1-9.9-22.1-22.1 0-12.2 9.9-22.1 22.1-22.1h458.8c12.2 0.1 22.1 10 22.1 22.1z"
+										 fill="#453B56" p-id="3181"></path>
+									</svg>
+								</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" style="color: #28333E;" id="value3">
+									0
+								</div>
+								<div class="layui-col-xs4 layui-col-md4  top-panel-tips">
+									<svg t="1591462464512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+									 p-id="3311" width="200" height="200">
+										<path d="M750.4 216.5h-130v-15.3c0-32.9-26.8-59.7-59.7-59.7h-97.3c-32.9 0-59.7 26.8-59.7 59.7v15.3h-130c-30.7 0-55.6 25-55.6 55.6v72.4c0 9.9 8.1 18 18 18h31.5v478c0 23.2 18.8 42 42 42h405c23.2 0 42-18.8 42-42v-478H788c9.9 0 18-8.1 18-18v-72.4c0-30.6-25-55.6-55.6-55.6z"
+										 fill="#FCC66F" p-id="3312"></path>
+										<path d="M708.5 344.5v496c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24v-496h-30z" fill="#FFD79C" p-id="3313"></path>
+										<path d="M309.5 882.5c-23.2 0-42-18.8-42-42V596c0-9.9 8.1-18 18-18h36.8c30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-49.6zM664.9 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8h36.8c9.9 0 18 8.1 18 18v244.5c0 23.2-18.8 42-42 42h-49.6z"
+										 fill="#F56E73" p-id="3314"></path>
+										<path d="M708.5 596v244.5c0 13.3-10.7 24-24 24h30c13.3 0 24-10.7 24-24V596h-30z" fill="#FFA1A8" p-id="3315"></path>
+										<path d="M475.2 882.5c-9.9 0-18-8.1-18-18V632.8c0-30.2 24.6-54.8 54.8-54.8 30.2 0 54.8 24.6 54.8 54.8v231.7c0 9.9-8.1 18-18 18h-73.6z"
+										 fill="#F56E73" p-id="3316"></path>
+										<path d="M560.7 159.5h-18c23 0 41.7 18.7 41.7 41.7V221h18v-19.8c-0.1-23-18.7-41.7-41.7-41.7zM750.4 234.5h-30c20.8 0 37.6 16.8 37.6 37.6v72.4h30v-72.4c0-20.8-16.8-37.6-37.6-37.6z"
+										 fill="#FFD79C" p-id="3317"></path>
+										<path d="M750.4 198.5H638.2c-1.4-41.6-35.6-75-77.5-75h-97.3c-41.9 0-76.1 33.4-77.5 75H273.6c-40.6 0-73.6 33-73.6 73.6v72.4c0 19.9 16.1 36 36 36h13.5v460c0 33.1 26.9 60 60 60H714.7c33.1 0 60-26.9 60-60v-460H788c19.9 0 36-16.1 36-36v-72.4c0-40.6-33-73.6-73.6-73.6z m-287.1-39h97.3c22.1 0 40.2 17.2 41.5 39H421.8c1.4-21.8 19.4-39 41.5-39z m-104.2 705h-49.6c-13.3 0-24-10.7-24-24V596h36.8c20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7 0h-73.6V632.8c0-20.3 16.5-36.8 36.8-36.8 20.3 0 36.8 16.5 36.8 36.8v231.7z m189.7-24c0 13.3-10.7 24-24 24h-49.6V632.8c0-20.3 16.5-36.8 36.8-36.8h36.8v244.5z m0-280.5h-36.8c-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8-40.1 0-72.8 32.6-72.8 72.8v231.7h-44.2V632.8c0-40.1-32.6-72.8-72.8-72.8h-36.8v-74.5h279c9.9 0 18-8.1 18-18s-8.1-18-18-18h-279v-69h453V560zM788 344.5H236v-72.4c0-20.8 16.8-37.6 37.6-37.6h476.8c20.8 0 37.6 16.8 37.6 37.6v72.4z"
+										 fill="#453B56" p-id="3318"></path>
+										<path d="M621.8 467.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3319"></path>
+									</svg>
+								</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" style="color: #28333E;" id="value4">
+									0
+								</div>
+								<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
+									<svg t="1591462491887" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+									 p-id="3449" width="200" height="200">
+										<path d="M363.2 807c-9.9 0-18-8.1-18-18v-75.5c0-9.9 8.1-18 18-18h108.5c9.9 0 18 8.1 18 18V789c0 9.9-8.1 18-18 18H363.2z"
+										 fill="#F56E73" p-id="3450"></path>
+										<path d="M441.7 713.5h30V789h-30z" fill="#FFA1A8" p-id="3451"></path>
+										<path d="M259.6 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2zM525.1 398c-9.9 0-18-8.1-18-18V178.6c0-23.8 19.3-43.1 43.1-43.1s43.1 19.3 43.1 43.1V380c0 9.9-8.1 18-18 18h-50.2z"
+										 fill="#65C8FF" p-id="3452"></path>
+										<path d="M550.2 153.5c-3.2 0-6.2 0.7-9 1.7 9.4 3.6 16.1 12.7 16.1 23.4V380h18V178.6c0.1-13.9-11.2-25.1-25.1-25.1z"
+										 fill="#97DCFF" p-id="3453"></path>
+										<path d="M686 330.5H149c-9.9 0-18 8.1-18 18v63c0 9.9 8.1 18 18 18h33.2l45 225c8.7 43.4 47.1 75 91.4 75h197.6c44.3 0 82.7-31.5 91.4-75l45-225H686c9.9 0 18-8.1 18-18v-63c0-9.9-8.1-18-18-18z"
+										 fill="#FCC66F" p-id="3454"></path>
+										<path d="M608 411.5L560.1 651c-7 35.2-37.9 60.5-73.8 60.5h30c35.9 0 66.7-25.3 73.8-60.5L638 411.5h-30zM656 348.5h30v63h-30z"
+										 fill="#FFD79C" p-id="3455"></path>
+										<path d="M474.2 543.5m-18 0a18 18 0 1 0 36 0 18 18 0 1 0-36 0Z" fill="#453B56" p-id="3456"></path>
+										<path d="M416.9 525.5h-125c-9.9 0-18 8.1-18 18s8.1 18 18 18h125c9.9 0 18-8.1 18-18s-8.1-18-18-18zM893 543.5h-33.4c-65.2 0-118.2 53-118.2 118.2v19.6c0 9.9 8.1 18 18 18s18-8.1 18-18v-19.6c0-45.3 36.9-82.2 82.2-82.2H893c9.9 0 18-8.1 18-18s-8-18-18-18zM772.2 744.2c7-7 7-18.4 0-25.5-7-7-18.4-7-25.5 0s-7 18.4 0 25.5 18.4 7.1 25.5 0z"
+										 fill="#453B56" p-id="3457"></path>
+										<path d="M759.5 761.6c-9.9 0-18 8.1-18 18v11.6c0 43.7-35.6 79.3-79.3 79.3H487.3c-26.4 0-48.3-19.9-51.4-45.5h35.8c19.9 0 36-16.1 36-36v-41.5h8.6c52.8 0 98.7-37.6 109.1-89.4l42.1-210.6H686c19.9 0 36-16.1 36-36v-63c0-19.9-16.1-36-36-36h-74.6V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H345.9V178.6c0-33.7-27.4-61.1-61.1-61.1s-61.1 27.4-61.1 61.1v133.9H149c-19.9 0-36 16.1-36 36v63c0 19.9 16.1 36 36 36h18.5l42.1 210.6c10.4 51.8 56.2 89.4 109.1 89.4h8.6V789c0 19.9 16.1 36 36 36h36.6c3.3 45.5 41.2 81.5 87.5 81.5h174.8c63.6 0 115.3-51.7 115.3-115.3v-11.6c0-10-8.1-18-18-18z m-234.4-583c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9H525V178.6z m-265.5 0c0-13.9 11.2-25.1 25.1-25.1s25.1 11.2 25.1 25.1v133.9h-50.3V178.6zM149 411.5v-63h537v63H149z m169.7 300c-35.9 0-66.7-25.3-73.8-60.5l-40.7-203.5h426.6L590.1 651c-7 35.2-37.9 60.5-73.8 60.5H318.7z m44.5 77.5v-41.5h108.5V789H363.2z"
+										 fill="#453B56" p-id="3458"></path>
+									</svg>
+								</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 class="layui-card">
+						<div class="layui-card-header">动态</div>
+						<div class="layui-card-body">
+							<dl class="layuiadmin-card-status">
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a
+											 class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0
+											版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a
+											 class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a
+											 class="pear-text" lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>贤心 在 <a class="pear-text" lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a
+											 class="pear-text" lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+							</dl>
+						</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">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2021-09-06 11:28</span></li>
+								<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2021-09-06 11:28</span></li>
+							</ul>
+						</div>
+					</div>
+					<div class="layui-card">
+						<div class="layui-card-header">
+							链接
+						</div>
+						<div class="layui-card-body">
+							<a target="_blank" href="http://www.pearadmin.com" class="pear-btn pear-btn-primary  layui-btn-fluid" style="margin-top: 8px;height: 50px;line-height: 50px;">官
+								网</a>
+							<br />
+							<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Layui" class="pear-btn pear-btn-warming  layui-btn-fluid"
+							 style="margin-top: 8px;height: 50px;line-height: 50px;">下 载</a>
+							<br />
+							<a target="_blank" href="https://gitee.com/pear-admin/Pear-Admin-Boot" class="pear-btn pear-btn-danger  layui-btn-fluid"
+							 style="margin-top: 8px;height: 50px;line-height: 50px;">后 端</a>
+						</div>
+					</div>
+					<div class="layui-card">
+						<div class="layui-card-header">
+							寄语
+						</div>
+						<div class="layui-card-body" style="line-height:40px;">
+							原想将澎湃的爱平平稳稳放置你手心，奈何我徒有一股蛮劲，只顾向你跑去，一个不稳跌的满身脏兮兮。试图爬起的我，
+							心想你会不会笑我 " 献爱献的这样笨拙, 怎么不知避开爱里的埋伏 "
+						</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', 'count'], function() {
+				var $ = layui.jquery,
+					layer = layui.layer,
+					element = layui.element,
+					count = layui.count,
+					echarts = layui.echarts;
+
+				count.up("value1", {
+					time: 4000,
+					num: 440.34,
+					bit: 2,
+					regulator: 50
+				})
+
+				count.up("value2", {
+					time: 4000,
+					num: 236.30,
+					bit: 2,
+					regulator: 50
+				})
+
+				count.up("value3", {
+					time: 4000,
+					num: 634.43,
+					bit: 2,
+					regulator: 50
+				})
+
+				count.up("value4", {
+					time: 4000,
+					bit: 2,
+					num: 373.23,
+					regulator: 50
+				})
+
+				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
+
+				const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+				var option = {
+					backgroundColor: '#fff',
+					tooltip: {
+						show: false
+					},
+					grid: {
+						top: '10%',
+						bottom: '6%',
+						left: '6%',
+						right: '6%',
+						containLabel: true
+					},
+					xAxis: [{
+						type: 'category',
+						boundaryGap: false,
+						axisLine: {
+							show: false
+						},
+						axisTick: {
+							show: false
+						},
+						axisLabel: {
+							margin: 10,
+							//textStyle: {
+								fontSize: 14,
+								color: 'rgba(#999)'
+							//}
+						},
+						splitLine: {
+							show: true,
+							lineStyle: {
+								color: '#939ab6',
+								opacity: .15
+							}
+						},
+						data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
+					}, ],
+					yAxis: [{
+						type: 'value',
+						offset: 15,
+						max: 100,
+						min: 0,
+						axisTick: {
+							show: false
+						},
+						axisLine: {
+							show: false
+						},
+						axisLabel: {
+							margin: 10,
+							//textStyle: {
+								fontSize: 14,
+								color: '#999'
+							//}
+						},
+						splitLine: {
+							show: false
+						}
+
+					}],
+					series: [{
+						name: '2',
+						type: 'line',
+						z: 3,
+						showSymbol: false,
+						smoothMonotone: 'x',
+						lineStyle: {
+							width: 3,
+							color: {
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [{
+									offset: 0,
+									color: 'rgba(59,102,246)' // 0% 处的颜色
+								}, {
+									offset: 1,
+									color: 'rgba(118,237,252)' // 100% 处的颜色
+								}]
+							},
+							shadowBlur: 4,
+							shadowColor: 'rgba(69,126,247,.2)',
+							shadowOffsetY: 4
+						},
+						areaStyle: {
+							//normal: {
+								color: {
+									type: 'linear',
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [{
+										offset: 0,
+										color: 'rgba(227,233,250,.9)' // 0% 处的颜色
+									}, {
+										offset: 1,
+										color: 'rgba(248,251,252,.3)' // 100% 处的颜色
+									}]
+								}
+							//}
+						},
+						smooth: true,
+						data: [20, 56, 17, 40, 68, 42]
+					}, {
+						name: '1',
+						type: 'line',
+						showSymbol: false,
+						smoothMonotone: 'x',
+
+						lineStyle: {
+							width: 3,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: 'rgba(255,84,108)'
+							}, {
+								offset: 1,
+								color: 'rgba(252,140,118)'
+							}], false),
+							shadowBlur: 4,
+							shadowColor: 'rgba(253,121,128,.2)',
+							shadowOffsetY: 4
+						},
+						areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: 'rgba(255,84,108,.15)'
+							}, {
+								offset: 1,
+								color: 'rgba(252,140,118,0)'
+							}], false),
+						},
+						smooth: true,
+						data: [20, 71, 8, 50, 57, 32]
+					}, ]
+
+				};
+				echartsRecords.setOption(option);
+
+				window.onresize = function() {
+					echartsRecords.resize();
+				}
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/console/console2.html b/public/view/console/console2.html
new file mode 100644
index 0000000..a8eda13
--- /dev/null
+++ b/public/view/console/console2.html
@@ -0,0 +1,516 @@
+<!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="../../admin/css/other/console2.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md8">
+				<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 class="layui-row layui-col-space10">
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home1" data-title="主页"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-home"></i>
+										</div>
+										<span class="pear-card-title">主页</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home2" data-title="弹层"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-camera"></i>
+										</div>
+										<span class="pear-card-title">弹层</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home2" data-title="聊天"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-star"></i>
+										</div>
+										<span class="pear-card-title">聊天</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home3" data-title="相机"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-camera"></i>
+										</div>
+										<span class="pear-card-title">相机</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home4" data-title="表单"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-console"></i>
+										</div>
+										<span class="pear-card-title">表单</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home5" data-title="安全"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-auz"></i>
+										</div>
+										<span class="pear-card-title">安全</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home6" data-title="公告"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-cart"></i>
+										</div>
+										<span class="pear-card-title">公告</span>
+									</div>
+									<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
+										<div class="pear-card" data-id="home7" data-title="更多"
+											data-url="http://www.baidu.com">
+											<i class="layui-icon layui-icon-app"></i>
+										</div>
+										<span class="pear-card-title">更多</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="layui-col-md6">
+						<div class="layui-card">
+							<div class="layui-card-header">
+								代办任务
+							</div>
+							<div class="layui-card-body">
+								<div class="layui-row layui-col-space10">
+									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
+										<div class="pear-card2">
+											<div class="title">待审评论</div>
+											<div class="count pear-text">21</div>
+										</div>
+									</div>
+									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
+										<div class="pear-card2">
+											<div class="title">待审帖子</div>
+											<div class="count pear-text">32</div>
+										</div>
+									</div>
+									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
+										<div class="pear-card2">
+											<div class="title">待审文章</div>
+											<div class="count pear-text">14</div>
+										</div>
+									</div>
+									<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
+										<div class="pear-card2">
+											<div class="title">待审用户</div>
+											<div class="count pear-text">63</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="layui-col-md12">
+						<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;"></div>
+								</div>
+							</div>
+						</div>
+						<div class="layui-card">
+							<div class="layui-card-header">
+								使用记录
+							</div>
+							<div class="layui-card-body">
+								<table id="role-table" lay-filter="role-table"></table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md4">
+				<div class="layui-card">
+					<div class="layui-card-header">留言板</div>
+					<div class="layui-card-body">
+						<ul class="pear-card-status">
+							<li>
+								<p>要不要作为我的家人，搬来我家。</p>
+								<span>12月25日 19:92</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>快乐的时候不敢尽兴，频繁警戒自己保持清醒。</p>
+								<span>4月30日 22:43</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>夏天真的来了，尽管它还有些犹豫。</p>
+								<span>4月30日 22:43</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>看似不可达到的高度，只要坚持不懈就可能到达。</p>
+								<span>4月30日 22:43</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>当浑浊变成了一种常态，那么清白就成了一种罪过。</p>
+								<span>4月30日 22:43</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>那是一种内在的东西，他们到达不了，也无法触及！</p>
+								<span>5月12日 01:25</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							</li>
+							<li>
+								<p>希望是一个好东西,也许是最好的,好东西是不会消亡的！</p>
+								<span>6月11日 15:33</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>一切都在不可避免的走向庸俗。</p>
+								<span>2月09日 13:40</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>路上没有灯火的时候，就点亮自己的头颅。</p>
+								<span>3月11日 12:30</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+
+							<li>
+								<p>我们应该不虚度一生，应该能够说：＂我已经做了我能做的事。＂</p>
+								<span>4月30日 22:43</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							</li>
+							<li>
+								<p>接近，是我对一切的态度，是我对一切态度的距离</p>
+								<span>6月11日 15:33</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+							<li>
+								<p>没有锚的船当然也可以航行，只是紧张充满你的一生。</p>
+								<span>2月09日 13:40</span>
+								<a href="javascript:;" data-id="1"
+									class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--</div>-->
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
+				var $ = layui.jquery,
+					layer = layui.layer,
+					element = layui.element,
+					echarts = layui.echarts,
+					table = layui.table,
+					carousel = layui.carousel;
+
+				let cols = [
+					[{
+							type: 'checkbox'
+						},
+						{
+							title: '角色名',
+							field: 'roleName',
+							align: 'center',
+							width: 100
+						},
+						{
+							title: 'Key值',
+							field: 'roleCode',
+							align: 'center'
+						},
+						{
+							title: '描述',
+							field: 'details',
+							align: 'center'
+						},
+						{
+							title: '是否可用',
+							field: 'enable',
+							align: 'center',
+							templet: '#role-enable'
+						}
+					]
+				]
+
+				table.render({
+					elem: '#role-table',
+					url: '../../admin/data/role.json',
+					page: true,
+					cols: cols,
+					skin: 'line'
+				});
+
+
+				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
+
+				$("body").on("click", "[data-url]", function() {
+					parent.layui.tab.addTabOnlyByElem("content", {
+						id: $(this).attr("data-id"),
+						title: $(this).attr("data-title"),
+						url: $(this).attr("data-url"),
+						close: true
+					})
+				})
+
+
+				let bgColor = "#fff";
+				let color = [
+					"#0090FF",
+					"#36CE9E",
+					"#FFC005",
+					"#FF515A",
+					"#8B5CFF",
+					"#00CA69"
+				];
+				let echartData = [{
+						name: "1",
+						value1: 100,
+						value2: 233
+					},
+					{
+						name: "2",
+						value1: 138,
+						value2: 233
+					},
+					{
+						name: "3",
+						value1: 350,
+						value2: 200
+					},
+					{
+						name: "4",
+						value1: 173,
+						value2: 180
+					},
+					{
+						name: "5",
+						value1: 180,
+						value2: 199
+					},
+					{
+						name: "6",
+						value1: 150,
+						value2: 233
+					},
+					{
+						name: "7",
+						value1: 180,
+						value2: 210
+					},
+					{
+						name: "8",
+						value1: 230,
+						value2: 180
+					}
+				];
+
+				let xAxisData = echartData.map(v => v.name);
+				//  ["1", "2", "3", "4", "5", "6", "7", "8"]
+				let yAxisData1 = echartData.map(v => v.value1);
+				// [100, 138, 350, 173, 180, 150, 180, 230]
+				let yAxisData2 = echartData.map(v => v.value2);
+				// [233, 233, 200, 180, 199, 233, 210, 180]
+				const hexToRgba = (hex, opacity) => {
+					let rgbaColor = "";
+					let reg = /^#[\da-f]{6}$/i;
+					if (reg.test(hex)) {
+						rgbaColor =
+							`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
+					      "0x" + hex.slice(3, 5)
+					    )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+					}
+					return rgbaColor;
+				}
+
+				option = {
+					backgroundColor: bgColor,
+					color: color,
+					legend: {
+						right: 10,
+						top: 10
+					},
+					tooltip: {
+						trigger: "axis",
+						formatter: function(params) {
+							let html = '';
+							params.forEach(v => {
+								html +=
+									`<div style="color: #666;font-size: 14px;line-height: 24px">
+					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
+					                ${v.seriesName}.${v.name}
+					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
+					                万元`;
+							})
+							return html
+						},
+						extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
+						axisPointer: {
+							type: 'shadow',
+							shadowStyle: {
+								color: '#ffffff',
+								shadowColor: 'rgba(225,225,225,1)',
+								shadowBlur: 5
+							}
+						}
+					},
+					grid: {
+						top: 100,
+						containLabel: true
+					},
+					xAxis: [{
+						type: "category",
+						boundaryGap: false,
+						axisLabel: {
+							formatter: '{value}月',
+							textStyle: {
+								color: "#333"
+							}
+						},
+						axisLine: {
+							lineStyle: {
+								color: "#D9D9D9"
+							}
+						},
+						data: xAxisData
+					}],
+					yAxis: [{
+						type: "value",
+						name: '单位：万千瓦时',
+						axisLabel: {
+							textStyle: {
+								color: "#666"
+							}
+						},
+						nameTextStyle: {
+							color: "#666",
+							fontSize: 12,
+							lineHeight: 40
+						},
+						splitLine: {
+							lineStyle: {
+								type: "dashed",
+								color: "#E9E9E9"
+							}
+						},
+						axisLine: {
+							show: false
+						},
+						axisTick: {
+							show: false
+						}
+					}],
+					series: [{
+						name: "2018",
+						type: "line",
+						smooth: true,
+						symbolSize: 8,
+						zlevel: 3,
+						lineStyle: {
+							normal: {
+								color: color[0],
+								shadowBlur: 3,
+								shadowColor: hexToRgba(color[0], 0.5),
+								shadowOffsetY: 8
+							}
+						},
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[{
+											offset: 0,
+											color: hexToRgba(color[0], 0.3)
+										},
+										{
+											offset: 1,
+											color: hexToRgba(color[0], 0.1)
+										}
+									],
+									false
+								),
+								shadowColor: hexToRgba(color[0], 0.1),
+								shadowBlur: 10
+							}
+						},
+						data: yAxisData1
+					}, {
+						name: "2019",
+						type: "line",
+						smooth: true,
+						symbolSize: 8,
+						zlevel: 3,
+						lineStyle: {
+							normal: {
+								color: color[1],
+								shadowBlur: 3,
+								shadowColor: hexToRgba(color[1], 0.5),
+								shadowOffsetY: 8
+							}
+						},
+						areaStyle: {
+							normal: {
+								color: new echarts.graphic.LinearGradient(
+									0,
+									0,
+									0,
+									1,
+									[{
+											offset: 0,
+											color: hexToRgba(color[1], 0.3)
+										},
+										{
+											offset: 1,
+											color: hexToRgba(color[1], 0.1)
+										}
+									],
+									false
+								),
+								shadowColor: hexToRgba(color[1], 0.1),
+								shadowBlur: 10
+							}
+						},
+						data: yAxisData2
+					}]
+				};
+
+				echartsRecords.setOption(option);
+
+				window.onresize = function() {
+					echartsRecords.resize();
+				}
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/demo/index.html b/public/view/demo/index.html
new file mode 100644
index 0000000..5525c9b
--- /dev/null
+++ b/public/view/demo/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+		<style>
+			body {
+				margin: 0;
+				padding: 0;
+			}
+			.pear-container {
+				margin: 0;
+				padding: 0;
+			}
+			.right,
+			.left {
+				height: 100%;
+				position: absolute;
+				transition: all .3s;
+			}
+			.left {
+				width: 200px;
+				background-color: #f56c6c;
+			}
+			.right {
+				width: calc(100% - 200px);
+				background-color: #2d8cf0;
+				margin-left: 200px;
+			}
+			
+			.mini .left{
+				width: 0px;
+			}
+			.mini .right {
+				width: 100%;
+				margin-left: 0px;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="left">
+		</div>
+		<div class="right">
+			<button class="">显示 / 隐藏
+			</button>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['jquery'], function(){
+				var $ = layui.jquery;
+				
+				$("button").click(function(){
+					
+					if($(".pear-container").is(".mini")){
+						$(".pear-container").removeClass("mini");
+					} else {
+						$(".pear-container").addClass("mini");
+					}
+				})
+				
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/area.html b/public/view/document/area.html
new file mode 100644
index 0000000..1ccb2ed
--- /dev/null
+++ b/public/view/document/area.html
@@ -0,0 +1,143 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Area 省市级联 选择组件
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							    <link rel="stylesheet" href="component/pear/css/pear.css" />
+							    并
+							    <script src="component/layui/layui.js"></script>
+						        并
+							    <script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						基本使用
+					</div>
+					<div class="layui-card-body">
+						<div class="layui-form">
+							<div class="layui-form-item" id="area-picker">
+								<div class="layui-form-label">网点地址</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="province" class="province-selector" data-value="广东省">
+										<option value="">请选择省</option>
+									</select>
+								</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="city" class="city-selector" data-value="深圳市">
+										<option value="">请选择市</option>
+									</select>
+								</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="county" class="county-selector" data-value="龙岗区">
+										<option value="">请选择区</option>
+									</select>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						基本使用
+					</div>
+					<div class="layui-card-body">
+						<div class="layui-form">
+							<div class="layui-form-item" id="area-picker-copy">
+								<div class="layui-form-label">网点地址</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="province" class="province-selector" data-value="广东省">
+										<option value="">请选择省</option>
+									</select>
+								</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="city" class="city-selector" data-value="深圳市">
+										<option value="">请选择市</option>
+									</select>
+								</div>
+								<div class="layui-input-inline" style="width: 200px;">
+									<select name="county" class="county-selector" data-value="龙岗区">
+										<option value="">请选择区</option>
+									</select>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							layui.use(['area'], function () {
+							    var area = layui.area;
+								 
+							    area.render({
+							        elem: '#area-picker',
+							        change: function (res) {
+							            console.log(res);
+							        }
+							    });
+							});
+						</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['layer', 'form', 'area', 'element', 'code'], function() {
+				var layer = layui.layer,
+					form = layui.form,
+					area = layui.area;
+
+				layui.code();
+
+				area.render({
+					elem: '#area-picker',
+					change: function(res) {
+						//选择结果
+						console.log(res);
+					}
+				});
+				
+				area.render({
+					elem: '#area-picker-copy',
+					change: function(res) {
+						//选择结果
+						console.log(res);
+					}
+				});
+			});
+		</script>
+	</body>
+
+</html>
diff --git a/public/view/document/button.html b/public/view/document/button.html
new file mode 100644
index 0000000..62a86f2
--- /dev/null
+++ b/public/view/document/button.html
@@ -0,0 +1,305 @@
+<!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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						开发环境 
+					</div>
+					<div class="layui-card-body">
+						Pear Button 参考 Element UI 样式 ，提供 Button 服务
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								或
+								<link rel="stylesheet" href="component/pear/css/pear-module/button.css" />
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						简单使用
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn">Default Button</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-primary">Primary Button</button>&nbsp;&nbsp;
+						<br>
+						<br>
+						<button class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-danger"> Button-danger</button>&nbsp;&nbsp;
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<button class="pear-btn"> Default Button </button>
+								<button class="pear-btn" dashed> Dashed Button </button>
+								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
+								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
+								<button class="pear-btn pear-btn-success"> Button-Success </button>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						简约样式
+					</div>
+					<div class="layui-card-body">
+						<button plain class="pear-btn pear-btn-primary"> Button-Primary</button>&nbsp;&nbsp;
+						<button plain class="pear-btn pear-btn-success"> Button-Success</button>&nbsp;&nbsp;
+						<button plain class="pear-btn pear-btn-danger"> Button-Danger</button>&nbsp;&nbsp;
+						<button plain class="pear-btn pear-btn-warming"> Button-Warming</button>&nbsp;&nbsp;
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<button class="pear-btn"> Default Button </button>
+								<button class="pear-btn" dashed> Dashed Button </button>
+								<button class="pear-btn pear-btn-primary"> Primary Button </button>							
+								<button class="pear-btn pear-btn-primary"> Button-Primary </button>
+								<button class="pear-btn pear-btn-success"> Button-Success </button>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						按钮大小
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-primary"> Button-Default</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
+						<br>
+						<br>
+						<button class="pear-btn pear-btn-warming pear-btn-lg"> Button-Lg</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-warming"> Button-Default</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-warming pear-btn-sm"> Button-Sm</button>&nbsp;&nbsp;
+						<button class="pear-btn pear-btn-warming pear-btn-xs"> Button-Xs</button>&nbsp;&nbsp;
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<button class="pear-btn pear-btn-primary pear-btn-lg"> Button-Lg </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary"> Button-Default </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary pear-btn-sm"> Button-Sm </button>&nbsp;&nbsp;
+								<button class="pear-btn pear-btn-primary pear-btn-xs"> Button-Xs </button>&nbsp;&nbsp;
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						按钮组
+					</div>
+					<div class="layui-card-body">
+						<div class="pear-btn-group">
+							<button class="pear-btn pear-btn-primary" round> Button-One</button>
+							<button class="pear-btn pear-btn-primary" round> Button-Two</button>
+							<button class="pear-btn pear-btn-primary" round> Button-Three</button>
+						</div>
+						<br>
+						<br>
+						<div class="pear-btn-group">
+							<button class="pear-btn"> Button-One </button>
+							<button class="pear-btn"> Button-Two </button>
+							<button class="pear-btn"> Button-Three </button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<div class="pear-btn-group">
+								    <button class="pear-btn"> Button-One </button>
+								    <button class="pear-btn"> Button-Two </button>
+								    <button class="pear-btn"> Button-Three </button>
+								</div>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						Load 自动
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn pear-btn-primary" load> 加载 600 ms </button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(["button"], function() {
+								    var button = layui.button;
+								    
+									button.load({
+								        elem:'[load]',
+								        time: 600,
+								        done: function(){
+									        popup.success("加载完成");
+								        }
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						Load 手动
+					</div>
+					<div class="layui-card-body">
+
+						<button class="pear-btn pear-btn-primary" loading> 开始 </button>
+
+						<button class="pear-btn pear-btn-danger" stop> 停止 </button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(["button"], function() {
+								    var button = layui.button;
+								    
+									var dom = button.load({
+								        elem:'[load]',
+								    })
+									
+								    dom.stop(function() {
+								        popup.failure("已停止");
+								    });
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						本页跳转
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn pear-btn-primary" to> 本页跳转 </button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(["jquery"], function() {
+								    var $ = layui.jquery;
+								    
+								    $("[to]").click(function(){
+								        top.layui.frame.changePageByElement("content","http://www.baidu.com","百度一下",true)
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['element', 'code', 'jquery', "button", "popup"], function() {
+				var element = layui.element;
+				var $ = layui.jquery;
+				var popup = layui.popup;
+				var button = layui.button;
+				
+				layui.code();
+				
+				$("[load]").click(function() {
+					button.load({
+						elem: '[load]',
+						time: 600,
+						done: function() {
+							popup.success("加载完成");
+						}
+					})
+				})
+
+				var dom;
+
+				$("[loading]").click(function() {
+					dom = button.load({
+						elem: '[loading]'
+					})
+				})
+
+				$("[stop]").click(function() {
+					dom.stop(function() {
+						popup.failure("已停止");
+					});
+				})
+				
+				$("[to]").click(function(){
+					top.layui.admin.jump(14,"百度一下","http://www.bing.com",true)
+				})
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/card.html b/public/view/document/card.html
new file mode 100644
index 0000000..4f98816
--- /dev/null
+++ b/public/view/document/card.html
@@ -0,0 +1,78 @@
+<!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-card">
+			<div class="layui-card-body">
+				<form class="layui-form layui-form-pane">
+					<div class="layui-form-item">
+						<label class="layui-form-label">卡片标题</label>
+						<div class="layui-input-inline">
+							<input type="text" name="realName" id="realName" placeholder="" class="layui-input">
+						</div>
+						<label class="layui-form-label">卡片名称</label>
+						<div class="layui-input-inline">
+							<input type="text" name="username" id="username" placeholder="" class="layui-input">
+						</div>
+						<div class="layui-inline">
+							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon">&#xe615;</i>
+								搜 索</button>
+							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-btn"><i class="layui-icon">&#xe615;</i>
+								获取数据</button>
+							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-checked-btn"><i class="layui-icon">&#xe615;</i>
+								获取选中数据</button>
+						</div>
+					</div>
+				</form>
+				<div id="currentTableId"></div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['table', 'layer', 'form', 'jquery', 'card'], function() {
+
+				let table = layui.table;
+				let form = layui.form;
+				let $ = layui.jquery;
+				let layer = layui.layer;
+				let card = layui.card;
+
+				card.render({
+					elem: '#currentTableId',
+					url: '../../admin/data/card.json', // 接口数据
+					data: [], // 静态数据 
+					page: true, // 是否分页
+					limit: 8, // 每页数量
+					linenum: 4, // 每行数量
+					clickItem: function(data){ // 单击事件
+						console.log(data)
+					}
+				})
+				
+				// 监听搜索操作
+				form.on('submit(data-search-btn)', function(data) {
+					queryJson = data.field;
+					card.reload("currentTableId", {
+						where: queryJson,
+					});
+					return false;
+				});
+				form.on('submit(data-checked-btn)', function() {
+					var data = card.getChecked("currentTableId");
+					layer.msg(JSON.stringify(data));
+					return false;
+				});
+				form.on('submit(data-btn)', function() {
+					var data = card.getAllData("currentTableId");
+					layer.msg(JSON.stringify(data));
+					return false;
+				});
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/core.html b/public/view/document/core.html
new file mode 100644
index 0000000..1c81d15
--- /dev/null
+++ b/public/view/document/core.html
@@ -0,0 +1,219 @@
+<!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-card">
+			<div class="layui-card-body">
+				<button id="collapseSide" class="pear-btn">侧边切换</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="refreshThis" class="pear-btn">刷新当前</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="refresh" class="pear-btn">刷新指定</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="addTab" class="pear-btn">新增卡片</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="changeTabTitle" class="pear-btn">修改标题</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="closeTab" class="pear-btn">删除卡片</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="closeThis" class="pear-btn">删除当前</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="closeAll" class="pear-btn">删除全部</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="closeOther" class="pear-btn">删除其他</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="changeIframe" class="pear-btn">切换页面</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="jump" class="pear-btn">兼容切换</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<button id="fullScreen" class="pear-btn">有点多余</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<table class="layui-table">
+				  <colgroup>
+				    <col width="150">
+				    <col width="200">
+				    <col>
+				  </colgroup>
+				  <thead>
+				    <tr>
+				      <th>方法</th>
+				      <th>描述</th>
+				      <th>参数</th>
+					  <th>备注</th>
+				    </tr> 
+				  </thead>
+				  <tbody>
+				    <tr>
+				      <td>admin.collapseSide</td>
+				      <td>侧边收缩</td>
+				      <td>无</td>
+					  <td>无模式限制</td>
+				    </tr>
+				    <tr>
+				      <td>admin.refreshThis</td>
+				      <td>刷新当前</td>
+				      <td>无</td>
+					  <td>无模式限制</td>
+				    </tr>
+					<tr>
+					  <td>admin.refresh</td>
+					  <td>刷新指定</td>
+					  <td>id: 编号</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.addTab</td>
+					  <td>新增卡片</td>
+					  <td>id:编号,title:标题,url:路径</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.changeTabTitle</td>
+					  <td>修改标题</td>
+					  <td>id:编号,title:标题</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.closeTab</td>
+					  <td>关闭卡片</td>
+					  <td>id:编号</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.closeCurrentTab</td>
+					  <td>关闭当前</td>
+					  <td>无</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.closeAllTab</td>
+					  <td>关闭所有</td>
+					  <td>无</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.closeOtherTab</td>
+					  <td>关闭其他</td>
+					  <td>无</td>
+					  <td>仅限 TAB 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.changeIframe</td>
+					  <td>切换页面</td>
+					  <td>id:编号,title:标题,url:路径</td>
+					  <td>仅限 IFRAME 模式</td>
+					</tr>
+					<tr>
+					  <td>admin.jump</td>
+					  <td>兼容切换</td>
+					  <td>id:编号,title:标题,url:路径</td>
+					  <td>无模式限制</td>
+					</tr>
+					<tr>
+					  <td>admin.fullScreen</td>
+					  <td>全屏模式</td>
+					  <td>无</td>
+					  <td>无模式限制</td>
+					</tr>
+				  </tbody>
+				</table>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['jquery','layer'], function() {
+				var $ = layui.jquery;
+				
+				$("#collapseSide").click(function(){
+					parent.layui.admin.collapseSide()
+				})
+				
+				$("#refreshThis").click(function(){
+					parent.layui.admin.refreshThis()
+				})
+				
+				$("#refresh").click(function(){
+					parent.layui.admin.refresh(14)
+				})
+				
+				$("#addTab").click(function(){
+					parent.layui.admin.addTab(14,"百度一下","http://www.bing.com")
+				})
+				
+				$("#closeTab").click(function(){
+					parent.layui.admin.closeTab(14)
+				})
+				
+				$("#closeThis").click(function(){
+					parent.layui.admin.closeCurrentTab()
+				})
+				
+				$("#closeAll").click(function(){
+					parent.layui.admin.closeAllTab()
+				})
+				
+				$("#changeTabTitle").click(function(){
+					parent.layui.admin.changeTabTitle(16,"修改标题")
+				})
+				
+				$("#closeOther").click(function(){
+					parent.layui.admin.closeOtherTab()
+				})
+				
+				$("#changeIframe").click(function(){
+					parent.layui.admin.changeIframe(14,"百度一下","http://www.bing.com")
+				})
+				
+				$("#jump").click(function(){
+					parent.layui.admin.jump(14,"百度一下","http://www.bing.com")
+				})
+				
+				$("#fullScreen").click(function(){
+					parent.layui.admin.fullScreen()
+				})
+				
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/count.html b/public/view/document/count.html
new file mode 100644
index 0000000..e8f9f1b
--- /dev/null
+++ b/public/view/document/count.html
@@ -0,0 +1,124 @@
+<!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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						开发环境
+					</div>
+					<div class="layui-card-body">
+						Pear Count 数据滚动特效
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						简单使用
+					</div>
+					<div class="layui-card-body">
+						<h2 id="number1">0</h2>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['count'], function() {
+								    var count = layui.count;
+									
+								    count.up("number1", {
+								        time: 8000,
+								        num: 4540.34,
+								        regulator: 100
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						保留小数
+					</div>
+					<div class="layui-card-body">
+						<h2 id="number2">0</h2>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							layui.use(['count'], function() {
+							    var count = layui.count;
+								
+							    count.up("number2", {
+							        time: 8000,
+							        num: 4540.34,
+							        bit: 2,
+							        regulator: 100
+							    })
+							})
+						</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['element', 'code', 'count'], function() {
+				var element = layui.element;
+				var count = layui.count;
+
+				count.up("number1", {
+					time: 8000,
+					num: 4540.34,
+					regulator: 100
+				})
+
+				count.up("number2", {
+					time: 8000,
+					num: 9832.34,
+					bit: 2,
+					regulator: 100
+				})
+
+
+				layui.code();
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/drawer.html b/public/view/document/drawer.html
new file mode 100644
index 0000000..591e23b
--- /dev/null
+++ b/public/view/document/drawer.html
@@ -0,0 +1,597 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>抽屉组件</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+		<style>
+			.wrap {
+				display: none;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Drawer 在 弹出层 UI 上带来不一样的体验.
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">抽屉</div>
+					<div class="layui-card-body">
+						<button class="drawer-top pear-btn pear-btn-primary">上</button>
+						<button class="drawer-bottom pear-btn pear-btn-success">下</button>
+						<button class="drawer-left pear-btn pear-btn-warming">左</button>
+						<button class="drawer-right pear-btn pear-btn-danger">右</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['drawer'], function() {
+									var drawer = layui.drawer;
+
+								    drawer.open({
+								        direction: "right",
+								        dom: ".layer-top",
+								        distance: "30%"
+								    });
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">进阶</div>
+					<div class="layui-card-body">
+						<button class="drawer-close-mask pear-btn pear-btn-primary">手动关闭</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								var dom;
+
+								$(".drawer-close-mask").click(function() {
+								    dom = drawer.open({
+								        direction: "right",
+								        dom: ".layer-close-mask",
+								        distance: "30%",
+								        maskClose: false
+								    });
+								})
+
+								$("#btnClose").click(function() {
+								    dom.close();
+								})
+
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<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>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['drawer'], function() {
+									var drawer = layui.drawer;
+
+								    $(".drawer-auto-close").click(function() {
+								        dom = drawer.open({
+								            direction: "right",
+								            dom: ".layer-auto-close",
+								            distance: "30%",
+								            maskClose: false,
+								            time: 1000
+								        });
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">扩展</div>
+					<div class="layui-card-body">
+						<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['drawer'], function() {
+									var drawer = layui.drawer;
+
+								    $(".drawer-auto-close").click(function() {
+								        dom = drawer.open({
+								            direction: "right",
+								            dom: ".layer-auto-close",
+								            distance: "30%",
+								            success:function(){
+								                layer.msg("触发回调函数");
+								            }
+								        });
+								    })
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">扩展</div>
+					<div class="layui-card-body">
+						<div id="targetEl"
+								style="width: 600px;
+								height: 300px;
+								overflow: hidden;
+								position: relative;
+								border: 1px solid gainsboro;
+								background-color: #EEE;
+								margin-top: 20px;
+								display: flex;
+								justify-content: space-around;
+								align-items: center">
+								<button id="targetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+									layui.use(['drawer'], function() {
+									  var drawer = layui.drawer;
+									    $("#targetDemo").click(function () {
+									      drawer.open({
+									      // 指定挂载节点
+									      target: "#targetEl"
+									      direction: "right",
+									      dom: ".layer-right",
+									      distance: "50%",
+									      });
+									})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- 新版 API -->
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">基于 layer 的抽屉扩展</div>
+					<div class="layui-card-body">
+						<p style="margin-bottom: 10px;">兼容原版 drawer 所有参数,要使用 layer 扩展,设置 legacy 选项为 false 即可</p>
+						<button id="layerDrawerLeft" class="pear-btn pear-btn-success">左</button>
+						<button id="layerDrawerRight" class="pear-btn pear-btn-success">右</button>
+						<button id="layerDrawerTop" class="pear-btn pear-btn-success">上</button>
+						<button id="layerDrawerBottom" class="pear-btn pear-btn-success">下</button>
+						<button id="layerDrawer" class="pear-btn pear-btn-success">更多参数示例</button>
+						<button id="layerDrawerParent" class="pear-btn pear-btn-success">父窗口打开</button>
+						<button id="layerDrawerIframe" class="pear-btn pear-btn-success">iframe远程页面</button>
+						<button id="layerDrawerURL" class="pear-btn pear-btn-success">URL远程页面</button>
+						<div
+							id="layertargetEl"
+							style="width: 600px;
+								height: 300px;
+								overflow: hidden;
+								position: relative;
+								border: 1px solid gainsboro;
+								background-color: #EEE;
+								margin-top: 10px;
+								display: flex;
+								justify-content: space-around;
+								align-items: center">
+								<button id="layertargetDemo" class="pear-btn pear-btn-success">指定容器内打开</button>
+						</div>
+						<blockquote class="layui-elem-quote layui-quote-nm">指定容器内打开，需使用 layer 捕获层模式，并设置目标容器 style="overflow: hidden;
+						position: relative;"</blockquote>
+						<blockquote class="layui-elem-quote layui-quote-nm">
+						  使用 url 参数指定抽屉代码片段地址，会使用 ajax 请求将代码片段拼接到抽屉中，和原来的页面在同一个页面上, 传值更方便。注意片段和原页面不能出现相同的 ID。
+						</blockquote>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+											$("#layerDrawerLeft").click(function(){
+											  drawer.open({
+											    legacy: false,
+											    offset: 'l',
+											    area: "30%",
+											    content: "left内容",
+											  })
+											})
+											$("#layerDrawerRight").click(function () {
+											  drawer.open({
+											    legacy: false,
+											    offset: 'r',
+											    area: "30%",
+											    content: "right内容",
+											  })
+											})
+											$("#layerDrawerTop").click(function () {
+											  drawer.open({
+											    legacy: false,
+										      offset: "t",
+											    content: "top内容",
+											  })
+											})
+											$("#layerDrawerBottom").click(function () {
+											  drawer.open({
+											    legacy: false,
+											    offset: "b",
+											    content: "bottom内容",
+											  })
+											})
+
+											$("#layerDrawer").click(function () {
+											  var index = drawer.open({
+											    legacy: false,
+											    title: ['标题', 'font-size:16px;color:#2d8cf0'],
+											    maxmin: true,
+											    offset: "r",
+											    area: "30%",
+											    content: "抽屉内容",
+											    btn:"关闭",
+											    yes:function(index,layero){
+											      drawer.close(index);
+											      console.log(index,layero);
+											    },
+											    btnAlign: "l",
+											    closeBtn: 1,
+											  })
+											})
+
+											$("#layerDrawerParent").click(function () {
+
+											  var index = parent.layui.drawer.open({
+												    legacy: false,
+												    title: ['标题', 'font-size:16px;color:#2d8cf0'],
+												    maxmin: true,
+												    offset: "r",
+												    area: "30%",
+												    content: "抽屉内容",
+												    btn:"关闭",
+												    yes:function(index,layero){
+												      drawer.close(index);
+												      console.log(index,layero);
+												    },
+												    btnAlign: "l",
+												    closeBtn: 1,
+												})
+											})
+
+											$("#layertargetDemo").click(function () {
+											    drawer.open({
+											    legacy: false,
+											    target: "#layertargetEl",
+											    direction: "right",
+											    dom: ".layer-right",
+											    distance: "50%",
+											    });
+											})
+
+											$("#layerDrawerIframe").click(function () {
+											  drawer.open({
+											  legacy: false,
+											  title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
+											  offset: 'r',
+											  area: "80%",
+											   maxmin: true,
+											   closeBtn: 1,
+											   iframe: window.location.origin + "/view/document/table.html"
+											  })
+											})
+
+											$("#layerDrawerURL").click(function () {
+											   drawer.open({
+										     legacy: false,
+										     title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
+											   offset: 'r',
+											   area: "80%",
+											   maxmin: true,
+											   closeBtn: 1,
+											   url: window.location.origin + "/view/document/drawerFragment.html"
+											   })
+											})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+			<div class="layer-left" style="display: none;">
+				<br />
+				<h3>左侧弹层内容...</h3>
+			</div>
+			<div class="layer-right" style="display: none;">
+				<br />
+				<h3>右侧弹层内容...</h3>
+			</div>
+			<div class="layer-top" style="display: none;">
+				<br />
+				<h3>上侧弹层内容...</h3>
+			</div>
+			<div class="layer-bottom" style="display: none;">
+				<br />
+				<h3>下侧弹层内容...</h3>
+			</div>
+
+			<div class="layer-open-mask" style="display: none;">
+				<br />
+				<h3>点击右侧灰色区域</h3>
+			</div>
+			<div class="layer-close-mask" style="display: none;">
+				<button id="btnClose" class="pear-btn pear-btn-primary"
+					style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
+			</div>
+			<div class="layer-auto-close" style="display: none;">
+				<br />
+				<h3>打开 2秒 后自动关闭...</h3>
+			</div>
+
+	</body>
+
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['element', 'jquery', 'drawer', 'layer', 'code'], function() {
+			var element = layui.element;
+			var $ = layui.jquery;
+			var drawer = layui.drawer;
+			var layer = layui.layer;
+
+			layui.code();
+
+			$("#layerDrawerIframe").click(function () {
+				drawer.open({
+					legacy: false,
+					title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
+					offset: 'r',
+					area: "80%",
+					maxmin: true,
+					closeBtn: 1,
+					iframe: window.location.origin + "/view/document/table.html"
+				})
+			})
+
+			$("#layerDrawerURL").click(function () {
+				drawer.open({
+					legacy: false,
+					title: ['用户管理', 'font-size:16px;color:#2d8cf0'],
+					offset: 'r',
+					area: "80%",
+					maxmin: true,
+					closeBtn: 1,
+					url: window.location.origin + "/view/document/drawerFragment.html"
+				})
+			})
+
+			$("#layerDrawerLeft").click(function(){
+				drawer.open({
+					legacy: false,
+					offset: 'l',
+					area: "30%",
+					content: "left内容",
+				})
+			})
+			$("#layerDrawerRight").click(function () {
+				drawer.open({
+					legacy: false,
+					offset: 'r',
+					area: "30%",
+					content: "right内容",
+				})
+			})
+			$("#layerDrawerTop").click(function () {
+				drawer.open({
+					legacy: false,
+					offset: "t",
+					content: "top内容",
+				})
+			})
+			$("#layerDrawerBottom").click(function () {
+				drawer.open({
+					legacy: false,
+					offset: "b",
+					content: "bottom内容",
+				})
+			})
+
+			$("#layerDrawer").click(function () {
+				var index = drawer.open({
+					legacy: false,
+					title: ['标题', 'font-size:16px;color:#2d8cf0'],
+					maxmin: true,
+					offset: "r",
+					area: "30%",
+					content: "抽屉内容",
+					btn:"关闭",
+					yes:function(index,layero){
+						drawer.close(index);
+						console.log(index,layero);
+					},
+					btnAlign: "l",
+					closeBtn: 1,
+				})
+			})
+
+			$("#layerDrawerParent").click(function () {
+				var index = parent.layui.drawer.open({
+					legacy: false,
+					title: ['标题', 'font-size:16px;color:#2d8cf0'],
+					maxmin: true,
+					offset: "r",
+					area: "30%",
+					content: "抽屉内容",
+					btn: "关闭",
+					yes: function (index, layero) {
+						parent.layui.drawer.close(index);
+						console.log(index, layero);
+					},
+					btnAlign: "l",
+					closeBtn: 1,
+				})
+			})
+
+			$("#layertargetDemo").click(function () {
+				drawer.open({
+					legacy: false,
+					target: "#layertargetEl",
+					direction: "right",
+					dom: ".layer-right",
+					distance: "50%",
+				});
+			})
+
+			$(".drawer-right").click(function() {
+				drawer.open({
+					direction: "right",
+					dom: ".layer-right",
+					distance: "30%"
+				});
+			})
+
+			$(".drawer-left").click(function() {
+
+				drawer.open({
+					direction: "left",
+					dom: ".layer-left",
+					distance: "30%"
+				});
+
+			})
+
+			$(".drawer-top").click(function() {
+				drawer.open({
+					direction: "top",
+					dom: ".layer-top",
+					distance: "30%"
+				});
+			})
+
+			$(".drawer-bottom").click(function() {
+				drawer.open({
+					direction: "bottom",
+					dom: ".layer-bottom",
+					distance: "30%"
+				});
+			})
+
+			$(".drawer-open-mask").click(function() {
+				drawer.open({
+					direction: "right",
+					dom: ".layer-open-mask",
+					distance: "30%",
+					maskClose: true
+				});
+			})
+
+			var dom;
+
+			$(".drawer-close-mask").click(function() {
+				dom = drawer.open({
+					direction: "right",
+					dom: ".layer-close-mask",
+					distance: "30%",
+					maskClose: false
+				});
+			})
+
+			$("#btnClose").click(function() {
+				dom.close();
+			})
+
+			$(".drawer-auto-close").click(function() {
+				dom = drawer.open({
+					direction: "right",
+					dom: ".layer-auto-close",
+					distance: "30%",
+					maskClose: false,
+					time: 1000
+				});
+			})
+
+			$(".drawer-call-back").click(function() {
+				dom = drawer.open({
+					direction: "right",
+					dom: ".layer-right",
+					distance: "30%",
+					success: function() {
+						layer.msg("触发回调函数", {
+							icon: 1,
+							time: 1000
+						});
+					}
+				});
+			})
+
+			$("#targetDemo").click(function () {
+				drawer.open({
+					target: "#targetEl",
+					direction: "right",
+					dom: ".layer-right",
+					distance: "50%",
+				});
+			})
+
+		})
+	</script>
+</html>
diff --git a/public/view/document/drawerFragment.html b/public/view/document/drawerFragment.html
new file mode 100644
index 0000000..bb399a0
--- /dev/null
+++ b/public/view/document/drawerFragment.html
@@ -0,0 +1,385 @@
+<style>
+	.expand.pear-btn:hover {
+		color: currentColor;
+		background-color: unset;
+	}
+
+	.expand.pear-btn {
+		border: 1px solid rgb(255 255 255 / 0%)
+	}
+</style>
+<div class="layui-card">
+	<div class="layui-card-body">
+		<form id="userForm" class="layui-form" action="">
+			<div class="layui-form-item">
+				<div class="layui-inline">
+					<label class="layui-form-label">用户名</label>
+					<div class="layui-input-inline">
+						<input type="text" name="realName" placeholder="" class="layui-input">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">账号</label>
+					<div class="layui-input-inline">
+						<input type="text" name="username" placeholder="" class="layui-input">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">账号</label>
+					<div class="layui-input-inline">
+						<input type="text" name="username" placeholder="" class="layui-input">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">账号</label>
+					<div class="layui-input-inline">
+						<input type="text" name="username" placeholder="" class="layui-input">
+					</div>
+				</div>
+				<div class="layui-inline">
+					<label class="layui-form-label">账号</label>
+					<div class="layui-input-inline">
+						<input type="text" name="username" placeholder="" class="layui-input">
+					</div>
+				</div>
+				<div class="layui-inline" style="margin-left: 50px;">
+					<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+						<i class="layui-icon layui-icon-search"></i>
+						查询
+					</button>
+					<button type="reset" class="pear-btn pear-btn-md">
+						<i class="layui-icon layui-icon-refresh"></i>
+						重置
+					</button>
+					<button type="button" class="pear-btn pear-btn-md expand">
+					</button>
+				</div>
+			</div>
+		</form>
+	</div>
+</div>
+<div class="layui-card">
+	<div class="layui-card-body">
+		<table id="user-table" lay-filter="user-table"></table>
+	</div>
+</div>
+
+<script type="text/html" id="user-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+				<i class="layui-icon layui-icon-add-1"></i>
+				新增
+			</button>
+			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+				<i class="layui-icon layui-icon-delete"></i>
+				删除
+			</button>
+</script>
+
+<script type="text/html" id="user-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
+					class="layui-icon layui-icon-edit"></i></button>
+			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
+					class="layui-icon layui-icon-delete"></i></button>
+			<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
+</script>
+
+<script type="text/html" id="user-enable">
+			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
+				checked="{{ d.enable == 0 ? 'true' : 'false' }}">
+</script>
+
+<script type="text/html" id="user-sex">
+		{{#if (d.sex == 1) { }}
+			<span>男</span>
+			{{# }else if(d.sex == 2){ }}
+				<span>女</span>
+				{{# } }}
+</script>
+
+<script type="text/html" id="user-login">
+		{{#if (d.login == 0) { }}
+			<span>在线</span>
+			{{# }else if(d.sex == 1){ }}
+				<span>离线</span>
+				{{# } }}
+</script>
+
+<script type="text/html" id="user-createTime">
+		{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
+</script>
+<script>
+	layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function () {
+		let table = layui.table;
+		let form = layui.form;
+		let $ = layui.jquery;
+		let drawer = layui.drawer;
+		let dropdown = layui.dropdown;
+
+		let MODULE_PATH = "/system/user/";
+
+		formToggle({
+			elem: "#userForm",
+		});
+
+		function formToggle(options) {
+			var defaultsOpt = {
+				isExpand: false,
+				prefixIcon: "layui-icon",
+				toggleIcon: ['layui-icon-down', 'layui-icon-up'],
+				toggleText: ['展开', '折叠'],
+			}
+			var opt = $.extend({}, defaultsOpt, options);
+			var elem = opt.elem; // 绑定的表单元素,必填
+			var min = opt.min; // 最小显示数,默认显示一行
+			var isExpand = opt.isExpand; // 初始展开
+			var prefixIcon = opt.prefixIcon + " "; // 图标前缀
+			var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
+			var toggleText = opt.toggleText; // 折叠和展开时的文本
+
+			var eleDOM = $(elem + " .layui-inline");
+			var firstElTop = eleDOM.first().offset().top;
+			var targetEl = eleDOM.filter(function (index) {
+				var isGtMin = (index + 1) > min;
+				var isGtFirstElTop = $(this).offset().top > firstElTop;
+				var isNeqLast = (index + 1) != eleDOM.length;
+				return min
+					? isGtMin && isNeqLast
+					: isGtFirstElTop && isNeqLast;
+			});
+
+			var unExpandIcon = prefixIcon + toggleIcon[0];
+			var expandIcon = prefixIcon + toggleIcon[1];
+			var unExpandText = toggleText[0];
+			var expandText = toggleText[1];
+			var btnSelector = elem + " .expand";
+			$(btnSelector).append("<i></i>")
+			if (isExpand) {
+				$(btnSelector).prepend("<span>" + expandText + "</span>");
+				$(btnSelector + ">i").addClass(expandIcon);
+			} else {
+				$(btnSelector).prepend("<span>" + unExpandText + "</span>")
+				$(btnSelector + ">i").addClass(unExpandIcon)
+				targetEl.addClass("layui-hide");
+			}
+			$(btnSelector).click(function () {
+				isExpand = !isExpand;
+				if (isExpand) {
+					$(btnSelector + ">span").html(expandText);
+					$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
+					targetEl.removeClass("layui-hide")
+				} else {
+					$(btnSelector + ">span").html(unExpandText);
+					$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
+					targetEl.addClass("layui-hide")
+				}
+			})
+		}
+
+		let cols = [
+			[{
+				type: 'checkbox'
+			},
+			{
+				title: '账号',
+				field: 'username',
+				align: 'center',
+				width: 100
+			},
+			{
+				title: '姓名',
+				field: 'realName',
+				align: 'center'
+			},
+			{
+				title: '性别',
+				field: 'sex',
+				align: 'center',
+				width: 80,
+				templet: '#user-sex'
+			},
+			{
+				title: '电话',
+				field: 'phone',
+				align: 'center'
+			},
+			{
+				title: '启用',
+				field: 'enable',
+				align: 'center',
+				templet: '#user-enable'
+			},
+			{
+				title: '登录',
+				field: 'login',
+				align: 'center',
+				templet: '#user-login'
+			},
+			{
+				title: '注册',
+				field: 'createTime',
+				align: 'center',
+				templet: '#user-createTime'
+			},
+			{
+				title: '操作',
+				toolbar: '#user-bar',
+				align: 'left',
+				width: 160,
+				fixed: 'right'
+			}
+			]
+		]
+
+		table.render({
+			elem: '#user-table',
+			url: '../../admin/data/table.json',
+			page: true,
+			cols: cols,
+			skin: 'line',
+			toolbar: '#user-toolbar',
+			defaultToolbar: [{
+				layEvent: 'refresh',
+				icon: 'layui-icon-refresh',
+			}, 'filter', 'print', 'exports'],
+			done: function (res, curr, count) {
+				for (var i = 0; i < res.data.length; i++) {
+					dropdown.render({
+						elem: '#more_' + res.data[i].userId,
+						data: [{
+							title: 'menu item11',
+							id: 100
+						}, {
+							title: 'menu item22',
+							id: 101
+						}, {
+							title: 'menu item33',
+							id: 102
+						}],
+						id: '#more_' + res.data[i].userId,
+						click: function (obj) {
+							layer.tips('点击了：' + obj.title, this.elem, {
+								tips: [1, '#5FB878']
+							})
+						}
+					});
+				}
+			}
+		});
+
+		table.on('tool(user-table)', function (obj) {
+			if (obj.event === 'remove') {
+				window.remove(obj);
+			} else if (obj.event === 'edit') {
+				window.edit(obj);
+			}
+		});
+
+		table.on('toolbar(user-table)', function (obj) {
+			if (obj.event === 'add') {
+				window.add();
+			} else if (obj.event === 'refresh') {
+				window.refresh();
+			} else if (obj.event === 'batchRemove') {
+				window.batchRemove(obj);
+			}
+		});
+
+		form.on('submit(user-query)', function (data) {
+			table.reload('user-table', {
+				where: data.field
+			})
+			return false;
+		});
+
+		form.on('switch(user-enable)', function (obj) {
+			layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
+		});
+
+		window.add = function () {
+			layer.msg("添加")
+		}
+
+		window.edit = function (obj) {
+			layer.msg("修改");
+		}
+
+		window.remove = function (obj) {
+			layer.confirm('确定要删除该用户', {
+				icon: 3,
+				title: '提示'
+			}, function (index) {
+				layer.close(index);
+				let loading = layer.load();
+				$.ajax({
+					url: MODULE_PATH + "remove/" + obj.data['userId'],
+					dataType: 'json',
+					type: 'delete',
+					success: function (result) {
+						layer.close(loading);
+						if (result.success) {
+							layer.msg(result.msg, {
+								icon: 1,
+								time: 1000
+							}, function () {
+								obj.del();
+							});
+						} else {
+							layer.msg(result.msg, {
+								icon: 2,
+								time: 1000
+							});
+						}
+					}
+				})
+			});
+		}
+
+		window.batchRemove = function (obj) {
+			let data = table.checkStatus(obj.config.id).data;
+			if (data.length === 0) {
+				layer.msg("未选中数据", {
+					icon: 3,
+					time: 1000
+				});
+				return false;
+			}
+			let ids = "";
+			for (let i = 0; i < data.length; i++) {
+				ids += data[i].userId + ",";
+			}
+			ids = ids.substr(0, ids.length - 1);
+			layer.confirm('确定要删除这些用户', {
+				icon: 3,
+				title: '提示'
+			}, function (index) {
+				layer.close(index);
+				let loading = layer.load();
+				$.ajax({
+					url: MODULE_PATH + "batchRemove/" + ids,
+					dataType: 'json',
+					type: 'delete',
+					success: function (result) {
+						layer.close(loading);
+						if (result.success) {
+							layer.msg(result.msg, {
+								icon: 1,
+								time: 1000
+							}, function () {
+								table.reload('user-table');
+							});
+						} else {
+							layer.msg(result.msg, {
+								icon: 2,
+								time: 1000
+							});
+						}
+					}
+				})
+			});
+		}
+
+		window.refresh = function (param) {
+			table.reload('user-table');
+		}
+	})
+</script>
diff --git a/public/view/document/dtree.html b/public/view/document/dtree.html
new file mode 100644
index 0000000..8029ebb
--- /dev/null
+++ b/public/view/document/dtree.html
@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>树形结构</title>
+        <link href="../../component/pear/css/pear.css" rel="stylesheet" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">Dtree 提供 树状态 的数据结构展示</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link href="component/pear/css/pear.css" rel="stylesheet" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						嵌套数据格式
+					</div>
+					<div class="layui-card-body">
+						<ul id="demoTree" class="dtree" data-id="0"></ul>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['dtree'], function () {
+								    dtree = layui.dtree;
+								 
+								    dtree.render({
+								        elem: "#demoTree",
+								        initLevel: "1",
+								        method: 'get',
+								        url: "admin/data/dtree.json"
+								    });
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						嵌套数据格式
+					</div>
+					<div class="layui-card-body">
+						<ul id="demoTree3" class="dtree" data-id="0"></ul>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['dtree'], function () {
+								    dtree = layui.dtree;
+								 
+								    dtree.render({
+								        elem: "#demoTree",
+								        initLevel: "1",
+								        method: 'get',
+								        url: "admin/data/dtree.json",
+								        dataFormat: "list", 
+								        checkbar: true
+								    });
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						下拉树
+					</div>
+					<div class="layui-card-body">
+						<ul id="demoTree2" class="dtree" data-id="0"></ul>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['dtree'], function () {
+								    dtree = layui.dtree;
+								 
+								    dtree.render({
+								        elem: "#demoTree2",
+								        initLevel: "1",
+								        method: 'get',
+								        url: "admin/data/dtree.json",
+								        select: true
+								    });
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['dtree', 'jquery','element','code'], function () {
+				var $ = layui.jquery,
+					dtree = layui.dtree;
+					
+					layui.code();
+
+				// 初始化树
+				dtree.render({
+					elem: "#demoTree",
+					initLevel: "1",
+					method: 'get',
+					url: "../../admin/data/dtree.json"
+				});
+
+				dtree.render({
+					elem: "#demoTree3",
+					initLevel: "1",
+					method: 'get',
+					url: "../../admin/data/dataTree2.json",
+					dataFormat: "list", //配置data的风格为list
+					checkbar: true //开启复选框
+				});
+				
+				dtree.render({
+					elem: "#demoTree2",
+					initLevel: "1",
+					method: 'get',
+					url: "../../admin/data/dtree.json",
+					select: true
+				});
+			});
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/document/encrypt.html b/public/view/document/encrypt.html
new file mode 100644
index 0000000..7c7ac6f
--- /dev/null
+++ b/public/view/document/encrypt.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>哈希加密</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						开发环境
+					</div>
+					<div class="layui-card-body">
+						Pear encrypt 为前端开发 提供 加密服务
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">加密操作</div>
+					<div class="layui-card-body">
+						<form class="layui-form" action="javascript:void(0);">
+							<div class="layui-form-item layui-input-inline">
+								<input id="enter" value="123456" type="text" class="layui-input" />
+							</div>
+							<div class="layui-form-item layui-input-inline">
+								<select name="encode" lay-verify="">
+									<option value="">加密方式</option>
+									<option value="1">MD5</option>
+									<option value="2">SHA1</option>
+									<option value="3">SHA256</option>
+									<option value="4">SHA512</option>
+									<option value="5">rmd160</option>
+									<option value="6">crc32</option>
+									<option value="7">Base64Encode</option>
+								</select>
+							</div>
+							<div class="layui-form-item layui-input-inline">
+								<button id="encode" class="pear-btn pear-btn-primary">Encode</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">加密结果</div>
+					<div class="layui-card-body" id="end">
+				
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['encrypt'], function() {
+									var encrypt = layui.encrypt;
+								
+								    encrypt.md5( str );
+									
+								    encrypt.sha1( str );
+									
+								    encrypt.sha256( str );
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+			    <div class="layui-card">
+			    	<div class="layui-card-header">API 文档</div>
+			    	<div class="layui-card-body" id="end">
+			    		<div>
+			    			<span>encrypt.md5( str )  --  MD5加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.sha1( str )  --  SHA1加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.sha256( str )  --  SHA256加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.sha512( str )  --  SHA512加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.rmd160( str )  --  RMD160加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.crc32( str )  --  CRC32加密</span>
+			    			<br>
+			    			<br>
+			    			<span>encrypt.Base64Encode( str )  --  BASE64加密</span>
+			    			<br>
+			    			<br>
+			    		</div>
+			    	</div>
+			    </div>	
+			</div>
+		</div>
+        <script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['encrypt', 'form', 'jquery','layer','element','code'], function() {
+				var encrypt = layui.encrypt;
+				var form = layui.form;
+				var $ = layui.jquery;
+				var layer = layui.layer;
+				var element = layui.element;
+				
+				layui.code();
+
+				$("#encode").click(function() {
+					var encode = $("[name='encode']").val();
+					var end;
+					if (encode == 1) {
+						end = encrypt.md5($("#enter").val());
+					} else if (encode == 2) {
+						end = encrypt.sha1($("#enter").val());
+					} else if (encode == 3) {
+						end = encrypt.sha256($("#enter").val());
+					} else if (encode == 4) {
+						end = encrypt.sha512($("#enter").val());
+					} else if (encode == 5) {
+						end = encrypt.rmd160($("#enter").val());
+					} else if (encode == 6) {
+						end = encrypt.crc32($("#enter").val());
+					} else if (encode == 7) {
+						end = encrypt.Base64Encode($("#enter").val());
+					} else{
+						layer.msg("请选择加密方式",{icon:3,time:1000});
+					}
+
+					$("#end").append('<button class="pear-btn">加密方式 : ' + $("[value=" + $("[name='encode']")
+							.val() + "]").text() + '&nbsp;&nbsp;&nbsp;&nbsp;明文 : ' + $("#enter").val() +
+						'&nbsp;&nbsp;&nbsp;&nbsp;加密结果 : ' + end + '</button><br><br>');
+				})
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/form.html b/public/view/document/form.html
new file mode 100644
index 0000000..c991209
--- /dev/null
+++ b/public/view/document/form.html
@@ -0,0 +1,180 @@
+<!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-space10">
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Pear 基于 Form 的基础上扩展样式
+					</div>
+				</div>
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 或
+								<link rel="stylesheet" href="component/pear/css/pear-module/form.css" />
+							</pre>
+						</div>
+					</div>
+				</div>
+				<div class="layui-card" style="margin-top: 10px;">
+					<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>
+				</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="写作" 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>
+			<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" hover placeholder="密码" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md12">
+							<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
+						</div>
+						<div class="layui-col-md12">
+							<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
+						</div>
+				
+					</div>
+				</div>
+				<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 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">&nbsp;&nbsp;
+							<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
+							<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
+							<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
+						</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>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form','element','code'], function() {
+				var form = layui.form;
+				var element = layui.element;
+				
+				layui.code();
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/fullscreen.html b/public/view/document/fullscreen.html
new file mode 100644
index 0000000..ad625aa
--- /dev/null
+++ b/public/view/document/fullscreen.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>全屏组件</title>
+  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+</head>
+<style type="text/css">
+
+</style>
+<body class="pear-container">
+<div class="layui-row layui-col-space10" id="homeid">
+  <div class="layui-col-md12">
+    <div class="layui-card">
+      <div class="layui-card-header">开发环境</div>
+      <div class="layui-card-body">
+        fullscreen 用于控制页面或元素全屏
+      </div>
+    </div>
+  </div>
+  <div class="layui-col-md12">
+    <div class="layui-collapse">
+      <div class="layui-colla-item">
+        <h2 class="layui-colla-title">显示代码</h2>
+        <div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="layui-col-md12">
+    <div class="layui-card">
+      <div class="layui-card-header">全屏控制</div>
+      <div class="layui-card-body">
+        <button class="fullstart pear-btn pear-btn-primary">全屏</button>
+        <button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
+        <button class="fulltarg pear-btn pear-btn-warming">指定目标全屏</button>
+      </div>
+    </div>
+  </div>
+  <div class="layui-col-md12">
+    <div class="layui-collapse">
+      <div class="layui-colla-item">
+        <h2 class="layui-colla-title">显示代码</h2>
+        <div class="layui-colla-content">
+			<pre class="layui-code" lay-encode="true">
+				layui.use(['fullscreen'], function() {
+    var fullscreen = layui.fullscreen;
+     fullscreen.fullScreen();
+	    fullscreen.fullClose();
+	    fullscreen.fullScreen("#fulltarget");
+	    fullscreen.isFullscreen();
+
+			})
+			</pre>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="layui-col-md12">
+    <div class="layui-card">
+      <div class="layui-card-header">指定容器全屏</div>
+      <div class="layui-card-body">
+        <div id="fulltarget"
+             style="width: 600px;
+								height: 300px;
+								overflow: hidden;
+								position: relative;
+								border: 1px solid gainsboro;
+								background-color: #EEE;
+								margin-top: 20px;
+								display: flex;
+								justify-content: space-around;
+								align-items: center">
+          <button class="fullclose pear-btn pear-btn-danger">退出全屏</button>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+  layui.use([ 'jquery', 'code','admin','fullscreen'], function() {
+    var popup = layui.popup;
+    var $ = layui.jquery;
+    var admin = layui.admin;
+    var fullscreen=layui.fullscreen;
+    layui.code();
+    fullscreen.onFullchange(function(){
+        //增加全屏状态回调，可针对不同浏览器做后续处理
+        console.log("当前全屏状态:",fullscreen.isFullscreen());
+        var document = fullscreen.isFullscreen();
+        if(document){
+            $("#fulltarget").addClass('pear-full-screen');
+        }else{
+            $("#fulltarget").removeClass('pear-full-screen');
+        }
+    });
+    $(".fullstart").click(function() {
+      fullscreen.fullScreen().then(function ok(res){
+            console.log(res);
+        }
+      );
+    })
+
+    $(".fullclose").click(function() {
+      fullscreen.fullClose();
+    })
+
+    $(".fulltarg").click(function() {
+      fullscreen.fullScreen("#fulltarget");
+    })
+
+
+  })
+</script>
+</html>
diff --git a/public/view/document/icon.html b/public/view/document/icon.html
new file mode 100644
index 0000000..c453abb
--- /dev/null
+++ b/public/view/document/icon.html
@@ -0,0 +1,2195 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>图标列表</title>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="../../admin/css/other/icon.css">
+  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+      </ul>
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6f0;</span>
+                <div class="name">加载</div>
+                <div class="code-name">&amp;#xe6f0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68d;</span>
+                <div class="name">download</div>
+                <div class="code-name">&amp;#xe68d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68e;</span>
+                <div class="name">electronics</div>
+                <div class="code-name">&amp;#xe68e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68f;</span>
+                <div class="name">drag</div>
+                <div class="code-name">&amp;#xe68f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe690;</span>
+                <div class="name">elipsis</div>
+                <div class="code-name">&amp;#xe690;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe691;</span>
+                <div class="name">export</div>
+                <div class="code-name">&amp;#xe691;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe692;</span>
+                <div class="name">explain</div>
+                <div class="code-name">&amp;#xe692;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe693;</span>
+                <div class="name">edit</div>
+                <div class="code-name">&amp;#xe693;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe694;</span>
+                <div class="name">eye-close</div>
+                <div class="code-name">&amp;#xe694;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe695;</span>
+                <div class="name">email</div>
+                <div class="code-name">&amp;#xe695;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe696;</span>
+                <div class="name">error</div>
+                <div class="code-name">&amp;#xe696;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe697;</span>
+                <div class="name">favorite</div>
+                <div class="code-name">&amp;#xe697;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe698;</span>
+                <div class="name">file-common</div>
+                <div class="code-name">&amp;#xe698;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe699;</span>
+                <div class="name">file-delete</div>
+                <div class="code-name">&amp;#xe699;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69a;</span>
+                <div class="name">file-add</div>
+                <div class="code-name">&amp;#xe69a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69b;</span>
+                <div class="name">film</div>
+                <div class="code-name">&amp;#xe69b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69c;</span>
+                <div class="name">fabulous</div>
+                <div class="code-name">&amp;#xe69c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69d;</span>
+                <div class="name">file</div>
+                <div class="code-name">&amp;#xe69d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69e;</span>
+                <div class="name">folder-close</div>
+                <div class="code-name">&amp;#xe69e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe69f;</span>
+                <div class="name">filter</div>
+                <div class="code-name">&amp;#xe69f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a0;</span>
+                <div class="name">good</div>
+                <div class="code-name">&amp;#xe6a0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a1;</span>
+                <div class="name">hide</div>
+                <div class="code-name">&amp;#xe6a1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a2;</span>
+                <div class="name">home</div>
+                <div class="code-name">&amp;#xe6a2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a3;</span>
+                <div class="name">history</div>
+                <div class="code-name">&amp;#xe6a3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a4;</span>
+                <div class="name">file-open</div>
+                <div class="code-name">&amp;#xe6a4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a5;</span>
+                <div class="name">forward</div>
+                <div class="code-name">&amp;#xe6a5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a6;</span>
+                <div class="name">import</div>
+                <div class="code-name">&amp;#xe6a6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a7;</span>
+                <div class="name">image-text</div>
+                <div class="code-name">&amp;#xe6a7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a8;</span>
+                <div class="name">keyboard-26</div>
+                <div class="code-name">&amp;#xe6a8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6a9;</span>
+                <div class="name">keyboard-9</div>
+                <div class="code-name">&amp;#xe6a9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6aa;</span>
+                <div class="name">link</div>
+                <div class="code-name">&amp;#xe6aa;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ab;</span>
+                <div class="name">layout</div>
+                <div class="code-name">&amp;#xe6ab;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ac;</span>
+                <div class="name">fullscreen-shrink</div>
+                <div class="code-name">&amp;#xe6ac;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ad;</span>
+                <div class="name">layers</div>
+                <div class="code-name">&amp;#xe6ad;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ae;</span>
+                <div class="name">lock</div>
+                <div class="code-name">&amp;#xe6ae;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6af;</span>
+                <div class="name">fullscreen-expand</div>
+                <div class="code-name">&amp;#xe6af;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b0;</span>
+                <div class="name">map</div>
+                <div class="code-name">&amp;#xe6b0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b1;</span>
+                <div class="name">meh</div>
+                <div class="code-name">&amp;#xe6b1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b2;</span>
+                <div class="name">menu</div>
+                <div class="code-name">&amp;#xe6b2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b3;</span>
+                <div class="name">loading</div>
+                <div class="code-name">&amp;#xe6b3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b4;</span>
+                <div class="name">help</div>
+                <div class="code-name">&amp;#xe6b4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b5;</span>
+                <div class="name">minus-circle</div>
+                <div class="code-name">&amp;#xe6b5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b6;</span>
+                <div class="name">modular</div>
+                <div class="code-name">&amp;#xe6b6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b7;</span>
+                <div class="name">notification</div>
+                <div class="code-name">&amp;#xe6b7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b8;</span>
+                <div class="name">mic</div>
+                <div class="code-name">&amp;#xe6b8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6b9;</span>
+                <div class="name">more</div>
+                <div class="code-name">&amp;#xe6b9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ba;</span>
+                <div class="name">pad</div>
+                <div class="code-name">&amp;#xe6ba;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6bb;</span>
+                <div class="name">operation</div>
+                <div class="code-name">&amp;#xe6bb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6bc;</span>
+                <div class="name">play</div>
+                <div class="code-name">&amp;#xe6bc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6bd;</span>
+                <div class="name">print</div>
+                <div class="code-name">&amp;#xe6bd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6be;</span>
+                <div class="name">mobile-phone</div>
+                <div class="code-name">&amp;#xe6be;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6bf;</span>
+                <div class="name">minus</div>
+                <div class="code-name">&amp;#xe6bf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c0;</span>
+                <div class="name">navigation</div>
+                <div class="code-name">&amp;#xe6c0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c1;</span>
+                <div class="name">pdf</div>
+                <div class="code-name">&amp;#xe6c1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c2;</span>
+                <div class="name">prompt</div>
+                <div class="code-name">&amp;#xe6c2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c3;</span>
+                <div class="name">move</div>
+                <div class="code-name">&amp;#xe6c3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c4;</span>
+                <div class="name">refresh</div>
+                <div class="code-name">&amp;#xe6c4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c5;</span>
+                <div class="name">run-up</div>
+                <div class="code-name">&amp;#xe6c5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c6;</span>
+                <div class="name">picture</div>
+                <div class="code-name">&amp;#xe6c6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c7;</span>
+                <div class="name">run-in</div>
+                <div class="code-name">&amp;#xe6c7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c8;</span>
+                <div class="name">pin</div>
+                <div class="code-name">&amp;#xe6c8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6c9;</span>
+                <div class="name">save</div>
+                <div class="code-name">&amp;#xe6c9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ca;</span>
+                <div class="name">search</div>
+                <div class="code-name">&amp;#xe6ca;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6cb;</span>
+                <div class="name">share</div>
+                <div class="code-name">&amp;#xe6cb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6cc;</span>
+                <div class="name">scanning</div>
+                <div class="code-name">&amp;#xe6cc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6cd;</span>
+                <div class="name">security</div>
+                <div class="code-name">&amp;#xe6cd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ce;</span>
+                <div class="name">sign-out</div>
+                <div class="code-name">&amp;#xe6ce;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6cf;</span>
+                <div class="name">select</div>
+                <div class="code-name">&amp;#xe6cf;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d0;</span>
+                <div class="name">stop</div>
+                <div class="code-name">&amp;#xe6d0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d1;</span>
+                <div class="name">success</div>
+                <div class="code-name">&amp;#xe6d1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d2;</span>
+                <div class="name">smile</div>
+                <div class="code-name">&amp;#xe6d2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d3;</span>
+                <div class="name">switch</div>
+                <div class="code-name">&amp;#xe6d3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d4;</span>
+                <div class="name">setting</div>
+                <div class="code-name">&amp;#xe6d4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d5;</span>
+                <div class="name">survey</div>
+                <div class="code-name">&amp;#xe6d5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d6;</span>
+                <div class="name">task</div>
+                <div class="code-name">&amp;#xe6d6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d7;</span>
+                <div class="name">skip</div>
+                <div class="code-name">&amp;#xe6d7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d8;</span>
+                <div class="name">text</div>
+                <div class="code-name">&amp;#xe6d8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6d9;</span>
+                <div class="name">time</div>
+                <div class="code-name">&amp;#xe6d9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6da;</span>
+                <div class="name">telephone-out</div>
+                <div class="code-name">&amp;#xe6da;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6db;</span>
+                <div class="name">toggle-left</div>
+                <div class="code-name">&amp;#xe6db;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6dc;</span>
+                <div class="name">toggle-right</div>
+                <div class="code-name">&amp;#xe6dc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6dd;</span>
+                <div class="name">telephone</div>
+                <div class="code-name">&amp;#xe6dd;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6de;</span>
+                <div class="name">top</div>
+                <div class="code-name">&amp;#xe6de;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6df;</span>
+                <div class="name">unlock</div>
+                <div class="code-name">&amp;#xe6df;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e0;</span>
+                <div class="name">user</div>
+                <div class="code-name">&amp;#xe6e0;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e1;</span>
+                <div class="name">upload</div>
+                <div class="code-name">&amp;#xe6e1;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e2;</span>
+                <div class="name">work</div>
+                <div class="code-name">&amp;#xe6e2;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e3;</span>
+                <div class="name">training</div>
+                <div class="code-name">&amp;#xe6e3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e4;</span>
+                <div class="name">warning</div>
+                <div class="code-name">&amp;#xe6e4;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e5;</span>
+                <div class="name">zoom-in</div>
+                <div class="code-name">&amp;#xe6e5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e6;</span>
+                <div class="name">zoom-out</div>
+                <div class="code-name">&amp;#xe6e6;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e7;</span>
+                <div class="name">add-bold</div>
+                <div class="code-name">&amp;#xe6e7;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e8;</span>
+                <div class="name">arrow-left-bold</div>
+                <div class="code-name">&amp;#xe6e8;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6e9;</span>
+                <div class="name">arrow-up-bold</div>
+                <div class="code-name">&amp;#xe6e9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ea;</span>
+                <div class="name">close-bold</div>
+                <div class="code-name">&amp;#xe6ea;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6eb;</span>
+                <div class="name">arrow-down-bold</div>
+                <div class="code-name">&amp;#xe6eb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ec;</span>
+                <div class="name">minus-bold</div>
+                <div class="code-name">&amp;#xe6ec;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ed;</span>
+                <div class="name">arrow-right-bold</div>
+                <div class="code-name">&amp;#xe6ed;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe6ee;</span>
+                <div class="name">select-bold</div>
+                <div class="code-name">&amp;#xe6ee;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe663;</span>
+                <div class="name">column-3</div>
+                <div class="code-name">&amp;#xe663;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe664;</span>
+                <div class="name">column-4</div>
+                <div class="code-name">&amp;#xe664;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe665;</span>
+                <div class="name">add</div>
+                <div class="code-name">&amp;#xe665;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe666;</span>
+                <div class="name">add-circle</div>
+                <div class="code-name">&amp;#xe666;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe667;</span>
+                <div class="name">adjust</div>
+                <div class="code-name">&amp;#xe667;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe668;</span>
+                <div class="name">arrow-up-circle</div>
+                <div class="code-name">&amp;#xe668;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe669;</span>
+                <div class="name">arrow-right-circle</div>
+                <div class="code-name">&amp;#xe669;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66a;</span>
+                <div class="name">arrow-down</div>
+                <div class="code-name">&amp;#xe66a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66b;</span>
+                <div class="name">ashbin</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66c;</span>
+                <div class="name">arrow-right</div>
+                <div class="code-name">&amp;#xe66c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66d;</span>
+                <div class="name">browse</div>
+                <div class="code-name">&amp;#xe66d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66e;</span>
+                <div class="name">bottom</div>
+                <div class="code-name">&amp;#xe66e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe66f;</span>
+                <div class="name">back</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe670;</span>
+                <div class="name">bad</div>
+                <div class="code-name">&amp;#xe670;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe671;</span>
+                <div class="name">arrow-double-left</div>
+                <div class="code-name">&amp;#xe671;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe672;</span>
+                <div class="name">arrow-left-circle</div>
+                <div class="code-name">&amp;#xe672;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe673;</span>
+                <div class="name">arrow-double-right</div>
+                <div class="code-name">&amp;#xe673;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe674;</span>
+                <div class="name">caps-lock</div>
+                <div class="code-name">&amp;#xe674;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe675;</span>
+                <div class="name">camera</div>
+                <div class="code-name">&amp;#xe675;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe676;</span>
+                <div class="name">chart-bar</div>
+                <div class="code-name">&amp;#xe676;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe677;</span>
+                <div class="name">attachment</div>
+                <div class="code-name">&amp;#xe677;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe678;</span>
+                <div class="name">code</div>
+                <div class="code-name">&amp;#xe678;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe679;</span>
+                <div class="name">close</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67a;</span>
+                <div class="name">check-item</div>
+                <div class="code-name">&amp;#xe67a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67b;</span>
+                <div class="name">calendar</div>
+                <div class="code-name">&amp;#xe67b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67c;</span>
+                <div class="name">comment</div>
+                <div class="code-name">&amp;#xe67c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67d;</span>
+                <div class="name">column-vertical</div>
+                <div class="code-name">&amp;#xe67d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67e;</span>
+                <div class="name">column-horizontal</div>
+                <div class="code-name">&amp;#xe67e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe67f;</span>
+                <div class="name">complete</div>
+                <div class="code-name">&amp;#xe67f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe680;</span>
+                <div class="name">chart-pie</div>
+                <div class="code-name">&amp;#xe680;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe681;</span>
+                <div class="name">cry</div>
+                <div class="code-name">&amp;#xe681;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe682;</span>
+                <div class="name">customer-service</div>
+                <div class="code-name">&amp;#xe682;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe683;</span>
+                <div class="name">delete</div>
+                <div class="code-name">&amp;#xe683;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe684;</span>
+                <div class="name">direction-down</div>
+                <div class="code-name">&amp;#xe684;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe685;</span>
+                <div class="name">copy</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe686;</span>
+                <div class="name">cut</div>
+                <div class="code-name">&amp;#xe686;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe687;</span>
+                <div class="name">data-view</div>
+                <div class="code-name">&amp;#xe687;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe688;</span>
+                <div class="name">direction-down-circle</div>
+                <div class="code-name">&amp;#xe688;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe689;</span>
+                <div class="name">direction-right</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68a;</span>
+                <div class="name">direction-up</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68b;</span>
+                <div class="name">discount</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon pear-icon">&#xe68c;</span>
+                <div class="name">direction-left</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          </ul>  
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-load"></span>
+            <div class="name">
+              加载
+            </div>
+            <div class="code-name">.pear-icon-load
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-download"></span>
+            <div class="name">
+              download
+            </div>
+            <div class="code-name">.pear-icon-download
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-electronics"></span>
+            <div class="name">
+              electronics
+            </div>
+            <div class="code-name">.pear-icon-electronics
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-drag"></span>
+            <div class="name">
+              drag
+            </div>
+            <div class="code-name">.pear-icon-drag
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-elipsis"></span>
+            <div class="name">
+              elipsis
+            </div>
+            <div class="code-name">.pear-icon-elipsis
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-export"></span>
+            <div class="name">
+              export
+            </div>
+            <div class="code-name">.pear-icon-export
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-explain"></span>
+            <div class="name">
+              explain
+            </div>
+            <div class="code-name">.pear-icon-explain
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-edit"></span>
+            <div class="name">
+              edit
+            </div>
+            <div class="code-name">.pear-icon-edit
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-eye-close"></span>
+            <div class="name">
+              eye-close
+            </div>
+            <div class="code-name">.pear-icon-eye-close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-email"></span>
+            <div class="name">
+              email
+            </div>
+            <div class="code-name">.pear-icon-email
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-error"></span>
+            <div class="name">
+              error
+            </div>
+            <div class="code-name">.pear-icon-error
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-favorite"></span>
+            <div class="name">
+              favorite
+            </div>
+            <div class="code-name">.pear-icon-favorite
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-file-common"></span>
+            <div class="name">
+              file-common
+            </div>
+            <div class="code-name">.pear-icon-file-common
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-file-delete"></span>
+            <div class="name">
+              file-delete
+            </div>
+            <div class="code-name">.pear-icon-file-delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-file-add"></span>
+            <div class="name">
+              file-add
+            </div>
+            <div class="code-name">.pear-icon-file-add
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-film"></span>
+            <div class="name">
+              film
+            </div>
+            <div class="code-name">.pear-icon-film
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-fabulous"></span>
+            <div class="name">
+              fabulous
+            </div>
+            <div class="code-name">.pear-icon-fabulous
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-file"></span>
+            <div class="name">
+              file
+            </div>
+            <div class="code-name">.pear-icon-file
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-folder-close"></span>
+            <div class="name">
+              folder-close
+            </div>
+            <div class="code-name">.pear-icon-folder-close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-filter"></span>
+            <div class="name">
+              filter
+            </div>
+            <div class="code-name">.pear-icon-filter
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-good"></span>
+            <div class="name">
+              good
+            </div>
+            <div class="code-name">.pear-icon-good
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-hide"></span>
+            <div class="name">
+              hide
+            </div>
+            <div class="code-name">.pear-icon-hide
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-home"></span>
+            <div class="name">
+              home
+            </div>
+            <div class="code-name">.pear-icon-home
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-history"></span>
+            <div class="name">
+              history
+            </div>
+            <div class="code-name">.pear-icon-history
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-file-open"></span>
+            <div class="name">
+              file-open
+            </div>
+            <div class="code-name">.pear-icon-file-open
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-forward"></span>
+            <div class="name">
+              forward
+            </div>
+            <div class="code-name">.pear-icon-forward
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-import"></span>
+            <div class="name">
+              import
+            </div>
+            <div class="code-name">.pear-icon-import
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-image-text"></span>
+            <div class="name">
+              image-text
+            </div>
+            <div class="code-name">.pear-icon-image-text
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-keyboard-26"></span>
+            <div class="name">
+              keyboard-26
+            </div>
+            <div class="code-name">.pear-icon-keyboard-26
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-keyboard-9"></span>
+            <div class="name">
+              keyboard-9
+            </div>
+            <div class="code-name">.pear-icon-keyboard-9
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-link"></span>
+            <div class="name">
+              link
+            </div>
+            <div class="code-name">.pear-icon-link
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-layout"></span>
+            <div class="name">
+              layout
+            </div>
+            <div class="code-name">.pear-icon-layout
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-fullscreen-shrink"></span>
+            <div class="name">
+              fullscreen-shrink
+            </div>
+            <div class="code-name">.pear-icon-fullscreen-shrink
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-layers"></span>
+            <div class="name">
+              layers
+            </div>
+            <div class="code-name">.pear-icon-layers
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-lock"></span>
+            <div class="name">
+              lock
+            </div>
+            <div class="code-name">.pear-icon-lock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-fullscreen-expand"></span>
+            <div class="name">
+              fullscreen-expand
+            </div>
+            <div class="code-name">.pear-icon-fullscreen-expand
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-map"></span>
+            <div class="name">
+              map
+            </div>
+            <div class="code-name">.pear-icon-map
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-meh"></span>
+            <div class="name">
+              meh
+            </div>
+            <div class="code-name">.pear-icon-meh
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-menu"></span>
+            <div class="name">
+              menu
+            </div>
+            <div class="code-name">.pear-icon-menu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-loading"></span>
+            <div class="name">
+              loading
+            </div>
+            <div class="code-name">.pear-icon-loading
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-help"></span>
+            <div class="name">
+              help
+            </div>
+            <div class="code-name">.pear-icon-help
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-minus-circle"></span>
+            <div class="name">
+              minus-circle
+            </div>
+            <div class="code-name">.pear-icon-minus-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-modular"></span>
+            <div class="name">
+              modular
+            </div>
+            <div class="code-name">.pear-icon-modular
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-notification"></span>
+            <div class="name">
+              notification
+            </div>
+            <div class="code-name">.pear-icon-notification
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-mic"></span>
+            <div class="name">
+              mic
+            </div>
+            <div class="code-name">.pear-icon-mic
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-more"></span>
+            <div class="name">
+              more
+            </div>
+            <div class="code-name">.pear-icon-more
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-pad"></span>
+            <div class="name">
+              pad
+            </div>
+            <div class="code-name">.pear-icon-pad
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-operation"></span>
+            <div class="name">
+              operation
+            </div>
+            <div class="code-name">.pear-icon-operation
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-play"></span>
+            <div class="name">
+              play
+            </div>
+            <div class="code-name">.pear-icon-play
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-print"></span>
+            <div class="name">
+              print
+            </div>
+            <div class="code-name">.pear-icon-print
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-mobile-phone"></span>
+            <div class="name">
+              mobile-phone
+            </div>
+            <div class="code-name">.pear-icon-mobile-phone
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-minus"></span>
+            <div class="name">
+              minus
+            </div>
+            <div class="code-name">.pear-icon-minus
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-navigation"></span>
+            <div class="name">
+              navigation
+            </div>
+            <div class="code-name">.pear-icon-navigation
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-pdf"></span>
+            <div class="name">
+              pdf
+            </div>
+            <div class="code-name">.pear-icon-pdf
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-prompt"></span>
+            <div class="name">
+              prompt
+            </div>
+            <div class="code-name">.pear-icon-prompt
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-move"></span>
+            <div class="name">
+              move
+            </div>
+            <div class="code-name">.pear-icon-move
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-refresh"></span>
+            <div class="name">
+              refresh
+            </div>
+            <div class="code-name">.pear-icon-refresh
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-run-up"></span>
+            <div class="name">
+              run-up
+            </div>
+            <div class="code-name">.pear-icon-run-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-picture"></span>
+            <div class="name">
+              picture
+            </div>
+            <div class="code-name">.pear-icon-picture
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-run-in"></span>
+            <div class="name">
+              run-in
+            </div>
+            <div class="code-name">.pear-icon-run-in
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-pin"></span>
+            <div class="name">
+              pin
+            </div>
+            <div class="code-name">.pear-icon-pin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-save"></span>
+            <div class="name">
+              save
+            </div>
+            <div class="code-name">.pear-icon-save
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-search"></span>
+            <div class="name">
+              search
+            </div>
+            <div class="code-name">.pear-icon-search
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-share"></span>
+            <div class="name">
+              share
+            </div>
+            <div class="code-name">.pear-icon-share
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-scanning"></span>
+            <div class="name">
+              scanning
+            </div>
+            <div class="code-name">.pear-icon-scanning
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-security"></span>
+            <div class="name">
+              security
+            </div>
+            <div class="code-name">.pear-icon-security
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-sign-out"></span>
+            <div class="name">
+              sign-out
+            </div>
+            <div class="code-name">.pear-icon-sign-out
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-select"></span>
+            <div class="name">
+              select
+            </div>
+            <div class="code-name">.pear-icon-select
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-stop"></span>
+            <div class="name">
+              stop
+            </div>
+            <div class="code-name">.pear-icon-stop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-success"></span>
+            <div class="name">
+              success
+            </div>
+            <div class="code-name">.pear-icon-success
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-smile"></span>
+            <div class="name">
+              smile
+            </div>
+            <div class="code-name">.pear-icon-smile
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-switch"></span>
+            <div class="name">
+              switch
+            </div>
+            <div class="code-name">.pear-icon-switch
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-setting"></span>
+            <div class="name">
+              setting
+            </div>
+            <div class="code-name">.pear-icon-setting
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-survey"></span>
+            <div class="name">
+              survey
+            </div>
+            <div class="code-name">.pear-icon-survey
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-task"></span>
+            <div class="name">
+              task
+            </div>
+            <div class="code-name">.pear-icon-task
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-skip"></span>
+            <div class="name">
+              skip
+            </div>
+            <div class="code-name">.pear-icon-skip
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-text"></span>
+            <div class="name">
+              text
+            </div>
+            <div class="code-name">.pear-icon-text
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-time"></span>
+            <div class="name">
+              time
+            </div>
+            <div class="code-name">.pear-icon-time
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-telephone-out"></span>
+            <div class="name">
+              telephone-out
+            </div>
+            <div class="code-name">.pear-icon-telephone-out
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-toggle-left"></span>
+            <div class="name">
+              toggle-left
+            </div>
+            <div class="code-name">.pear-icon-toggle-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-toggle-right"></span>
+            <div class="name">
+              toggle-right
+            </div>
+            <div class="code-name">.pear-icon-toggle-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-telephone"></span>
+            <div class="name">
+              telephone
+            </div>
+            <div class="code-name">.pear-icon-telephone
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-top"></span>
+            <div class="name">
+              top
+            </div>
+            <div class="code-name">.pear-icon-top
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-unlock"></span>
+            <div class="name">
+              unlock
+            </div>
+            <div class="code-name">.pear-icon-unlock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-user"></span>
+            <div class="name">
+              user
+            </div>
+            <div class="code-name">.pear-icon-user
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-upload"></span>
+            <div class="name">
+              upload
+            </div>
+            <div class="code-name">.pear-icon-upload
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-work"></span>
+            <div class="name">
+              work
+            </div>
+            <div class="code-name">.pear-icon-work
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-training"></span>
+            <div class="name">
+              training
+            </div>
+            <div class="code-name">.pear-icon-training
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-warning"></span>
+            <div class="name">
+              warning
+            </div>
+            <div class="code-name">.pear-icon-warning
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-zoom-in"></span>
+            <div class="name">
+              zoom-in
+            </div>
+            <div class="code-name">.pear-icon-zoom-in
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-zoom-out"></span>
+            <div class="name">
+              zoom-out
+            </div>
+            <div class="code-name">.pear-icon-zoom-out
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-add-bold"></span>
+            <div class="name">
+              add-bold
+            </div>
+            <div class="code-name">.pear-icon-add-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-left-bold"></span>
+            <div class="name">
+              arrow-left-bold
+            </div>
+            <div class="code-name">.pear-icon-arrow-left-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-up-bold"></span>
+            <div class="name">
+              arrow-up-bold
+            </div>
+            <div class="code-name">.pear-icon-arrow-up-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-close-bold"></span>
+            <div class="name">
+              close-bold
+            </div>
+            <div class="code-name">.pear-icon-close-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-down-bold"></span>
+            <div class="name">
+              arrow-down-bold
+            </div>
+            <div class="code-name">.pear-icon-arrow-down-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-minus-bold"></span>
+            <div class="name">
+              minus-bold
+            </div>
+            <div class="code-name">.pear-icon-minus-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-right-bold"></span>
+            <div class="name">
+              arrow-right-bold
+            </div>
+            <div class="code-name">.pear-icon-arrow-right-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-select-bold"></span>
+            <div class="name">
+              select-bold
+            </div>
+            <div class="code-name">.pear-icon-select-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-3column"></span>
+            <div class="name">
+              column-3
+            </div>
+            <div class="code-name">.pear-icon-3column
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-column-4"></span>
+            <div class="name">
+              column-4
+            </div>
+            <div class="code-name">.pear-icon-column-4
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-add"></span>
+            <div class="name">
+              add
+            </div>
+            <div class="code-name">.pear-icon-add
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-add-circle"></span>
+            <div class="name">
+              add-circle
+            </div>
+            <div class="code-name">.pear-icon-add-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-adjust"></span>
+            <div class="name">
+              adjust
+            </div>
+            <div class="code-name">.pear-icon-adjust
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-up-circle"></span>
+            <div class="name">
+              arrow-up-circle
+            </div>
+            <div class="code-name">.pear-icon-arrow-up-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-right-circle"></span>
+            <div class="name">
+              arrow-right-circle
+            </div>
+            <div class="code-name">.pear-icon-arrow-right-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-down"></span>
+            <div class="name">
+              arrow-down
+            </div>
+            <div class="code-name">.pear-icon-arrow-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-ashbin"></span>
+            <div class="name">
+              ashbin
+            </div>
+            <div class="code-name">.pear-icon-ashbin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-right"></span>
+            <div class="name">
+              arrow-right
+            </div>
+            <div class="code-name">.pear-icon-arrow-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-browse"></span>
+            <div class="name">
+              browse
+            </div>
+            <div class="code-name">.pear-icon-browse
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-bottom"></span>
+            <div class="name">
+              bottom
+            </div>
+            <div class="code-name">.pear-icon-bottom
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-back"></span>
+            <div class="name">
+              back
+            </div>
+            <div class="code-name">.pear-icon-back
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-bad"></span>
+            <div class="name">
+              bad
+            </div>
+            <div class="code-name">.pear-icon-bad
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-double-left"></span>
+            <div class="name">
+              arrow-double-left
+            </div>
+            <div class="code-name">.pear-icon-arrow-double-left
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-left-circle"></span>
+            <div class="name">
+              arrow-left-circle
+            </div>
+            <div class="code-name">.pear-icon-arrow-left-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-arrow-double-right"></span>
+            <div class="name">
+              arrow-double-right
+            </div>
+            <div class="code-name">.pear-icon-arrow-double-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-caps-lock"></span>
+            <div class="name">
+              caps-lock
+            </div>
+            <div class="code-name">.pear-icon-caps-lock
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-camera"></span>
+            <div class="name">
+              camera
+            </div>
+            <div class="code-name">.pear-icon-camera
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-chart-bar"></span>
+            <div class="name">
+              chart-bar
+            </div>
+            <div class="code-name">.pear-icon-chart-bar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-attachment"></span>
+            <div class="name">
+              attachment
+            </div>
+            <div class="code-name">.pear-icon-attachment
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-code"></span>
+            <div class="name">
+              code
+            </div>
+            <div class="code-name">.pear-icon-code
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-close"></span>
+            <div class="name">
+              close
+            </div>
+            <div class="code-name">.pear-icon-close
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-check-item"></span>
+            <div class="name">
+              check-item
+            </div>
+            <div class="code-name">.pear-icon-check-item
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-calendar"></span>
+            <div class="name">
+              calendar
+            </div>
+            <div class="code-name">.pear-icon-calendar
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-comment"></span>
+            <div class="name">
+              comment
+            </div>
+            <div class="code-name">.pear-icon-comment
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-column-vertical"></span>
+            <div class="name">
+              column-vertical
+            </div>
+            <div class="code-name">.pear-icon-column-vertical
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-column-horizontal"></span>
+            <div class="name">
+              column-horizontal
+            </div>
+            <div class="code-name">.pear-icon-column-horizontal
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-complete"></span>
+            <div class="name">
+              complete
+            </div>
+            <div class="code-name">.pear-icon-complete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-chart-pie"></span>
+            <div class="name">
+              chart-pie
+            </div>
+            <div class="code-name">.pear-icon-chart-pie
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-cry"></span>
+            <div class="name">
+              cry
+            </div>
+            <div class="code-name">.pear-icon-cry
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-customer-service"></span>
+            <div class="name">
+              customer-service
+            </div>
+            <div class="code-name">.pear-icon-customer-service
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-delete"></span>
+            <div class="name">
+              delete
+            </div>
+            <div class="code-name">.pear-icon-delete
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-direction-down"></span>
+            <div class="name">
+              direction-down
+            </div>
+            <div class="code-name">.pear-icon-direction-down
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-copy"></span>
+            <div class="name">
+              copy
+            </div>
+            <div class="code-name">.pear-icon-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-cut"></span>
+            <div class="name">
+              cut
+            </div>
+            <div class="code-name">.pear-icon-cut
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-data-view"></span>
+            <div class="name">
+              data-view
+            </div>
+            <div class="code-name">.pear-icon-data-view
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-direction-down-circle"></span>
+            <div class="name">
+              direction-down-circle
+            </div>
+            <div class="code-name">.pear-icon-direction-down-circle
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-direction-right"></span>
+            <div class="name">
+              direction-right
+            </div>
+            <div class="code-name">.pear-icon-direction-right
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-direction-up"></span>
+            <div class="name">
+              direction-up
+            </div>
+            <div class="code-name">.pear-icon-direction-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-discount"></span>
+            <div class="name">
+              discount
+            </div>
+            <div class="code-name">.pear-icon-discount
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon pear-icon pear-icon-direction-left"></span>
+            <div class="name">
+              direction-left
+            </div>
+            <div class="code-name">.pear-icon-direction-left
+            </div>
+          </li>
+          
+        </ul>
+     
+      </div>
+      <div class="content symbol">
+         
+     
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/view/document/iconPicker.html b/public/view/document/iconPicker.html
new file mode 100644
index 0000000..ed72b62
--- /dev/null
+++ b/public/view/document/iconPicker.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>Document</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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						IconPicker 提供图标选择功能
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						默认图标
+					</div>
+					<div class="layui-card-body">
+						<div class="layui-form">
+							<div class="layui-form-item">
+								<div class="layui-input-inline">
+									<input type="text" id="iconPicker" value="layui-icon-face-smile" lay-filter="iconPicker" class="hide">
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['iconPicker'], function() {
+								    var iconPicker = layui.iconPicker;
+								
+								    iconPicker.render({
+								        elem: '#iconPicker',
+								        type: 'fontClass',
+								        search: true,
+								        page: true,
+								        limit: 16,
+								        click: function(data) {
+								           console.log(data);
+								        },
+								        success: function(d) {
+								            console.log(d);
+								        }
+								    });
+									
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">默认选中</div>
+					<div class="layui-card-body">
+						<div class="layui-form">
+							<div class="layui-form-item">
+								<div class="layui-input-inline">
+									<input type="text" id="iconPicker2" value="layui-icon-face-smile-fine" lay-filter="iconPicker2">
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['iconPicker'], function() {
+								    var iconPicker = layui.iconPicker;
+								
+								    iconPicker.render({
+								        elem: '#iconPicker2',
+								        type: 'fontClass',
+								        search: true,
+								        page: true,
+								        limit: 16,
+								        click: function(data) {
+								           console.log(data);
+								        },
+								        success: function(d) {
+								            console.log(d);
+								        }
+								    });
+									
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">不分页</div>
+					<div class="layui-card-body">
+						<div class="layui-form">
+							<div class="layui-form-item">
+								<div class="layui-input-inline">
+									<input type="text" id="iconPicker3" value="layui-icon-face-smile-fine" lay-filter="iconPicker3">
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['iconPicker'], function() {
+								    var iconPicker = layui.iconPicker;
+								
+								    iconPicker.render({
+								        elem: '#iconPicker',
+								        type: 'fontClass',
+								        search: true,
+								        page: false,
+								        limit: 16,
+								        click: function(data) {
+								           console.log(data);
+								        },
+								        success: function(d) {
+								            console.log(d);
+								        }
+								    });
+									
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['iconPicker', 'form', 'layer', 'code','element'], function() {
+				var iconPicker = layui.iconPicker,
+					form = layui.form,
+					layer = layui.layer,
+					$ = layui.$;
+
+				layui.code();
+
+				iconPicker.render({
+					// 选择器，推荐使用input
+					elem: '#iconPicker',
+					// 数据类型：fontClass/unicode，推荐使用fontClass
+					type: 'fontClass',
+					// 是否开启搜索：true/false，默认true
+					search: true,
+					// 是否开启分页：true/false，默认true
+					page: true,
+					// 每页显示数量，默认12
+					limit: 16,
+					// 点击回调
+					click: function(data) {
+						console.log(data);
+					},
+					// 渲染成功后的回调
+					success: function(d) {
+						console.log(d);
+					}
+				});
+
+				iconPicker.render({
+					// 选择器，推荐使用input
+					elem: '#iconPicker2',
+					// 数据类型：fontClass/unicode，推荐使用fontClass
+					type: 'fontClass',
+					// 是否开启搜索：true/false
+					search: true,
+					// 是否开启分页
+					page: true,
+					// 每页显示数量，默认12
+					limit: 16,
+					// 点击回调
+					click: function(data) {
+						console.log(data);
+					},
+					// 渲染成功后的回调
+					success: function(d) {
+						console.log(d);
+					}
+				});
+
+				iconPicker.render({
+					// 选择器，推荐使用input
+					elem: '#iconPicker3',
+					// 数据类型：fontClass/unicode，推荐使用fontClass
+					type: 'fontClass',
+					// 是否开启搜索：true/false
+					search: true,
+					// 是否开启分页
+					page: false,
+					// 每页显示数量，默认12
+					limit: 16,
+					// 点击回调
+					click: function(data) {
+						console.log(data);
+					},
+					// 渲染成功后的回调
+					success: function(d) {
+						console.log(d);
+					}
+				});
+			});
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/document/loading.html b/public/view/document/loading.html
new file mode 100644
index 0000000..9140e9d
--- /dev/null
+++ b/public/view/document/loading.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>加载组件</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+		<style>
+			.load-div {
+				width: 100%;
+				height: 300px;
+				background-color: lightgray;
+				border-radius: 10px;
+				margin-top: 10px;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-header">加载组件</div>
+			<div class="layui-card-body">
+				<div>
+					<span>loading.Load(1,message);</span>
+					<br>
+					<br>
+					<span>loading.Load(2,message);</span>
+					<br>
+					<br>
+					<span>loading.Load(3,message);</span>
+					<br>
+					<br>
+					<span>loading.Load(4,message);</span>
+					<br>
+					<br>
+					<span>loading.Load(5,message);</span>
+					<br>
+					<br>
+					<span>loading.remove(time);</span>
+					<br>
+					<br>
+				</div>
+				<button class="loading-1 pear-btn pear-btn-primary" plain>加载</button>
+				<button class="loading-2 pear-btn pear-btn-success" plain>加载</button>
+				<button class="loading-3 pear-btn pear-btn-danger" plain>加载</button>
+				<button class="loading-4 pear-btn pear-btn-warming" plain>加载</button>
+				<button class="loading-5 pear-btn">加载</button>
+			</div>
+		</div>
+
+		<div class="layui-card">
+			<div class="layui-card-header">加载组件</div>
+			<div class="layui-card-body">
+				<button class="block-5 pear-btn">加载</button>
+
+				<button class="block-4 pear-btn">加载</button>
+
+				<button class="block-3 pear-btn">加载</button>
+
+				<button class="block-2 pear-btn">加载</button>
+				<button class="block-1 pear-btn">加载</button>
+				<div class="load-div load-div-1"></div>
+
+			</div>
+		</div>
+
+		<div class="layer-right">
+
+		</div>
+
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['element', 'jquery', 'loading', 'code'], function() {
+				var element = layui.element;
+				var $ = layui.jquery;
+				var loading = layui.loading;
+
+				var msg =
+					'"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
+
+
+
+				$(".loading-1").click(function() {
+
+					loading.Load(1, "");
+
+					loading.loadRemove(1000);
+				})
+
+				$(".loading-2").click(function() {
+
+					loading.Load(2, "");
+
+					loading.loadRemove(1000);
+				})
+
+				$(".loading-3").click(function() {
+
+					loading.Load(3, "");
+
+					loading.loadRemove(1000);
+				})
+
+				$(".loading-4").click(function() {
+
+					loading.Load(4, "");
+
+					loading.loadRemove(1000);
+				})
+
+				$(".loading-5").click(function() {
+
+					loading.Load(5, "");
+
+					loading.loadRemove(1000);
+				})
+
+				$(".block-1").click(function() {
+
+					loading.block({
+						type: 1,
+						elem: '.load-div-1',
+						msg: '加载中'
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+
+				$(".block-2").click(function() {
+					loading.block({
+						type: 2,
+						elem: '.load-div-1',
+						msg: ''
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+
+				$(".block-3").click(function() {
+					loading.block({
+						type: 3,
+						elem: '.load-div-1',
+						msg: ''
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+
+				$(".block-4").click(function() {
+					loading.block({
+						type: 4,
+						elem: '.load-div-1',
+						msg: ''
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+
+				$(".block-5").click(function() {
+					loading.block({
+						type: 5,
+						elem: '.load-div-1',
+						msg: ''
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+
+				$(".block-6").click(function() {
+					loading.block({
+						type: 6,
+						elem: '.load-div-1',
+						msg: ''
+					})
+					loading.blockRemove(".load-div-1", 1000);
+				})
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/menu.html b/public/view/document/menu.html
new file mode 100644
index 0000000..7f9a4ec
--- /dev/null
+++ b/public/view/document/menu.html
@@ -0,0 +1,115 @@
+<!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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Menu 数据菜单对普通菜单的深度封装 
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header">实例</div>
+					<div class="layui-card-body">
+						<button id="collapse" class="pear-btn">隐藏</button>
+						<br/>
+						<br/>
+						<div id="sideMenu"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content layui-show">
+							<pre class="layui-code" lay-encode="true">
+								
+								var sideMenu = menu.render({
+								    elem: 'sideMenu',
+								    async: true,
+								    theme: "light-theme",
+								    height: '300px',
+								    control: false, 
+								    defaultMenu: 0,
+								    accordion: true,
+								    url: "../../admin/data/menu.json",
+								    parseData: false,
+								    done: function() {
+								        layer.msg("加载完成")
+								    }
+								});
+								
+								sideMenu.click(function(dom, data) {
+								    
+									layer.msg("菜单点击 : " + JSON.stringify(data));
+								})
+						</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['layer', 'form',
+			'element', 'menu', 'code','jquery'
+		], function() {
+			var layer = layui.layer,
+				menu = layui.menu,
+				$ = layui.jquery,
+				form = layui.form;
+	
+			layui.code();
+	
+		 	var sideMenu = menu.render({
+			    elem: 'sideMenu',
+				async: true,
+				theme: "light-theme",
+				height: '300px',
+				control: false, 
+				defaultMenu: 0,
+				accordion: true,
+				url: "../../admin/data/dataMenu.json",
+				parseData: false,
+				done: function() {
+					layer.msg("加载完成")
+				}
+			});
+			
+			sideMenu.click(function(dom, data) {
+				layer.msg("菜单点击 : " + JSON.stringify(data));
+			})
+			
+			$("#collapse").click(function(){
+				sideMenu.collapse();
+			})
+		});
+	</script>
+</html>
diff --git a/public/view/document/notice.html b/public/view/document/notice.html
new file mode 100644
index 0000000..8b30118
--- /dev/null
+++ b/public/view/document/notice.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>通知组件</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body class="pear-container">
+		<div>
+			<div class="layui-row layui-col-space10">
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">开发环境</div>
+						<div class="layui-card-body">
+							Notice 用于 消息通知 场景
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									<link rel="stylesheet" href="component/pear/css/pear.css" />
+									 或
+									<link rel="stylesheet" href="component/pear/css/pear-module/notice.css" />
+									 并
+									<script src="component/layui/layui.js"></script>
+									 并
+									<script src="component/pear/pear.js"></script>
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">消息提醒</div>
+						<div class="layui-card-body">
+							<div>
+								<span>notice.success("成功消息")</span>
+								<br>
+								<br>
+								<span>notice.error("危险消息")</span>
+								<br>
+								<br>
+								<span>notice.warning("警告消息")</span>
+								<br>
+								<br>
+								<span>notice.info("通用消息")</span>
+								<br>
+								<br>
+							</div>
+							<button class="notice-info pear-btn pear-btn-primary">通用消息</button>
+							<button class="notice-success pear-btn pear-btn-success">成功消息</button>
+							<button class="notice-failure pear-btn pear-btn-danger">错误消息</button>
+							<button class="notice-warning pear-btn pear-btn-warming">警告消息</button>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['notice', 'jquery', 'layer', 'code'], function() {
+									    var notice = layui.notice;
+										                         
+									    notice.success("成功消息")
+									    notice.error("危险消息")
+									    notice.warning("警告消息")
+									    notice.info("通用消息")
+									})
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">
+							消息移除
+						</div>
+						<div class="layui-card-body">
+							<button class="pear-btn" id="closeAll">移除全部</button>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['notice', 'jquery', 'layer', 'code'], function() {
+									    var notice = layui.notice;
+										                         
+									    notice.clear();
+									})
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['notice', 'jquery', 'layer', 'code', 'element'], function() {
+			var notice = layui.notice;
+			var layer = layui.layer;
+			var $ = layui.jquery;
+
+			layui.code();
+
+			notice.warning("成功消息");
+			notice.info("提示消息");
+			notice.error("错误消息");
+			notice.success("成功消息");
+
+			$(".notice-success").click(function() {
+				notice.success("成功消息")
+			})
+			$(".notice-failure").click(function() {
+				notice.error("危险消息")
+			})
+			$(".notice-warning").click(function() {
+				notice.warning("警告消息")
+			})
+
+			$(".notice-info").click(function() {
+				notice.info("通用消息")
+			})
+
+			$("#closeAll").click(function() {
+				notice.clear();
+			});
+
+		});
+	</script>
+
+</html>
diff --git a/public/view/document/popover.html b/public/view/document/popover.html
new file mode 100644
index 0000000..5f27eac
--- /dev/null
+++ b/public/view/document/popover.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>汽泡组件</title>
+    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+</head>
+<body class="pear-container">
+<div>
+    <div class="layui-row layui-col-space10">
+        <div class="layui-col-md12">
+            <div class="layui-card">
+                <div class="layui-card-header">开发环境</div>
+                <div class="layui-card-body">
+                    popover 用于 汽泡显示 场景
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <h2 class="layui-colla-title">显示代码</h2>
+                    <div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									<link rel="stylesheet" href="component/pear/css/pear.css" />
+									 并
+									<script src="component/layui/layui.js"></script>
+									 并
+									<script src="component/pear/pear.js"></script>
+								</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-card">
+                <div class="layui-card-header">汽泡控制</div>
+                <div class="layui-card-body">
+                    <button class="popover-show pear-btn pear-btn-primary">显示</button>
+                    <button class="popover-hide pear-btn pear-btn-success">隐藏</button>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <h2 class="layui-colla-title">显示代码</h2>
+                    <div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['popover', 'jquery', 'layer', 'code'], function() {
+									   var popover = layui.popover;
+    popover.show('#el1');
+    popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
+
+
+									})
+								</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-card">
+                <div class="layui-card-header">
+                    不同方式
+                </div>
+                <div class="layui-card-body">
+                    <button class="toast-top-left-btn pear-btn" id="el1">手动</button>
+                    <button class="toast-top-center-btn pear-btn" id="el2">回调</button>
+                    <button class="toast-top-center-btn pear-btn" id="el3">iframe</button>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <h2 class="layui-colla-title">显示代码</h2>
+                    <div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['toast', 'jquery', 'layer', 'code'], function() {
+									    var popover = layui.popover;
+    popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',placement:'auto',
+        animation:'pop',
+        closeable:true,
+        delay: {
+            //show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
+            show: null,
+            hide: 100
+        },
+        opacity:0.98,
+        type:'html',//content type, values:'html','iframe','async'
+    });
+
+									})
+								</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-card">
+                <div class="layui-card-header">
+                    隐藏
+                </div>
+                <div class="layui-card-body">
+                    <button class="pear-btn" id="closeAll">隐藏全部</button>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-md12">
+            <div class="layui-collapse">
+                <div class="layui-colla-item">
+                    <h2 class="layui-colla-title">显示代码</h2>
+                    <div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['popover', 'jquery', 'layer', 'code'], function() {
+									    var popover = layui.popover;
+									    popover.hideAll();
+									})
+								</pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+    layui.use(['popover', 'jquery', 'layer', 'code', 'element'], function() {
+        var layer = layui.layer;
+        var $ = layui.jquery;
+        var popover = layui.popover;
+        var element = layui.element;
+        layui.code();
+        $(".popover-show").click(function(e) {
+            popover.show('#el1');
+        })
+        $("#el1").click(function(e) {
+            popover.show('#el1');
+        })
+
+        $(".popover-hide").click(function(e){
+            popover.hide('#el1'); //或 $('#el1').webuiPopover('hide');
+        })
+        $("#closeAll").click(function(e){
+            popover.hideAll();
+        });
+
+        //html 事件 手动
+        //用法参照  https://github.com/sandywalker/webui-popover
+        //增加功能  opacity [0,1] 可指定 popover 透明度
+        popover.create('#el1',{title:' hello popover-manual',content:'这里显示内容',trigger:'manual',
+            animation:'pop',
+            closeable:true,
+            placement:'auto',
+            delay: {
+                //show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
+                show: null,
+                hide: 100
+            },
+            opacity:0.98,
+            type:'html',//content type, values:'html','iframe','async'
+        })
+
+        //html 事件 hover
+        popover.create('#el2',{title:' hello popover-hover',content:'<div class="layui-tab layui-tab-brief" lay-filter="test">\n' +
+                '  <ul class="layui-tab-title">\n' +
+                '    <li class="layui-this" lay-id="11">网站设置</li>\n' +
+                '    <li lay-id="22">用户管理</li>\n' +
+                '    <li lay-id="33">权限分配</li>\n' +
+                '    <li lay-id="44">商品管理</li>\n' +
+                '    <li lay-id="55">订单管理</li>\n' +
+                '  </ul>\n' +
+                '  <div class="layui-tab-content" style="height: 100px;">\n' +
+                '    <div class="layui-tab-item layui-show">内容不一样是要有，因为你可以获得 tab 事件</div>\n' +
+                '    <div class="layui-tab-item">内容2</div>\n' +
+                '    <div class="layui-tab-item">内容3</div>\n' +
+                '    <div class="layui-tab-item">内容4</div>\n' +
+                '    <div class="layui-tab-item">内容5</div>\n' +
+                '  </div>\n' +
+                '</div> ',trigger:'hover',
+            animation:'pop',
+            delay: {
+                //show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
+                show: null,
+                hide: 100
+            },
+            placement:'top-right',
+            opacity:0.98,
+            onShow: function($element) {
+                //console.log("onShow",$element);
+                element.on('tab(test)', function(elem){
+                    location.hash = 'test='+ $(this).attr('lay-id');
+                    console.log(location.hash);
+                })
+
+            },
+        });
+
+        popover.create('#el3',{title:' hello popover-iframe',trigger:'hover',
+            animation:'pop',
+            closeable:true,
+            placement:'auto',
+            delay: {
+                //show and hide delay time of the popover, works only when trigger is 'hover',the value can be number or object
+                show: null,
+                hide: 100
+            },
+            opacity:0.98,
+            type:'iframe',//content type, values:'html','iframe','async'
+            url:'http://cn.bing.com/',
+            width:500,
+            height:400
+        })
+
+
+
+
+
+    });
+</script>
+
+</html>
diff --git a/public/view/document/popup.html b/public/view/document/popup.html
new file mode 100644
index 0000000..3772d58
--- /dev/null
+++ b/public/view/document/popup.html
@@ -0,0 +1,127 @@
+<!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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Popup 基于 Layer 的 二次封装, 提供简洁高效的 API 调用
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">提示消息</div>
+					<div class="layui-card-body">
+						<button class="success pear-btn pear-btn-primary">成功消息</button>
+						<button class="failure pear-btn pear-btn-danger">失败消息</button>
+						<button class="warming pear-btn pear-btn-warming">警告消息</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['popup'], function() {
+								    var popup = layui.popup;
+								  
+								    popup.success("成功消息")
+								    popup.failure("失败消息")
+								    popup.warning("警告消息")
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">回调函数</div>
+					<div class="layui-card-body">
+						<button class="success-callback pear-btn pear-btn-primary">成功消息</button>
+						<button class="failure-callback pear-btn pear-btn-danger">失败消息</button>
+						<button class="warming-callback pear-btn pear-btn-warming">警告消息</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['popup'], function() {
+								    var popup = layui.popup;
+								  
+								    popup.success("成功消息",callback)
+								    popup.failure("失败消息",callback)
+								    popup.warning("警告消息",callback)
+								})
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['popup', 'jquery', 'code'], function() {
+			var popup = layui.popup;
+			var $ = layui.jquery;
+
+			layui.code();
+
+			$(".success").click(function() {
+				popup.success("成功消息")
+			})
+			$(".failure").click(function() {
+				popup.failure("失败消息")
+			})
+			$(".warming").click(function() {
+				popup.warning("警告消息")
+			})
+			$(".success-callback").click(function() {
+				popup.success("成功消息", function() {
+					layer.msg("回调函数")
+				})
+			})
+			$(".failure-callback").click(function() {
+				popup.failure("失败消息", function() {
+					layer.msg("回调函数")
+				})
+			})
+			$(".warming-callback").click(function() {
+				popup.warning("警告消息", function() {
+					layer.msg("回调函数")
+				})
+			})
+		})
+	</script>
+</html>
diff --git a/public/view/document/select.html b/public/view/document/select.html
new file mode 100644
index 0000000..8effad4
--- /dev/null
+++ b/public/view/document/select.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>多选组件</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						开发环境
+					</div>
+					<div class="layui-card-body">
+					    Select 应用于 多选 场景
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link href="component/pear/css/pear.css" rel="stylesheet" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+      <div class="layui-col-md12">
+        <div class="layui-card">
+          <div class="layui-card-header">
+            默认主题
+          </div>
+          <div class="layui-card-body">
+            <select name="city5" xm-select="select5" xm-select-skin="default">
+              <option value="1">北京</option>
+              <option value="2" selected="selected">上海</option>
+              <option value="3">广州</option>
+              <option value="4" selected="selected">深圳</option>
+              <option value="5">天津</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="layui-col-md12">
+        <div class="layui-collapse">
+          <div class="layui-colla-item">
+            <h2 class="layui-colla-title">显示代码</h2>
+            <div class="layui-colla-content">
+              <pre class="layui-code" lay-encode="true">
+      								<select name="demo1" xm-selects="demo1" xm-select-skin="default">
+      								    <option value="1">北京</option>
+      								    <option value="2" selected="selected">上海</option>
+      								    <option value="3">广州</option>
+      								    <option value="4" selected="selected">深圳</option>
+      								    <option value="5">天津</option>
+      								</select>
+      							</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+			<div class="layui-col-md12">
+	            <div class="layui-card">
+	            	<div class="layui-card-header">
+						绿色主题
+	            	</div>
+	            	<div class="layui-card-body">
+	            		<select name="city1" xm-select="select1">
+	            			<option value="1">北京</option>
+	            			<option value="2" selected="selected">上海</option>
+	            			<option value="3">广州</option>
+	            			<option value="4" selected="selected">深圳</option>
+	            			<option value="5">天津</option>
+	            		</select>
+	            	</div>
+	            </div>			
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<select name="demo2" xm-selects="demo2">
+								    <option value="1">北京</option>
+								    <option value="2" selected="selected">上海</option>
+								    <option value="3">广州</option>
+								    <option value="4" selected="selected">深圳</option>
+								    <option value="5">天津</option>
+								</select>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+			  <div class="layui-card">
+			  	<div class="layui-card-header">
+                    通用主题
+			  	</div>
+			  	<div class="layui-card-body">
+			  		<select name="city2" xm-select="select2" xm-select-skin="normal">
+			  			<option value="1">北京</option>
+			  			<option value="2" selected="selected">上海</option>
+			  			<option value="3">广州</option>
+			  			<option value="4" selected="selected">深圳</option>
+			  			<option value="5">天津</option>
+			  		</select>
+			  	</div>
+			  </div>		
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<select name="demo3" xm-selects="demo3" xm-select-skin="normal">
+								    <option value="1">北京</option>
+								    <option value="2" selected="selected">上海</option>
+								    <option value="3">广州</option>
+								    <option value="4" selected="selected">深圳</option>
+								    <option value="5">天津</option>
+								</select>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+			  <div class="layui-card">
+			  	<div class="layui-card-header">
+					警告主题
+			  	</div>
+			  	<div class="layui-card-body">
+			  		<select name="city3" xm-select="select3" xm-select-skin="warm">
+			  			<option value="1">北京</option>
+			  			<option value="2" selected="selected">上海</option>
+			  			<option value="3">广州</option>
+			  			<option value="4" selected="selected">深圳</option>
+			  			<option value="5">天津</option>
+			  		</select>
+			  	</div>
+			  </div>	
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<select name="demo4" xm-selects="demo4" xm-select-skin="warm">
+								    <option value="1">北京</option>
+								    <option value="2" selected="selected">上海</option>
+								    <option value="3">广州</option>
+								    <option value="4" selected="selected">深圳</option>
+								    <option value="5">天津</option>
+								</select>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+			  <div class="layui-card">
+			  	<div class="layui-card-header">
+					危险主题
+			  	</div>
+			  	<div class="layui-card-body">
+			  		<select name="city4" xm-select="select4" xm-select-skin="danger">
+			  			<option value="1">北京</option>
+			  			<option value="2" selected="selected">上海</option>
+			  			<option value="3">广州</option>
+			  			<option value="4" selected="selected">深圳</option>
+			  			<option value="5">天津</option>
+			  		</select>
+			  	</div>
+			  </div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<select name="demo5" xm-selects="demo5" xm-select-skin="danger">
+								    <option value="1">北京</option>
+								    <option value="2" selected="selected">上海</option>
+								    <option value="3">广州</option>
+								    <option value="4" selected="selected">深圳</option>
+								    <option value="5">天津</option>
+								</select>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['select','code','element'], function() {
+				let select = layui.select;
+		
+		        layui.code();
+			});
+		</script>
+	</body>
+
+</html>
diff --git a/public/view/document/step.html b/public/view/document/step.html
new file mode 100644
index 0000000..da55064
--- /dev/null
+++ b/public/view/document/step.html
@@ -0,0 +1,256 @@
+<!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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">Step 步骤表单</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card">
+						<div class="layui-card-body" style="padding-top: 40px;">
+							<div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
+								<div carousel-item>
+									<div>
+										<form class="layui-form" action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
+											<div class="layui-form-item">
+												<label class="layui-form-label">游戏编号:</label>
+												<div class="layui-input-block">
+													<input type="text" placeholder="请填写入款人游戏ID" class="layui-input" lay-verify="number" required />
+				
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款金额:</label>
+												<div class="layui-input-block">
+													<input type="number" placeholder="请填写入款金额" value="" class="layui-input" lay-verify="number" required>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款类型:</label>
+												<div class="layui-input-block">
+													<select lay-verify="required">
+														<option value="1" selected>保险箱</option>
+														<option value="2">现金</option>
+													</select>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款方式:</label>
+												<div class="layui-input-block">
+													<select lay-verify="required">
+														<option value="1" selected>人工入款</option>
+														<option value="2">修正</option>
+														<option value="3">活动</option>
+														<option value="4">佣金</option>
+													</select>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">备注说明:</label>
+												<div class="layui-input-block">
+													<textarea placeholder="入款备注" value="" class="layui-textarea"></textarea>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<div class="layui-input-block">
+													<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep">
+														&emsp;下一步&emsp;
+													</button>
+												</div>
+											</div>
+										</form>
+									</div>
+									<div>
+										<form class="layui-form"  action="javascript:void(0);" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
+											<div class="layui-form-item">
+												<label class="layui-form-label">游戏编号:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">639537</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">账户余额:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">3000 元（保险箱：1000，现金：2000）</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款金额:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">
+														<span style="font-size: 18px;color: #333;">1800 元</span>
+													</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款类型:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">保险箱</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">入款方式:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">人工入款</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<label class="layui-form-label">备注说明:</label>
+												<div class="layui-input-block">
+													<div class="layui-form-mid layui-word-aux">备注说明</div>
+												</div>
+											</div>
+											<div class="layui-form-item">
+												<div class="layui-input-block">
+													<button type="button" class="pear-btn pear-btn-success pre">上一步</button>
+													<button class="pear-btn pear-btn-success" lay-submit lay-filter="formStep2">
+														&emsp;确认入款&emsp;
+													</button>
+												</div>
+											</div>
+										</form>
+									</div>
+									<div>
+										<div style="text-align: center;margin-top: 90px;">
+											<i class="layui-icon layui-circle" style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
+											<div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
+												入款成功
+											</div>
+											<div style="font-size: 14px;color: #666;margin-top: 20px;">预计两小时到账</div>
+										</div>
+										<div style="text-align: center;margin-top: 50px;">
+											<button class="pear-btn pear-btn-success next">再入一笔</button>
+											<button class="pear-btn pear-btn-success">查看账单</button>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+		                        layui.use(['form', 'step','element'], function() {
+		                            var $ = layui.$,
+		                            form = layui.form,
+		                            step = layui.step;
+		                            
+		                            step.render({
+		                                elem: '#stepForm',
+		                                filter: 'stepForm',
+		                                width: '100%',
+		                                stepWidth: '600px',
+		                                height: '500px',
+		                                stepItems: [{
+		                                    title: '填写'
+		                                }, {
+		                                    title: '确认'
+		                                }, {
+		                                    title: '完成'
+		                                }]
+		                            });
+		                         
+		                            form.on('submit(formStep)', function(data) {
+		                                step.next('#stepForm');
+		                                return false;
+		                            });
+		                         
+		                            form.on('submit(formStep2)', function(data) {
+		                                step.next('#stepForm');
+		                                return false;
+		                            });
+		                         
+		                            $('.pre').click(function() {
+		                                step.pre('#stepForm');
+		                                return false;
+		                            });
+		                         
+		                            $('.next').click(function() {
+		                                step.next('#stepForm');
+		                                return false;
+		                            });
+		                        })
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form', 'step','code','element'], function() {
+				var $ = layui.$,
+					form = layui.form,
+					step = layui.step;
+					
+				layui.code();
+
+				step.render({
+					elem: '#stepForm',
+					filter: 'stepForm',
+					width: '100%',
+					stepWidth: '600px',
+					height: '500px',
+					stepItems: [{
+						title: '填写'
+					}, {
+						title: '确认'
+					}, {
+						title: '完成'
+					}]
+				});
+
+				form.on('submit(formStep)', function(data) {
+					step.next('#stepForm');
+					return false;
+				});
+
+				form.on('submit(formStep2)', function(data) {
+					step.next('#stepForm');
+					return false;
+				});
+
+				$('.pre').click(function() {
+					step.pre('#stepForm');
+					return false;
+				});
+
+				$('.next').click(function() {
+					step.next('#stepForm');
+				    return false;
+				});
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/tab.html b/public/view/document/tab.html
new file mode 100644
index 0000000..adee0e3
--- /dev/null
+++ b/public/view/document/tab.html
@@ -0,0 +1,152 @@
+<html>
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+		<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-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Tab.js 是一个多视图组件，你可在任何地方内嵌它，并执行常用操作，Admin 正式使用该组件进行路由切换
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							    <link rel="stylesheet" href="component/pear/css/pear.css" />
+							    并
+							    <script src="component/layui/layui.js"></script>
+							    并
+							    <script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						常用操作
+					</div>
+					<div class="layui-card-body">
+						<button class="pear-btn pear-btn-primary add">新增 Demo</button>
+						<button class="pear-btn pear-btn-danger del">删除当前</button>
+						<button class="pear-btn pear-btn-warming enable">高级操作</button>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						基本使用
+					</div>
+					<div class="layui-card-body">
+						<!-- 内 容 页 面 -->
+						<div id="contents"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content layui-show">
+							<pre class="layui-code" lay-encode="true">
+								
+								tab.render({
+								    elem: 'contents',
+								    roll: false,
+								    tool: false,
+								    width: '100%',
+								    height: '480px',
+								    index: 0,
+								    tabMax: 30,
+								    closeEvent: function(id) {
+										
+								        // do something
+								    },
+								    data: [{
+								        id: "1",
+								        title: "首页",
+								        url: "http://www.baidu.com",
+								        close: false
+								    },{
+								        id: "2",
+								        title: "百度一下",
+								        url: "http://www.baidu.com",
+								        close: false
+								    }]
+								});
+								
+								
+						</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['layer', 'form',
+				'element', 'tab', 'code','jquery'
+			], function() {
+				var layer = layui.layer,
+					tab = layui.tab,
+					$ = layui.jquery,
+					form = layui.form;
+
+				layui.code();
+
+				tab.render({
+					elem: 'contents',
+					roll: false,
+					tool: false,
+					width: '100%',
+					height: '485px',
+					index: 0,
+					session: false,
+					tabMax: 30,
+					closeEvent: function(id) {
+						layer.msg("关闭回调")
+					},
+					data: [{
+						id: "1",
+						title: "百度一下",
+						url: "../system/space.html",
+						close: false
+					}]
+				});
+				
+				$(".add").click(function(){
+					
+					// ADD 添加方法
+					tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
+				})
+				
+				$(".enable").click(function(){
+					
+					// ADD 添加方法
+					tab.addTabOnlyByElem('contents',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
+				})
+				
+				$(".del").click(function(){
+					
+					tab.delCurrentTabByElem('contents',function(id){
+						layer.msg("已删除 '"+id+"' 标签页")
+					});
+					
+				})
+			});
+		</script>
+	</body>
+
+</html>
diff --git a/public/view/document/tabContent.html b/public/view/document/tabContent.html
new file mode 100644
index 0000000..d01129b
--- /dev/null
+++ b/public/view/document/tabContent.html
@@ -0,0 +1,38 @@
+<!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-card">
+			<div class="layui-card-header"></div>
+			<div class="layui-card-body">
+				<button class="pear-btn pear-btn-primary add">新增 Demo</button>
+				<button class="pear-btn pear-btn del">关闭 当前</button>
+			</div>
+		</div>
+	</body>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['tab','jquery','layer'],function(){
+			var $ = layui.jquery,
+				layer = layui.layer,
+				tab = layui.tab;
+				
+				$(".add").click(function(){
+					// ADD 添加方法
+					parent.layui.tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
+				})
+				
+				$(".del").click(function(){
+					parent.layui.tab.delCurrentTabByElem('contents',function(id){
+						layer.msg("已删除 '"+id+"' 标签页")
+					});
+				})
+				
+		})
+	</script>
+</html>
diff --git a/public/view/document/table.html b/public/view/document/table.html
new file mode 100644
index 0000000..187cf78
--- /dev/null
+++ b/public/view/document/table.html
@@ -0,0 +1,412 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>数据表格</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+		<style>
+			.expand.pear-btn:hover {
+				color: currentColor;
+        background: none;
+			}
+
+			.expand.pear-btn {
+				border: 1px solid rgba(255, 255, 255, 0)
+			}
+		</style>
+	</head>
+
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<form id="userForm" class="layui-form" action="">
+					<div class="layui-form-item">
+						<div class="layui-inline">
+							<label class="layui-form-label">用户名</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-inline">
+							<label class="layui-form-label">账号</label>
+							<div class="layui-input-inline">
+								<input type="text" name="username" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-inline">
+							<label class="layui-form-label">账号</label>
+							<div class="layui-input-inline">
+								<input type="text" name="username" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-inline">
+							<label class="layui-form-label">账号</label>
+							<div class="layui-input-inline">
+								<input type="text" name="username" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-inline">
+							<label class="layui-form-label">账号</label>
+							<div class="layui-input-inline">
+								<input type="text" name="username" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-inline" style="margin-left: 50px;">
+							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+								<i class="layui-icon layui-icon-search"></i>
+								查询
+							</button>
+							<button type="reset" class="pear-btn pear-btn-md">
+								<i class="layui-icon layui-icon-refresh"></i>
+								重置
+							</button>
+							<button type="button" class="pear-btn pear-btn-md expand">
+							</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<table id="user-table" lay-filter="user-table"></table>
+			</div>
+		</div>
+
+		<script type="text/html" id="user-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+				<i class="layui-icon layui-icon-add-1"></i>
+				新增
+			</button>
+			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+				<i class="layui-icon layui-icon-delete"></i>
+				删除
+			</button>
+		</script>
+
+		<script type="text/html" id="user-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
+					class="layui-icon layui-icon-edit"></i></button>
+			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
+					class="layui-icon layui-icon-delete"></i></button>
+			<button class="pear-btn pear-btn-sm" id="more_{{d.userId}}"><i class="layui-icon layui-icon-triangle-d"></i></button>
+		</script>
+
+		<script type="text/html" id="user-enable">
+			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
+				checked="{{ d.enable == 0 ? 'true' : 'false' }}">
+		</script>
+
+		<script type="text/html" id="user-sex">
+		{{#if (d.sex == 1) { }}
+			<span>男</span>
+			{{# }else if(d.sex == 2){ }}
+				<span>女</span>
+				{{# } }}
+		</script>
+
+		<script type="text/html" id="user-login">
+		{{#if (d.login == 0) { }}
+			<span>在线</span>
+			{{# }else if(d.sex == 1){ }}
+				<span>离线</span>
+				{{# } }}
+		</script>
+
+		<script type="text/html" id="user-createTime">
+		{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
+		</script>
+
+		<div style="display: none;">
+			<div class="layer-top">
+				<br />
+				<h3>上侧弹层内容...</h3>
+			</div>
+		</div>
+
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown'], function() {
+				let table = layui.table;
+				let form = layui.form;
+				let $ = layui.jquery;
+				let drawer = layui.drawer;
+				let dropdown = layui.dropdown;
+
+				let MODULE_PATH = "/system/user/";
+
+				formToggle({
+					elem: "#userForm",
+				});
+
+				function formToggle(options) {
+					var defaultsOpt = {
+						isExpand: false,
+						prefixIcon: "layui-icon",
+						toggleIcon: ['layui-icon-down', 'layui-icon-up'],
+						toggleText: ['展开', '折叠'],
+					}
+					var opt = $.extend({}, defaultsOpt, options);
+					var elem = opt.elem; // 绑定的表单元素,必填
+					var min = opt.min; // 最小显示数,默认显示一行
+					var isExpand = opt.isExpand; // 初始展开
+					var prefixIcon = opt.prefixIcon + " "; // 图标前缀
+					var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
+					var toggleText = opt.toggleText; // 折叠和展开时的文本
+
+					var eleDOM = $(elem + " .layui-inline");
+					var firstElTop = eleDOM.first().offset().top;
+					var targetEl = eleDOM.filter(function(index) {
+						var isGtMin = (index + 1) > min;
+						var isGtFirstElTop = $(this).offset().top > firstElTop;
+						var isNeqLast = (index + 1) != eleDOM.length;
+						return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
+					});
+
+					var unExpandIcon = prefixIcon + toggleIcon[0];
+					var expandIcon = prefixIcon + toggleIcon[1];
+					var unExpandText = toggleText[0];
+					var expandText = toggleText[1];
+					var btnSelector = elem + " .expand";
+					$(btnSelector).append("<i></i>")
+					if (targetEl.length > 0) {
+						if (isExpand) {
+							$(btnSelector).prepend("<span>" + expandText + "</span>");
+							$(btnSelector + ">i").addClass(expandIcon);
+						} else {
+							$(btnSelector).prepend("<span>" + unExpandText + "</span>")
+							$(btnSelector + ">i").addClass(unExpandIcon)
+							targetEl.addClass("layui-hide");
+						}
+						$(btnSelector).click(function() {
+							isExpand = !isExpand;
+							if (isExpand) {
+								$(btnSelector + ">span").html(expandText);
+								$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
+								targetEl.removeClass("layui-hide")
+							} else {
+								$(btnSelector + ">span").html(unExpandText);
+								$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
+								targetEl.addClass("layui-hide")
+							}
+						})
+					}
+				}
+
+				let cols = [
+					[{
+							type: 'checkbox'
+						},
+						{
+							title: '账号',
+							field: 'username',
+							align: 'center',
+							width: 100
+						},
+						{
+							title: '姓名',
+							field: 'realName',
+							align: 'center'
+						},
+						{
+							title: '性别',
+							field: 'sex',
+							align: 'center',
+							width: 80,
+							templet: '#user-sex'
+						},
+						{
+							title: '电话',
+							field: 'phone',
+							align: 'center'
+						},
+						{
+							title: '启用',
+							field: 'enable',
+							align: 'center',
+							templet: '#user-enable'
+						},
+						{
+							title: '登录',
+							field: 'login',
+							align: 'center',
+							templet: '#user-login'
+						},
+						{
+							title: '注册',
+							field: 'createTime',
+							align: 'center',
+							templet: '#user-createTime'
+						},
+						{
+							title: '操作',
+							toolbar: '#user-bar',
+							align: 'left',
+							width: 160,
+							fixed: 'right'
+						}
+					]
+				]
+
+				table.render({
+					elem: '#user-table',
+					url: '../../admin/data/table.json',
+					page: true,
+					cols: cols,
+					skin: 'line',
+					toolbar: '#user-toolbar',
+					defaultToolbar: [{
+						layEvent: 'refresh',
+						icon: 'layui-icon-refresh',
+					}, 'filter', 'print', 'exports'],
+					done: function(res, curr, count) {
+						for (var i = 0; i < res.data.length; i++) {
+							dropdown.render({
+								elem: '#more_' + res.data[i].userId,
+								data: [{
+									title: 'menu item11',
+									id: 100
+								}, {
+									title: 'menu item22',
+									id: 101
+								}, {
+									title: 'menu item33',
+									id: 102
+								}],
+								id: '#more_' + res.data[i].userId,
+								click: function(obj) {
+									layer.tips('点击了：' + obj.title, this.elem, {
+										tips: [1, '#5FB878']
+									})
+								}
+							});
+						}
+					}
+				});
+
+				table.on('tool(user-table)', function(obj) {
+					if (obj.event === 'remove') {
+						window.remove(obj);
+					} else if (obj.event === 'edit') {
+						window.edit(obj);
+					}
+				});
+
+				table.on('toolbar(user-table)', function(obj) {
+					if (obj.event === 'add') {
+						window.add();
+					} else if (obj.event === 'refresh') {
+						window.refresh();
+					} else if (obj.event === 'batchRemove') {
+						window.batchRemove(obj);
+					}
+				});
+
+				form.on('submit(user-query)', function(data) {
+					table.reload('user-table', {
+						where: data.field
+					})
+					return false;
+				});
+
+				form.on('switch(user-enable)', function(obj) {
+					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
+				});
+
+				window.add = function() {
+					drawer.open({
+						direction: "top",
+						dom: ".layer-top",
+						distance: "30%"
+					});
+				}
+
+				window.edit = function(obj) {
+					layer.msg("修改");
+				}
+
+				window.remove = function(obj) {
+					layer.confirm('确定要删除该用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "remove/" + obj.data['userId'],
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										obj.del();
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.batchRemove = function(obj) {
+					let data = table.checkStatus(obj.config.id).data;
+					if (data.length === 0) {
+						layer.msg("未选中数据", {
+							icon: 3,
+							time: 1000
+						});
+						return false;
+					}
+					let ids = "";
+					for (let i = 0; i < data.length; i++) {
+						ids += data[i].userId + ",";
+					}
+					ids = ids.substr(0, ids.length - 1);
+					layer.confirm('确定要删除这些用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "batchRemove/" + ids,
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										table.reload('user-table');
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.refresh = function(param) {
+					table.reload('user-table');
+				}
+			})
+		</script>
+	</body>
+
+</html>
diff --git a/public/view/document/tag.html b/public/view/document/tag.html
new file mode 100644
index 0000000..f2a5628
--- /dev/null
+++ b/public/view/document/tag.html
@@ -0,0 +1,265 @@
+<!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" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">开发环境</div>
+					<div class="layui-card-body">
+						Tag 标签组件
+					</div>
+				</div>
+			</div>
+
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">主题风格</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag">
+							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							<div class="layui-btn-container tag">
+							    <button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
+							    <button lay-id="22" type="button" class="tag-item">用户管理</button>
+							    <button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
+							    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+							</div>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">动态操作</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-filter="demo" lay-allowclose="true" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item tag-item-normal">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-warm">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								tag.add('demo', {text: '新选项',id: 12})
+								 
+								tag.delete('demo', '44');
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">圆角风格</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-filter="test" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item">商品管理</button>
+						    <button lay-id="55" type="button" class="tag-item">订单管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<div class="layui-btn-container tag" lay-filter="test" lay-newTags="true">
+								    <button lay-id="11" type="button" class="tag-item">网站设置</button>
+								    <button lay-id="22" type="button" class="tag-item">用户管理</button>
+								    <button lay-id="33" type="button" class="tag-item">权限分配</button>
+								    <button lay-id="44" type="button" class="tag-item">商品管理</button>
+								    <button lay-id="55" type="button" class="tag-item">订单管理</button>
+								</div>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">删除功能</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-allowclose="true">
+							<button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+							<button lay-id="55" type="button" class="tag-item tag-item-danger">订单管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<div class="layui-btn-container tag" lay-allowclose="true">
+								    <button lay-id="11" type="button" class="tag-item tag-item-danger">网站设置</button>
+								    <button lay-id="22" type="button" class="tag-item tag-item-danger">用户管理</button>
+								    <button lay-id="33" type="button" class="tag-item tag-item-danger">权限分配</button>
+								    <button lay-id="44" type="button" class="tag-item tag-item-danger">商品管理</button>
+								</div>
+								  
+								tag.on('delete(demo)', function(data) {
+								    console.log('删除');
+								    console.log(this); 
+								    console.log(data.index);
+								    console.log(data.elem);
+								    console.log(data.othis);
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">新建功能</div>
+					<div class="layui-card-body">
+						<div class="layui-btn-container tag" lay-newTag="true">
+							<button lay-id="11" type="button" class="tag-item">网站设置</button>
+							<button lay-id="22" type="button" class="tag-item">用户管理</button>
+							<button lay-id="33" type="button" class="tag-item">权限分配</button>
+							<button lay-id="44" type="button" class="tag-item">商品管理</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+							<div class="layui-btn-container tag" lay-newTags="true">
+							    <button lay-id="11" type="button" class="tag-item">网站设置</button>
+							    <button lay-id="22" type="button" class="tag-item">用户管理</button>
+							    <button lay-id="33" type="button" class="tag-item">权限分配</button>
+							    <button lay-id="44" type="button" class="tag-item">商品管理</button>
+							</div>
+							  
+							tag.on('add(demo)', function(data) {
+							    console.log('新建');
+							    console.log(this); 
+							    console.log(data.index); 
+							    console.log(data.elem); 
+							});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['tag', 'code', 'element'], function() {
+				var $ = layui.jquery,
+					tag = layui.tag; //Tag的切换功能，切换事件监听等，需要依赖tag模块
+
+				layui.code();
+
+				tag.render("test", {
+					skin: 'layui-btn layui-btn-primary layui-btn-sm layui-btn-radius', //标签样式
+					tagText: '<i class="layui-icon layui-icon-add-1"></i>添加标签' //标签添加按钮提示文本
+				});
+
+				var active = {
+					tagAdd: function() {
+						//新增一个Tag项
+						tag.add('demo', {
+							text: '新选项' + (Math.random() * 1000 | 0) //用于演示
+								,
+							id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
+						})
+					},
+					tagDelete: function(othis) {
+						//删除指定Tag项
+						tag.delete('demo', '44'); //删除：“商品管理”
+						othis.addClass('layui-btn-disabled');
+					}
+				};
+
+				$('.site-demo-active').on('click', function() {
+					var othis = $(this),
+						type = othis.data('type');
+					active[type] ? active[type].call(this, othis) : '';
+				});
+
+				tag.on('click(demo)', function(data) {
+					console.log('点击');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+				});
+
+				tag.on('add(demo)', function(data) {
+					console.log('新增');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+					console.log(data.othis); //得到新增的DOM对象
+					//return false; //返回false 取消新增操作； 同from表达提交事件。
+				});
+
+				tag.on('delete(demo)', function(data) {
+					console.log('删除');
+					console.log(this); //当前Tag标签所在的原始DOM元素
+					console.log(data.index); //得到当前Tag的所在下标
+					console.log(data.elem); //得到当前的Tag大容器
+				});
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/tinymce.html b/public/view/document/tinymce.html
new file mode 100644
index 0000000..86bf479
--- /dev/null
+++ b/public/view/document/tinymce.html
@@ -0,0 +1,93 @@
+<!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 rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">
+						开发环境
+					</div>
+					<div class="layui-card-body">
+						Tinymce 文本编辑器
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link href="component/pear/css/pear.css" rel="stylesheet" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-header">富文本编辑器</div>
+					<div class="layui-card-body">
+						<textarea name="" id="edit" cols="30" rows="10"></textarea>
+						<div class="layui-btn-group" style="margin-top: 10px">
+							<button class="pear-btn pear-btn-primary" lay-event="getContent">获取内容</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md12">
+				<div class="layui-collapse">
+					<div class="layui-colla-item">
+						<h2 class="layui-colla-title">显示代码</h2>
+						<div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['tinymce'], function() {
+								    var tinymce = layui.tinymce
+								
+								    var edit = tinymce.render({
+								        elem: "#edit",
+								        height: 400
+								    });
+									
+								    edit.getContent()
+								});
+							</pre>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['tinymce', 'util', 'layer','code','element'], function() {
+				var tinymce = layui.tinymce
+				var util = layui.util;
+				
+				layui.code();
+
+				var edit = tinymce.render({
+					elem: "#edit",
+					height: 400
+				});
+
+				util.event('lay-event', {
+					getContent: function() {
+						console.log(edit.getContent())
+						layer.msg("展开控制台查看")
+					}
+				});
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/toast.html b/public/view/document/toast.html
new file mode 100644
index 0000000..cbbd33e
--- /dev/null
+++ b/public/view/document/toast.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta http-equiv="X-UA-Compatible" content="ie=edge">
+		<title>通知组件</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	</head>
+	<body class="pear-container">
+		<div>
+			<div class="layui-row layui-col-space10">
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">开发环境</div>
+						<div class="layui-card-body">
+							toast 用于 消息通知 场景
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									<link rel="stylesheet" href="component/pear/css/pear.css" />
+									 或
+									<link rel="stylesheet" href="component/pear/css/pear-module/toast.css" />
+									 并
+									<script src="component/layui/layui.js"></script>
+									 并
+									<script src="component/pear/pear.js"></script>
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">消息提醒</div>
+						<div class="layui-card-body">
+							<div>
+								<span>toast.success({title:"成功消息",message:"消息描述"})</span>
+								<br>
+								<br>
+								<span>toast.error({title:"危险消息",message:"消息描述"})</span>
+								<br>
+								<br>
+								<span>toast.warning({title:"警告消息",message:"消息描述"})</span>
+								<br>
+								<br>
+								<span>toast.info({title:"通知消息",message:"消息描述"})</span>
+								<br>
+								<br>
+							</div>
+							<button class="toast-info pear-btn pear-btn-primary">通用消息</button>
+							<button class="toast-success pear-btn pear-btn-success">成功消息</button>
+							<button class="toast-failure pear-btn pear-btn-danger">错误消息</button>
+							<button class="toast-warning pear-btn pear-btn-warming">警告消息</button>
+							<button class="toast-question pear-btn">问题消息</button>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['toast', 'jquery', 'layer', 'code'], function() {
+									    var toast = layui.toast;
+										                         
+									    toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									    
+										toast.info({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									    
+										toast.warning({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									    
+										toast.error({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									    
+										toast.question({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									})
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">
+							不同位置
+						</div>
+						<div class="layui-card-body">
+							<button class="toast-top-left-btn pear-btn">上左</button>
+							<button class="toast-top-center-btn pear-btn">上中</button>
+							<button class="toast-top-right-btn pear-btn">上右</button>
+							<button class="toast-bottom-left-btn pear-btn">下左</button>
+							<button class="toast-bottom-center-btn pear-btn">下中</button>
+							<button class="toast-bottom-right-btn pear-btn">下右</button>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['toast', 'jquery', 'layer', 'code'], function() {
+									    var toast = layui.toast;
+										                         
+									    $(".toast-top-left-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'topLeft'});
+									    })
+									    $(".toast-top-center-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'topCenter'});
+									    })
+									    $(".toast-top-right-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'topRight'});
+									    })
+									    $(".toast-bottom-left-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomLeft'});
+									    })
+									    $(".toast-bottom-center-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomCenter'});
+									    })
+									    $(".toast-bottom-right-btn").click(function(){
+									        toast.success({title: 'Caution',message: 'You forgot important data',position: 'bottomRight'});
+									    })
+									})
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-card">
+						<div class="layui-card-header">
+							消息移除
+						</div>
+						<div class="layui-card-body">
+							<button class="pear-btn" id="closeAll">移除全部</button>
+						</div>
+					</div>
+				</div>
+				<div class="layui-col-md12">
+					<div class="layui-collapse">
+						<div class="layui-colla-item">
+							<h2 class="layui-colla-title">显示代码</h2>
+							<div class="layui-colla-content">
+								<pre class="layui-code" lay-encode="true">
+									layui.use(['toast', 'jquery', 'layer', 'code'], function() {
+									    var toast = layui.toast;
+										                         
+									    toast.destroy();
+									})
+								</pre>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['toast', 'toast', 'jquery', 'layer', 'code', 'element'], function() {
+			var toast = layui.toast;
+			var layer = layui.layer;
+			var $ = layui.jquery;
+			var toast = layui.toast;
+
+			layui.code();
+
+			toast.success({
+				title: 'Caution',
+				message: 'You forgot important data',
+				position: 'topRight'
+			});
+			toast.info({
+				title: 'Caution',
+				message: 'You forgot important data',
+				position: 'topRight'
+			});
+			toast.error({
+				title: 'Caution',
+				message: 'You forgot important data',
+				position: 'topRight'
+			});
+			toast.warning({
+				title: 'Caution',
+				message: 'You forgot important data',
+				position: 'topRight'
+			});
+			toast.question({
+				title: 'Caution',
+				message: 'You forgot important data',
+				position: 'topRight'
+			});
+
+			$(".toast-success").click(function() {
+				toast.success({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+			$(".toast-failure").click(function() {
+				toast.error({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+			$(".toast-warning").click(function() {
+				toast.warning({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+
+			$(".toast-info").click(function() {
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+			$(".toast-question").click(function() {
+				toast.question({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+			
+			$(".toast-top-left-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topLeft'
+				});
+			})
+			$(".toast-top-center-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topCenter'
+				});
+			})
+			$(".toast-top-right-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'topRight'
+				});
+			})
+			
+			$(".toast-bottom-left-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'bottomLeft'
+				});
+			})
+			$(".toast-bottom-center-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'bottomCenter'
+				});
+			})
+			$(".toast-bottom-right-btn").click(function(){
+				toast.info({
+					title: 'Caution',
+					message: 'You forgot important data',
+					position: 'bottomRight'
+				});
+			})
+			
+			$("#closeAll").click(function() {
+				toast.destroy();
+			});
+
+		});
+	</script>
+
+</html>
diff --git a/public/view/document/topBar.html b/public/view/document/topBar.html
new file mode 100644
index 0000000..d57de7d
--- /dev/null
+++ b/public/view/document/topBar.html
@@ -0,0 +1,279 @@
+<!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="../../admin/css/other/console1.css" />
+	</head>
+	<body class="pear-container">
+		<div>
+			<div class="layui-row layui-col-space10">
+			
+					<div class="layui-card">
+						<div class="layui-card-header">动态</div>
+						<div class="layui-card-body">
+							<dl class="layuiadmin-card-status">
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>贤心 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>次等水货 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>七彩枫叶 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 回答问题</p>
+										<span>几秒前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>简 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>2天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>恒宇少年 将 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin </a> 更新至 2.3.0 版本</p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>如花 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>7天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>就眠仪式 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 社区</a> 发布了 <a lay-href="http://fly.layui.com/column/suggest/">建议</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+								<dd>
+									<div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"
+											 src="../../admin/images/avatar.jpg"></a></div>
+									<div>
+										<p>微笑刺客 在 <a lay-href="https://gitee.com/Jmysy/Pear-Admin-Layui">Pear Admin 专区</a> 进行了 <a lay-href="http://fly.layui.com/vipclub/list/layuiadmin/column/quiz/">提问</a></p>
+										<span>8天前</span>
+									</div>
+								</dd>
+							</dl>
+						</div>
+					</div>
+				</div>
+				
+			</div>
+		</div>
+		<!--</div>-->
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['layer', 'element','topBar'], function() {
+				var $ = layui.jquery,
+					layer = layui.layer,
+					element = layui.element;
+
+			});
+		</script>
+	</body>
+</html>
diff --git a/public/view/document/treetable.html b/public/view/document/treetable.html
new file mode 100644
index 0000000..edc0d4d
--- /dev/null
+++ b/public/view/document/treetable.html
@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>树形表格</title>
+    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+</head>
+<body class="pear-container">
+<div class="layui-card">
+    <div class="layui-card-body">
+        <form class="layui-form" action="">
+            <div class="layui-form-item">
+                <label class="layui-form-label">关键字</label>
+                <div class="layui-input-inline">
+                    <input type="text" name="keyword" placeholder="" class="layui-input">
+                </div>
+                <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="power-query">
+                    <i class="layui-icon layui-icon-search"></i>
+                    查询
+                </button>
+                <button type="reset" class="pear-btn pear-btn-md">
+                    <i class="layui-icon layui-icon-refresh"></i>
+                    重置
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<div class="layui-card">
+    <div class="layui-card-body">
+        <table id="power-table" lay-filter="power-table"></table>
+    </div>
+</div>
+
+<script type="text/html" id="power-toolbar">
+    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+        <i class="layui-icon layui-icon-add-1"></i>
+        新增
+    </button>
+    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+        <i class="layui-icon layui-icon-delete"></i>
+        删除
+    </button>
+	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
+	    <i class="layui-icon layui-icon-spread-left"></i>
+	    展开
+	</button>
+	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
+	    <i class="layui-icon layui-icon-shrink-right"></i>
+	    折叠
+	</button>
+	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="reload">
+	    <i class="layui-icon layui-icon-refresh"></i>
+	    重载
+	</button>
+</script>
+
+<script type="text/html" id="power-bar">
+    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+</script>
+
+<script type="text/html" id="power-type">
+    {{#if (d.powerType == '0') { }}
+    <span>目录</span>
+    {{# }else if(d.powerType == '1'){ }}
+    <span>菜单</span>
+    {{# }else if(d.powerType == '2'){ }}
+    <span>按钮</span>
+    {{# } }}
+</script>
+
+<script type="text/html" id="power-enable">
+    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.id == 10003 ? 'true' : 'false' }}">
+</script>
+
+<script type="text/html" id="icon">
+    <i class="layui-icon {{d.icon}}"></i>
+</script>
+
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+    layui.use(['table','form','jquery','treetable'],function () {
+        let table = layui.table;
+        let form = layui.form;
+        let $ = layui.jquery;
+        let treetable = layui.treetable;
+
+        let MODULE_PATH = "../system/operate/";
+
+        treetable.render({
+                treeColIndex: 1,
+                treeSpid: 0,
+                treeIdName: 'powerId',
+                treePidName: 'parentId',
+                skin:'line',
+                treeDefaultClose: true,
+                toolbar:'#power-toolbar',
+                elem: '#power-table',
+                url: '../../admin/data/power.json',
+                page: false,
+                cols: [
+                    [
+                    {type: 'checkbox'},
+                    {field: 'powerName', minWidth: 200, title: '权限名称'},
+                    {field: 'icon', title: '图标',templet:'#icon'},
+                    {field: 'powerType', title: '权限类型',templet:'#power-type'},
+                    {field: 'enable', title: '是否可用',templet:'#power-enable'},
+                    {field: 'sort', title: '排序'},
+                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
+                    ]
+                ]
+        });
+
+        table.on('tool(power-table)',function(obj){
+            if (obj.event === 'remove') {
+                window.remove(obj);
+            } else if (obj.event === 'edit') {
+                window.edit(obj);
+            }
+        })
+
+        table.on('toolbar(power-table)', function(obj){
+            if(obj.event === 'add'){
+                window.add();
+            } else if(obj.event === 'refresh'){
+                window.refresh();
+            } else if(obj.event === 'batchRemove'){
+                window.batchRemove(obj);
+            } else if(obj.event === 'expandAll'){
+				 treetable.expandAll("#power-table");
+			} else if(obj.event === 'foldAll'){
+				 treetable.foldAll("#power-table");
+			} else if(obj.event === 'reload'){
+				 treetable.reload("#power-table");
+			}
+        });
+		
+		form.on('submit(power-query)', function(data) {
+            var keyword = data.field.keyword;
+            treetable.search('#power-table',keyword);
+            return false;
+		});
+	
+        window.add = function(){
+            layer.open({
+                type: 2,
+                title: '新增',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'add.html'
+            });
+        }
+
+        window.edit = function(obj){
+            layer.open({
+                type: 2,
+                title: '修改',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'edit.html'
+            });
+        }
+		
+        window.remove = function(obj){
+            layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
+                layer.close(index);
+                let loading = layer.load();
+                $.ajax({
+                    url: MODULE_PATH+"remove/"+obj.data['powerId'],
+                    dataType:'json',
+                    type:'delete',
+                    success:function(result){
+                        layer.close(loading);
+                        if(result.success){
+                            layer.msg(result.msg,{icon:1,time:1000},function(){
+                                obj.del();
+                            });
+                        }else{
+                            layer.msg(result.msg,{icon:2,time:1000});
+                        }
+                    }
+                })
+            });
+        }
+		
+		window.batchRemove = function(obj) {
+			let data = table.checkStatus(obj.config.id).data;
+			if (data.length === 0) {
+				layer.msg("未选中数据", {
+					icon: 3,
+					time: 1000
+				});
+				return false;
+			}
+			let ids = "";
+			for (let i = 0; i < data.length; i++) {
+				ids += data[i].powerId + ",";
+			}
+			ids = ids.substr(0, ids.length - 1);
+			layer.confirm('确定要删除这些数据', {
+				icon: 3,
+				title: '提示'
+			}, function(index) {
+				layer.close(index);
+				let loading = layer.load();
+				$.ajax({
+					url: MODULE_PATH + "batchRemove/" + ids,
+					dataType: 'json',
+					type: 'delete',
+					success: function(result) {
+						layer.close(loading);
+						if (result.success) {
+							layer.msg(result.msg, {
+								icon: 1,
+								time: 1000
+							}, function() {
+								table.reload('user-table');
+							});
+						} else {
+							layer.msg(result.msg, {
+								icon: 2,
+								time: 1000
+							});
+						}
+					}
+				})
+			});
+		}
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/view/document/watermark.html b/public/view/document/watermark.html
new file mode 100644
index 0000000..5d67a7d
--- /dev/null
+++ b/public/view/document/watermark.html
@@ -0,0 +1,161 @@
+<!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-md12">
+        <div class="layui-card">
+            <div class="layui-card-header">开发环境</div>
+            <div class="layui-card-body">
+                watermark 用于水印叠加
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md12">
+        <div class="layui-collapse">
+            <div class="layui-colla-item">
+                <h2 class="layui-colla-title">显示代码</h2>
+                <div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								<link rel="stylesheet" href="component/pear/css/pear.css" />
+								 并
+								<script src="component/layui/layui.js"></script>
+								 并
+								<script src="component/pear/pear.js"></script>
+							</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md12">
+        <div class="layui-card">
+            <div class="layui-card-header">水印创建</div>
+            <div class="layui-card-body">
+                <button class="btntype1 pear-btn pear-btn-primary">单行水印</button>
+                <button class="btntype2 pear-btn pear-btn-danger">多行水印</button>
+                <button class="btntype3 pear-btn pear-btn-warming">叠加目标</button>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md12">
+        <div class="layui-collapse">
+            <div class="layui-colla-item">
+                <h2 class="layui-colla-title">显示代码</h2>
+                <div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['watermark'], function() {
+								    var watermark = layui.watermark;
+
+    var mark_node=new watermark({
+        content: "单行水印"
+    });
+
+    new watermark({
+        content: "多行水印1<br>多行水印2",
+        height:40
+    });
+
+    new watermark({
+        content: "指定容器上",
+        appendTo:'#water_div',
+    });
+
+								})
+							</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md12">
+        <div class="layui-card">
+            <div class="layui-card-header">指定容器水印</div>
+            <div class="layui-card-body">
+                <div id="water_div"
+                     style="width: 600px;
+								height: 300px;
+								overflow: hidden;
+								position: relative;
+								border: 1px solid gainsboro;
+								background-color: #EEE;
+								margin-top: 20px;
+								display: flex;
+								justify-content: space-around;
+								align-items: center">
+
+            </div>
+        </div>
+    </div>
+</div>
+    <div class="layui-col-md12">
+        <div class="layui-card">
+            <div class="layui-card-header">移除水印</div>
+            <div class="layui-card-body">
+                <button class="btnclose pear-btn pear-btn-primary">销毁水印</button>
+            </div>
+        </div>
+    </div>
+    <div class="layui-col-md12">
+        <div class="layui-collapse">
+            <div class="layui-colla-item">
+                <h2 class="layui-colla-title">显示代码</h2>
+                <div class="layui-colla-content">
+							<pre class="layui-code" lay-encode="true">
+								layui.use(['watermark'], function() {
+								    var popup = layui.popup;
+                                    mark_node.destroy();
+								})
+							</pre>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+    layui.use(['watermark', 'jquery', 'code'], function() {
+        var popup = layui.popup;
+        var $ = layui.jquery;
+        var watermark = layui.watermark;
+        layui.code();
+
+        var mark_node = null;
+
+        function remove_water_marker(){
+            mark_node && mark_node.destroy();
+            mark_node = null;
+        }
+
+
+        $(".btntype1").click(function() {
+            remove_water_marker();
+            mark_node=new watermark({
+                content: "单行水印"
+            });
+        })
+        $(".btntype2").click(function() {
+            remove_water_marker();
+            mark_node =new watermark({
+                content: "多行水印1<br>第二行长多行水印2",
+                height:40
+            });
+        })
+        $(".btntype3").click(function() {
+            remove_water_marker();
+            mark_node = new watermark({
+                content: "指定目标上",
+                appendTo:'#water_div',
+            });
+        })
+        $(".btnclose").click(function() {
+            remove_water_marker();
+        })
+
+    })
+</script>
+</html>
diff --git a/public/view/echarts/column.html b/public/view/echarts/column.html
new file mode 100644
index 0000000..4175261
--- /dev/null
+++ b/public/view/echarts/column.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>条状图表</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	    <link rel="stylesheet" href="../../admin/css/other/result.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-body">
+						<div id="column1" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="column2" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="column3" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="column4" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script src="script/column1.js"></script>
+		<script src="script/column2.js"></script>
+		<script src="script/column3.js"></script>
+		<script src="script/column4.js"></script>
+	</body>
+</html>
diff --git a/public/view/echarts/line.html b/public/view/echarts/line.html
new file mode 100644
index 0000000..f8080e9
--- /dev/null
+++ b/public/view/echarts/line.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>折线图表</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	    <link rel="stylesheet" href="../../admin/css/other/result.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-body">
+						<div id="line1" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="line2" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="line3" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="line4" style="min-height:400px;"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script src="script/line1.js"></script>
+		<script src="script/line2.js"></script>
+		<script src="script/line3.js"></script>
+		<script src="script/line4.js"></script>
+	</body>
+</html>
diff --git a/public/view/echarts/script/column1.js b/public/view/echarts/script/column1.js
new file mode 100644
index 0000000..db5e817
--- /dev/null
+++ b/public/view/echarts/script/column1.js
@@ -0,0 +1,137 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+    var column1 = echarts.init(document.getElementById('column1'),null, {
+        width: 600,
+        height: 400
+    });
+option = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: { 
+            type: 'shadow' ,
+            color: '#fff',
+            fontSize: '26'
+        }
+    },
+    legend: {
+        top:'5%',
+        right:'10%',
+        data: ['猕猴桃', '香蕉'],
+        fontSize:12,
+        color:'#808080',
+        icon:'rect'
+    },
+    grid: {
+        top:60,
+        left:50,
+        bottom:60,
+        right:60
+    },
+    xAxis: [{
+        type: 'category',
+        axisTick:{
+            show:false
+        },
+        axisLine:{
+            show:false
+        },
+        axisLabel:{
+            color:'#4D4D4D',
+            fontSize:14,
+            margin:21,
+            fontWeight:'bold'
+        },
+        data: ['第一周', '第二周', '第三周', '第四周'],
+    
+    }],
+    yAxis: [{
+        name:'单位：万',
+        nameTextStyle:{
+            color:'#808080',
+            fontSize:12,
+            padding:[0, 0, 0, -5]
+        },
+        max: function(value) {
+            if(value.max<5){
+                return 5
+            }else{
+                return value.max
+            }
+        },
+        type: 'value',
+        axisLine:{
+            show:false
+        },
+        axisLabel:{
+            color:'#808080',
+            fontSize:12,
+            margin:5
+        },
+        splitLine:{
+            show:false
+        },
+        axisTick:{
+            show:false
+        }
+    }],
+    series: [
+        {
+            name: '猕猴桃',
+            type: 'bar',
+            label:{
+                show:true,
+                position:'top',
+                fontSize:14,
+                color:'#3DC3F0',
+                fontWeight:'bold'
+            },
+            barMaxWidth:60,           
+            color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                    offset: 0, color: '#3DC3F0' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#CCF2FF' // 100% 处的颜色
+                }]
+            },            
+            data: [60, 110, 180, 100]
+        }, 
+        {
+            name: '香蕉',
+            type: 'bar',
+                        label:{
+                show:true,
+                position:'top',
+                fontSize:14,
+                color:'#3D8BF0',
+                fontWeight:'bold'
+            },
+            barMaxWidth:60,            
+            color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                    offset: 0, color: '#3D8BF0' // 0% 处的颜色
+                }, {
+                    offset: 1, color: '#CCE2FF' // 100% 处的颜色
+                }]
+            },            
+            data: [90, 130, 170, 130]
+        }
+    ]
+};
+
+    column1.setOption(option);
+
+    window.onresize = function() {
+        column1.resize();
+    }
+    
+})
diff --git a/public/view/echarts/script/column2.js b/public/view/echarts/script/column2.js
new file mode 100644
index 0000000..6393cce
--- /dev/null
+++ b/public/view/echarts/script/column2.js
@@ -0,0 +1,73 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+	var column2 = echarts.init(document.getElementById('column2'),null, {
+		width: 600,
+		height: 400
+	});
+
+	var data = [1000, 600, 500, 300];
+	option = {
+		backgroundColor: '#ffffff',
+		title: {
+			text: 'ETC交易成功率',
+			left: 'center',
+			top: 2,
+			fontSize: 20
+		},
+		color: ['#fed46b','#2194ff', ],
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: { // 坐标轴指示器，坐标轴触发有效
+				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+			}
+		},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '10%',
+			containLabel: true
+		},
+		legend: {
+			left: 'center',
+			bottom: '2%',
+			data: ['去年', '今年', ]
+		},
+		xAxis: [{
+			type: 'category',
+			data: ['09-22', '09-22', '09-22', '09-22', '09-22', '09-22', '09-22'],
+			axisTick: {
+				alignWithLabel: true
+			}
+		}],
+		yAxis: [{
+			type: 'value'
+		}],
+		barMaxWidth: '30',
+		label:{
+			show:true,
+			position:'top',
+			formatter:function(params){
+				return params.value+'%'
+			}
+		},
+		series: [
+	
+			{
+				name: '去年',
+				type: 'bar',
+				data: [90, 52, 90, 80, 90, 70, 90]
+			},
+			{
+				name: '今年',
+				type: 'bar',
+				data: [10, 52, 90, 70, 90, 70, 90]
+			},
+		]
+	};
+	column2.setOption(option);
+
+	window.onresize = function() {
+		column2.resize();
+	}
+	
+})
diff --git a/public/view/echarts/script/column3.js b/public/view/echarts/script/column3.js
new file mode 100644
index 0000000..897e495
--- /dev/null
+++ b/public/view/echarts/script/column3.js
@@ -0,0 +1,120 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+    var column3 = echarts.init(document.getElementById('column3'),null, {
+        width: 600,
+        height: 400
+    });
+
+    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+    
+option = {
+    backgroundColor: '#fff',
+    tooltip: {
+        trigger: "axis",
+        padding: [8, 10],
+        backgroundColor: 'rgba(255,255,255,0.5)',
+        axisPointer: {
+            type: "shadow",
+            color: "#fff"
+        }
+    },
+    legend: {
+        data: ['新开会员', '激活会员', '关闭会员'],
+        align: 'left',
+        right: 0,
+        
+            color: "#333",
+            fontSize: 14,
+            fontWeight: 200,
+        
+        itemWidth: 14,
+        itemHeight: 14,
+        itemGap: 35
+    },
+    grid: {
+        left: '0',
+        right: '0',
+        bottom: '8%',
+        top: '15%',
+        containLabel: true
+    },
+    label: {
+        show: true,
+        position: 'top',
+        color: '#333',
+        fontSize: 14,
+        fontWeight: 700
+    },
+    xAxis: [{
+        type: 'category',
+        offset: 10,
+        data: ['团队1', '团队2', '团队3', '团队4'],
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            show: true,            
+            color: "#333",
+            fontSize: 16,
+            fontWeight: 200
+        
+        },
+    }],
+    yAxis: [{
+        type: 'value',
+        axisLabel: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLine: {
+            show: false
+        },
+        splitLine: {
+            show: false
+        }
+    }],
+    series: [{
+        name: '新开会员',
+        type: 'bar',
+        data: [20, 34, 18, 14, 16],
+        barWidth: 22, //柱子宽度
+        barGap: 1, //柱子之间间距
+        itemStyle: {
+            color: '#0071c8',
+            opacity: 1,
+        }
+    }, {
+        name: '激活会员',
+        type: 'bar',
+        data: [10, 24, 5, 24, 16],
+        barWidth: 22,
+        barGap: 1,
+        itemStyle: {
+            color: '#fdc508',
+            opacity: 1,
+        }
+    }, {
+        name: '关闭会员',
+        type: 'bar',
+        data: [7, 24, 18, 20, 6],
+        barWidth: 22,
+        barGap: 1,
+        itemStyle: {
+            color: '#dfeafc',
+            opacity: 1,
+        }
+    }]
+};
+    
+    column3.setOption(option);
+
+    window.onresize = function() {
+        column3.resize();
+    }
+    
+})
diff --git a/public/view/echarts/script/column4.js b/public/view/echarts/script/column4.js
new file mode 100644
index 0000000..6cd871f
--- /dev/null
+++ b/public/view/echarts/script/column4.js
@@ -0,0 +1,84 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+	var column4 = echarts.init(document.getElementById('column4'),null, {
+		width: 600,
+		height: 400
+	});
+	option = {
+		backgroundColor:'#fff',
+		title:{
+			text:"描边柱状图",
+			top:10,
+			left:15,			
+			color:"#35598d",
+			fontSize:16,
+			fontWeight:'normal'			
+		},
+		tooltip: {
+			trigger: 'axis',
+			formatter:'{b}：{c}',
+		},
+		grid: {
+			left: '5%',
+			right: '6%',
+			bottom: '3%',
+			top: '20%',
+			containLabel: true
+		},
+		xAxis :{
+			type : 'category',
+			data : ['策略1','策略2','策略3','策略4','策略5','策略6','策略7','策略8','策略9'],
+			axisLabel:{          //坐标轴字体颜色
+				color: '#9eaaba'
+			},
+			axisLine:{
+				lineStyle:{
+					color:"#e5e5e5"
+				}
+			}, 
+			axisTick:{       //y轴刻度线
+			show:false
+			},
+			splitLine:{    //网格
+				show: false,
+			}
+		},
+		yAxis :{
+			type : 'value',
+			axisLabel:{        //坐标轴字体颜色
+				color: '#9eaaba'
+			},
+			axisLine:{
+				show:false,
+			},
+			axisTick:{       //y轴刻度线
+			show:false
+			},
+			splitLine:{    //网格
+				show: true,
+				lineStyle:{
+					color:'#dadde4',
+					type:"dashed" //坐标网线类型
+				}
+			}
+		},
+		series:{
+			name:'',
+			type:'bar',
+			barWidth : '40%',  //柱子宽度
+			itemStyle:{  //柱子颜色
+				borderWidth: 2,
+				borderColor: 'rgb(79, 116, 223)',
+				color:'rgba(79, 116, 223, .3)',
+			},
+			data:[320, 332, 301, 334, 390, 330, 320, 230, 156]
+		}
+	};
+	
+	column4.setOption(option);
+
+	window.onresize = function() {
+		column4.resize();
+	}
+	
+})
diff --git a/public/view/echarts/script/line1.js b/public/view/echarts/script/line1.js
new file mode 100644
index 0000000..1a0ce7b
--- /dev/null
+++ b/public/view/echarts/script/line1.js
@@ -0,0 +1,236 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+	var line2 = echarts.init(document.getElementById('line2'),null, {
+		width: 600,
+		height: 400
+	});
+
+	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+	option = {
+		backgroundColor: '#fff',
+		title: {
+			text: '全国6月销售统计',
+			fontSize: 12,
+			fontWeight: 400,
+			left: 'center',
+			top: '5%'
+		},
+		legend: {
+			icon: 'circle',
+			top: '5%',
+			right: '5%',
+			itemWidth: 6,
+			itemGap: 20,
+			color: '#556677'
+		},
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				label: {
+					show: true,
+					backgroundColor: '#fff',
+					color: '#556677',
+					borderColor: 'rgba(0,0,0,0)',
+					shadowColor: 'rgba(0,0,0,0)',
+					shadowOffsetY: 0
+				},
+				lineStyle: {
+					width: 0
+				}
+			},
+			backgroundColor: '#fff',
+			color: '#5c6c7c',
+			padding: [10, 10],
+			extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
+		},
+		grid: {
+			top: '15%'
+		},
+		xAxis: [{
+			type: 'category',
+			data: ['北京', '上海', '广州', '深圳', '香港', '澳门', '台湾'],
+			axisLine: {
+				lineStyle: {
+					color: '#DCE2E8'
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLabel: {
+				interval: 0,
+				color: '#556677',
+				// 默认x轴字体大小
+				fontSize: 12,
+				// margin:文字到x轴的距离
+				margin: 15
+			},
+			axisPointer: {
+				label: {
+					// padding: [11, 5, 7],
+					padding: [0, 0, 10, 0],
+
+					// 这里的margin和axisLabel的margin要一致!
+					margin: 15,
+					// 移入时的字体大小
+					fontSize: 12,
+					backgroundColor: {
+						type: 'linear',
+						x: 0,
+						y: 0,
+						x2: 0,
+						y2: 1,
+						colorStops: [{
+							offset: 0,
+							color: '#fff' // 0% 处的颜色
+						}, {
+							// offset: 0.9,
+							offset: 0.86,
+
+							color: '#fff' // 0% 处的颜色
+						}, {
+							offset: 0.86,
+							color: '#33c0cd' // 0% 处的颜色
+						}, {
+							offset: 1,
+							color: '#33c0cd' // 100% 处的颜色
+						}],
+						global: false // 缺省为 false
+					}
+				}
+			},
+			boundaryGap: false
+		}],
+		yAxis: [{
+			type: 'value',
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#DCE2E8'
+				}
+			},
+			axisLabel: {
+				color: '#556677',
+			},
+			splitLine: {
+				show: false
+			}
+		}, {
+			type: 'value',
+			position: 'right',
+			axisTick: {
+				show: false
+			},
+			axisLabel: {
+				color: '#556677',
+				formatter: '{value}'
+			},
+			axisLine: {
+				show: true,
+				lineStyle: {
+					color: '#DCE2E8'
+				}
+			},
+			splitLine: {
+				show: false
+			}
+		}],
+		series: [{
+				name: 'Adidas',
+				type: 'line',
+				data: [10, 10, 30, 12, 15, 3, 7],
+				symbolSize: 1,
+				symbol: 'circle',
+				smooth: true,
+				yAxisIndex: 0,
+				showSymbol: true,
+				lineStyle: {
+					width: 5,
+					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+							offset: 0,
+							color: '#9effff'
+						},
+						{
+							offset: 1,
+							color: '#9E87FF'
+						}
+					]),
+					shadowColor: 'rgba(158,135,255, 0.3)',
+					shadowBlur: 10,
+					shadowOffsetY: 20
+				},
+				itemStyle: {
+					color: colorList[0],
+					borderColor: colorList[0]
+				}
+			}, {
+				name: 'Nike',
+				type: 'line',
+				data: [5, 12, 11, 14, 25, 16, 10],
+				symbolSize: 1,
+				symbol: 'circle',
+				smooth: true,
+				yAxisIndex: 0,
+				showSymbol: true,
+				lineStyle: {
+					width: 5,
+					color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
+							offset: 0,
+							color: '#73DD39'
+						},
+						{
+							offset: 1,
+							color: '#73DDFF'
+						}
+					]),
+					shadowColor: 'rgba(115,221,255, 0.3)',
+					shadowBlur: 10,
+					shadowOffsetY: 20
+				},
+				itemStyle: {					
+					color: colorList[1],
+					borderColor: colorList[1]					
+				}
+			},
+			{
+				name: '老北京布鞋',
+				type: 'line',
+				data: [150, 120, 170, 140, 500, 160, 110],
+				symbolSize: 1,
+				yAxisIndex: 1,
+				symbol: 'circle',
+				smooth: true,
+				showSymbol: true,
+				lineStyle: {
+					width: 5,
+					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+							offset: 0,
+							color: '#fe9a'
+						},
+						{
+							offset: 1,
+							color: '#fe9a8b'
+						}
+					]),
+					shadowColor: 'rgba(254,154,139, 0.3)',
+					shadowBlur: 10,
+					shadowOffsetY: 20
+				},
+				itemStyle: {					
+					color: colorList[2],
+					borderColor: colorList[2]					
+				}
+			}
+		]
+	};
+
+	line2.setOption(option);
+
+	window.onresize = function() {
+		line2.resize();
+	}
+	
+})
diff --git a/public/view/echarts/script/line2.js b/public/view/echarts/script/line2.js
new file mode 100644
index 0000000..c0bb531
--- /dev/null
+++ b/public/view/echarts/script/line2.js
@@ -0,0 +1,148 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+	var line1 = echarts.init(document.getElementById('line1'),null, {
+		width: 600,
+		height: 400
+	});
+
+	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+	option = {
+		
+				backgroundColor: '#fff',
+				tooltip: {
+					show: false
+				},
+				grid: {
+					top: '10%',
+					bottom: '6%',
+					left: '6%',
+					right: '6%',
+					containLabel: true
+				},
+				xAxis: [{
+					type: 'category',
+					boundaryGap: false,
+					axisLine: {
+						show: false
+					},
+					axisTick: {
+						show: false
+					},
+					axisLabel: {
+						margin: 10,	                    
+						fontSize: 14,
+						color: 'rgba(#999)'	                   
+					},
+					splitLine: {
+						show: true,
+						lineStyle: {
+							color: '#939ab6',
+							opacity: .15
+						}
+					},
+					data: ['10:00', '10:10', '10:10', '10:30', '10:40', '10:50']
+				},],
+				yAxis: [{
+					type: 'value',
+					offset: 15,
+					max: 100,
+					min: 0,
+					axisTick: {
+						show: false
+					},
+					axisLine: {
+						show: false
+					},
+					axisLabel: {
+						margin: 10,	                    
+						fontSize: 14,
+						color: '#999'
+					
+					},
+					splitLine: {
+						show: false
+					}
+	
+				}],
+				series: [{
+					name: '2',
+					type: 'line',
+					z: 3,
+					showSymbol: false,
+					smoothMonotone: 'x',
+					lineStyle: {
+							width: 3,
+							color: {
+								type: 'linear',
+								x: 0,
+								y: 0,
+								x2: 0,
+								y2: 1,
+								colorStops: [{
+									offset: 0, color: 'rgba(59,102,246)' // 0% 处的颜色
+								}, {
+									offset: 1, color: 'rgba(118,237,252)' // 100% 处的颜色
+								}]
+							},
+							shadowBlur: 4,
+							shadowColor: 'rgba(69,126,247,.2)',
+							shadowOffsetY: 4
+					},
+					areaStyle: {	                    
+						color: {
+							type: 'linear',
+							x: 0,
+							y: 0,
+							x2: 0,
+							y2: 1,
+							colorStops: [{
+								offset: 0, color: 'rgba(227,233,250,.9)' // 0% 处的颜色
+							}, {
+								offset: 1, color: 'rgba(248,251,252,.3)' // 100% 处的颜色
+							}]
+						}	                   
+					},
+					smooth: true,
+					data: [20, 56, 17, 40, 68, 42]
+				},{
+					name: '1',
+					type: 'line',
+					showSymbol: false,
+					smoothMonotone: 'x',
+	
+					lineStyle: {
+							width: 3,
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: 'rgba(255,84,108)'
+							}, {
+								offset: 1,
+								color: 'rgba(252,140,118)'
+							}], false),
+							shadowBlur: 4,
+							shadowColor: 'rgba(253,121,128,.2)',
+							shadowOffsetY: 4
+					},
+					areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+								offset: 0,
+								color: 'rgba(255,84,108,.15)'
+							}, {
+								offset: 1,
+								color: 'rgba(252,140,118,0)'
+							}], false),
+					},
+					smooth: true,
+					data: [20, 71, 8, 50, 57, 32]
+				}
+			]
+			
+	};
+
+	line1.setOption(option);
+
+	window.onresize = function() {
+		line1.resize();
+	}
+	
+})
diff --git a/public/view/echarts/script/line3.js b/public/view/echarts/script/line3.js
new file mode 100644
index 0000000..12bfbc7
--- /dev/null
+++ b/public/view/echarts/script/line3.js
@@ -0,0 +1,102 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+
+	var line3 = echarts.init(document.getElementById('line3'),null, {
+		width: 600,
+		height: 400
+	});
+
+	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+
+	option = {
+		backgroundColor: '#fff',
+		title: {
+			text: "告警数",
+			left: "18px",
+			top: "0",			
+			color: "#999",
+			fontSize: 12,
+			fontWeight: '400'			
+		},
+		color: ['#73A0FA', '#73DEB3', '#FFB761'],
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'cross',
+				crossStyle: {
+					color: '#999'
+				},
+				lineStyle: {
+					type: 'dashed'
+				}
+			}
+		},
+		grid: {
+			left: '25',
+			right: '25',
+			bottom: '24',
+			top: '75',
+			containLabel: true
+		},
+		legend: {
+			data: ['上周', '本周'],
+			orient: 'horizontal',
+			icon: "rect",
+			show: true,
+			left: 20,
+			top: 25,
+		},
+		xAxis: {
+			type: 'category',
+			data: ['爱立信端局', '中兴端局', '爱立信HSS', '中兴HSS', '华为HSS', '华为智能网', '中兴VIMS'],
+			splitLine: {
+				show: false
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: false
+			},
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				color: '#999',				
+				fontSize: 12				
+			},
+			splitLine: {
+				show: true,
+				lineStyle: {
+					color: '#F3F4F4'
+				}
+			},
+			axisTick: {
+				show: false
+			},
+			axisLine: {
+				show: false
+			},
+		},
+		series: [{
+				name: '上周',
+				type: 'line',
+				smooth: true,
+				data: [1800, 1000, 2000, 1000, 500, 100, 1200]
+			},
+			{
+				name: '本周',
+				type: 'line',
+				smooth: true,
+				data: [1700, 999, 1100, 899, 199, 99, 1000]
+			}
+		]
+	};
+
+	line3.setOption(option);
+
+	window.onresize = function() {
+		line3.resize();
+	}
+	
+})
diff --git a/public/view/echarts/script/line4.js b/public/view/echarts/script/line4.js
new file mode 100644
index 0000000..19e9f79
--- /dev/null
+++ b/public/view/echarts/script/line4.js
@@ -0,0 +1,167 @@
+layui.use(['echarts'], function() {
+	let echarts = layui.echarts;
+
+	var line4 = echarts.init(document.getElementById('line4'),null, {
+		width: 600,
+		height: 400
+	});
+
+	const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
+	option = {
+		title: {
+			text: '用电量'
+		},
+		tooltip: {
+			trigger: 'axis'
+		},
+		legend: {
+			data: ['2018', '2019']
+		},
+		grid: {
+			left: '3%',
+			right: '4%',
+			bottom: '3%',
+			containLabel: true
+		},
+		toolbox: {
+			feature: {
+				saveAsImage: {}
+			}
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,//坐标轴两边留白
+			data: ['12201', '12202', '12203','12204','12301','12302','12303','12304','12401', '12402', '12403','12404'],
+			axisLabel: { //坐标轴刻度标签的相关设置。
+				interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
+			//	margin:15,
+				
+				color: '#1B253A',
+				fontStyle: 'normal',
+				fontFamily: '微软雅黑',
+				fontSize: 12,
+				
+				formatter:function(params) {
+					var newParamsName = "";
+					var paramsNameNumber = params.length;
+					var provideNumber = 4;  //一行显示几个字
+					var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+					if (paramsNameNumber > provideNumber) {
+						for (var p = 0; p < rowNumber; p++) {
+							var tempStr = "";
+							var start = p * provideNumber;
+							var end = start + provideNumber;
+							if (p == rowNumber - 1) {
+								tempStr = params.substring(start, paramsNameNumber);
+							} else {
+								tempStr = params.substring(start, end) + "\n";
+							}
+							newParamsName += tempStr;
+						}
+	
+					} else {
+						newParamsName = params;
+					}
+					return newParamsName
+				},
+				//rotate:50,
+			},
+			axisTick:{//坐标轴刻度相关设置。
+				show: false,
+			},
+			axisLine:{//坐标轴轴线相关设置
+				lineStyle:{
+					color:'#E5E9ED',
+					// opacity:0.2
+				}
+			},
+			splitLine: { //坐标轴在 grid 区域中的分隔线。
+				show: true,
+				lineStyle: {
+					color: '#E5E9ED',
+				// 	opacity:0.1
+				}
+			}
+		},
+		yAxis: [
+			{
+				type: 'value',
+				splitNumber: 5,
+				axisLabel: {
+					
+					color: '#a8aab0',
+					fontStyle: 'normal',
+					fontFamily: '微软雅黑',
+					fontSize: 12
+					
+				},
+				axisLine:{
+					show: false
+				},
+				axisTick:{
+					show: false
+				},
+				splitLine: {
+					show: true,
+					lineStyle: {
+						color: '#E5E9ED',
+					// 	opacity:0.1
+					}
+				}
+	
+			}
+		],
+		series: [
+			{
+				name: '2018',
+				type: 'line',
+				itemStyle: {			       
+					color:'#3A84FF',
+					lineStyle: {
+						color: "#3A84FF",
+						width:1
+					},
+					areaStyle: { 
+						color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+							offset: 0,
+							color: 'rgba(58,132,255,0)'
+						}, {
+							offset: 1,
+							color: 'rgba(58,132,255,0.35)'
+						}]),
+					}			        
+				},
+				data: [ 1, 2, 3, 3, 5, 6, 5, 3, 6, 5, 5, 4]
+			},
+			{
+				name: '2019',
+				type: 'line',
+				itemStyle: {			       
+					color:'rgba(255,80,124,1)',
+					lineStyle: {
+						color: "rgba(255,80,124,1)",
+						width:1
+					},
+					areaStyle: { 
+						color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+							offset: 0,
+							color: 'rgba(255,80,124,0)'
+						}, {
+							offset: 1,
+							color: 'rgba(255,80,124,0.35)'
+						}]),
+					}			        
+				},
+				data: [9, 5,7,8,6,7,8,7,7,6,8,6]
+			}
+		]
+	};
+
+
+	line4.setOption(option);
+
+	window.onresize = function() {
+		line4.resize();
+	}
+	
+})
diff --git a/public/view/error/403.html b/public/view/error/403.html
new file mode 100644
index 0000000..36d1e15
--- /dev/null
+++ b/public/view/error/403.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+		<link href="../../admin/css/other/error.css" rel="stylesheet" />
+	</head>
+	<body>
+		<div class="content">
+			<img src="../../admin/images/403.svg" alt="">
+			<div class="content-r">
+				<h1>403</h1>
+				<p>抱歉，你无权访问该页面</p>
+				<button class="pear-btn pear-btn-primary">返回首页</button>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/error/404.html b/public/view/error/404.html
new file mode 100644
index 0000000..b13115a
--- /dev/null
+++ b/public/view/error/404.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+		<link href="../../admin/css/other/error.css" rel="stylesheet" />
+	</head>
+	<body>
+		<div class="content">
+			<img src="../../admin/images/404.svg" alt="">
+			<div class="content-r">
+				<h1>404</h1>
+				<p>抱歉，你访问的页面不存在或仍在开发中</p>
+				<button class="pear-btn pear-btn-primary">返回首页</button>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/error/500.html b/public/view/error/500.html
new file mode 100644
index 0000000..505d41b
--- /dev/null
+++ b/public/view/error/500.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+		<link href="../../admin/css/other/error.css" rel="stylesheet" />
+	</head>
+	<body>
+		<div class="content">
+			<img src="../../admin/images/500.svg" alt="">
+			<div class="content-r">
+				<h1>500</h1>
+				<p>抱歉，服务器出错了</p>
+				<button class="pear-btn pear-btn-primary">返回首页</button>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/result/error.html b/public/view/result/error.html
new file mode 100644
index 0000000..d7abae6
--- /dev/null
+++ b/public/view/result/error.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>失败</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	    <link rel="stylesheet" href="../../admin/css/other/result.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<div class="result">
+					<div class="error">
+					<svg viewBox="64 64 896 896" data-icon="close-circle" width="80px" height="80px" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 0 0-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
+				    </div>
+					<h2 class="title">提交失败</h2>
+					<p class="desc">
+						请核对并修改以下信息后，再重新提交。如果仅是简单操作，使用 Message 全局提示反馈即可。
+						本文字区域可以展示简单的补充说明，如果有类似展示
+						“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
+					</p>
+					<div class="content">
+						
+					</div>
+					<div class="action">
+						<button class="pear-btn pear-btn-primary">返回修改</button>
+						&nbsp;&nbsp;&nbsp;
+						<button class="pear-btn">返回首页</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['jquery'],function(){
+				setTimeout(function(){
+					top.layui.tab.delCurrentTabByElem("content",function(){
+						/// 回调
+					})
+				},3000)
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/result/success.html b/public/view/result/success.html
new file mode 100644
index 0000000..5a2c7d4
--- /dev/null
+++ b/public/view/result/success.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>成功</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	    <link rel="stylesheet" href="../../admin/css/other/result.css" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<div class="result">
+					<div class="success">
+					<svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg>
+				    </div>
+					<h2 class="title">提交成功</h2>
+					<p class="desc">
+						提交结果页用于反馈一系列操作任务的处理结果，
+						如果仅是简单操作，使用 Message 全局提示反馈即可。
+						本文字区域可以展示简单的补充说明，如果有类似展示
+						“单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。
+					</p>
+					<div class="content">
+						
+					</div>
+					<div class="action">
+						<button class="pear-btn pear-btn-primary">再次申请</button>
+						&nbsp;&nbsp;&nbsp;
+						<button class="pear-btn">返回首页</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+	</body>
+</html>
diff --git a/public/view/system/deptment.html b/public/view/system/deptment.html
new file mode 100644
index 0000000..3114717
--- /dev/null
+++ b/public/view/system/deptment.html
@@ -0,0 +1,289 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>部门管理</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+		<link rel="stylesheet" href="../../admin/css/other/department.css"/>
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<form class="layui-form" action="">
+					<div class="layui-form-item">
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">用户名</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">性别</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">邮箱</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+								<i class="layui-icon layui-icon-search"></i>
+								查询
+							</button>
+							<button type="reset" class="pear-btn pear-btn-md">
+								<i class="layui-icon layui-icon-refresh"></i>
+								重置
+							</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="layui-row layui-col-space15">
+			<div class="layui-col-md3">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<div id="organizationTreeContent" style="overflow: auto">
+							<ul id="organizationTree" class="dtree organizationTree" data-id="9527"></ul>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md9">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<table id="organization-table" lay-filter="organization-table"></table>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<script type="text/html" id="organization-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+			<i class="layui-icon layui-icon-add-1"></i>
+			新增
+		</button>
+		<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+			<i class="layui-icon layui-icon-delete"></i>
+			删除
+		</button>
+	</script>
+
+		<script type="text/html" id="organization-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
+				class="layui-icon layui-icon-edit"></i></button>
+		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
+				class="layui-icon layui-icon-delete"></i></button>
+	    </script>
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['table', 'form', 'jquery', 'dtree'], function() {
+				let table = layui.table;
+				let form = layui.form;
+				let $ = layui.jquery;
+				let dtree = layui.dtree;
+
+				let MODULE_PATH = "operate/";
+
+				let cols = [
+					[{
+							type: 'checkbox'
+						},
+						{
+							title: '名称',
+							field: 'name',
+							align: 'center'
+						},
+						{
+							title: '人数',
+							field: 'userCount',
+							align: 'center'
+						},
+						{
+							title: '位置',
+							field: 'location',
+							align: 'center'
+						},
+						{
+							title: '负责人',
+							field: 'leader',
+							align: 'center'
+						},
+						{
+							title: '操作',
+							toolbar: '#organization-bar',
+							align: 'center',
+							width: 130
+						}
+					]
+				]
+
+				var DTree = dtree.render({
+					elem: "#organizationTree",
+					//data: data,
+					initLevel: "2", //默认展开层级为1
+					line: true, // 有线树
+					ficon: ["1", "-1"], // 设定一级图标样式。0表示方形加减图标，8表示小圆点图标
+					icon: ["0", "2"], // 设定二级图标样式。0表示文件夹图标，5表示叶子图标
+					method: 'get',
+					url: "../../admin/data/organizationtree.json"
+				});
+
+				table.render({
+					elem: '#organization-table',
+					url: '../../admin/data/organization.json',
+					height: 'full-150',
+					page: true,
+					cols: cols,
+					skin: 'line',
+					toolbar: '#organization-toolbar',
+					defaultToolbar: [{
+						title: '刷新',
+						layEvent: 'refresh',
+						icon: 'layui-icon-refresh',
+					}, 'filter', 'print', 'exports']
+				});
+
+				// 绑定节点点击事件
+				dtree.on("node(organizationTree)", function(obj) {
+					if (!obj.param.leaf) {
+						var $div = obj.dom;
+						DTree.clickSpread($div); //调用内置函数展开节点
+					} else {
+						layer.msg("叶子节点就不展开了,刷新右侧列表");
+						table.reload("organization-table");
+					}
+				});
+
+				table.on('tool(organization-table)', function(obj) {
+					if (obj.event === 'remove') {
+						window.remove(obj);
+					} else if (obj.event === 'edit') {
+						window.edit(obj);
+					}
+				});
+
+				table.on('toolbar(organization-table)', function(obj) {
+					if (obj.event === 'add') {
+						window.add();
+					} else if (obj.event === 'refresh') {
+						window.refresh();
+					} else if (obj.event === 'batchRemove') {
+						window.batchRemove(obj);
+					}
+				});
+
+				form.on('submit(organization-query)', function(data) {
+					table.reload('organization-table', {
+						where: data.field
+					})
+					return false;
+				});
+
+				window.add = function() {
+					layer.open({
+						type: 2,
+						title: '新增',
+						shade: 0.1,
+						area: ['500px', '400px'],
+						content: MODULE_PATH + 'add.html'
+					});
+				}
+
+				window.edit = function(obj) {
+					layer.open({
+						type: 2,
+						title: '修改',
+						shade: 0.1,
+						area: ['500px', '400px'],
+						content: MODULE_PATH + 'edit.html'
+					});
+				}
+
+				window.remove = function(obj) {
+					layer.confirm('确定要删除该用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "remove/" + obj.data['organizationId'],
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										obj.del();
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.batchRemove = function(obj) {
+					let data = table.checkStatus(obj.config.id).data;
+					if (data.length === 0) {
+						layer.msg("未选中数据", {
+							icon: 3,
+							time: 1000
+						});
+						return false;
+					}
+					let ids = "";
+					for (let i = 0; i < data.length; i++) {
+						ids += data[i].organizationId + ",";
+					}
+					ids = ids.substr(0, ids.length - 1);
+					layer.confirm('确定要删除这些用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "batchRemove/" + ids,
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										table.reload('organization-table');
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.refresh = function(param) {
+					table.reload('organization-table');
+				}
+			})
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/public/view/system/dict.html b/public/view/system/dict.html
new file mode 100644
index 0000000..3a87150
--- /dev/null
+++ b/public/view/system/dict.html
@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>数据字典</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-row layui-col-space10">
+			<div class="layui-col-md12">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<form class="layui-form" action="">
+							<div class="layui-form-item">
+								<label class="layui-form-label">字典名称</label>
+								<div class="layui-input-inline">
+									<input type="text" name="typeName" placeholder="" class="layui-input">
+								</div>
+								<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="dict-type-query">
+									<i class="layui-icon layui-icon-search"></i>
+									查询
+								</button>
+								<button type="reset" class="pear-btn pear-btn-md">
+									<i class="layui-icon layui-icon-refresh"></i>
+									重置
+								</button>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<table id="dict-type-table" lay-filter="dict-type-table"></table>
+					</div>
+				</div>
+			</div>
+			<div class="layui-col-md6">
+				<div class="layui-card">
+					<div class="layui-card-body">
+						<svg class="empty" style="margin-top: 50px;margin-left: 220px;margin-bottom: 80px;" width="184" height="152"
+						 viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+							<g fill="none" fillRule="evenodd">
+								<g transform="translate(24 31.67)">
+									<ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668"></ellipse>
+									<path d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+									 fill="#AEB8C2"></path>
+									<path d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+									 fill="url(#linearGradient-1)" transform="translate(13.56)"></path>
+									<path d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#F5F5F7"></path>
+									<path d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+									 fill="#DCE0E6"></path>
+								</g>
+								<path d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+								 fill="#DCE0E6"></path>
+								<g transform="translate(149.65 15.383)" fill="#FFF">
+									<ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815"></ellipse>
+									<path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z"></path>
+								</g>
+							</g>
+						</svg>
+						<table id="dict-data-table" lay-filter="dict-data-table"></table>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</body>
+	<script type="text/html" id="dict-type-toolbar">
+		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+	        <i class="layui-icon layui-icon-add-1"></i>
+	        新增
+	    </button>
+	    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+	        <i class="layui-icon layui-icon-delete"></i>
+	        删除
+	    </button>
+	</script>
+
+	<script type="text/html" id="dict-type-bar">
+		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">
+	        <i class="layui-icon layui-icon-edit"></i>
+	    </button>
+	    <button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="details">
+	        <i class="layui-icon layui-icon-transfer"></i>
+	    </button>
+	    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove">
+	        <i class="layui-icon layui-icon-delete"></i>
+	    </button>
+	</script>
+
+	<script type="text/html" id="dict-type-enable">
+		<input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-type-enable" {{d.enable== '0' ? 'checked' : '' }}>
+	</script>
+
+	<script type="text/html" id="dict-data-toolbar">
+		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+	        <i class="layui-icon layui-icon-add-1"></i>
+	        新增
+	    </button>
+	    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+	        <i class="layui-icon layui-icon-delete"></i>
+	        删除
+	    </button>
+	</script>
+
+	<script type="text/html" id="dict-data-bar">
+		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>
+	    </button>
+	    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>
+	    </button>
+	</script>
+
+	<script type="text/html" id="dict-data-enable">
+		<input type="checkbox" value="{{d.dataId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="dict-data-enable" {{d.enable== '0' ? 'checked' : '' }}>
+	</script>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['table', 'form', 'jquery'], function() {
+			let table = layui.table;
+			let form = layui.form;
+			let $ = layui.jquery;
+
+			let MODULE_PATH = "operate/";
+
+			let typeCode;
+
+			let cols = [
+				[{
+						type: 'checkbox'
+					},
+					{
+						title: '字典名称',
+						field: 'typeName',
+						align: 'center',
+						width: 120
+					},
+					{
+						title: '描述',
+						field: 'description',
+						align: 'center'
+					},
+					{
+						title: '字典状态',
+						field: 'enable',
+						align: 'center',
+						templet: '#dict-type-enable'
+					},
+					{
+						title: '操作',
+						toolbar: '#dict-type-bar',
+						align: 'center',
+						width: 180
+					}
+				]
+			];
+
+			let dataCols = [
+				[{
+						type: 'checkbox'
+					},
+					{
+						title: '标签',
+						field: 'dataLabel',
+						align: 'center',
+						width: 120
+					},
+					{
+						title: '对应值',
+						field: 'dataValue',
+						align: 'center'
+					},
+					{
+						title: '状态',
+						field: 'enable',
+						align: 'center',
+						templet: '#dict-data-enable'
+					},
+					{
+						title: '操作',
+						toolbar: '#dict-data-bar',
+						align: 'center',
+						width: 180
+					}
+				]
+			];
+
+			table.render({
+				elem: '#dict-type-table',
+				url: "../../admin/data/dictType.json",
+				page: true,
+				cols: cols,
+				skin: 'line',
+				height: 'full-148',
+				toolbar: '#dict-type-toolbar',
+				defaultToolbar: [{
+					title: '刷新',
+					layEvent: 'refresh',
+					icon: 'layui-icon-refresh',
+				}, 'filter', 'print', 'exports']
+			});
+
+			window.renderData = function(code) {
+
+				typeCode = code;
+				$(".empty").hide();
+
+				table.render({
+					elem: '#dict-data-table',
+					url: "../../admin/data/dictData.json",
+					page: true,
+					height: 'full-148',
+					cols: dataCols,
+					skin: 'line',
+					toolbar: '#dict-data-toolbar'
+				});
+			}
+
+			table.on('tool(dict-type-table)', function(obj) {
+				if (obj.event === 'remove') {
+					window.removeType(obj);
+				} else if (obj.event === 'edit') {
+					window.editType(obj);
+				} else if (obj.event === 'details') {
+					window.renderData(obj.data['typeCode'])
+				}
+			});
+
+			table.on('toolbar(dict-type-table)', function(obj) {
+				if (obj.event === 'add') {
+					window.addType();
+				} else if (obj.event === 'refresh') {
+					window.refreshType();
+				} else if (obj.event === 'batchRemove') {
+					layer.msg("批量删除")
+				}
+			});
+
+			form.on('submit(dict-type-query)', function(data) {
+				table.reload('dict-type-table', {
+					where: data.field
+				})
+				return false;
+			});
+
+			form.on('switch(dict-type-enable)', function(obj) {
+				layer.msg("切换");
+			});
+
+			window.addType = function() {
+				layer.open({
+					type: 2,
+					title: '新增',
+					shade: 0.1,
+					area: ['500px', '400px'],
+					content: MODULE_PATH + 'add.html'
+				});
+			}
+
+			window.editType = function(obj) {
+				layer.open({
+					type: 2,
+					title: '修改',
+					shade: 0.1,
+					area: ['500px', '400px'],
+					content: MODULE_PATH + 'edit.html'
+				});
+			}
+
+			window.removeType = function(obj) {
+				layer.msg("删除");
+			}
+
+			window.refreshType = function() {
+				table.reload('dict-type-table');
+			}
+
+			window.addData = function() {
+				layer.open({
+					type: 2,
+					title: '新增',
+					shade: 0.1,
+					area: ['500px', '450px'],
+					content: MODULE_PATH + 'add.html'
+				});
+			}
+
+			window.editData = function(obj) {
+				layer.open({
+					type: 2,
+					title: '修改',
+					shade: 0.1,
+					area: ['500px', '450px'],
+					content: MODULE_PATH + 'edit.html'
+				});
+			}
+
+			window.removeData = function(obj) {
+				layer.msg("删除");
+			}
+
+			table.on('tool(dict-data-table)', function(obj) {
+				if (obj.event === 'remove') {
+					window.removeData(obj);
+				} else if (obj.event === 'edit') {
+					window.editData(obj);
+				} else if (obj.event === 'details') {
+					window.details(obj);
+				}
+			});
+
+			table.on('toolbar(dict-data-table)', function(obj) {
+				if (obj.event === 'add') {
+					window.addData();
+				} else if (obj.event === 'refresh') {
+					window.refreshData();
+				} else if (obj.event === 'batchRemove') {
+					layer.msg("批量删除")
+				}
+			});
+
+			form.on('submit(dict-data-query)', function(data) {
+				data.field.typeCode = typeCode;
+				table.reload('dict-data-table', {
+					where: data.field
+				})
+				return false;
+			});
+
+			form.on('switch(dict-data-enable)', function(obj) {
+				layer.msg("切换状态");
+			});
+
+			window.refreshData = function() {
+				table.reload('dict-data-table');
+			}
+		})
+	</script>
+</html>
diff --git a/public/view/system/log.html b/public/view/system/log.html
new file mode 100644
index 0000000..d4fde96
--- /dev/null
+++ b/public/view/system/log.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>行为日志</title>
+    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+</head>
+<body class="pear-container">
+<div class="layui-card">
+    <div class="layui-card-body">
+        <div class="layui-tab layui-tab-card">
+            <ul class="layui-tab-title">
+                <li class="layui-this">登录日志</li>
+                <li>操作日志</li>
+            </ul>
+            <div class="layui-tab-content">
+                <div class="layui-tab-item layui-show">
+                    <table style="margin-top: 10px;" id="log-login-table" lay-filter="user-table"></table>
+                </div>
+                <div class="layui-tab-item">
+                    <table style="margin-top: 10px;" id="log-operate-table" lay-filter="user-table"></table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</body>
+
+<script type="text/html" id="log-bar">
+    {{#if (d.success == true) { }}
+    <button class="pear-btn pear-btn-sm pear-btn-success" lay-event="edit"><i class="layui-icon layui-icon-ok"></i>
+        成功</button>
+    {{# }else if(d.success == false){ }}
+    <button class="pear-btn pear-btn-sm pear-btn-danger" lay-event="error"><i class="layui-icon layui-icon-help"></i>
+        异常</button>
+    {{# } }}
+</script>
+
+<script type="text/html" id="log-createTime">
+    {{layui.util.toDateString(d.createTime,  "yyyy-MM-dd HH:mm:ss")}}
+</script>
+
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+    layui.use(['table','form','jquery','element'],function () {
+        let table = layui.table;
+        let form = layui.form;
+        let element = layui.element;
+
+        let MODULE_PATH = "/system/logging/";
+
+        let cols = [
+            [
+                {title: '模块', field: 'title', align:'center'},
+                {title: '请求方式', field: 'requestMethod', align:'center'},
+                {title: '接口', field: 'method', align:'center'},
+                {title: '浏览器', field: 'browser', align:'center'},
+                {title: '操作地址', field: 'operateAddress',align:'center'},
+                {title: '操作系统', field: 'systemOs', align:'center'},
+                {title: '访问时间', field: 'createTime',templet:'#log-createTime', align:'center'},
+                {title: '操作人', field: 'operateName', align:'center'},
+                {title: '访问状态', toolbar: '#log-bar', align:'center', width:150}
+            ]
+        ]
+
+        table.render({
+            elem: '#log-operate-table',
+            url: '../../admin/data/operateLog.json',
+            page: true ,
+            cols: cols ,
+            skin: 'line',
+            toolbar: false
+        });
+
+        table.render({
+            elem: '#log-login-table',
+            url: '../../admin/data/loginLog.json',
+            page: true ,
+            cols: cols ,
+            skin: 'line',
+            toolbar: false
+        });
+
+        form.on('submit(dict-type-query)', function(data){
+            table.reload('dict-type-table',{where:data.field})
+            return false;
+        });
+
+        window.error = function(obj){
+            layer.open({
+                type: 1,
+                title: '异常信息',
+                shade: 0,
+                area: ['450px', '350px'],
+                content: '<div class="pear-container"><div class="layui-card"><div class="layui-card-body">'+obj.data['error']+'</div></div></div>'
+            });
+        }
+    })
+</script>
+</html>
\ No newline at end of file
diff --git a/public/view/system/operate.html b/public/view/system/operate.html
new file mode 100644
index 0000000..fec1c87
--- /dev/null
+++ b/public/view/system/operate.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+	<head>
+		<meta charset="UTF-8">
+		<title>表单页面</title>
+		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
+	</head>
+	<body>
+		<form class="layui-form" action="">
+			<div class="mainBox">
+				<div class="main-container">
+					<div class="layui-form-item">
+						<label class="layui-form-label">账号</label>
+						<div class="layui-input-block">
+							<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">姓名</label>
+						<div class="layui-input-block">
+							<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">邮箱</label>
+						<div class="layui-input-block">
+							<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
+								autocomplete="off" placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">密码</label>
+						<div class="layui-input-block">
+							<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">电话</label>
+						<div class="layui-input-block">
+							<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">性别</label>
+						<div class="layui-input-block">
+							<input type="radio" name="sex" value="0" title="男">
+							<input type="radio" name="sex" value="1" title="女" checked>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="bottom">
+				<div class="button-container">
+					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
+						lay-filter="form-save">
+						<i class="layui-icon layui-icon-ok"></i>
+						提交
+					</button>
+					<button type="reset" class="pear-btn pear-btn-sm">
+						<i class="layui-icon layui-icon-refresh"></i>
+						重置
+					</button>
+				</div>
+			</div>
+		</form>
+		<script src="../../../component/layui/layui.js"></script>
+		<script src="../../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form', 'jquery'], function() {
+				let form = layui.form;
+				let $ = layui.jquery;
+
+				form.on('submit(form-save)', function(data) {
+					$.ajax({
+						url: '/system/user/save',
+						data: JSON.stringify(data.field),
+						dataType: 'json',
+						contentType: 'application/json',
+						type: 'post',
+						success: function(result) {
+							if (result.success) {
+								layer.msg(result.msg, {
+									icon: 1,
+									time: 1000
+								}, function() {
+									parent.layer.close(parent.layer.getFrameIndex(window
+										.name)); //关闭当前页
+									parent.layui.table.reload("form-table");
+								});
+							} else {
+								layer.msg(result.msg, {
+									icon: 2,
+									time: 1000
+								});
+							}
+						}
+					})
+					return false;
+				});
+			})
+		</script>
+	</body>
+</html>
diff --git a/public/view/system/operate/add.html b/public/view/system/operate/add.html
new file mode 100644
index 0000000..5ece83b
--- /dev/null
+++ b/public/view/system/operate/add.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>新增页面</title>
+		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
+	</head>
+	<body>
+		<form class="layui-form" action="">
+			<div class="mainBox">
+				<div class="main-container">
+					<div class="layui-form-item">
+						<label class="layui-form-label">账号</label>
+						<div class="layui-input-block">
+							<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">姓名</label>
+						<div class="layui-input-block">
+							<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">邮箱</label>
+						<div class="layui-input-block">
+							<input type="text" name="email" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">密码</label>
+						<div class="layui-input-block">
+							<input type="text" name="password" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">电话</label>
+						<div class="layui-input-block">
+							<input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">性别</label>
+						<div class="layui-input-block">
+							<input type="radio" name="sex" value="0" title="男">
+							<input type="radio" name="sex" value="1" title="女" checked>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="bottom">
+				<div class="button-container">
+					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="user-save">
+						<i class="layui-icon layui-icon-ok"></i>
+						提交
+					</button>
+					<button type="reset" class="pear-btn pear-btn-sm">
+						<i class="layui-icon layui-icon-refresh"></i>
+						重置
+					</button>
+				</div>
+			</div>
+		</form>
+		<script src="../../../component/layui/layui.js"></script>
+		<script src="../../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form', 'jquery'], function() {
+				let form = layui.form;
+				let $ = layui.jquery;
+
+				form.on('submit(user-save)', function(data) {
+					$.ajax({
+						url: '/system/user/save',
+						data: JSON.stringify(data.field),
+						dataType: 'json',
+						contentType: 'application/json',
+						type: 'post',
+						success: function(result) {
+							if (result.success) {
+								layer.msg(result.msg, {
+									icon: 1,
+									time: 1000
+								}, function() {
+									parent.layer.close(parent.layer.getFrameIndex(window
+										.name)); //关闭当前页
+									parent.layui.table.reload("user-table");
+								});
+							} else {
+								layer.msg(result.msg, {
+									icon: 2,
+									time: 1000
+								});
+							}
+						}
+					})
+					return false;
+				});
+			})
+		</script>
+		<script>
+		</script>
+	</body>
+</html>
diff --git a/public/view/system/operate/edit.html b/public/view/system/operate/edit.html
new file mode 100644
index 0000000..82dbce8
--- /dev/null
+++ b/public/view/system/operate/edit.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>修改页面</title>
+		<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
+	</head>
+	<body>
+		<form class="layui-form" action="">
+			<div class="mainBox">
+				<div class="main-container">
+					<div class="layui-form-item">
+						<label class="layui-form-label">账号</label>
+						<div class="layui-input-block">
+							<input type="text" name="username" value="854085467" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">姓名</label>
+						<div class="layui-input-block">
+							<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入标题"
+								class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">邮箱</label>
+						<div class="layui-input-block">
+							<input type="text" name="email" value="854085467@qq.com" lay-verify="title"
+								autocomplete="off" placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">密码</label>
+						<div class="layui-input-block">
+							<input type="text" name="password" value="*******" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">电话</label>
+						<div class="layui-input-block">
+							<input type="text" name="phone" value="15555555555" lay-verify="title" autocomplete="off"
+								placeholder="请输入标题" class="layui-input">
+						</div>
+					</div>
+					<div class="layui-form-item">
+						<label class="layui-form-label">性别</label>
+						<div class="layui-input-block">
+							<input type="radio" name="sex" value="0" title="男">
+							<input type="radio" name="sex" value="1" title="女" checked>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="bottom">
+				<div class="button-container">
+					<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
+						lay-filter="user-save">
+						<i class="layui-icon layui-icon-ok"></i>
+						提交
+					</button>
+					<button type="reset" class="pear-btn pear-btn-sm">
+						<i class="layui-icon layui-icon-refresh"></i>
+						重置
+					</button>
+				</div>
+			</div>
+		</form>
+		<script src="../../../component/layui/layui.js"></script>
+		<script src="../../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['form', 'jquery'], function() {
+				let form = layui.form;
+				let $ = layui.jquery;
+
+				form.on('submit(user-save)', function(data) {
+					$.ajax({
+						url: '/system/user/save',
+						data: JSON.stringify(data.field),
+						dataType: 'json',
+						contentType: 'application/json',
+						type: 'post',
+						success: function(result) {
+							if (result.success) {
+								layer.msg(result.msg, {
+									icon: 1,
+									time: 1000
+								}, function() {
+									parent.layer.close(parent.layer.getFrameIndex(window
+										.name)); //关闭当前页
+									parent.layui.table.reload("user-table");
+								});
+							} else {
+								layer.msg(result.msg, {
+									icon: 2,
+									time: 1000
+								});
+							}
+						}
+					})
+					return false;
+				});
+			})
+		</script>
+		<script>
+		</script>
+	</body>
+</html>
diff --git a/public/view/system/operate/profile.html b/public/view/system/operate/profile.html
new file mode 100644
index 0000000..6041005
--- /dev/null
+++ b/public/view/system/operate/profile.html
@@ -0,0 +1,108 @@
+<!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-space15">
+        <div class="layui-col-xs9">
+            <div style="height:325px;background-color: rgb(247, 247, 247);">
+                <img id="sourceImage" src="">
+            </div>
+        </div>
+        <div class="layui-col-xs3" style="padding-left:0px;">
+            <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
+            </div>
+        </div>
+    </div>
+    <div class="layui-row">
+        <div class="layui-form-item">
+            <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
+                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
+                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
+                <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
+                <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
+                <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
+            </div>
+            <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
+        </div>
+    </div>
+    <script src="../../../component/layui/layui.js"></script>
+    <script src="../../../component/pear/pear.js"></script>
+    <script>
+        layui.use(['jquery','layer','cropper'], function () {
+            let $ = layui.jquery;
+            let layer = layui.layer;
+            let cropper = layui.cropper;
+
+            var options = {
+                aspectRatio: 1 / 1, // 裁剪框比例
+                preview: '#previewImage', // 预览div
+                viewmode: 1
+            };
+            
+            $("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
+            $("#sourceImage").cropper(options);
+
+            window.submitForm = function () {
+                $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
+                $("#sourceImage").cropper("getCroppedCanvas", {
+                    width: 280,
+                    height: 140
+                }).toBlob(function (blob) {
+                    var timeStamp = Date.parse(new Date());
+                    var fileName = timeStamp + '.jpg';
+                    var formData = new FormData();
+                    formData.append('file', blob, fileName);
+                    formData.append('fileName', fileName);
+                    formData.append('fileToken', timeStamp);
+                  
+                    var reader = new FileReader();
+                    reader.readAsDataURL(blob);
+                    reader.onload = function (e) {
+                        var data={
+                            index:parent.layer.getFrameIndex(window.name),
+                            newAvatar : e.target.result
+                        };
+                        console.log(data);
+                        parent.window.callback(data);
+                    };
+                });
+            }
+
+            $(".pear-btn").on('click', function () {
+                var event = $(this).attr("cropper-event");
+
+                if (event === 'rotate') {
+                    var option = $(this).attr('data-option');
+                    $("#sourceImage").cropper('rotate', option);
+                } else if (event === 'reset') {
+                    $("#sourceImage").cropper('reset');
+                }
+
+                $("#uploadPicture").change(function () {
+                    var r = new FileReader();
+                    var f = this.files[0];
+
+                    var uploadFileSize = f.size / 1024;
+                    if (uploadFileSize > 5120) {
+                        parent.layer.msg("上传文件不得超过5m", { icon: 5 });
+                        return false;
+                    }
+
+                    r.readAsDataURL(f);
+                    r.onload = function (e) {
+                        $("#sourceImage")
+                            .cropper('destroy')
+                            .attr('src', this.result)
+                            .cropper(options);
+                    };
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/view/system/person.html b/public/view/system/person.html
new file mode 100644
index 0000000..16ad62a
--- /dev/null
+++ b/public/view/system/person.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>个人资料</title>
+	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
+	<link rel="stylesheet" href="../../admin/css/other/person.css" />
+</head>
+<body class="pear-container">
+	<div class="layui-row layui-col-space10">
+		<div class="layui-col-md3">
+			<div class="layui-card">
+				<div class="layui-card-body" style="padding: 25px;">
+					<div class="text-center layui-text">
+						<div class="user-info-head" id="userInfoHead">
+							<img src="../../admin/images/avatar.jpg" id="userAvatar" width="115px" height="115px" alt="">
+						</div>
+						<h2 style="padding-top: 20px;font-size: 20px;">就眠仪式</h2>
+						<p style="padding-top: 8px;margin-top: 10px;font-size: 13.5px;">China ， 中国</p>
+					</div>
+				</div>
+				<div style="height: 45px;border-top: 1px whitesmoke solid;text-align: center;line-height: 45px;font-size: 13.5px;">
+					<span>今日事 ，今日毕</span>
+				</div>
+			</div>
+
+			<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 class="layui-col-md9">
+			<div class="layui-card">
+				<div class="layui-card-header">
+					我的文章
+				</div>
+				<div class="layui-card-body">
+					<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+						<div class="layui-tab-content">
+							<div class="layui-tab-item layui-show">
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+								<div class="layui-row layui-col-space10" style="margin: 15px;">
+									<div class="layui-col-md1">
+										<img src="../../admin/images/act.jpg" style="width: 100%;height: 100%;border-radius: 5px;" />
+									</div>
+									<div class="layui-col-md11" style="height: 80px;">
+										<div class="title">为什么程序员们愿意在GitHub上开源自己的成果给别人免费使用和学习？</div>
+										<div class="content">
+											“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐~
+										</div>
+										<div class="comment">2020-06-12 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 评论 5 点赞 12 转发 4</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['jquery', 'element', 'layer', 'convert'], function () {
+			var element = layui.element,
+				layer = layui.layer,
+				$ = layui.jquery,
+				convert = layui.convert;
+
+			let MODULE_PATH = "operate/";
+			
+			var image = new Image();
+			image.src = "../../admin/images/avatar.jpg";
+			image.onload = function() {
+				$("#userAvatar").attr("src", convert.imageToBase64(image));
+			}
+			
+			window.callback = function (data) {
+				layer.close(data.index);
+                $("#userAvatar").attr("src", data.newAvatar);
+            }
+
+			$("#userAvatar").click(function () {
+				layer.open({
+					type: 2,
+					title: '更换图片',
+					shade: 0.1,
+					area: ["900px", "500px"],
+					content: MODULE_PATH + 'profile.html',
+					btn: ['确定', '取消'],
+					yes: function (index, layero) {
+						window['layui-layer-iframe' + index].submitForm();
+					}
+				});
+			});
+		});
+	</script>
+</body>
+</html>
diff --git a/public/view/system/power.html b/public/view/system/power.html
new file mode 100644
index 0000000..cb0a594
--- /dev/null
+++ b/public/view/system/power.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>权限管理</title>
+    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
+</head>
+<body class="pear-container">
+<div class="layui-card">
+    <div class="layui-card-body">
+        <form class="layui-form" action="">
+        	<div class="layui-form-item">
+        		<div class="layui-form-item layui-inline">
+        			<label class="layui-form-label">用户名</label>
+        			<div class="layui-input-inline">
+        				<input type="text" name="realName" placeholder="" class="layui-input">
+        			</div>
+        		</div>
+        		<div class="layui-form-item layui-inline">
+        			<label class="layui-form-label">性别</label>
+        			<div class="layui-input-inline">
+        				<input type="text" name="realName" placeholder="" class="layui-input">
+        			</div>
+        		</div>
+        		<div class="layui-form-item layui-inline">
+        			<label class="layui-form-label">邮箱</label>
+        			<div class="layui-input-inline">
+        				<input type="text" name="realName" placeholder="" class="layui-input">
+        			</div>
+        		</div>
+        		<div class="layui-form-item layui-inline">
+        			<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+        				<i class="layui-icon layui-icon-search"></i>
+        				查询
+        			</button>
+        			<button type="reset" class="pear-btn pear-btn-md">
+        				<i class="layui-icon layui-icon-refresh"></i>
+        				重置
+        			</button>
+        		</div>
+        	</div>
+        </form>
+    </div>
+</div>
+<div class="layui-card">
+    <div class="layui-card-body">
+        <table id="power-table" lay-filter="power-table"></table>
+    </div>
+</div>
+
+<script type="text/html" id="power-toolbar">
+    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+        <i class="layui-icon layui-icon-add-1"></i>
+        新增
+    </button>
+    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+        <i class="layui-icon layui-icon-delete"></i>
+        删除
+    </button>
+	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="expandAll">
+	    <i class="layui-icon layui-icon-spread-left"></i>
+	    展开
+	</button>
+	<button class="pear-btn pear-btn-success pear-btn-md" lay-event="foldAll">
+	    <i class="layui-icon layui-icon-shrink-right"></i>
+	    折叠
+	</button>
+</script>
+
+<script type="text/html" id="power-bar">
+    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+</script>
+
+<script type="text/html" id="power-type">
+    {{#if (d.powerType == '0') { }}
+    <span>目录</span>
+    {{# }else if(d.powerType == '1'){ }}
+    <span>菜单</span>
+    {{# }else if(d.powerType == '2'){ }}
+    <span>按钮</span>
+    {{# } }}
+</script>
+
+<script type="text/html" id="power-enable">
+    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"  {{ d.enable== true ? 'checked' : '' }} />
+</script>
+
+<script type="text/html" id="icon">
+    <i class="layui-icon {{d.icon}}"></i>
+</script>
+
+<script src="../../component/layui/layui.js"></script>
+<script src="../../component/pear/pear.js"></script>
+<script>
+    layui.use(['table','form','jquery','treetable'],function () {
+        let table = layui.table;
+        let form = layui.form;
+        let $ = layui.jquery;
+        let treetable = layui.treetable;
+
+        let MODULE_PATH = "operate/";
+
+        window.render = function(){
+            treetable.render({
+                treeColIndex: 1,
+                treeSpid: 0,
+                treeIdName: 'powerId',
+                treePidName: 'parentId',
+                skin:'line',
+                treeDefaultClose: true,
+                toolbar:'#power-toolbar',
+                elem: '#power-table',
+                url: '../../admin/data/power.json',
+                page: false,
+                cols: [
+                    [
+                    {type: 'checkbox'},
+                    {field: 'powerName', minWidth: 200, title: '权限名称'},
+                    {field: 'icon', title: '图标',templet:'#icon'},
+                    {field: 'powerType', title: '权限类型',templet:'#power-type'},
+                    {field: 'enable', title: '是否可用',templet:'#power-enable'},
+                    {field: 'sort', title: '排序'},
+                    {title: '操作',templet: '#power-bar', width: 150, align: 'center'}
+                    ]
+                ]
+            });
+        }
+
+        render();
+
+        table.on('tool(power-table)',function(obj){
+            if (obj.event === 'remove') {
+                window.remove(obj);
+            } else if (obj.event === 'edit') {
+                window.edit(obj);
+            }
+        })
+
+
+        table.on('toolbar(power-table)', function(obj){
+            if(obj.event === 'add'){
+                window.add();
+            } else if(obj.event === 'refresh'){
+                window.refresh();
+            } else if(obj.event === 'batchRemove'){
+                window.batchRemove(obj);
+            }  else if(obj.event === 'expandAll'){
+				 treetable.expandAll("#power-table");
+			} else if(obj.event === 'foldAll'){
+				 treetable.foldAll("#power-table");
+			}
+        });
+
+        window.add = function(){
+            layer.open({
+                type: 2,
+                title: '新增',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'add.html'
+            });
+        }
+
+        window.edit = function(obj){
+            layer.open({
+                type: 2,
+                title: '修改',
+                shade: 0.1,
+                area: ['450px', '500px'],
+                content: MODULE_PATH + 'edit.html'
+            });
+        }
+        window.remove = function(obj){
+            layer.confirm('确定要删除该权限', {icon: 3, title:'提示'}, function(index){
+                layer.close(index);
+                let loading = layer.load();
+                $.ajax({
+                    url: MODULE_PATH+"remove/"+obj.data['powerId'],
+                    dataType:'json',
+                    type:'delete',
+                    success:function(result){
+                        layer.close(loading);
+                        if(result.success){
+                            layer.msg(result.msg,{icon:1,time:1000},function(){
+                                obj.del();
+                            });
+                        }else{
+                            layer.msg(result.msg,{icon:2,time:1000});
+                        }
+                    }
+                })
+            });
+        }
+		
+		window.batchRemove = function(obj) {
+			let data = table.checkStatus(obj.config.id).data;
+			if (data.length === 0) {
+				layer.msg("未选中数据", {
+					icon: 3,
+					time: 1000
+				});
+				return false;
+			}
+			let ids = "";
+			for (let i = 0; i < data.length; i++) {
+				ids += data[i].powerId + ",";
+			}
+			ids = ids.substr(0, ids.length - 1);
+			layer.confirm('确定要删除这些权限', {
+				icon: 3,
+				title: '提示'
+			}, function(index) {
+				layer.close(index);
+				let loading = layer.load();
+				$.ajax({
+					url: MODULE_PATH + "batchRemove/" + ids,
+					dataType: 'json',
+					type: 'delete',
+					success: function(result) {
+						layer.close(loading);
+						if (result.success) {
+							layer.msg(result.msg, {
+								icon: 1,
+								time: 1000
+							}, function() {
+								table.reload('user-table');
+							});
+						} else {
+							layer.msg(result.msg, {
+								icon: 2,
+								time: 1000
+							});
+						}
+					}
+				})
+			});
+		}
+    })
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/view/system/profile.html b/public/view/system/profile.html
new file mode 100644
index 0000000..6041005
--- /dev/null
+++ b/public/view/system/profile.html
@@ -0,0 +1,108 @@
+<!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-space15">
+        <div class="layui-col-xs9">
+            <div style="height:325px;background-color: rgb(247, 247, 247);">
+                <img id="sourceImage" src="">
+            </div>
+        </div>
+        <div class="layui-col-xs3" style="padding-left:0px;">
+            <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
+            </div>
+        </div>
+    </div>
+    <div class="layui-row">
+        <div class="layui-form-item">
+            <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
+                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
+                <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
+                <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
+                <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
+                <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
+            </div>
+            <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
+        </div>
+    </div>
+    <script src="../../../component/layui/layui.js"></script>
+    <script src="../../../component/pear/pear.js"></script>
+    <script>
+        layui.use(['jquery','layer','cropper'], function () {
+            let $ = layui.jquery;
+            let layer = layui.layer;
+            let cropper = layui.cropper;
+
+            var options = {
+                aspectRatio: 1 / 1, // 裁剪框比例
+                preview: '#previewImage', // 预览div
+                viewmode: 1
+            };
+            
+            $("#sourceImage").attr("src", parent.layui.$("#userAvatar").attr("src"));
+            $("#sourceImage").cropper(options);
+
+            window.submitForm = function () {
+                $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
+                $("#sourceImage").cropper("getCroppedCanvas", {
+                    width: 280,
+                    height: 140
+                }).toBlob(function (blob) {
+                    var timeStamp = Date.parse(new Date());
+                    var fileName = timeStamp + '.jpg';
+                    var formData = new FormData();
+                    formData.append('file', blob, fileName);
+                    formData.append('fileName', fileName);
+                    formData.append('fileToken', timeStamp);
+                  
+                    var reader = new FileReader();
+                    reader.readAsDataURL(blob);
+                    reader.onload = function (e) {
+                        var data={
+                            index:parent.layer.getFrameIndex(window.name),
+                            newAvatar : e.target.result
+                        };
+                        console.log(data);
+                        parent.window.callback(data);
+                    };
+                });
+            }
+
+            $(".pear-btn").on('click', function () {
+                var event = $(this).attr("cropper-event");
+
+                if (event === 'rotate') {
+                    var option = $(this).attr('data-option');
+                    $("#sourceImage").cropper('rotate', option);
+                } else if (event === 'reset') {
+                    $("#sourceImage").cropper('reset');
+                }
+
+                $("#uploadPicture").change(function () {
+                    var r = new FileReader();
+                    var f = this.files[0];
+
+                    var uploadFileSize = f.size / 1024;
+                    if (uploadFileSize > 5120) {
+                        parent.layer.msg("上传文件不得超过5m", { icon: 5 });
+                        return false;
+                    }
+
+                    r.readAsDataURL(f);
+                    r.onload = function (e) {
+                        $("#sourceImage")
+                            .cropper('destroy')
+                            .attr('src', this.result)
+                            .cropper(options);
+                    };
+                });
+            });
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/public/view/system/role.html b/public/view/system/role.html
new file mode 100644
index 0000000..7c93e19
--- /dev/null
+++ b/public/view/system/role.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>角色管理</title>
+		<link href="../../component/pear/css/pear.css" rel="stylesheet" />
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<form class="layui-form" action="">
+					<div class="layui-form-item">
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">用户名</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">性别</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">邮箱</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="role-query">
+								<i class="layui-icon layui-icon-search"></i>
+								查询
+							</button>
+							<button type="reset" class="pear-btn pear-btn-md">
+								<i class="layui-icon layui-icon-refresh"></i>
+								重置
+							</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<table id="role-table" lay-filter="role-table"></table>
+			</div>
+		</div>
+		
+		<script type="text/html" id="role-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+				<i class="layui-icon layui-icon-add-1"></i>
+				新增
+			</button>
+			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+				<i class="layui-icon layui-icon-delete"></i>
+				删除
+			</button>
+		</script>
+		
+		<script type="text/html" id="role-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+			<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="power"><i class="layui-icon layui-icon-vercode"></i></button>
+			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+		</script>
+		
+		<script type="text/html" id="role-enable">
+			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable"  {{ d.enable== true ? 'checked' : '' }} />
+		</script>
+
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+		    layui.use(['table','form','jquery'],function () {
+		        let table = layui.table;
+		        let form = layui.form;
+		        let $ = layui.jquery;
+		
+		        let MODULE_PATH = "operate/";
+		
+		        let cols = [
+		            [
+		                {type:'checkbox'},
+		                {title: '角色名', field: 'roleName', align:'center', width:100},
+		                {title: 'Key值', field: 'roleCode', align:'center'},
+		                {title: '描述', field: 'details', align:'center'},
+		                {title: '是否可用', field: 'enable', align:'center', templet:'#role-enable'},
+		                {title: '操作', toolbar: '#role-bar', align:'center', width:195}
+		            ]
+		        ]
+		
+		        table.render({
+		            elem: '#role-table',
+		            url: '../../admin/data/role.json',
+		            page: true ,
+		            cols: cols ,
+		            skin: 'line',
+		            toolbar: '#role-toolbar',
+		            defaultToolbar: [{
+						title: '刷新',
+		                layEvent: 'refresh',
+		                icon: 'layui-icon-refresh',
+		            }, 'filter', 'print', 'exports']
+		        });
+		
+		        table.on('tool(role-table)', function(obj){
+		            if(obj.event === 'remove'){
+		                window.remove(obj);
+		            } else if(obj.event === 'edit'){
+		                window.edit(obj);
+		            } else if(obj.event === 'power'){
+		                window.power(obj);
+		            }
+		        });
+		
+		        table.on('toolbar(role-table)', function(obj){
+		            if(obj.event === 'add'){
+		                window.add();
+		            } else if(obj.event === 'refresh'){
+		                window.refresh();
+		            } else if(obj.event === 'batchRemove'){
+		                window.batchRemove(obj);
+		            }
+		        });
+		
+		        form.on('submit(role-query)', function(data){
+		            table.reload('role-table',{where:data.field})
+		            return false;
+		        });
+		
+		        form.on('switch(role-enable)', function(obj){
+		            layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
+		        });
+		
+		        window.add = function(){
+		            layer.open({
+		                type: 2,
+		                title: '新增',
+		                shade: 0.1,
+		                area: ['500px', '400px'],
+		                content: MODULE_PATH + 'add.html'
+		            });
+		        }
+		
+		        window.power = function(obj){
+		            layer.open({
+		                type: 2,
+		                title: '授权',
+		                shade: 0.1,
+		                area: ['320px', '400px'],
+		                content: MODULE_PATH + 'edit.html'
+		            });
+		        }
+		
+		        window.edit = function(obj){
+		            layer.open({
+		                type: 2,
+		                title: '修改',
+		                shade: 0.1,
+		                area: ['500px', '400px'],
+		                content: MODULE_PATH + 'edit.html'
+		            });
+		        }
+		
+		        window.remove = function(obj){
+		            layer.confirm('确定要删除该角色', {icon: 3, title:'提示'}, function(index){
+		                layer.close(index);
+		                let loading = layer.load();
+		                $.ajax({
+		                    url: MODULE_PATH+"remove/"+obj.data['roleId'],
+		                    dataType:'json',
+		                    type:'delete',
+		                    success:function(result){
+		                        layer.close(loading);
+		                        if(result.success){
+		                            layer.msg(result.msg,{icon:1,time:1000},function(){
+		                                obj.del();
+		                            });
+		                        }else{
+		                            layer.msg(result.msg,{icon:2,time:1000});
+		                        }
+		                    }
+		                })
+		            });
+		        }
+		
+		        window.batchRemove = function(obj){
+		            let data = table.checkStatus(obj.config.id).data;
+		            if(data.length === 0){
+		                layer.msg("未选中数据",{icon:3,time:1000});
+		                return false;
+		            }
+		            let ids = "";
+		            for(let i = 0;i<data.length;i++){
+		                ids += data[i].roleId+",";
+		            }
+		            ids = ids.substr(0,ids.length-1);
+		            layer.confirm('确定要删除这些用户', {icon: 3, title:'提示'}, function(index){
+		                layer.close(index);
+		                let loading = layer.load();
+		                $.ajax({
+		                    url: MODULE_PATH+"batchRemove/"+ids,
+		                    dataType:'json',
+		                    type:'delete',
+		                    success:function(result){
+		                        layer.close(loading);
+		                        if(result.success){
+		                            layer.msg(result.msg,{icon:1,time:1000},function(){
+		                                table.reload('role-table');
+		                            });
+		                        }else{
+		                            layer.msg(result.msg,{icon:2,time:1000});
+		                        }
+		                    }
+		                })
+		            });
+		        }
+		
+		        window.refresh = function(){
+		            table.reload('role-table');
+		        }
+		    })
+		</script>
+	</body>
+</html>
diff --git a/public/view/system/space.html b/public/view/system/space.html
new file mode 100644
index 0000000..8ab19e3
--- /dev/null
+++ b/public/view/system/space.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>空白页面</title>
+		<link rel="stylesheet" href="../../component/pear/css/pear.css"/>
+		<style>
+			h1{
+				margin-top: 200px;
+				color: #5FB878;
+			}
+			.layui-card-body{
+				text-align: center;height: 500px;
+			}
+		</style>
+	</head>
+	<body class="pear-container">
+		<div class="layui-card">
+			<div class="layui-card-header"></div>
+			<div class="layui-card-body">
+				<h1><b>Space Page</b></h1>
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+</html>
diff --git a/public/view/system/theme.html b/public/view/system/theme.html
new file mode 100644
index 0000000..2b38992
--- /dev/null
+++ b/public/view/system/theme.html
@@ -0,0 +1,300 @@
+<!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-card">
+			<div class="layui-card-header">按钮</div>
+			<div class="layui-card-body">
+				<button class="pear-btn pear-btn-primary">Button</button>
+				<button class="pear-btn pear-btn-primary">Button</button>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header">输入框</div>
+			<div class="layui-card-body">
+				<div class="layui-row layui-col-space10">
+					<div class="layui-col-md12">
+						<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
+					</div>
+				</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>
+					<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>
+				</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">&nbsp;&nbsp;
+					<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>&nbsp;&nbsp;
+					<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">&nbsp;&nbsp;
+					<input type="checkbox" name="aaa" lay-skin="switch" disabled>&nbsp;&nbsp;
+				</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 class="layui-card layui-form">
+			<div class="layui-card-header">下拉</div>
+			<div class="layui-card-body">
+				<select name="city" lay-verify="">
+					<option value="">请选择一个城市</option>
+					<option value="010">北京</option>
+					<option value="021">上海</option>
+					<option value="0571">杭州</option>
+				</select>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<table id="user-table" lay-filter="user-table"></table>
+			</div>
+		</div>
+
+		<script type="text/html" id="user-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+		        <i class="layui-icon layui-icon-add-1"></i>
+		        新增
+		    </button>
+		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+		        <i class="layui-icon layui-icon-delete"></i>
+		        删除
+		    </button>
+		</script>
+
+		<script type="text/html" id="user-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+		</script>
+
+		<script type="text/html" id="user-enable">
+			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
+		</script>
+
+		<script type="text/html" id="user-sex">
+			{{#if (d.sex == 1) { }}
+		    <span>男</span>
+		    {{# }else if(d.sex == 2){ }}
+		    <span>女</span>
+		    {{# } }}
+		</script>
+
+		<script type="text/html" id="user-login">
+			{{#if (d.login == 0) { }}
+		    <span>在线</span>
+		    {{# }else if(d.sex == 1){ }}
+		    <span>离线</span>
+		    {{# } }}
+		</script>
+
+		<script type="text/html" id="user-createTime">
+			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
+		</script>
+
+		<div class="layui-card">
+			<div class="layui-card-header">选项卡</div>
+			<div class="layui-card-body">
+				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+					<ul class="layui-tab-title">
+						<li class="layui-this">网站设置</li>
+						<li>用户管理</li>
+						<li>权限分配</li>
+						<li>商品管理</li>
+						<li>订单管理</li>
+					</ul>
+					<div class="layui-tab-content" style="height: 30px;">
+						<div class="layui-tab-item layui-show"></div>
+						<div class="layui-tab-item"></div>
+						<div class="layui-tab-item"></div>
+						<div class="layui-tab-item"></div>
+						<div class="layui-tab-item"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header">进度条</div>
+			<div class="layui-card-body">
+				<div class="layui-progress">
+					<div class="layui-progress-bar" lay-percent="30%"></div>
+				</div>
+				<br />
+				<div class="layui-progress">
+					<div class="layui-progress-bar" lay-percent="20%"></div>
+				</div>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header">分页</div>
+			<div class="layui-card-body">
+				<div id="test1"></div>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header">辅助元素</div>
+			<div class="layui-card-body">
+				<blockquote class="layui-elem-quote">快乐的时候不敢尽兴，频繁警戒自己保持清醒.</blockquote>
+				<blockquote class="layui-elem-quote">路上没有灯火的时候，就点亮自己的头颅.</blockquote>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header"></div>
+			<div class="layui-card-body">
+				<ul class="layui-timeline">
+					<li class="layui-timeline-item">
+						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
+						<div class="layui-timeline-content layui-text">
+							<h3 class="layui-timeline-title">8月18日</h3>
+							<p>
+								layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
+							</p>
+						</div>
+					</li>
+					<li class="layui-timeline-item">
+						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
+						<div class="layui-timeline-content layui-text">
+							<h3 class="layui-timeline-title">8月16日</h3>
+							<p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
+						</div>
+					</li>
+					<li class="layui-timeline-item">
+						<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
+						<div class="layui-timeline-content layui-text">
+							<h3 class="layui-timeline-title">8月15日</h3>
+							<p>
+								中国人民抗日战争胜利72周年
+							</p>
+						</div>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-header">日期选择</div>
+			<div class="layui-card-body">
+				<input type="text" class="layui-input" id="test2">
+			</div>
+		</div>
+	</body>
+	<script src="../../component/layui/layui.js"></script>
+	<script src="../../component/pear/pear.js"></script>
+	<script>
+		layui.use(['table', 'form', 'jquery', 'drawer'], function() {
+			let table = layui.table;
+			let form = layui.form;
+			let $ = layui.jquery;
+			let drawer = layui.drawer;
+
+			let MODULE_PATH = "/system/user/";
+
+			let cols = [
+				[{
+						type: 'checkbox'
+					},
+					{
+						title: '姓名',
+						field: 'realName',
+						align: 'center'
+					},
+					{
+						title: '性别',
+						field: 'sex',
+						align: 'center',
+						width: 80,
+						templet: '#user-sex'
+					},
+					{
+						title: '启用',
+						field: 'enable',
+						align: 'center',
+						templet: '#user-enable'
+					},
+					{
+						title: '登录',
+						field: 'login',
+						align: 'center',
+						templet: '#user-login'
+					},
+					{
+						title: '注册',
+						field: 'createTime',
+						align: 'center',
+						templet: '#user-createTime'
+					},
+					{
+						title: '操作',
+						toolbar: '#user-bar',
+						align: 'center',
+						width: 130
+					}
+				]
+			]
+
+			table.render({
+				elem: '#user-table',
+				url: '../../admin/data/table.json',
+				page: true,
+				cols: cols,
+				skin: 'line',
+				toolbar: '#user-toolbar',
+				defaultToolbar: [{
+					layEvent: 'refresh',
+					icon: 'layui-icon-refresh',
+				}, 'filter', 'print', 'exports']
+			});
+
+			form.on('switch(user-enable)', function(obj) {
+				layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
+			});
+
+		})
+	</script>
+	<script>
+		layui.use('form', function() {
+
+		})
+	</script>
+	<script>
+		layui.use('laypage', function() {
+			var laypage = layui.laypage;
+
+			laypage.render({
+				elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
+					,
+				count: 50 //数据总数，从服务端得到
+			});
+		});
+	</script>
+	<script>
+		layui.use('laydate', function() {
+			var laydate = layui.laydate;
+
+			laydate.render({
+				elem: '#test2' //指定元素
+			});
+		});
+	</script>
+</html>
diff --git a/public/view/system/user.html b/public/view/system/user.html
new file mode 100644
index 0000000..7db350d
--- /dev/null
+++ b/public/view/system/user.html
@@ -0,0 +1,298 @@
+<!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-card">
+			<div class="layui-card-body">
+				<form class="layui-form" action="">
+					<div class="layui-form-item">
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">用户名</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">性别</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<label class="layui-form-label">邮箱</label>
+							<div class="layui-input-inline">
+								<input type="text" name="realName" placeholder="" class="layui-input">
+							</div>
+						</div>
+						<div class="layui-form-item layui-inline">
+							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
+								<i class="layui-icon layui-icon-search"></i>
+								查询
+							</button>
+							<button type="reset" class="pear-btn pear-btn-md">
+								<i class="layui-icon layui-icon-refresh"></i>
+								重置
+							</button>
+						</div>
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="layui-card">
+			<div class="layui-card-body">
+				<table id="user-table" lay-filter="user-table"></table>
+			</div>
+		</div>
+
+		<script type="text/html" id="user-toolbar">
+			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
+		        <i class="layui-icon layui-icon-add-1"></i>
+		        新增
+		    </button>
+		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
+		        <i class="layui-icon layui-icon-delete"></i>
+		        删除
+		    </button>
+		</script>
+
+		<script type="text/html" id="user-bar">
+			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
+		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
+		</script>
+
+		<script type="text/html" id="user-enable">
+			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable== true ? 'checked' : '' }} />
+		</script>
+
+		<script type="text/html" id="user-sex">
+			{{#if (d.sex == 1) { }}
+		    <span>男</span>
+		    {{# }else if(d.sex == 2){ }}
+		    <span>女</span>
+		    {{# } }}
+		</script>
+
+		<script type="text/html" id="user-login">
+			{{#if (d.login == 0) { }}
+		    <span>在线</span>
+		    {{# }else if(d.sex == 1){ }}
+		    <span>离线</span>
+		    {{# } }}
+		</script>
+
+		<script type="text/html" id="user-createTime">
+			{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
+		</script>
+
+		<script src="../../component/layui/layui.js"></script>
+		<script src="../../component/pear/pear.js"></script>
+		<script>
+			layui.use(['table', 'form', 'jquery','common'], function() {
+				let table = layui.table;
+				let form = layui.form;
+				let $ = layui.jquery;
+				let common = layui.common;
+
+				let MODULE_PATH = "operate/";
+
+				let cols = [
+					[{
+							type: 'checkbox'
+						},
+						{
+							title: '账号',
+							field: 'username',
+							align: 'center',
+							width: 100
+						},
+						{
+							title: '姓名',
+							field: 'realName',
+							align: 'center'
+						},
+						{
+							title: '性别',
+							field: 'sex',
+							align: 'center',
+							width: 80,
+							templet: '#user-sex'
+						},
+						{
+							title: '电话',
+							field: 'phone',
+							align: 'center'
+						},
+						{
+							title: '启用',
+							field: 'enable',
+							align: 'center',
+							templet: '#user-enable'
+						},
+						{
+							title: '登录',
+							field: 'login',
+							align: 'center',
+							templet: '#user-login'
+						},
+						{
+							title: '注册',
+							field: 'createTime',
+							align: 'center',
+							templet: '#user-createTime'
+						},
+						{
+							title: '操作',
+							toolbar: '#user-bar',
+							align: 'center',
+							width: 130
+						}
+					]
+				]
+
+				table.render({
+					elem: '#user-table',
+					url: '../../admin/data/user.json',
+					page: true,
+					cols: cols,
+					skin: 'line',
+					toolbar: '#user-toolbar',
+					defaultToolbar: [{
+						title: '刷新',
+						layEvent: 'refresh',
+						icon: 'layui-icon-refresh',
+					}, 'filter', 'print', 'exports']
+				});
+
+				table.on('tool(user-table)', function(obj) {
+					if (obj.event === 'remove') {
+						window.remove(obj);
+					} else if (obj.event === 'edit') {
+						window.edit(obj);
+					}
+				});
+
+				table.on('toolbar(user-table)', function(obj) {
+					if (obj.event === 'add') {
+						window.add();
+					} else if (obj.event === 'refresh') {
+						window.refresh();
+					} else if (obj.event === 'batchRemove') {
+						window.batchRemove(obj);
+					}
+				});
+
+				form.on('submit(user-query)', function(data) {
+					table.reload('user-table', {
+						where: data.field
+					})
+					return false;
+				});
+
+				form.on('switch(user-enable)', function(obj) {
+					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
+				});
+
+				window.add = function() {
+					layer.open({
+						type: 2,
+						title: '新增',
+						shade: 0.1,
+						area: [common.isModile()?'100%':'500px', common.isModile()?'100%':'400px'],
+						content: MODULE_PATH + 'add.html'
+					});
+				}
+
+				window.edit = function(obj) {
+					layer.open({
+						type: 2,
+						title: '修改',
+						shade: 0.1,
+						area: ['500px', '400px'],
+						content: MODULE_PATH + 'edit.html'
+					});
+				}
+
+				window.remove = function(obj) {
+					layer.confirm('确定要删除该用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "remove/" + obj.data['userId'],
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										obj.del();
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.batchRemove = function(obj) {
+					
+					var checkIds = common.checkField(obj,'userId');
+					
+					if (checkIds === "") {
+						layer.msg("未选中数据", {
+							icon: 3,
+							time: 1000
+						});
+						return false;
+					}
+					
+					layer.confirm('确定要删除这些用户', {
+						icon: 3,
+						title: '提示'
+					}, function(index) {
+						layer.close(index);
+						let loading = layer.load();
+						$.ajax({
+							url: MODULE_PATH + "batchRemove/" + ids,
+							dataType: 'json',
+							type: 'delete',
+							success: function(result) {
+								layer.close(loading);
+								if (result.success) {
+									layer.msg(result.msg, {
+										icon: 1,
+										time: 1000
+									}, function() {
+										table.reload('user-table');
+									});
+								} else {
+									layer.msg(result.msg, {
+										icon: 2,
+										time: 1000
+									});
+								}
+							}
+						})
+					});
+				}
+
+				window.refresh = function(param) {
+					table.reload('user-table');
+				}
+			})
+		</script>
+	</body>
+</html>
diff --git a/view/taoler/index/article/ask/cate.html b/view/taoler/index/article/ask/cate.html
index 31cfc7d..242850f 100644
--- a/view/taoler/index/article/ask/cate.html
+++ b/view/taoler/index/article/ask/cate.html
@@ -121,12 +121,11 @@
 		
 		 //获取起始页
 		,jump: function(obj, first){
-		
-		//首次不执行
-		if(!first){
-		var page = obj.curr;
-		 location.href ="{$path}/"+page+'.html';
-		 }
+			var page = obj.curr;
+			//首次不执行
+			if(!first){
+			 location.href ="{$path}/"+page+'.html';
+			 }
 	  	}
 	  });
 	});
diff --git a/view/taoler/index/article/ask/detail.html b/view/taoler/index/article/ask/detail.html
index f3833d3..1a64b0f 100644
--- a/view/taoler/index/article/ask/detail.html
+++ b/view/taoler/index/article/ask/detail.html
@@ -43,6 +43,7 @@
         {//问题内容}
         <div style="margin-top: 15px; font-size: 18px; font-weight: bold; color: rgb(130, 125, 125)">问题描述：</div>
         <hr />
+        {:hook('taoplayerdiv')}
         <div class="detail-body photos" id="content">{$article.content|raw}</div>
         {if (($article.upzip !== '') || session('?user_name'))}
           <div class="">
@@ -69,7 +70,7 @@
       <div class="fly-panel detail-box" id="flyReply">
         <span style="font-size: 18px">评论 {$article.comments_count}</span>
         <ul class="jieda" id="jieda">
-          {volist name="comments" id="vo" empty= ""}
+          {volist name="comments['data']" id="vo" empty= ""}
           <li data-id="{$vo.id}" class="jieda-daan">
             <a name="item-1111111111"></a>
             <div class="detail-about detail-about-reply">
@@ -268,7 +269,7 @@
           data: { id: id, title_color: color },
           dataType: "json",
           success: function (data) {
-            if (data.code == 0) {
+            if (data.code === 0) {
               layer.msg(data.msg, { icon: 6, time: 2000 });
             } else {
               layer.open({ content: data.msg, icon: 5, adim: 6 });
@@ -293,7 +294,7 @@
           data: filed,
           dataType: "json",
           success: function (data) {
-            if (data.code == 0) {
+            if (data.code === 0) {
               layer.msg(data.msg, { icon: 6, time: 2000 }, function () {
                 location.reload(true);
               });
@@ -306,22 +307,22 @@
       return false;
     });
 
-    //执行一个laypage实例
+    // 评论分页
     laypage.render({
       elem: "pages", //注意，这里的 test1 是 ID，不用加 # 号
       count: "{$article.comments_count}", //数据总数，从服务端得到
       limit: 10,
-      curr: {$page},
-
+      curr: "{$page}",
       //获取起始页
       jump: function (obj, first) {
+        var page = obj.curr;
+        var limit = obj.limit;
+        var  url = "{:url('article_detail',['id' => $article.id ,'ename' =>$article['cate']['ename']])}";
+        var id = "{$article.id}";
         //首次不执行
         if (!first) {
-          var page = obj.curr;
-          var url = "{:url('article/detail',['id'=>$article.id])}";
-          var id = "{$article.id}";
           $.post("{:url('article/detail')}", { id: id, page: page }, function () {
-            window.location.href = url + "?page=" + page + "#flyReply";
+              location.href = url + '?page=' + page;
           });
         }
       },
diff --git a/view/taoler/index/article/blog/detail.html b/view/taoler/index/article/blog/detail.html
index f78af97..d7e0ebd 100644
--- a/view/taoler/index/article/blog/detail.html
+++ b/view/taoler/index/article/blog/detail.html
@@ -48,6 +48,7 @@
                 </div>
                 <div class="border-theme bg-primary"></div>
               </div>
+              {:hook('taoplayerdiv')}
               <article class="post-content detail-body" itemprop="articleBody" view-image>
               {$article.content|raw}
               </article>
@@ -117,7 +118,7 @@
                 <div class="mb-3" id="flyReply">
                   文章评论 <small class="font-theme text-muted">({$article.comments_count})</small>
                   <ul class="jieda" id="jieda">
-                    {volist name="comments" id="vo" empty= ""}
+                    {volist name="comments['data']" id="vo" empty= ""}
                     <li data-id="{$vo.id}" class="jieda-daan">
                       <a name="item-1111111111"></a>
                       <div class="detail-about detail-about-reply">
@@ -289,6 +290,7 @@
 {block name="script"}
 
 {:hook('taonyeditor')}
+{:hook('taoplayer')}
 
 <script type='text/javascript' src="{$Request.domain}/view/common/blog/js/theme.js"></script>
 <script>
diff --git a/view/taoler/index/article/detail.html b/view/taoler/index/article/detail.html
index ca7e35d..36a96c0 100644
--- a/view/taoler/index/article/detail.html
+++ b/view/taoler/index/article/detail.html
@@ -49,6 +49,7 @@
 			</div>
 			
         </div>
+          {:hook('taoplayerdiv')}
         <div class="detail-body photos">{$article.content|raw}</div>
 		{//管理}
 		{if (($article.upzip !== '') || session('?user_name'))}
@@ -84,7 +85,7 @@
       <div class="fly-panel detail-box" id="flyReply">
         <span style="font-size:18px;">评论 {$comments->count()}</span>
         <ul class="jieda" id="jieda">
-		{volist name="comments" id="vo" empty= ""}
+		{volist name="comments['data']" id="vo" empty= ""}
           <li data-id="{$vo.id}" class="jieda-daan">
             <a name="item-1111111111"></a>
             <div class="detail-about detail-about-reply">
@@ -173,6 +174,9 @@
 {include file="public/menu" /}
 {/block}
 {block name="script"}
+
+{:hook('taoplayer')}
+
 <script>
 var collectionFind = "{:url('Collection/find')}",
     articleJieset = "{:url('Article/jieset')}",
diff --git a/view/taoler/index/article/news/detail.html b/view/taoler/index/article/news/detail.html
index 2e07ff6..0bcce3e 100644
--- a/view/taoler/index/article/news/detail.html
+++ b/view/taoler/index/article/news/detail.html
@@ -31,6 +31,7 @@
         </div>
         <hr style="margin-bottom: 25px">
         {// 内容}
+        {:hook('taoplayerdiv')}
         <div class="detail-body photos" style="font-size: 18px;line-height: 200%;" id="content">{$article.content|raw}</div>
         {if (($article.upzip !== '') || session('?user_name'))}
           <div class="">
@@ -68,6 +69,8 @@
 
 {:hook('taonyeditor')}
 
+{:hook('taoplayer')}
+
 <script>
   var collectionFind    = "{:url('Collection/find')}",
     collection          = "{:url('collection/')}",
diff --git a/view/taoler/index/article/posts/detail.html b/view/taoler/index/article/posts/detail.html
index 11b26c8..d2dec4f 100644
--- a/view/taoler/index/article/posts/detail.html
+++ b/view/taoler/index/article/posts/detail.html
@@ -52,6 +52,7 @@
         </div>
         <hr>
         {// 内容}
+        {:hook('taoplayerdiv')}
         <div class="detail-body photos" id="content">{$article.content|raw}</div>
         {//下载}
         {if (($article.upzip !== '') || session('?user_name'))}
@@ -87,7 +88,7 @@
       <div class="fly-panel detail-box" id="flyReply">
         <span style="font-size:18px;">评论 {$article.comments_count}</span>
         <ul class="jieda" id="jieda">
-		      {volist name="comments" id="vo" empty= ""}
+		      {volist name="comments['data']" id="vo" empty= ""}
           <li data-id="{$vo.id}" class="jieda-daan">
             <a name="item-1111111111"></a>
             <div class="detail-about detail-about-reply">