采美百科页面绘制end

src/main/java/com/caimei/www/controller/authorized/supplier/SupplierPageController.java

@@ -62,6 +62,10 @@ public class SupplierPageController extends BaseController {
     private static final String MESSAGE = "supplier-center/message/list";
     /** 供应商维修详情 */
     private static final String REPAIR_DETAIL = "supplier-center/repair/detail";
+    /** 供应商文章列表 */
+    private static final String ARTICLE_LIST = "supplier-center/article/article-list";
+    /** 供应商文章编辑页面 */
+    private static final String ARTICLE_EDIT = "supplier-center/article/article-edit";
 
 
     /** 我的采美 */
@@ -211,5 +215,15 @@ public class SupplierPageController extends BaseController {
         return REPAIR_DETAIL;
     }
 
+    /** 供应商文章列表 */
+    @GetMapping("/supplier/article/list.html")
+    public String supplierArticleList() {
+        return ARTICLE_LIST;
+    }
 
+    /** 供应商文章编辑页面 */
+    @GetMapping("/supplier/article/edit.html")
+    public String supplierArticleEdit() {
+        return ARTICLE_EDIT;
+    }
 }

src/main/java/com/caimei/www/controller/unlimited/EncyclopediaController.java

@@ -0,0 +1,97 @@
+package com.caimei.www.controller.unlimited;
+
+import com.caimei.www.controller.BaseController;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+/**
+ * 采美文库
+ *
+ * @author : yuwenjun1997
+ * @date : 2021/11/23
+ */
+@Controller
+public class EncyclopediaController extends BaseController {
+
+    private static final String PRODUCT_LIST = "encyclopedia/product";
+    private static final String PRODUCT_DETAIL = "encyclopedia/product-detail";
+    private static final String INSTRUMENT_LIST = "encyclopedia/instrument";
+    private static final String INSTRUMENT_DETAIL = "encyclopedia/instrument-detail";
+    private static final String MORE_LIST = "encyclopedia/more";
+    private static final String SEARCH_PAGE = "encyclopedia/search";
+    private static final String CONTACT = "encyclopedia/contact";
+    private static final String ABOUT_US = "encyclopedia/about";
+    private static final String MAP = "encyclopedia/map";
+
+    /**
+     * 产品列表
+     */
+    @GetMapping("/encyclopedia/product.html")
+    public String getProductList() {
+        return PRODUCT_LIST;
+    }
+
+    /**
+     * 产品详情
+     */
+    @GetMapping("/encyclopedia/product-detail.html")
+    public String getProductDetail() {
+        return PRODUCT_DETAIL;
+    }
+
+    /**
+     * 仪器列表
+     */
+    @GetMapping("/encyclopedia/instrument.html")
+    public String getInstrumentList() {
+        return INSTRUMENT_LIST;
+    }
+
+    /**
+     * 仪器详情
+     */
+    @GetMapping("/encyclopedia/instrument-detail.html")
+    public String getInstrumentDetail() {
+        return INSTRUMENT_DETAIL;
+    }
+
+    /**
+     * 查看更多
+     */
+    @GetMapping("/encyclopedia/more.html")
+    public String getMoreList() {
+        return MORE_LIST;
+    }
+
+    /**
+     * 搜索列表
+     */
+    @GetMapping("/encyclopedia/search.html")
+    public String getSearchPage() {
+        return SEARCH_PAGE;
+    }
+
+    /**
+     * 联系我们
+     */
+    @GetMapping("/encyclopedia/contact.html")
+    public String getContact() {
+        return CONTACT;
+    }
+
+    /**
+     * 关于我们
+     */
+    @GetMapping("/encyclopedia/about.html")
+    public String getAboutUs() {
+        return ABOUT_US;
+    }
+
+    /**
+     * 关于我们位置定位
+     */
+    @GetMapping("/encyclopedia/map.html")
+    public String getMap() {
+        return MAP;
+    }
+}

src/main/resources/static/css/encyclopedia/base.css

