采美百科页面绘制

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

@@ -67,16 +67,19 @@ public class SupplierPageController extends BaseController {
     /** 供应商文章编辑页面 */
     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_PRODUCT_LIST = "supplier-center/encyclopedia/product-list";
     /** 供应商采美百科仪器资料列表页面 */
-    private static final String ENCYCLOPEDIA_INSTRUMENT_LIST = "supplier-center/encyclopedia/instrument-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_PRODUCT_EDIT = "supplier-center/encyclopedia/product-edit";
     /** 供应商采美百仪器资料编辑页面 */
-    private static final String ENCYCLOPEDIA_INSTRUMENT_EDIT = "supplier-center/encyclopedia/instrument-edit";
+    // private static final String ENCYCLOPEDIA_INSTRUMENT_EDIT = "supplier-center/encyclopedia/instrument-edit";
     /** 供应商采美百科推荐编辑页面 */
-    private static final String ENCYCLOPEDIA_RECOMMEND_EDIT = "supplier-center/encyclopedia/recommend-edit";
-
+    // private static final String ENCYCLOPEDIA_RECOMMEND_EDIT = "supplier-center/encyclopedia/recommend-edit";
+    /** 供应商采美百科我的词条页面 */
+    private static final String ENCYCLOPEDIA_LIST = "supplier-center/encyclopedia/list";
+    /** 供应商采美百科词条编辑页面 */
+    private static final String ENCYCLOPEDIA_EDIT = "supplier-center/encyclopedia/edit";
 
     /** 我的采美 */
     @GetMapping("/supplier/dashboard.html")
@@ -237,33 +240,46 @@ public class SupplierPageController extends BaseController {
         return ARTICLE_EDIT;
     }
 
-    /** 供应商采美百科商品列表页面 */
+    /** 供应商采美百科词条列表页面 */
+    @GetMapping("/supplier/encyclopedia/list.html")
+    public String encyclopediaList(){
+        return ENCYCLOPEDIA_LIST;
+    }
+
+    /** 供应商采美百科词条编辑页面 */
+    @GetMapping("/supplier/encyclopedia/edit.html")
+    public String encyclopediaEdit(){
+        return ENCYCLOPEDIA_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;
     }
 
-    /** 供应商采美百科推荐编辑页面 */
+    // 供应商采美百科推荐编辑页面
     @GetMapping("/supplier/encyclopedia/recommend-edit.html")
     public String getEncyclopediarecommendEdit() {
         return ENCYCLOPEDIA_RECOMMEND_EDIT;
     }
+    */
 }

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

@@ -1,188 +1,56 @@
 package com.caimei.www.controller.unlimited;
 
-import com.alibaba.fastjson.JSONArray;
 import com.caimei.www.controller.BaseController;
-import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.baike.BaikeBanner;
-import com.caimei.www.pojo.baike.BaikeHotSearch;
-import com.caimei.www.pojo.baike.BaikeProduct;
-import com.caimei.www.pojo.baike.BaikeType;
-import com.caimei.www.pojo.page.ImageLink;
-import com.caimei.www.service.page.BaseService;
-import com.caimei.www.service.page.ProductService;
-import com.google.gson.JsonArray;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
-
-import java.util.ArrayList;
-import java.util.List;
-import java.util.Map;
 
 /**
- * 采美文库
+ * 采美百科
  *
  * @author : yuwenjun1997
- * @date : 2021/11/23
+ * @date : 2022/12/28
  */
+
 @Controller
