Merge remote-tracking branch 'origin/developerA' into developerA

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

@@ -66,6 +66,14 @@ public class SupplierPageController extends BaseController {
     private static final String ARTICLE_LIST = "supplier-center/article/article-list";
     /** 供应商文章编辑页面 */
     private static final String ARTICLE_EDIT = "supplier-center/article/article-edit";
+    /** 供应商采美百科商品资料列表页面 */
+    private static final String ENCYCLOPEDIA_PRODUCT_LIST = "supplier-center/encyclopedia/product-list";
+    /** 供应商采美百科仪器资料列表页面 */
+    private static final String ENCYCLOPEDIA_INSTRUMENT_LIST = "supplier-center/encyclopedia/instrument-list";
+    /** 供应商采美百科商品资料编辑页面 */
+    private static final String ENCYCLOPEDIA_PRODUCT_EDIT = "supplier-center/encyclopedia/product-edit";
+    /** 供应商采美百仪器资料编辑页面 */
+    private static final String ENCYCLOPEDIA_INSTRUMENT_EDIT = "supplier-center/encyclopedia/instrument-edit";
 
 
     /** 我的采美 */
@@ -226,4 +234,29 @@ public class SupplierPageController extends BaseController {
     public String supplierArticleEdit() {
         return ARTICLE_EDIT;
     }
+
+    /** 供应商采美百科商品列表页面 */
+    @GetMapping("/supplier/encyclopedia/product-list.html")
+    public String getEncyclopediaProductList() {
+        return ENCYCLOPEDIA_PRODUCT_LIST;
+    }
+
+    /** 供应商采美百科仪器列表页面 */
+    @GetMapping("/supplier/encyclopedia/instrument-list.html")
+    public String getEncyclopediaInstrumentList() {
+        return ENCYCLOPEDIA_INSTRUMENT_LIST;
+    }
+
+    /** 供应商采美百科商品编辑页面 */
+    @GetMapping("/supplier/encyclopedia/product-edit.html")
+    public String getEncyclopediaProductEdit() {
+        return ENCYCLOPEDIA_PRODUCT_EDIT;
+    }
+
+    /** 供应商采美百科仪器编辑页面 */
+    @GetMapping("/supplier/encyclopedia/instrument-edit.html")
+    public String getEncyclopediaInstrumentEdit() {
+        return ENCYCLOPEDIA_INSTRUMENT_EDIT;
+    }
+
 }

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

@@ -32,7 +32,9 @@ public class ProductController extends BaseController {
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String TEMPORARY_PAGE_PATH = "product/temporary";
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
-    private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    // private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    /** 新正品联盟页面 */
+    private static final String QUALITY_AUTHORRIZE_PATH = "product/alliance-page";
     private static final String ACTIVITY_TOP_PATH = "activity/activityTopic";
     private static final String CLOUD_BEAUTY_PATH = "activity/beautyTopic";
     private static final String ACTIVITY_COUPON_EXP = "activity/couponExp";

src/main/resources/static/css/product/alliance-page.css

@@ -0,0 +1,123 @@
+html{width:100%}
+html::-webkit-scrollbar{width:8px;height:8px;background-color:#f8f8f8}
+html::-webkit-scrollbar-thumb{border-radius:4px;background:#b9b9b9}
+body{margin:0;color:#393939;background:#f8f8f8}
+h1,h2,p{margin:0}
+a{text-decoration:none}
+[v-cloak]{display:none}
+#zplm{position:relative}
+@media screen and (min-width:768px){body{padding-top:80px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.container{width:1184px;margin:0 auto}
+.zp-header{position:fixed;top:0;width:100%;z-index:99;background:-webkit-gradient(linear,right top,left top,from(#191919),to(#464646));background:-o-linear-gradient(right,#191919 0%,#464646 100%);background:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.zp-header .container{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;height:80px}
+.zp-header h1 .name{font-size:0}
+.zp-main{min-height:84vh;overflow:hidden}
+.zp-main .zp-row{margin:16px auto;padding:24px;background:#fff;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-row:nth-child(1){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-img{position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-img::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:3}
+.zp-main .zp-img img{display:block}
+.zp-main .zp-img .zp-cover-img{width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute}
+.zp-main .zp-img .zp-auth-logo{max-width:120px;max-height:120px;top:24px;left:24px}
+.zp-main .zp-img .zp-auth-sign{right:24px;bottom:24px;width:70px;height:70px}
+.zp-main .zp-img .zp-auth-card{left:24px;bottom:24px;width:140px;height:110px;cursor:pointer;z-index:4}
+.zp-main .zp-info{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:24px}
+.zp-main .zp-info h2{font-size:20px;font-weight:bold;line-height:28px;width:100%;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.zp-main .zp-info .content{position:relative;margin-top:24px}
+.zp-main .zp-info .content .zp-item{font-size:14px;line-height:24px;margin-bottom:8px}
+.zp-main .zp-info .content .zp-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;margin-bottom:8px}
+.zp-main .zp-info .content .zp-group .line{width:1px;height:14px;background:#949494;margin:0 16px}
+.zp-main .zp-info .content .zp-group .zp-brand,.zp-main .zp-info .content .zp-group .zp-origin{color:#949494;margin-bottom:0}
+.zp-main .zp-info .content .zp-agent{font-size:16px}
+.zp-main .zp-info .content .zp-click{position:absolute}
+.zp-main .zp-info .content .zp-click.websit{top:0;right:0;color:#bc1724;font-size:14px;line-height:24px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit span{margin-left:0;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit:hover span{margin-left:4px}
+.zp-main .zp-info .zp-auth-info{display:-webkit-box;display:-ms-flexbox;display:flex;-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;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:114px;padding:24px;margin-top:24px;color:#bc1724;background:url(/img/alliance-page/zp-pc-auth-bg.png) no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:28px;background:url(/img/alliance-page/zp-pc-auth-icon.png) no-repeat}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:16px}
+.zp-main .zp-info .zp-auth-info .zp-auth-text b{font-weight:bold}
+.zp-main .zp-title{font-size:18px;font-weight:bold}
+.zp-main .zp-title .line{position:relative;width:100%;height:1px;margin-top:12px;background:#ececec}
+.zp-main .zp-title .line::before{position:absolute;left:0;bottom:0;content:"";display:block;width:72px;height:2px;background:#393939}
+.zp-main .zp-params{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:24px}
+.zp-main .zp-params .row{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-params .row .col{font-size:14px;padding:6px 0;line-height:24px}
+.zp-main .zp-params .row .col:first-child{width:14%;color:#949494}
+.zp-main .zp-params .row .col:first-child::after{content:":";margin-left:4px}
+.zp-main .zp-params .row .col:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.zp-footer{margin-top:24px;padding:20px 0;background-color:#eee}
+.zp-footer p{text-align:center;font-size:14px;color:#999}
+.zp-footer p a{color:#999;-webkit-transition:color 0.2s;-o-transition:color 0.2s;transition:color 0.2s}
+.zp-footer p a:hover{color:#bc1724}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:12px 20px;background:#f1f1f1;font-size:18px;line-height:30px}
+.zp-popup .zp-popup-content .content{height:326px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:14px}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar{width:4px;height:4px;background-color:#fff}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar-thumb{border-radius:2px;background:#b9b9b9}
+.zp-popup .zp-popup-content .close{position:absolute;right:12px;top:12px;display:block;width:30px;height:30px;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:622px}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:32px;height:32px;top:-40px;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:32px;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:160px;right:0;bottom:80px;padding:8px;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:12px;text-align:center}
+.zp-wechat-ewm .zp-tip span:first-child{display:none}
+.zp-wechat-ewm .close{width:24px;height:24px;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:10px;position:absolute;top:-12px;left:-12px;border-radius:50%;padding:4px;background-color:#fff;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1);cursor:pointer}
+.not-found{height:calc(100vh - 80px);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;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.not-found img{}
+.not-found p{font-size:20px;color:#a8a8a8;padding:60px;text-align:center}
+}@media screen and (max-width:768px){body{width:100vw}
+.zp-header{display:none}
+.zp-main{overflow:hidden}
+.zp-main .zp-row:nth-child(2){padding:4vw;background:#fff}
+.zp-main .zp-row h2,.zp-main .zp-row .content{background:#fff;padding:0 4vw}
+.zp-main .zp-img{width:100vw;height:100vw;position:relative;overflow:hidden}
+.zp-main .zp-img .zp-cover-img{position:relative;width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute;z-index:3}
+.zp-main .zp-img .zp-auth-logo{max-width:18vw;max-height:18vw;top:4vw;left:4vw}
+.zp-main .zp-img .zp-auth-sign{width:14vw;height:14vw;right:4vw;bottom:4vw}
+.zp-main .zp-img .zp-auth-card{width:27vw;height:20vw;left:4vw;bottom:4vw;cursor:pointer}
+.zp-main .zp-info h2{font-size:4.2vw;font-weight:normal;line-height:1.6;text-align:justify;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.zp-main .zp-info .content{position:relative;padding:4vw}
+.zp-main .zp-info .content .zp-item{font-size:3.6vw;line-height:2}
+.zp-main .zp-info .content .zp-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}
+.zp-main .zp-info .content .zp-group .zp-item{color:#949494}
+.zp-main .zp-info .content .zp-group .line{display:block;width:1px;height:3.6vw;background:#c4c4c4;margin:0 3.6vw}
+.zp-main .zp-info .content .zp-click{position:absolute;top:4vw;right:4vw;line-height:2;cursor:pointer}
+.zp-main .zp-info .content .zp-click.websit{font-size:3.6vw;color:#bc1724}
+.zp-main .zp-info .zp-auth-info{width:100vw;height:20vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0 4vw;margin:4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(/img/alliance-page/zp-h5-auth-bg.png) no-repeat;background-size:100vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:4.7vw;background:url(/img/alliance-page/zp-h5-auth-icon.png) no-repeat;background-size:12vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:3.6vw;margin-top:1.2vw;line-height:1.6}
+.zp-main .zp-title{font-size:4.2vw}
+.zp-main .zp-title .line{width:100%;height:1px;background:#c4c4c4;margin-top:4vw;opacity:0.4}
+.zp-main .zp-params .row{display:table-row}
+.zp-main .zp-params .row .col{display:table-cell;padding:2vw 1vw;font-size:3.6vw}
+.zp-main .zp-params .row .col:nth-child(1){color:#949494;max-width:40vw;min-width:16vw;padding-right:3vw}
+.zp-footer{width:100vw;background-color:#fff;margin-top:4vw;padding:4vw 0}
+.zp-footer p{text-align:center;font-size:3.2vw;color:#999}
+.zp-footer p a{color:#f52e3e;font-weight:bold;cursor:pointer}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:86vw;height:128vw;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:4vw 0;background:#f1f1f1;font-size:4.2vw;line-height:4.8vw;text-align:center}
+.zp-popup .zp-popup-content .content{height:111vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4vw 4vw 0;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:3.6vw}
+.zp-popup .zp-popup-content .close{position:absolute;right:4vw;top:4vw;display:block;width:4.8vw;height:4.8vw;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:86vw}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:6vw;height:6vw;top:-8vw;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:6vw;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:33vw;right:4vw;bottom:30vw;padding:2vw;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:2.8vw;text-align:center}
+.zp-wechat-ewm .zp-tip span{display:block}
+.zp-wechat-ewm .close{width:4vw;height:4vw;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:2vw;position:absolute;top:-2vw;left:-2vw;border-radius:50%;padding:1vw;background-color:#fff;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.not-found{width:100vw;padding-top:50vw;text-align:center}
+.not-found img{width:30vw}
+.not-found p{font-size:4vw;margin-top:6vw;color:#a8a8a8}
+}.loading-wrap{position:fixed;top:0;left:0;z-index:99;width:100vw;height:100vh;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;background:rgba(255,255,255,1)}
+.loading-wrap img{width:120px}

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

@@ -1,6 +1,8 @@
 @charset "UTF-8";
 input[hidden]{display:none !important}
 textarea{resize: none;}
+
+@media screen  and (min-width: 768px){
 .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}
@@ -48,3 +50,55 @@ textarea{resize: none;}
 .article-edit .radio-control{margin-right:32px}
 .article-edit .btns{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}
 .article-edit .btns .btn{margin:0 16px}
+}
+
+@media screen  and (max-width: 768px){
+.form{width:100%;margin:0 auto;color:#22272E; padding: 0 3.2vw; box-sizing: border-box}
+.form .form-item:first-child{margin-top:6.4vw }
+.form .form-item{width:100%;position:relative;padding-bottom:5.6vw;}
+.form .form-label{display:block;line-height:4.8vw;font-size:3.4vw;color:#627386; margin-bottom: 1.4vw}
+.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:-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;line-height:4.8vw;white-space:nowrap;color:red;font-size:2.8vw}
+.form .form-item .errTips::before{content:"×";font-size:2.8vw;display:block;width:2.8vw;height:2.8vw;margin-right:2px;line-height:2.8vw;background:#FF2A2A;color:#fff;border-radius:50%;text-align:center}
+.form .form-control::-webkit-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
+.form .form-control{outline:none;display:block;width:100%;padding:3.6vw 2.2vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px}
+.form .form-select{color:#627386}
+.form .control-group{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}
+.form .control-group .form-control{width:auto}
+.form .form-button{padding:3.6vw 7vw;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:3.4vw;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.form .upload-control{display:-webkit-box;display:-ms-flexbox;display:flex;-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;-webkit-box-align:center;-ms-flex-align:center;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:-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}
+.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%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:18px;height:18px;border:1px solid #B8BFCA;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
+.form .radio-control label.radio::after{content:"";display:block;opacity:0;position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-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:100%;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.8vw;-webkit-box-sizing:border-box;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:100%;box-sizing: border-box;}
+.article-edit .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
+.article-edit .top-tip{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;height:9.6vw;text-align:center;font-size:2.8vw;line-height:3.2vw;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+.article-edit .tag-list{width:100%;padding-bottom:32px;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}
+.article-edit .tag-list .tag{position:relative;padding:0 1vw;margin:2.4vw 2.4vw 0 0;height:7.2vw;line-height:7.2vw;background:#FFF3E5;border-radius:2px;font-size:2.8vw;font-weight:400;color:#4A4F58;cursor:pointer;border:1px solid #FFF3E5}
+.article-edit .tag-list .tag.active{color:#E15616;background:#FFE6DC;border-color:#E15616}
+.article-edit .tag-list .tag .close{display:none;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{padding-bottom:5.6vw}
+.article-edit .control-group .tagName{width:69.4vw}
+.article-edit .control-group .addTag{width:21.4vw}
+.article-edit .radio-control{margin-right:5.6vw}
+/*.article-edit .btns{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}*/
+.article-edit .btns .btn{margin-bottom: 2.4vw }
+}

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

@@ -1,4 +1,6 @@
-@charset "UTF-8";.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
+@charset "UTF-8";
+@media screen and (min-width: 768px){
+.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;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:-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;-ms-flex-wrap:wrap;flex-wrap:wrap}
@@ -34,3 +36,45 @@
 .article-list .state.danger{color:#F94B4B}
 .article-list .state.primary{color:#1890F9}
 .article-list .pageWrap{width:100% !important}
+}
+
+@media screen and (max-width: 768px){
+/*.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}*/
+.top-row .crumbs{width:auto;padding:0;margin:0}
+.top-row .hot-tip{font-size:2.8vw;color:#E15616}
+.form-section .form-item{padding-bottom:18px}
+.form-section .form-item .form-label{font-size:3.4vw;color:#627386;margin-bottom: 2.8vw;display: block}
+.form-section .form-item:nth-child(1) .form-label,
+.form-section .form-item:nth-child(2) .form-label,
+.form-section .form-item:nth-child(3) .form-label{display: block;}
+.form-section .form-item .form-control{outline:none;width:100%;height:36px;padding:2.2vw 2.8vw;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.form-section .form-item .form-control::-webkit-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-select{color:#627386}
+.form-section .form-item .form-button{height:11.2vw;width: 40vw; font-size:2.8vw;text-align: center; line-height:11.2vw;border-radius:2px;cursor:pointer}
+.form-section .buttons{display: flex; justify-content:space-between}
+.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{overflow-y: auto; width:100%;padding:4vw 3.4vw 0;margin-bottom:3.8vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);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:250vw;}
+.article-list .table th{font-size:3.4vw;color:#627386;padding-bottom:3.8vw;border-bottom:1px solid #E2E7EF}
+.article-list .table td{font-size:2.8vw;color:#22272E;text-align:center}
+.article-list .table td{padding:3.8vw 0}
+.article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
+.article-list .table .title{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.article-list .table .reason{display:inline-block;width:14px;height:14px;background:#FF2A2A;color:#fff;border-radius:50%;vertical-align:middle;line-height:14px;text-align:center;margin-left:2px;cursor: help;}
+.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:2.8vw;color:#E15616;cursor:pointer}
+.article-list .table .cover{display:inline-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/encyclopedia/article-list.css

@@ -0,0 +1,80 @@
+@charset "UTF-8";
+@media screen and (min-width: 768px){
+.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;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:-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;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.form-section .form-item{-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:start;-ms-flex-pack:start;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;-webkit-box-sizing:border-box;box-sizing:border-box}
+.form-section .form-item .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
+.form-section .form-item .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
+.form-section .form-item .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
+.form-section .form-item .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
+.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{-webkit-box-pack:start;-ms-flex-pack:start;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;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);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;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.article-list .table .reason{display:inline-block;width:14px;height:14px;background:#FF2A2A;color:#fff;border-radius:50%;vertical-align:middle;line-height:14px;text-align:center;margin-left:2px;cursor: help;}
+.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:inline-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}
+}
+
+@media screen and (max-width: 768px){
+/*.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}*/
+.top-row .crumbs{width:auto;padding:0;margin:0}
+.top-row .hot-tip{font-size:2.8vw;color:#E15616}
+.form-section .form-item{padding-bottom:18px}
+.form-section .form-item .form-label{font-size:3.4vw;color:#627386;margin-bottom: 2.8vw;display: block}
+.form-section .form-item:nth-child(1) .form-label,
+.form-section .form-item:nth-child(2) .form-label,
+.form-section .form-item:nth-child(3) .form-label{display: block;}
+.form-section .form-item .form-control{outline:none;width:100%;height:36px;padding:2.2vw 2.8vw;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.form-section .form-item .form-control::-webkit-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-select{color:#627386}
+.form-section .form-item .form-button{height:11.2vw;width: 40vw; font-size:2.8vw;text-align: center; line-height:11.2vw;border-radius:2px;cursor:pointer}
+.form-section .buttons{display: flex; justify-content:space-between}
+.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{overflow-y: auto; width:100%;padding:4vw 3.4vw 0;margin-bottom:3.8vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);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:250vw;}
+.article-list .table th{font-size:3.4vw;color:#627386;padding-bottom:3.8vw;border-bottom:1px solid #E2E7EF}
+.article-list .table td{font-size:2.8vw;color:#22272E;text-align:center}
+.article-list .table td{padding:3.8vw 0}
+.article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
+.article-list .table .title{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.article-list .table .reason{display:inline-block;width:14px;height:14px;background:#FF2A2A;color:#fff;border-radius:50%;vertical-align:middle;line-height:14px;text-align:center;margin-left:2px;cursor: help;}
+.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:2.8vw;color:#E15616;cursor:pointer}
+.article-list .table .cover{display:inline-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/encyclopedia/edit-page.css

@@ -0,0 +1,412 @@
+.fiexd{
+    position: fixed;
+    width: 100%;
+    background: #fff;
+    z-index: 999;
+}
+
+@media screen and (min-width: 768px) {
+    .product-edit .navLayout .right {
+        width: auto
+    }
+
+    .product-edit .navLayout .right-box {
+        width: 968px
+    }
+
+    .product-edit .row {
+        box-sizing: border-box;
+        padding: 24px 0;
+        background: #FFFFFF;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
+    }
+
+    .product-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%)
+    }
+
+    /*验证表单*/
+    .valid-form {
+        width: 500px;
+        margin: 0 auto;
+        margin-top: 40px;
+    }
+
+    .valid-form h2 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #4A4F58;
+        margin-bottom: 16px;
+    }
+
+    .valid-form h2 em {
+        color: #e74c3c;
+        margin-right: 4px;
+    }
+
+
+    .valid-form .form-item {
+        position: relative;
+        padding-bottom: 30px;
+        margin-bottom: 4px;
+    }
+
+    .valid-form .form-item[required] em {
+        display: inline;
+    }
+
+    .valid-form .form-item.vertical {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .valid-form .form-item.vertical .form-label {
+        width: 100px;
+        padding: 4px 0;
+        margin-bottom: 0;
+    }
+
+    .valid-form .form-item.vertical .form-label.right {
+        text-align: right;
+    }
+
+    .valid-form .form-group {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .valid-form .valid-message {
+        position: absolute;
+        bottom: 0;
+        height: 30px;
+        line-height: 30px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        color: #e74c3c;
+        font-size: 12px;
+        display: none;
+    }
+
+    .valid-form .form-label {
+        margin-bottom: 4px;
+        line-height: 1.6;
+    }
+
+    .valid-form .form-label span {
+        color: #606266;
+    }
+
+    .valid-form .form-label em {
+        display: none;
+        color: #e74c3c;
+        margin-right: 4px;
+    }
+
+    .valid-form .cm-radio {
+        margin-right: 16px;
+    }
+
+    .valid-form .cm-select {
+        width: 100%;
+    }
+
+    .valid-form .cm-select .cm {
+        width: 100%;
+    }
+
+    .valid-form .form-item.btns {
+        justify-content: space-between;
+    }
+
+    .valid-form .btn {
+        width: 232px;
+        height: 50px;
+        text-align: center;
+        line-height: 50px;
+        font-size: 18px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        cursor: pointer
+    }
+
+    .valid-form .btn.break {
+        background: #FFE6DC;
+        border: 1px solid #E15616;
+        border-radius: 2px;
+        color: #E15616
+    }
+
+    .valid-form .btn.submit {
+        background: #E15616;
+        color: #FFFFFF
+    }
+
+    /*input-group*/
+    .valid-form .input-group .form-group {
+        position: relative;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        width: 100%;
+    }
+
+    .valid-form .input-group .add-btn,
+    .question-group .add-btn {
+        position: absolute;
+        right: 0;
+        top: -30px;
+        font-size: 12px;
+        color: #E15616;
+        cursor: pointer;
+        text-decoration: underline;
+    }
+
+    .valid-form .input-group .form-group input:nth-child(1) {
+        width: 30%;
+    }
+
+    .valid-form .input-group .form-group input:nth-child(2) {
+        flex: 1;
+        margin-left: 16px;
+    }
+
+    .question-group .form-group .remove {
+        top: 28px;
+    }
+
+    .question-group .form-group {
+        position: relative;
+        margin-top: 32px;
+        display: block;
+    }
+
+    .question-group .form-group:first-child {
+        margin-top: 0;
+    }
+
+    .question-group .form-group:first-child .question .form-label {
+        margin-top: 0;
+    }
+
+    .question-group .form-group .answer .form-label,
+    .question-group .form-group .question .form-label {
+        margin-top: 8px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .product-edit .navLayout .right {
+        width: auto
+    }
+
+    .product-edit .navLayout .right-box {
+        width: 100vw
+    }
+
+    .product-edit .row {
+        box-sizing: border-box;
+        padding: 3.2vw 0;
+        background: #FFFFFF;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
+    }
+
+    .product-edit .top-tip {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 9.6vw;
+        box-sizing: border-box;
+        padding: 0 8vw;
+        text-align: center;
+        font-size: 2.8vw;
+        line-height: 3.6vw;
+        color: #E15616;
+        background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
+    }
+
+    /*验证表单*/
+    .valid-form {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 0 3.2vw;
+        margin-top: 4vw;
+    }
+
+    .valid-form h2 {
+        font-size: 14px;
+        font-weight: bold;
+        color: #4A4F58;
+        margin-bottom: 1.2vw;
+    }
+
+    .valid-form h2 em {
+        color: #e74c3c;
+        margin-right: 0.8vw;
+    }
+
+
+    .valid-form .form-item {
+        position: relative;
+        padding-bottom: 4.2vw;
+        margin-bottom: 0.6vw;
+    }
+
+    .valid-form .form-item[required] em {
+        display: inline;
+    }
+
+    .valid-form .form-item.vertical {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .valid-form .form-item.vertical .form-label {
+        width: 100px;
+        padding: 4px 0;
+        margin-bottom: 0;
+    }
+
+    .valid-form .form-item.vertical .form-label.right {
+        text-align: right;
+    }
+
+    .valid-form .form-group {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .valid-form .valid-message {
+        position: absolute;
+        bottom: 0;
+        height: 4.2vw;
+        line-height: 4.2vw;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        color: #e74c3c;
+        font-size: 2.4vw;
+        display: none;
+    }
+
+    .valid-form .form-label {
+        margin-bottom: 1vw;
+        line-height: 1.6;
+    }
+
+    .valid-form .form-label span {
+        color: #606266;
+    }
+
+    .valid-form .form-label em {
+        display: none;
+        color: #e74c3c;
+        margin-right: 0.8vw;
+    }
+
+    .valid-form .cm-radio {
+        margin-right: 3.2vw;
+    }
+
+    .valid-form .cm-select {
+        width: 100%;
+    }
+
+    .valid-form .cm-select .cm {
+        width: 100%;
+    }
+    .valid-form .form-item.btns{
+        display: block;
+    }
+    .valid-form .btn {
+        width: 100%;
+        height: 11.2vw;
+        text-align: center;
+        line-height: 11.2vw;
+        margin-top: 3.4vw;
+        font-size: 3.8vw;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        cursor: pointer
+    }
+
+    .valid-form .btn.break {
+        background: #FFE6DC;
+        border: 1px solid #E15616;
+        border-radius: 2px;
+        color: #E15616
+    }
+
+    .valid-form .btn.submit {
+        background: #E15616;
+        color: #FFFFFF
+    }
+
+    /*input-group*/
+    .valid-form .input-group .form-group {
+        position: relative;
+        justify-content: space-between;
+        margin-bottom: 3.2vw;
+        width: 100%;
+    }
+
+    .valid-form .input-group .add-btn,
+    .question-group .add-btn {
+        position: absolute;
+        right: 0;
+        top: -30px;
+        font-size: 2.4vw;
+        color: #E15616;
+        cursor: pointer;
+        text-decoration: underline;
+    }
+
+    .valid-form .input-group .form-group input:nth-child(1) {
+        width: 30%;
+    }
+
+    .valid-form .input-group .form-group input:nth-child(2) {
+        flex: 1;
+        margin-left: 3.2vw;
+    }
+
+    .question-group .form-group .remove {
+        top: 7.4vw;
+    }
+
+    .question-group .form-group {
+        position: relative;
+        margin-top: 4.2vw;
+        display: block;
+    }
+
+    .question-group .form-group:first-child {
+        margin-top: 0;
+    }
+
+    .question-group .form-group:first-child .question .form-label {
+        margin-top: 0;
+    }
+
+    .question-group .form-group .answer .form-label,
+    .question-group .form-group .question .form-label {
+        margin-top: 1vw;
+    }
+}

src/main/resources/static/css/supplier-center/encyclopedia/form-component-style.css

@@ -0,0 +1,269 @@
+@font-face {
+	font-family: 'iconfont'; /* Project id 2996139 */
+	src: url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.woff2?t=1638926796866') format('woff2'),
+		url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.woff?t=1638926796866') format('woff'),
+		url('//at.alicdn.com/t/font_2996139_9eqk1x8ei1h.ttf?t=1638926796866') format('truetype');
+}
+
+.iconfont {
+	font-family: 'iconfont' !important;
+	font-size: 16px;
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-arrow-up:before {
+	content: '\e602';
+}
+
+.icon-arrow-down:before {
+	content: '\e604';
+}
+
+.cm {
+  display: inline-block;
+  line-height: 1.8;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #303133;
+}
+.cm .remove {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+  height: 20px;
+  background: #e74c3c;
+  color: #fff;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+.cm.border {
+  border: 1px solid #dcdfe6 !important;
+}
+.cm.radius {
+  border-radius: 6px !important;
+}
+.cm.max {
+  width: 100%;
+}
+.cm.btn {
+  position: relative;
+  border: 0;
+  background: #ecf0f1;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.cm.btn::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+.cm.btn:hover::after {
+  opacity: 0.08;
+}
+.cm.btn.info {
+  background: #ecf0f1;
+}
+.cm.btn.primary {
+  background: #3498db;
+  color: #fff;
+}
+.cm.btn.success {
+  background: #2ecc71;
+  color: #fff;
+}
+.cm.btn.warning {
+  background: #e6a23c;
+  color: #fff;
+}
+.cm.btn.danger {
+  background: #e74c3c;
+  color: #fff;
+}
+.cm.input[type=text], .cm.input[type=number],.cm.input[type=date], .cm.textarea {
+  border: 0;
+  outline: none;
+  padding: 4px 12px;
+}
+.cm.input[type=text]::placeholder, .cm.input[type=number]::placeholder, .cm.textarea::placeholder {
+  color: #909399;
+}
+.cm.textarea.no-resize {
+  resize: none;
+}
+.cm.radio {
+  position: relative;
+  padding-left: 24px;
+  cursor: pointer;
+}
+.cm.radio.checked {
+  color: #e15616;
+}
+.cm.radio.checked::before {
+  border-color: #e15616;
+}
+.cm.radio.checked::after {
+  opacity: 1;
+}
+.cm.radio::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  border: 1px solid #dcdfe6;
+  border-radius: 50%;
+  opacity: 1;
+}
+.cm.radio::after {
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  background: #e15616;
+  border-radius: 50%;
+  opacity: 0;
+  left: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: opacity 0.4s;
+}
+.cm.select {
+  position: relative;
+  cursor: pointer;
+}
+.cm.select input[type=text] {
+  padding-right: 36px;
+}
+.cm.select .cm-icon {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  color: #606266;
+}
+.cm.select::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+.cm.select .options {
+  position: absolute;
+  z-index: 3;
+  width: 100%;
+  box-sizing: border-box;
+  transform: translateY(5px);
+  padding: 8px 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.cm.select .options::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+}
+.cm.select .options::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background-color: #dcdfe6;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+.cm.select .options.border {
+  border: 1px solid #ebeef5;
+}
+.cm.select .options.shadow {
+  box-shadow: 0 0 12px rgba(26, 10, 10, 0.1);
+}
+.cm.select .options.radius {
+  border-radius: 6px;
+}
+.cm.option {
+  display: block;
+  padding: 4px 12px;
+  transition: all 0.2s;
+  background: #fff;
+}
+.cm.option:hover {
+  background: #e15616;
+  color: #fff;
+}
+.cm.image-upload {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.cm.image-upload .border {
+  border: 1px solid #dcdfe6;
+}
+.cm.image-upload .dashed {
+  border: 1px dashed #dcdfe6;
+}
+.cm.image-upload .choose-image,
+.cm.image-upload .image {
+  position: relative;
+  width: 90px;
+  height: 90px;
+  box-sizing: border-box;
+  cursor: pointer;
+  margin: 0 8px 8px 0;
+}
+.cm.image-upload .image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.cm.image-upload .image img {
+  height: 100%;
+}
+.cm.image-upload .choose-image {
+  margin-right: 0;
+}
+.cm.image-upload .choose-image input[type=file] {
+  display: none;
+}
+.cm.image-upload .choose-image span {
+  position: absolute;
+  bottom: 10%;
+  text-align: center;
+  width: 100%;
+  color: #909399;
+  font-size: 12px;
+}
+.cm.image-upload .choose-image::before, .cm.image-upload .choose-image::after {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  content: "";
+  display: block;
+  background: #dcdfe6;
+  transform: translate(-50%, -50%);
+}
+.cm.image-upload .choose-image::before {
+  width: 27px;
+  height: 4px;
+}
+.cm.image-upload .choose-image::after {
+  height: 27px;
+  width: 4px;
+}

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

@@ -0,0 +1,680 @@
+@charset "UTF-8";
+/*!
+ * 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/product/alliance-page.js

@@ -0,0 +1,136 @@
+'use strict';
+// loading组件
+var LoadingWrap = {
+    name: 'Loading',
+    render: function render(h) {
+        return h('div', { class: ['loading-wrap'] }, [h('img', { attrs: { src: '/img/alliance-page/loading.gif', alt: 'loading' } })]);
+    }
+};
+
+function remove(el) {
+    el.removeChild(el.instance.$el);
+}
+
+function append(el) {
+    el.appendChild(el.instance.$el);
+}
+
+// 定义 loading 指令
+var loadingDirective = {
+    inserted: function inserted(el, binding) {
+        // 创建 loading 组件构造函数
+        var LoadingCtor = Vue.extend(LoadingWrap);
+        // new 一个 loading组件实例
+        var loadingInstance = new LoadingCtor();
+        // 组件挂载
+        el.instance = loadingInstance.$mount();
+        // 传入值为 true 时才展示
+        if (binding.value) {
+            // 将组件挂载到绑定指令的元素上
+            append(el);
+        }
+    },
+    update: function update(el, binding) {
+        // 值更新时进行操作
+        if (binding.value !== binding.oldValue) {
+            binding.value ? append(el) : remove(el);
+        }
+    }
+};
+
+// vue实例
+var zplm = new Vue({
+    el: '#zplm',
+    directives: {
+        loading: loadingDirective
+    },
+    data: {
+        isPc: $(window).width() > 768,
+        authCardVisible: false,
+        statementVisible: false,
+        showStatementContent: false,
+        wechatVisible: true,
+        showMask: false,
+        isRequest: true,
+        // 产品id
+        productId: '',
+        //产品参数对象
+        productAuthInfo: {},
+        //错误信息
+        errorMessage: '',
+        // 定时器
+        timer: null
+    },
+    computed: {
+        // 封面图 主图
+        coverImage: function coverImage() {
+            return this.isPc ? this.productAuthInfo.pcImage : this.productAuthInfo.appletsImage;
+        },
+
+        // 授权机构
+        authOrigin: function authOrigin() {
+            return this.productAuthInfo.agentFlag !== 0 ? this.productAuthInfo.shopName : this.productAuthInfo.brandName;
+        },
+
+        // 不换行
+        noWarp: function noWarp() {
+            if (this.isPc && this.productAuthInfo.paramList.length > 1) return { 'white-space': 'nowrap' };
+            return '';
+        }
+    },
+    created: function created() {
+        this.getProductId();
+        this.fetchProductAuthInfo();
+    },
+
+    filters: {
+        // 处理sn码
+        snCode: function snCode(code) {
+            if (!code) return '';
+            return code.replace(/^(\w{2})\w+(\w{4})$/, "$1******$2");
+        }
+    },
+    methods: {
+        // 获取商品id
+        getProductId: function getProductId() {
+            var productId = window.location.pathname.split('-')[1].split('.')[0];
+            this.productId = parseInt(productId);
+        },
+
+        // 获取授权信息
+        fetchProductAuthInfo: function fetchProductAuthInfo() {
+            var that = this;
+            ProductApi.GetAuthProductDeatil({ productId: that.productId }, function (res) {
+                // 获取授权信息失败
+                if (res.code) {
+                    that.isRequest = false;
+                    return that.errorMessage = res.msg;
+                }
+                // 获取授权信息成功
+                that.productAuthInfo = res.data;
+                that.isRequest = false;
+            });
+        },
+
+        // 显示授权牌
+        handleShowAuthCard: function handleShowAuthCard() {
+            this.authCardVisible = !this.authCardVisible;
+            this.showMask = !this.showMask;
+        },
+
+        // 显示声明弹窗
+        handleShowStatement: function handleShowStatement() {
+            var that = this;
+            this.statementVisible = !this.statementVisible;
+            this.showMask = !this.showMask;
+            this.timer = setTimeout(function () {
+                that.showStatementContent = !that.showStatementContent;
+            }, 800);
+        },
+
+        // 显示微信二维码
+        handleShowWechat: function handleShowWechat() {
+            this.wechatVisible = !this.wechatVisible;
+        }
+    }
+});

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

@@ -212,3 +212,6 @@ var articleEdit = new Vue({
     }
 });
 
+
+
+

src/main/resources/static/js/supplier-center/encyclopedia/form-component.js

@@ -0,0 +1,474 @@
+'use strict';
+
+function _toConsumableArray(arr) {
+    if (Array.isArray(arr)) {
+        for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) {
+            arr2[i] = arr[i];
+        }
+        return arr2;
+    } else {
+        return Array.from(arr);
+    }
+}
+
+// 查找html元素
+function queryElement(el) {
+    return document.querySelector(el);
+}
+
+// 返回模板字符串
+function templateHtml(el) {
+    return queryElement(el).innerHTML;
+}
+
+// Radio组件
+function createnRadio() {
+    var Radio = {
+        template: templateHtml('#radio'),
+        model: {
+            prop: 'value',
+            event: 'click'
+        },
+        props: {
+            label: {
+                type: [Number, String],
+                default: ''
+            },
+            value: {
+                type: [Number, String],
+                default: ''
+            }
+        },
+        computed: {
+            isChecked: function isChecked() {
+                return this.value === this.label;
+            }
+        },
+        methods: {
+            handleClick: function handleClick() {
+                this.$emit('click', this.label);
+            }
+        }
+    };
+    return Radio;
+}
+
+// Select组件
+function createSelect() {
+    var Select = {
+        template: templateHtml('#select'),
+        props: {
+            value: {
+                type: [Number, String],
+                default: ''
+            },
+            placeholder: {
+                type: String,
+                default: ''
+            }
+        },
+        model: {
+            prop: 'value',
+            event: 'change'
+        },
+        data: function data() {
+            return {
+                optionsVisible: false,
+                label: ''
+            };
+        },
+        mounted: function mounted() {
+            var _this = this;
+
+            document.addEventListener('click', function () {
+                _this.optionsVisible = false;
+            });
+        },
+        beforeDestroy: function beforeDestroy() {
+            document.removeEventListener('click');
+        }
+    };
+    return Select;
+}
+
+// Option组件
+function createOption() {
+    var Option = {
+        template: templateHtml('#option'),
+        props: {
+            label: {
+                type: [String, Number],
+                default: ''
+            },
+            value: {
+                type: [String, Number],
+                default: ''
+            }
+        },
+        methods: {
+            handleClick: function handleClick() {
+                this.$parent.$emit('change', this.value);
+                this.$parent.$data.optionsVisible = false;
+                this.$parent.$data.label = this.label;
+            }
+        }
+    };
+    return Option;
+}
+
+// 上传文件组件
+function createUploadImage() {
+    var UploadImage = {
+        template: templateHtml('#imageUpload'),
+        props: {
+            placeholder: {
+                type: String,
+                default: '上传图片'
+            },
+            multiple: {
+                type: Boolean,
+                default: false
+            },
+            limit: {
+                type: Number,
+                default: 9
+            },
+            imgList: {
+                type: Array,
+                default: function _default() {
+                    return [];
+                }
+            }
+        },
+        data: function data() {
+            return {
+                files: [],
+                accept: '.jpg, .jpeg, .png, .gif'
+            };
+        },
+        created: function created() {
+            this.files = this.handleFilterImage(this.imgList);
+        },
+
+        computed: {
+            fileCount: function fileCount() {
+                return this.files.length;
+            },
+            canChooseImage: function canChooseImage() {
+                return !this.multiple && this.fileCount < 1 && this.fileCount < this.limit;
+            }
+        },
+        methods: {
+            handleClick: function handleClick() {
+                this.$refs.file.click();
+            },
+
+            // 选择图片
+            handleChooseImage: function handleChooseImage(e) {
+                var files = [].concat(_toConsumableArray(e.target.files));
+                this.createObjectUrl(files);
+                this.$emit('change', this.files);
+            },
+
+            // 将文件处理成可预览链接
+            createObjectUrl: function createObjectUrl(files) {
+                var _this2 = this;
+
+                if (!this.multiple && this.fileCount === 1) return;
+                if (this.fileCount === this.limit) return;
+                files = this.handleFilterImage(files);
+                files.forEach(function (file) {
+                    file.url = URL.createObjectURL(file);
+                    _this2.files.push(file);
+                });
+            },
+
+
+            // 筛选图片
+            handleFilterImage: function handleFilterImage(files) {
+                if (this.multiple) {
+                    files = files.slice(0, this.limit - this.fileCount);
+                } else {
+                    files = files.slice(0, 1);
+                }
+                return files;
+            },
+
+
+            // 删除图片
+            removeImage: function removeImage(index) {
+                this.files.splice(index, 1);
+            }
+        }
+    };
+    return UploadImage;
+}
+
+//富文本框封装
+function createEditorComponent() {
+    window.editorCount = 0;
+    const Editor = {
+        render: function render(h){
+            return h('div', { class: { 'cm': true, 'editor': true }, attrs: { id: this.editorId } })
+        },
+        model: {
+            prop: 'value',
+            event: 'change'
+        },
+        props:{
+            value: {
+                type: String,
+                default: ''
+            },
+            placeholder:{
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                editorId: '',
+                editor: null
+            }
+        },
+        created: function created() {
+            window.editorCount++;
+            this.editorId = 'editorId-' + window.editorCount;
+        },
+        mounted: function mounted() {
+            this.createEditor();
+        },
+        beforeDestroy: function beforeDestroy(){
+            this.editor.destroy();
+            this.editor = null;
+        },
+        methods: {
+            // 创建编辑器
+            createEditor: function createEditor() {
+                const E = window.wangEditor;
+                this.editor = new E('#' + this.editorId);
+                // 或者 const editor = new E( document.getElementById('div1') )
+                this.initEditorOptions();
+                this.editor.create()
+            },
+            // 富文本框配置
+            initEditorOptions: function initEditorOptions() {
+                this.editor.config.zIndex = 333;
+                this.editor.config.height = 200;
+                this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
+                this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
+                this.editor.config.placeholder = this.placeholder;
+                var that = this;
+                this.editor.config.onchange = function (newHtml) {
+                    that.$emit('change', newHtml)
+                };
+
+                this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+                    resultFiles.forEach(function (file) {
+                        // resultFiles 是 input 中选中的文件列表
+                        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
+                        that.uploadImage(file).then(function (res) {
+                            insertImgFn(res);
+                        });
+                    });
+                };
+            },
+            // 上传图片
+            uploadImage: function uploadImage(file) {
+                var formData = new FormData();
+                formData.append('file', file);
+                return new Promise(function (resolve, reject) {
+                    PublicApi.uploadimg(formData, function (res) {
+                        if (res.code === 0) {
+                            resolve(res.data);
+                        }
+                        reject();
+                    });
+                });
+            }
+        }
+    };
+    return Editor;
+}
+
+// 文本框列表
+function  createInputGroup() {
+    const InputGroup = {
+        template: templateHtml('#inputGroup'),
+        props:{
+            // 最小数量
+            minLimit: {
+                type: Number,
+                default: 5
+            },
+            // 回显列表
+            list: {
+                type: Array,
+                default: function _default() {
+                    return [];
+                }
+            },
+            placeholderList: {
+                type: Array,
+                default: function _default() {
+                    return [];
+                }
+            },
+            keyMap: {
+                type: Object,
+                default: () => ({
+                    key: 'name',
+                    value: 'value'
+                })
+            },
+            addText:{
+                type: String,
+                default: ''
+            }
+        },
+        data: function(){
+            return {
+                dataList: [],
+                placeholder: { label: '参数名',value: '请输入参数信息'},
+            }
+        },
+        computed:{
+            showList: function(){
+                const len = this.dataList.length;
+                if(len >= this.minLimit) return this.dataList;
+                const emptyList = this.setEmptyData(this.minLimit - len);
+                console.log(this.dataList);
+                console.log(emptyList);
+                return this.dataList.concat(emptyList);
+            }
+        },
+        created: function(){
+            console.log(this.list);
+            this.dataList = this.list;
+        },
+        watch:{
+            list: function(nVal){
+                console.log(nVal);
+                this.dataList = nVal;
+            }
+        },
+        methods:{
+            // add
+            getPlaceholder(index){
+                if(this.placeholderList.length <= 0) return this.placeholder;
+                return this.placeholderList[index] || this.placeholder;
+            },
+            //添加空数据
+            setEmptyData(size) {
+                const list = [];
+                for (let i = 0; i < size; i++) {
+                    let obj = Object.create(null);
+                    obj[this.keyMap.key] = "";
+                    obj[this.keyMap.value] = '';
+                    list.push(obj)
+                }
+                return list
+            },
+            handleRemove(item){
+                this.$emit('remove', item);
+            },
+            handleAddOnce(){
+                console.log(1111);
+                this.$emit('add')
+            }
+        }
+    };
+    return InputGroup;
+}
+
+// 问答组件
+function createQuestionGroup(){
+    const QuestionGroup = {
+        template: templateHtml('#questionGroup'),
+        props:{
+            // 最小数量
+            minLimit: {
+                type: Number,
+                default: 5
+            },
+            // 回显列表
+            list: {
+                type: Array,
+                default: function _default() {
+                    return [];
+                }
+            },
+            placeholderList: {
+                type: Array,
+                default: function _default() {
+                    return [];
+                }
+            },
+            keyMap: {
+                type: Object,
+                default: () => ({
+                    key: 'name',
+                    value: 'value'
+                })
+            },
+            addText:{
+                type: String,
+                default: ''
+            }
+        },
+        data: function(){
+            return {
+                dataList: [],
+                placeholder: { label: '请输入问题',value: '请输入回答'},
+            }
+        },
+        computed:{
+            showList: function(){
+                const len = this.dataList.length;
+                if(len >= this.minLimit) return this.dataList;
+                const emptyList = this.setEmptyData(this.minLimit - len);
+                console.log(this.dataList);
+                console.log(emptyList);
+                return this.dataList.concat(emptyList);
+            }
+        },
+        created: function(){
+            console.log(this.list);
+            this.dataList = this.list;
+        },
+        watch:{
+            list: function(nVal){
+                console.log(nVal);
+                this.dataList = nVal;
+            }
+        },
+        methods:{
+            // add
+            getPlaceholder(index){
+                if(this.placeholderList.length <= 0) return this.placeholder;
+                return this.placeholderList[index] || this.placeholder;
+            },
+            //添加空数据
+            setEmptyData(size) {
+                const list = [];
+                for (let i = 0; i < size; i++) {
+                    let obj = Object.create(null);
+                    obj[this.keyMap.key] = "";
+                    obj[this.keyMap.value] = '';
+                    list.push(obj)
+                }
+                return list
+            },
+            handleRemove(item){
+                this.$emit('remove', item);
+            },
+            handleAddOnce(){
+                console.log(1111);
+                this.$emit('add')
+            }
+        }
+    };
+    return QuestionGroup;
+}
+
+

src/main/resources/static/js/supplier-center/encyclopedia/instrument-edit.js

@@ -0,0 +1,80 @@
+const Radio = createnRadio();
+const Select = createSelect();
+const Option = createOption();
+const UploadImage = createUploadImage();
+const Editor = createEditorComponent();
+const InputGroup = createInputGroup();
+const QuestionGroup = createQuestionGroup()
+
+new Vue({
+    el: '#productEdit',
+    components:{
+        'cm-radio': Radio,
+        'cm-select': Select,
+        'cm-option': Option,
+        'cm-upload-image': UploadImage,
+        'cm-editor': Editor,
+        'cm-input-group': InputGroup,
+        'cm-question-group': QuestionGroup
+    },
+    data:{
+        status: 1,
+        options: [
+            {
+                value: '选项1',
+                label: '黄金糕',
+            },
+            {
+                value: '选项2',
+                label: '双皮奶',
+            },
+            {
+                value: '选项3',
+                label: '蚵仔煎',
+            },
+            {
+                value: '选项4',
+                label: '龙须面',
+            },
+            {
+                value: '选项5',
+                label: '北京烤鸭',
+            },
+        ],
+        selected: '',
+        youdian: '',
+        paramsList: [
+            {
+                name: '品牌',
+                value: '华硕'
+            },
+            {
+                name: '尺寸',
+                value: '30mm*30mm'
+            }
+        ],
+        placeholderList: [{
+            label: '例如：名牌',
+            value: '请输入名牌信息'
+        }],
+        minLimit: 1
+    },
+    mounted: function(){
+        $('.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(1).addClass("on");
+    },
+    watch: {
+    },
+    methods: {
+        handleRemove(item){
+            console.log(item);
+        },
+        handleAdd(){
+            console.log(1111);
+            this.paramsList.push({
+                name: '',
+                value: ''
+            })
+        }
+    }
+});

src/main/resources/static/js/supplier-center/encyclopedia/instrument-list.js

@@ -0,0 +1,221 @@
+"use strict";
+
+console.log(123);
+
+var instrumentList = new Vue({
+    el: '#instrumentList',
+    data: {
+        name: 'supplier-article-list',
+        refreshType: '',
+        hidden: '',
+        visibilityChange: '',
+        listRecord: 0,
+        shopId: GLOBAL_SHOP_ID || 0,
+        listQuery: {
+            articleId: '',
+            title: '',
+            publisher: '',
+            auditStatus: '',
+            typeId: '',
+            pageNum: 1,
+            pageSize: 10
+        },
+        pageInput: 1,
+        pageTotal: 0,
+        articleList: [],
+        articleTypeList: [],
+        categoryKeyMap: {
+            name: 'typeName',
+            value: 'typeId'
+        },
+        auditStatusList: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '待审核',
+                value: 1,
+            },
+            {
+                name: '审核通过',
+                value: 2,
+            },
+            {
+                name: '审核未通过',
+                value: 3,
+            }
+        ]
+    },
+    computed: {
+        pageTotal: function pageTotal() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function showPageBtn() {
+            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];
+        }
+    },
+    filters: {
+        // 时间格式化
+        formatDate: function formatDate(date) {
+            if (!date) return '---';
+            return dateFormat(new Date(date));
+        }
+    },
+    created: function created() {
+        this.getArticleList();
+        this.fetchArticleCatagory();
+    },
+    mounted: function mounted() {
+        window.name = this.name;
+        $('.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(1).addClass("on");
+    },
+    methods: {
+        // 获取文章列表
+        getArticleList: function getArticleList() {
+            var that = this;
+            this.listQuery.shopId = this.shopId;
+            SupplierApi.GetArticleList(this.listQuery, function (res) {
+                // console.log(res);
+                if (res.code === 0) {
+                    that.listRecord = res.data.total;
+                    that.articleList = res.data.list;
+                    that.pageTotal = res.data.pages;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //表格操作按钮点击
+        clickOption: function clickOption(article, type) {
+            var handles = {
+                1: this.toEdit,
+                2: this.changeStatus,
+                3: this.toDetail,
+                4: this.handleDelete
+            };
+            handles[type](article);
+        },
+        //跳转编辑页面
+        toEdit: function toEdit(article) {
+            localStorage.setItem('articleId', article.articleId);
+            window.open('/supplier/encyclopedia/instrument-edit.html');
+        },
+        //修改状态
+        changeStatus: function changeStatus(article) {
+            var newStatus = 1;
+
+            if (article.status === 1) {
+                newStatus = 0;
+            }
+
+            SupplierApi.ArticleStatusChange({
+                articleId: article.articleId,
+                shopId: this.shopId,
+                status: newStatus
+            }, function (res) {
+                if (res.code === 0) {
+                    // 不刷新数据更新
+                    article.status = newStatus;
+                    CAIMEI.dialog('修改状态成功!');
+                } else {
+                    CAIMEI.dialog('修改状态失败!');
+                }
+            });
+        },
+        //查看
+        toDetail: function toDetail(article) {
+            if (article.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
+            if (!article.status) return CAIMEI.dialog('请未启后查看!');
+            window.open('/encyclopedia/instrument-' + article.articleId + '.html');
+        },
+        // 跳转添加文章页面
+        handleAddArticle: function handleAddArticle() {
+            window.open('/supplier/encyclopedia/instrument-edit.html');
+        },
+        // 查询文章列表
+        handleSearchList: function handleSearchList() {
+            this.listQuery.pageNum = 1;
+            this.getArticleList();
+        },
+        // 获取文章列表
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
+            SupplierApi.ArticleCategory({}, function (res) {
+                if (res.code === 0) {
+                    that.articleTypeList = res.data;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //删除确认
+        handleDelete: function handleDelete(article) {
+            var that = this;
+            var params = {
+                content: '确认删除该商品信息?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除'
+            };
+            CAIMEI.Popup(params, function () {
+                that.articleDelete(article);
+            });
+        },
+        // 删除文章
+        articleDelete: function articleDelete(article) {
+            var that = this;
+            SupplierApi.ArticleRemove({
+                articleId: article.articleId
+            }, function (res) {
+                if (res.code === 0) {
+                    that.getArticleList();
+                    CAIMEI.dialog('删除文章成功!');
+                } else {
+                    CAIMEI.dialog('删除文章失败!');
+                }
+            });
+        },
+        //页码跳转
+        toPagination: function toPagination(pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
+                this.getArticleList();
+                $('html ,body').animate({scrollTop: 0}, 400, 'linear'); // 页面置顶
+            }
+        },
+        // 输入框设置页码
+        checkNum: function checkNum() {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        cateSelectChange(data) {
+            console.log(data);
+            this.listQuery.typeId = data.typeId;
+            this.getArticleList()
+        },
+        auditStatusChange(data){
+            this.listQuery.auditStatus = data.value
+            this.getArticleList()
+        }
+    }
+});

src/main/resources/static/js/supplier-center/encyclopedia/product-edit.js

@@ -0,0 +1,80 @@
+const Radio = createnRadio();
+const Select = createSelect();
+const Option = createOption();
+const UploadImage = createUploadImage();
+const Editor = createEditorComponent();
+const InputGroup = createInputGroup();
+const QuestionGroup = createQuestionGroup()
+
+new Vue({
+    el: '#productEdit',
+    components:{
+        'cm-radio': Radio,
+        'cm-select': Select,
+        'cm-option': Option,
+        'cm-upload-image': UploadImage,
+        'cm-editor': Editor,
+        'cm-input-group': InputGroup,
+        'cm-question-group': QuestionGroup
+    },
+    data:{
+        status: 1,
+        options: [
+            {
+                value: '选项1',
+                label: '黄金糕',
+            },
+            {
+                value: '选项2',
+                label: '双皮奶',
+            },
+            {
+                value: '选项3',
+                label: '蚵仔煎',
+            },
+            {
+                value: '选项4',
+                label: '龙须面',
+            },
+            {
+                value: '选项5',
+                label: '北京烤鸭',
+            },
+        ],
+        selected: '',
+        youdian: '',
+        paramsList: [
+            {
+                name: '品牌',
+                value: '华硕'
+            },
+            {
+                name: '尺寸',
+                value: '30mm*30mm'
+            }
+        ],
+        placeholderList: [{
+            label: '例如：名牌',
+            value: '请输入名牌信息'
+        }],
+        minLimit: 1
+    },
+    mounted: function(){
+        $('.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");
+    },
+    watch: {
+    },
+    methods: {
+        handleRemove(item){
+            console.log(item);
+        },
+        handleAdd(){
+            console.log(1111);
+            this.paramsList.push({
+                name: '',
+                value: ''
+            })
+        }
+    }
+});

src/main/resources/static/js/supplier-center/encyclopedia/product-list.js

@@ -0,0 +1,221 @@
+"use strict";
+
+console.log(123);
+
+var productList = new Vue({
+    el: '#productList',
+    data: {
+        name: 'supplier-article-list',
+        refreshType: '',
+        hidden: '',
+        visibilityChange: '',
+        listRecord: 0,
+        shopId: GLOBAL_SHOP_ID || 0,
+        listQuery: {
+            articleId: '',
+            title: '',
+            publisher: '',
+            auditStatus: '',
+            typeId: '',
+            pageNum: 1,
+            pageSize: 10
+        },
+        pageInput: 1,
+        pageTotal: 0,
+        articleList: [],
+        articleTypeList: [],
+        categoryKeyMap: {
+            name: 'typeName',
+            value: 'typeId'
+        },
+        auditStatusList: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '待审核',
+                value: 1,
+            },
+            {
+                name: '审核通过',
+                value: 2,
+            },
+            {
+                name: '审核未通过',
+                value: 3,
+            }
+        ]
+    },
+    computed: {
+        pageTotal: function pageTotal() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function showPageBtn() {
+            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];
+        }
+    },
+    filters: {
+        // 时间格式化
+        formatDate: function formatDate(date) {
+            if (!date) return '---';
+            return dateFormat(new Date(date));
+        }
+    },
+    created: function created() {
+        this.getArticleList();
+        this.fetchArticleCatagory();
+    },
+    mounted: function mounted() {
+        window.name = this.name;
+        $('.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");
+    },
+    methods: {
+        // 获取文章列表
+        getArticleList: function getArticleList() {
+            var that = this;
+            this.listQuery.shopId = this.shopId;
+            SupplierApi.GetArticleList(this.listQuery, function (res) {
+                // console.log(res);
+                if (res.code === 0) {
+                    that.listRecord = res.data.total;
+                    that.articleList = res.data.list;
+                    that.pageTotal = res.data.pages;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //表格操作按钮点击
+        clickOption: function clickOption(article, type) {
+            var handles = {
+                1: this.toEdit,
+                2: this.changeStatus,
+                3: this.toDetail,
+                4: this.handleDelete
+            };
+            handles[type](article);
+        },
+        //跳转编辑页面
+        toEdit: function toEdit(article) {
+            localStorage.setItem('articleId', article.articleId);
+            window.open('/supplier/encyclopedia/product-edit.html');
+        },
+        //修改状态
+        changeStatus: function changeStatus(article) {
+            var newStatus = 1;
+
+            if (article.status === 1) {
+                newStatus = 0;
+            }
+
+            SupplierApi.ArticleStatusChange({
+                articleId: article.articleId,
+                shopId: this.shopId,
+                status: newStatus
+            }, function (res) {
+                if (res.code === 0) {
+                    // 不刷新数据更新
+                    article.status = newStatus;
+                    CAIMEI.dialog('修改状态成功!');
+                } else {
+                    CAIMEI.dialog('修改状态失败!');
+                }
+            });
+        },
+        //查看
+        toDetail: function toDetail(article) {
+            if (article.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
+            if (!article.status) return CAIMEI.dialog('请未启后查看!');
+            window.open('/encyclopedia/product-' + article.articleId + '.html');
+        },
+        // 跳转添加文章页面
+        handleAddArticle: function handleAddArticle() {
+            window.open('/supplier/encyclopedia/product-edit.html');
+        },
+        // 查询文章列表
+        handleSearchList: function handleSearchList() {
+            this.listQuery.pageNum = 1;
+            this.getArticleList();
+        },
+        // 获取文章列表
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
+            SupplierApi.ArticleCategory({}, function (res) {
+                if (res.code === 0) {
+                    that.articleTypeList = res.data;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //删除确认
+        handleDelete: function handleDelete(article) {
+            var that = this;
+            var params = {
+                content: '确认删除该商品信息?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除'
+            };
+            CAIMEI.Popup(params, function () {
+                that.articleDelete(article);
+            });
+        },
+        // 删除文章
+        articleDelete: function articleDelete(article) {
+            var that = this;
+            SupplierApi.ArticleRemove({
+                articleId: article.articleId
+            }, function (res) {
+                if (res.code === 0) {
+                    that.getArticleList();
+                    CAIMEI.dialog('删除文章成功!');
+                } else {
+                    CAIMEI.dialog('删除文章失败!');
+                }
+            });
+        },
+        //页码跳转
+        toPagination: function toPagination(pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
+                this.getArticleList();
+                $('html ,body').animate({scrollTop: 0}, 400, 'linear'); // 页面置顶
+            }
+        },
+        // 输入框设置页码
+        checkNum: function checkNum() {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        cateSelectChange(data) {
+            console.log(data);
+            this.listQuery.typeId = data.typeId;
+            this.getArticleList()
+        },
+        auditStatusChange(data){
+            this.listQuery.auditStatus = data.value
+            this.getArticleList()
+        }
+    }
+});

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

@@ -177,7 +177,7 @@ var operationPage = new Vue({
         }
         console.log(this.listQuery.orderState)
         $('.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(1).addClass("on");
+        $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
 
     }
 });

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(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/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(4).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        $('.navLayout').find('.navList').eq(5).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
 
          }
 });

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

@@ -129,6 +129,6 @@ var phonePage = new Vue({
             _self.form.userId = globalUserData.userId;
         }
         $('.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(1).addClass("on");
+        $('.navLayout').find('.navList').eq(5).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
     }
 });

src/main/resources/templates/product/alliance-page.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en" 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 href="/lib/css/animate-4.1.1.min.css" rel="stylesheet" />
+		<link th:href="@{/css/product/alliance-page.css(v=${version})}" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+	    <input type="hidden" th:value="${coreServer}" id="coreServer">
+		<div id="zplm" v-cloak v-loading="isRequest">
+			<template v-if="!isRequest && !errorMessage">
+				<!-- 顶部 -->
+				<header class="zp-header">
+					<div class="container">
+						<a href="#">
+							<h1>
+								<img src="/img/alliance-page/zp-pc-logo.png" alt="正品联盟" />
+								<span class="name">正品联盟</span>
+							</h1>
+						</a>
+					</div>
+				</header>
+
+				<!-- 内容主体 -->
+				<main class="zp-main">
+					<!-- 商品信息 -->
+					<div class="container zp-row">
+						<div class="zp-img">
+							<!-- 主图 -->
+							<img class="zp-cover-img" :src="coverImage" alt="主图" />
+							<!-- 授权logo -->
+							<img class="zp-auth-logo animate__animated animate__zoomIn" :src="productAuthInfo.authLogo" alt="授权logo" />
+							<!-- 授权标志 -->
+							<img class="zp-auth-sign animate__animated animate__zoomIn" src="/img/alliance-page/zp-auth-sign.png" alt="授权标志" />
+							<!-- 授权牌 -->
+							<img
+								class="zp-auth-card animate__animated animate__zoomIn"
+								:src="productAuthInfo.appletsCertificateImage"
+								v-show="!authCardVisible"
+								@click="handleShowAuthCard"
+								alt="授权牌"
+							/>
+						</div>
+						<div class="zp-info">
+							<h2 class="animate__animated animate__fadeInUp" v-text="productAuthInfo.productName"></h2>
+							<div class="content">
+								<div class="zp-group animate__animated animate__fadeInUp">
+									<div class="zp-item zp-brand">
+										<span>品牌：</span><span v-text="productAuthInfo.brandName"></span>
+									</div>
+									<span class="line"></span>
+									<div class="zp-item zp-origin">
+										<span>产地：</span><span v-text="productAuthInfo.productionPlace"></span>
+									</div>
+								</div>
+								<div class="zp-item zp-sncode animate__animated animate__fadeInUp">
+									<span>SN码：</span>
+									<span>{{ productAuthInfo.snCode | snCode }}</span>
+								</div>
+								<div class="zp-item zp-agent animate__animated animate__fadeInUp">
+									<span>代理商：</span>
+									<span v-text="productAuthInfo.shopName"></span>
+								</div>
+								<a
+									v-if="productAuthInfo.securityLink"
+									:href="productAuthInfo.securityLink"
+									class="zp-click websit animate__animated animate__delay-1s"
+									:class="isPc ? 'animate__fadeInDownBig' : 'animate__fadeInRightBig'"
+								>官网认证<span>&gt;</span>
+								</a>
+							</div>
+							<div class="zp-auth-info animate__animated" :class="isPc ? 'animate__backInUp' : 'animate__fadeInLeft'">
+								<div class="zp-auth-icon"></div>
+								<div class="zp-auth-text">{{ authOrigin }}<b>授予{{ productAuthInfo.authParty }}</b>正品拥有</div>
+							</div>
+						</div>
+					</div>
+					<!-- 参数信息 -->
+					<div class="container zp-row">
+						<div class="zp-title animate__animated animate__fadeInUp">
+							<div>相关参数</div>
+							<div class="line"></div>
+						</div>
+						<div class="zp-params animate__animated" :class="{animate__fadeInUpBig: isPc}">
+							<div
+								class="row animate__animated"
+								:class="!isPc && index % 2 ? 'animate__fadeInLeftBig' : 'animate__fadeInRightBig'"
+								v-for="(param , index) in productAuthInfo.paramList"
+								:key="index"
+								:style="[noWarp]"
+							>
+								<div class="col" v-text="param.name"></div>
+								<div class="col" v-text="param.content"></div>
+							</div>
+						</div>
+					</div>
+				</main>
+				<!-- 底部 -->
+				<footer class="zp-footer">
+					<p><a href="#" @click.prevent="handleShowStatement">采美声明</a>&nbsp;|&nbsp;由采美信息技术提供技术支持</p>
+				</footer>
+
+				<!-- 遮罩层 -->
+				<div class="zp-mask" v-show="showMask"></div>
+				<!-- 弹出层 -->
+				<transition enter-active-class="animate__fadeInUpBig" leave-active-class="animate__fadeOutDownBig">
+					<div class="zp-popup animate__animated" v-show="statementVisible">
+						<div class="zp-popup-content">
+							<span class="close" @click="handleShowStatement"></span>
+							<div class="title">采美声明</div>
+							<div class="content" v-show="showStatementContent">
+								<p>
+									目前，在市面上经常发现不少伪劣医疗美容产品/仪器，让众多的消费者无法辨别产品/仪器的真假，并且给品牌方及品牌代理商造成不少困扰
+								</p>
+								<p>
+									为了提高消费者对产品/仪器的可信度。由采美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+									联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+									息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。
+								</p>
+								<p>
+									为了提高消费者对产品/仪器的可信度。由采美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+									联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+									息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。
+								</p>
+							</div>
+						</div>
+					</div>
+				</transition>
+
+				<!-- 图片弹出层 -->
+				<transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut">
+					<div class="zp-popup animate__animated" v-show="authCardVisible">
+						<div class="zp-img-popup">
+							<img :src="productAuthInfo.appletsCertificateImage" alt="授权图片" />
+							<span class="close" @click="handleShowAuthCard"></span>
+						</div>
+					</div>
+				</transition>
+
+				<!-- 侧边二维码 -->
+				<transition enter-active-class="animate__fadeInRight" leave-active-class="animate__fadeOutRight">
+					<div class="zp-wechat-ewm animate__animated" v-show="wechatVisible">
+						<img :src="productAuthInfo.qrCodeImage" alt="关注公众号了解更多"/>
+						<div class="zp-tip">
+							<span>长按识别</span>
+							<span>关注公众号了解更多</span>
+						</div>
+						<span class="close" @click="handleShowWechat"></span>
+					</div>
+				</transition>
+			</template>
+			<template v-else>
+				<div class="not-found">
+					<img src="https://static.caimei365.com/www/not-found.png">
+					<p>该商品授权信息不存在!</p>
+				</div>
+			</template>
+		</div>
+
+		<script src="/lib/jquery-3.6.0.min.js"></script>
+		<script src="/lib/vue2.6.12.min.js"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/product/alliance-page.js(v=${version})}"></script>
+	</body>
+</html>

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

@@ -25,6 +25,13 @@
             <a href="/supplier/article/list.html">文章列表</a>
         </div>
     </div>
+    <div class="navList">
+        <span class="tab">百科文库</span>
+        <div class="con" style="display:none">
+            <a href="/supplier/encyclopedia/product-list.html">产品</a>
+            <a href="/supplier/encyclopedia/instrument-list.html">仪器</a>
+        </div>
+    </div>
     <div class="navList">
         <span class="tab">管理中心</span>
         <div class="con" style="display:none">

src/main/resources/templates/supplier-center/encyclopedia/components/form-component.html

@@ -0,0 +1,66 @@
+<!-- 图片上传 -->
+<script type="text/html" id="imageUpload">
+    <div class="cm image-upload">
+        <template v-if="fileCount > 0">
+            <div class="image border" v-for="(file,index) in files" :key="files">
+                <img :src="file.url" :alt="file.name"/>
+                <span class="remove" @click="removeImage(index)">&times;</span>
+            </div>
+        </template>
+        <div class="choose-image border" @click="handleClick" v-if="canChooseImage">
+            <input type="file" ref="file" @change="handleChooseImage" :multiple="multiple" :accept="accept"/>
+            <span>{{ placeholder }}</span>
+        </div>
+    </div>
+</script>
+<!-- 单选组件 -->
+<script type="text/html" id="radio">
+    <div class="cm radio" :class="{checked:isChecked}" @click="handleClick">
+        <slot></slot>
+    </div>
+</script>
+<!-- 下拉组件Select -->
+<script type="text/html" id="select">
+    <div class="cm select" @click.stop="optionsVisible = !optionsVisible">
+        <input type="text" class="cm input border" :placeholder="placeholder" v-model="label"/>
+        <span class="cm-icon iconfont " :class="optionsVisible ? 'icon-arrow-up' : 'icon-arrow-down'"></span>
+        <div class="options border radius shadow" v-show="optionsVisible">
+            <slot></slot>
+        </div>
+    </div>
+</script>
+<!-- 下拉子组件Option -->
+<script type="text/html" id="option">
+    <div class="cm option" @click.stop="handleClick">{{ label }}</div>
+</script>
+<!-- 文本框组 -->
+<script type="text/html" id="inputGroup">
+    <div class="input-group">
+        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
+        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
+            <input type="text" class="cm input  border" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
+            <input type="text" class="cm input  border" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"/>
+            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item)">&times;</span>
+        </div>
+    </div>
+</script>
+<!--常见问题-->
+<script type="text/html" id="questionGroup">
+    <div class="question-group">
+        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
+        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
+            <div class="question">
+                <div class="form-label"><em>*</em><span>问题{{ index +1 }}</span></div>
+                <input type="text" class="cm input max border" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
+            </div>
+            <div class="answer">
+                <div class="form-label"><em>*</em><span>答</span></div>
+                <textarea type="text" class="cm textarea border max no-resize " rows="3" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"></textarea>
+            </div>
+            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item)">&times;</span>
+        </div>
+    </div>
+</script>
+
+
+

src/main/resources/templates/supplier-center/encyclopedia/instrument-edit.html

@@ -0,0 +1,194 @@
+<!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/encyclopedia/form-component-style.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--  编辑页面样式  -->
+    <link th:href="@{/css/supplier-center/encyclopedia/edit-page.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="productEdit" class="product-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="valid-form">
+                        <h2><em>*</em>产品简述</h2>
+                        <!-- 产品名称 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品名称</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入产品名称"/>
+                            <div class="valid-message">产品名称不能为空！</div>
+                        </div>
+                        <!-- 产品别名 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品别名</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入英文名或其他名称"/>
+                            <div class="valid-message">产品别名不能为空！</div>
+                        </div>
+                        <!-- 产品概述 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品概述</span></div>
+                            <textarea class="cm textarea border max no-resize " rows="3"></textarea>
+                            <div class="valid-message">产品概述不能为空！</div>
+                        </div>
+                        <!-- 产品图片 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品图片</span></div>
+                            <cm-upload-image></cm-upload-image>
+                            <div class="valid-message">产品图片不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品参数</h2>
+                        <div class="form-item" required>
+                            <cm-input-group
+                                    :list="paramsList"
+                                    :placeholder-list="placeholderList"
+                                    :min-limit="minLimit"
+                                    add-text = '添加一条'
+                                    @remove="handleRemove"
+                                    @add="handleAdd"
+                            ></cm-input-group>
+                            <div class="valid-message">产品名称不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品优点</h2>
+                        <div class="form-item" required>
+                            <cm-editor v-model="youdian"></cm-editor>
+                            <div class="valid-message">产品优点不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品缺点</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品缺点不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品原理</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品原理不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品档案</h2>
+                        <!-- 品牌 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>品牌</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入品牌"/>
+                            <div class="valid-message">品牌不能为空！</div>
+                        </div>
+                        <!-- 产地 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产地</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入产地"/>
+                            <div class="valid-message">产地不能为空！</div>
+                        </div>
+                        <!-- 上市时间 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>上市时间</span></div>
+                            <input type="date" class="cm input max border" placeholder="请选择上市时间"/>
+                            <div class="valid-message">上市时间不能为空！</div>
+                        </div>
+                        <!-- 公司/厂商 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>公司/厂商</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入公司/厂商"/>
+                            <div class="valid-message">公司/厂商不能为空！</div>
+                        </div>
+                        <!-- NMPA认证时间 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>NMPA认证时间</span></div>
+                            <input type="date" class="cm input max border" placeholder="请选择NMPA认证时间"/>
+                            <div class="valid-message">请选择NMPA认证时间不能为空！</div>
+                        </div>
+                        <!-- 产品认证 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品认证</span></div>
+                            <cm-upload-image></cm-upload-image>
+                            <div class="valid-message">请上传产品认证信息！</div>
+                        </div>
+                        <h2><em>*</em>适应人群</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">适应人群不能为空！</div>
+                        </div>
+                        <h2><em>*</em>不适应人群</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">不适应人群不能为空！</div>
+                        </div>
+                        <h2><em>*</em>术前术后</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品原理不能为空！</div>
+                        </div>
+                        <h2><em>*</em>常见问题</h2>
+                        <div class="form-item" required>
+                            <cm-question-group
+                                    :list="paramsList"
+                                    :placeholder-list="placeholderList"
+                                    :min-limit="minLimit"
+                                    add-text='添加一条'
+                                    @remove="handleRemove"
+                                    @add="handleAdd"
+                            ></cm-question-group>
+                            <div class="valid-message">请添加常见问题！</div>
+                        </div>
+                        <!-- 产品类别 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品类别</span></div>
+                            <cm-select v-model="selected" placeholder="请选择" class="cm-select">
+                                <cm-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></cm-option>
+                            </cm-select>
+                            <div class="valid-message">请选择产品类别！</div>
+                        </div>
+                        <!-- 产品状态 -->
+                        <div class="form-item vertical" required>
+                            <div class="form-label"><em>*</em><span>产品状态</span></div>
+                            <div class="form-group">
+                                <cm-radio class="cm-radio" :label="1" v-model="status">启用</cm-radio>
+                                <cm-radio class="cm-radio" :label="2" v-model="status">停用</cm-radio>
+                            </div>
+                            <div class="valid-message">请选择产品状态！</div>
+                        </div>
+
+                        <div class="form-item vertical 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>
+<!-- 引入vue组件 -->
+<template th:replace="supplier-center/encyclopedia/components/form-component"></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/encyclopedia/form-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/instrument-edit.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/encyclopedia/instrument-list.html

@@ -0,0 +1,150 @@
+<!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/encyclopedia/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="instrumentList" 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" v-model="listQuery.articleId" type="text" placeholder="请输入ID号"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleTitle" class="form-label">仪器名称:</label>
+                            <input id="articleTitle" class="form-control" v-model="listQuery.title" type="text" placeholder="请输入仪器名称"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleCate" class="form-label">仪器分类:</label>
+                            <select id="articleCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
+                                <option value="">请选择</option>
+                                <template v-for="(typeInfo, index) in articleTypeList">
+                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                </template>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleStatus" class="form-label">审核状态:</label>
+                            <select id="articleStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
+                                <option value="">全部</option>
+                                <option value="1">待审核</option>
+                                <option value="2">审核通过</option>
+                                <option value="3">审核未通过</option>
+                            </select>
+                        </div>
+                        <div class="form-item buttons">
+                            <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
+                            <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
+                        </div>
+                        <div class="form-item"></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>
+                        </tr>
+                        <template v-for="(articleInfo, index) in articleList"  >
+                            <tr :key="index" class="tr-row">
+                                <td v-text="articleInfo.articleId"></td>
+                                <td class="title">
+                                    <div class="title" v-text="articleInfo.title" :title="articleInfo.title"></div>
+                                </td>
+                                <td v-text="articleInfo.typeName"></td>
+                                <td v-text="articleInfo.pvNum"></td>
+                                <td>
+                                    <span class="state warning" v-if="articleInfo.auditStatus === 1">待审核</span>
+                                    <span class="state success" v-else-if="articleInfo.auditStatus === 2">审核通过</span>
+                                    <span class="state danger" v-else>审核失败</span>
+                                    <span class="reason" v-if="articleInfo.auditStatus === 3" :title="'审核失败：' + articleInfo.failReason">?</span>
+                                </td>
+                                <td class="time">
+                                    <div class="time">{{ articleInfo.publishDate | formatDate }}</div>
+                                </td>
+                                <td class="time" v-if="articleInfo.createDate">
+                                    <div class="time">{{ articleInfo.createDate | formatDate}}</div>
+                                </td>
+                                <td>
+                                    <span class="state primary" v-if="articleInfo.status === 1">已启用</span>
+                                    <span class="state default" v-else>未启用</span>
+                                </td>
+                                <td class="option">
+                                    <div class="option">
+                                        <button class="form-button edit" @click="clickOption(articleInfo, 1)">编辑</button>
+                                        <button class="form-button stop" @click="clickOption(articleInfo, 2)">{{ articleInfo.status === 1 ? '停用':'启用' }}</button>
+                                        <button class="form-button search" @click="clickOption(articleInfo, 3)">查看</button>
+                                        <button class="form-button delete" @click="clickOption(articleInfo, 4)">删除</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </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/encyclopedia/instrument-list.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/encyclopedia/product-edit.html

@@ -0,0 +1,194 @@
+<!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/encyclopedia/form-component-style.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--  编辑页面样式  -->
+    <link th:href="@{/css/supplier-center/encyclopedia/edit-page.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="productEdit" class="product-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="valid-form">
+                        <h2><em>*</em>产品简述</h2>
+                        <!-- 产品名称 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品名称</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入产品名称"/>
+                            <div class="valid-message">产品名称不能为空！</div>
+                        </div>
+                        <!-- 产品别名 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品别名</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入英文名或其他名称"/>
+                            <div class="valid-message">产品别名不能为空！</div>
+                        </div>
+                        <!-- 产品概述 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品概述</span></div>
+                            <textarea class="cm textarea border max no-resize " rows="3"></textarea>
+                            <div class="valid-message">产品概述不能为空！</div>
+                        </div>
+                        <!-- 产品图片 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品图片</span></div>
+                            <cm-upload-image></cm-upload-image>
+                            <div class="valid-message">产品图片不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品参数</h2>
+                        <div class="form-item" required>
+                            <cm-input-group
+                                    :list="paramsList"
+                                    :placeholder-list="placeholderList"
+                                    :min-limit="minLimit"
+                                    add-text = '添加一条'
+                                    @remove="handleRemove"
+                                    @add="handleAdd"
+                            ></cm-input-group>
+                            <div class="valid-message">产品名称不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品优点</h2>
+                        <div class="form-item" required>
+                            <cm-editor v-model="youdian"></cm-editor>
+                            <div class="valid-message">产品优点不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品缺点</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品缺点不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品原理</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品原理不能为空！</div>
+                        </div>
+                        <h2><em>*</em>产品档案</h2>
+                        <!-- 品牌 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>品牌</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入品牌"/>
+                            <div class="valid-message">品牌不能为空！</div>
+                        </div>
+                        <!-- 产地 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产地</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入产地"/>
+                            <div class="valid-message">产地不能为空！</div>
+                        </div>
+                        <!-- 上市时间 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>上市时间</span></div>
+                            <input type="date" class="cm input max border" placeholder="请选择上市时间"/>
+                            <div class="valid-message">上市时间不能为空！</div>
+                        </div>
+                        <!-- 公司/厂商 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>公司/厂商</span></div>
+                            <input type="text" class="cm input max border" placeholder="请输入公司/厂商"/>
+                            <div class="valid-message">公司/厂商不能为空！</div>
+                        </div>
+                        <!-- NMPA认证时间 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>NMPA认证时间</span></div>
+                            <input type="date" class="cm input max border" placeholder="请选择NMPA认证时间"/>
+                            <div class="valid-message">请选择NMPA认证时间不能为空！</div>
+                        </div>
+                        <!-- 产品认证 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品认证</span></div>
+                            <cm-upload-image></cm-upload-image>
+                            <div class="valid-message">请上传产品认证信息！</div>
+                        </div>
+                        <h2><em>*</em>适应人群</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">适应人群不能为空！</div>
+                        </div>
+                        <h2><em>*</em>不适应人群</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">不适应人群不能为空！</div>
+                        </div>
+                        <h2><em>*</em>术前术后</h2>
+                        <div class="form-item" required>
+                            <cm-editor></cm-editor>
+                            <div class="valid-message">产品原理不能为空！</div>
+                        </div>
+                        <h2><em>*</em>常见问题</h2>
+                        <div class="form-item" required>
+                            <cm-question-group
+                                    :list="paramsList"
+                                    :placeholder-list="placeholderList"
+                                    :min-limit="minLimit"
+                                    add-text='添加一条'
+                                    @remove="handleRemove"
+                                    @add="handleAdd"
+                            ></cm-question-group>
+                            <div class="valid-message">请添加常见问题！</div>
+                        </div>
+                        <!-- 产品类别 -->
+                        <div class="form-item" required>
+                            <div class="form-label"><em>*</em><span>产品类别</span></div>
+                            <cm-select v-model="selected" placeholder="请选择" class="cm-select">
+                                <cm-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></cm-option>
+                            </cm-select>
+                            <div class="valid-message">请选择产品类别！</div>
+                        </div>
+                        <!-- 产品状态 -->
+                        <div class="form-item vertical" required>
+                            <div class="form-label"><em>*</em><span>产品状态</span></div>
+                            <div class="form-group">
+                                <cm-radio class="cm-radio" :label="1" v-model="status">启用</cm-radio>
+                                <cm-radio class="cm-radio" :label="2" v-model="status">停用</cm-radio>
+                            </div>
+                            <div class="valid-message">请选择产品状态！</div>
+                        </div>
+
+                        <div class="form-item vertical 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>
+<!-- 引入vue组件 -->
+<template th:replace="supplier-center/encyclopedia/components/form-component"></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/encyclopedia/form-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-edit.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/encyclopedia/product-list.html

@@ -0,0 +1,150 @@
+<!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/encyclopedia/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="productList" 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" v-model="listQuery.articleId" type="text" placeholder="请输入ID号"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleTitle" class="form-label">仪器名称:</label>
+                            <input id="articleTitle" class="form-control" v-model="listQuery.title" type="text" placeholder="请输入仪器名称"/>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleCate" class="form-label">仪器分类:</label>
+                            <select id="articleCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
+                                <option value="">请选择</option>
+                                <template v-for="(typeInfo, index) in articleTypeList">
+                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                </template>
+                            </select>
+                        </div>
+                        <div class="form-item">
+                            <label for="articleStatus" class="form-label">审核状态:</label>
+                            <select id="articleStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
+                                <option value="">全部</option>
+                                <option value="1">待审核</option>
+                                <option value="2">审核通过</option>
+                                <option value="3">审核未通过</option>
+                            </select>
+                        </div>
+                        <div class="form-item buttons">
+                            <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
+                            <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
+                        </div>
+                        <div class="form-item"></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>
+                        </tr>
+                        <template v-for="(articleInfo, index) in articleList"  >
+                            <tr :key="index" class="tr-row">
+                                <td v-text="articleInfo.articleId"></td>
+                                <td class="title">
+                                    <div class="title" v-text="articleInfo.title" :title="articleInfo.title"></div>
+                                </td>
+                                <td v-text="articleInfo.typeName"></td>
+                                <td v-text="articleInfo.pvNum"></td>
+                                <td>
+                                    <span class="state warning" v-if="articleInfo.auditStatus === 1">待审核</span>
+                                    <span class="state success" v-else-if="articleInfo.auditStatus === 2">审核通过</span>
+                                    <span class="state danger" v-else>审核失败</span>
+                                    <span class="reason" v-if="articleInfo.auditStatus === 3" :title="'审核失败：' + articleInfo.failReason">?</span>
+                                </td>
+                                <td class="time">
+                                    <div class="time">{{ articleInfo.publishDate | formatDate }}</div>
+                                </td>
+                                <td class="time" v-if="articleInfo.createDate">
+                                    <div class="time">{{ articleInfo.createDate | formatDate}}</div>
+                                </td>
+                                <td>
+                                    <span class="state primary" v-if="articleInfo.status === 1">已启用</span>
+                                    <span class="state default" v-else>未启用</span>
+                                </td>
+                                <td class="option">
+                                    <div class="option">
+                                        <button class="form-button edit" @click="clickOption(articleInfo, 1)">编辑</button>
+                                        <button class="form-button stop" @click="clickOption(articleInfo, 2)">{{ articleInfo.status === 1 ? '停用':'启用' }}</button>
+                                        <button class="form-button search" @click="clickOption(articleInfo, 3)">查看</button>
+                                        <button class="form-button delete" @click="clickOption(articleInfo, 4)">删除</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </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/encyclopedia/product-list.js(v=${version})}"></script>
+</body>
+</html>