@@ -0,0 +1,11 @@
+@charset "UTF-8";
+html{font-size:16px}
+body{background:#f5f5f5;color:#4a4f58}
+h1,h2,h3,h4,h5,h6{margin:0;font-size:16px;font-weight:normal}
+ul{margin:0;padding:0;list-style:none}
+dl,dt,dd{margin:0;padding:0}
+p{margin:0;font-size:16px}
+a{color:#4a4f58;text-decoration:none;transition:all 0.2s}
+img{display:block}
+input{outline:none}
+em{font-style:normal}

src/main/resources/static/css/encyclopedia/common.css

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+@media screen and (min-width:768px){
+::-webkit-scrollbar{width:4px;background-color:#f5f5f5}
+::-webkit-scrollbar-thumb{border-radius:10px;background-color:#999}
+.icon{display:block;width:20px;height:20px;background-image:url(/img/encyclopedia/icon.png);background-repeat:no-repeat}
+.icon.arrowdown{background-position:-277px -413px}
+.icon.arrowup{background-position:-308px -413px}
+.flex-between-center,.navbar .nav li a,.navbar .nav,.navbar .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.container{width:1200px;margin:0 auto}
+body{padding-top:80px}
+.navbar{width:100%;background:#fff;position:fixed;top:0;left:0;z-index:99999;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1)}
+.navbar .logo{width:136px;height:56px;overflow:hidden}
+.navbar .logo .menu-btn{display:none}
+.navbar .logo h1{font-size:0;margin:0}
+.navbar .nav li{height:80px;-webkit-box-sizing:border-box;box-sizing:border-box;border-color:#fff}
+.navbar .nav li.active{border-bottom:2px solid #e15616;background:#fef6f3}
+.navbar .nav li.active a{color:#e15616}
+.navbar .nav li a{height:80px;padding:0 28px}
+.navbar .nav li a:hover{color:#e15616}
+.navbar .search .search-control form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.navbar .search .search-control .search-input{display:block;width:272px;height:36px;padding:8px 16px;border:1px solid #e15616;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px 0 0 2px;color:#4a4f58}
+.navbar .search .search-control .search-input::-webkit-input-placeholder{color:#9aa5b5;font-size:14px}
+.navbar .search .search-control .search-input::-moz-placeholder{color:#9aa5b5;font-size:14px}
+.navbar .search .search-control .search-input:-ms-input-placeholder{color:#9aa5b5;font-size:14px}
+.navbar .search .search-control .search-input::-ms-input-placeholder{color:#9aa5b5;font-size:14px}
+.navbar .search .search-control .search-input::placeholder{color:#9aa5b5;font-size:14px}
+.navbar .search .search-control .search-btn{display:block;width:64px;height:36px;border:0;background:#e15616;border-radius:0px 2px 2px 0px;cursor:pointer;font-size:14px;color:#ffffff}
+.navbar .search .search-control .hot-keyword{display:none}
+.navbar .search .keywords{width:336px;font-size:12px;margin-top:4px;color:#ffb496;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
+.navbar .search .keywords .close-btn{display:none}
+.navbar .search .keywords a{color:#ffb496}
+.navbar .search .keywords a:hover{color:#e15616}
+.navbar .search .keywords em{margin:0 4px}
+.copyright{padding:24px 0;margin-top:24px;background:#2c3038}
+.copyright p{text-align:center;line-height:36px;color:#f1f1f1;font-size:14px}
+.copyright p .icp{display:inline-block;vertical-align:middle}
+.copyright p a{color:#f1f1f1}
+.copyright p a:hover{color:#fff}
+.navigate{position:fixed;right:20px;top:50%;z-index:9;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:88px;background:#fff;-webkit-box-shadow:0px 4px 8px rgba(74,79,88,0.16);box-shadow:0px 4px 8px rgba(74,79,88,0.16)}
+.navigate li{line-height:40px;height:40px;text-align:center}
+.navigate li.active a{color:#e15616;background:#fef6f3}
+.navigate li a{display:block;font-size:12px;color:#4a4f58}
+.navigate li a:hover{color:#e15616;background:#fef6f3}
+}
+@media screen and (max-width:768px){
+.flex,.flex-start-center,.navbar .search .search-control form,.flex-between-center,.navbar .search .search-control,.flex-center,.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword,.navbar .logo .menu-btn,.navbar .logo,.navbar .nav{display:-webkit-box;display:-ms-flexbox;display:flex}
+.flex-center,.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword,.navbar .logo .menu-btn,.navbar .logo,.navbar .nav{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-between-center,.navbar .search .search-control{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-start-center,.navbar .search .search-control form{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.icon{display:inline-block;width:6.4vw;height:6.4vw;background:url(/img/encyclopedia/icon_m.png) no-repeat;background-size:100vw auto}
+.icon.menu{display:block;background-position:0 0}
+.icon.close{display:block;background-position:-84.3vw -53vw}
+.icon.arrowdown{background-position:-42vw 0;-webkit-transform:rotateZ(180deg);-ms-transform:rotate(180deg);transform:rotateZ(180deg)}
+.icon.arrowup{background-position:-42vw 0;-webkit-transform:rotateZ(0deg);-ms-transform:rotate(0deg);transform:rotateZ(0deg)}
+.icon.arrowright{background-position:-42vw 0;-webkit-transform:rotateZ(90deg);-ms-transform:rotate(90deg);transform:rotateZ(90deg)}
+.icon.arrowleft{background-position:-42vw 0;-webkit-transform:rotateZ(-90deg);-ms-transform:rotate(-90deg);transform:rotateZ(-90deg)}
+.clearfix::after{content:"";display:block;width:0;clear:both}
+body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:29.5vw}
+.navbar{position:fixed;top:0;z-index:99999;width:100vw;height:29.5vw;background-color:#fff}
+.navbar .nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;left:0;z-index:99999;height:100vh;width:100vw;background:rgba(0,0,0,0.7);-webkit-box-sizing:border-box;box-sizing:border-box;display:none}
+.navbar .nav li{width:70.2vw;height:12.8vw;line-height:12.8vw;text-align:center;border-top:1px solid rgba(255,255,255,0.4)}
+.navbar .nav li.active a{color:#e15616}
+.navbar .nav li:first-child{border-top:0}
+.navbar .nav li a{display:block;color:#fff;font-size:4.2vw}
+.navbar .nav li .nav-close{display:inline-block;width:5.3vw;height:5.3vw;background:url(/img/encyclopedia/h5-nav-close-btn.png) no-repeat center;background-size:5.3vw}
+.navbar .logo{position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100vw;height:13.5vw}
+.navbar .logo .menu-btn{position:absolute;left:0;top:0;width:13.5vw;height:13.5vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.navbar .logo .menu-btn .active{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
+.navbar .logo h1{font-size:0}
+.navbar .logo img{height:9.8vw}
+.navbar .search .search-control{height:16vw;padding:0 4vw}
+.navbar .search .search-control .search-input{display:block;width:53.8vw;height:9.6vw;background:#ffffff;border:1px solid #e15616;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border-right:0;border-radius:0.2vw 0 0 0.2vw;padding:2.6vw 2.2vw}
+.navbar .search .search-control .search-input::-webkit-input-placeholder{font-size:3.4vw;color:#bec2c9}
+.navbar .search .search-control .search-input::-moz-placeholder{font-size:3.4vw;color:#bec2c9}
+.navbar .search .search-control .search-input:-ms-input-placeholder{font-size:3.4vw;color:#bec2c9}
+.navbar .search .search-control .search-input::-ms-input-placeholder{font-size:3.4vw;color:#bec2c9}
+.navbar .search .search-control .search-input::placeholder{font-size:3.4vw;color:#bec2c9}
+.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword{border:0;width:17.2vw;height:9.6vw;border-radius:0px 0.2vw 0.2vw 0px;font-size:3.4vw;color:#fff}
+.navbar .search .search-control .search-btn{background:#e15616}
+.navbar .search .search-control .hot-keyword{background:#f94b4b}
+.navbar .search .keywords{display:none;position:absolute;top:29.5vw;width:100vw;padding:4vw 8vw 1.4vw 4vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:0 0 1.6vw 1.6vw;}
+.navbar .search .keywords::after{content:"";display:block;width:0;clear:both}
+.navbar .search .keywords em,.navbar .search .keywords span{display:none}
+.navbar .search .keywords .close-btn{position:absolute;display:block;top:4vw;right:4vw;width:6vw;height:6vw;text-align:center;line-height:6vw}
+.navbar .search .keywords a{display:block;float:left;height:5.9vw;padding:0 2.4vw;margin-right:2.6vw;margin-bottom:2.6vw;line-height:5.9vw;background:#f94b4b;opacity:1;border-radius:2px;font-size:3.2vw;color:#fff}
+.navbar .search .keywords a:nth-of-type(2n){opacity:0.8}
+.navbar .search .keywords a:nth-of-type(3n){opacity:0.6}
+.navigate{display:none}
+.copyright{width:100vw;margin-top:2.4vw;background:#2c3038;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5vw 4vw;text-align:center}
+.copyright p{font-size:2.9vw;color:#eee;line-height:6vw}
+.copyright p img{display:inline-block;vertical-align:top}
+.copyright p a{color:#eee}
+.copyright p span.br{display:block}
+}

src/main/resources/static/css/encyclopedia/contact.css

@@ -0,0 +1,40 @@
+@charset "UTF-8";
+@media screen and (min-width:768px){
+.page-title{width:100%;height:240px;background:url(/img/encyclopedia/pc-page-title-bg.png) no-repeat center;background-size:auto 240px;overflow:hidden}
+.page-title .title{margin-top:55px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.page-title .title h2{color:#fff;width:124px;font-size:30px}
+.page-title .title .line{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-left:7px;height:1px;background:rgba(255,255,255,0.2)}
+.page-title .title .line::after{content:"";display:inline-block;width:16px;height:2px;background:#ffffff;opacity:0.72}
+.page-title .subtitle{margin-top:8px;font-size:12px;color:#ffffff;opacity:0.6}
+.page-title .subtitle span{display:inline-block;width:38px;height:1px;background:#ffffff;vertical-align:middle;margin-right:8px}
+.contact{position:relative;height:630px}
+.contact .content{height:713px;padding:40px 55px;background:#ffffff;border-radius:2px;-webkit-transform:translateY(-80px);-ms-transform:translateY(-80px);transform:translateY(-80px);-webkit-box-shadow:0 0 16px rgba(0,0,0,0.1);box-shadow:0 0 16px rgba(0,0,0,0.1);-webkit-box-sizing:border-box;box-sizing:border-box}
+.contact .content h2{font-size:18px;font-weight:bold}
+.contact .content p{margin-top:24px;font-size:14px;color:#93979f;text-align:justify;line-height:24px}
+.contact .content .address{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:60px 0 50px}
+.contact .content .address .line{height:56px;width:1px;background:#e3e6eb}
+.contact .content .address .col:nth-of-type(3){width:460px}
+.contact .content .address .col .dt{font-size:14px;color:#93979f}
+.contact .content .address .col .dd{margin-top:12px;font-size:16px;font-weight:bold}
+.contact .content .map{height:354px;margin-top:24px;background:#93979f}
+}
+@media screen and (max-width:768px){
+.flex-center,.page-title .container .subtitle,.page-title .container .title .line,.page-title .container,.page-title,.flex-center-between,.page-title .container .title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-center-between,.page-title .container .title{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.page-title{width:100vw;height:28vw;background:url(/img/encyclopedia/h5-page-title-bg.png) no-repeat;background-size:100vw 28vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4vw}
+.page-title .container{width:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.page-title .container .title{width:100%}
+.page-title .container .title h2{font-size:5.3vw;color:#ffffff}
+.page-title .container .title .line{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:66vw;height:0.2vw;background:rgba(255,255,255,0.2)}
+.page-title .container .title .line::after{content:"";display:inline-block;width:3vw;height:0.4vw;background:#ffffff;opacity:0.6}
+.page-title .container .subtitle{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin-top:2vw;font-size:2vw;color:#ffffff;opacity:0.6}
+.page-title .container .subtitle span{display:block;width:6.8vw;height:0.2vw;margin-right:2vw;background:#ffffff}
+.contact .content{padding:4vw;background:#fff}
+.contact .content h2{font-size:3.6vw;font-weight:bold}
+.contact .content p{margin-top:3.2vw;font-size:3vw;line-height:5.6vw;color:#93979f;text-align: justify;}
+.contact .content .address .col{margin:4vw 0}
+.contact .content .address .col .dt{font-size:3vw;color:#93979f}
+.contact .content .address .col .dd{margin-top:1.6vw;font-size:3.2vw;font-weight:bold;color:#4a4f58}
+.contact .content .map{width:92vw;height:60vw}
+.copyright{margin-top:0}
+}

src/main/resources/static/css/encyclopedia/detail.css

@@ -0,0 +1,81 @@
+@charset "UTF-8";
+@media screen and (min-width:768px){
+.flex-between-center,.article .section.description .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.container,.article{width:1200px;margin:0 auto}
+.article{margin-top:16px;background:#fff}
+.article .section{padding:24px}
+.article .section .title h2{font-size:20px;font-weight:bold;color:#4a4f58}
+.article .section .title .line{width:100%;height:1px;background:#e3e6eb;margin-top:4px}
+.article .section .title .line::before{content:"";display:block;width:20px;height:1px;background:#e15616}
+.article .section .content{padding-top:24px}
+.article .section .content .row{margin:16px 0}
+.article .section .content p{color:#4a4f58;font-size:14px;line-height:24px}
+.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{margin:16px 0;font-weight:bold}
+.article .section.description .content{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.article .section.description .content .content-left{width:986px}
+.article .section.description .content .content-left .desc{text-align:justify;font-size:14px;line-height:24px}
+.article .section.description .content .content-left .names{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article .section.description .content .content-left .alias{color:#93979f;margin-left:40px}
+.article .section.description .content .cover{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.article .section.description .content .cover img{width:120px;height:120px}
+.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb}
+.article .section.params .tr:first-child{border-top:1px solid;border-left:1px solid;border-color:#e3e6eb}
+.article .section.params .tr .group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50%}
+.article .section.params .tr .th,.article .section.params .tr .td{width:50%;line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}
+.article .section.params .tr .th a,.article .section.params .tr .td a{color:#e15616}
+.article .section.params .tr .th{background:#f4f5f8}
+.article .section.params .tr .td{background:#ffffff}
+.article .section.approve .content .name{font-size:14px;line-height:24px}
+.article .section.approve .content a{color:#e15616}
+.article .section.approve .content .img-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article .section.approve .content .img-list img{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;margin:16px 16px 0 0}
+.article .section.effect .content img{display:block;width:100%}
+.article .section.question .content .collapse{margin-bottom:12px}
+.article .section.question .content .collapse dt,.article .section.question .content .collapse dd{position:relative;font-size:14px;line-height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;text-align:justify}
+.article .section.question .content .collapse dt span,.article .section.question .content .collapse dd span{display:inline-block;width:20px;height:20px;margin-right:8px;text-align:center;line-height:20px;border-radius:2px;color:#fff;font-size:12px;position:absolute;top:2px;left:0}
+.article .section.question .content .collapse dt{font-weight:bold}
+.article .section.question .content .collapse dt span{background:#ffa457}
+.article .section.question .content .collapse dt .icon{position:absolute;right:0;top:2px;cursor:pointer}
+.article .section.question .content .collapse dd{padding-right:0;margin-top:4px}
+.article .section.question .content .collapse dd span{background:#34cc8c}
+}
+@media screen and (max-width:768px){
+.flex,.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group,.flex-between-center,.flex-center{display:-webkit-box;display:-ms-flexbox;display:flex}
+.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-between-center{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+body{padding-top:40.3vw}
+.navigate{display:block;background:#fff;top:29.5vw;position:fixed;-webkit-box-shadow:1vw 0 2vw rgba(0,0,0,0.1);box-shadow:1vw 0 2vw rgba(0,0,0,0.1)}
+.navigate ul{overflow-x:scroll;width:100vw;height:10.8vw;padding:4vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}
+.navigate ul::-webkit-scrollbar{display:none}
+.navigate ul li{position:relative;display:inline-block;height:6.8vw;margin-right:5.6vw}
+.navigate ul li:last-child{margin-right:0}
+.navigate ul li::after{content:"";position:absolute;left:50%;bottom:0.4vw;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;width:8.8vw;height:0.4vw;background:#fff}
+.navigate ul li a{display:block;font-size:3.2vw;line-height:5vw;color:#9498a0}
+.navigate ul li.active a{color:#e15616}
+.navigate ul li.active::after{background:#e15616}
+.article{padding:4vw;margin-top:2.4vw;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+.article .section .title h2{font-size:3.6vw;font-weight:bold}
+.article .section .title .line{width:100%;height:1px;margin-top:1vw;background:#e3e6eb}
+.article .section .title .line::before{content:"";display:block;width:3.5vw;height:0.2vw;background:#e15616}
+.article .section .content{padding:3.2vw 0}
+.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{font-weight:bold;margin:3.2vw 0}
+.article .section .content p{font-size:3.2vw;line-height:5.6vw;text-align:justify;margin:1.6vw 0}
+.article .section.description .names{font-size:3.2vw;line-height:5.6vw}
+.article .section.description .names .alias{color:#93979f}
+.article .section.description .desc{text-align:justify;font-size:3.2vw;line-height:5.6vw;margin:3.2vw 0}
+.article .section.description .cover img{display:block;width:23.6vw;height:23.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px dashed #e3e6eb}
+.article .section.params .tr{line-height:5.6vw}
+.article .section.params .tr .group{font-size:3.2vw;margin:1.6vw 0}
+.article .section.params .tr .group .th::after{content:"："}
+.article .section.approve .name{font-size:3.2vw}
+.article .section.approve .img-list img{display:block;width:23.6vw;height:23.6vw;border:1px dashed #e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:2.4vw;margin-top:2.4vw}
+.article .section.effect img{display:block;max-width:100%}
+.article .section.question .collapse dt,.article .section.question .collapse dd{font-size:3.2vw}
+.article .section.question .collapse dt span,.article .section.question .collapse dd span{display:inline-block;vertical-align:middle;width:4vw;height:4vw;border-radius:0.2vw;text-align:center;line-height:4vw;color:#fff;margin-right:2.4vw}
+.article .section.question .collapse dt{position:relative;padding-right:6.4vw;height:6.4vw;line-height:6.4vw;margin:1.6vw 0}
+.article .section.question .collapse dt span{background:#ffa457}
+.article .section.question .collapse dt .icon{position:absolute;right:0;top:0}
+.article .section.question .collapse dd{line-height:5.6vw;margin:1.6vw 0;text-align:justify}
+.article .section.question .collapse dd span{background:#34cc8c}
+}

src/main/resources/static/css/encyclopedia/index.css

@@ -0,0 +1,93 @@
+@charset "UTF-8";
+@media screen and (min-width:768px){
+.flex-between-center,.floor .article .section .content .footer,.floor .emtyp,.category .name,.category{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.banner{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}
+.banner img{width:1920px;height:510px}
+.category{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:1200px;height:56px;background:#fff;padding:0 24px;margin-top:32px;line-height:56px;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}
+.category .name{width:120px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.category .name em{display:block;width:1px;height:24px;background:#e3e6eb;margin-right:30px;margin-top:16px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.category .category-list{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.category .category-list ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.category .category-list ul li{padding-right:40px}
+.category .category-list ul li.active a{color:#e15616}
+.category .category-list ul li a:hover{color:#e15616}
+.category .collapse{font-size:14px;color:#93979f;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}
+.category .collapse span{display:block}
+.floor{overflow:hidden}
+.floor .emtyp{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:1200px;height:812px;margin-top:24px;background:#ffffff;border-radius:2px}
+.floor .emtyp p{margin-top:24px;color:#4a4f58}
+.floor .search-title{margin-top:24px}
+.floor .search-title span{color:#e15616}
+.floor .floor-title{position:relative;width:1200px;margin:24px auto 0;height:56px;background:#f0f5ff;border-radius:2px}
+.floor .floor-title .h5-more-btn{display:none}
+.floor .floor-title h2{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:100px;line-height:56px;font-size:20px;font-weight:bold;color:#597ef7;z-index:9}
+.floor .floor-title img{position:absolute;width:100%;height:100%;left:0;top:0;z-index:8}
+.floor .article::after{content:"";display:block;visibility:hidden;width:0;clear:both}
+.floor .article .section{float:left;width:384px;height:546px;margin:24px 24px 0 0;background:#ffffff;border-radius:2px;overflow:hidden;-webkit-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s}
+.floor .article .section:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
+.floor .article .section:hover h3{color:#e15616}
+.floor .article .section:nth-child(3n){margin-right:0}
+.floor .article .section .cover{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:260px}
+.floor .article .section .cover img{width:246px;height:246px}
+.floor .article .section .content{padding:16px 16px 0;-webkit-box-sizing:border-box;box-sizing:border-box}
+.floor .article .section .content h3{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;font-weight:bold}
+.floor .article .section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:52px;color:#4a4f58;margin-top:12px;line-height:26px;text-align:justify;word-break:break-all}
+.floor .article .section .content .question{margin:12px 0;height:78px}
+.floor .article .section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#93979f;line-height:26px;font-size:14px}
+.floor .article .section .content .tag-list{height:24px}
+.floor .article .section .content .tag-list .tag{display:inline-block;height:24px;line-height:24px;background:#fef6f3;border-radius:2px;font-size:12px;color:#e15616;padding:0 8px;margin-right:8px}
+.floor .article .section .content .dashed-line{margin-top:12px;height:0px;border-bottom:1px dashed #b8bfca}
+.floor .article .section .content .footer{height:50px;line-height:50px;font-size:14px;color:#93979f}
+.floor .more{padding:32px 0 16px}
+.floor .more .more-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:98px;height:32px;margin:0 auto;border:1px solid #cccccc;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px;color:#909090;cursor:pointer}
+.floor .more .more-btn:hover{color:#e15616;border-color:#e15616}
+}
+@media screen and (max-width:768px){
+.flex,.flex-start-center,.floor .article .section .content .tag-list,.flex-between-center,.floor .article .section .content .footer,.floor .article .section a,.floor .floor-title,.flex-center,.banner{display:-webkit-box;display:-ms-flexbox;display:flex}
+.flex-center,.banner{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-between-center,.floor .article .section .content .footer,.floor .article .section a,.floor .floor-title{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-start-center,.floor .article .section .content .tag-list{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.banner{width:100vw;height:51vw;overflow:hidden}
+.banner img{display:block;height:51vw}
+.navigate{display:none !important}
+.category{height:10.8vw}
+.category .name,.category .collapse{display:none}
+.category .category-list{background:#fff}
+.category .category-list.fixed{top:29.5vw;position:fixed;z-index:9999;-webkit-box-shadow:0 0.2vw 3vw rgba(0,0,0,0.1);box-shadow:0 0.2vw 3vw rgba(0,0,0,0.1)}
+.category .category-list ul{overflow-x:scroll;width:100vw;height:10.8vw;padding:4vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}
+.category .category-list ul::-webkit-scrollbar{display:none}
+.category .category-list ul li{position:relative;display:inline-block;height:6.8vw;margin-right:5.6vw}
+.category .category-list ul li:last-child{margin-right:0}
+.category .category-list ul li::after{content:"";position:absolute;left:50%;bottom:0.4vw;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;width:8.8vw;height:0.4vw;background:#fff}
+.category .category-list ul li a{display:block;font-size:3.8vw;line-height:5vw;color:#9498a0}
+.category .category-list ul li.active a{color:#e15616}
+.category .category-list ul li.active::after{background:#e15616}
+.floor{padding:4vw;margin-top:2.4vw;background:#fff}
+.floor .floor-title{line-height:6.4vw;height:6.4vw;padding-bottom:1.6vw}
+.floor .floor-title img{display:none}
+.floor .floor-title h2{width:64vw;font-size:3.6vw}
+.floor .floor-title .h5-more-btn span{margin-right:-2vw;font-size:2.6vw;color:#93979f}
+.floor .floor-title .h5-more-btn .icon{margin-right:-2vw;vertical-align:middle}
+.floor .article .section{padding-top:4vw;border-top:1px solid rgba(0,0,0,0.1)}
+.floor .article .section a{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.floor .article .section .cover{margin-right:2.4vw}
+.floor .article .section .cover img{display:block;width:30.4vw;height:30.4vw;border:1px solid #e1e1e1}
+.floor .article .section .content h3{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold}
+.floor .article .section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw}
+.floor .article .section .content .question{height:10vw;margin:2.4vw 0}
+.floor .article .section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:2.6vw;line-height:5vw;color:#93979f}
+.floor .article .section .content .question p:last-child{display:none}
+.floor .article .section .content .tag-list{height:4.8vw;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.floor .article .section .content .tag-list .tag{height:4.8vw;padding:0 1.2vw;margin-right:1.6vw;background:#fef6f3;border-radius:0.2vw;font-size:2.6vw;color:#e15616;line-height:4.8vw}
+.floor .article .section .content .tag-list .tag:last-child{display:none}
+.floor .article .section .content .dashed-line{display:none}
+.floor .article .section .content .footer{height:8vw;font-size:2.6vw;color:#93979f;line-height:8vw}
+.floor .more{display:none}
+.search-floor{margin-top:0;padding:0}
+.search-floor .search-title{position:fixed;top:29.5vw;left:0;z-index:999;width:100vw;line-height:10vw;padding:0 4vw;background:#f5f5f5;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box}
+.search-floor .search-title span{color:#e15616}
+.search-floor .emtyp{padding:10vw 0 4vw;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:75vh}
+.search-floor .emtyp p{margin-top:5vw;font-size:3.2vw;color:#4a4f58}
+.search-floor .article{padding:10vw 4vw 0}
+.search-floor .article .section:first-child{border-top:0}
+}

src/main/resources/static/css/encyclopedia/map.css

@@ -0,0 +1,28 @@
+@charset "UTF-8";
+@media screen and (min-width:768px){body{margin:0;font:13px/1.5 "Microsoft YaHei","Helvetica Neue","Sans-Serif";min-height:354px;min-width:1090px}
+.my-map{margin:0 auto;width:1090px;height:354px}
+.my-map .icon{background:url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat}
+.my-map .icon-twig{height:27px;width:30px}
+.my-map .icon-twig-red{background-position:-187px -5px}
+.amap-container{height:100%}
+.amap-info-content{background:-o-linear-gradient(299deg,#f28f31 0%,#e15616 100%);background:linear-gradient(151deg,#f28f31 0%,#e15616 100%);border:0;-webkit-box-shadow:unset;box-shadow:unset}
+.amap-info-close{color:#fff}
+.amap-info-sharp{width:0;height:0 !important;border-style:solid;border-width:24px 24px 0 0;border-color:#e76b20 transparent transparent transparent;background:transparent}
+.myinfowindow{width:240px;min-height:50px}
+.myinfowindow h5{color:#fff;margin:0;height:20px;line-height:20px;overflow:hidden;font-size:14px;font-weight:bold;width:220px;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}
+.myinfowindow div{margin-top:10px;line-height:20px;font-size:13px;color:#fff}
+}
+
+@media screen and (max-width:768px){body{margin:0;font:13px/1.5 "Microsoft YaHei","Helvetica Neue","Sans-Serif"}
+.my-map{margin:0 auto;width:100vw;height:60vw}
+.my-map .icon{background:url(//a.amap.com/lbs-dev-yuntu/static/web/image/tools/creater/marker.png) no-repeat}
+.my-map .icon-twig{height:27px;width:30px}
+.my-map .icon-twig-red{background-position:-187px -5px}
+.amap-container{height:100%}
+.amap-info-content{background:-o-linear-gradient(299deg,#f28f31 0%,#e15616 100%);background:linear-gradient(151deg,#f28f31 0%,#e15616 100%);border:0;-webkit-box-shadow:unset;box-shadow:unset}
+.amap-info-close{color:#fff}
+.amap-info-sharp{width:0;height:0 !important;border-style:solid;border-width:24px 24px 0 0;border-color:#e76b20 transparent transparent transparent;background:transparent}
+.myinfowindow{width:240px;min-height:50px}
+.myinfowindow h5{color:#fff;margin:0;height:20px;line-height:20px;overflow:hidden;font-size:14px;font-weight:bold;width:220px;-o-text-overflow:ellipsis;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}
+.myinfowindow div{margin-top:10px;line-height:20px;font-size:13px;color:#fff}
+}

src/main/resources/static/css/encyclopedia/normalize.css

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+html{line-height:1.15;-webkit-text-size-adjust:100%}
+body{margin:0}
+main{display:block}
+h1{font-size:2em;margin:0.67em 0}
+hr{box-sizing:content-box;height:0;overflow:visible}
+pre{font-family:monospace,monospace;font-size:1em}
+a{background-color:transparent}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}
+code,kbd,samp{font-family:monospace,monospace;font-size:1em}
+small{font-size:80%}
+sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}
+sup{top:-0.5em}
+img{border-style:none}
+button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
+button,input{overflow:visible}
+button,select{text-transform:none}
+button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
+button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{padding:0.35em 0.75em 0.625em}
+legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
+progress{vertical-align:baseline}
+textarea{overflow:auto}
+[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
+[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
+[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
+[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+details{display:block}
+summary{display:list-item}
+template{display:none}
+[hidden]{display:none}

src/main/resources/static/css/supplier-center/article/article-edit.css

@@ -0,0 +1,305 @@
+input[hidden] {
+    display: none !important;
+}
+
+.form {
+    width: 500px;
+    margin: 0 auto;
+    color: #22272E;
+}
+
+.form .form-item {
+    width: 100%;
+    position: relative;
+    padding-bottom: 24px;
+    margin-top: 16px;
+}
+
+.form .form-label {
+    display: block;
+    line-height: 26px;
+    font-size: 14px;
+    color: #627386;
+}
+
+.form .form-label em {
+    display: none;
+    color: #FF2A2A;
+    font-style: normal;
+    margin-right: 2px;
+}
+.form .form-item[required] .form-label em {
+    display: inline;
+}
+
+.form .form-item .errTips {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    line-height: 24px;
+    white-space: nowrap;
+    color: red;
+    font-size: 12px;
+}
+
+.form .form-item .errTips::before {
+    content: "×";
+    font-size: 12px;
+    display: block;
+    width: 14px;
+    height: 14px;
+    margin-right: 2px;
+    line-height: 14px;
+    background: #FF2A2A;
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+}
+
+
+.form .form-control::placeholder {
+    font-size: 14px;
+    color: #9AA5B5;
+}
+
+.form .form-control {
+    outline: none;
+    display: block;
+    width: 100%;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    border: 1px solid #B8BFCA;
+    border-radius: 2px;
+}
+
+.form .form-select {
+    color: #627386;
+}
+
+.form .control-group {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.form .control-group .form-control {
+    width: auto;
+}
+
+.form .form-button {
+    padding: 0 16px;
+    height: 36px;
+    line-height: 36px;
+    background: #FFE6DC;
+    border: 1px solid #E15616;
+    border-radius: 2px;
+    font-size: 14px;
+    color: #E15616;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.form .upload-control {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 100px;
+    height: 100px;
+    background: #FFFFFF;
+    border: 1px solid #E2E7EF;
+    border-radius: 2px;
+    color: #9AA5B5;
+    cursor: pointer;
+}
+
+.form .upload-control span:first-child {
+    font-size: 38px;
+}
+
+.form .upload-control span:last-child {
+    font-size: 14px;
+}
+
+.form .radio-group {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.form .radio-control input[type="radio"] {
+    display: none;
+}
+
+.form .radio-control label.radio {
+    position: relative;
+    padding-left: 26px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #22272E;
+}
+
+.form .radio-control label.radio::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #B8BFCA;
+    border-radius: 50%;
+    box-sizing: border-box;
+}
+
+.form .radio-control label.radio::after {
+    content: "";
+    display: block;
+    opacity: 0;
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 8px;
+    height: 8px;
+    background: #E15616;
+    border-radius: 50%;
+}
+
+.form .radio-control input[type="radio"]:checked + label.radio {
+    color: #E15616;
+}
+
+.form .radio-control input[type="radio"]:checked + label.radio::before {
+    border-color: #E15616;
+}
+
+.form .radio-control input[type="radio"]:checked + label.radio::after {
+    opacity: 1;
+}
+
+.form .btn {
+    width: 232px;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 18px;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.form .btn.break {
+    background: #FFE6DC;
+    border: 1px solid #E15616;
+    border-radius: 2px;
+    color: #E15616;
+}
+
+.form .btn.submit {
+    background: #E15616;
+    color: #FFFFFF;
+}
+
+.article-edit {
+
+}
+.article-edit .navLayout .right { width: auto;}
+.article-edit .navLayout .right-box{ width: 968px;}
+.article-edit .row {
+    box-sizing: border-box;
+    padding: 24px 0;
+    background: #FFFFFF;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
+}
+
+.article-edit .top-tip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 60px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 20px;
+    color: #E15616;
+    background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%);
+}
+
+.article-edit .tag-list {
+    width: 100%;
+    padding: 16px 0;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.article-edit .tag-list .tag {
+    position: relative;
+    padding: 0 6px;
+    height: 28px;
+    line-height: 28px;
+    background: #FFF3E5;
+    border-radius: 2px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #4A4F58;
+}
+
+.article-edit .tag-list .tag .close {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    width: 16px;
+    height: 16px;
+    background: #F94B4B;
+    border-radius: 50%;
+    font-size: 10px;
+    line-height: 16px;
+    text-align: center;
+    color: #fff;
+    cursor: pointer;
+}
+
+.article-edit .radio-group .form-label {
+    width: 80px;
+}
+
+.article-edit .control-group .tagName {
+    width: 388px;
+}
+
+.article-edit .control-group .addTag {
+    width: 90px;
+}
+
+.article-edit .radio-control {
+    margin-right: 32px;
+}
+
+.article-edit .btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.article-edit .btns .btn {
+    margin: 0 16px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+

src/main/resources/static/css/supplier-center/article/article-list.css

@@ -0,0 +1,184 @@
+.top-row {
+    width: 968px;
+    padding: 12px 0 12px 236px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.top-row .crumbs {
+    width: auto;
+    padding: 0;
+    margin: 0;
+}
+
+.top-row .hot-tip {
+    font-size: 12px;
+    color: #E15616;
+}
+
+.form-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.form-section .form-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-bottom: 18px;
+}
+
+.form-section .form-item .form-label {
+    margin-right: 8px;
+    font-size: 14px;
+    color: #627386;
+}
+
+.form-section .form-item .form-control {
+    outline: none;
+    width: 210px;
+    height: 36px;
+    padding: 8px 12px;
+    background: #FFFFFF;
+    border: 1px solid #B8BFCA;
+    border-radius: 2px;
+    box-sizing: border-box;
+}
+
+.form-section .form-item .form-control::placeholder {
+    font-size: 14px;
+    color: #9AA5B5;
+}
+
+.form-section .form-item .form-select {
+    color: #627386;
+}
+
+.form-section .form-item .form-button {
+    height: 36px;
+    padding: 0 30px;
+    margin-left: 16px;
+    font-size: 14px;
+    line-height: 36px;
+    border-radius: 2px;
+    cursor: pointer;
+}
+
+.form-section .buttons {
+    justify-content: flex-start;
+}
+
+.form-section .form-item .form-button.search {
+    color: #FFFFFF;
+    background: #E15616;
+}
+
+
+.form-section .form-item .form-button.add {
+    background: #FFE6DC;
+    border: 1px solid #E15616;
+    color: #E15616;
+}
+
+.navLayout {
+    min-height: 500px;
+}
+
+.article-list {
+}
+
+.article-list .row {
+    width: 100%;
+    padding: 18px 20px 0;
+    margin-bottom: 16px;
+    box-sizing: border-box;
+    background: #fff;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.07);
+}
+
+.article-list .table, .table tr, .table th, .table td {
+    border: 0;
+}
+
+.article-list .table {
+    width: 100%;
+}
+
+.article-list .table th {
+    font-size: 14px;
+    color: #627386;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #E2E7EF;
+}
+
+.article-list .table td {
+    font-size: 12px;
+    color: #22272E;
+    text-align: center;
+}
+
+.article-list .table td {
+    padding: 16px 0;
+}
+
+.article-list .table .title,
+.article-list .table .time,
+.article-list .table .option {
+    width: 100px;
+}
+
+.article-list .table .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.article-list .table .option .form-button {
+    width: 40px;
+    height: 22px;
+    margin: 2px 0;
+    line-height: 22px;
+    text-align: center;
+    background: #FFE6DC;
+    border: 1px solid #E15616;
+    border-radius: 2px;
+    font-size: 12px;
+    color: #E15616;
+    cursor: pointer;
+}
+
+.article-list .table .cover {
+    display: block;
+    width: 48px;
+    height: 48px;
+    border: 1px dashed #E2E7EF;
+}
+
+.article-list .state {
+    color: #22272E;
+}
+
+.article-list .state.success {
+    color: #34CC8C;
+}
+
+.article-list .state.warning {
+    color: #F9A94B;
+}
+
+.article-list .state.danger {
+    color: #F94B4B;
+}
+
+.article-list .state.primary {
+    color: #1890F9;
+}
+
+.article-list .pageWrap {
+    width: 100% !important;
+}

src/main/resources/static/css/supplier-center/article/table.css

@@ -0,0 +1,679 @@
+/*!
+ * Generated using the Bootstrap Customizer (https://v3.bootcss.com/customize/)
+ */
+/*!
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html {
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+    display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+[hidden],
+template {
+    display: none;
+}
+
+a {
+    background-color: transparent;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+dfn {
+    font-style: italic;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    border: 0;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+figure {
+    margin: 1em 40px;
+}
+
+hr {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+pre {
+    overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}
+
+button {
+    overflow: visible;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button;
+    cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input {
+    line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+    border: 0;
+    padding: 0;
+}
+
+textarea {
+    overflow: auto;
+}
+
+optgroup {
+    font-weight: bold;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 10px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+input,
+button,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+a {
+    color: #337ab7;
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+    color: #23527c;
+    text-decoration: underline;
+}
+
+a:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+figure {
+    margin: 0;
+}
+
+img {
+    vertical-align: middle;
+}
+
+.img-responsive {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.img-rounded {
+    border-radius: 6px;
+}
+
+.img-thumbnail {
+    padding: 4px;
+    line-height: 1.42857143;
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    -webkit-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+}
+
+.img-circle {
+    border-radius: 50%;
+}
+
+hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #eeeeee;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+}
+
+[role="button"] {
+    cursor: pointer;
+}
+
+table {
+    background-color: transparent;
+}
+
+table col[class*="col-"] {
+    position: static;
+    display: table-column;
+    float: none;
+}
+
+table td[class*="col-"],
+table th[class*="col-"] {
+    position: static;
+    display: table-cell;
+    float: none;
+}
+
+caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777777;
+    text-align: left;
+}
+
+th {
+    text-align: left;
+}
+
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 1px solid #dddddd;
+}
+
+.table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dddddd;
+}
+
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+    border-top: 0;
+}
+
+.table > tbody + tbody {
+    border-top: 2px solid #dddddd;
+}
+
+.table .table {
+    background-color: #ffffff;
+}
+
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+    padding: 5px;
+}
+
+.table-bordered {
+    border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+    border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+    border-bottom-width: 2px;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.table-hover > tbody > tr:hover {
+    background-color: #f5f5f5;
+}
+
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+    background-color: #f5f5f5;
+}
+
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr:hover > .active,
+.table-hover > tbody > tr.active:hover > th {
+    background-color: #e8e8e8;
+}
+
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+    background-color: #dff0d8;
+}
+
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr:hover > .success,
+.table-hover > tbody > tr.success:hover > th {
+    background-color: #d0e9c6;
+}
+
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+    background-color: #d9edf7;
+}
+
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr:hover > .info,
+.table-hover > tbody > tr.info:hover > th {
+    background-color: #c4e3f3;
+}
+
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+    background-color: #fcf8e3;
+}
+
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr:hover > .warning,
+.table-hover > tbody > tr.warning:hover > th {
+    background-color: #faf2cc;
+}
+
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+    background-color: #f2dede;
+}
+
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr:hover > .danger,
+.table-hover > tbody > tr.danger:hover > th {
+    background-color: #ebcccc;
+}
+
+.table-responsive {
+    min-height: .01%;
+    overflow-x: auto;
+}
+
+@media screen and (max-width: 767px) {
+    .table-responsive {
+        width: 100%;
+        margin-bottom: 15px;
+        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        border: 1px solid #dddddd;
+    }
+
+    .table-responsive > .table {
+        margin-bottom: 0;
+    }
+
+    .table-responsive > .table > thead > tr > th,
+    .table-responsive > .table > tbody > tr > th,
+    .table-responsive > .table > tfoot > tr > th,
+    .table-responsive > .table > thead > tr > td,
+    .table-responsive > .table > tbody > tr > td,
+    .table-responsive > .table > tfoot > tr > td {
+        white-space: nowrap;
+    }
+
+    .table-responsive > .table-bordered {
+        border: 0;
+    }
+
+    .table-responsive > .table-bordered > thead > tr > th:first-child,
+    .table-responsive > .table-bordered > tbody > tr > th:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+    .table-responsive > .table-bordered > thead > tr > td:first-child,
+    .table-responsive > .table-bordered > tbody > tr > td:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+        border-left: 0;
+    }
+
+    .table-responsive > .table-bordered > thead > tr > th:last-child,
+    .table-responsive > .table-bordered > tbody > tr > th:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+    .table-responsive > .table-bordered > thead > tr > td:last-child,
+    .table-responsive > .table-bordered > tbody > tr > td:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+        border-right: 0;
+    }
+
+    .table-responsive > .table-bordered > tbody > tr:last-child > th,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+    .table-responsive > .table-bordered > tbody > tr:last-child > td,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+        border-bottom: 0;
+    }
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: " ";
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.center-block {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.pull-right {
+    float: right !important;
+}
+
+.pull-left {
+    float: left !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.show {
+    display: block !important;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.text-hide {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.affix {
+    position: fixed;
+}

src/main/resources/static/js/encyclopedia/common.js

@@ -0,0 +1,361 @@
+"use strict";
+
+var scrollFlag = false;
+var navbarIndex = 0;
+/**
+ * 防抖
+ * @param {*} func 执行数
+ * @param {*} wait 等待时间
+ * @param {*} immediate 是否立即执行
+ * @returns
+ */
+
+function debounce(func, wait, immediate) {
+  var timeout, result;
+  return function () {
+    var context = this;
+    var args = arguments;
+    if (timeout) clearTimeout(timeout);
+
+    if (immediate) {
+      var callNow = !timeout;
+      timeout = setTimeout(function () {
+        timeout = null;
+      }, wait);
+      if (callNow) result = func.apply(context, args);
+    } else {
+      timeout = setTimeout(function () {
+        func.apply(context, args);
+      }, wait);
+    }
+
+    return result;
+  };
+} // 还原滚动状态
+
+
+var resetScrollFlag = debounce(function () {
+  scrollFlag = false;
+}, 200);
+/**
+ * 监听视窗大小
+ * @param {*} size 视窗断点大小
+ * @param {*} callback 回调
+ */
+
+function responseScreen(size, callback) {
+  var isPc = $(window).width() > size; // callback(isPc)
+
+  $(window).resize(function () {
+    if (!isPc && $(this).width() > size) {
+      isPc = true;
+      callback(isPc);
+    } else if (isPc && $(this).width() < size) {
+      isPc = false;
+      callback(isPc);
+    }
+  });
+}
+/**
+ * 菜单栏折叠展开 父子容器
+ * @param {*} bindEl 触发事件的元素
+ * @param {*} eventName 触发折叠的事件名
+ * @param {*} callback 事件触发后的回调
+ * 需要添加指向父标签的 data-collapse-parent-target="id" 属性
+ * 需要添加指向子标签的 data-collapse-children-target="id" 属性
+ */
+
+
+function collapseToggle(bindEl, eventName, callback) {
+  var isCollapse = false; // 获取元素
+
+  bindEl = $(bindEl);
+  var parent = $(bindEl.attr('data-collapse-parent-target'));
+  var children = $(bindEl.attr('data-collapse-children-target'));
+  parent.css('transition', 'height 0.4s'); // 获取父子容器高度
+
+  var parentHeight = parent.height();
+  var childrenHeight = children.height();
+  if (parentHeight >= childrenHeight) return bindEl.hide(); // 绑定点击事件
+
+  bindEl.on(eventName, function () {
+    var height = isCollapse ? parentHeight : childrenHeight;
+    parent.height(height); //为父元素重新设置高度
+
+    isCollapse = !isCollapse; // 执行回调
+
+    callback({
+      bindEl: bindEl,
+      parent: parent,
+      children: children,
+      height: height,
+      isCollapse: isCollapse
+    });
+  });
+}
+/**
+ * 设置高亮
+ * @param {*} selector 节点选择器
+ * @param {*} index 被标记高亮的节点索引
+ */
+
+
+var activeCategory = debounce(function (selector, index) {
+  if (!selector || typeof index !== 'number') return;
+  var activeWidth = 0;
+  var selectorList = selector.split(',');
+  $('.navigate li, .category-list li').removeClass('active');
+  selectorList.forEach(function (el) {
+    $(el.trim()).eq(index).addClass('active');
+    activeWidth = $(el.trim()).eq(index).width();
+  });
+  var offset = ($(window).width() - activeWidth) / 2;
+  categoryScrollTo('#category ul', 0, offset);
+}, 200);
+/**
+ *
+ * @param {*} el 监听的元素
+ * @param {*} callback 回调
+ */
+
+function stickyResponse(el) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var callback = arguments.length > 2 ? arguments[2] : undefined;
+  $(window).scroll(function () {
+    var scrollTop = $(this).scrollTop();
+
+    if (scrollTop >= offset) {
+      callback({
+        sticky: true,
+        scrollTop: scrollTop
+      });
+    } else {
+      callback({
+        sticky: false,
+        scrollTop: scrollTop
+      });
+    }
+  });
+}
+/**
+ *
+ * @param {*} offsetEls 需要获取的元素列表
+ */
+
+
+function getScrollOffset(offsetEl) {
+  if (typeof offsetEl === 'string') {
+    return $(offsetEl).height();
+  }
+
+  var height = 0;
+  offsetEl.forEach(function (el) {
+    height += $(el).height();
+  });
+  return height;
+}
+/**
+ * 侧边栏点击跳转
+ * @param {*} selector 侧边栏节点选择器
+ * @param {*} floorEl 绑定的楼层节点选择器
+ * @param {*} offset 滚动偏移
+ * @param {*} callback 跳转后的回调
+ */
+
+
+function bindCategory(selector, floorEl) {
+  var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var callback = arguments.length > 3 ? arguments[3] : undefined;
+  $(selector).on('click', function () {
+    scrollFlag = true;
+    resetScrollFlag();
+    var index = $(this).index();
+    var floor = $(floorEl).eq(index);
+    if (!floor.length) return;
+    var floorTop = floor.offset().top - offset;
+    $('html ,body').animate({
+      scrollTop: floorTop
+    }, 400, 'linear', function () {
+      callback(index);
+    });
+  });
+}
+/**
+ * 监听页面滚动并观察元素是否在滚动区间
+ * @param {*} selector 被观察的元素节点选择器
+ * @param {*} offset 滚动偏移
+ * @param {*} callback 观察命中的回调
+ */
+
+
+function pageScrollObserve(selector) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var callback = arguments.length > 2 ? arguments[2] : undefined;
+  $(window).scroll(function () {
+    if (scrollFlag) return;
+    var scrollTop = $(this).scrollTop();
+
+    if (scrollTop < $(selector).eq(0).offset().top - offset) {
+      callback(null, -1);
+    }
+
+    $(selector).each(function (index, el) {
+      var offsetTop = $(el).offset().top - offset;
+      var height = $(el).height();
+
+      if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
+        callback(el, index);
+      }
+    });
+  });
+}
+/**
+ * 动态生成侧边导航
+ * @param {*} selector 从该节点元素中获取文本
+ * @param {*} bindEl 生成的导航要挂载的节点
+ */
+
+
+function makeNavigate(selector, bindEl) {
+  var ul = document.createElement('ul');
+  $(selector).each(function (index, el) {
+    var li = document.createElement('li');
+    var a = document.createElement('a');
+    a.innerText = $(el).text();
+    a.setAttribute('href', '#' + $(el).text());
+    li.appendChild(a);
+    if (index === 0) li.classList.add('active');
+    ul.appendChild(li);
+  });
+  $(bindEl).append(ul);
+}
+/**
+ * 可折叠楼层
+ * @param {*} options
+ * root: '.floor', // 根节点元素
+ * collapse: '.article', //可折叠元素节点
+ * item: '.section', // 子元素节点
+ * touch: '.more-btn', // 事件绑定元素节点
+ * size: 6, // 每页最多显示的子元素个数
+ * col: 3, // 每列最多显示的子元素个数
+ * minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
+ * open: function(floor){}
+ * close: function(floor){}
+ */
+
+
+function makeFloorList(options) {
+  var row = options.size / options.col; //每列显示的个数
+
+  var floorMap = [];
+  var minHeight = options.minHeight; // 最小高度
+
+  $(options.root).each(function (index, el) {
+    var floorInfo = floorMap[index] = Object.create(null);
+    var selector = floorInfo.$floor = $(el); // 当前楼层对象
+    floorInfo.count = selector.find(options.item).length; // 总数
+    floorInfo.step = Math.ceil(floorInfo.count / options.size); // 可展开步数
+    floorInfo.current = 1; // 当前步数
+    floorInfo.hasMore = floorInfo.count > options.size; // 是否还有更多
+    // 初始化高度，只有在可展开时设置初始高度
+    if (floorInfo.hasMore) {
+      floorInfo.height = minHeight * row * floorInfo.current;
+      selector.find(options.collapse).height(floorInfo.height);
+      selector.find(options.collapse).css({
+        overflow: 'hidden',
+        transition: 'height .4s'
+      });
+    }
+  });
+  // 为按钮绑定事件
+  floorMap.forEach(function (floor) {
+    if (!floor.hasMore) return floor.$floor.find(options.touch).parent().hide();
+    floor.$floor.find(options.touch).on('click', function () {
+      moreClick(floor);
+    });
+  });
+  // 查看更多
+  function moreClick(floor) {
+    if (floor.current === floor.step) return closeMore(floor); // 剩下的个数
+    var lastCount = floor.count - options.size * floor.current;
+    floor.current++;
+    floor.hasMore = floor.current < floor.step; // 如果还有更多
+    if (floor.hasMore || lastCount > 3) {
+      floor.$floor.find(options.collapse).height(minHeight * row * floor.current);
+    } else {
+      floor.$floor.find(options.collapse).height(minHeight * row * (floor.current - 1) + minHeight);
+    }
+    // 展开回调
+    options.open(floor);
+  }
+
+  // 全部收起
+  function closeMore(floor) {
+    floor.current = 1;
+    floor.hasMore = true;
+    floor.$floor.find(options.collapse).height(floor.height); // 收起回调
+    options.close(floor);
+  }
+} // 激活导航栏
+
+
+function activeNavbar(selector) {
+  var baseHref = window.location.href;
+  navbarIndex = localStorage.getItem('navbarIndex') || 0;
+  selector = $(selector);
+  selector.each(function (index, el) {
+    $(el).removeClass('active');
+    if ($(el).find('a').length > 0) {
+      var href = $(el).find('a').attr('href');
+      href = href.split('?')[0].split('#')[0];
+      if (baseHref.indexOf(href) > -1) {
+        navbarIndex = index;
+        localStorage.setItem('navbarIndex', navbarIndex)
+      }
+    }
+  });
+  selector.eq(navbarIndex).addClass('active');
+}
+/**
+ * 将导航滚动到激活位置
+ * @param {*} selector 导航元素
+ * @param {*} scrollLeft 指定位置
+ * @param {*} offset 偏移
+ * @returns
+ */
+
+
+function categoryScrollTo(selector, scrollLeft) {
+  var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  if ($(window).width <= 768) return;
+  selector = $(selector);
+  var sub = selector.children().eq(0).offset().left + offset;
+  scrollLeft = Math.ceil(selector.find('.active').offset().left - sub);
+  $(selector).animate({
+    scrollLeft: scrollLeft
+  }, 200, 'linear');
+} // 移动端绑定滑动事件
+
+
+function slideBarHandle(selector) {
+  var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'block';
+  if ($(window).width() > 768) return;
+  selector = $(selector);
+  var target = $(selector.attr('data-target'));
+  selector.on('click', function () {
+    target.slideDown();
+    target.css('display', display);
+  });
+  target.on('click', function () {
+    target.slideUp();
+  });
+}
+
+$(function () {
+  activeNavbar('.navbar .nav li');
+  slideBarHandle('#menuBtn', 'flex');
+  slideBarHandle('#hotKeyword');
+  responseScreen(768, function () {
+    window.location.reload();
+  });
+});

src/main/resources/static/js/encyclopedia/detail.js

@@ -0,0 +1,35 @@
+"use strict";
+
+$(function () {
+  // 页面滚动偏移
+  var offset = 0; // 生成导航
+
+  makeNavigate('.section h2', '.navigate');
+
+  if ($(window).width() > 768) {
+    offset = getScrollOffset('.navbar') + 10;
+  } else {
+    offset = getScrollOffset(['.navbar', '.navigate']) + 10;
+  } // 侧边导航跳转
+
+
+  bindCategory('.navigate li', '.section', offset, function (index) {
+    activeCategory('.navigate li', index);
+  }); // 页面滚动观测
+
+  pageScrollObserve('.section', offset, function (el, index) {
+    if (index > -1) {
+      activeCategory('.navigate li', index);
+    }
+  }); // 常见问题展开收起
+
+  $('[data-toggle="collapse"]').each(function (index, el) {
+    var targetEl = $(el).attr('data-target');
+    if (!targetEl) return;
+    $(targetEl).hide();
+    $(el).on('click', function () {
+      $(targetEl).toggle();
+      $(el).toggleClass('arrowup');
+    });
+  });
+});

src/main/resources/static/js/encyclopedia/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+$(function () {
+  var windowWidth = $(window).width(); // 页面滚动偏移
+
+  var offset = 0; // pc端
+
+  if (windowWidth > 768) {
+    offset = getScrollOffset('.navbar'); // 导航菜单展开折叠
+
+    collapseToggle('[data-collapse-toggle="category"]', 'click', function (result) {
+      var bindEl = result.bindEl,
+          parent = result.parent,
+          height = result.height,
+          isCollapse = result.isCollapse;
+      var text = isCollapse ? '展开' : '收起';
+      var lineHeight = height - 32;
+      bindEl.children('.icon').toggleClass('arrowup');
+      bindEl.children('span').text(text);
+      parent.children('.name').children('em').height(lineHeight);
+    }); // 可折叠楼层
+
+    makeFloorList({
+      root: '.floor',
+      // 根节点元素
+      collapse: '.article',
+      //可折叠元素
+      item: '.section',
+      // 子元素
+      touch: '.more-btn',
+      // 事件绑定元素
+      size: 6,
+      // 每页最多显示的子元素个数
+      col: 3,
+      // 每列最多显示的子元素个数
+      minHeight: $('.floor').find('.section').height() + 24,
+      // 单个子元素的高度
+      // 展开时的回调
+      open: function open(floor) {
+        if (floor.current === floor.step) {
+          floor.$floor.find('.more span').text('收起全部');
+          floor.$floor.find('.more .icon').addClass('arrowup');
+        }
+      },
+      // 收起时的回调
+      close: function close(floor) {
+        floor.$floor.find('.more span').text('查看更多');
+        floor.$floor.find('.more .icon').removeClass('arrowup');
+      }
+    });
+  } else {
+    // 移动端
+    offset = getScrollOffset(['.navbar', '.category']);
+    stickyResponse('#category', getScrollOffset('.banner'), function (e) {
+      if (e.sticky) {
+        $('#category-list').addClass('fixed');
+      } else {
+        $('#category-list').removeClass('fixed');
+      }
+    });
+  } // 生成导航
+
+
+  makeNavigate('.floor h2', '.navigate');
+  makeNavigate('.floor h2', '#category-list'); // 楼层滚动
+
+  bindCategory('.navigate li,.category-list li', '.floor', offset, function (index) {
+    activeCategory('.navigate li, .category-list li', index);
+  }); // 页面滚动
+
+  $('.navigate').hide();
+  pageScrollObserve('.floor', offset, function (el, index) {
+    if (index > -1) {
+      windowWidth > 768 && $('.navigate').fadeIn();
+      activeCategory('.navigate li, .category-list li', index);
+    } else {
+      windowWidth > 768 && $('.navigate').fadeOut();
+    }
+  });
+});

src/main/resources/static/js/supplier-center/article/article-edit.js

@@ -0,0 +1,24 @@
+new Vue({
+    el: '#articleEdit',
+    mixins: [formMixin],
+    data: {
+        formData: {
+            title: '',
+            desc: ''
+        },
+    },
+    mounted() {
+        this.initEditor();
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+    methods: {
+        initEditor() {
+            const E = window.wangEditor;
+            const editor = new E("#editor");
+            editor.config.zIndex = 333;
+            editor.config.height = 500;
+            editor.create();
+        }
+    }
+});

src/main/resources/static/js/supplier-center/article/article-list.js

@@ -0,0 +1,74 @@
+var articleList = new Vue({
+    el: '#articleList',
+    data: {
+        listRecord: 30,
+        listQuery: {
+            pageNum: 1,
+            pageSize: 10,
+        },
+        pageInput: 1,
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    mounted() {
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+    methods: {
+        //表格操作按钮点击
+        clickOption(type) {
+            const handles = {
+                1: this.toEdit,
+                2: this.changeStatus,
+                3: this.toDetail,
+                4: this.handleDelete,
+            };
+            handles[type]()
+        },
+        //编辑
+        toEdit() {
+            window.open('/supplier/article/edit.html', '_blank')
+        },
+        //修改状态
+        changeStatus() {
+        },
+        //查看
+        toDetail() {
+        },
+        //删除
+        handleDelete() {
+        },
+        //页码跳转
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum;
+                console.log('页码跳转')
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+    }
+});

src/main/resources/static/js/supplier-center/article/formMixin.js

@@ -0,0 +1,90 @@
+var formMixin = {
+    data: {
+        validData: {},
+        rules: {
+            title: [{
+                required: true,
+                message: '请输入文章标题',
+                trigger: 'blur'
+            }, {
+                maxLength: 10,
+                minLength: 2,
+                message: '最大字符长度为10，最小字符长度为2',
+            }, {
+                pattern: /^abc/,
+                message: '必须以字符串abc开通',
+            }],
+            desc:[{
+                required: true,
+                message: '请输入推荐语',
+                trigger: 'blur'
+            }]
+        }
+    },
+    mounted() {
+        //初始化表单验证
+        this.initValidForm(this.formData)
+    },
+    created() {
+        //初始化验证关系对象
+        this.initValidData();
+    },
+    methods: {
+        //初始化验证关系对象
+        initValidData() {
+            for (let key in this.rules) {
+                this.$set(this.validData, key, {
+                    valid: true,
+                    message: ''
+                });
+            }
+        },
+        //初始化表单验证
+        initValidForm(formData) {
+            const that = this;
+            for (let key in this.rules) {
+                const rules = this.rules[key];
+                const input = document.querySelector(`.form-item[prop="${key}"] input`);
+                const textarea = document.querySelector(`.form-item[prop="${key}"] textarea`);
+                if (input) {
+                    input.addEventListener(rules[0].trigger, function () {
+                        that.validInputHandle(formData, key, rules)
+                    })
+                }
+                if (textarea) {
+                    textarea.addEventListener(rules[0].trigger, function () {
+                        that.validInputHandle(formData, key, rules)
+                    })
+                }
+            }
+        },
+        //数据校验
+        validInputHandle(formData, key, rules) {
+            const validData = {
+                valid: true,
+                message: ''
+            };
+            rules.forEach(function (rule, index) {
+                if (!validData.valid) return;
+                // 字符长度
+                const len = formData[key].trim().length;
+                // 是否必填
+                if (rule.required && !formData[key]) {
+                    validData.valid = false;
+                    validData.message = rule.message || '';
+                }
+                // 最大值最小值
+                if ((rule.maxLength && len < rule.minLength) || (rule.maxLength && len > rule.maxLength)) {
+                    validData.valid = false;
+                    validData.message = rule.message || '';
+                }
+                // 自定义校验规则
+                if (rule.pattern && !rule.pattern.test(formData[key])) {
+                    validData.valid = false;
+                    validData.message = rule.message || '';
+                }
+            });
+            this.validData[key] = validData;
+        }
+    }
+};

src/main/resources/static/js/supplier-center/setting/information.js

@@ -466,6 +466,6 @@
             }
         });
      $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-     $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+     $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
     }
  })

src/main/resources/static/js/supplier-center/setting/password.js

@@ -219,7 +219,7 @@ var passwordPage = new Vue({
     mounted: function () {
         var _self = this;
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
 
          }
 });

src/main/resources/templates/encyclopedia/about.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科关于我们呢</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+</body>
+</html>

src/main/resources/templates/encyclopedia/components/footer.html

@@ -0,0 +1,16 @@
+<!-- 底部 -->
+<footer class="copyright" >
+    <div class="container">
+        <p>
+            <img class="icp" src="/img/encyclopedia/icon-icp@2x.png" width="18" height="18" alt="粤B1-20160129"/>
+            <span>粤B1-20160129</span><span>备案号</span>
+            <a href="https://beian.miit.gov.cn">粤ICP备14019824号</a>
+            <span class="br">互联网药品信息服务资格证编号(粤)-非经营性-2021-0339</span>
+            <span class="br">中华人民共和国增值电信业务经营许可证</span>
+        </p>
+        <p>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved 深圳市采美信息技术有限公司</p>
+    </div>
+</footer>
+<!-- 底部公共js -->
+<script src="/lib/jquery-3.6.0.min.js"></script>
+<script th:src="@{/js/encyclopedia/common.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>

src/main/resources/templates/encyclopedia/components/header.html

@@ -0,0 +1,51 @@
+<!-- 头部导航 -->
+<header class="navbar">
+    <div class="container">
+        <div class="logo">
+            <div class="menu-btn" id="menuBtn" data-target="#menuNav" data-colse="#menuColseBtn">
+                <i class="icon menu"></i>
+            </div>
+            <a href="index.html">
+                <h1>采美百科丰富的百科文库</h1>
+                <img src="/img/encyclopedia/logo.png" alt="采美百科"/>
+            </a>
+        </div>
+        <ul class="nav" id="menuNav">
+            <li class="active"><a href="product.html">产品百科</a></li>
+            <li><a href="instrument.html">仪器百科</a></li>
+            <li><a href="about.html">关于采美百科</a></li>
+            <li><a href="contact.html">联系我们</a></li>
+            <li><span class="nav-close" id="#menuColseBtn"></span></li>
+        </ul>
+        <div class="search">
+            <div class="search-control">
+                <form action="">
+                    <input type="text" class="search-input" placeholder="请输入产品/仪器名称"/>
+                    <button class="search-btn">搜索</button>
+                </form>
+                <button class="hot-keyword" id="hotKeyword" data-target="#hotKeywords">热搜词</button>
+            </div>
+            <div class="keywords" id="hotKeywords">
+                <span class="close-btn icon close"></span>
+                <span>热门搜索：</span>
+                <a href="search.html">MD果酸</a>
+                <em>/</em>
+                <a href="#">无针水光</a>
+                <em>/</em>
+                <a href="#">光子</a>
+                <em>/</em>
+                <a href="#">超皮秒</a>
+                <em>/</em>
+                <a href="#">热玛吉</a>
+                <em>/</em>
+                <a href="#">热玛吉</a>
+                <em>/</em>
+                <a href="#">热玛吉</a>
+                <em>/</em>
+                <a href="#">热玛吉</a>
+                <em>/</em>
+                <a href="#">热玛吉</a>
+            </div>
+        </div>
+    </div>
+</header>

src/main/resources/templates/encyclopedia/contact.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科-联系我们</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/contact.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 页面标题 -->
+<div class="page-title">
+    <div class="container">
+        <div class="title">
+            <h2>联系我们</h2>
+            <div class="line"></div>
+        </div>
+        <p class="subtitle"><span></span>contact us</p>
+    </div>
+</div>
+<div class="contact container">
+    <div class="content">
+        <h2>深圳市采美信息技术有限公司</h2>
+        <p>
+            采美365网，是一家集美业仪器、产品采购交易和信息咨询为一体的一站式B2B服务平台，另设有针对C端的线上商城。
+            平台集合了各类美业资源及多方优质供应商，不仅能满足生活美容院、高级医美会所、医疗美容机构对产品、光电仪器、易耗品的采购需求，还能提供专业的产品信息咨询服务，包括仪器对比、配套信息，仪器查找、项目合作洽谈，
+            专业高端药妆产品采购，高端SPA产品采购，正品仪器采购，涵盖生美、医美等专业线产品。
+        </p>
+        <div class="address">
+            <div class="col">
+                <div class="dt">工作时间</div>
+                <div class="dd">周一至周五 9:00-18:00</div>
+            </div>
+            <span class="line"></span>
+            <div class="col">
+                <div class="dt">联系电话</div>
+                <div class="dd">0755-22907771</div>
+            </div>
+            <span class="line"></span>
+            <div class="col">
+                <div class="dt">公司地址</div>
+                <div class="dd">深圳市福田区上步南路1001号锦峰大厦A座21B</div>
+            </div>
+        </div>
+        <div class="map">
+            <iframe src="/encyclopedia/map.html" frameborder="0" width="100%" height="100%"></iframe>
+        </div>
+    </div>
+</div>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+</body>
+</html>

src/main/resources/templates/encyclopedia/instrument-detail.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科-仪器百科-详情</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+
+
+<article class="article">
+    <section class="section description">
+        <div class="title">
+            <h2>仪器描简述</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="content-left">
+                <div class="names">
+                    <div class="name"><b>仪器名称：</b>Reyoungel瑞漾医用玻尿酸水光小白盒</div>
+                    <div class="alias">别名：ULTRAFORMERⅢ</div>
+                </div>
+                <div class="row desc">
+                    ULTRAFORMERⅢ
+                    时光梭是韩国科莱希斯第三代HIFU超声提升。利用HIFU及MMFU的专利技术，产生高能聚焦超声波，迅速穿透表皮层，脂肪层、刺激SMAS
+                    层筋膜收缩，瞬间让皮肤组织达65~75C˚高温，从而肌肤产生热凝固效应，在真皮层、筋膜层形成网状凝结点，刺激纤维和胶原组织收缩紧致，再生修复，达到
+                    层层提拉，层层紧致。
+                </div>
+            </div>
+            <div class="cover">
+                <img src="https://picsum.photos/120/120" alt=""/>
+            </div>
+        </div>
+    </section>
+
+    <section class="section approve">
+        <div class="title">
+            <h2>正品识别</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>认证连接：<a href="#">www.baidu.com</a></p>
+            <p>认证二维码</p>
+            <div class="img-list">
+                <img src="https://picsum.photos/120/120"/>
+            </div>
+        </div>
+    </section>
+    <section class="section params">
+        <div class="title">
+            <h2>仪器参数</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="tr">
+                <div class="group">
+                    <div class="th">波长</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+                <div class="group">
+                    <div class="th">影像系统</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">波长</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+                <div class="group">
+                    <div class="th">影像系统</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>仪器优点</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、专利MMFU宏观&微观高能聚焦超音波覆盖面积是超声提升的8倍，速度是超声提升的5倍；</p>
+            <p>2、共有7个操作探头,双引擎实现高峰值，左右治疗手柄自动识别。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>仪器缺点</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>未获得NMPA认证，中国境内严禁销售和使用。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>仪器原理</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>
+                整体改善是通过两大技术实现，一是HIFU技术：单点聚焦，用于面部筋膜提升有显著效果。聚焦超声波聚焦于皮下整个脂肪层面（聚焦在皮下约6MM--13MM的脂肪层），然后通过内生
+                热促使脂肪细胞分解，分解为脂肪酸与三酸甘油酯，这个时候脂肪组织由固态转化为液态，然后通过淋巴循环排出体外。二是MMFU技术：独特的MMFU技术是目前全球惟一的专利技术，
+                以【微+宽】的聚焦作用于肌肤，大大增加了溶脂的面积，采用立体式覆盖治疗效果惊人。促进胶原蛋白再生，令肌肤更紧致。
+            </p>
+        </div>
+    </section>
+
+    <section class="section params">
+        <div class="title">
+            <h2>仪器档案</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="tr">
+                <div class="group">
+                    <div class="th">品牌</div>
+                    <div class="td">Classys</div>
+                </div>
+                <div class="group">
+                    <div class="th">产地</div>
+                    <div class="td">韩国</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">上市时间</div>
+                    <div class="td">2019年10月</div>
+                </div>
+                <div class="group">
+                    <div class="th">公司/厂商</div>
+                    <div class="td">和创元</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">NMPA认证时间</div>
+                    <div class="td">2019年10月</div>
+                </div>
+                <div class="group">
+                    <div class="th">价格区间</div>
+                    <div class="td"><a href="#">点击查询</a></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section approve">
+        <div class="title">
+            <h2>仪器认证</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="name">该仪器已获得以下认证：</div>
+            <div class="img-list">
+                <img src="https://picsum.photos/120/120"/>
+                <img src="https://picsum.photos/120/120"/>
+                <img src="https://picsum.photos/120/120"/>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>适宜人群</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>不适宜人群</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <h3>以下人群禁忌使用：</h3>
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+            <h3>以下人群禁忌使用：</h3>
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>术前术后</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section effect">
+        <div class="title">
+            <h2>效果展示</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <img src="https://picsum.photos/1138/328" alt=""/>
+            <img src="https://picsum.photos/1138/400" alt=""/>
+        </div>
+    </section>
+
+    <section class="section question">
+        <div class="title">
+            <h2>常见问题</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <dl class="collapse">
+                <dt>
+                    <span>问</span>光子嫩肤有哪些副作用?
+                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question1"></i>
+                </dt>
+                <dd id="question1">
+                    <span>答</span>
+                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
+                    治疗方法...
+                </dd>
+            </dl>
+            <dl class="collapse">
+                <dt>
+                    <span>问</span>光子嫩肤有哪些副作用?
+                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question2"></i>
+                </dt>
+                <dd id="question2">
+                    <span>答</span>
+                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
+                    治疗方法...
+                </dd>
+            </dl>
+        </div>
+    </section>
+</article>
+<!-- 侧边楼层导航 -->
+<aside class="navigate" id="category"></aside>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/instrument.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科-仪器百科</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- banner -->
+<div class="banner">
+    <img src="https://picsum.photos/1920/510" alt="采美百科"/>
+</div>
+<!-- 仪器 / 仪器分类 -->
+<div class="category container" id="category">
+    <div class="name"><b>仪器分类</b><em></em></div>
+    <div class="category-list" id="category-list"></div>
+    <div
+            class="collapse on"
+            id="hello"
+            data-collapse-toggle="category"
+            data-collapse-parent-target="#category"
+            data-collapse-children-target="#category-list"
+    >
+        <span>展开</span>
+        <i class="icon arrowdown"></i>
+    </div>
+</div>
+<!-- 分类楼层 -->
+<div class="floor-list">
+    <div class="floor">
+        <div class="floor-title">
+            <h2>中胚层仪器</h2>
+            <div class="h5-more-btn">
+                <span>更多</span>
+                <i class="icon arrowright"></i>
+            </div>
+            <img src="/img/encyclopedia/01.png" alt="中胚层仪器"/>
+        </div>
+        <article class="article container">
+            <section class="section">
+                <a href="product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/instrument-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/instrument-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/instrument-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+
+            <section class="section">
+                <a href="/encyclopedia/instrument-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+        </article>
+        <!-- 更多 -->
+        <div class="more">
+            <div class="more-btn">
+                <span class="">查看更多</span>
+                <i class="icon arrowdown"></i>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 侧边楼层导航 -->
+<aside class="navigate"></aside>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script th:src="@{/js/encyclopedia/index.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/map.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <meta name="keywords" content="高德地图,DIY地图,高德地图生成器"/>
+    <meta name="description" content="高德地图，DIY地图，自己制作地图，生成自己的高德地图"/>
+    <title>高德地图 - DIY我的地图</title>
+    <link rel="stylesheet" href="/css/encyclopedia/map.css"/>
+</head>
+<body>
+<div id="wrap" class="my-map">
+    <div id="mapContainer"></div>
+</div>
+<script src="//webapi.amap.com/maps?v=1.3&key=09b9feeff00d27c751c2edc1aca556d8"></script>
+<script>
+    !(function () {
+        var infoWindow,
+            map,
+            level = 17,
+            center = {lng: 114.096029, lat: 22.535957},
+            features = [
+                {
+                    icon: 'twig',
+                    color: 'red',
+                    name: '锦峰大厦A座21B',
+                    desc: '深圳市采美信息技术有限公司',
+                    lnglat: {Q: 22.53608091509164, R: 114.09600510165099, lng: 114.096005, lat: 22.536081},
+                    offset: {x: -18, y: -25},
+                    type: 'Marker',
+                },
+            ]
+
+        function loadFeatures() {
+            for (var feature, data, i = 0, len = features.length, j, jl, path; i < len; i++) {
+                data = features[i]
+                switch (data.type) {
+                    case 'Marker':
+                        feature = new AMap.Marker({
+                            map: map,
+                            position: new AMap.LngLat(data.lnglat.lng, data.lnglat.lat),
+                            zIndex: 3,
+                            extData: data,
+                            offset: new AMap.Pixel(data.offset.x, data.offset.y),
+                            title: data.name,
+                            content: '<div class="icon icon-' + data.icon + ' icon-' + data.icon + '-' + data.color + '"></div>',
+                        })
+                        break
+                    case 'Polyline':
+                        for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
+                            path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat))
+                        }
+                        feature = new AMap.Polyline({
+                            map: map,
+                            path: path,
+                            extData: data,
+                            zIndex: 2,
+                            strokeWeight: data.strokeWeight,
+                            strokeColor: data.strokeColor,
+                            strokeOpacity: data.strokeOpacity,
+                        })
+                        break
+                    case 'Polygon':
+                        for (j = 0, jl = data.path.length, path = []; j < jl; j++) {
+                            path.push(new AMap.LngLat(data.path[j].lng, data.path[j].lat))
+                        }
+                        feature = new AMap.Polygon({
+                            map: map,
+                            path: path,
+                            extData: data,
+                            zIndex: 1,
+                            strokeWeight: data.strokeWeight,
+                            strokeColor: data.strokeColor,
+                            strokeOpacity: data.strokeOpacity,
+                            fillColor: data.fillColor,
+                            fillOpacity: data.fillOpacity,
+                        })
+                        break
+                    default:
+                        feature = null
+                }
+                if (feature) {
+                    AMap.event.addListener(feature, 'click', mapFeatureClick)
+                    createInfoWindow(data)
+                }
+            }
+        }
+
+        function createInfoWindow(data) {
+            infoWindow = new AMap.InfoWindow({autoMove: true, isCustom: false})
+            infoWindow.setContent(
+                "<div class='myinfowindow'><h5>" + data.name + '</h5><div>' + data.desc + '</div></div>'
+            )
+            infoWindow.open(map, {M: 114.09606937301635, O: 22.536328738891648, lat: 22.536329, lng: 114.096069})
+        }
+
+        function mapFeatureClick(e) {
+            var extData = e.target.getExtData()
+            infoWindow.setContent(
+                "<div class='myinfowindow'><h5>" + extData.name + '</h5><div>' + extData.desc + '</div></div>'
+            )
+            console.log(e.lnglat)
+            infoWindow.open(map, e.lnglat)
+        }
+
+        map = new AMap.Map('mapContainer', {
+            center: new AMap.LngLat(center.lng, center.lat),
+            level: level,
+            keyboardEnable: true,
+            dragEnable: true,
+            scrollWheel: true,
+            doubleClickZoom: true,
+        })
+        loadFeatures()
+
+        map.on('complete', function () {
+            map.plugin(['AMap.ToolBar', 'AMap.OverView', 'AMap.Scale'], function () {
+                map.addControl(new AMap.ToolBar({ruler: true, direction: true, locate: false}))
+                map.addControl(new AMap.OverView({isOpen: true}))
+                map.addControl(new AMap.Scale())
+            })
+        })
+    })()
+</script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/more.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科搜索页面</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+
+<!-- 分类楼层 -->
+<div class="floor container more-floor">
+    <div class="floor-title">
+        <h2>中胚层产品</h2>
+        <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
+    </div>
+    <article class="article">
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+    </article>
+    <!-- 更多 -->
+    <div class="more">
+        <div class="more-btn">
+            <span class="">查看更多</span>
+            <i class="icon arrowdown"></i>
+        </div>
+    </div>
+</div>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script type="text/javascript">
+    'use strict';
+    $(function () {
+        var windowWidth = $(window).width();
+        if (windowWidth > 768) {
+            // 可折叠楼层
+            makeFloorList({
+                root: '.floor', // 根节点元素
+                collapse: '.article', //可折叠元素
+                item: '.section', // 子元素
+                touch: '.more-btn', // 事件绑定元素
+                size: 6, // 每页最多显示的子元素个数
+                col: 3, // 每列最多显示的子元素个数
+                minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
+                // 展开时的回调
+                open: function open(floor) {
+                    if (floor.current === floor.step) {
+                        floor.$floor.find('.more span').text('收起全部');
+                        floor.$floor.find('.more .icon').addClass('arrowup');
+                    }
+                },
+                // 收起时的回调
+                close: function close(floor) {
+                    floor.$floor.find('.more span').text('查看更多');
+                    floor.$floor.find('.more .icon').removeClass('arrowup');
+                }
+            });
+        }
+    });
+</script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/product-detail.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科-产品百科详情</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+
+<article class="article">
+    <section class="section description">
+        <div class="title">
+            <h2>产品描述</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="content-left">
+                <div class="names">
+                    <div class="name"><b>产品名称：</b>Reyoungel瑞漾医用玻尿酸水光小白盒</div>
+                    <div class="alias">别名：ULTRAFORMERⅢ</div>
+                </div>
+                <div class="row desc">
+                    ULTRAFORMERⅢ
+                    时光梭是韩国科莱希斯第三代HIFU超声提升。利用HIFU及MMFU的专利技术，产生高能聚焦超声波，迅速穿透表皮层，脂肪层、刺激SMAS
+                    层筋膜收缩，瞬间让皮肤组织达65~75C˚高温，从而肌肤产生热凝固效应，在真皮层、筋膜层形成网状凝结点，刺激纤维和胶原组织收缩紧致，再生修复，达到
+                    层层提拉，层层紧致。
+                </div>
+            </div>
+            <div class="cover">
+                <img src="https://picsum.photos/120/120" alt=""/>
+            </div>
+        </div>
+    </section>
+    <section class="section params">
+        <div class="title">
+            <h2>产品参数</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="tr">
+                <div class="group">
+                    <div class="th">波长</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+                <div class="group">
+                    <div class="th">影像系统</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">波长</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+                <div class="group">
+                    <div class="th">影像系统</div>
+                    <div class="td">1.0-3.0J</div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>产品优点</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、专利MMFU宏观&微观高能聚焦超音波覆盖面积是超声提升的8倍，速度是超声提升的5倍；</p>
+            <p>2、共有7个操作探头,双引擎实现高峰值，左右治疗手柄自动识别。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>产品缺点</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>未获得NMPA认证，中国境内严禁销售和使用。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>产品原理</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>
+                整体改善是通过两大技术实现，一是HIFU技术：单点聚焦，用于面部筋膜提升有显著效果。聚焦超声波聚焦于皮下整个脂肪层面（聚焦在皮下约6MM--13MM的脂肪层），然后通过内生
+                热促使脂肪细胞分解，分解为脂肪酸与三酸甘油酯，这个时候脂肪组织由固态转化为液态，然后通过淋巴循环排出体外。二是MMFU技术：独特的MMFU技术是目前全球惟一的专利技术，
+                以【微+宽】的聚焦作用于肌肤，大大增加了溶脂的面积，采用立体式覆盖治疗效果惊人。促进胶原蛋白再生，令肌肤更紧致。
+            </p>
+        </div>
+    </section>
+
+    <section class="section params">
+        <div class="title">
+            <h2>产品档案</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="tr">
+                <div class="group">
+                    <div class="th">品牌</div>
+                    <div class="td">Classys</div>
+                </div>
+                <div class="group">
+                    <div class="th">产地</div>
+                    <div class="td">韩国</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">上市时间</div>
+                    <div class="td">2019年10月</div>
+                </div>
+                <div class="group">
+                    <div class="th">公司/厂商</div>
+                    <div class="td">和创元</div>
+                </div>
+            </div>
+            <div class="tr">
+                <div class="group">
+                    <div class="th">NMPA认证时间</div>
+                    <div class="td">2019年10月</div>
+                </div>
+                <div class="group">
+                    <div class="th">价格区间</div>
+                    <div class="td"><a href="#">点击查询</a></div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="section approve">
+        <div class="title">
+            <h2>产品认证</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="name">该产品已获得以下认证：</div>
+            <div class="img-list">
+                <img src="https://picsum.photos/120/120"/>
+                <img src="https://picsum.photos/120/120"/>
+                <img src="https://picsum.photos/120/120"/>
+            </div>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>适宜人群</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>不适宜人群</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <h3>以下人群禁忌使用：</h3>
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+            <h3>以下人群禁忌使用：</h3>
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="title">
+            <h2>术前术后</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
+            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
+            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
+        </div>
+    </section>
+
+    <section class="section effect">
+        <div class="title">
+            <h2>效果展示</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <img src="https://picsum.photos/1138/328" alt=""/>
+            <img src="https://picsum.photos/1138/400" alt=""/>
+        </div>
+    </section>
+
+    <section class="section question">
+        <div class="title">
+            <h2>常见问题</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <dl class="collapse">
+                <dt>
+                    <span>问</span>光子嫩肤有哪些副作用?
+                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question1"></i>
+                </dt>
+                <dd id="question1">
+                    <span>答</span>
+                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
+                    治疗方法...
+                </dd>
+            </dl>
+            <dl class="collapse">
+                <dt>
+                    <span>问</span>光子嫩肤有哪些副作用?
+                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question2"></i>
+                </dt>
+                <dd id="question2">
+                    <span>答</span>
+                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
+                    治疗方法...
+                </dd>
+            </dl>
+        </div>
+    </section>
+</article>
+<!-- 侧边楼层导航 -->
+<aside class="navigate" id="category"></aside>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/product.html

@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科-产品百科</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- banner -->
+<div class="banner">
+    <img src="https://picsum.photos/1920/510" alt="采美百科"/>
+</div>
+<!-- 产品 / 仪器分类 -->
+<div class="category container" id="category">
+    <div class="name"><b>产品分类</b><em></em></div>
+    <div class="category-list" id="category-list"></div>
+    <div
+            class="collapse on"
+            id="hello"
+            data-collapse-toggle="category"
+            data-collapse-parent-target="#category"
+            data-collapse-children-target="#category-list"
+    >
+        <span>展开</span>
+        <i class="icon arrowdown"></i>
+    </div>
+</div>
+<!-- 分类楼层 -->
+<div class="floor-list">
+    <div class="floor">
+        <div class="floor-title">
+            <h2>中胚层产品</h2>
+            <div class="h5-more-btn">
+                <span>更多</span>
+                <i class="icon arrowright"></i>
+            </div>
+            <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
+        </div>
+        <article class="article container">
+            <section class="section">
+                <a href="product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+            <section class="section">
+                <a href="/encyclopedia/product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+
+            <section class="section">
+                <a href="/encyclopedia/product-detail.html">
+                    <div class="cover">
+                        <img src="https://picsum.photos/246/246" alt=""/>
+                    </div>
+                    <div class="content">
+                        <h3>MD果酸</h3>
+                        <div class="title">
+                            MD果酸（ceuticals™
+                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                        </div>
+                        <div class="question">
+                            <p>MD果酸为什么不会刺激皮肤？</p>
+                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                            <p>MD果酸是否具有腐蚀性？</p>
+                        </div>
+                        <div class="tag-list">
+                            <span class="tag">常见问题</span>
+                            <span class="tag">效果展示</span>
+                            <span class="tag">技术原理</span>
+                            <span class="tag">术前术后</span>
+                        </div>
+                        <div class="dashed-line"></div>
+                        <footer class="footer">
+                            <time>日期：2021-11-18 16:52</time>
+                            <span>浏览量：42</span>
+                        </footer>
+                    </div>
+                </a>
+            </section>
+        </article>
+        <!-- 更多 -->
+        <div class="more">
+            <div class="more-btn">
+                <span class="">查看更多</span>
+                <i class="icon arrowdown"></i>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 侧边楼层导航 -->
+<aside class="navigate"></aside>
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script th:src="@{/js/encyclopedia/index.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/encyclopedia/search.html

@@ -0,0 +1,310 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科搜索页面</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+
+
+<!-- 分类楼层 -->
+<div class="floor container search-floor">
+    <p class="search-title">为您找到相关结果<span>0</span>条</p>
+    <div class="emtyp" style="display: flex">
+        <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
+        <p>未找到相关结果！</p>
+    </div>
+    <article class="article" style="display: none">
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+        <section class="section">
+            <a href="/encyclopedia/product-detail.html">
+                <div class="cover">
+                    <img src="https://picsum.photos/246/246" alt=""/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">
+                        MD果酸（ceuticals™
+                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
+                    </div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：2021-11-18 16:52</time>
+                        <span>浏览量：42</span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+    </article>
+    <!-- 更多 -->
+    <div class="more">
+        <div class="more-btn">
+            <span class="">查看更多</span>
+            <i class="icon arrowdown"></i>
+        </div>
+    </div>
+</div>
+
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script type="text/javascript">
+    'use strict';
+    $(function () {
+        var windowWidth = $(window).width();
+        if (windowWidth > 768) {
+            // 可折叠楼层
+            makeFloorList({
+                root: '.floor', // 根节点元素
+                collapse: '.article', //可折叠元素
+                item: '.section', // 子元素
+                touch: '.more-btn', // 事件绑定元素
+                size: 6, // 每页最多显示的子元素个数
+                col: 3, // 每列最多显示的子元素个数
+                minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
+                // 展开时的回调
+                open: function open(floor) {
+                    if (floor.current === floor.step) {
+                        floor.$floor.find('.more span').text('收起全部');
+                        floor.$floor.find('.more .icon').addClass('arrowup');
+                    }
+                },
+                // 收起时的回调
+                close: function close(floor) {
+                    floor.$floor.find('.more span').text('查看更多');
+                    floor.$floor.find('.more .icon').removeClass('arrowup');
+                }
+            });
+        }
+    });
+</script>
+</body>
+</html>

src/main/resources/templates/supplier-center/article/article-edit.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-文章列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="articleEdit" class="article-edit">
+    <div class="navLayout" v-cloak>
+        <div class="crumbs" v-if="isPC">
+            <span>我的采美</span>
+            <span>&gt;</span>
+            <span>文章管理</span>
+            <span>&gt;</span>
+            <span>添加文章</span>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <div class="right-box right">
+                <div class="row">
+                    <div class="top-tip">温馨提示：多发布文章，有利于曝光您的产品以及提高您产品的销售量，文章发布并且审核通过后<br/>可在信息中心搜索您的文章</div>
+                    <form class="form">
+                        <div class="form-item" required prop="title">
+                            <label for="title" class="form-label"><em>*</em>标题:</label>
+                            <input id="title" class="form-control" placeholder="请输入文章标题" v-model="formData.title"/>
+                            <template v-if="validData['title'] && !validData['title'].valid">
+                                <div class="errTips" v-html="validData['title'].message"></div>
+                            </template>
+                        </div>
+                        <div class="form-item">
+                            <label for="tag" class="form-label"><em>*</em>文章标签:</label>
+                            <input id="tag" class="form-control" placeholder=""/>
+                            <div class="errTips">请添加文章标签</div>
+                        </div>
+                        <div class="tag-list">
+                            <div class="tag">美白<span class="close">×</span></div>
+                        </div>
+                        <div class="control-group">
+                            <input id="tagName" class="form-control tagName" placeholder="请输入标签名"/>
+                            <button class="form-button addTag">添加</button>
+                        </div>
+                        <div class="form-item">
+                            <label for="seo" class="form-label"><em>*</em>SEO关键词:</label>
+                            <input id="seo" class="form-control" placeholder="请输入SEO关键词"/>
+                            <div class="errTips">请输入SEO关键词</div>
+                        </div>
+                        <div class="form-item">
+                            <label for="postAuthor" class="form-label"><em>*</em>发布人:</label>
+                            <input id="postAuthor" class="form-control" placeholder="请输入发布人"/>
+                            <div class="errTips">请输入发布人</div>
+                        </div>
+                        <div class="form-item">
+                            <label for="source" class="form-label"><em>*</em>来源:</label>
+                            <input id="source" class="form-control" placeholder="请输入文章来源"/>
+                            <div class="errTips">请输入文章来源</div>
+                        </div>
+                        <div class="form-item" required prop="desc">
+                            <label for="desc" class="form-label"><em>*</em>推荐语:</label>
+                            <textarea id="desc" placeholder="请输入推荐语" rows="4" v-model="formData.desc" class="form-control"></textarea>
+                            <template v-if="validData['desc'] && !validData['desc'].valid">
+                                <div class="errTips" v-html="validData['desc'].message"></div>
+                            </template>
+                        </div>
+                        <div class="form-item" required prop="desc">
+                            <label class="form-label"><em>*</em>文章内容:</label>
+                            <div id="editor"></div>
+                            <template v-if="validData['desc'] && !validData['desc'].valid">
+                                <div class="errTips" v-html="validData['desc'].message"></div>
+                            </template>
+                        </div>
+                        <div class="form-item">
+                            <label for="category" class="form-label"><em>*</em>文章分类:</label>
+                            <select id="category" class="form-control form-select">
+                                <option>请选择</option>
+                                <option>西游记</option>
+                                <option>红楼梦</option>
+                                <option>水浒卷</option>
+                                <option>三国演义</option>
+                            </select>
+                            <div class="errTips">请选择文章分类</div>
+                        </div>
+                        <div class="form-item">
+                            <label class="form-label"><em>*</em>引导图:</label>
+                            <label for="cover" class="upload-control">
+                                <span>+</span>
+                                <span>添加图片</span>
+                            </label>
+                            <input type="file" id="cover" class="form-control" hidden/>
+                            <div class="errTips">请上传引导图</div>
+                        </div>
+                        <div class="form-item radio-group">
+                            <div class="form-label"><em>*</em>状态:</div>
+                            <div class="radio-control">
+                                <input id="on" type="radio" name="status" checked/>
+                                <label for="on" class="radio">启用</label>
+                            </div>
+                            <div class="radio-control">
+                                <input id="off" type="radio" name="status"/>
+                                <label for="off" class="radio">停用</label>
+                            </div>
+                        </div>
+                        <div class="form-item btns">
+                            <button class="btn break">返回</button>
+                            <button class="btn submit">保存</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript"
+        th:src="@{/js/supplier-center/article/formMixin.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript"
+        th:src="@{/js/supplier-center/article/article-edit.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/article/article-list.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-文章列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--    <link th:href="@{/css/supplier-center/article/table.css(v=${version})}" rel="stylesheet" type="text/css">-->
+    <link th:href="@{/css/supplier-center/article/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="articleList" class="article-list">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>文章管理</span>
+                <span>&gt;</span>
+                <span>文章列表</span>
+            </div>
+            <div class="hot-tip">温馨提示：发布文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <div class="right">
+                <!--筛选-->
+                <div class="row">
+                    <div class="form-section">
+                        <div class="form-item">
+                            <label for="articleId" class="form-label">文章ID:</label>
+                            <input id="articleId" class="form-control" type="text" placeholder="请输入文章ID"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleTitle" class="form-label">文章标题:</label>
+                            <input id="articleTitle" class="form-control" type="text" placeholder="请输入文章标题"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleAuthor" class="form-label">发布人:</label>
+                            <input id="articleAuthor" class="form-control" type="text" placeholder="输入发布人"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleCate" class="form-label">文章分类:</label>
+                            <select id="articleCate" class="form-control form-select">
+                                <option>请选择</option>
+                                <option>医美</option>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleStatus" class="form-label">审核状态:</label>
+                            <select id="articleStatus" class="form-control form-select">
+                                <option>全部</option>
+                                <option>审核通过</option>
+                            </select>
+                        </div>
+                        <div class="form-item buttons">
+                            <button class="form-button search" type="button">搜索</button>
+                            <button class="form-button add" type="button">添加</button>
+                        </div>
+                    </div>
+                </div>
+                <!--列表表格-->
+                <div class="row">
+                    <table class="table">
+                        <tr>
+                            <th>ID</th>
+                            <th>文章分类</th>
+                            <th>引导图</th>
+                            <th>文章标题</th>
+                            <th>点赞数</th>
+                            <th>阅读量</th>
+                            <th>审核状态</th>
+                            <th>发布时间</th>
+                            <th>发布人</th>
+                            <th>添加时间</th>
+                            <th>状态</th>
+                            <th>操作</th>
+                        </tr>
+                        <tr v-for="i in 2" :key="i" class="tr-row">
+                            <td>9280</td>
+                            <td>新品上线</td>
+                            <td>
+                                <img class="cover" src="https://picsum.photos/200/300" alt="新品上线"/></td>
+                            <td class="title">
+                                <div class="title">丝丽焕活盈韧头丝丽焕活盈韧头丝丽焕活盈韧头</div>
+                            </td>
+                            <td>236</td>
+                            <td>236</td>
+                            <td><span class="state warning">待审核</span></td>
+                            <td class="time">
+                                <div class="time">2021-11-20 17:23</div>
+                            </td>
+                            <td>江江</td>
+                            <td class="time">
+                                <div class="time">2021-11-20 17:23</div>
+                            </td>
+                            <td><span class="state primary">已启用</span></td>
+                            <td class="option">
+                                <div class="option">
+                                    <button class="form-button edit" @click="clickOption(1)">编辑</button>
+                                    <button class="form-button stop" @click="clickOption(2)">停用</button>
+                                    <button class="form-button search" @click="clickOption(3)">查看</button>
+                                    <button class="form-button delete" @click="clickOption(4)">删除</button>
+                                </div>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+                <!--页码-->
+                <div class="pageWrap clear" v-if="isPC && pageTotal>1">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+                       href="javascript:void(0);"></a>
+                    <template v-for="n in showPageBtn">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)"
+                           href="javascript:void(0);" v-text="n"></a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+                       href="javascript:void(0);"></a>
+                    <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+                    <span>跳至</span>
+                    <input v-model="pageInput" @blur="checkNum()"/>
+                    <span>页</span>&nbsp;
+                    <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript"
+        th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript"
+        th:src="@{/js/supplier-center/article/article-list.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/components/tableft.html

@@ -17,7 +17,12 @@
             <a href="/supplier/release.html">发布商品</a>
             <a href="/supplier/goods.html">我的商品</a>
             <a href="/supplier/brand.html">品牌管理</a>
-
+        </div>
+    </div>
+    <div class="navList">
+        <span class="tab">文章管理</span>
+        <div class="con" style="display:none">
+            <a href="/supplier/article/list.html">文章列表</a>
         </div>
     </div>
     <div class="navList">