-@RequestMapping("/encyclopedia")
+@RequestMapping("encyclopedia")
 public class EncyclopediaController extends BaseController {
-
-    private static final String PRODUCT_LIST = "encyclopedia/product";
-    private static final String PRODUCT_DETAIL = "encyclopedia/product-detail";
-    private static final String INSTRUMENT_LIST = "encyclopedia/instrument";
-    private static final String INSTRUMENT_DETAIL = "encyclopedia/instrument-detail";
-    private static final String MORE_LIST = "encyclopedia/more";
-    private static final String SEARCH_PAGE = "encyclopedia/search";
-    private static final String CONTACT = "encyclopedia/contact";
-    private static final String ABOUT_US = "encyclopedia/about";
-    private static final String MAP = "encyclopedia/map";
-
-    private ProductService productService;
-
-    @Autowired
-    public void setProductService(ProductService productService) {
-        this.productService = productService;
-    }
-
-    /**
-     * 产品列表
-     */
-    @GetMapping("/product.html")
-    public String getProductList(final Model model) {
-        Integer commodityType = 1;
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        // banner图
-        BaikeBanner banner = baseService.getBaikeBannerImage(commodityType);
-        model.addAttribute("banner", banner);
-        // 分类列表
-        List<BaikeType> typeList = baseService.getBaikeTypeList(commodityType);
-        model.addAttribute("typeList", typeList);
-        // 产品仪器分类数据
-        JSONArray typeData = productService.getBaikeTypeJson(commodityType);
-        model.addAttribute("typeData", typeData);
-        return PRODUCT_LIST;
-    }
-
-    /**
-     * 产品详情
-     */
-    @GetMapping("/product-{id}.html")
-    public String getProductDetail(final Model model, @PathVariable("id") Integer productId) {
-        BaikeProduct baikeProduct = productService.getBaikeProductDetail(productId);
-        if (baikeProduct == null) {
-            return super.errorPath();
-        }
-        // 增加浏览量
-        productService.encyclopediaPv(productId);
-        model.addAttribute("baikeProduct", baikeProduct);
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return PRODUCT_DETAIL;
-    }
-
-    /**
-     * 仪器列表
-     */
-    @GetMapping("/instrument.html")
-    public String getInstrumentList(final Model model) {
-        Integer commodityType = 2;
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        // banner图
-        BaikeBanner banner = baseService.getBaikeBannerImage(commodityType);
-        model.addAttribute("banner", banner);
-        // 分类列表
-        List<BaikeType> typeList = baseService.getBaikeTypeList(commodityType);
-        model.addAttribute("typeList", typeList);
-        // 产品仪器分类数据
-        JSONArray typeData = productService.getBaikeTypeJson(commodityType);
-        model.addAttribute("typeData", typeData);
-        return INSTRUMENT_LIST;
-    }
-
-    /**
-     * 仪器详情
-     */
-    @GetMapping("/instrument-{id}.html")
-    public String getInstrumentDetail(final Model model, @PathVariable("id") Integer productId) {
-        BaikeProduct baikeInstrument = productService.getBaikeProductDetail(productId);
-        if (baikeInstrument == null) {
-            return super.errorPath();
-        }
-        // 增加浏览量
-        productService.encyclopediaPv(productId);
-        model.addAttribute("baikeInstrument", baikeInstrument);
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return INSTRUMENT_DETAIL;
-    }
-
-    /**
-     * 查看更多
-     */
-    @GetMapping("/more-{typeId}-{pageNum}-{pageSize}.html")
-    public String getMoreList(final Model model, @PathVariable("typeId") Integer typeId, @PathVariable("pageNum") Integer pageNum, @PathVariable("pageSize") Integer pageSize) {
-        BaikeType baikeType = productService.getBaikeType(typeId);
-        Map<String, Object> moreData = productService.getBaikeMoreJson(typeId, pageNum, pageSize);
-        moreData.put("typeId", typeId);
-        moreData.put("typeName", baikeType.getName());
-        model.addAttribute("moreData", moreData);
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return MORE_LIST;
-    }
-
-    /**
-     * 搜索列表
-     */
+    private static final String ENCYCLOPEDIA_LIST = "encyclopedia/list";
+    private static final String ENCYCLOPEDIA_DETAIL = "encyclopedia/detail";
+    private static final String ENCYCLOPEDIA_SEARCH = "encyclopedia/search";
+    private static final String ENCYCLOPEDIA_ABOUT = "encyclopedia/about";
+
+    /*
+     * 百科首页
+     * */
+    @GetMapping("/list.html")
+    public String getEncyclopediaList(final Model model) {
+        return ENCYCLOPEDIA_LIST;
+    }
+
+    /*
+     * 百科详情
+     * */
+    @GetMapping("/detail-{id}.html")
+    public String getEncyclopediaDetail(final Model model, @PathVariable("id") Integer id) {
+        return ENCYCLOPEDIA_DETAIL;
+    }
+
+    /*
+     * 百科搜索页面
+     * */
     @GetMapping("/search.html")
-    public String getSearchPage(final Model model) {
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return SEARCH_PAGE;
+    public String getEncyclopediaSearch(final Model model) {
+        return ENCYCLOPEDIA_SEARCH;
     }
 
-    /**
-     * 联系我们
-     */
-    @GetMapping("/contact.html")
-    public String getContact(final Model model) {
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return CONTACT;
-    }
-
-    /**
-     * 关于我们
-     */
+    /*
+     * 关于百科
+     * */
     @GetMapping("/about.html")
-    public String getAboutUs(final Model model) {
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return ABOUT_US;
+    public String getEncyclopediaAbout(final Model model) {
+        return ENCYCLOPEDIA_ABOUT;
     }
-
-    /**
-     * 关于我们位置定位
-     */
-    @GetMapping("/map.html")
-    public String getMap() {
-        return MAP;
-    }
-
 }

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

@@ -0,0 +1,183 @@
+package com.caimei.www.controller.unlimited;
+
+import com.alibaba.fastjson.JSONArray;
+import com.caimei.www.controller.BaseController;
+import com.caimei.www.pojo.baike.BaikeBanner;
+import com.caimei.www.pojo.baike.BaikeHotSearch;
+import com.caimei.www.pojo.baike.BaikeProduct;
+import com.caimei.www.pojo.baike.BaikeType;
+import com.caimei.www.service.page.ProductService;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+/**
+ * 旧采美百科
+ *
+ * @author : yuwenjun1997
+ * @date : 2021/11/23
+ */
+@Controller
+@RequestMapping("/encyclopedia_old")
+public class EncyclopediaControllerOld extends BaseController {
+
+    private static final String PRODUCT_LIST = "encyclopedia/old/product";
+    private static final String PRODUCT_DETAIL = "encyclopedia/old/product-detail";
+    private static final String INSTRUMENT_LIST = "encyclopedia/old/instrument";
+    private static final String INSTRUMENT_DETAIL = "encyclopedia/old/instrument-detail";
+    private static final String MORE_LIST = "encyclopedia/old/more";
+    private static final String SEARCH_PAGE = "encyclopedia/old/search";
+    private static final String CONTACT = "encyclopedia/old/contact";
+    private static final String ABOUT_US = "encyclopedia/old/about";
+    private static final String MAP = "encyclopedia/old/map";
+
+    private ProductService productService;
+
+    @Autowired
+    public void setProductService(ProductService productService) {
+        this.productService = productService;
+    }
+
+    /**
+     * 产品列表
+     */
+    @GetMapping("/product.html")
+    public String getProductList(final Model model) {
+        Integer commodityType = 1;
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        // banner图
+        BaikeBanner banner = baseService.getBaikeBannerImage(commodityType);
+        model.addAttribute("banner", banner);
+        // 分类列表
+        List<BaikeType> typeList = baseService.getBaikeTypeList(commodityType);
+        model.addAttribute("typeList", typeList);
+        // 产品仪器分类数据
+        JSONArray typeData = productService.getBaikeTypeJson(commodityType);
+        model.addAttribute("typeData", typeData);
+        return PRODUCT_LIST;
+    }
+
+    /**
+     * 产品详情
+     */
+    @GetMapping("/product-{id}.html")
+    public String getProductDetail(final Model model, @PathVariable("id") Integer productId) {
+        BaikeProduct baikeProduct = productService.getBaikeProductDetail(productId);
+        if (baikeProduct == null) {
+            return super.errorPath();
+        }
+        // 增加浏览量
+        productService.encyclopediaPv(productId);
+        model.addAttribute("baikeProduct", baikeProduct);
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return PRODUCT_DETAIL;
+    }
+
+    /**
+     * 仪器列表
+     */
+    @GetMapping("/instrument.html")
+    public String getInstrumentList(final Model model) {
+        Integer commodityType = 2;
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        // banner图
+        BaikeBanner banner = baseService.getBaikeBannerImage(commodityType);
+        model.addAttribute("banner", banner);
+        // 分类列表
+        List<BaikeType> typeList = baseService.getBaikeTypeList(commodityType);
+        model.addAttribute("typeList", typeList);
+        // 产品仪器分类数据
+        JSONArray typeData = productService.getBaikeTypeJson(commodityType);
+        model.addAttribute("typeData", typeData);
+        return INSTRUMENT_LIST;
+    }
+
+    /**
+     * 仪器详情
+     */
+    @GetMapping("/instrument-{id}.html")
+    public String getInstrumentDetail(final Model model, @PathVariable("id") Integer productId) {
+        BaikeProduct baikeInstrument = productService.getBaikeProductDetail(productId);
+        if (baikeInstrument == null) {
+            return super.errorPath();
+        }
+        // 增加浏览量
+        productService.encyclopediaPv(productId);
+        model.addAttribute("baikeInstrument", baikeInstrument);
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return INSTRUMENT_DETAIL;
+    }
+
+    /**
+     * 查看更多
+     */
+    @GetMapping("/more-{typeId}-{pageNum}-{pageSize}.html")
+    public String getMoreList(final Model model, @PathVariable("typeId") Integer typeId, @PathVariable("pageNum") Integer pageNum, @PathVariable("pageSize") Integer pageSize) {
+        BaikeType baikeType = productService.getBaikeType(typeId);
+        Map<String, Object> moreData = productService.getBaikeMoreJson(typeId, pageNum, pageSize);
+        moreData.put("typeId", typeId);
+        moreData.put("typeName", baikeType.getName());
+        model.addAttribute("moreData", moreData);
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return MORE_LIST;
+    }
+
+    /**
+     * 搜索列表
+     */
+    @GetMapping("/search.html")
+    public String getSearchPage(final Model model) {
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return SEARCH_PAGE;
+    }
+
+    /**
+     * 联系我们
+     */
+    @GetMapping("/contact.html")
+    public String getContact(final Model model) {
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return CONTACT;
+    }
+
+    /**
+     * 关于我们
+     */
+    @GetMapping("/about.html")
+    public String getAboutUs(final Model model) {
+        // 搜索热门关键字
+        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
+        model.addAttribute("searchHotWord", searchHotWord);
+        return ABOUT_US;
+    }
+
+    /**
+     * 关于我们位置定位
+     */
+    @GetMapping("/map.html")
+    public String getMap() {
+        return MAP;
+    }
+
+}

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

@@ -0,0 +1,23 @@
+@media screen and (min-width:768px){main{background:#FAFAFA}
+    .bk-banner{height:380px;position:relative;overflow:hidden}
+    .bk-banner img{display:block;height:380px;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:10}
+    .bk-banner .bk-container{height:214px;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;position:relative;z-index:20}
+    .bk-banner .bk-container .bk-title{font-size:32px;color:#fff;font-weight:bold}
+    .bk-banner .bk-container .bk-subtitle{font-size:20px;color:#fff;margin-top:8px;text-transform:uppercase}
+    .bk-about{position:relative;padding:56px 40px;background:#fff;-webkit-transform:translateY(-166px);-ms-transform:translateY(-166px);transform:translateY(-166px);z-index:30}
+    .bk-about h2{font-size:14px;color:#333;margin-bottom:24px;margin-top:40px}
+    .bk-about h2:first-child{margin-top:0}
+    .bk-about p{font-size:14px;color:#333;line-height:26px;text-align:justify}
+    .bk-about ul li{font-size:14px;line-height:26px;color:#333}
+}
+
+@media screen and (max-width:768px){.bk-banner{height:3.8rem;position:relative;overflow:hidden}
+    .bk-banner img{display:block;height:3.8rem;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);z-index:10}
+    .bk-banner .bk-container{height:3.8rem;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;position:relative;z-index:20}
+    .bk-banner .bk-container .bk-title{font-size:0.48rem;color:#fff;font-weight:bold}
+    .bk-banner .bk-container .bk-subtitle{font-size:0.28rem;color:#fff;margin-top:0.08rem;text-transform:uppercase}
+    .bk-about{position:relative;background:#fff;padding:0 0.32rem 0.48rem}
+    .bk-about h2{font-size:0.32rem;color:#333;margin-bottom:0.32rem;margin-top:0.7rem;line-height:0.48rem}
+    .bk-about p{font-size:0.28rem;color:#333;line-height:0.48rem;text-align:justify}
+    .bk-about ul li{font-size:0.28rem;line-height:0.48rem;color:#333}
+}

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

@@ -1,94 +1,114 @@
-@charset "UTF-8";
-@media screen and (min-width:768px){
-::-webkit-scrollbar{width:8px;height: 8px; background-color:#f5f5f5}
-::-webkit-scrollbar-thumb{border-radius:10px;background-color:#999}
-.icon{display:block;width:20px;height:20px;background-image:url(/img/encyclopedia/icon.png);background-repeat:no-repeat}
-.icon.arrowdown{background-position:-277px -413px}
-.icon.arrowup{background-position:-308px -413px}
-.flex-between-center,.navbar .nav li a,.navbar .nav,.navbar .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.container{width:1200px;margin:0 auto}
-body{padding-top:80px;}
-.navbar{width:100%;background:#fff;position:fixed;top:0;left:0;z-index:99998;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);box-shadow:0 0 5px rgba(0,0,0,0.1)}
-.navbar .logo{width:136px;height:56px;overflow:hidden}
-.navbar .logo .menu-btn{display:none}
-.navbar .logo h1{font-size:0;margin:0}
-.navbar .nav li{height:80px;-webkit-box-sizing:border-box;box-sizing:border-box;border-color:#fff}
-.navbar .nav li.active{border-bottom:2px solid #e15616;background:#fef6f3}
-.navbar .nav li.active a{color:#e15616}
-.navbar .nav li a{height:80px;padding:0 28px}
-.navbar .nav li a:hover{color:#e15616}
-.navbar .search .search-control form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.navbar .search .search-control .search-input{display:block;width:272px;height:36px;padding:8px 16px;border:1px solid #e15616;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:2px 0 0 2px;color:#4a4f58;font-size: 14px;}
-.navbar .search .search-control .search-input::-webkit-input-placeholder{color:#9aa5b5;font-size:14px}
-.navbar .search .search-control .search-input::-moz-placeholder{color:#9aa5b5;font-size:14px}
-.navbar .search .search-control .search-input:-ms-input-placeholder{color:#9aa5b5;font-size:14px}
-.navbar .search .search-control .search-input::-ms-input-placeholder{color:#9aa5b5;font-size:14px}
-.navbar .search .search-control .search-input::placeholder{color:#9aa5b5;font-size:14px}
-.navbar .search .search-control .search-btn{display:block;width:64px;height:36px;border:0;background:#e15616;border-radius:0px 2px 2px 0px;cursor:pointer;font-size:14px;color:#ffffff}
-.navbar .search .search-control .hot-keyword{display:none}
-.navbar .search .keywords{width:336px;font-size:12px;margin-top:4px;color:#ffb496;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space: nowrap;}
-.navbar .search .keywords .close-btn{display:none}
-.navbar .search .keywords a{color:#ffb496}
-.navbar .search .keywords a:hover{color:#e15616}
-.navbar .search .keywords em{margin:0 4px}
-.copyright{padding:24px 0;margin-top:24px;background:#2c3038}
-.copyright p{text-align:center;line-height:36px;color:#f1f1f1;font-size:14px}
-.copyright p .icp{display:inline-block;vertical-align:middle}
-.copyright p a{color:#f1f1f1}
-.copyright p a:hover{color:#fff}
-.navigate{position:fixed;right:20px;top:50%;z-index:19;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:88px;background:#fff;-webkit-box-shadow:0px 4px 8px rgba(74,79,88,0.16);box-shadow:0px 4px 8px rgba(74,79,88,0.16)}
-.navigate li{line-height:40px;height:40px;text-align:center}
-.navigate li.active a{color:#e15616;background:#fef6f3}
-.navigate li a{display:block;font-size:12px;color:#4a4f58}
-.navigate li a:hover{color:#e15616;background:#fef6f3}
-}
-@media screen and (max-width:768px){
-.flex,.flex-start-center,.navbar .search .search-control form,.flex-between-center,.navbar .search .search-control,.flex-center,.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword,.navbar .logo .menu-btn,.navbar .logo,.navbar .nav{display:-webkit-box;display:-ms-flexbox;display:flex}
-.flex-center,.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword,.navbar .logo .menu-btn,.navbar .logo,.navbar .nav{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.flex-between-center,.navbar .search .search-control{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.flex-start-center,.navbar .search .search-control form{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.icon{display:inline-block;width:6.4vw;height:6.4vw;background:url(/img/encyclopedia/icon_m.png) no-repeat;background-size:100vw auto}
-.icon.menu{display:block;background-position:0 0}
-.icon.close{display:block;background-position:-84.3vw -53vw}
-.icon.arrowdown{background-position:-42vw 0;-webkit-transform:rotateZ(180deg);-ms-transform:rotate(180deg);transform:rotateZ(180deg)}
-.icon.arrowup{background-position:-42vw 0;-webkit-transform:rotateZ(0deg);-ms-transform:rotate(0deg);transform:rotateZ(0deg)}
-.icon.arrowright{background-position:-42vw 0;-webkit-transform:rotateZ(90deg);-ms-transform:rotate(90deg);transform:rotateZ(90deg)}
-.icon.arrowleft{background-position:-42vw 0;-webkit-transform:rotateZ(-90deg);-ms-transform:rotate(-90deg);transform:rotateZ(-90deg)}
-.clearfix::after{content:"";display:block;width:0;clear:both}
-body{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:29.5vw}
-.navbar{position:fixed;top:0;z-index:99998;width:100vw;height:29.5vw;background-color:#fff}
-.navbar .nav{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0;left:0;z-index:99999;height:100vh;width:100vw;background:rgba(0,0,0,0.7);-webkit-box-sizing:border-box;box-sizing:border-box;display:none}
-.navbar .nav li{width:70.2vw;height:12.8vw;line-height:12.8vw;text-align:center;border-top:1px solid rgba(255,255,255,0.4)}
-.navbar .nav li.active a{color:#e15616}
-.navbar .nav li:first-child{border-top:0}
-.navbar .nav li a{display:block;color:#fff;font-size:4.2vw}
-.navbar .nav li .nav-close{display:inline-block;width:5.3vw;height:5.3vw;background:url(/img/encyclopedia/h5-nav-close-btn.png) no-repeat center;background-size:5.3vw}
-.navbar .logo{position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100vw;height:13.5vw}
-.navbar .logo .menu-btn{position:absolute;left:0;top:0;width:13.5vw;height:13.5vw;cursor:pointer;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
-.navbar .logo .menu-btn .active{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
-.navbar .logo h1{font-size:0}
-.navbar .logo img{height:9.8vw}
-.navbar .search .search-control{height:16vw;padding:0 4vw}
-.navbar .search .search-control .search-input{display:block;width:53.8vw;height:9.6vw;background:#ffffff;border:1px solid #e15616;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;border-right:0;border-radius:0.2vw 0 0 0.2vw;padding:2.6vw 2.2vw}
-.navbar .search .search-control .search-input::-webkit-input-placeholder{font-size:3.4vw;color:#bec2c9}
-.navbar .search .search-control .search-input::-moz-placeholder{font-size:3.4vw;color:#bec2c9}
-.navbar .search .search-control .search-input:-ms-input-placeholder{font-size:3.4vw;color:#bec2c9}
-.navbar .search .search-control .search-input::-ms-input-placeholder{font-size:3.4vw;color:#bec2c9}
-.navbar .search .search-control .search-input::placeholder{font-size:3.4vw;color:#bec2c9}
-.navbar .search .search-control .search-btn,.navbar .search .search-control .hot-keyword{border:0;width:17.2vw;height:9.6vw;border-radius:0px 0.2vw 0.2vw 0px;font-size:3.4vw;color:#fff}
-.navbar .search .search-control .search-btn{background:#e15616}
-.navbar .search .search-control .hot-keyword{background:#f94b4b}
-.navbar .search .keywords{display:none;position:absolute;top:29.5vw;width:100vw;padding:4vw 8vw 1.4vw 4vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border-radius:0 0 1.6vw 1.6vw;}
-.navbar .search .keywords::after{content:"";display:block;width:0;clear:both}
-.navbar .search .keywords em,.navbar .search .keywords span{display:none}
-.navbar .search .keywords .close-btn{position:absolute;display:block;top:4vw;right:4vw;width:6vw;height:6vw;text-align:center;line-height:6vw}
-.navbar .search .keywords a{display:block;float:left;height:5.9vw;padding:0 2.4vw;margin-right:2.6vw;margin-bottom:2.6vw;line-height:5.9vw;background:#f94b4b;opacity:1;border-radius:2px;font-size:3.2vw;color:#fff}
-.navbar .search .keywords a:nth-of-type(2n){opacity:0.8}
-.navbar .search .keywords a:nth-of-type(3n){opacity:0.6}
-.navigate{display:none}
-.copyright{width:100vw;margin-top:2.4vw;background:#2c3038;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5vw 4vw;text-align:center}
-.copyright p{font-size:2.9vw;color:#eee;line-height:6vw}
-.copyright p img{display:inline-block;vertical-align:top}
-.copyright p a{color:#eee}
-.copyright p span.br{display:block}
+html{font-size:16px;font-family:'Microsoft YaHei',SimSun,Arial,Helvetica,sans-serif;color:#333333}
+h1,h2,h3,h4,h5,h6{margin:0}
+p{margin:0}
+ul{margin:0;padding:0}
+ul li{margin:0;list-style-type:none}
+a{text-decoration:none}
+input{outline:none}
+.bk-mask{position:fixed;width:100vw;height:100vh;left:0;top:0;background:rgba(0,0,0,.6);z-index:90}
+.hidden{width:100vw;overflow:hidden}
+
+@media screen and (min-width:768px){.only-mobile{display:none !important}
+    ::-webkit-scrollbar{width:8px;height:8px;background-color:#f5f5f5}
+    ::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:4px}
+    body{min-width:1200px}
+    header{position:sticky;top:0;z-index:99;background:#fff}
+    main{min-height:calc(100vh - 144px - 140px)}
+    .bk-container{width:1200px;margin:0 auto}
+    .bk-header{padding:26px 0 16px}
+    .bk-header .bk-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+    .bk-header .bk-logo{-webkit-transform:translateY(-8px);-ms-transform:translateY(-8px);transform:translateY(-8px)}
+    .bk-header .bk-logo h1{font-size:0;text-indent:-99999px}
+    .bk-header .bk-logo img{display:block;width:200px;height:56px}
+    .bk-header .bk-search-container{width:640px}
+    .bk-header .bk-search-container .bk-search-control{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}
+    .bk-header .bk-search-container .bk-search-control input{display:block;width:560px;height:36px;line-height:34px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #F57C40;border-right:0;border-radius:2px 0 0 2px;font-size:14px;padding-left:16px}
+    .bk-header .bk-search-container .bk-search-control input::-webkit-input-placeholder{font-size:14px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-search-control input::-moz-placeholder{font-size:14px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-search-control input:-ms-input-placeholder{font-size:14px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-search-control input::-ms-input-placeholder{font-size:14px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-search-control input::placeholder{font-size:14px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-search-control button{display:block;width:80px;height:36px;line-height:36px;background:#e15616;border:0;border-radius:0 2px 2px 0;font-size:14px;color:#fff;text-align:center;cursor:pointer}
+    .bk-header .bk-search-container .bk-hot-keyword{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:6px}
+    .bk-header .bk-search-container .bk-hot-keyword li{font-size:12px;color:#B2B2B2}
+    .bk-header .bk-search-container .bk-hot-keyword li a{color:#B2B2B2;-webkit-transition:color .4s;-o-transition:color .4s;transition:color .4s}
+    .bk-header .bk-search-container .bk-hot-keyword li::after{content:"/";display:inline;margin:0 6px}
+    .bk-header .bk-search-container .bk-hot-keyword li:last-child::after{display:none}
+    .bk-header .bk-search-container .bk-hot-keyword li a:hover{color:#e15616}
+    .bk-nav{background:#F57C40}
+    .bk-nav .bk-navbar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+    .bk-nav .bk-navbar li.active a{background:#E15616;color:#fff}
+    .bk-nav .bk-navbar li a{display:block;line-height:46px;padding:0 32px;color:#fff;font-size:16px;-webkit-transition:background .4s;-o-transition:background .4s;transition:background .4s}
+    .bk-nav .bk-navbar li a:hover{background:#E15616}
+    .bk-footer{background:#2C3038;height:140px;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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+    .bk-footer h2{font-size:14px;color:#FFFFFF;font-weight:normal}
+    .bk-footer h2 a{color:#FFFFFF}
+    .bk-footer .beian{font-size:12px;color:#eee;margin-top:25px;font-weight:lighter}
+    .bk-footer .beian a{color:#eee}
+    .bk-footer .beian span{margin:0 4px}
+    .bk-footer .beian i{display:inline-block;width:16px;height:16px;vertical-align:-3px;font-size:0;background:url("/img/base/icon-icp@2x.png") no-repeat center;background-size:16px}
+    .bk-footer .copyright{font-size:12px;color:#eee;margin-top:16px;font-weight:lighter}
+    .bk-publish{position:fixed;width:86px;height:190px;background:url("/img/encyclopedia/assets/pc-icon-publish.png") no-repeat center;background-size:86px;right:80px;bottom:120px;cursor:pointer;z-index:30}
+    .bk-login{position:fixed;z-index:120;left:0;top:0;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}
+    .bk-login .mask{position:absolute;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);z-index:10}
+    .bk-login .bk-login-container{position:relative;z-index:20;width:540px;height:526px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 70px}
+    .bk-login .bk-login-container .bk-tip{font-size:14px;color:#22272E;margin:56px 0 9px}
+    .bk-login .bk-login-container .bk-name{font-size:24px;color:#F57C40;margin-bottom:40px}
+    .bk-login .bk-login-container .bk-input{margin:20px 0}
+    .bk-login .bk-login-container .bk-input input{display:block;border:1px solid #E2E2E2;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:44px;line-height:42px;padding-left:16px;font-size:14px}
+    .bk-login .bk-login-container button{background:#F57C40;display:block;width:100%;height:44px;line-height:44px;text-align:center;border:0;color:#fff;font-size:14px;cursor:pointer;border-radius:2px}
+    .bk-login .bk-login-container .bk-tools{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:8px}
+    .bk-login .bk-login-container .bk-tools a{font-size:14px}
+    .bk-login .bk-login-container .bk-tools a:first-child{color:#F57C40}
+    .bk-login .bk-login-container .bk-tools a:last-child{color:#4A4F58}
+    .bk-login .bk-login-container .bk-agreement{position:absolute;bottom:44px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+    .bk-login .bk-login-container .bk-agreement span{font-size:14px;color:#F57C40;margin-left:4px}
+    .bk-login .bk-login-container .bk-agreement span a{color:#F57C40}
+    .bk-login .bk-login-container .bk-agreement input{display:none}
+    .bk-login .bk-login-container .bk-agreement input:checked ~ label::before{display:block}
+    .bk-login .bk-login-container .bk-agreement label{position:relative;display:block;width:16px;height:16px;border:1px solid #F57C40;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:50%;cursor:pointer}
+    .bk-login .bk-login-container .bk-agreement label::before{position:absolute;content:"";display:none;width:8px;height:8px;background:#F57C40;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);border-radius:50%}
+    .bk-login .bk-login-container .verify-wrap{margin:32px 0 16px}
 }
+
+@media screen and (max-width:768px){.only-pc{display:none !important}
+    html{font-size:100px}
+    body{font-size:0.26rem}
+    ::-webkit-scrollbar{width:0.08rem;height:0.08rem;background-color:#f5f5f5}
+    ::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0.04rem}
+    header{position:sticky;top:0;z-index:99}
+    main{min-height:calc(100vh - 1.04rem - 4rem)}
+    .bk-header{position:relative;height:1.04rem;background:#fff}
+    .bk-header .bk-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-right:0.32rem}
+    .bk-header .bk-logo{width:2rem;height:1.04rem;background:#F57C40;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}
+    .bk-header .bk-logo h1{font-size:0;text-indent:-99999px}
+    .bk-header .bk-logo img{display:block;width:1.6rem;height:0.64rem}
+    .bk-header .bk-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:0.16rem;-moz-column-gap:0.16rem;column-gap:0.16rem}
+    .bk-header .bk-menu .bk-search-btn{display:block;width:0.56rem;height:0.56rem;background:#FFF1EB url("/img/encyclopedia/assets/h5-icon-search.png") no-repeat center;border-radius:50%;background-size:0.32rem}
+    .bk-header .bk-menu .bk-menu-name{font-size:0.32rem;color:#F57C40}
+    .bk-header .bk-menu .bk-collapse-btn{display:block;width:0.48rem;height:0.48rem;background:url("/img/encyclopedia/assets/h5-icon-collapse.png") no-repeat center;background-size:0.48rem}
+    .bk-header .bk-menu.active .bk-collapse-btn{background-image:url("/img/encyclopedia/assets/h5-icon-close-hover.png")}
+    .bk-header .bk-search-container{position:absolute;left:0;top:1.04rem;background:#fff;width:100%;display:none}
+    .bk-header .bk-search-container .bk-search-menu{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0.68rem 0.32rem 0.4rem;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.15)),color-stop(46%,#fff));background:-o-linear-gradient(top,rgba(0,0,0,.15) 0%,#fff 46%);background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,#fff 46%)}
+    .bk-header .bk-search-container .bk-search-menu .bk-name{font-size:0.36rem;color:#333333;font-weight:bold}
+    .bk-header .bk-search-container .bk-search-menu .bk-search-close{display:block;width:0.48rem;height:0.48rem;background:url("/img/encyclopedia/assets/h5-icon-close.png") no-repeat center;background-size:0.48rem}
+    .bk-header .bk-search-container .bk-search-menu .bk-search-close:hover{background-image:url("/img/encyclopedia/assets/h5-icon-close-hover.png")}
+    .bk-header .bk-search-container .bk-search-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:0 0.32rem}
+    .bk-header .bk-search-container .bk-search-control input{display:block;width:5.56rem;height:0.8rem;background:#F7F7F7;line-height:0.8rem;font-size:0.24rem;padding:0 0.24rem;border:0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:0.08rem 0 0 0.08rem}
+    .bk-header .bk-search-container .bk-search-control button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:1.3rem;height:0.8rem;background:#F57C40;color:#fff;font-size:0.28rem;border:0;border-radius:0 0.08rem 0.08rem 0}
+    .bk-header .bk-search-container .bk-search-control button::before{content:"";width:0.32rem;height:0.32rem;display:block;background:url("/img/encyclopedia/assets/h5-icon-search2.png") no-repeat center;background-size:0.32rem;margin-right:0.08rem}
+    .bk-header .bk-search-container .bk-hot-keyword{display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.16rem;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0.4rem 0.32rem 0.64rem}
+    .bk-header .bk-search-container .bk-hot-keyword li a{display:block;line-height:0.48rem;height:0.48rem;padding:0 0.18rem;background:#F7F7F7;color:#999999;font-size:0.24rem;border-radius:0.08rem}
+    .bk-nav{position:absolute;width:100vw;right:0;top:1.04rem;display:none}
+    .bk-nav .bk-navbar{padding-top:0.48rem;background:#fff;margin-left:1.34rem;-webkit-box-sizing:border-box;box-sizing:border-box;height:calc(100vh - 1.04rem)}
+    .bk-nav .bk-navbar li{border-bottom:0.01rem solid #D8D8D8}
+    .bk-nav .bk-navbar li a{display:block;color:#333;font-size:0.28rem;line-height:1rem;padding-left:0.48rem}
+    .bk-footer{background:#2C3038;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-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 0.5rem 0.4rem;text-align:center;height:4rem;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .bk-footer h2{font-size:0.26rem;color:#FFFFFF;font-weight:normal;padding:0.56rem 0 0.4rem}
+    .bk-footer h2 a{color:#FFFFFF}
+    .bk-footer .beian{font-size:0.24rem;color:#e1e1e1;font-weight:lighter;line-height:0.48rem}
+    .bk-footer .beian a{color:#e1e1e1}
+    .bk-footer .beian span{margin:0 4px}
+    .bk-footer .beian i{display:inline-block;width:16px;height:16px;vertical-align:-3px;font-size:0;background:url("/img/base/icon-icp@2x.png") no-repeat center;background-size:16px}
+    .bk-footer .copyright{font-size:12px;color:#e1e1e1;font-weight:lighter;line-height:0.48rem}
+}

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

@@ -1,186 +1,83 @@
-@charset "UTF-8";
-.viewer-container{z-index: 99999 !important}
-img{cursor: pointer;}
-@media screen and (min-width:768px){
-.flex-between-center,.article .section.description .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.container,.article{width:1200px;margin:0 auto}
-.article{margin-top:16px;background:#fff}
-.article .section{padding:24px}
-.article .section .title h2{font-size:20px;font-weight:bold;color:#4a4f58}
-.article .section .title .line{width:100%;height:1px;background:#e3e6eb;margin-top:4px}
-.article .section .title .line::before{content:"";display:block;width:20px;height:1px;background:#e15616}
-.article .section .content{padding-top:24px;word-break: break-all;}
-.article .section .content .row{margin:16px 0}
-.article .section .content p{color:#4a4f58;font-size:14px;line-height:24px}
-.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{margin:16px 0;font-weight:bold}
-.article .section.description .content{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
-.article .section.description .content .content-left{width:986px}
-.article .section.description .content .content-left .desc{text-align:justify;font-size:14px;line-height:24px}
-.article .section.description .content .content-left .names{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;line-height: 26px}
-.article .section.description .content .content-left .names .name{max-width: 60%;}
-.article .section.description .content .content-left .names .alias{ flex: 1;}
-.article .section.description .content .content-left .alias{color:#93979f;margin-left:40px}
-.article .section.description .content .cover{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
-.article .section.description .content .cover img{width:120px;height:120px}
-/*.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb;flex-wrap: wrap;}*/
-/*.article .section.params .tr:first-child{border-top:1px solid;border-left:1px solid;border-color:#e3e6eb}*/
-/*.article .section.params .tr .group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50%}*/
-/*.article .section.params .tr .th,.article .section.params .tr .td{line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}*/
-/*.article .section.params .tr .th a,.article .section.params .tr .td a{color:#e15616}*/
-/*.article .section.params .tr .th{background:#f4f5f8;width: 30%;}*/
-/*.article .section.params .tr .td{background:#ffffff;width: 70%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}*/
-.article .section.params .content{width:100%;font-size:14px;border-collapse:unset;border-spacing:unset}
-.article .section.params .content.mobile{display: none;}
-.article .section.params .content tr td{padding:8px;line-height:1.6;border-top:1px solid;border-left:1px solid;border-color:#e3e6eb !important}
-.article .section.params .content tr td:last-child{border-right:1px solid}
-.article .section.params .content tr:last-child td{border-bottom:1px solid}
-.article .section.params .content tr .th{width:18%;background:#f4f5f8}
-.article .section.params .content tr .td a { color:#e15616 }
-.article .section.approve .content .name{font-size:14px;line-height:24px}
-.article .section.approve .content a{color:#e15616}
-.article .section.approve .content .img-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.article .section.approve .content .img-list img{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;margin:16px 16px 0 0}
-.article .section.effect .content img{display:block;width:100%}
-.article .section.question .content .collapse{margin-bottom:12px}
-.article .section.question .content .collapse dt,.article .section.question .content .collapse dd{position:relative;font-size:14px;line-height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;text-align:justify}
-.article .section.question .content .collapse dt span,.article .section.question .content .collapse dd span{display:inline-block;width:20px;height:20px;margin-right:8px;text-align:center;line-height:20px;border-radius:2px;color:#fff;font-size:12px;position:absolute;top:2px;left:0}
-.article .section.question .content .collapse dt{font-weight:bold}
-.article .section.question .content .collapse dt span{background:#ffa457}
-.article .section.question .content .collapse dt .icon{position:absolute;right:0;top:2px;cursor:pointer}
-.article .section.question .content .collapse dd{padding-right:0;margin-top:4px;}
-.article .section.question .content .collapse dd span{background:#34cc8c}
-.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #666}
-.article .section.some-link .group{ display: flex;justify-content: space-between;align-items: center; }
-.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 24px}
-.article .section.some-link .group .link .name{ font-size: 14px; margin-left: 16px;max-width: 300px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.6}
-.article .section.some-link .group .link .name:hover{ color: #E15616 }
-.article .section.some-link .group .link .image{ width: 88px;height: 88px; }
-
-.article .section.related-video .content::after{content: "";display: block;clear:both;}
-.article .section.related-video .content .video-control{width: 338px;height: 230px;position: relative;background: #f1f1f1;float: left;margin: 24px 24px 0 0;}
-.article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 40px; background: rgba(0,0,0,0.39); text-align: center; line-height: 40px ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 16px; box-sizing: border-box;padding: 0 16px; }
-.article .section.related-video .content .video-control:nth-child(1),
-.article .section.related-video .content .video-control:nth-child(2),
-.article .section.related-video .content .video-control:nth-child(3){margin-top: 0;}
-.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
-.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 48px;height: 48px; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 48px 48px;}
-
-
-.article .section .content::after{content:"";display:block;visibility:hidden;width:0;clear:both}
-.article .section .recommend-section{display: block; float:left;width:372px;height:546px;margin:0 18px 18px 0;background:#ffffff;border-radius:2px;overflow:hidden;-webkit-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s;border: 1px solid #E3E6EB;box-sizing: border-box;}
-/*.article .section .recommend-section:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}*/
-.article .section .recommend-section  h3{margin: 0;}
-.article .section .recommend-section:hover h3{color:#e15616}
-.article .section .recommend-section:nth-child(3n){margin-right:0}
-.article .section .recommend-section .cover{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:260px}
-.article .section .recommend-section .cover img{width:246px;height:246px}
-.article .section .recommend-section .content{padding:16px 16px 0;-webkit-box-sizing:border-box;box-sizing:border-box;}
-.article .section .recommend-section .content h3{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;font-weight:bold;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
-.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:52px;color:#4a4f58;margin-top:12px;line-height:26px;text-align:justify;word-break:break-all}
-.article .section .recommend-section .content .question{margin:12px 0;height:78px}
-.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#93979f;line-height:26px;font-size:14px}
-.article .section .recommend-section .content .question p:nth-child(3)~p{display: none}
-.article .section .recommend-section .content .tag-list{height:24px}
-.article .section .recommend-section .content .tag-list .tag{display:inline-block;height:24px;line-height:24px;background:#fef6f3;border-radius:2px;font-size:12px;color:#e15616;padding:0 8px;margin-right:8px}
-.article .section .recommend-section .content .dashed-line{margin-top:12px;height:0px;border-bottom:1px dashed #b8bfca}
-.article .section .recommend-section .content .footer{height:50px;line-height:50px;font-size:14px;color:#93979f;display: flex;justify-content: space-between;}
-
-.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:314px;height:418px;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center}
-.contact-popup .close{position:absolute;display:block;width:30px;height:30px;text-align:center;line-height:30px;top:10px;right:20px;font-size:28px;color:#2c3038;cursor:pointer}
-.contact-popup .content{margin-top:130px}
-.contact-popup .content p{font-size:16px;text-align:center;line-height:32px;color:#9aa5b5;margin:0}
-.contact-popup .content p.tel{color:#e15616}
-.contact-popup .content p.time{color:#2c3038}
-
-.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-.video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
-.video-popup .content video{width: 100%;height: 100%;display: block;}
-.video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+@media screen and (min-width:768px){main{background:#FAFAFA}
+    .bk-banner{height:320px;position:relative;z-index:10;overflow:hidden}
+    .bk-banner img{display:block;height:320px;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
+    .bk-banner .bk-container{position:relative}
+    .bk-banner .bk-name{position:absolute;font-size:32px;color:#756863;font-weight:bold;left:0;top:40px}
+    .bk-detail{position:relative;z-index:20;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding:40px 32px;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:14px;color:#333}
+    .bk-detail-left{width:835px}
+    .bk-detail-left .bk-name{font-size:18px}
+    .bk-detail-left .bk-overview{color:#999999;margin-top:16px}
+    .bk-detail-left .bk-information{display:table;margin-top:48px;margin-bottom:48px;width:100%}
+    .bk-detail-left .bk-information .bk-row{display:table-row}
+    .bk-detail-left .bk-information .bk-row .bk-label{display:table-cell;font-weight:bold;color:#9AA5B5;border-bottom:1px dashed #BEBEBE;padding:18px 0 10px}
+    .bk-detail-left .bk-information .bk-row .bk-content{font-size:14px;display:table-cell;border-bottom:1px dashed #BEBEBE;padding:18px 0 10px}
+    .bk-detail-left .bk-section .bk-title{position:relative;margin-top:40px;margin-bottom:24px}
+    .bk-detail-left .bk-section .bk-title h2{background:#fff;font-size:22px;display:inline-block;font-weight:normal;position:relative;z-index:20;padding-right:16px}
+    .bk-detail-left .bk-section .bk-title::before{position:absolute;content:"";display:block;width:12px;height:24px;left:-32px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:#FF9D63}
+    .bk-detail-left .bk-section .bk-title .line{position:absolute;display:block;width:100%;height:1px;background:#E6E6E6;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);right:0;z-index:10}
+    .bk-detail-left .bk-section p{text-indent:2em;line-height:26px;text-align:justify}
+    .bk-detail-left .bk-section h3{font-size:18px;margin-bottom:16px;margin-top:32px;font-weight:normal}
+    .bk-literature{margin-top:66px}
+    .bk-literature .bk-title{font-size:18px}
+    .bk-literature .bk-title .line{height:1px;background:#BEBEBE;margin-top:16px}
+    .bk-literature .bk-literature-list{margin-top:24px}
+    .bk-literature .bk-literature-list li{font-size:14px;color:#999999;margin-top:14px;line-height:24px}
+    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;margin-top:64px;-webkit-column-gap:32px;-moz-column-gap:32px;column-gap:32px}
+    .bk-pv .bk-pv-item{font-size:14px;color:#999999}
+    .bk-detail-right .bk-album,.bk-detail-right .bk-company{width:280px;height:280px;background:#FAFAFA;margin-bottom:25px}
+    .bk-detail-right .bk-album img,.bk-detail-right .bk-company img{display:block;width:280px;height:220px}
+    .bk-detail-right .bk-album .swiper-container{height:220px}
+    .bk-detail-right .bk-album .bk-title,.bk-detail-right .bk-company .bk-title{font-size:18px;color:#333;text-align:center;line-height:58px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #DEDEDE;border-top-style:dashed}
+    .bk-detail-right .bk-directory{width:280px;background:#FAFAFA;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 24px;margin-top:100px;position:sticky;top:280px}
+    .bk-detail-right .bk-directory .bk-title{font-size:18px;font-weight:bold;margin-bottom:24px}
+    .bk-detail-right .bk-directory .bk-content{max-height:360px;overflow-y:auto}
+    .bk-detail-right .bk-directory .bk-content ul li a{font-size:14px;margin-bottom:16px;display:block;color:#666666}
+    .bk-detail-right .bk-directory .bk-content > ul > li > a{font-weight:bold;color:#333}
+    .bk-detail-right .bk-directory .bk-content > ul > li > ul li{padding-left:24px;position:relative;color:#666666}
+    .bk-detail-right .bk-directory .bk-content > ul > li > ul li:before{position:absolute;content:'●';left:10px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
 }
-@media screen and (max-width:768px){
-img{max-width: 100%;}
-.flex,.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group,.flex-between-center,.flex-center{display:-webkit-box;display:-ms-flexbox;display:flex}
-.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.flex-between-center{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-body{padding-top:40.3vw}
-.navigate{display:block;background:#fff;top:29.5vw;position:fixed;-webkit-box-shadow:1vw 0 2vw rgba(0,0,0,0.1);box-shadow:1vw 0 2vw rgba(0,0,0,0.1);z-index: 10;}
-.navigate ul{overflow-x:scroll;width:100vw;height:10.8vw;padding:4vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}
-.navigate ul::-webkit-scrollbar{display:none}
-.navigate ul li{position:relative;display:inline-block;height:6.8vw;margin-right:5.6vw}
-.navigate ul li:last-child{margin-right:0}
-.navigate ul li::after{content:"";position:absolute;left:50%;bottom:0.4vw;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;width:8.8vw;height:0.4vw;background:#fff}
-.navigate ul li a{display:block;font-size:3.2vw;line-height:5vw;color:#9498a0}
-.navigate ul li.active a{color:#e15616}
-.navigate ul li.active::after{background:#e15616}
-.article{padding:4vw;margin-top:2.4vw;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
-.article .section .title h2{font-size:3.6vw;font-weight:bold}
-.article .section .title .line{width:100%;height:1px;margin-top:1vw;background:#e3e6eb}
-.article .section .title .line::before{content:"";display:block;width:3.5vw;height:0.2vw;background:#e15616}
-.article .section .content{padding:3.2vw 0; word-break: break-all;}
-.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{font-weight:bold;margin:3.2vw 0}
-.article .section .content p{font-size:3.2vw;line-height:5.6vw;text-align:justify;margin:1.6vw 0}
-.article .section.description .names{font-size:3.2vw;line-height:5.6vw}
-.article .section.description .names .alias{color:#93979f}
-.article .section.description .desc{text-align:justify;font-size:3.2vw;line-height:5.6vw;margin:3.2vw 0}
-.article .section.description .cover img{display:block;width:23.6vw;height:23.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px dashed #e3e6eb}
-.article .section.params .content.pc{display: none;}
-.article .section.params .tr{line-height:5.6vw}
-.article .section.params .tr .group{font-size:3.2vw;margin:1.6vw 0}
-.article .section.params .tr .group .th::after{content:"："}
-.article .section.params .tr .group .td>a{ color: #e15616;}
-.article .section.approve .name{font-size:3.2vw}
-.article .section.approve .img-list{ overflow-x:scroll;}
-.article .section.approve .img-list img{display:block;/*width:23.6vw;*/height:23.6vw;border:1px dashed #e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:2.4vw;margin-top:2.4vw}
-.article .section.effect img{display:block;max-width:100%}
-.article .section.question .collapse dt,.article .section.question .collapse dd{font-size:3.2vw}
-.article .section.question .collapse dt span,.article .section.question .collapse dd span{display:inline-block;vertical-align:middle;width:4vw;height:4vw;border-radius:0.2vw;text-align:center;line-height:4vw;color:#fff;margin-right:2.4vw}
-.article .section.question .collapse dt{position:relative;padding-right:6.4vw;height:6.4vw;line-height:6.4vw;margin:1.6vw 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
-.article .section.question .collapse dt span{background:#ffa457}
-.article .section.question .collapse dt .icon{position:absolute;right:0;top:0}
-.article .section.question .collapse dd{line-height:5.6vw;margin:1.6vw 0;text-align:justify}
-.article .section.question .collapse dd span{background:#34cc8c}
-.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:80vw;height:100vw;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center;background-size:80vw auto}
-.contact-popup .close{position:absolute;display:block;width:8vw;height:8vw;text-align:center;line-height:8vw;top:0;right:5vw;font-size:8vw;color:#2c3038;cursor:pointer}
-.contact-popup .content{margin-top:30vw}
-.contact-popup .content p{font-size:4.2vw;text-align:center;line-height:8vw;color:#9aa5b5;margin:0}
-.contact-popup .content p.tel{color:#e15616}
-.contact-popup .content p.time{color:#2c3038}
-.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 2.8vw;color: #aaa;margin: 4.8vw 0}
-.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 4.2vw}
-.article .section.some-link .group .link .name{ font-size: 3.6vw; margin-left: 1.8vw;max-width: 60vw;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.6}
-.article .section.some-link .group .link .name:hover{ color: #E15616 }
-.article .section.some-link .group .link .image{ width: 24vw;height: 24vw;box-sizing: border-box;border: 1px solid #E3E6EB; }
 
-.article .section.related-video .content {overflow-y: scroll;white-space: nowrap;width: 99vw;margin-left: -3.2vw;}
-.article .section.related-video .content .video-control{width: 75.6vw;height: 51.5vw;position: relative;background: #f1f1f1;display: inline-block;margin-left: 3.2vw;}
-.article .section.related-video .content .video-control:last-child{margin-right: 3.2vw;}
-.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
-.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 10.8vw;height: 10.8vw; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 10.8vw 10.8vw;}
-    .article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 8.8vw; background: rgba(0,0,0,0.39); text-align: center; line-height: 8.8vw ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 3.4vw; box-sizing: border-box;padding: 0 3.4vw; }
-
-.article .section.recommend {margin-top: 3.2vw;}
-.article .section .recommend-section {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display: flex;padding: 2.4vw 0;border-top: 1px solid #B8BFCA;}
-.article .section .recommend-section:first-child {border-top: 0;}
-.article .section .recommend-section .cover{margin-right:2.4vw}
-.article .section .recommend-section .cover img{display:block;width:30.4vw;height:30.4vw;border:1px solid #e1e1e1}
-.article .section .recommend-section .content {flex: 1;padding: 0}
-.article .section .recommend-section .content h3{margin: 0;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold;word-break: break-all;}
-.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw; word-break: break-all;}
-.article .section .recommend-section .content .question{height:10vw;margin:2.4vw 0}
-.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:2.6vw;line-height:5vw;color:#93979f}
-.article .section .recommend-section .content .question p:nth-child(2)~p{display: none}
-.article .section .recommend-section .content .tag-list{height:4.8vw;-ms-flex-wrap:wrap;flex-wrap:wrap}
-.article .section .recommend-section .content .tag-list .tag{height:4.8vw;padding:0 1.2vw;margin-right:1.6vw;background:#fef6f3;border-radius:0.2vw;font-size:2.6vw;color:#e15616;line-height:4.8vw}
-.article .section .recommend-section .content .tag-list .tag:last-child{display:none}
-.article .section .recommend-section .content .dashed-line{display:none}
-.article .section .recommend-section .content .footer{height:8vw;font-size:2.6vw;color:#93979f;line-height:8vw}
-
-.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
-/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
-.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
-.video-popup .content video{width: 100%;height: 100%;display: block;}
-.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
-
-}
+@media screen and (max-width:768px){.bk-banner{height:3.4rem;position:relative;z-index:10;overflow:hidden}
+    .bk-banner img{display:block;height:3.4rem;position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}
+    .bk-detail{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:0.28rem;line-height:0.48rem;background:#F5F5F5}
+    .bk-entry-name{padding:0.4rem 0.32rem 0.32rem;background:#fff}
+    .bk-entry-name .bk-name{font-size:0.36rem;font-weight:bold}
+    .bk-detail-left .bk-name{font-size:0.36rem;font-weight:bold;padding:0 0.32rem;background:#fff}
+    .bk-detail-left .bk-overview{color:#999999;padding:0.24rem 0.32rem 0;background:#fff}
+    .bk-detail-left .bk-information{position:relative;width:100%;padding:0.56rem 0.32rem  0.48rem;display:table;margin-bottom:0.16rem;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .bk-detail-left .bk-information .bk-row{display:table-row}
+    .bk-detail-left .bk-information .bk-row .bk-label{color:#9AA5B5;display:table-cell;padding:0.16rem 0.4rem 0.16rem 0}
+    .bk-detail-left .bk-information .bk-row .bk-content{display:table-cell;padding:0.16rem 0}
+    .bk-detail-left .bk-section{position:relative;padding:0.48rem 0.32rem;background:#fff;margin-bottom:0.16rem}
+    .bk-detail-left .bk-section .bk-title{position:relative;margin-bottom:0.32rem}
+    .bk-detail-left .bk-section .bk-title h2{font-size:0.36rem;position:relative;z-index:20}
+    .bk-detail-left .bk-section p{text-align:justify}
+    .bk-detail-left .bk-section h3{font-size:0.32rem;margin-bottom:0.32rem;margin-top:0.4rem;font-weight:normal}
+    .bk-literature{padding:0.4rem 0.32rem;background:#fff}
+    .bk-literature .bk-title{font-size:0.36rem;font-weight:bold;margin-bottom:0.32rem}
+    .bk-literature .bk-literature-list li{margin-top:0.1rem;font-size:0.26rem;color:#999999}
+    .bk-pv{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;text-align:right;background:#fff;padding:0 0.32rem 0.4rem;-webkit-column-gap:0.48rem;-moz-column-gap:0.48rem;column-gap:0.48rem}
+    .bk-pv .bk-pv-item{font-size:0.24rem;color:#999999}
+    .bk-relevant{background:#fff;padding:0.4rem 0 0;position:sticky;top:-6.15rem;z-index:60}
+    .bk-relevant .bk-album .bk-title{font-size:0.36rem;font-weight:bold;padding:0 0.32rem}
+    .bk-relevant .bk-album .bk-album-list{display:-webkit-box;display:-ms-flexbox;display:flex;overflow-x:auto;height:3.2rem;margin-top:0.32rem;margin-bottom:0.4rem;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem}
+    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
+    .bk-relevant .bk-album .bk-album-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item{-ms-flex-negative:0;flex-shrink:0;width:4.2rem;height:3.2rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item:first-child{margin-left:0.32rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item:last-child{margin-right:0.32rem}
+    .bk-relevant .bk-album .bk-album-list .bk-album-item img{display:block;width:100%;height:100%}
+    .bk-relevant .bk-company{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:1.6rem;padding:0 0.2rem;margin:0 0.32rem 0.8rem;-webkit-box-sizing:border-box;box-sizing:border-box;border:0.01rem solid #DEDEDE;border-radius:0.08rem;background:#FAFAFA}
+    .bk-relevant .bk-company .bk-cover{width:1.2rem;height:1.2rem;border-radius:0.08rem;border:0.01rem solid #DEDEDE}
+    .bk-relevant .bk-company .bk-cover img{display:block;width:100%;height:100%}
+    .bk-relevant .bk-company .bk-title{font-size:0.26rem;margin-left:0.28rem}
+    .bk-relevant .bk-directory{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;height:1.2rem;background:#F7F7F7}
+    .bk-relevant .bk-directory .bk-title{font-size:0.28rem;color:#999999;margin-left:0.32rem}
+    .bk-relevant .bk-directory .bk-title span{margin:0 0.24rem}
+    .bk-relevant .bk-directory .bk-directory-list{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;overflow-y:auto;-webkit-column-gap:0.24rem;-moz-column-gap:0.24rem;column-gap:0.24rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}
+    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar{width:0;height:0;background-color:#f5f5f5}
+    .bk-relevant .bk-directory .bk-directory-list::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:0}
+    .bk-relevant .bk-directory .bk-directory-list li{-ms-flex-negative:0;flex-shrink:0}
+    .bk-relevant .bk-directory .bk-directory-list li a{display:block;height:0.6rem;color:#333333;font-size:0.28rem;padding:0 0.16rem;line-height:0.6rem;background:#fff}
+    .bk-relevant .bk-directory .bk-directory-list li:last-child{margin-right:0.32rem}
+}

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

@@ -0,0 +1,27 @@
+@media screen and (min-width:768px){.bk-banner{position:relative;height:510px;overflow:hidden;min-width:1200px}
+    .bk-banner img{position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;height:510px}
+    .bk-list{padding:48px 0;margin-bottom:120px}
+    .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:24px 0;border-bottom:1px solid #E0E7EB}
+    .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:260px;height:168px;-ms-flex-negative:0;flex-shrink:0}
+    .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%}
+    .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:24px}
+    .bk-list .bk-list-item .bk-info h2{font-size:18px;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
+    .bk-list .bk-list-item .bk-info p{font-size:14px;color:#666666;margin-top:16px;height:48px;line-height:24px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info .bk-info-footer{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;font-size:14px;color:#B2B2B2;margin-top:40px}
+    .bk-list .bk-list-item::after{content:"";position:absolute;width:1248px;height:216px;border:3px solid #F57C40;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:-1;opacity:0;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
+    .bk-list .bk-list-item:hover{cursor:pointer}
+    .bk-list .bk-list-item:hover::after{z-index:1;opacity:1}
+    .bk-list .bk-list-item:hover h2{color:#F57C40}
+}
+
+@media screen and (max-width:768px){.bk-banner{position:relative;height:3.6rem;overflow:hidden}
+    .bk-banner img{position:absolute;left:50%;top:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;height:3.6rem}
+    .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0.4rem 0.32rem}
+    .bk-list .bk-list-item::after{content:"";position:absolute;bottom:0;left:0.32rem;width:6.86rem;display:block;border-bottom:0.01rem solid #E0E7EB}
+    .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:2.6rem;height:1.68rem;-ms-flex-negative:0;flex-shrink:0}
+    .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%;border-radius:0.08rem}
+    .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:0.24rem}
+    .bk-list .bk-list-item .bk-info h2{font-size:0.32rem;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info p{font-size:0.26rem;color:#666666;margin-top:0.16rem;height:0.75rem;line-height:0.375rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info .bk-info-footer{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;font-size:0.22rem;color:#B2B2B2;margin-top:0.32rem}
+}

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

@@ -1,12 +1,11 @@
-@charset "UTF-8";
 html{line-height:1.15;-webkit-text-size-adjust:100%}
 body{margin:0}
 main{display:block}
 h1{font-size:2em;margin:0.67em 0}
-hr{box-sizing:content-box;height:0;overflow:visible}
+hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}
 pre{font-family:monospace,monospace;font-size:1em}
 a{background-color:transparent}
-abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
 b,strong{font-weight:bolder}
 code,kbd,samp{font-family:monospace,monospace;font-size:1em}
 small{font-size:80%}
@@ -21,10 +20,10 @@ button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
 button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
 button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
 fieldset{padding:0.35em 0.75em 0.625em}
-legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
+legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
 progress{vertical-align:baseline}
 textarea{overflow:auto}
-[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
+[type="checkbox"],[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}
 [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
 [type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
 [type="search"]::-webkit-search-decoration{-webkit-appearance:none}

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

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

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

@@ -0,0 +1,186 @@
+@charset "UTF-8";
+.viewer-container{z-index: 99999 !important}
+img{cursor: pointer;}
+@media screen and (min-width:768px){
+.flex-between-center,.article .section.description .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.container,.article{width:1200px;margin:0 auto}
+.article{margin-top:16px;background:#fff}
+.article .section{padding:24px}
+.article .section .title h2{font-size:20px;font-weight:bold;color:#4a4f58}
+.article .section .title .line{width:100%;height:1px;background:#e3e6eb;margin-top:4px}
+.article .section .title .line::before{content:"";display:block;width:20px;height:1px;background:#e15616}
+.article .section .content{padding-top:24px;word-break: break-all;}
+.article .section .content .row{margin:16px 0}
+.article .section .content p{color:#4a4f58;font-size:14px;line-height:24px}
+.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{margin:16px 0;font-weight:bold}
+.article .section.description .content{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.article .section.description .content .content-left{width:986px}
+.article .section.description .content .content-left .desc{text-align:justify;font-size:14px;line-height:24px}
+.article .section.description .content .content-left .names{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;line-height: 26px}
+.article .section.description .content .content-left .names .name{max-width: 60%;}
+.article .section.description .content .content-left .names .alias{ flex: 1;}
+.article .section.description .content .content-left .alias{color:#93979f;margin-left:40px}
+.article .section.description .content .cover{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.article .section.description .content .cover img{width:120px;height:120px}
+/*.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb;flex-wrap: wrap;}*/
+/*.article .section.params .tr:first-child{border-top:1px solid;border-left:1px solid;border-color:#e3e6eb}*/
+/*.article .section.params .tr .group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50%}*/
+/*.article .section.params .tr .th,.article .section.params .tr .td{line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}*/
+/*.article .section.params .tr .th a,.article .section.params .tr .td a{color:#e15616}*/
+/*.article .section.params .tr .th{background:#f4f5f8;width: 30%;}*/
+/*.article .section.params .tr .td{background:#ffffff;width: 70%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}*/
+.article .section.params .content{width:100%;font-size:14px;border-collapse:unset;border-spacing:unset}
+.article .section.params .content.mobile{display: none;}
+.article .section.params .content tr td{padding:8px;line-height:1.6;border-top:1px solid;border-left:1px solid;border-color:#e3e6eb !important}
+.article .section.params .content tr td:last-child{border-right:1px solid}
+.article .section.params .content tr:last-child td{border-bottom:1px solid}
+.article .section.params .content tr .th{width:18%;background:#f4f5f8}
+.article .section.params .content tr .td a { color:#e15616 }
+.article .section.approve .content .name{font-size:14px;line-height:24px}
+.article .section.approve .content a{color:#e15616}
+.article .section.approve .content .img-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article .section.approve .content .img-list img{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;margin:16px 16px 0 0}
+.article .section.effect .content img{display:block;width:100%}
+.article .section.question .content .collapse{margin-bottom:12px}
+.article .section.question .content .collapse dt,.article .section.question .content .collapse dd{position:relative;font-size:14px;line-height:24px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 32px;text-align:justify}
+.article .section.question .content .collapse dt span,.article .section.question .content .collapse dd span{display:inline-block;width:20px;height:20px;margin-right:8px;text-align:center;line-height:20px;border-radius:2px;color:#fff;font-size:12px;position:absolute;top:2px;left:0}
+.article .section.question .content .collapse dt{font-weight:bold}
+.article .section.question .content .collapse dt span{background:#ffa457}
+.article .section.question .content .collapse dt .icon{position:absolute;right:0;top:2px;cursor:pointer}
+.article .section.question .content .collapse dd{padding-right:0;margin-top:4px;}
+.article .section.question .content .collapse dd span{background:#34cc8c}
+.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #666}
+.article .section.some-link .group{ display: flex;justify-content: space-between;align-items: center; }
+.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 24px}
+.article .section.some-link .group .link .name{ font-size: 14px; margin-left: 16px;max-width: 300px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.6}
+.article .section.some-link .group .link .name:hover{ color: #E15616 }
+.article .section.some-link .group .link .image{ width: 88px;height: 88px; }
+
+.article .section.related-video .content::after{content: "";display: block;clear:both;}
+.article .section.related-video .content .video-control{width: 338px;height: 230px;position: relative;background: #f1f1f1;float: left;margin: 24px 24px 0 0;}
+.article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 40px; background: rgba(0,0,0,0.39); text-align: center; line-height: 40px ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 16px; box-sizing: border-box;padding: 0 16px; }
+.article .section.related-video .content .video-control:nth-child(1),
+.article .section.related-video .content .video-control:nth-child(2),
+.article .section.related-video .content .video-control:nth-child(3){margin-top: 0;}
+.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
+.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 48px;height: 48px; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 48px 48px;}
+
+
+.article .section .content::after{content:"";display:block;visibility:hidden;width:0;clear:both}
+.article .section .recommend-section{display: block; float:left;width:372px;height:546px;margin:0 18px 18px 0;background:#ffffff;border-radius:2px;overflow:hidden;-webkit-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s;border: 1px solid #E3E6EB;box-sizing: border-box;}
+/*.article .section .recommend-section:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}*/
+.article .section .recommend-section  h3{margin: 0;}
+.article .section .recommend-section:hover h3{color:#e15616}
+.article .section .recommend-section:nth-child(3n){margin-right:0}
+.article .section .recommend-section .cover{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:260px}
+.article .section .recommend-section .cover img{width:246px;height:246px}
+.article .section .recommend-section .content{padding:16px 16px 0;-webkit-box-sizing:border-box;box-sizing:border-box;}
+.article .section .recommend-section .content h3{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;font-weight:bold;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
+.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:52px;color:#4a4f58;margin-top:12px;line-height:26px;text-align:justify;word-break:break-all}
+.article .section .recommend-section .content .question{margin:12px 0;height:78px}
+.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#93979f;line-height:26px;font-size:14px}
+.article .section .recommend-section .content .question p:nth-child(3)~p{display: none}
+.article .section .recommend-section .content .tag-list{height:24px}
+.article .section .recommend-section .content .tag-list .tag{display:inline-block;height:24px;line-height:24px;background:#fef6f3;border-radius:2px;font-size:12px;color:#e15616;padding:0 8px;margin-right:8px}
+.article .section .recommend-section .content .dashed-line{margin-top:12px;height:0px;border-bottom:1px dashed #b8bfca}
+.article .section .recommend-section .content .footer{height:50px;line-height:50px;font-size:14px;color:#93979f;display: flex;justify-content: space-between;}
+
+.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:314px;height:418px;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center}
+.contact-popup .close{position:absolute;display:block;width:30px;height:30px;text-align:center;line-height:30px;top:10px;right:20px;font-size:28px;color:#2c3038;cursor:pointer}
+.contact-popup .content{margin-top:130px}
+.contact-popup .content p{font-size:16px;text-align:center;line-height:32px;color:#9aa5b5;margin:0}
+.contact-popup .content p.tel{color:#e15616}
+.contact-popup .content p.time{color:#2c3038}
+
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
+}
+@media screen and (max-width:768px){
+img{max-width: 100%;}
+.flex,.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group,.flex-between-center,.flex-center{display:-webkit-box;display:-ms-flexbox;display:flex}
+.flex-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-between-center{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+body{padding-top:40.3vw}
+.navigate{display:block;background:#fff;top:29.5vw;position:fixed;-webkit-box-shadow:1vw 0 2vw rgba(0,0,0,0.1);box-shadow:1vw 0 2vw rgba(0,0,0,0.1);z-index: 10;}
+.navigate ul{overflow-x:scroll;width:100vw;height:10.8vw;padding:4vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}
+.navigate ul::-webkit-scrollbar{display:none}
+.navigate ul li{position:relative;display:inline-block;height:6.8vw;margin-right:5.6vw}
+.navigate ul li:last-child{margin-right:0}
+.navigate ul li::after{content:"";position:absolute;left:50%;bottom:0.4vw;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);display:block;width:8.8vw;height:0.4vw;background:#fff}
+.navigate ul li a{display:block;font-size:3.2vw;line-height:5vw;color:#9498a0}
+.navigate ul li.active a{color:#e15616}
+.navigate ul li.active::after{background:#e15616}
+.article{padding:4vw;margin-top:2.4vw;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+.article .section .title h2{font-size:3.6vw;font-weight:bold}
+.article .section .title .line{width:100%;height:1px;margin-top:1vw;background:#e3e6eb}
+.article .section .title .line::before{content:"";display:block;width:3.5vw;height:0.2vw;background:#e15616}
+.article .section .content{padding:3.2vw 0; word-break: break-all;}
+.article .section .content h1,.article .section .content h2,.article .section .content h3,.article .section .content h4,.article .section .content h5,.article .section .content h6{font-weight:bold;margin:3.2vw 0}
+.article .section .content p{font-size:3.2vw;line-height:5.6vw;text-align:justify;margin:1.6vw 0}
+.article .section.description .names{font-size:3.2vw;line-height:5.6vw}
+.article .section.description .names .alias{color:#93979f}
+.article .section.description .desc{text-align:justify;font-size:3.2vw;line-height:5.6vw;margin:3.2vw 0}
+.article .section.description .cover img{display:block;width:23.6vw;height:23.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px dashed #e3e6eb}
+.article .section.params .content.pc{display: none;}
+.article .section.params .tr{line-height:5.6vw}
+.article .section.params .tr .group{font-size:3.2vw;margin:1.6vw 0}
+.article .section.params .tr .group .th::after{content:"："}
+.article .section.params .tr .group .td>a{ color: #e15616;}
+.article .section.approve .name{font-size:3.2vw}
+.article .section.approve .img-list{ overflow-x:scroll;}
+.article .section.approve .img-list img{display:block;/*width:23.6vw;*/height:23.6vw;border:1px dashed #e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:2.4vw;margin-top:2.4vw}
+.article .section.effect img{display:block;max-width:100%}
+.article .section.question .collapse dt,.article .section.question .collapse dd{font-size:3.2vw}
+.article .section.question .collapse dt span,.article .section.question .collapse dd span{display:inline-block;vertical-align:middle;width:4vw;height:4vw;border-radius:0.2vw;text-align:center;line-height:4vw;color:#fff;margin-right:2.4vw}
+.article .section.question .collapse dt{position:relative;padding-right:6.4vw;height:6.4vw;line-height:6.4vw;margin:1.6vw 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+.article .section.question .collapse dt span{background:#ffa457}
+.article .section.question .collapse dt .icon{position:absolute;right:0;top:0}
+.article .section.question .collapse dd{line-height:5.6vw;margin:1.6vw 0;text-align:justify}
+.article .section.question .collapse dd span{background:#34cc8c}
+.contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:80vw;height:100vw;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center;background-size:80vw auto}
+.contact-popup .close{position:absolute;display:block;width:8vw;height:8vw;text-align:center;line-height:8vw;top:0;right:5vw;font-size:8vw;color:#2c3038;cursor:pointer}
+.contact-popup .content{margin-top:30vw}
+.contact-popup .content p{font-size:4.2vw;text-align:center;line-height:8vw;color:#9aa5b5;margin:0}
+.contact-popup .content p.tel{color:#e15616}
+.contact-popup .content p.time{color:#2c3038}
+.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 2.8vw;color: #aaa;margin: 4.8vw 0}
+.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 4.2vw}
+.article .section.some-link .group .link .name{ font-size: 3.6vw; margin-left: 1.8vw;max-width: 60vw;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.6}
+.article .section.some-link .group .link .name:hover{ color: #E15616 }
+.article .section.some-link .group .link .image{ width: 24vw;height: 24vw;box-sizing: border-box;border: 1px solid #E3E6EB; }
+
+.article .section.related-video .content {overflow-y: scroll;white-space: nowrap;width: 99vw;margin-left: -3.2vw;}
+.article .section.related-video .content .video-control{width: 75.6vw;height: 51.5vw;position: relative;background: #f1f1f1;display: inline-block;margin-left: 3.2vw;}
+.article .section.related-video .content .video-control:last-child{margin-right: 3.2vw;}
+.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
+.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 10.8vw;height: 10.8vw; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 10.8vw 10.8vw;}
+    .article .section.related-video .content .video-control .video-title { position: absolute; left: 0; bottom: 0; z-index: 10; width: 100%; height: 8.8vw; background: rgba(0,0,0,0.39); text-align: center; line-height: 8.8vw ; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 3.4vw; box-sizing: border-box;padding: 0 3.4vw; }
+
+.article .section.recommend {margin-top: 3.2vw;}
+.article .section .recommend-section {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display: flex;padding: 2.4vw 0;border-top: 1px solid #B8BFCA;}
+.article .section .recommend-section:first-child {border-top: 0;}
+.article .section .recommend-section .cover{margin-right:2.4vw}
+.article .section .recommend-section .cover img{display:block;width:30.4vw;height:30.4vw;border:1px solid #e1e1e1}
+.article .section .recommend-section .content {flex: 1;padding: 0}
+.article .section .recommend-section .content h3{margin: 0;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold;word-break: break-all;}
+.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw; word-break: break-all;}
+.article .section .recommend-section .content .question{height:10vw;margin:2.4vw 0}
+.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:2.6vw;line-height:5vw;color:#93979f}
+.article .section .recommend-section .content .question p:nth-child(2)~p{display: none}
+.article .section .recommend-section .content .tag-list{height:4.8vw;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.article .section .recommend-section .content .tag-list .tag{height:4.8vw;padding:0 1.2vw;margin-right:1.6vw;background:#fef6f3;border-radius:0.2vw;font-size:2.6vw;color:#e15616;line-height:4.8vw}
+.article .section .recommend-section .content .tag-list .tag:last-child{display:none}
+.article .section .recommend-section .content .dashed-line{display:none}
+.article .section .recommend-section .content .footer{height:8vw;font-size:2.6vw;color:#93979f;line-height:8vw}
+
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 100%;height: 100%;position: absolute;left: 0; top: 0;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 3.6vw;top: 3.6vw; z-index: 1; width: 7.2vw;height: 7.2vw;background: url(/img/activity/pc_close.png);background-size: 7.2vw;cursor: pointer;}
+
+}

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

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

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

@@ -0,0 +1,33 @@
+@media screen and (min-width:768px){main{background:#FAFAFA;-webkit-box-sizing:border-box;box-sizing:border-box;padding-bottom:40px;padding-top:24px;position:relative}
+    .bk-list-result{font-size:22px;color:#333;font-weight:bold;margin-bottom:24px}
+    .bk-list-result span{color:#F57C40}
+    .bk-list-empty{position:absolute;left:0;top:0;right:0;bottom:0;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;background:#fff;margin-top:80px;margin-bottom:48px}
+    .bk-list-empty img{display:block;width:180px;height:180px}
+    .bk-list-empty .bk-title{font-size:14px;color:#B2B2B2}
+    .bk-list{display:none;padding:0 32px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box}
+    .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:24px 0;border-bottom:1px solid #E0E7EB}
+    .bk-list .bk-list-item:last-child{border-bottom:0}
+    .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:260px;height:168px;-ms-flex-negative:0;flex-shrink:0}
+    .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%}
+    .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:24px}
+    .bk-list .bk-list-item .bk-info h2{font-size:18px;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;-webkit-transition:all .4s;-o-transition:all .4s;transition:all .4s}
+    .bk-list .bk-list-item .bk-info p{font-size:14px;color:#666666;margin-top:16px;height:48px;line-height:24px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info .bk-info-footer{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;font-size:14px;color:#B2B2B2;margin-top:40px}
+    .bk-list .bk-list-item:hover{cursor:pointer}
+    .bk-list .bk-list-item:hover h2{color:#F57C40}
+}
+
+@media screen and (max-width:768px){.bk-list-result{font-size:0.32rem;color:#333;background:#F7F7F7;padding:0 0.32rem;line-height:0.9rem}
+    .bk-list-result span{color:#F57C40}
+    .bk-list-empty{display:none;-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;padding-top:2.6rem}
+    .bk-list-empty img{display:block;width:3.2rem;height:3.2rem}
+    .bk-list-empty .bk-title{font-size:0.24rem;color:#B2B2B2}
+    .bk-list .bk-list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;padding:0.4rem 0.32rem}
+    .bk-list .bk-list-item::after{content:"";position:absolute;bottom:0;left:0.32rem;width:6.86rem;display:block;border-bottom:0.01rem solid #E0E7EB}
+    .bk-list .bk-list-item .bk-cover{position:relative;z-index:2;width:2.6rem;height:1.68rem;-ms-flex-negative:0;flex-shrink:0}
+    .bk-list .bk-list-item .bk-cover img{display:block;width:100%;height:100%;border-radius:0.08rem}
+    .bk-list .bk-list-item .bk-info{position:relative;z-index:2;-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0;margin-left:0.24rem}
+    .bk-list .bk-list-item .bk-info h2{font-size:0.32rem;color:#333333;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info p{font-size:0.26rem;color:#666666;margin-top:0.16rem;height:0.75rem;line-height:0.375rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .bk-list .bk-list-item .bk-info .bk-info-footer{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;font-size:0.22rem;color:#B2B2B2;margin-top:0.32rem}
+}

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

@@ -0,0 +1,39 @@
+.el-input .el-input__inner{height:36px;line-height:34px;border-radius:2px}
+.el-select .el-select__caret{line-height:36px}
+#globalHead.fiexd{position:sticky !important}
+.navLayout{min-height:calc(100vh - 185px - 785px) !important}
+.bk-container .right{position:relative}
+.bk-primary{color:#1890F9}
+.bk-success{color:#34CC8C}
+.bk-warning{color:#F9A94B}
+.bk-danger{color:#F94B4B}
+.bk-tip{font-size:12px;color:#E15616;position:absolute;right:0;top:-12px;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
+.bk-filter{padding:18px 20px;background:#fff}
+.bk-filter .bk-filter-row{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.bk-filter .bk-filter-row:nth-child(2){margin-top:18px}
+.bk-filter .bk-filter-row:nth-child(2) .bk-filter-control{margin-right:24px}
+.bk-filter .bk-filter-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:40px}
+.bk-filter .bk-filter-control .bk-label{-ms-flex-negative:0;flex-shrink:0}
+.bk-filter .bk-filter-control .bk-control{width:210px !important}
+.bk-filter .bk-filter-control .el-select{width:128px}
+.bk-filter .bk-filter-button{margin-left:16px}
+.bk-filter .bk-filter-control .bk-search-btn,.bk-filter .bk-filter-control .bk-add-btn{width:90px;height:36px;text-align:center;font-size:14px;border:0;cursor:pointer}
+.bk-filter .bk-filter-control .bk-search-btn{color:#fff;background:#E15616;line-height:36px}
+.bk-filter .bk-filter-control .bk-add-btn{color:#E15616;line-height:34px;border:1px solid #E15616;background:#FFE6DC;margin-left:16px}
+.bk-list{display:table;width:100%;margin-top:16px;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;font-size:12px;color:#22272E;text-align:center}
+.bk-list .bk-tr{display:table-row}
+.bk-list .bk-tr:nth-child(1) .bk-td{border-bottom:1px solid #E2E7EF}
+.bk-list .bk-td{display:table-cell;padding:16px 0}
+.bk-list .bk-td button{height:22px;padding:0 6px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:20px;color:#E15616;font-size:12px;border:1px solid #E15616;border-radius:2px;background:#FFE6DC;cursor:pointer}
+.bk-list .bk-td:nth-child(5),.bk-list .bk-td:nth-child(6){width:120px}
+.bk-list .bk-td:last-child{width:200px}
+.bk-pagination{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-column-gap:16px;-moz-column-gap:16px;column-gap:16px;padding:32px 0;font-size:14px}
+.bk-pagination .bk-pagesize{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.bk-pagination .bk-pagesize span,.bk-pagination .bk-pagesize i{display:block;height:40px;min-width:40px;padding:0 10px;line-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;border:1px solid #EBECEF;text-align:center;cursor:pointer}
+.bk-pagination .bk-pagesize i{min-width:initial;padding:0;border:0;background:transparent}
+.bk-pagination .bk-total{color:#93979F}
+.bk-pagination .bk-total span{color:#4A4F58}
+.bk-pagination .bk-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.bk-pagination .bk-control span{color:#93979F}
+.bk-pagination .bk-control button{display:inline;margin-left:16px;color:#E15616;background:transparent;font-size:14px;cursor:pointer}
+.bk-pagination .bk-control input{width:80px;height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:38px;border:1px solid #EBECEF;text-align:center;background:#fff;font-size:14px;margin:0 8px}

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

@@ -1,417 +1,55 @@
-"use strict";
-
-var scrollFlag = false;
-var navbarIndex = 0;
-var isPC = true;
-
-/**
- * 防抖
- * @param {*} func 执行数
- * @param {*} wait 等待时间
- * @param {*} immediate 是否立即执行
- * @returns
- */
-
-function debounce(func, wait, immediate) {
-    var timeout, result;
-    return function () {
-        var context = this;
-        var args = arguments;
-        if (timeout) clearTimeout(timeout);
-
-        if (immediate) {
-            var callNow = !timeout;
-            timeout = setTimeout(function () {
-                timeout = null;
-            }, wait);
-            if (callNow) result = func.apply(context, args);
-        } else {
-            timeout = setTimeout(function () {
-                func.apply(context, args);
-            }, wait);
-        }
-
-        return result;
-    };
-} // 还原滚动状态
-
-
-var resetScrollFlag = debounce(function () {
-    scrollFlag = false;
-}, 200);
-
-/**
- * 监听视窗大小
- * @param {*} size 视窗断点大小
- * @param {*} callback 回调
- */
-
-function responseScreen(size, callback) {
-    var isPc = isPC = $(window).width() > size; // callback(isPc)
-
-    $(window).resize(function () {
-        if (!isPc && $(this).width() > size) {
-            isPc = true;
-            callback(isPc);
-        } else if (isPc && $(this).width() < size) {
-            isPc = false;
-            callback(isPc);
-        }
-    });
-}
-
-/**
- * 菜单栏折叠展开 父子容器
- * @param {*} bindEl 触发事件的元素
- * @param {*} eventName 触发折叠的事件名
- * @param {*} callback 事件触发后的回调
- * 需要添加指向父标签的 data-collapse-parent-target="id" 属性
- * 需要添加指向子标签的 data-collapse-children-target="id" 属性
- */
-
-
-function collapseToggle(bindEl, eventName, callback) {
-    var isCollapse = false; // 获取元素
-
-    bindEl = $(bindEl);
-    var parent = $(bindEl.attr('data-collapse-parent-target'));
-    var children = $(bindEl.attr('data-collapse-children-target'));
-    parent.css('transition', 'height 0.4s'); // 获取父子容器高度
-
-    var parentHeight = parent.height();
-    var childrenHeight = children.height();
-    if (parentHeight >= childrenHeight) return bindEl.hide(); // 绑定点击事件
-
-    bindEl.on(eventName, function () {
-        var height = isCollapse ? parentHeight : childrenHeight;
-        parent.height(height); //为父元素重新设置高度
-
-        isCollapse = !isCollapse; // 执行回调
-
-        callback({
-            bindEl: bindEl,
-            parent: parent,
-            children: children,
-            height: height,
-            isCollapse: isCollapse
-        });
-    });
-}
-
-/**
- * 设置高亮
- * @param {*} selector 节点选择器
- * @param {*} index 被标记高亮的节点索引
- */
-
-
-var activeCategory = debounce(function (selector, index) {
-    if (!selector || typeof index !== 'number') return;
-    var activeWidth = 0;
-    var selectorList = selector.split(',');
-    $('.navigate li, .category-list li').removeClass('active');
-    selectorList.forEach(function (el) {
-        $(el.trim()).eq(index).addClass('active');
-        activeWidth = $(el.trim()).eq(index).width();
-    });
-    var offset = ($(window).width() - activeWidth) / 2;
-    categoryScrollTo('#category ul', 0, offset);
-}, 200);
-
-/**
- *
- * @param {*} el 监听的元素
- * @param {*} callback 回调
- */
-
-function stickyResponse(el) {
-    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var callback = arguments.length > 2 ? arguments[2] : undefined;
-    $(window).scroll(function () {
-        var scrollTop = $(this).scrollTop();
-
-        if (scrollTop >= offset) {
-            callback({
-                sticky: true,
-                scrollTop: scrollTop
-            });
-        } else {
-            callback({
-                sticky: false,
-                scrollTop: scrollTop
-            });
-        }
-    });
-}
-
-/**
- *
- * @param {*} offsetEls 需要获取的元素列表
- */
-
-
-function getScrollOffset(offsetEl) {
-    if (typeof offsetEl === 'string') {
-        return $(offsetEl).height();
+function useRem() {
+    let dw = 750 // 设计图宽度
+    let sw = window.innerWidth // 屏幕宽度
+    let fontSize = (sw / dw * 100)// 方案1
+    let oHtml = document.getElementsByTagName('html')[0]
+    if(sw > 768){
+        oHtml.style.fontSize = '16px'
+    }else{
+        oHtml.style.fontSize = fontSize + 'px'
     }
-
-    var height = 0;
-    offsetEl.forEach(function (el) {
-        height += $(el).height();
-    });
-    return height;
-}
-
-/**
- * 侧边栏点击跳转
- * @param {*} selector 侧边栏节点选择器
- * @param {*} floorEl 绑定的楼层节点选择器
- * @param {*} offset 滚动偏移
- * @param {*} callback 跳转后的回调
- */
-
-
-function bindCategory(selector, floorEl) {
-    var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    var callback = arguments.length > 3 ? arguments[3] : undefined;
-    $(selector).on('click', function () {
-        scrollFlag = true;
-        resetScrollFlag();
-        var index = $(this).index();
-        var floor = $(floorEl).eq(index);
-        if (!floor.length) return;
-        var floorTop = floor.offset().top - offset;
-        $('html ,body').animate({
-            scrollTop: floorTop
-        }, 400, 'linear', function () {
-            callback(index);
-        });
-    });
-}
-
-/**
- * 监听页面滚动并观察元素是否在滚动区间
- * @param {*} selector 被观察的元素节点选择器
- * @param {*} offset 滚动偏移
- * @param {*} callback 观察命中的回调
- */
-
-
-function pageScrollObserve(selector) {
-    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    var callback = arguments.length > 2 ? arguments[2] : undefined;
-    $(window).scroll(function () {
-        if (scrollFlag) return;
-        var scrollTop = $(this).scrollTop();
-
-        var selectorEl = $(selector);
-
-        if(selectorEl.length === 0){
-            return;
-        }
-
-        if (scrollTop < selectorEl.eq(0).offset().top - offset) {
-            callback(null, -1);
-            return
-        }
-
-        // console.log(scrollTop, selectorEl.last().offset().top - offset)
-
-        if(scrollTop > selectorEl.last().offset().top - offset){
-            callback(null, -1);
-            return
-        }
-
-        selectorEl.each(function (index, el) {
-            var offsetTop = $(el).offset().top - offset;
-            var height = $(el).height();
-
-            if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
-                callback(el, index);
-            }
-        });
-    });
 }
 
-/**
- * 动态生成侧边导航
- * @param {*} selector 从该节点元素中获取文本
- * @param {*} bindEl 生成的导航要挂载的节点
- */
-
-
-function makeNavigate(selector, bindEl) {
-    var ul = document.createElement('ul');
-    $(selector).each(function (index, el) {
-        var li = document.createElement('li');
-        var a = document.createElement('a');
-        a.innerText = $(el).text();
-        a.setAttribute('href', '#' + $(el).text());
-        li.appendChild(a);
-        if (index === 0) li.classList.add('active');
-        ul.appendChild(li);
-    });
-    $(bindEl).append(ul);
-}
-
-/**
- * 可折叠楼层
- * @param {*} options
- * root: '.floor', // 根节点元素
- * collapse: '.article', //可折叠元素节点
- * item: '.section', // 子元素节点
- * touch: '.more-btn', // 事件绑定元素节点
- * size: 6, // 每页最多显示的子元素个数
- * col: 3, // 每列最多显示的子元素个数
- * minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
- * open: function(floor){}
- * close: function(floor){}
- */
-
-
-function makeFloorList(options) {
-    var row = options.size / options.col; //每列显示的个数
-
-    var floorMap = [];
-    var minHeight = options.minHeight; // 最小高度
-
-    $(options.root).each(function (index, el) {
-        var floorInfo = floorMap[index] = Object.create(null);
-        var selector = floorInfo.$floor = $(el); // 当前楼层对象
-
-        floorInfo.count = selector.find(options.item).length; // 总数
-
-        floorInfo.step = Math.ceil(floorInfo.count / options.size); // 可展开步数
-
-        floorInfo.current = 1; // 当前步数
-
-        floorInfo.hasMore = floorInfo.count > options.size; // 是否还有更多
-        // 初始化高度，只有在可展开时设置初始高度
-
-        if (floorInfo.hasMore) {
-            floorInfo.height = minHeight * row * floorInfo.current;
-            selector.find(options.collapse).height(floorInfo.height);
-            selector.find(options.collapse).css({
-                overflow: 'hidden',
-                transition: 'height .4s'
-            });
-        }
-    }); // 为按钮绑定事件
-
-    floorMap.forEach(function (floor) {
-        if (!floor.hasMore) return floor.$floor.find(options.touch).parent().hide();
-        floor.$floor.find(options.touch).on('click', function () {
-            moreClick(floor);
-        });
-    }); // 查看更多
-
-    function moreClick(floor) {
-        if (floor.current === floor.step) return closeMore(floor); // 剩下的个数
-
-        var lastCount = floor.count - options.size * floor.current;
-        floor.current++;
-        floor.hasMore = floor.current < floor.step; // 如果还有更多
-
-        if (floor.hasMore || lastCount > 3) {
-            floor.$floor.find(options.collapse).height(minHeight * row * floor.current);
-        } else {
-            floor.$floor.find(options.collapse).height(minHeight * row * (floor.current - 1) + minHeight);
-        } // 展开回调
-
-
-        options.open(floor);
-    } // 全部收起
-
-
-    function closeMore(floor) {
-        floor.current = 1;
-        floor.hasMore = true;
-        floor.$floor.find(options.collapse).height(floor.height); // 收起回调
-
-        options.close(floor);
-    }
-} // 激活导航栏
-
-
-function activeNavbar(selector) {
-    var pathname = window.location.pathname.replace(/(-\d+){0,}(.html$)/g, '') + '.html';
-    selector = $(selector);
-    selector.each(function(index, el){
-        $(el).removeClass('active');
-        if($(el).find('a').length > 0){
-            var href = $(el).find('a').attr('href');
-            if(pathname.endsWith(href)){
-                $(el).addClass('active');
+$(function () {
+    useRem();
+    $(window).on('resize', function () {
+        useRem();
+    })
+    let menuActive = false
+    let searchActive = false
+    // 导航栏显示隐藏
+    $('.bk-collapse-btn,.bk-menu-name').on('click', function(){
+        if(searchActive) return
+        $('.bk-nav').slideToggle(200);
+        $(this).parent('.bk-menu').toggleClass('active');
+        $('body').toggleClass('hidden');
+        $('.bk-mask').toggle();
+        menuActive = !menuActive
+    })
+    // 搜索菜单
+    $('.bk-search-btn,.bk-search-close').on('click', function(){
+        if(menuActive) return
+        $('.bk-search-container').slideToggle(200);
+        $('body').toggleClass('hidden');
+        $('.bk-mask').toggle();
+        searchActive = !searchActive
+    })
+    // 发布百科
+    const isLogin = false
+    $('.bk-publish').on('click', function (){
+        if(isLogin) return
+        $('.bk-login').fadeIn()
+        const SlideVerifyPlug = window.slideVerifyPlug;
+        new SlideVerifyPlug('#slide-verify', {
+            initText: '请向右滑动滑块', //设置  初始的 显示文字
+            sucessText: '验证通过', //设置 验证通过 显示的文字
+            getSuccessState: (status) => {
+                console.log(status)
             }
-        }
+        })
     })
-}
-
-/**
- * 将导航滚动到激活位置
- * @param {*} selector 导航元素
- * @param {*} scrollLeft 指定位置
- * @param {*} offset 偏移
- * @returns
- */
-
-
-function categoryScrollTo(selector, scrollLeft) {
-    var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-    if ($(window).width <= 768) return;
-    selector = $(selector);
-    var sub = selector.children().eq(0).offset().left + offset;
-    scrollLeft = Math.ceil(selector.find('.active').offset().left - sub);
-    $(selector).animate({
-        scrollLeft: scrollLeft
-    }, 200, 'linear');
-} // 移动端绑定滑动事件
-
-
-function slideBarHandle(selector) {
-    var display = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'block';
-    if ($(window).width() > 768) return;
-    selector = $(selector);
-    var target = $(selector.attr('data-target'));
-    selector.on('click', function () {
-        target.slideDown();
-        target.css('display', display);
-    });
-    target.on('click', function () {
-        target.slideUp();
-    });
-}
-
-$(function () {
-    activeNavbar('.navbar .nav li');
-    slideBarHandle('#menuBtn', 'flex');
-    slideBarHandle('#hotKeyword');
-    responseScreen(768, function () {
-        window.location.reload();
-    });
-    // 搜索框内容为空时阻止表单提交
-    $('form').submit(function(){
-        const searchKeyword =  $('#searchKeyword');
-        const val = searchKeyword.val().trim();
-        searchKeyword.val(val);
-        if(!val) return false;
+    $('.bk-login .mask').click(function () {
+        $('.bk-login').fadeOut();
     });
+})
 
-    // init auto-input complete
-    new AutoComplete({
-        el: '.auto-input',
-        setValueFlag: true,
-        callback: async function(keyword){
-            try {
-                const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
-                if(!res.data) return [];
-                return res.data.map(item => item.keyword);
-            } catch (e) {
-                console.log(e);
-            }
-        },
-        itemClick: function (keyword) {
-            window.location.href = '/encyclopedia/search.html?linkageFlag=1&keyword=' + keyword;
-        }
-    });
-});

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

@@ -1,108 +1,32 @@
-"use strict";
-
-function initPreviewImage() {
-    var imageGroup = {};
-    var imageEls = document.querySelectorAll('.content');
-    if (imageEls.length <= 0) return;
-    imageEls.forEach(function (imageEl, index) {
-        imageGroup['cm-images-' + index] = new Viewer(imageEl);
-    });
-    console.log('初始化图片预览成功')
+function directory(container, flag = true) {
+    $('.bk-section').each(function (index, el) {
+        const hId = 'heading-' + index;
+        $(el).find('h2').attr('id', hId);
+        const name = flag ?  index + 1 + '、' + $(el).find('h2').text() : $(el).find('h2').text();
+        const li = $('<li><a href="javascript:void(0)" data-id="' + hId + '">' + name + '</a></li>');
+        $(container).append(li);
+        if (flag && $(el).find('h3').length > 0) {
+            const sUl = $(`<ul></ul>`)
+            $(li).append(sUl);
+            $(el).find('h3').each(function (i, h) {
+                const sId = hId + '-' + i
+                $(h).attr('id', sId)
+                const li = $('<li><a href="javascript:void(0)" data-id="' + sId + '">' + $(h).text() + '</a></li>');
+                $(sUl).append(li)
+            });
+        }
+    })
 }
 
 $(function () {
-    // 页面滚动偏移
-    var offset = 0;
-    var windowWidth = $(window).width();
-    var timer = null; // 定时器
-    var middleScreenWidth = 1450;
-    // 生成导航
-    makeNavigate('.section .title h2', '.navigate');
-    if (windowWidth > 768) {
-        offset = getScrollOffset('.navbar') + 10;
-    } else {
-        offset = getScrollOffset(['.navbar', '.navigate']) + 10;
-    }
-    // 侧边导航跳转
-    bindCategory('.navigate li', '.section', offset, function (index) {
-        activeCategory('.navigate li', index);
-    });
-    // 页面滚动观测
-    pageScrollObserve('.section', offset, function (el, index) {
-        if (index > -1) {
-            activeCategory('.navigate li', index);
-        }
-    });
-    // 常见问题展开收起
-    $('[data-toggle="collapse"]').each(function (index, el) {
-        var targetEl = $(el).attr('data-target');
-        if (!targetEl) return;
-        $(targetEl).hide();
-        $(el).on('click', function () {
-            $(targetEl).toggle();
-            $(el).toggleClass('arrowup');
-        });
-    });
-
-    $('#contactPopupBtn').on('click', function () {
-        $('#contactPopup').show();
-    });
-    $('#contactPopupClose').on('click', function () {
-        $('#contactPopup').hide();
-    });
-
-    // 切换显示侧边导航
-    function toggleNavigate(selector, time, maxWidth, offset) {
-        selector = $(selector);
-        if (windowWidth <= middleScreenWidth) {
-            selector.hide();
-        }
-        // 鼠标移动事件
-        $('body').on('mousemove', function (e) {
-            var width = $(this).width();
-            if (!(e.clientX > width - offset && width <= maxWidth)) return;
-            clearTimeout(timer);
-            selector.fadeIn();
-            timer = setTimeout(function () {
-                selector.fadeOut();
-            }, time)
-        });
-        // 窗口大小改变
-        $(window).resize(function () {
-            if ($(this).width() <= maxWidth) {
-                selector.hide();
-            } else {
-                selector.show();
-            }
-        });
-    }
-    initPreviewImage()
-    // toggleNavigate('.navigate', 1000, middleScreenWidth, 80);
-
-    // 视频播放
-    $('.related-video .video-control .play').on('click', function(){
-        var videoUrl = $(this).siblings('video').attr('src');
-        $('#video-popup video').attr('src', videoUrl);
-        $('#video-popup').show();
+    directory('#bk-directory-pc', true)
+    directory('#bk-directory-mobile', false)
+    $('.bk-directory-list').find('a').on('click', function(){
+        const id = '#' + $(this).attr('data-id');
+        const scrollTop = innerWidth > 768 ? $(id).offset().top - $('header').height() : $(id).offset().top - $('header').height() - $('.bk-directory').height();
+        $("html, body").animate({
+            scrollTop: scrollTop
+        }, {duration: 500, easing: "swing"});
+        return false;
     })
-    $('#video-popup .close').on('click', function(){
-        $(this).parents('#video-popup').hide();
-    });
-});
-//百科
-var encyclopedia = new Vue({
-    el: "#encyclopedia",
-    mixins: [cmSysVitaMixins],
-    data: {
-
-    },
-    methods: {},
-    created: function () {
-        // 行为轨迹统计
-        this.cmSysParams.pageType = 12;
-        this.cmSysParams.pageLabel =  $('#discription').text();
-    },
-    mounted: function () {
-
-    }
-});
+})

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

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

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

@@ -0,0 +1,108 @@
+"use strict";
+
+function initPreviewImage() {
+    var imageGroup = {};
+    var imageEls = document.querySelectorAll('.content');
+    if (imageEls.length <= 0) return;
+    imageEls.forEach(function (imageEl, index) {
+        imageGroup['cm-images-' + index] = new Viewer(imageEl);
+    });
+    console.log('初始化图片预览成功')
+}
+
+$(function () {
+    // 页面滚动偏移
+    var offset = 0;
+    var windowWidth = $(window).width();
+    var timer = null; // 定时器
+    var middleScreenWidth = 1450;
+    // 生成导航
+    makeNavigate('.section .title h2', '.navigate');
+    if (windowWidth > 768) {
+        offset = getScrollOffset('.navbar') + 10;
+    } else {
+        offset = getScrollOffset(['.navbar', '.navigate']) + 10;
+    }
+    // 侧边导航跳转
+    bindCategory('.navigate li', '.section', offset, function (index) {
+        activeCategory('.navigate li', index);
+    });
+    // 页面滚动观测
+    pageScrollObserve('.section', offset, function (el, index) {
+        if (index > -1) {
+            activeCategory('.navigate li', index);
+        }
+    });
+    // 常见问题展开收起
+    $('[data-toggle="collapse"]').each(function (index, el) {
+        var targetEl = $(el).attr('data-target');
+        if (!targetEl) return;
+        $(targetEl).hide();
+        $(el).on('click', function () {
+            $(targetEl).toggle();
+            $(el).toggleClass('arrowup');
+        });
+    });
+
+    $('#contactPopupBtn').on('click', function () {
+        $('#contactPopup').show();
+    });
+    $('#contactPopupClose').on('click', function () {
+        $('#contactPopup').hide();
+    });
+
+    // 切换显示侧边导航
+    function toggleNavigate(selector, time, maxWidth, offset) {
+        selector = $(selector);
+        if (windowWidth <= middleScreenWidth) {
+            selector.hide();
+        }
+        // 鼠标移动事件
+        $('body').on('mousemove', function (e) {
+            var width = $(this).width();
+            if (!(e.clientX > width - offset && width <= maxWidth)) return;
+            clearTimeout(timer);
+            selector.fadeIn();
+            timer = setTimeout(function () {
+                selector.fadeOut();
+            }, time)
+        });
+        // 窗口大小改变
+        $(window).resize(function () {
+            if ($(this).width() <= maxWidth) {
+                selector.hide();
+            } else {
+                selector.show();
+            }
+        });
+    }
+    initPreviewImage()
+    // toggleNavigate('.navigate', 1000, middleScreenWidth, 80);
+
+    // 视频播放
+    $('.related-video .video-control .play').on('click', function(){
+        var videoUrl = $(this).siblings('video').attr('src');
+        $('#video-popup video').attr('src', videoUrl);
+        $('#video-popup').show();
+    })
+    $('#video-popup .close').on('click', function(){
+        $(this).parents('#video-popup').hide();
+    });
+});
+//百科
+var encyclopedia = new Vue({
+    el: "#encyclopedia",
+    mixins: [cmSysVitaMixins],
+    data: {
+
+    },
+    methods: {},
+    created: function () {
+        // 行为轨迹统计
+        this.cmSysParams.pageType = 12;
+        this.cmSysParams.pageLabel =  $('#discription').text();
+    },
+    mounted: function () {
+
+    }
+});

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

@@ -0,0 +1,6 @@
+const list = new Vue({
+    el: '#list',
+    data: {
+        isPC: window.innerWidth > 768
+    }
+})

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

@@ -4,32 +4,54 @@
 <head>
     <meta charset="UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>采美百科-联系我们</title>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/contact.css(v=${version})}"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+    <title>采美百科-关于百科</title>
+    <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/about.css(v=${version})}">
 </head>
 <body>
-<!-- 引用公共头部 -->
+<!-- 顶部公共区域 -->
 <template th:replace="encyclopedia/components/header"></template>
-<!-- 页面标题 -->
-<div class="page-title">
-    <div class="container">
-        <div class="title">
-            <h2>关于我们</h2>
-            <div class="line"></div>
+<!-- 顶部公共区域 end -->
+
+<main>
+    <div class="bk-banner">
+        <img src="/img/encyclopedia/assets/pc-bg-desc.png" class="only-pc">
+        <img src="/img/encyclopedia/assets/h5-bg-desc.png" class="only-mobile">
+        <div class="bk-container">
+            <div class="bk-title">采美百科简介</div>
+            <div class="bk-subtitle">introduction</div>
         </div>
-        <p class="subtitle"><span></span>about us</p>
     </div>
-</div>
-<div class="contact container">
-    <div class="content">
-
+    <div class="bk-about bk-container">
+        <h2>医美正品一站式采购平台</h2>
+        <p>采美365网，是一家集美业仪器、产品采购交易和信息咨询为一体的一站式B2B服务平台，另设有针对C端的线上商城。 平台集合了各类美业资源及多方优质供应商，不仅能满足生活美
+            容院、高级医美会所、医疗美容机构对产品、光电仪器、易耗品的采购需求，还能提供专业的产品信息咨询服务，包括仪器对比、配套信息，仪器查找、项目合作洽谈，专业高端药妆
+            产品采购，高端SPA产品采购，正品仪器采购，涵盖生美、医美等专业线产品。</p>
+        <h2>一站式采购交易服务</h2>
+        <p>采美365网整合美容行业上中下游商家资源，紧跟市场热销产品/仪器风向，提供一站式采购交易服务，包括市场热销产品/仪器。平台具有互联网药品信息服务资格证和医疗器械网络交
+            易服务第三方平台备案，聚集了100多个国际国内知名美业企业 ，包括美国科医人Lumenis、美国赛诺龙、德国采曼医疗ZIMMER、韩国CHOWIS、韩国恩盛国际、韩国再希思Jeisys、
+            北京元泰、华熙生物、成都肌本演绎、上海优斐斯、韩国德玛莉...等等，包括医疗、非医疗美容产品和仪器设备，能够一站式满足医疗美容机构、生活美容机构和新兴皮肤管理中心的
+            各种采购需求。</p>
+        <h2>美业新媒体，专业知识与行业热点——为信息传播 推波助澜</h2>
+        <p>采美365网旗下【信息中心】栏目，提供仪器/产品/项目的专业知识，以及最新行业热点/新闻的分享。让您第一时间获悉美业新资讯、了解最新热门仪器产品、学习仪器知识。截止
+            2019年2月，本栏目已收录5758篇专业文章，站内总阅读量高达80万。此外，采美365网进驻各大自媒体平台，包括：微信公众平台、新浪微博、搜狐公众平台、今日头条、小红书、
+            知乎、悟空问答、微信视频号、抖音...等；总阅读已超千万。</p>
+        <h2>正品联盟——做健康可持续发展美业</h2>
+        <p>2016年，采美365网携手国内外优质供应商成立采美正品联盟，以“坚持正品”为理念，打造以正品仪器、产品为导向的正能量美业市场。帮助正品联盟品牌集中进行行业营销降低
+            成本；搭建部分流程自动化、标准化的电商平台。</p>
+        <h2>采美正品联盟的特点：</h2>
+        <ul>
+            <li>(1) 携手国内外优质伙伴共同打造，为正品代言</li>
+            <li>(2) 保证产品质量 保证交易安全 保证价格优势</li>
+            <li>(3) 凝聚大品牌，凭借品牌影响力进行信用担保，共同营造良好的美业生态环境</li>
+        </ul>
     </div>
-</div>
-<!-- 引用公共底部 -->
+</main>
+
+<!-- 底部区域 -->
 <template th:replace="encyclopedia/components/footer"></template>
+<!-- 底部区域 end -->
 </body>
 </html>

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

@@ -1,22 +1,16 @@
-<!-- 底部 -->
-<footer class="copyright" >
-    <div class="container">
-        <p>
-            <img class="icp" src="/img/encyclopedia/icon-icp@2x.png" width="18" height="18" alt="粤B1-20160129"/>
-            <span>粤B1-20160129</span><span>备案号</span>
-            <a href="https://beian.miit.gov.cn">粤ICP备14019824号</a>
-            <span class="br">互联网药品信息服务资格证编号(粤)-非经营性-2021-0339</span>
-            <span class="br">中华人民共和国增值电信业务经营许可证</span>
+<footer>
+    <div class="bk-footer">
+        <h2><span>友情链接：</span><a href="https://www.caimei365.com/" target="_blank">采美商城</a></h2>
+        <p class="beian"><i></i><span>粤B1-20160129</span><span>备案号</span><a href="http://www.acebelleshenzhen.com/">粤ICP备14019824号</a><br
+                class="only-mobile"><span>互联网药品信息服务资格证编号(粤)-非经营性-2021-0339</span><br
+                class="only-mobile"><span>中华人民共和国增值电信业务经营许可证</span>
         </p>
-        <p>Copyright © 2015-2021 CAIMEI365.com All Rights Reserved 深圳市采美网络信息有限公司</p>
+        <p class="copyright">Copyright © 2015-2022 CAIMEI365.com All Rights Reserved <br
+                class="only-mobile">深圳市采美信息技术有限公司</p>
     </div>
 </footer>
-<!-- 底部公共js -->
-<script src="/lib/jquery-3.6.0.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/vue2.6.12.min.js"></script>
-<script charset="utf-8" type="text/javascript" src="/lib/jquery.slide-2.1.3.js"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/utils.service.js(v=${version})}"></script>
-<script th:src="@{/js/auto-input.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/base.js(v=${version})}"></script>
-<script th:src="@{/js/encyclopedia/common.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>
+
+<div class="bk-mask" style="display: none"></div>
+
+<script type="text/javascript" src="/lib/jquery-3.6.0.min.js"></script>
+<script th:src="@{/js/encyclopedia/common.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>

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

@@ -1,44 +1,46 @@
-<!-- 头部导航 -->
-<header class="navbar" xmlns:th="https://www.thymeleaf.org">
-    <input type="hidden" th:value="${coreServer}" id="coreServer">
-    <input type="hidden" th:value="${agent}" id="userAgent">
-    <div class="container">
-        <div class="logo">
-            <div class="menu-btn" id="menuBtn" data-target="#menuNav" data-colse="#menuColseBtn">
-                <i class="icon menu"></i>
+<header xmlns:th="https://www.thymeleaf.org">
+    <div class="bk-header">
+        <div class="bk-container">
+            <div class="bk-logo">
+                <a href="/encyclopedia/list.html" title="采美百科">
+                    <h1>采美百科</h1>
+                    <img src="/img/encyclopedia/assets/pc-logo.png" alt="采美百科" class="only-pc"/>
+                    <img src="/img/encyclopedia/assets/h5-logo.png" alt="采美百科" class="only-mobile"/>
+                </a>
             </div>
-            <a href="/">
-                <h1>采美百科丰富的百科文库</h1>
-                <img src="/img/encyclopedia/logo.png" alt="采美百科"/>
-            </a>
-        </div>
-        <ul class="nav" id="menuNav">
-            <li class="active"><a href="product.html">产品百科</a></li>
-            <li><a href="instrument.html">仪器百科</a></li>
-<!--            <li><a href="about.html">关于采美百科</a></li>-->
-            <li><a href="contact.html">联系我们</a></li>
-            <li><span class="nav-close" id="#menuColseBtn"></span></li>
-        </ul>
-        <div class="search">
-            <div class="search-control auto-input">
-                <form action="search.html">
-                    <input type="text" id="searchKeyword" class="search-input" name="keyword" placeholder="请输入产品/仪器名称" autocomplete="off"/>
-                    <button class="search-btn">搜索</button>
-                </form>
-                <button class="hot-keyword" id="hotKeyword" data-target="#hotKeywords">热搜词</button>
+            <div class="only-mobile bk-menu">
+                <span class="bk-search-btn"></span>
+                <span class="bk-menu-name">菜单</span>
+                <span class="bk-collapse-btn"></span>
             </div>
-            <div class="keywords" id="hotKeywords">
-                <span class="close-btn icon close"></span>
-                <span>热门搜索：</span>
-                <!--跳转方式：1仅搜索，2产品，3仪器，4链接-->
-                <th:block th:each="item,stat: ${searchHotWord}" th:object="${item}">
-                    <a th:href="*{'search.html?keyword=' + keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
-                    <a th:href="*{'product-' + productId + '.html'}" th:if="*{jumpType eq 2}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
-                    <a th:href="*{'instrument-' + productId + '.html'}" th:if="*{jumpType eq 3}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
-                    <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
-                    <em th:if="${stat.size gt 1 and stat.size ne stat.index + 1}">/</em>
-                </th:block>
+            <div class="bk-search-container">
+                <div class="bk-search-menu only-mobile">
+                    <span class="bk-name">菜单</span>
+                    <span class="bk-search-close"></span>
+                </div>
+                <form method="get" action="/encyclopedia/search.html">
+                    <div class="bk-search-control">
+                        <label><input type="text" placeholder="搜索词条"/></label>
+                        <button type="submit">搜索</button>
+                    </div>
+                </form>
+                <ul class="bk-hot-keyword">
+                    <li><a href="#">MD果酸</a></li>
+                    <li><a href="#">无针水光</a></li>
+                    <li><a href="#">光子嫩肤</a></li>
+                    <li><a href="#">光子嫩肤</a></li>
+                </ul>
             </div>
         </div>
     </div>
-</header>
+    <div class="bk-nav">
+        <ul class="bk-navbar bk-container">
+            <li class="active"><a href="#">抗衰除皱</a></li>
+            <li><a href="#">术后修复</a></li>
+            <li><a href="#">光子嫩肤</a></li>
+            <li><a href="#">瘦身美容</a></li>
+            <li><a href="#">易耗品</a></li>
+            <li><a href="/encyclopedia/about.html">走进百科</a></li>
+        </ul>
+    </div>
+</header>

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

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+    <title>采美百科-百科详情</title>
+    <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
+    <link rel="stylesheet" href="/lib/swiper.min.css">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/detail.css(v=${version})}">
+    <script type="text/javascript" src="/lib/swiper.min.js"></script>
+</head>
+<body>
+<!-- 顶部公共区域 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 顶部公共区域 end -->
+
+<main>
+    <div class="bk-banner">
+        <img src="/img/encyclopedia/assets/pc-banner-detail.png" alt="采美百科" class="only-pc"/>
+        <img src="/img/encyclopedia/assets/h5-banner-detail.png" alt="采美百科" class="only-mobile"/>
+        <div class="bk-container only-pc">
+            <div class="bk-name">透明质酸</div>
+        </div>
+    </div>
+    <div class="bk-detail bk-container">
+        <div class="only-mobile bk-entry-name">
+            <div class="bk-name">透明质酸</div>
+        </div>
+        <div class="bk-detail-left">
+            <div class="bk-name">玻尿酸</div>
+            <div class="bk-overview">透明质酸，又称玻尿酸，分子式是(C14H21NO11)n，是D-葡萄糖醛酸及N-乙酰葡糖胺组成的双糖单位糖胺聚糖。</div>
+            <div class="bk-information only-pc">
+                <div class="bk-row">
+                    <div class="bk-label">中文名</div>
+                    <div class="bk-content">透明质酸</div>
+                    <div class="bk-label">化学式</div>
+                    <div class="bk-content">(C14H21NO11)n</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">外文名</div>
+                    <div class="bk-content">hyaluronic acid</div>
+                    <div class="bk-label">CAS登录号</div>
+                    <div class="bk-content">9004-61-9</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">别名</div>
+                    <div class="bk-content">玻尿酸</div>
+                    <div class="bk-label">安全性描述</div>
+                    <div class="bk-content">S22；S24/25</div>
+                </div>
+            </div>
+            <div class="bk-information only-mobile">
+                <div class="bk-row">
+                    <div class="bk-label">中文名</div>
+                    <div class="bk-content">透明质酸</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">化学式</div>
+                    <div class="bk-content">(C14H21NO11)n</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">外文名</div>
+                    <div class="bk-content">hyaluronic acid</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">CAS登录号</div>
+                    <div class="bk-content">9004-61-9</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">别名</div>
+                    <div class="bk-content">玻尿酸</div>
+                </div>
+                <div class="bk-row">
+                    <div class="bk-label">安全性描述</div>
+                    <div class="bk-content">S22；S24/25</div>
+                </div>
+            </div>
+            <div class="only-mobile bk-relevant">
+                <div class="bk-album">
+                    <div class="bk-title">透明质酸的概述图册</div>
+                    <div class="bk-album-list">
+                        <div class="bk-album-item"><img src="https://picsum.photos/280/220?random=1"></div>
+                        <div class="bk-album-item"><img src="https://picsum.photos/280/220?random=2"></div>
+                        <div class="bk-album-item"><img src="https://picsum.photos/280/220?random=3"></div>
+                    </div>
+                </div>
+                <div class="bk-company">
+                    <div class="bk-cover"><img src="https://picsum.photos/280/220?random=4"></div>
+                    <div class="bk-title">上海品辉医疗科技有限公司</div>
+                </div>
+                <div class="bk-directory">
+                    <div class="bk-title">导航<span>></span></div>
+                    <ul class="bk-directory-list" id="bk-directory-mobile"></ul>
+                </div>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>主要成分</h2>
+                    <div class="line"></div>
+                </div>
+                <p>
+                    透明质酸是一种酸性粘多糖，1934年美国哥伦比亚大学眼科教授Meyer等首先从牛眼玻璃体中分离出该物质。透明质酸以其独特的分子结构和理化性质在机体内显示出多种重要的生理功能，如润滑关节，调节血管壁的通透性，调节蛋白质，水电解质扩散及运转，促进创伤愈合等。</p>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>名称</h2>
+                    <div class="line"></div>
+                </div>
+                <p>透明质酸，又名玻尿酸，hyaluronic acid的hyal 意思是像玻璃一样的、光亮透明的，而uronicacid指的是</p>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>主要用途</h2>
+                    <div class="line"></div>
+                </div>
+                <p>具有较高临床价值的生化药物，广泛应用于各类眼科手术，如晶体植入、角膜移植和抗青光眼手术等。还可用于治疗关节炎和加速
+                    伤口愈合。将其用于化妆品中，能起到独特的保护皮肤作用，可保持皮肤滋润光滑、细腻柔嫩、富有弹性，具有防皱、抗皱、美容保健
+                    和恢复皮肤生理功能的作用。</p>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>美容作用</h2>
+                    <div class="line"></div>
+                </div>
+                <h3>去除皱纹</h3>
+                <p>1、透明质酸美容应用于皱眉纹（眉间纹）及鱼尾纹过度凹陷之皱眉纹，单以肉毒素注射时，往往无法得到满意的效果，并用透明质
+                    酸注射时，效果会更佳。</p>
+                <p>2、透明质酸美容应用于嘴角纹嘟嘴时所产生的纹路，虽属动态纹路，用透明质酸将凹陷之纹路予以填补，即有不错之效果。</p>
+                <p>3、透明质酸美容应用于法令纹（鼻唇沟）法令纹的消除，是透明质酸除皱作用中最常使用的目的。依照皱鼻纹的深浅依皱纹深浅程
+                    度与部位，一般约需2针大分子之注射量，注射部位包括外侧鼻翼凹陷处、法令纹本身与嘴唇外侧下方。</p>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>注射注意事项</h2>
+                    <div class="line"></div>
+                </div>
+                <h3>1、注射前注意事项：</h3>
+                <p>在治疗前，请保持肌肤的清洁，任何化妆品和护肤品都需要清洁干净。建议使用洁面乳和收敛水来清洁皮肤。使用冷水清洁，以便
+                    毛孔收缩。强烈建议患者在治疗前至少3-4天内，不要服用消炎药(如阿司匹林等)，因为其有可能会加剧注射部位出血和肿胀。</p>
+                <h3>2、注射后注意事项：</h3>
+                <p>在注射治疗后，请保持面部放松，勿做过多的面部表情。在治疗后至少两周内，请避免接触高热环境(如桑拿等)，因其可能会导致面
+                    部注射的透明质酸被很快分解，从而缩短填充效果。请勿触摸或按摩注射部位。</p>
+                <h3>3、不良反应：</h3>
+                <p>皮肤出现炎性反应，通常伴随按压痛感，持续一周左右，注射部位暂时性肿胀，持续的不良反应请立刻通知注射医生。</p>
+            </div>
+            <div class="bk-section">
+                <div class="bk-title"><h2>辨别真假产品</h2>
+                    <div class="line"></div>
+                </div>
+                <p>市面上出售的容易与透明质酸混淆的微整形注射填充材料，一般有五种，包括：奥美定(或英捷尔法乐)、硅胶油、石蜡油、纤维素、
+                    胶原蛋白。有一种简单识别奥美定的方法--有些含有奥美定的“透明质酸”绝大多数是在美容院销售和一些无资质的整形医生自带到美
+                    容院给美容院的客人注射，一个在美容院注射针剂，颞部是在针剂注射后表现的是浮肿状态，这就是奥美定的表现，满街都是假的透明
+                    质酸和胶原蛋白，不法分子用低价格博得了一些低消费能力的求美者青睐，结果受骗上当，所以需要很好的鉴别。</p>
+            </div>
+            <div class="bk-literature">
+                <div class="bk-title">
+                    <div>参考资料</div>
+                    <div class="line"></div>
+                </div>
+                <ul class="bk-literature-list">
+                    <li>[1] 王镜岩、朱胜庚、徐长法．生物化学：高等教育出版社，2002</li>
+                    <li>[2] 透明质酸．化源网[引用日期2022-10-18]</li>
+                    <li>[3] 谢仕斌，姚集鲁，郑荣琴等. 血清透明质酸，Ⅲ型前胶原，Ⅳ型胶原水平与肝纤维化的关系．《 中华传染病杂志 》，1999</li>
+                    <li>[4] 透明质酸．化源网[引用日期2022-10-18]</li>
+                </ul>
+            </div>
+            <div class="bk-pv">
+                <div class="bk-pv-item">浏览次数：<span>35</span></div>
+                <div class="bk-pv-item">2022-12-12</div>
+            </div>
+        </div>
+        <div class="bk-detail-right only-pc">
+            <div class="bk-album">
+                <div class="swiper-container" id="album">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide"><img src="https://picsum.photos/280/220?random=1"></div>
+                        <div class="swiper-slide"><img src="https://picsum.photos/280/220?random=2"></div>
+                        <div class="swiper-slide"><img src="https://picsum.photos/280/220?random=3"></div>
+                    </div>
+                    <div class="swiper-pagination"></div>
+                </div>
+                <div class="bk-title">透明质酸的概述图册</div>
+            </div>
+            <div class="bk-company">
+                <img src="https://picsum.photos/280/220?random=4">
+                <div class="bk-title">上海品辉医疗科技有限公司</div>
+            </div>
+            <div class="bk-directory">
+                <div class="bk-title">文章目录</div>
+                <div class="bk-content">
+                    <ul class="bk-directory-list" id="bk-directory-pc"></ul>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</main>
+
+<!-- 底部区域 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<!-- 底部区域 end -->
+<script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>
+<script type="text/javascript">
+    new Swiper('#album', {
+        pagination: {
+            el: '.swiper-pagination'
+        }
+    })
+</script>
+</body>
+</html>

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

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+    <title>采美百科</title>
+    <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/list.css(v=${version})}">
+</head>
+<body>
+<!-- 顶部公共区域 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 顶部公共区域 end -->
+
+<main>
+    <!-- banner区域 -->
+    <div class="bk-banner">
+        <img src="/img/encyclopedia/assets/pc-banner.png" alt="采美百科" class="only-pc">
+        <img src="/img/encyclopedia/assets/h5-banner.png" alt="采美百科" class="only-mobile">
+    </div>
+    <!-- banner区域 end -->
+    <!-- 百科列表区域 -->
+    <div class="bk-list bk-container">
+        <a href="/encyclopedia/detail-1.html" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
+            </div>
+        </a>
+        <a href="#" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
+            </div>
+        </a>
+        <a href="#" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
+            </div>
+        </a>
+    </div>
+    <!-- 百科列表区域 end -->
+</main>
+
+<!-- 底部区域 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<!-- 底部区域 end -->
+
+<!-- 发布词条 -->
+<div class="bk-publish"></div>
+
+<!-- 登录框 -->
+<div class="bk-login" style="display: none">
+    <div class="mask"></div>
+    <div class="bk-login-container">
+        <div class="bk-tip">欢迎登录~</div>
+        <div class="bk-name">采美百科平台</div>
+        <form>
+            <div class="bk-input"><label><input id="username" name="username" placeholder="请登录您的供应商账号"/></label></div>
+            <div class="bk-input"><label><input id="password" name="password" placeholder="请输入密码"/></label></div>
+            <div class="verify-wrap" id="slide-verify"></div>
+            <button>登陆</button>
+        </form>
+        <div class="bk-tools">
+            <a href="#">免费注册</a>
+            <a href="#">忘记密码</a>
+        </div>
+        <div class="bk-agreement">
+            <input type="checkbox" id="agreement"/>
+            <label for="agreement"></label>
+            <span>请仔细阅读<a href="#">《采美百科协议》</a></span>
+        </div>
+    </div>
+</div>
+
+<script type="text/javascript" src="/lib/slideVerify.js"></script>
+</body>
+</html>

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

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

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

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

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

@@ -0,0 +1,44 @@
+<!-- 头部导航 -->
+<header class="navbar" xmlns:th="https://www.thymeleaf.org">
+    <input type="hidden" th:value="${coreServer}" id="coreServer">
+    <input type="hidden" th:value="${agent}" id="userAgent">
+    <div class="container">
+        <div class="logo">
+            <div class="menu-btn" id="menuBtn" data-target="#menuNav" data-colse="#menuColseBtn">
+                <i class="icon menu"></i>
+            </div>
+            <a href="/">
+                <h1>采美百科丰富的百科文库</h1>
+                <img src="/img/encyclopedia/logo.png" alt="采美百科"/>
+            </a>
+        </div>
+        <ul class="nav" id="menuNav">
+            <li class="active"><a href="product.html">产品百科</a></li>
+            <li><a href="instrument.html">仪器百科</a></li>
+<!--            <li><a href="about.html">关于采美百科</a></li>-->
+            <li><a href="contact.html">联系我们</a></li>
+            <li><span class="nav-close" id="#menuColseBtn"></span></li>
+        </ul>
+        <div class="search">
+            <div class="search-control auto-input">
+                <form action="search.html">
+                    <input type="text" id="searchKeyword" class="search-input" name="keyword" placeholder="请输入产品/仪器名称" autocomplete="off"/>
+                    <button class="search-btn">搜索</button>
+                </form>
+                <button class="hot-keyword" id="hotKeyword" data-target="#hotKeywords">热搜词</button>
+            </div>
+            <div class="keywords" id="hotKeywords">
+                <span class="close-btn icon close"></span>
+                <span>热门搜索：</span>
+                <!--跳转方式：1仅搜索，2产品，3仪器，4链接-->
+                <th:block th:each="item,stat: ${searchHotWord}" th:object="${item}">
+                    <a th:href="*{'search.html?keyword=' + keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{'product-' + productId + '.html'}" th:if="*{jumpType eq 2}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{'instrument-' + productId + '.html'}" th:if="*{jumpType eq 3}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}" th:title="*{keyWord}"></a>
+                    <em th:if="${stat.size gt 1 and stat.size ne stat.index + 1}">/</em>
+                </th:block>
+            </div>
+        </div>
+    </div>
+</header>

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

@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <meta charset="UTF-8"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>采美百科搜索页面</title>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/pagination.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+</head>
+<body>
+<!-- 引用公共头部 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 分类楼层 -->
+<div class="floor container search-floor" id="search">
+    <p class="search-title">为您找到相关结果<span v-text="totalRecord"></span>条</p>
+    <div class="emtyp" v-if="totalRecord <= 0">
+        <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
+        <p>未找到相关结果！</p>
+    </div>
+    <article class="article" v-else>
+        <section class="section" v-for="(item, index) in searchList" :key="index">
+            <a :href="item | formatUrl">
+                <div class="cover">
+                    <img :src="item.image" :alt="item.name"/>
+                </div>
+                <div class="content">
+                    <h3 v-html="formatFromKeyword(item.name)"></h3>
+                    <div class="title" v-text="item.discription"></div>
+                    <div class="question">
+                        <p v-for="question in item.questionList" v-html="formatFromKeyword(question)"></p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span v-text="item.publishTime"></span></time>
+                        <span>浏览量：<span v-text="item.pv"></span></span>
+                    </footer>
+                </div>
+            </a>
+        </section>
+    </article>
+
+    <!--页码-->
+    <div class="pagination-container" v-if="totalPage > 1">
+        <ul class="pagination">
+            <!--左侧固定-->
+            <li v-if="listQuery.pageNum > 1"><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
+            <li v-if="pagination[0] > 1"><a href="#" @click.prevent="pageChange(1)">1</a></li>
+            <li class="ellipsis" v-if="pagination[0] > 2"><span>···</span></li>
+            <!--可变动-->
+            <template v-for="num in pagination">
+                <li :class="{ active: listQuery.pageNum === num }" v-if="num >= 1  && num <= totalPage">
+                    <a href="#" @click.prevent="pageChange(num)" v-text="num"></a>
+                </li>
+            </template>
+            <!--右侧固定-->
+            <li class="ellipsis" v-if="pagination[pagination.length - 1] < totalPage - 1"><span>···</span></li>
+            <li v-if="pagination[pagination.length - 1] < totalPage">
+                <a href="#" @click.prevent="pageChange(totalPage)" v-text="totalPage"></a>
+            </li>
+            <li v-if="listQuery.pageNum < totalPage" :class="{ active: listQuery.pageNum === totalPage }">
+                <a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a>
+            </li>
+        </ul>
+        <div class="tool">
+            <div class="total">共<span v-text="totalPage"></span>页</div>
+            <div class="jump">
+                <div class="pagenum-input">跳至<input type="text" v-model="jumpInput"/>页</div>
+                <a href="#" class="jump-btn" @click.prevent="pageChange(jumpInput)">点击跳转</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引用公共底部 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<script src="/lib/vue2.6.12.min.js"></script>
+<script th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script th:src="@{/js/common/serviceapi/encyclopedia.service.js(v=${version})}"></script>
+<script th:src="@{/js/encyclopedia/search.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -4,89 +4,53 @@
 <head>
     <meta charset="UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>采美百科搜索页面</title>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/pagination.css(v=${version})}"/>
-    <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+    <title>采美百科-搜索页面</title>
+    <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/search.css(v=${version})}">
 </head>
 <body>
-<!-- 引用公共头部 -->
+<!-- 顶部公共区域 -->
 <template th:replace="encyclopedia/components/header"></template>
-<!-- 分类楼层 -->
-<div class="floor container search-floor" id="search">
-    <p class="search-title">为您找到相关结果<span v-text="totalRecord"></span>条</p>
-    <div class="emtyp" v-if="totalRecord <= 0">
-        <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
-        <p>未找到相关结果！</p>
-    </div>
-    <article class="article" v-else>
-        <section class="section" v-for="(item, index) in searchList" :key="index">
-            <a :href="item | formatUrl">
-                <div class="cover">
-                    <img :src="item.image" :alt="item.name"/>
-                </div>
-                <div class="content">
-                    <h3 v-html="formatFromKeyword(item.name)"></h3>
-                    <div class="title" v-text="item.discription"></div>
-                    <div class="question">
-                        <p v-for="question in item.questionList" v-html="formatFromKeyword(question)"></p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：<span v-text="item.publishTime"></span></time>
-                        <span>浏览量：<span v-text="item.pv"></span></span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-    </article>
+<!-- 顶部公共区域 end -->
 
-    <!--页码-->
-    <div class="pagination-container" v-if="totalPage > 1">
-        <ul class="pagination">
-            <!--左侧固定-->
-            <li v-if="listQuery.pageNum > 1"><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
-            <li v-if="pagination[0] > 1"><a href="#" @click.prevent="pageChange(1)">1</a></li>
-            <li class="ellipsis" v-if="pagination[0] > 2"><span>···</span></li>
-            <!--可变动-->
-            <template v-for="num in pagination">
-                <li :class="{ active: listQuery.pageNum === num }" v-if="num >= 1  && num <= totalPage">
-                    <a href="#" @click.prevent="pageChange(num)" v-text="num"></a>
-                </li>
-            </template>
-            <!--右侧固定-->
-            <li class="ellipsis" v-if="pagination[pagination.length - 1] < totalPage - 1"><span>···</span></li>
-            <li v-if="pagination[pagination.length - 1] < totalPage">
-                <a href="#" @click.prevent="pageChange(totalPage)" v-text="totalPage"></a>
-            </li>
-            <li v-if="listQuery.pageNum < totalPage" :class="{ active: listQuery.pageNum === totalPage }">
-                <a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a>
-            </li>
-        </ul>
-        <div class="tool">
-            <div class="total">共<span v-text="totalPage"></span>页</div>
-            <div class="jump">
-                <div class="pagenum-input">跳至<input type="text" v-model="jumpInput"/>页</div>
-                <a href="#" class="jump-btn" @click.prevent="pageChange(jumpInput)">点击跳转</a>
+<main>
+    <div class="bk-list-result bk-container">为您找到相关结果<span>9</span>条</div>
+    <div class="bk-list-empty bk-container">
+        <img src="/img/encyclopedia/assets/pc-icon-empty.png">
+        <div class="bk-title">未找到相关结果</div>
+    </div>
+    <div class="bk-list bk-container">
+        <a href="/encyclopedia/detail-1.html" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
+            </div>
+        </a>
+        <a href="#" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
+            </div>
+        </a>
+        <a href="#" class="bk-list-item">
+            <div class="bk-cover"><img src="https://picsum.photos/160/168" alt="如何有效提升产研效率和质量"/></div>
+            <div class="bk-info">
+                <h2>如何有效提升产研效率和质量？</h2>
+                <p>在产品不断更迭的过程中，为了保证产品设计的一致性和质量，就得提升产研链路的效率。然而，面对越来越复杂的产品，如何解决团队效率和产品质量问题呢？一起来看一下吧。</p>
+                <div class="bk-info-footer"><span>浏览量：3343</span><span>2022-12-08</span></div>
             </div>
-        </div>
+        </a>
     </div>
-</div>
+</main>
 
-<!-- 引用公共底部 -->
+<!-- 底部区域 -->
 <template th:replace="encyclopedia/components/footer"></template>
-<script src="/lib/vue2.6.12.min.js"></script>
-<script th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
-<script th:src="@{/js/common/serviceapi/encyclopedia.service.js(v=${version})}"></script>
-<script th:src="@{/js/encyclopedia/search.js(v=${version})}"></script>
+<!-- 底部区域 end -->
 </body>
 </html>

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

@@ -28,8 +28,11 @@
     <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>
+             -->
+            <a href="/supplier/encyclopedia/list.html">我的词条</a>
         </div>
     </div>
     <div class="navList">

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

@@ -0,0 +1,11 @@
+<!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>
+    <meta charset="UTF-8">
+</head>
+<body>
+
+</body>
+</html>

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

@@ -0,0 +1,165 @@
+<!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>
+    <meta charset="UTF-8">
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <!--element ui 样式表-->
+    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
+    <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+    <link th:href="@{/css/supplier-center/encyclopedia/list.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<div id="list" class="bk-container">
+    <div class="navLayout">
+        <div class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>采美百科</span>
+                <span>&gt;</span>
+                <span>我的词条</span>
+            </div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <div class="right">
+                <div class="bk-tip">温馨提示：多发布采美百科，加大您的品牌曝光率。（发布并且审核通过后，可在采美百科搜索您发布的词条）</div>
+                <!-- 词条筛选 -->
+                <div class="bk-filter">
+                    <div class="bk-filter-row">
+                        <div class="bk-filter-control">
+                            <div class="bk-label">ID：</div>
+                            <el-input class="bk-control" placeholder="请输入ID号"></el-input>
+                        </div>
+                        <div class="bk-filter-control">
+                            <div class="bk-label">词条名称：</div>
+                            <el-input class="bk-control" placeholder="请输入词条名称"></el-input>
+                        </div>
+                        <div class="bk-filter-control">
+                            <div class="bk-label">分类：</div>
+                            <el-select class="bk-control">
+                                <el-option label="全部" value=""></el-option>
+                            </el-select>
+                        </div>
+                    </div>
+                    <div class="bk-filter-row">
+                        <div class="bk-filter-control">
+                            <div class="bk-label">审核状态：</div>
+                            <el-select>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <div class="bk-filter-control">
+                            <div class="bk-label">上线状态：</div>
+                            <el-select>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <div class="bk-filter-control">
+                            <div class="bk-label">状态：</div>
+                            <el-select>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="0"></el-option>
+                            </el-select>
+                        </div>
+                        <div class="bk-filter-control bk-filter-button">
+                            <button class="bk-search-btn">搜索</button>
+                            <button class="bk-add-btn">添加</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- 词条列表 -->
+                <div class="bk-list">
+                    <div class="bk-tr">
+                        <div class="bk-td">分类</div>
+                        <div class="bk-td">浏览量</div>
+                        <div class="bk-td">审核状态</div>
+                        <div class="bk-td">上线状态</div>
+                        <div class="bk-td">发布时间</div>
+                        <div class="bk-td">添加时间</div>
+                        <div class="bk-td">状态</div>
+                        <div class="bk-td">操作</div>
+                    </div>
+                    <div class="bk-tr">
+                        <div class="bk-td">新品上线</div>
+                        <div class="bk-td">234</div>
+                        <div class="bk-td bk-warning">待审核</div>
+                        <div class="bk-td bk-warning">待上线</div>
+                        <div class="bk-td">2022-12-20 17:23</div>
+                        <div class="bk-td">2022-12-20 17:23</div>
+                        <div class="bk-td">已发布</div>
+                        <div class="bk-td">
+                            <!-- <button>保存草稿箱</button> -->
+                            <button>发布</button>
+                            <button>编辑</button>
+                            <button>查看</button>
+                            <button>删除</button>
+                        </div>
+                    </div>
+                    <div class="bk-tr">
+                        <div class="bk-td">新品上线</div>
+                        <div class="bk-td">234</div>
+                        <div class="bk-td bk-success">审核通过</div>
+                        <div class="bk-td bk-primary">已上线</div>
+                        <div class="bk-td">2022-12-20 17:23</div>
+                        <div class="bk-td">2022-12-20 17:23</div>
+                        <div class="bk-td">已发布</div>
+                        <div class="bk-td">
+                            <button>保存草稿箱</button>
+                            <button>编辑</button>
+                            <button>查看</button>
+                            <button>删除</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- 页码 -->
+                <div class="bk-pagination">
+                    <div class="bk-pagesize">
+                        <span>1</span>
+                        <span>2</span>
+                        <span>3</span>
+                        <span>4</span>
+                        <span>5</span>
+                        <i>…</i>
+                        <span>87</span>
+                        <span>89</span>
+                        <span>90</span>
+                    </div>
+                    <div class="bk-total">
+                        共<span>90</span>页
+                    </div>
+                    <div class="bk-control">
+                        <span>跳至</span>
+                        <input type="text"/>
+                        <span>页</span>
+                        <button class="bk-btn">点击跳转</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script type="text/javascript" src="/lib/element-ui/element-ui.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/supplier-center/encyclopedia/list.js(v=${version})}"></script>
+</body>
+</html>