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

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,48 +1,35 @@
 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.pojo.baike.BaikeProductVo;
+import com.caimei.www.pojo.baike.BaikeTypeVo;
 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.text.SimpleDateFormat;
 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 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";
     private ProductService productService;
 
     @Autowired
@@ -50,139 +37,112 @@ public class EncyclopediaController extends BaseController {
         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();
+    @GetMapping("/list.html")
+    public String getEncyclopediaHome(){
+        //分类集合
+        List<BaikeTypeVo> typeList = productService.geTypeList();
+        Integer typeId = null;
+        if(null != typeList && typeList.size() > 0){
+            typeId = typeList.get(0).getTypeId();
         }
-        // 增加浏览量
-        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;
+        return "redirect:/encyclopedia/list-"+ typeId +".html";
     }
 
-    /**
-     * 仪器详情
-     */
-    @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();
+    /*
+     * 百科首页
+     * */
+    @GetMapping("/list-{typeId}.html")
+    public String getEncyclopediaList(final Model model,@PathVariable("typeId") Integer typeId) {
+        //词条信息
+        SimpleDateFormat sl=new SimpleDateFormat("yyyy-MM-dd");
+        List<BaikeProductVo> authUserList = productService.getAuthUserList(typeId);
+        if(null!=authUserList&&authUserList.size()>0){
+            for(BaikeProductVo baikeProductVo:authUserList){
+                //初始化基础浏览量（防止报错）
+                if(null!=baikeProductVo&&null==baikeProductVo.getPv()){
+                    //如果浏览量为空 则设置为0
+                    productService.initializationPV(baikeProductVo.getProductId());
+                }
+            }
+        for (BaikeProductVo baikeProductVo:authUserList) {
+                if(null!=baikeProductVo.getPublishTime()){
+                    baikeProductVo.setPublishTimeStr(sl.format(baikeProductVo.getPublishTime()));
+                }
+            if(null!=baikeProductVo&&null!=baikeProductVo.getPublishSource()&&baikeProductVo.getPublishSource()==1){
+                //供应商发布的词条取实际浏览量，管理员发布的取基础浏览量加实际浏览量
+                baikeProductVo.setPv(baikeProductVo.getPv()+baikeProductVo.getBasePv());
+            }
+        }
         }
-        // 增加浏览量
-        productService.encyclopediaPv(productId);
-        model.addAttribute("baikeInstrument", baikeInstrument);
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return INSTRUMENT_DETAIL;
+        //分类集合
+        List<BaikeTypeVo> typeList = productService.geTypeList();
+        //根据id查询分类信息
+        BaikeTypeVo typeData = productService.geTypeListByid(typeId);
+        //热搜词
+        List<BaikeHotSearch> hotSeracherWords=productService.getHotWords();
+        model.addAttribute("authUserList", authUserList);
+        model.addAttribute("TypeList", typeList);
+        model.addAttribute("Typedata", typeData);
+        model.addAttribute("hotSeracherWords", hotSeracherWords);
+        return ENCYCLOPEDIA_LIST;
     }
 
-    /**
-     * 查看更多
-     */
-    @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("/detail-{id}.html")
+    public String getEncyclopediaDetail(final Model model, @PathVariable("id") Integer id) {
+        SimpleDateFormat sl=new SimpleDateFormat("yyyy-MM-dd");
+            //初始化基础浏览量（防止报错）
+            //如果浏览量为空 则设置为0
+            productService.initializationPV(id);
+        BaikeProductVo baikeproduct = productService.getEncyclopediaDetail(id);
+        if(null!=baikeproduct){
+            if(null!=baikeproduct.getPublishTime()){
+                baikeproduct.setPublishTimeStr(sl.format(baikeproduct.getPublishTime()));
+            }
+        }
+        if(null!=baikeproduct&&null!=baikeproduct.getPublishSource()&&baikeproduct.getPublishSource()==1){
+            //供应商发布的词条取实际浏览量，管理员发布的取基础浏览量加实际浏览量
+            baikeproduct.setPv(baikeproduct.getPv()+baikeproduct.getBasePv());
+        }
+        //热搜词
+        List<BaikeHotSearch> hotSeracherWords=productService.getHotWords();
+        model.addAttribute("hotSeracherWords", hotSeracherWords);
+        model.addAttribute("baikeproduct", baikeproduct);
+        //分类集合
+        List<BaikeTypeVo> typeList = productService.geTypeList();
+        model.addAttribute("TypeList", typeList);
+        //增加浏览量
+        productService.encyclopediaPv(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;
-    }
-
-    /**
-     * 联系我们
-     */
-    @GetMapping("/contact.html")
-    public String getContact(final Model model) {
-        // 搜索热门关键字
-        List<BaikeHotSearch> searchHotWord = baseService.getBaikeSearchHotWord();
-        model.addAttribute("searchHotWord", searchHotWord);
-        return CONTACT;
+    public String getEncyclopediaSearch(final Model model) {
+        //热搜词
+        List<BaikeHotSearch> hotSeracherWords=productService.getHotWords();
+        //分类集合
+        List<BaikeTypeVo> typeList = productService.geTypeList();
+        model.addAttribute("TypeList", typeList);
+        model.addAttribute("hotSeracherWords", hotSeracherWords);
+        return ENCYCLOPEDIA_SEARCH;
     }
 
-    /**
-     * 关于我们
-     */
+    /*
+     * 关于百科
+     * */
     @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) {
+        //热搜词
+        List<BaikeHotSearch> hotSeracherWords=productService.getHotWords();
+        //分类集合
+        List<BaikeTypeVo> typeList = productService.geTypeList();
+        model.addAttribute("TypeList", typeList);
+        model.addAttribute("hotSeracherWords", hotSeracherWords);
+        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/java/com/caimei/www/mapper/BaikeDao.java

@@ -42,4 +42,29 @@ public interface BaikeDao {
 
     List<BaikeProduct> getAutoRecommendList(Integer publishSource, @Param("shopId") Integer shopId, @Param("typeId") Integer typeId, @Param("productId") Integer productId);
 
+
+    List<BaikeProductVo> getAuthUserList(Integer typeId);
+
+    List<BaikeHotSearch> getHotWords();
+
+
+    BaikeProductVo getEntryInfoById(Integer id);
+
+    List<BaikeImageVo> getImageListById(Integer id);
+
+    List<BaikeVideoVo> getVideoListById(Integer id);
+
+    List<BaikeInfoVo> getInfoListById(Integer id);
+
+    List<BaikeTextInfoVo> getTextInfoListById(Integer id);
+
+
+    List<CmBaikeReferenceInfo> getReferenceListById(Integer id);
+
+    List<BaikeTypeVo> geTypeList();
+
+    BaikeTypeVo geTypeListByid(Integer typeId);
+
+
+    void initializationPV(Integer productId);
 }

src/main/java/com/caimei/www/pojo/baike/BaikeHotSearch.java

@@ -3,6 +3,7 @@ package com.caimei.www.pojo.baike;
 import lombok.Data;
 
 import java.io.Serializable;
+import java.util.Date;
 
 /**
  * Description
@@ -28,4 +29,22 @@ public class BaikeHotSearch implements Serializable {
      * 跳转链接
      */
     private String jumpLink;
+
+    private Integer id;
+    /**
+     * 排序值
+     */
+    private Integer sort;
+    /**
+     * 状态
+     */
+    private Integer status;
+    /**
+     * 添加时间
+     */
+    private Date addTime;
+    /**
+     * 添加人
+     */
+    private String addBy;
 }

src/main/java/com/caimei/www/pojo/baike/BaikeImageVo.java

@@ -0,0 +1,26 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+@Data
+public class BaikeImageVo {
+    private Integer id;
+    /**
+     * 词条id
+     */
+    private Integer entryId;
+    /**
+     * 图片
+     */
+    private String image;
+
+    /**
+     * 视频
+     */
+    private String videoUrl;
+
+    /**
+     * 类型 1 图片  2 视频
+     */
+    private Integer type;
+}

src/main/java/com/caimei/www/pojo/baike/BaikeInfoVo.java

@@ -0,0 +1,20 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+@Data
+public class BaikeInfoVo {
+    private Integer id;
+    /**
+     * 词条id
+     */
+    private Integer entryId;
+    /**
+     * 信息名称
+     */
+    private String infoName;
+    /**
+     * 信息内容
+     */
+    private String infoContent;
+}

src/main/java/com/caimei/www/pojo/baike/BaikeProductVo.java

@@ -0,0 +1,162 @@
+package com.caimei.www.pojo.baike;
+
+import com.fasterxml.jackson.annotation.JsonFormat;
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.Date;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Aslee
+ * @date : 2021/11/25
+ */
+@Data
+public class BaikeProductVo implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    private Integer productId;
+
+    /**
+     * 商品类型：1产品，2仪器
+     */
+    private Integer commodityType;
+
+    /**
+     * 产品/仪器图片
+     */
+    private String image;
+
+    /**
+     * 产品/仪器名称
+     */
+    private String name;
+
+    /**
+     * 概述
+     */
+    private String discription;
+
+    /**
+     * 发布时间
+     */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    private Date publishTime;
+
+    /**
+     * 发布时间
+     */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    private String publishTimeStr;
+
+    /**
+     * 浏览量
+     */
+    private Integer pv;
+    /**
+     * 实际浏览量
+     */
+    private Integer basePv;
+
+    /**
+     * 问题列表
+     */
+    private List<String> questionList;
+
+    /**
+     * 跳转链接
+     */
+    private String link;
+//--------------------------------------------------1.3.3采美百科词条新加字段---------------------------------------------------
+    /**
+     * 分类id
+     */
+    private Integer typeId;
+    /**
+     *分类名称
+     */
+    private String typeName;
+
+    /**
+     * 百科审核状态：1待审核，2审核通过，3审核失败
+     */
+    private Integer auditStatus;
+
+    /**
+     * 百科上线状态：1待上线，2已上线，3已下线
+     */
+    private Integer onlineStatus;
+    /**
+     * 状态（0保存草稿箱 1已发布）
+     */
+    private Integer status;
+
+    /**
+     * 添加时间
+     */
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
+    private Date addTime;
+    /**
+     * 别名（义项名）
+     */
+    private String alias;
+    /**
+     * seo关键字
+     */
+    private String seoKeyword;
+
+    /**
+     * 概述图册集合
+     */
+    private List<BaikeImageVo> imageList;
+    /**
+     * 信息栏集合(移动端)
+     */
+    private List<BaikeInfoVo> infoList;
+
+    /**
+     * 信息栏集合(pc端)
+     */
+    private List<List<BaikeInfoVo>> infoListPC;
+
+    /**
+     * 正文集合
+     */
+    private List<BaikeTextInfoVo> textInfoList;
+    /**
+     * 参考资料集合
+     */
+    private List<CmBaikeReferenceInfo> ReferenceList;
+    /**
+     * 分类集合
+     */
+    private List<BaikeTypeVo> typeList;
+    /**
+     * 视频列表
+     */
+    private List<BaikeVideoVo> videoList;
+    /**
+     * 词条id
+     */
+    private Integer id;
+    /**
+     * '百科发布来源：1采美365网，2供应商'
+     */
+    private Integer publishSource;
+    /**
+     * 供应商id，publishSource为2时才有值
+     */
+    private Integer shopId;
+    /**
+     * 供应商名称，publishSource为2时才有值
+     */
+    private  String shopName;
+    /**
+     * 供应商Log，publishSource为2时才有值
+     */
+    private String shopLogo;
+
+    private Integer authUserId;
+}

src/main/java/com/caimei/www/pojo/baike/BaikeTextInfoVo.java

@@ -0,0 +1,32 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+@Data
+public class BaikeTextInfoVo {
+    private Integer id;
+    /**
+     * 信息类型（1：定义；2：原理；3：特点；4：应用）
+     */
+    private Integer textType;
+    /**
+     * 目录内容
+     */
+    private String dictionaryContent;
+    /**
+     * 词条id
+     */
+    private Integer entryId;
+    /**
+     * 参考资料id
+     */
+    private Integer referenceId;
+    /**
+     * 父级id
+     */
+    private Integer parentId;
+    /**
+     * 目录类型（1：一级目录；2：二级目录；3：内容
+     */
+    private Integer dictionaryType;
+}

src/main/java/com/caimei/www/pojo/baike/BaikeTypeVo.java

@@ -0,0 +1,24 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * Description
+ *
+ * @author : Aslee
+ * @date : 2020/11/25
+ */
+@Data
+public class BaikeTypeVo implements Serializable {
+    private static final long serialVersionUID = 1L;
+
+    private Integer typeId;
+    private String name;
+    private List<BaikeProductVo> productList;
+    private String pcBanner;
+    private String appBanner;
+    private String bannerLink;
+}

src/main/java/com/caimei/www/pojo/baike/BaikeVideoVo.java

@@ -0,0 +1,13 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+@Data
+public class BaikeVideoVo {
+    private Integer id;
+    private Integer entryId;		// 产品/仪器id
+    private String fileTitle;			// 文件标题
+    private String fileName;			// 文件名称
+    private String ossName;			// oss名称
+    private String ossUrl;			// oss链接
+}

src/main/java/com/caimei/www/pojo/baike/CmBaikeReferenceInfo.java

@@ -0,0 +1,107 @@
+package com.caimei.www.pojo.baike;
+
+import lombok.Data;
+
+import java.sql.Timestamp;
+
+@Data
+public class CmBaikeReferenceInfo {
+    private Integer id;
+    /**
+     * 参考类型资料（1.网络；2.著作；3.其他）
+     */
+    private Integer referenceType;
+    /**
+     * 网址
+     */
+    private String website;
+    /**
+     * 文章名字
+     */
+    private String articleName;
+    /**
+     * 网址名称
+     */
+    private String websiteName;
+    /**
+     * 发表时间
+     */
+    private Timestamp publishTime;
+
+    /**
+     * 发表时间
+     */
+    private String publishTimeStr;
+
+    /**
+     * 引文时间
+     */
+    private Timestamp acitationTime;
+
+    /**
+     * 引文时间
+     */
+    private String acitationTimeStr;
+    /**
+    /**
+     * 作者
+     */
+    private String author;
+    /**
+     * 著作名
+     */
+    private String workName;
+    /**
+     * 出版地
+     */
+    private String publicationPlace;
+    /**
+     * 出版社
+     */
+    private String press;
+    /**
+     * 出版年
+     */
+    private Timestamp publicationYear;
+
+    /**
+     * 出版年
+     */
+    private String publicationYearStr;
+    /**
+     * 引文页码
+     */
+    private String acitationWeb;
+    /**
+     * 参考资料说明
+     */
+    private String referenceDescription;
+    /**
+     * 图片描述
+     */
+    private String imageDescription;
+    /**
+     * 图片地址
+     */
+    private String imageUrl;
+    /**
+     * 词条id
+     */
+    private Integer entryId;
+    /**
+     * 词条内容（1：义项名；2：词条概述；3：信息栏；4：正文）
+     */
+    private String entryType;
+    /**
+     * 1：添加；2编辑
+     */
+    private String flagId;
+    /**
+     * 资料id用于前端传值修改
+     */
+    private String  zlId;
+    /**
+     * 关联id
+     */
+    private String ctrlId;
+}

src/main/java/com/caimei/www/service/page/ProductService.java

@@ -3,8 +3,7 @@ package com.caimei.www.service.page;
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.caimei.www.pojo.JsonModel;
-import com.caimei.www.pojo.baike.BaikeProduct;
-import com.caimei.www.pojo.baike.BaikeType;
+import com.caimei.www.pojo.baike.*;
 import com.caimei.www.pojo.page.Parameter;
 import com.caimei.www.pojo.page.ProductDetail;
 import com.caimei.www.pojo.page.ProductList;
@@ -102,4 +101,22 @@ public interface ProductService {
     List<Parameter> getParams(Integer productId);
 
     List<ProductList> getProductLists(Integer productId);
+
+
+    List<BaikeProductVo> getAuthUserList(Integer typeId);
+
+    List<BaikeHotSearch> getHotWords();
+
+
+    BaikeProductVo getEncyclopediaDetail(Integer id);
+
+    List<BaikeTypeVo> geTypeList();
+
+    BaikeTypeVo geTypeListByid(Integer typeId);
+
+    /**
+     * 初始化话基础浏览量
+     * @param productId
+     */
+    void initializationPV(Integer productId);
 }

src/main/java/com/caimei/www/service/page/impl/ProductServiceImpl.java

@@ -23,6 +23,7 @@ import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.text.SimpleDateFormat;
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
@@ -345,4 +346,131 @@ public class ProductServiceImpl implements ProductService {
         baikeDao.encyclopediaPv(id);
         return JsonModel.success();
     }
+
+    /**
+     * 获取词条信息
+     * @param typeId
+     * @return
+     */
+    @Override
+    public List<BaikeProductVo> getAuthUserList(Integer typeId){
+        List<BaikeProductVo> authUserList = baikeDao.getAuthUserList(typeId);
+        return authUserList;
+    }
+
+    /**
+     * 获取热搜词
+     * @param typeId
+     * @return
+     */
+    @Override
+    public List<BaikeHotSearch> getHotWords(){
+        List<BaikeHotSearch> authUserList = baikeDao.getHotWords();
+        return authUserList;
+    }
+
+    /**
+     * 获取分类信息
+     * @return
+     */
+    @Override
+    public List<BaikeTypeVo> geTypeList(){
+        List<BaikeTypeVo> TypeList = baikeDao.geTypeList();
+        return TypeList;
+    }
+
+    /**
+     * 根据id获取分类信息
+     * @return
+     */
+    @Override
+    public BaikeTypeVo geTypeListByid(Integer typeId){
+        BaikeTypeVo typedata = baikeDao.geTypeListByid(typeId);
+        return typedata;
+    }
+    @Override
+    public void initializationPV(Integer productId){
+        baikeDao.initializationPV(productId);
+    }
+
+    /**
+     * 获取词条详细信息
+     * @param id
+     * @return
+     */
+    @Override
+    public BaikeProductVo getEncyclopediaDetail(Integer id){
+        //获取词条基本信息
+        BaikeProductVo entryInfo = baikeDao.getEntryInfoById(id);
+        if(entryInfo!=null&&null!=entryInfo.getPublishTime()){
+            //格式化发布时间
+            SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd");
+            String publishTimeStr=dateFormat.format(entryInfo.getPublishTime());
+            entryInfo.setPublishTimeStr(publishTimeStr);
+        }
+        //概述图册
+        List<BaikeImageVo>  imageListById = baikeDao.getImageListById(id);
+        if(null!=imageListById&&imageListById.size()>0){
+            for (BaikeImageVo baikeImageVo:imageListById) {
+                baikeImageVo.setType(1);
+            }
+        }
+        //视频列表
+        List<BaikeVideoVo> videoList = baikeDao.getVideoListById(id);
+        if(null!=videoList&&videoList.size()>0){
+            for (BaikeVideoVo baikevideo:videoList) {
+                BaikeImageVo img=new BaikeImageVo();
+                img.setType(2);
+                img.setVideoUrl(baikevideo.getOssUrl());
+                imageListById.add(img);
+            }
+        }
+        entryInfo.setImageList(imageListById);
+//        entryInfo.setVideoList(videoList);
+        //信息栏
+        List<BaikeInfoVo> infoList = baikeDao.getInfoListById(id);
+        List<List<BaikeInfoVo>> listAll=new ArrayList<>();
+        List<BaikeInfoVo> list=new ArrayList<>();
+        if(null!=infoList&& infoList.size()>0){
+        for(int i=0;i<infoList.size();i++){
+            if(i==infoList.size()-1 && i%2==0){
+                List<BaikeInfoVo> finalList=new ArrayList<>();
+                finalList.add(infoList.get(i));
+                listAll.add(finalList);
+            }else if(i%2==1){
+                 list.add(infoList.get(i));
+                 listAll.add(list);
+                 list=new ArrayList<>();
+             }else if(i==0 || i%2==0){
+                 list.add(infoList.get(i));
+             }
+        }
+        }
+        entryInfo.setInfoListPC(listAll);
+        entryInfo.setInfoList(infoList);
+        //正文
+        List<BaikeTextInfoVo> textInfoListList = baikeDao.getTextInfoListById(id);
+        entryInfo.setTextInfoList(textInfoListList);
+        //参考资料
+        List<CmBaikeReferenceInfo> referenceList = baikeDao.getReferenceListById(id);
+        if(referenceList!=null&&referenceList.size()>0){
+            for(CmBaikeReferenceInfo reference : referenceList){
+                SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd");
+                if(null!=reference.getPublishTime()){
+                    String publishTime= dateFormat.format(reference.getPublishTime());
+                    reference.setPublishTimeStr(publishTime);
+                }
+                if(null!=reference.getAcitationTime()){
+                    String acitationTime= dateFormat.format(reference.getAcitationTime());
+                    reference.setAcitationTimeStr(acitationTime);
+                }
+                if(null!=reference.getPublicationYear()){
+                    String publicationYear= dateFormat.format(reference.getPublicationYear());
+                    reference.setPublicationYearStr(publicationYear);
+                }
+            };
+        }
+        entryInfo.setReferenceList(referenceList);
+        return entryInfo;
+    }
 }

src/main/resources/config/dev/application-dev.yml

@@ -4,14 +4,14 @@ spring:
   #数据源连接--start
   datasource:
     #本地连接数据库
-#    url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
-#    username: developer
-#    password: 05bZ/OxTB:X+yd%1
+    #url: jdbc:mysql://192.168.2.100:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
+    #username: developer
+    #password: 05bZ/OxTB:X+yd%1
     #测试连接数据库
     url: jdbc:mysql://120.79.25.27:3306/caimei?characterEncoding=UTF8&serverTimezone=Asia/Shanghai
     username: developer
     password: J5p3tgOVazNl4ydf
-    #type: com.zaxxer.hikari.HikariDataSource
+    type: com.zaxxer.hikari.HikariDataSource
     hikari:
       minimum-idle: 5
       maximum-pool-size: 15
@@ -55,9 +55,9 @@ caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
   #spiServer: http://192.168.2.68:8008
   coreServer: https://core-b.caimei365.com
-#  coreServer: http://192.168.2.67:18002
-#  coreServer: http://192.168.2.17:18002
-  #coreServer: http://192.168.2.200:18002
+  #coreServer: http://192.168.2.67:18002
+  #coreServer: http://192.168.2.17:18002
+  #coreServer: http://192.168.2.103:18002
   imageDomain: https://img-b.caimei365.com
   wwwDomain: http://localhost:8009
   destPath: classpath:/

src/main/resources/mapper/BaikeMapper.xml

@@ -100,4 +100,126 @@
 		order by p.addTime desc
 		limit 15
 	</select>
+
+	<select id="getAuthUserList" resultType="com.caimei.www.pojo.baike.BaikeProductVo">
+		select
+		p.id as productId,
+		p.id,
+		p.name,
+		p.discription,
+		p.actualPv as pv,
+		p.publishTime,
+		p.typeId,
+		p.basePv,
+		p.image
+		from cm_baike_product p
+		left join cm_baike_type t on p.typeId=t.id
+		where
+		  p.typeId =#{typeId}
+		  and p.auditStatus=2 and p.onlineStatus=2 and p.status=1
+		order by p.publishTime desc
+	</select>
+
+	<select id="getHotWords" resultType="com.caimei.www.pojo.baike.BaikeHotSearch">
+		select
+			p.id,
+			p.keyWord,
+			p.jumpType,
+			p.jumpLink,
+			p.sort,
+			p.status,
+			p.addTime,
+			p.addBy
+		from cm_baike_hot_search p
+		where status=1
+        order by sort , addTime desc
+	</select>
+
+	<select id="getEntryInfoById" resultType="com.caimei.www.pojo.baike.BaikeProductVo">
+		select
+			p.id as productId,
+			p.id,
+			p.commodityType,
+			p.name,
+			p.discription,
+			p.typeId,
+			p.actualPv as pv,
+			p.auditStatus,
+			p.onlineStatus,
+			p.status,
+			p.publishTime,
+			p.addTime,
+			p.alias,
+			p.image,
+		    s.name as shopName,
+			p.shopId as shopId,
+			s.logo as shopLogo,
+			t.name as typeName,
+			p.publishSource,
+			p.shopId,
+			p.basePv,
+			p.seoKeyword
+		from cm_baike_product p
+				 left join cm_baike_type t on p.typeId=t.id
+				 LEFT JOIN shop s ON p.shopId = s.shopID
+		where p.id=#{id}
+	</select>
+
+	<select id="getImageListById"  resultType="com.caimei.www.pojo.baike.BaikeImageVo">
+		select  id,productId as entryId,image from cm_baike_product_image
+		where productId=#{id}
+	</select>
+
+	<select id="getInfoListById"  resultType="com.caimei.www.pojo.baike.BaikeInfoVo">
+		select  id,productId as entryId,name as infoName,content as infoContent from cm_baike_product_param
+		where productId=#{id}
+	</select>
+
+	<select id="getTextInfoListById"  resultType="com.caimei.www.pojo.baike.BaikeTextInfoVo">
+		select  id,productId as entryId,textType,dictionaryContent,referenceId,parentId,dictionaryType from cm_baike_text_info
+		where productId=#{id}
+	</select>
+	<select id="getReferenceListById"  resultType="com.caimei.www.pojo.baike.CmBaikeReferenceInfo">
+		select
+			id,
+			referenceType,
+			website,
+			articleName,
+			websiteName,
+			publishTime,
+			acitationTime,
+			author,
+			workName,
+			publicationPlace,
+			press,
+			publicationYear,
+			acitationWeb,
+			referenceDescription,
+			imageDescription,
+			imageUrl,
+			ctrlId,
+			productId as entryId,
+			productType as entryType
+		from cm_baike_reference_info
+		where productId=#{id}
+	</select>
+	<select id="getVideoListById" resultType="com.caimei.www.pojo.baike.BaikeVideoVo">
+		select id, productId as entryId, fileTitle, fileName, ossName,ossUrl
+		from cm_baike_product_file
+		where productId = #{id}
+	</select>
+
+	<select id="geTypeList"  resultType="com.caimei.www.pojo.baike.BaikeTypeVo">
+		select  id as typeId,name,pcBanner,appBanner,bannerLink from cm_baike_type
+		where status=1 order by sort,addTime desc
+	</select>
+
+	<select id="geTypeListByid"  resultType="com.caimei.www.pojo.baike.BaikeTypeVo">
+		select  id as typeId,name,pcBanner,appBanner,bannerLink from cm_baike_type
+		where status=1 and id=#{typeId}
+	</select>
+
+	<update id="initializationPV">
+		update cm_baike_product set basePv=0 where id=#{productId}
+	</update>
 </mapper>

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,116 @@
-@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}
+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}
+.jconfirm-content{overflow: hidden !important;}
+
+@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:470px;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}
+    .bk-login button.bk-disabled{background: #999;}
 }
-@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}
+
+@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,118 @@
-@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;}
+.scapegoat{color: #F57C40 !important;}
+@media screen and (min-width:768px){main{background:#FAFAFA}
+    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
+    .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;white-space:nowrap;}
+    .bk-detail-left .bk-information .bk-row .bk-content{font-size:14px;display:table-cell;border-bottom:1px dashed #BEBEBE;padding:18px 10px 10px}
+    .bk-detail-left .bk-section .bk-section-content{line-height: 1.8}
+    .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-literature .bk-literature-list li em{font-style: normal;}
+    .bk-literature .bk-literature-list li i{display: inline-block;width: 16px; height: 16px; background:#F7F7F7 url("/img/encyclopedia/assets/pc-icon-arrowup.png") no-repeat center; background-size: 12px; cursor: pointer; }
+    .bk-literature .bk-literature-list li a{color: #333;}
+    .bk-literature .bk-literature-list li a.link::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-link.png") no-repeat center; background-size: 16px;}
+    .bk-literature .bk-literature-list li a.image::after{content: ""; display: inline-block; width: 16px;height: 16px; background: url("/img/encyclopedia/assets/pc-icon-img.png") no-repeat center; background-size: 16px;}
+    .bk-literature .bk-literature-list li a:after{margin: 0 2px}
+    .bk-literature .bk-literature-list li i,
+    .bk-literature .bk-literature-list li a:after{vertical-align: -3px}
+    .bk-literature .bk-literature-list li a.link:hover{color: #F57C40; text-decoration: underline}
+    .bk-literature .bk-literature-list li a.link:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
+    .bk-literature .bk-literature-list li a.image:hover::after{background-image: url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
+    .bk-literature .bk-literature-list li i:hover{ background-image:url("/img/encyclopedia/assets/pc-icon-arrowup-hover.png")}
+    .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 video{display:block;width:280px;height:220px}
+    .bk-detail-right .bk-album .swiper-container{height:220px}
+    .bk-detail-right .bk-album .swiper-container .swiper-slide{position: relative}
+    .bk-detail-right .bk-album .bk-play{width: 48px;height: 48px;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 48px;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%);
+        cursor: pointer;}
+    .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%)}
+    .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;}
+@media screen and (max-width:768px){.bk-banner{height:3.4rem;position:relative;z-index:10;overflow:hidden}
+    img.scapegoat{vertical-align: -4px;margin:0 2px; cursor: pointer;}
+    .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 .bk-section-content{line-height: 1.8;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;position: relative;}
+    .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-album .bk-album-list .bk-album-item video{display:block;width:100%;height:100%}
+    .bk-detail-right .bk-album .bk-play{width: 0.64rem;height: 0.64rem;background: url("/img/activity/pc-palyer.png") no-repeat center; background-size: 0.64rem;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%)}
+    .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}
+    .bk-literature .bk-literature-list li em{font-style: normal;}
+    .bk-literature .bk-literature-list li a.link{color: #F57C40; text-decoration: underline}
+    .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/list.css

@@ -0,0 +1,31 @@
+@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 .bk-info-desc{font-size:14px;color:#666666 !important;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-desc * {color:#666666 !important;}
+    .bk-list .bk-list-item .bk-info img{display: none}
+    .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 .bk-info-desc {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-desc * {color:#666666 !important;}
+    .bk-list .bk-list-item .bk-info img{display: none}
+    .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,37 @@
+@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{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 .bk-info-desc{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-desc * {color:#666666 !important;}
+    .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 .bk-info img{display: none}
+    .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 .bk-info-desc {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-desc * {color:#666666 !important;}
+    .bk-list .bk-list-item .bk-info img{display: none}
+    .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/edit.css

@@ -0,0 +1,89 @@
+#globalHead.fiexd{position:sticky !important;z-index:999}
+.navLayout{min-height:calc(100vh - 185px - 785px) !important}
+.bk-container .right{background:#fff;padding:24px 0}
+.bk-container .top-tip{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:60px;text-align:center;font-size:12px;color:#E15616;line-height:18px;background:-o-linear-gradient(left,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%);background:-webkit-gradient(linear,left top,right top,from(rgba(255,255,255,0.1)),color-stop(51%,rgba(225,86,22,0.1)),to(rgba(255,255,255,0.1)));background:linear-gradient(90deg,rgba(255,255,255,0.1) 0%,rgba(225,86,22,0.1) 51%,rgba(255,255,255,0.1) 100%)}
+.max-width{width:100% !important}
+.valide-form{width:680px;margin:40px auto 0}
+.valide-form .el-input .el-input__inner{height:36px;line-height:34px;border-radius:2px}
+.valide-form .el-select .el-select__caret{line-height:36px}
+.valide-form .el-form--label-top .el-form-item__label{color:#627386;line-height:32px;padding:0}
+.valide-form .el-form--label-top .el-form-item__label span{color:#FFB496}
+.valide-form .el-form-item{margin-bottom:24px}
+.valide-form .el-form-item.is-required{margin-bottom:32px}
+.valide-form .el-textarea .el-input__count{line-height:initial}
+.valide-form .bk-label{font-size:14px;color:#4A4F58;font-weight:bold;margin:16px 0 8px;position:relative}
+.valide-form .bk-label .bk-info-add{position:absolute;font-size:12px;color:#E15616;right:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);text-decoration:underline;cursor:pointer}
+.valide-form .bk-label span,.valide-form .bk-label i{font-weight:normal;font-style:normal}
+.valide-form .bk-label em{color:#f56c6c;font-style:normal}
+.valide-form .bk-label i{color:#FFB496}
+.valide-form .bk-status{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px}
+.valide-form .bk-literature-list{margin-bottom:32px}
+.valide-form .bk-literature-list li{margin-top:16px}
+.valide-form .bk-literature-list li:first-child{margin-top:0}
+.valide-form .bk-control{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;margin-top:32px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .bk-control button{width:230px;height:48px;border:1px solid #E15616;text-align:center;border-radius:2px;font-size:18px;cursor:pointer}
+.valide-form .bk-control .bk-back{background:#FFE6DC;color:#E15616}
+.valide-form .bk-control .bk-confirm{background:#E15616;color:#FFFFFF}
+.valide-form .bk-form-item{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}
+.valide-form .bk-form-item .bk-section{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px;margin-left:16px}
+.valide-form .bk-form-item .bk-section span{color:#E15616;text-decoration:underline;font-size:12px;white-space:nowrap;cursor:pointer;line-height:initial}
+.valide-form .bk-form-item .bk-section .delete{position:absolute;top:0;right:-8px;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
+.valide-form .el-input{position:relative}
+.valide-form .el-input .bk-toolbar{position:absolute;top:0;left:0;font-size:14px;padding:6px 18px;background:#fff;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);border:1px solid #EEEEEE;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer;color:#9AA5B5;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.valide-form .el-input .bk-toolbar::after{content:"[1]"}
+.valide-form .el-input .bk-bubble{position:absolute;right:0;top:0;min-width:20px;-webkit-transform:translate(50%,-50%);-ms-transform:translate(50%,-50%);transform:translate(50%,-50%);height:20px;line-height:20px;border-radius:10px;background:#D7DCE4;color:#fff;font-size:14px;text-align:center;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}
+.valide-form .el-input .bk-mask{position:fixed;width:100vw;height:100vh;left:0;top:0;z-index:1}
+.valide-form .el-input .bk-literature{position:absolute;bottom:0;left:0;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);z-index:2;width:96%;background:#fff;border:1px solid #EEEEEE}
+.valide-form .bk-literature-list li{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}
+.valide-form .el-input .bk-literature li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;line-height:36px;padding:0 16px;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.valide-form .bk-literature-list li .bk-ref-control,.valide-form .el-input .bk-literature li .bk-ref-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:8px;-moz-column-gap:8px;column-gap:8px}
+.valide-form .bk-literature-list li .edit,.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .edit,.valide-form .el-input .bk-literature li .delete{display:block;width:18px;height:18px;background:url("/img/encyclopedia/assets/pc-icon-edit.png") no-repeat center;background-size:18px;cursor:pointer}
+.valide-form .bk-literature-list li .delete,.valide-form .el-input .bk-literature li .delete{background-image:url("/img/encyclopedia/assets/pc-icon-delete.png")}
+.valide-form .el-input .bk-input{line-height:initial;height:initial;padding-top:8px;padding-bottom:8px}
+.valide-form .bk-form-item-group{position:relative;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}
+.valide-form .bk-form-item-group .el-form-item:first-child{width:30%;-ms-flex-negative:0;flex-shrink:0}
+.valide-form .bk-form-item-group .el-form-item:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-negative:0;flex-shrink:0}
+.valide-form .bk-form-item-group .bk-info-remove{position:absolute;right:0;top:12px;-webkit-transform:translateX(140%);-ms-transform:translateX(140%);transform:translateX(140%);color:#F94B4B;font-size:12px;cursor:pointer}
+.bk-file-upload{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.bk-file-upload .bk-upload{position:relative;width:92px;height:92px;border:1px dashed #E2E7EF;font-size:14px;color:#9AA5B5;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;line-height:initial;cursor:pointer}
+.bk-file-upload .bk-upload div:first-child{font-size:40px;font-weight:lighter}
+.bk-file-upload .bk-upload div:last-child{font-size:14px}
+.bk-file-upload .bk-file-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:16px;-moz-column-gap:16px;column-gap:16px}
+.bk-file-upload .bk-file-wrap li{position:relative;width:90px;height:90px;border:1px dashed #E2E7EF}
+.bk-file-upload .bk-file-wrap span{position:absolute;right:0;top:0;z-index:1;width:20px;height:20px;background:#F94B4B;text-align:center;line-height:20px;color:#fff;font-size:14px;cursor:pointer}
+.bk-file-upload .bk-file-wrap img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}
+.bk-file-upload .bk-file-wrap video{display:block;width:100%;height:100%}
+.bk-dialog .mask{position:fixed;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,.6);z-index:1000}
+.bk-dialog .bk-dialog-container{position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:750px;height:526px;background:#fff;z-index:1001;-webkit-box-sizing:border-box;box-sizing:border-box;padding:32px 0 32px 32px}
+.bk-dialog .bk-dialog-container .bk-dialog-close{position:absolute;width:24px;height:24px;font-size:32px;right:24px;top:16px;text-align:center;line-height:24px;color:#9AA5B5;font-weight:lighter;cursor:pointer}
+.bk-dialog .bk-dialog-container .bk-dialog-content{height:350px;overflow-y:auto;padding-right:32px}
+.bk-dialog .bk-tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:56px;-moz-column-gap:56px;column-gap:56px;margin-bottom:36px}
+.bk-dialog .bk-tab .bk-tab-item{font-size:16px;color:#22272E;border-bottom:3px solid #fff;padding-bottom:2px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.bk-dialog .bk-tab .bk-tab-item.active{border-color:#E15616}
+.bk-dialog .bk-literature-list li{margin-top:10px;background:#F5F5F5;color:#999999;font-size:14px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;line-height:36px;padding:0 16px}
+.bk-dialog .bk-literature-list li:first-child{margin-top:0}
+.bk-dialog .bk-literature-list li a{color:#22272E}
+.bk-dialog .bk-literature-list li a:hover{text-decoration:underline;color:#E15616}
+.bk-dialog .bk-literature-list li a:hover i{background-image:url("/img/encyclopedia/assets/pc-icon-link-hover.png")}
+.bk-dialog .bk-literature-list li i{display:inline-block;vertical-align:middle;width:18px;height:18px;background-image:url("/img/encyclopedia/assets/pc-icon-link.png");background-repeat:no-repeat;background-position:center;background-size:18px;cursor:pointer}
+.bk-dialog .bk-literature-list li>i{background-image:url("/img/encyclopedia/assets/pc-icon-img.png")}
+.bk-dialog .bk-literature-list li>i:hover{background-image:url("/img/encyclopedia/assets/pc-icon-img-hover.png")}
+.bk-dialog .bk-dialog-footer{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;margin-top:20px}
+.bk-dialog .bk-dialog-footer button{width:80px;height:30px;text-align:center;line-height:28px;font-size:14px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.bk-dialog .bk-dialog-footer .bk-cancel{border:1px solid #B8BFCA;color:#22272E;background:#fff}
+.bk-dialog .bk-dialog-footer .bk-confirm{background:#E15616;color:#fff}
+.scapegoat.hover{background-color:#ddd}
+.bk-agreement-mask{top:0;left:0;position:fixed;z-index:1000;width:100vw;height:100vh;background:rgba(0,0,0,0.6)}
+.bk-agreement{position:fixed;z-index:1001;width:750px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:#fff}
+.bk-agreement .bk-header{position:relative;height:64px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#FFF6F2}
+.bk-agreement .bk-header span{font-size:18px;color:#22272E;font-weight:bold}
+.bk-agreement .bk-header i{position:absolute;width:24px;height:24px;font-size:16px;color:#9AA5B5;right:16px;top:16px;line-height:24px;text-align:center}
+.bk-agreement .bk-desc{font-size:14px;color:#999999;line-height:24px;text-align:center;margin:32px 0 0;padding-bottom:16px}
+.bk-agreement .bk-desc a{color:#E15616}
+.bk-agreement .bk-content{height:450px;overflow-y:auto;padding:0 40px}
+.bk-agreement .bk-content h2{position:relative;font-size:14px;color:#22272E;margin-bottom:16px;margin-top:32px}
+.bk-agreement .bk-content h2::before{content:"";display:block;width:4px;height:12px;background:#E15616;position:absolute;top:50%;left:0;-webkit-transform:translate(-250%,-40%);-ms-transform:translate(-250%,-40%);transform:translate(-250%,-40%)}
+.bk-agreement .bk-content p{color:#666666;line-height:24px;margin:12px 0}
+.bk-agreement .bk-content p span{color:#22272E}
+.bk-agreement .bk-control{padding:40px 0;text-align:center}
+.bk-agreement .bk-control button{font-size:16px;color:#fff;width:295px;height:50px;background:#E15616;border-radius:4px;cursor:pointer}

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

@@ -0,0 +1,41 @@
+.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(5),.bk-list .bk-td:nth-child(9){width:80px}
+.bk-list .bk-td:nth-child(7),.bk-list .bk-td:nth-child(8){width:100px}
+.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 span.active{background: #e15616; color: #fff;border-color: #e15616}
+.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/base.js

@@ -951,4 +951,22 @@ function debounce(func, wait = 200, immediate = false) {
         }
         return result;
     };
-}
+}
+
+/* 深度克隆 */
+function deepClone(obj, cache = new WeakMap()) {
+    if (typeof obj !== 'object') return obj // 普通类型，直接返回
+    if (obj === null) return obj
+    if (cache.get(obj)) return cache.get(obj) // 防止循环引用，程序进入死循环
+    if (obj instanceof Date) return new Date(obj)
+    if (obj instanceof RegExp) return new RegExp(obj)
+    // 找到所属原型上的constructor，所属原型上的constructor指向当前对象的构造函数
+    let cloneObj = new obj.constructor()
+    cache.set(obj, cloneObj) // 缓存拷贝的对象，用于处理循环引用的情况
+    for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            cloneObj[key] = deepClone(obj[key], cache) // 递归拷贝
+        }
+    }
+    return cloneObj
+}

src/main/resources/static/js/common/serviceapi/shopBaike.service.js

@@ -0,0 +1,104 @@
+var shopBikeApi = {
+    // 供应商百科获取分类下拉列表值
+    FetchTypeList: function (callback) {
+        Http.AjaxService({
+            url: '/commodity/get/type/list',
+            type: 'get',
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 查询供应商词条信息
+    FetchEntryList: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/authuser/list',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 修改状态  0保存草稿箱  1已发布
+    UpdateEntryStatus: function(params, callback) {
+        Http.AjaxService({
+            url: '/commodity/up/entry/status',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id删除词条
+    RemoveEntryById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/del/entry',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 查询供应商词条详细信息（供应商界面点击编辑按钮时）
+    FetchEntryDetail: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/entry/info/by/id',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id删除参考资料
+    RemoveReferenceById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/del/Reference',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 根据id查询参考资料（点击参考资料编辑按钮时）
+    FetchReferenceById: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/get/Reference',
+            type: 'get',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+
+    // 保存资料（添加编辑的资料保存按钮
+    SaveEntrySumbit: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/save/entry/info',
+            type: 'post',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    }
+}

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

@@ -1,417 +1,140 @@
-"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);
-        }
-    });
+var isPC = true
+
+function useRem() {
+    let dw = 750 // 设计图宽度
+    let sw = window.innerWidth // 屏幕宽度
+    let fontSize = (sw / dw * 100)// 方案1
+    let oHtml = document.getElementsByTagName('html')[0]
+    if (sw > 768) {
+        isPC = true
+        oHtml.style.fontSize = '16px'
+    } else {
+        oHtml.style.fontSize = fontSize + 'px'
+        isPC = false
+    }
 }
 
-/**
- * 菜单栏折叠展开 父子容器
- * @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
-        });
-    });
+/* 获取用户信息 */
+function getUserData(data) {
+    const userData = {
+        account: data.account,
+        email: data.email,
+        phone: data.bindMobile,
+        name: data.name,
+        userName: data.userName,
+        userId: data.userId,
+        spId: data.serviceProviderId,
+        clubId: data.clubId,
+        shopId: data.shopId,
+        userIdentity: data.userIdentity,
+        permission: data.userPermission,
+        token: data.token,
+        vipFlag: data.vipFlag,
+        firstClubType: data.firstClubType,
+        listingFee: data.listingFee
+    }
+    return userData
 }
 
-/**
- * 设置高亮
- * @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
-            });
+/* 用户登录 */
+function userLogin(params) {
+    UserApi.PostLoginAccount(params, function (response) {
+        if (response.code === -1) {
+            CAIMEI.Alert(response.msg, '确定', false);
+            return
+        }
+        const userData = getUserData(response.data)
+        // 当前登录用户为供应商时
+        if (userData.userIdentity === 3) {
+            localStorage.setItem('userInfo', JSON.stringify(userData));
+            CAIMEI.dialog('登录成功，请稍等~', false);
+            setTimeout(() => {
+                window.open('/supplier/encyclopedia/edit.html', '_blank')
+                location.reload()
+            }, 300)
         } else {
-            callback({
-                sticky: false,
-                scrollTop: scrollTop
-            });
+            CAIMEI.dialog('请使用供应商账号登录~', false);
         }
     });
 }
 
-/**
- *
- * @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);
+$(function () {
+    useRem();
+    $(window).on('resize', function () {
+        useRem();
+    })
+    let menuActive = false
+    let searchActive = false
+    let slideVerifyStatus = 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
+    })
+    // 发布百科
+    $('.bk-publish').on('click', function () {
+        const userInfoStr = localStorage.getItem('userInfo')
+        const globalUserData = userInfoStr ? JSON.parse(userInfoStr) : null
+        /* 未登录 || 非供应商账号 */
+        if (globalUserData && globalUserData.userIdentity === 3) {
+            window.open('/supplier/encyclopedia/edit.html', '_blank')
             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);
+        $('.bk-login').fadeIn()
+        const SlideVerifyPlug = window.slideVerifyPlug;
+        new SlideVerifyPlug('#slide-verify', {
+            initText: '请向右滑动滑块', //设置  初始的 显示文字
+            sucessText: '验证通过', //设置 验证通过 显示的文字
+            getSuccessState: (status) => {
+                slideVerifyStatus = status
+                $('.bk-submit').removeClass('bk-disabled')
             }
-        });
-    });
-}
-
-/**
- * 动态生成侧边导航
- * @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);
+        })
+    })
+    $('.bk-login .mask').on('click', function () {
+        $('.bk-login').fadeOut();
+        slideVerifyStatus = false
+        $('.bk-submit').addClass('bk-disabled')
     });
-    $(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'
-            });
+    $('#searchForm').on('submit', function () {
+        const keyword = $('#searchInput').val()
+        if (!keyword) {
+            CAIMEI.Alert('搜索词条不能为空', '确定', false);
+            return false
         }
-    }); // 为按钮绑定事件
-
-    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);
+        location.href = '/encyclopedia/search.html?keyword=' + keyword
+        return false
+    })
+    $('#loginForm').on('submit', function () {
+        if (!slideVerifyStatus) return false
+        const params = {};
+        $(this).serializeArray().forEach((item) => {
+            params[item.name] = item.value;
+        })
+        if (!params.mobileOrEmail || !params.password) {
+            CAIMEI.Alert('账号或密码不能为空', '确定', false);
         } 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');
-            }
+            userLogin(params)
         }
+        return false
     })
-}
-
-/**
- * 将导航滚动到激活位置
- * @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;
+    $('.bk-nav .bk-navbar a').each(function(index, item){
+        $(item).parents('li').removeClass('active')
+        if(location.href.indexOf($(item).attr('href')) > -1){
+            $(item).parents('li').addClass('active')
         }
-    });
-});
+    })
+})
+

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

@@ -1,108 +1,69 @@
-"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) {
+    const section = $('.bk-section')
+    section.find('h2').each(function (index, item) {
+        const fristTitle = 'heading-' + (index + 1);
+        const fristTitleItem = $('<li></li>');
+        const a = $('<a></a>')
+        const text = flag ? (index + 1) + '、' + $(item).text() : $(item).text();
+        a.text(text)
+        a.attr('href', 'javascript:void(0)')
+        a.attr('data-id', fristTitle)
+        fristTitleItem.append(a)
+        $(container).append(fristTitleItem)
+        $(item).attr('id', fristTitle)
+        if (flag) {
+            let subTitle = $('<ul></ul>')
+            fristTitleItem.append(subTitle)
+            $(item).parent().nextUntil('.bk-title').each(function (i, el) {
+                if (el.nodeName !== 'H3') return
+                const subTitleItem = $('<li></li>')
+                const a = $('<a></a>')
+                a.text($(el).text())
+                a.attr('href', 'javascript:void(0)')
+                a.attr('data-id', fristTitle + i)
+                subTitleItem.append(a)
+                subTitle.append(subTitleItem)
+                $(el).attr('id', fristTitle + i)
+            })
+        }
+    })
 }
 
 $(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');
-        });
-    });
+    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;
+    })
 
-    $('#contactPopupBtn').on('click', function () {
-        $('#contactPopup').show();
-    });
-    $('#contactPopupClose').on('click', function () {
-        $('#contactPopup').hide();
-    });
+    $('img.scapegoat').on('click', function () {
+        const id = $(this).attr('data-ctrid')
+        $("html, body").animate({
+            scrollTop: $('#' + id).offset().top
+        }, {duration: 500, easing: "swing"});
+    })
 
-    // 切换显示侧边导航
-    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);
+    $('.bk-literature-list i').on('click', function(){
+        const id = $(this).parent('li').attr('id')
+        if(!id) return
+        const selector = '[data-ctrid=' + id + ']'
+        $("html, body").animate({
+            scrollTop: $(selector).eq(0).offset().top - 150
+        }, {duration: 500, easing: "swing"});
+    })
 
     // 视频播放
-    $('.related-video .video-control .play').on('click', function(){
-        var videoUrl = $(this).siblings('video').attr('src');
+    $('.bk-album .bk-play').on('click', function(){
+        const 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/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/encyclopedia/old/search.js

@@ -0,0 +1,108 @@
+"use strict";
+var search = new Vue({
+    el: '#search',
+    data: {
+        listQuery: {
+            keyword: '',
+            pageSize: 12,
+            pageNum: 1,
+            productFlag: 1, // 是否统计关键词 1 统计 0 不统计
+            linkageFlag: 0 // 关键词来源是否为用户搜索 0 是 1 不是
+        },
+        searchList: [], // 查询列表
+        totalRecord: 0,
+        totalPage: 0,
+        jumpInput: 1
+    },
+    filters: {
+        // 处理url
+        formatUrl: function (item) {
+            if (item.commodityType === 1) {
+                return 'product-' + item.productId + '.html';
+            } else {
+                return 'instrument-' + item.productId + '.html';
+            }
+        }
+    },
+    computed: {
+        // 页码
+        pagination: function () {
+            return this.makePagination(this.listQuery.pageNum, this.totalPage);
+        }
+    },
+    mounted: function () {
+        this.initSearchWord();
+        this.fetchSearchList();
+    },
+    methods: {
+        // 初始化关键字
+        initSearchWord: function () {
+            var query = this.queryString(window.location.search.slice(1));
+            document.querySelector('#searchKeyword').value = query.keyword;
+            this.listQuery.keyword = query.keyword || '';
+            this.listQuery.linkageFlag = query.linkageFlag || 0
+        },
+        // 获取查询列表
+        fetchSearchList: function () {
+            var self = this;
+            EncyclopediaApi.FetchListByKeyword(this.listQuery, function (res) {
+                if (res.code === 0) {
+                    var data = res.data;
+                    self.listQuery.pageNum = data.pageNum;
+                    self.searchList = data.results;
+                    self.totalRecord = data.totalRecord;
+                    self.totalPage = data.totalPage;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        // 页码切换
+        pageChange: function (pageNum) {
+            console.log(pageNum);
+            if (pageNum < 1 || pageNum > this.totalPage) return;
+            this.listQuery.pageNum = pageNum;
+            this.fetchSearchList();
+        },
+        // 根据关键词进行标题格式化
+        formatFromKeyword: function (name) {
+            var reg = new RegExp(this.listQuery.keyword, 'ig');
+            return name.replace(reg, function ($1) {
+                return '<span style="color: #e15616">' + $1 + '</span>';
+            });
+        },
+        // 处理url参数 返回参数键值对
+        queryString: function (queryStr) {
+            var queryStrList = decodeURI(queryStr).split('&');
+            var query = Object.create(null);
+            queryStrList.forEach(function (str) {
+                var temp = str.split('=');
+                var key = temp[0];
+                var val = temp[1] || '';
+                query[key] = val;
+            });
+            return query;
+        },
+        // 处理页码
+        makePagination: function (pageNum, totalPage) {
+            // 页码列表
+            var arr = [];
+            // 初始化页码列表
+            for (var i = 1; i <= totalPage; i++) {
+                arr[i - 1] = i;
+            }
+            if (totalPage <= 7) return arr;
+            // 查找当前页码在页码列表中的位置
+            var pop = arr.indexOf(pageNum);
+            // 截取页码
+            if (pageNum < 4) {
+                arr = arr.splice(pop + 1 - pageNum, 6);
+            } else if (pageNum > totalPage - 3) {
+                arr = arr.reverse().splice(0, 6).reverse();
+            } else {
+                arr = arr.splice(pop - 2, 5);
+            }
+            return arr;
+        }
+    }
+});

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

@@ -1,108 +1,60 @@
-"use strict";
-var search = new Vue({
-    el: '#search',
+const searchList = new Vue({
+    el: '#searchList',
     data: {
         listQuery: {
-            keyword: '',
-            pageSize: 12,
-            pageNum: 1,
-            productFlag: 1, // 是否统计关键词 1 统计 0 不统计
-            linkageFlag: 0 // 关键词来源是否为用户搜索 0 是 1 不是
+            shopId: '',
+            id: '', //词条id,
+            name: '', //词条名称
+            typeId: '', //分类id
+            auditStatus: 2, //百科审核状态：1待审核，2审核通过，3审核失败
+            onlineStatus: 2, //百科上线状态：1待上线，2已上线，3已下线
+            status: '', //状态：0保存草稿箱，1已发布
+            pageNum: 1, //页数
+            pageSize: 10 //条数
         },
-        searchList: [], // 查询列表
-        totalRecord: 0,
         totalPage: 0,
-        jumpInput: 1
-    },
-    filters: {
-        // 处理url
-        formatUrl: function (item) {
-            if (item.commodityType === 1) {
-                return 'product-' + item.productId + '.html';
-            } else {
-                return 'instrument-' + item.productId + '.html';
-            }
-        }
+        totalRecord: 0,
+        hasNextPage: false,
+        list: [],
     },
-    computed: {
-        // 页码
-        pagination: function () {
-            return this.makePagination(this.listQuery.pageNum, this.totalPage);
-        }
+    created() {
+        this.listQuery.name = decodeURIComponent(CAIMEI.getUrlParam('keyword'))
+        this.$nextTick(() => {
+            $('#searchInput').val(this.listQuery.name)
+        })
+        this.getList()
     },
-    mounted: function () {
-        this.initSearchWord();
-        this.fetchSearchList();
+    mounted() {
+        const self = this
+        window.addEventListener('scroll', debounce(function () {
+            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
+            if (document.body.scrollHeight <= window.screen.height + scrollTop) {
+                console.log('已经滚动到底部了')
+                if (!self.hasNextPage) return
+                self.getList()
+            }
+        }))
     },
     methods: {
-        // 初始化关键字
-        initSearchWord: function () {
-            var query = this.queryString(window.location.search.slice(1));
-            document.querySelector('#searchKeyword').value = query.keyword;
-            this.listQuery.keyword = query.keyword || '';
-            this.listQuery.linkageFlag = query.linkageFlag || 0
-        },
-        // 获取查询列表
-        fetchSearchList: function () {
-            var self = this;
-            EncyclopediaApi.FetchListByKeyword(this.listQuery, function (res) {
-                if (res.code === 0) {
-                    var data = res.data;
-                    self.listQuery.pageNum = data.pageNum;
-                    self.searchList = data.results;
-                    self.totalRecord = data.totalRecord;
-                    self.totalPage = data.totalPage;
-                } else {
-                    CAIMEI.Alert(res.msg, '确定', false);
-                }
-            });
-        },
-        // 页码切换
-        pageChange: function (pageNum) {
-            console.log(pageNum);
-            if (pageNum < 1 || pageNum > this.totalPage) return;
-            this.listQuery.pageNum = pageNum;
-            this.fetchSearchList();
-        },
-        // 根据关键词进行标题格式化
-        formatFromKeyword: function (name) {
-            var reg = new RegExp(this.listQuery.keyword, 'ig');
-            return name.replace(reg, function ($1) {
-                return '<span style="color: #e15616">' + $1 + '</span>';
-            });
-        },
-        // 处理url参数 返回参数键值对
-        queryString: function (queryStr) {
-            var queryStrList = decodeURI(queryStr).split('&');
-            var query = Object.create(null);
-            queryStrList.forEach(function (str) {
-                var temp = str.split('=');
-                var key = temp[0];
-                var val = temp[1] || '';
-                query[key] = val;
-            });
-            return query;
+        filterList() {
+            this.listQuery.pageNum = 1
+            this.getList()
         },
-        // 处理页码
-        makePagination: function (pageNum, totalPage) {
-            // 页码列表
-            var arr = [];
-            // 初始化页码列表
-            for (var i = 1; i <= totalPage; i++) {
-                arr[i - 1] = i;
+        getList() {
+            const self = this
+            if (this.listQuery.pageNum > this.totalPage) {
+                this.listQuery.pageNum = this.totalPage
             }
-            if (totalPage <= 7) return arr;
-            // 查找当前页码在页码列表中的位置
-            var pop = arr.indexOf(pageNum);
-            // 截取页码
-            if (pageNum < 4) {
-                arr = arr.splice(pop + 1 - pageNum, 6);
-            } else if (pageNum > totalPage - 3) {
-                arr = arr.reverse().splice(0, 6).reverse();
-            } else {
-                arr = arr.splice(pop - 2, 5);
+            if (this.listQuery.pageNum < 1) {
+                this.listQuery.pageNum = 1
             }
-            return arr;
+            shopBikeApi.FetchEntryList(this.listQuery, function (res) {
+                self.list = [...self.list, ...res.data.results]
+                self.totalPage = res.data.totalPage
+                self.hasNextPage = res.data.hasNextPage
+                self.totalRecord = res.data.totalRecord
+                self.listQuery.pageNum++
+            })
         }
     }
-});
+})

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

@@ -0,0 +1,295 @@
+/** 生成uuid的方法 */
+function uuid(len = 16, radix = 16) {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
+    const value = []
+    let i = 0
+    radix = radix || chars.length
+    if (len) {
+        for (i = 0; i < len; i++) value[i] = chars[0 | (Math.random() * radix)]
+    } else {
+        let r
+        value[8] = value[13] = value[18] = value[23] = '-'
+        value[14] = '4'
+        for (i = 0; i < 36; i++) {
+            if (!value[i]) {
+                r = 0 | (Math.random() * 16)
+                value[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r]
+            }
+        }
+    }
+    return value.join('')
+}
+
+class ContentEdit {
+    constructor(options) {
+        this.options = {
+            markCountKey: 'markCount',
+            ...options
+        }
+        this.container = document.querySelector(options.el)
+        this.hiddenMark = options.hiddenMark
+        this.selection = null
+        this.range = null
+        this.ctrid = '' // 当前标记id
+        this.ctridList = []
+        this.registEventListener()
+    }
+
+    get innerHTML() {
+        return this.container.innerHTML
+    }
+
+    /** 开始节点 */
+    get startContainer() {
+        return this.isTextNode(this.range.startContainer) ? this.range.startContainer : this.range.endContainer
+    }
+
+    /** 结束节点 */
+    get endContainer() {
+        return this.isTextNode(this.range.endContainer) ? this.range.endContainer : this.range.startContainer
+    }
+
+    /** 选中文本类容 */
+    get selectionText() {
+        return this.selection.toString()
+    }
+
+    /** 开始节点与结束接单公共父节点 */
+    get commonNode() {
+        return this.isTextNode(this.range.commonAncestorContainer)
+            ? this.range.commonAncestorContainer.parentNode
+            : this.range.commonAncestorContainer
+    }
+
+    /** 开始节点的最外层节点 */
+    get startNode() {
+        return this.getTopNode(this.commonNode, this.startContainer)
+    }
+
+    /** 结束节点的最外层节点 */
+    get endNode() {
+        return this.getTopNode(this.commonNode, this.endContainer)
+    }
+
+    /** 开始节点与结束节点之间的节点列表 */
+    get centerNodes() {
+        if (this.startNode === this.endNode) return []
+        if (this.startNode.nextSibling === this.endNode) return []
+        return this.nextUntil(this.startNode, this.endNode)
+    }
+
+    initCtridList(){
+        const nodeList = this.container.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (!this.ctridList.includes(id)){
+                this.ctridList.push(id)
+            }
+        })
+    }
+
+    /** 文本选中变动 */
+    selectionChange() {
+        this.selection = document.getSelection()
+        if (this.selection.type.toLowerCase() !== 'range') return
+        this.range = this.selection.getRangeAt(0)
+    }
+
+    /** 包裹 */
+    parcel(ctrid, index) {
+        this.ctrid = ctrid ? ctrid : uuid()
+        this.markNum = index
+        this.ctridList.push(this.ctrid)
+        try {
+            this.parcelNode(this.commonNode, this.centerNodes)
+            this.parcelStartNode(this.startContainer)
+            this.parcelEndNode(this.endContainer)
+            this.parcelNodeContent()
+            this.selection.removeAllRanges()
+            this.options.change && this.options.change(this.innerHTML)
+            return this.ctrid
+        } catch (e) {
+            console.log(e)
+            return this.ctrid
+        }
+    }
+
+    /** 包裹元素 */
+    parcelNode(container, nodeList = []) {
+        if (nodeList.length === 0) return
+        const parcel = this.createParcel()
+        container.insertBefore(parcel, nodeList[0])
+        nodeList.forEach((node) => {
+            container.removeChild(node)
+            parcel.appendChild(node)
+        })
+    }
+
+    /** 包裹开始元素 */
+    parcelStartNode(node) {
+        if (node === this.commonNode) return
+        if (node === this.startNode) return
+        this.parcelNode(node.parentNode, this.nextAll(node))
+        this.parcelStartNode(node.parentNode)
+    }
+
+    /** 包裹结束元素 */
+    parcelEndNode(node) {
+        if (node === this.commonNode) return
+        if (node === this.endNode) return
+        this.parcelNode(node.parentNode, this.prevAll(node))
+        this.parcelEndNode(node.parentNode)
+    }
+
+    /** 包裹开始结束节点内容 */
+    parcelNodeContent() {
+        const mark = this.createMark()
+        // 开始节点与结束节点相同
+        if (this.startContainer === this.endContainer) {
+            const prefixText = this.startContainer.nodeValue.substring(0, this.range.startOffset)
+            const centerText = this.startContainer.nodeValue.substring(this.range.startOffset, this.range.endOffset)
+            const suffixText = this.startContainer.nodeValue.substring(this.range.endOffset)
+            const prefix = document.createTextNode(prefixText)
+            const suffix = document.createTextNode(suffixText)
+            const parcel = this.createParcel()
+            parcel.innerText = centerText
+            const fragment = this.createFragment([prefix, parcel, mark, suffix])
+            this.startContainer.parentNode.replaceChild(fragment, this.startContainer)
+        } else {
+            // 开始节点
+            const prefixText = this.startContainer.nodeValue.substring(0, this.range.startOffset)
+            const startText = this.startContainer.nodeValue.substring(this.range.startOffset)
+            const prefix = document.createTextNode(prefixText)
+            const startSpan = this.createParcel()
+            startSpan.innerText = startText
+            const startFragment = this.createFragment([prefix, startSpan])
+            this.startContainer.parentNode.replaceChild(startFragment, this.startContainer)
+            // 结束节点
+            const endText = this.endContainer.nodeValue.substring(0, this.range.endOffset)
+            const suffixText = this.endContainer.nodeValue.substring(this.range.endOffset)
+            const suffix = document.createTextNode(suffixText)
+            const endSpan = this.createParcel()
+            endSpan.innerText = endText
+            const endFragment = this.createFragment([endSpan, mark, suffix])
+            this.endContainer.parentNode.replaceChild(endFragment, this.endContainer)
+        }
+    }
+
+    /** 标记清除 */
+    unParcel(ctrid) {
+        this.ctridList = this.ctridList.filter((item) => item !== ctrid)
+        const nodeList = this.container.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (id !== ctrid) return
+            const parentNode = node.parentNode
+            if (node.nodeName === 'IMG') {
+                parentNode.removeChild(node)
+            } else if (node.nodeName === 'SPAN') {
+                const fragment = this.createFragment(node.childNodes)
+                parentNode.replaceChild(fragment, node)
+            }
+            // 清除空节点
+            parentNode.normalize()
+        })
+        this.options.change && this.options.change(this.innerHTML)
+        this.ctridList = this.ctridList.filter(item => item !== ctrid)
+    }
+
+    /** 创建标记 */
+    createMark() {
+        if (this.hiddenMark) return document.createDocumentFragment()
+        const img = document.createElement('img')
+        const index = this.markNum || window[this.options.markCountKey]
+        img.classList.add('scapegoat')
+        img.setAttribute('height', 20)
+        img.setAttribute('data-ctrid', this.ctrid)
+        img.setAttribute('src', `https://baikebcs.bdimg.com/cms/wiki-react-editor/ref/${index}.svg`)
+        img.addEventListener('mouseover', (e) => this.markMouseOver(e))
+        img.addEventListener('mouseleave', (e) => this.markMouseLeave(e))
+        img.addEventListener('click', (e) => this.markMouseClick(e))
+        return img
+    }
+
+    /** 创建片段 */
+    createFragment(chidlren = []) {
+        const fragment = document.createDocumentFragment()
+        chidlren.forEach((node) => {
+            fragment.appendChild(node)
+        })
+        return fragment
+    }
+
+    /** 鼠标放在标记上 */
+    markMouseOver(e) {
+        const ctrid = e.target.getAttribute('data-ctrid')
+        const nodeList = document.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (id === ctrid) {
+                node.classList.add('hover')
+            }
+        })
+    }
+
+    /** 鼠标从标记上移开 */
+    markMouseLeave(e) {
+        const ctrid = e.target.getAttribute('data-ctrid')
+        const nodeList = document.querySelectorAll('.scapegoat')
+        nodeList.forEach((node) => {
+            const id = node.getAttribute('data-ctrid')
+            if (id === ctrid) {
+                node.classList.remove('hover')
+            }
+        })
+    }
+
+    /* 注册事件监听 */
+    registEventListener() {
+        // 获取文本选中
+        this.container.addEventListener('focus', () => {
+            document.addEventListener('selectionchange', () => this.selectionChange())
+        })
+        this.container.addEventListener('blur', () => {
+            this.options.change && this.options.change(this.innerHTML)
+            document.removeEventListener('selectionchange', () => this.selectionChange())
+        })
+    }
+
+    /** 获取节点元素 */
+    getTopNode(parent, node) {
+        if (parent === node.parentNode) return node
+        return this.getTopNode(parent, node.parentNode)
+    }
+
+    /** 开始节点与结束节点之间的节点列表 */
+    nextUntil(startNode, endNode) {
+        if (startNode.nextSibling === endNode) return []
+        return [startNode.nextSibling, ...this.nextUntil(startNode.nextSibling, endNode)]
+    }
+
+    /** 获取紧接着之后兄弟节点 */
+    nextAll(node) {
+        if (!node.nextSibling) return []
+        return [node.nextSibling, ...this.nextAll(node.nextSibling)]
+    }
+
+    /** 获取紧接着之前的兄弟节点 */
+    prevAll(node) {
+        if (!node.previousSibling) return []
+        return [node.previousSibling, ...this.prevAll(node.previousSibling)]
+    }
+
+    /** 是文本节点 */
+    isTextNode(node) {
+        return node.nodeType === 3
+    }
+
+    /** 创建包裹元素 */
+    createParcel() {
+        const parcel = document.createElement('span')
+        parcel.classList.add('scapegoat')
+        parcel.setAttribute('data-ctrid', this.ctrid)
+        return parcel
+    }
+}

src/main/resources/static/js/supplier-center/encyclopedia/components/content-edit/index.js

@@ -0,0 +1,97 @@
+let editIdIndex = 0
+const contentEdit = {
+    name: 'content-edit',
+    template: `
+    <div class="el-input" :id="editId">
+        <div class="bk-toolbar" @click="handleToolBarClick" v-show="isFocus"></div>
+        <div class="bk-bubble" @click="handleBubbleClick" v-show="bubbleNum>0">{{bubbleNum}}</div>
+        <div class="el-input__inner bk-input" contenteditable="plaintext-only" @focus="isFocus = true" @blur="onBlur" v-html="value"></div>
+        <ul class="bk-literature" v-show="showBubble && bubbleNum>0">
+            <li v-for="item in refList" :key="item.ctrlId">
+                <div>{{item | reference}}</div>
+                <div class="bk-ref-control">
+                    <span class="edit" @click="$emit('reference-edit', item)"></span>
+                    <span class="delete" @click="handleDeleteReference(item)"></span>
+                </div>    
+            </li>
+        </ul>
+        <div class="bk-mask" @click="showBubble=false" v-if="showBubble && bubbleNum>0"></div>
+    </div>
+    `,
+    filters: {
+        reference(data) {
+            if (data.referenceType === 1) return data.articleName
+            if (data.referenceType === 2) return data.author + '.' + data.workName
+            return data.referenceDescription + '.' + data.imageDescription
+        }
+    },
+    model: {
+        event: 'change',
+        prop: 'value'
+    },
+    props: {
+        referenceList: {
+            type: Array,
+            default: () => []
+        },
+        value: {
+            type: String,
+            default: ''
+        },
+    },
+    data() {
+        return {
+            editId: `myEdit` + ++editIdIndex,
+            isFocus: false,
+            showBubble: false,
+            contentEdit: null
+        }
+    },
+    computed: {
+        refList() {
+            if (!this.contentEdit) return []
+            return this.referenceList.filter(item => this.contentEdit.ctridList.includes(item.ctrlId))
+        },
+        bubbleNum() {
+            return this.refList.length
+        }
+    },
+    mounted() {
+        this.initEdit();
+    },
+    methods: {
+        // 初始化
+        initEdit() {
+            this.contentEdit = new ContentEdit({
+                el: `#${this.editId} .bk-input`,
+                hiddenMark: false,
+                markCountKey: 'markCount',
+                change: (html) => {
+                    this.$emit('change', html)
+                }
+            })
+            setTimeout(()=>{
+                this.contentEdit.initCtridList()
+            }, 1000)
+        },
+        // 失去焦点
+        onBlur() {
+            setTimeout(() => {
+                this.isFocus = false
+            }, 200)
+        },
+        // 工具栏点击
+        handleToolBarClick() {
+            this.$emit('toolbar', this.contentEdit)
+        },
+        // 气泡点击
+        handleBubbleClick() {
+            if (this.bubbleNum === 0) return
+            this.showBubble = !this.showBubble
+        },
+        // 删除标记点
+        handleDeleteReference(item) {
+            this.contentEdit.unParcel(item.ctrlId)
+        }
+    }
+}

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

@@ -0,0 +1,533 @@
+const ImageUpload = {
+    name: 'file-upload',
+    template: `
+        <div>
+            <input type="file" v-show="false" ref="fileInput" @change="handleFileChange" accept=".png,.jpg,.jpeg,.gif,.mp4"/>
+            <div class="bk-file-upload">
+                <template v-if="limit > list.length">
+                    <div class="bk-upload" @click="handleChooseFile"><div>+</div><div>添加图片</div></div>
+                </template>
+                <ul class="bk-file-wrap" v-if="list.length > 0">
+                    <template v-for="(item, index) in list">
+                        <li :key="index">
+                            <span @click="handleRemove(item)">×</span>
+                            <img :src="item.url" v-if="isImage(item)"/>
+                            <video :src="item.url" v-else></video>
+                        </li>
+                    </template>
+                </ul>
+            </div>
+        </div>
+    `,
+    props: {
+        limit: {
+            type: Number,
+            default: 1
+        },
+        list: {
+            type: Array,
+            default: () => []
+        }
+    },
+    data() {
+        return {
+            fileList: []
+        }
+    },
+    methods: {
+        isImage(file) {
+            return file.type.indexOf('image') > -1
+        },
+        handleChooseFile() {
+            this.$refs.fileInput.click();
+        },
+        handleRemove(file) {
+            this.$emit('remove', file)
+        },
+        generageRowfile(file) {
+            return {
+                uuid: uuidv4(),
+                fileName: file.name,
+                size: file.size,
+                type: file.type,
+                file: file,
+                percentage: 0,
+                status: -1, // 0 上次失败 1 上传成功 2 上传中 -1 待上传
+                response: null,
+                url: '',
+                checkpoint: null
+            }
+        },
+        handleFileChange(e) {
+            const self = this
+            let flag = true
+            this.fileList = Array.from(e.target.files).map(function (file) {
+                if (file.size > 1024 * 1024 * 50) {
+                    CAIMEI.dialog('请上传50MB以内的图片或视频', false);
+                    flag = false
+                }
+                return self.generageRowfile(file)
+            })
+            if (!flag) return
+            this.onUploadFile(this.fileList)
+        },
+        // 文件上传成功
+        onUploadSuccess(file, response, url) {
+            file.response = response
+            file.status = 1
+            file.url = url
+            this.$emit('upload-success', this.fileList)
+        },
+        // 文件上传失败
+        onUploadError(file, error) {
+            file.response = error
+            file.status = 0
+            this.$emit('upload-error', this.fileList)
+        },
+        // 文件上传进度条
+        onProgress(file, response) {
+            const {p, cpt, res} = response
+            file.percentage = p * 100
+            file.checkpoint = cpt
+            file.response = res
+            file.status = 2
+            this.$emit('upload-progress', this.fileList)
+        },
+        // 上传文件
+        onUploadFile(fileList) {
+            upload(fileList, {
+                success: this.onUploadSuccess,
+                faild: this.onUploadError,
+                progress: this.onProgress
+            })
+        }
+    }
+}
+
+var markCount = 0
+
+function validateWebsite(rule, value, callback){
+    if(/[a-zA-z]+:\/\/[^\s]*/.test(value)){
+        callback()
+    }else{
+        callback(new Error('请输入合法的网址'))
+    }
+}
+
+function validateTimeStr(rule, value, callback){
+    if(/^\d{4}-\d{1,2}-\d{1,2}/.test(value)){
+        callback()
+    }else{
+        callback(new Error('时间格式不合法（示例：1970-01-01）'))
+    }
+}
+
+function initReferenceData(){
+    return {
+        id: 1,
+        ctrlId: '', // 关联id
+        /* （网络资料） */
+        referenceType: 1, // '参考类型资料（1.网络；2.著作；3.其他）'
+        website: '',
+        articleName: '',
+        websiteName: '',
+        publishTimeStr: '',
+        acitationTimeStr: '',
+        /* 著作资料）*/
+        author: '',
+        workName: '',
+        publicationPlace: '',
+        press: '',
+        publicationYearStr: '',
+        acitationWeb: '',
+        /* （其他资料） */
+        referenceDescription: '',
+        imageDescription: '',
+        imageUrl: '',
+        entryId: '',
+        entryType: ''
+    }
+}
+
+const edit = new Vue({
+    el: '#edit',
+    components: {
+        [contentEdit.name]: contentEdit,
+        [ImageUpload.name]: ImageUpload
+    },
+    filters: {
+        reference(data) {
+            if (data.referenceType === 1) return data.articleName
+            if (data.referenceType === 2) return data.author + '.' + data.workName
+            return data.referenceDescription + '.' + data.imageDescription
+        }
+    },
+    data: {
+        isPC: window.innerWidth > 768,
+        referenceType: 1, // 添加 | 引用参考资料类型
+        referenceDialog: false, // 参考资料表单弹窗
+        referenceEditType: 'add', // 参考资料编辑类型 add 添加 edit 编辑
+        contentEdit: null, // 编辑器
+        showAgreement: false,
+        // 提交表单数据
+        formData: {
+            shopId:'',
+            id: '', // 词条id
+            name: '', // 词条名称
+            alias: '', // 义项名
+            discription: '', // 词条概述
+            image: '', // 头图地址
+            typeId: '', // 分类id
+            seoKeyword: '', // seo关键字
+            status: 0, // 状态0保存草稿箱  1已发布
+            infoList: [], //  信息栏集合
+            referenceList: [], // 参考资料集合
+            textInfoList: [],
+            imageList: [], // 概述图册集合
+            videoList: [], // 视频集合
+        },
+        // 提交表单校验
+        rules: {
+            name: [{required: true, message: '词条名称不能为空', trigger: ['blur']}],
+            alias: [{required: true, message: '义项名不能为空', trigger: ['change']}],
+            discription: [{required: true, message: '词条概述不能为空', trigger: ['change']}],
+            img: [{required: true, message: '请上传词条头图', trigger: ['change']}],
+            typeId: [{required: true, message: '请选择词条分类', trigger: ['change']}],
+            status: [{required: true, message: '请选择词条发布状态', trigger: ['change']}],
+        },
+        // 参考资料信息表单
+        referenceData: initReferenceData(),
+        // 参考资料表单规则校验
+        referenceRule: {
+            referenceType: [{required: true, message: '请选择参考类型资料', trigger: ['change']}],
+            website: [
+                {required: true, message: '请输入网址', trigger: ['blur']},
+                { validator: validateWebsite, trigger: 'blur' }
+            ],
+            articleName: [{required: true, message: '请输入文章名字', trigger: ['blur']}],
+            websiteName: [{required: true, message: '请输入网站名称', trigger: ['blur']}],
+            author: [{required: true, message: '请输入作者名称', trigger: ['blur']}],
+            workName: [{required: true, message: '请输入著作名', trigger: ['blur']}],
+            press: [{required: true, message: '请输入出版社', trigger: ['blur']}],
+            publicationYearStr: [{required: true, message: '请输入出版年', trigger: ['blur']}],
+            referenceDescription: [{required: true, message: '请输入参考资料说明', trigger: ['blur']}],
+        },
+        // 上传文件列表
+        fileList: [],
+        // 上传封面列表
+        coverList: [],
+        //词条类型列表
+        typeList: [],
+        // 敏感词校验数据
+        formValidate: {},
+        referenceImageList: []
+    },
+    created() {
+        this.formData.id = CAIMEI.getUrlParam('id')
+        this.fetchTypeList()
+        // 如果是编辑就获取表单数据
+        if(this.formData.id){
+            this.fetchEntryData()
+        }else{
+            this.showAgreement = true
+            this.initFormDataList()
+        }
+    },
+    mounted(){
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+    methods: {
+        // 获取表单数据
+        fetchEntryData(){
+            const self = this
+            shopBikeApi.FetchEntryDetail({id: this.formData.id}, function(res){
+                self.initFormData(res.data)
+            })
+        },
+        // 初始化表单数据
+        initFormData(data){
+            for (const key in this.formData) {
+                if(data.hasOwnProperty(key)){
+                    this.formData[key] = data[key]
+                }
+            }
+            const imageList = this.formData.imageList.map(item =>{
+                return {url: item.image, type: 'image'}
+            })
+            const videoList = this.formData.videoList.map(item =>{
+                return {fileName: item.fileName, uuid: item.ossName, url: item.url, type: 'video'}
+            })
+            this.fileList = [...imageList, ...videoList]
+            if(this.formData.image){
+                this.coverList = [{ url: this.formData.image, type: 'image' }]
+            }
+            const infoSize = 4 - this.formData.infoList.length
+            const textInfoSize = 4 - this.formData.textInfoList.length
+            this.initFormDataList( infoSize, textInfoSize)
+            window.markCount = this.formData.referenceList.length
+        },
+
+        // 获取图片列表
+        filterImageList(fileList) {
+            const imageList = fileList.filter(file => file.type.indexOf('image') > -1)
+            return imageList.map(file => ({entryId: '', image: file.url}))
+        },
+        // 获取视频列表
+        filterVideoList(fileList) {
+            const imageList = fileList.filter(file => file.type.indexOf('video') > -1)
+            return imageList.map(file => ({
+                entryId: '',
+                fileTitle: file.fileName,
+                fileName: file.fileName,
+                ossName: file.uuid,
+                ossUrl: file.url
+            }))
+        },
+        // 提交表单
+        async handleConfirm() {
+            try {
+                if(this.showAgreement){
+                    CAIMEI.dialog('请先阅读编辑须知协议', false);
+                    return
+                }
+                this.formData.shopId = GLOBAL_SHOP_ID
+                this.formData.imageList = this.filterImageList(this.fileList)
+                this.formData.videoList = this.filterVideoList(this.fileList)
+                await this.$refs.ruleForm.validate()
+                const params = {
+                    shopId: this.formData.shopId,
+                    id: this.formData.id, // 词条id
+                    name: this.formData.name, // 词条名称
+                    alias: this.formData.alias, // 义项名
+                    discription: this.formData.discription, // 词条概述
+                    image: this.formData.image, // 头图地址
+                    typeId: this.formData.typeId, // 分类id
+                    seoKeyword: this.formData.seoKeyword, // seo关键字
+                    status: this.formData.status, // 状态0保存草稿箱  1已发布
+                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
+                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
+                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
+                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
+                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                };
+                this.sensitiveWordsValidate(params)
+            } catch (e) {
+                console.log(e)
+                this.socrllToErrorWord()
+            }
+        },
+        /// 确定提交
+        onReallySave(params) {
+            const self = this
+            shopBikeApi.SaveEntrySumbit(params, function (res) {
+                CAIMEI.dialog('词条保存成功', false);
+                setTimeout(function () {
+                    self.handleBack()
+                }, 500)
+            })
+        },
+        // 获取词条分类
+        fetchTypeList() {
+            const slef = this
+            shopBikeApi.FetchTypeList(function (res) {
+                slef.typeList = res.data
+            })
+        },
+
+        // 初始化表单列表项数据
+        initFormDataList(infoSize = 4, textInfoSize = 4) {
+            for (let i = 0; i < infoSize; i++) {
+                this.formData.infoList.push(this.genereateInfo())
+            }
+            for (let i = 1; i < textInfoSize; i++) {
+                this.formData.textInfoList.push(this.genereateTextInfo(i))
+            }
+        },
+
+        // ref dialog 隐藏
+        handleRefDialogClose() {
+            this.referenceData = initReferenceData()
+            this.$refs.referenceForm.clearValidate()
+            this.referenceDialog = false
+            this.referenceType = 1
+        },
+        // 提交确定ref
+        async handleConfirmReference() {
+            try {
+                await this.$refs.referenceForm.validate()
+                if (this.referenceEditType === 'add') {
+                    markCount+=1
+                    this.referenceData.ctrlId = this.contentEdit.parcel()
+                    this.formData.referenceList.push(deepClone(this.referenceData))
+                } else {
+                    const index = this.formData.referenceList.findIndex(ref => ref.ctrlId === this.referenceData.ctrlId);
+                    this.formData.referenceList.splice(index, 1, deepClone(this.referenceData))
+                }
+                this.referenceEditType = 'add'
+                this.referenceData = initReferenceData()
+                this.$refs.referenceForm.clearValidate()
+                this.referenceDialog = false
+            } catch (e) {
+                console.log(e)
+            }
+        },
+        handleSelectReference(item, index) {
+            this.referenceDialog = false
+            this.contentEdit.parcel(item.ctrlId, index+1)
+        },
+        handleReferenceTypeChange(value){
+            this.$refs.referenceForm.resetFields()
+            this.referenceData.referenceType = value
+        },
+        // ref tab 切换
+        handleTabChange(index) {
+            this.referenceType = index;
+        },
+        // 新增参考资料，从已有参考资料选取
+        handleToolbarClick(e) {
+            this.contentEdit = e
+            this.referenceDialog = true
+        },
+        // 参考资料修改
+        handleReferenceEdit(item) {
+            this.referenceEditType = 'edit'
+            this.referenceData = {
+                ...this.referenceType,
+                ...item
+            }
+            this.referenceDialog = true
+            if(this.referenceData.imageUrl){
+                this.referenceImageList = [{ url: this.referenceData.imageUrl, type: 'image' }]
+            }
+        },
+        // 参考资料删除
+        handleReferenceDelete(item) {
+            this.formData.referenceList = this.formData.referenceList.filter(ref => ref.ctrlId !== item.ctrlId)
+        },
+        // 信息栏数据
+        genereateInfo() {
+            return {
+                entryId: '',
+                infoName: '',
+                infoContent: '',
+            }
+        },
+        // 新增信息栏
+        handleInfoAdd() {
+            this.formData.infoList.push(this.genereateInfo())
+        },
+        // 删除信息栏
+        handleInfoRemove(index) {
+            this.formData.infoList.splice(index, 1)
+        },
+        // 正文目录数据
+        genereateTextInfo(type) {
+            let placeholderList = ['一级目录', '二级目录', '内容']
+            return {
+                id: '',
+                entryId: '',
+                dictionaryContent: '',
+                dictionaryType: type,
+                referenceId: '',
+                textType: '',
+                parentId: '',
+                placeholder: placeholderList[type - 1]
+            }
+        },
+        // 添加正文目录
+        handleAddTextInfo(index, type) {
+            this.formData.textInfoList.splice(index + 1, 0, this.genereateTextInfo(type))
+        },
+        // 删除正文目录
+        handleRemoveTextInfo(index, type) {
+            this.formData.textInfoList.splice(index, 1)
+        },
+        // 文件上传成功
+        handleUploadSuccess(fileList) {
+            this.fileList = [...this.fileList, ...fileList]
+        },
+        // 文件移除
+        handleFileRemove(file) {
+            this.fileList = this.fileList.filter(item => item.uuid !== file.uuid);
+        },
+        // 封面上传成功
+        handleCoverUploadSuccess(fileList) {
+            this.coverList = fileList
+            this.formData.image = fileList[0].url
+        },
+        // 封面删除
+        handleCoverRemove(file) {
+            this.formData.image = ''
+            this.coverList = this.coverList.filter(item => item.uuid !== file.uuid);
+        },
+        // 资料图片上传
+        handleReferenceImageUploadSuccess(fileList){
+            this.referenceImageList = fileList
+            this.referenceData.imageUrl = fileList[0].url
+        },
+        handleReferenceImageRemove(){
+            this.referenceImageList = []
+            this.referenceData.imageUrl = ''
+        },
+        // 返回文章列表页面
+        handleBack() {
+            window.open('/supplier/encyclopedia/list.html', 'supplier-entry-list');
+            window.close();
+        },
+        // 敏感词校验
+        sensitiveWordsValidate(params) {
+            const whiteList = [];
+            const self = this;
+            SupplierApi.ShopBaikeProductWordsValidate({checkPoint: 2}, function (res) {
+                console.log(res)
+                let flag = true
+                for (const key in params) {
+                    if (!whiteList.includes(key)) {
+                        const target = JSON.stringify(params[key])
+                        const bool = new RegExp(res.data, 'g').test(target)
+                        if (bool) {
+                            const value = self.matchWords(target, res.data)
+                            self.$set(self.formValidate, key, value)
+                            flag = false
+                        } else {
+                            self.$set(self.formValidate, key, '')
+                        }
+                    }
+                }
+                if (flag) return self.onReallySave(params)
+                console.log(self.formValidate)
+                const tip = '当前发布内容存在敏感词，已为您标记在输入框下方，请修改后，再进行保存发布，强行保存发布将会导致审核不通过！'
+                self.$confirm(tip, '提示', {confirmButtonText: '保存', cancelButtonText: '取消'}).then(function () {
+                    self.onReallySave(params)
+                }).catch(function () {
+                    self.socrllToErrorWord() // 滚动到提示处
+                })
+            })
+        },
+
+        // 匹配敏感词
+        matchWords(word, validate) {
+            const list = []
+            const matcher = word.matchAll(new RegExp(validate, 'g'))
+            let done = false
+            while (!done) {
+                const item = matcher.next()
+                done = item.done
+                if (item.value) {
+                    list.push(item.value[0])
+                }
+            }
+            return list.join(',')
+        },
+
+        socrllToErrorWord() {
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parents('.el-form-item').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() - 60
+                }, 800)
+            })
+        },
+    }
+})

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

@@ -0,0 +1,132 @@
+const list = new Vue({
+    el: '#list',
+    filters: {
+        dateFormat(date) {
+            if (!date) return
+            return dateFormat(new Date(date), 'yyyy-MM-dd')
+        }
+    },
+    data: {
+        windowName: 'supplier-entry-list',
+        isPC: window.innerWidth > 768,
+        listQuery: {
+            shopId: '',
+            id: '', //词条id,
+            name: '', //词条名称
+            typeId: '', //分类id
+            auditStatus: '', //百科审核状态：1待审核，2审核通过，3审核失败
+            onlineStatus: '', //百科上线状态：1待上线，2已上线，3已下线
+            status: '', //状态：0保存草稿箱，1已发布
+            pageNum: 1, //页数
+            pageSize: 10 //条数
+        },
+        totalPage: 0,
+        hasNextPage: false,
+        list: [],
+        typeList: []
+    },
+    computed: {
+        pagiantion(){
+            const total = this.totalPage > 0 ? this.totalPage : 1;
+            const index = this.listQuery.pageNum,arr = [];
+            if (total <= 6) {
+                for (let i = 1; i <= total; i++) { arr.push(i); }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    created() {
+        this.getList()
+        this.fetchEntryTypeList()
+    },
+    mounted() {
+        window.name = this.windowName
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+    methods: {
+        // 页码跳转
+        hanldePageClick(item){
+            if(item === this.listQuery.pageNum) return
+            this.listQuery.pageNum = item
+            this.getList()
+        },
+        filterList() {
+            this.listQuery.pageNum = 1
+            this.getList()
+        },
+        getList() {
+            const self = this
+            if(this.listQuery.pageNum > this.totalPage){
+                this.listQuery.pageNum = this.totalPage
+            }
+            if(this.listQuery.pageNum < 1){
+                this.listQuery.pageNum = 1
+            }
+            this.listQuery.shopId = GLOBAL_SHOP_ID
+            shopBikeApi.FetchEntryList(this.listQuery, function (res) {
+                self.list = res.data.results
+                self.totalPage = res.data.totalPage
+                self.hasNextPage = res.data.hasNextPage
+            })
+        },
+        // 添加词条
+        handleAddEntery() {
+            window.open('/supplier/encyclopedia/edit.html');
+        },
+        // 发布词条
+        handlePublishEntry(item) {
+            const self = this
+            shopBikeApi.UpdateEntryStatus({id: item.id, status: 1}, function (res) {
+                CAIMEI.dialog('词条已发布', false);
+                self.getList()
+            })
+        },
+        // 保存草稿箱
+        handleStorageEntry(item) {
+            const self = this
+            shopBikeApi.UpdateEntryStatus({id: item.id, status: 0}, function (res) {
+                CAIMEI.dialog('词条已保存到草稿箱', false);
+                self.getList()
+            })
+        },
+        // 编辑词条
+        handleEditEntry(item) {
+            window.open('/supplier/encyclopedia/edit.html?id=' + item.id);
+        },
+        // 词条详情
+        handleDetailEntry(item) {
+            if (item.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
+            if (item.onlineStatus !== 2) return CAIMEI.dialog('请等待上线后查看!');
+            if (!item.status) return CAIMEI.dialog('请发布后查看!');
+            window.open('/encyclopedia/detail-' + item.id + '.html');
+        },
+        // 删除词条
+        handleRemoveEntry(item) {
+            const slef = this
+            const params = {
+                content: '确认删除该词条?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除',
+                closeIcon: true
+            };
+            CAIMEI.Popup(params, function () {
+                shopBikeApi.RemoveEntryById({id: item.id}, function () {
+                    CAIMEI.dialog('词条已删除', false);
+                    slef.getList()
+                })
+            });
+        },
+        // 获取词条分类
+        fetchEntryTypeList() {
+            const self = this
+            shopBikeApi.FetchTypeList(function (res) {
+                self.typeList = res.data
+            })
+        }
+    }
+
+})

src/main/resources/static/js/utils.js

@@ -346,3 +346,31 @@ function fetchDaysByYear(year, month) {
   }
   return days;
 }
+
+/**
+ * 防抖
+ * @param {Function} func 需要包装的函数
+ * @param {string} wait 等待执行时间
+ * @param {string} immediate 是否是立即执行 默认不立即执行
+ * @returns {Function} 返回包装后的函数
+ */
+function debounce(func, wait = 200, immediate = false) {
+    let timeout, result
+    return function () {
+        const context = this
+        const args = arguments
+        if (timeout) clearTimeout(timeout)
+        if (immediate) {
+            const 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
+    }
+}

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

@@ -4,32 +4,55 @@
 <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 href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/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,21 @@
-<!-- 底部 -->
-<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 type="text/javascript" src="/lib/slideVerify.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery-confirm.min.js"></script>
+<script th:src="@{/js/common/ajax.service.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>
+<script th:src="@{/js/common/serviceapi/user.service.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></script>
+<script th:src="@{/js/utils.js(v=${version})}" xmlns:th="https://www.thymeleaf.org"></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,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>
+<header xmlns:th="https://www.thymeleaf.org">
+    <div class="bk-header">
+        <div class="bk-container">
+            <div class="bk-logo">
+                <a th: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" id="searchForm">
+                    <div class="bk-search-control">
+                        <label><input id="searchInput" type="text" placeholder="搜索词条"/></label>
+                        <button type="submit">搜索</button>
+                    </div>
+                </form>
+                <ul class="bk-hot-keyword">
+                    <li th:each="item : ${hotSeracherWords}" th:object="${item}" th:if="${(item.jumpType eq 1) or (item.jumpType eq 4)}">
+                        <a th:href="'/encyclopedia/search.html?keyword=' + *{keyWord}" th:if="*{jumpType eq 1}" th:text="*{keyWord}"></a>
+                        <a th:href="*{jumpLink}" th:if="*{jumpType eq 4}" th:text="*{keyWord}" target="_blank"></a>
+                    </li>
+                </ul>
             </div>
         </div>
     </div>
-</header>
+    <div class="bk-nav">
+        <ul class="bk-navbar bk-container">
+            <li th:each="item,stat : ${TypeList}" th:object="${item}" th:if="${stat.index < 8}">
+                <a th:href="'/encyclopedia/list-' + *{typeId} + '.html'" th:text="*{name}"></a>
+            </li>
+            <li><a href="/encyclopedia/about.html">走进百科</a></li>
+        </ul>
+    </div>
+</header>

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

@@ -0,0 +1,167 @@
+<!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 href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/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" th:text="${baikeproduct.name}"></div>
+        </div>
+    </div>
+    <div class="bk-detail bk-container" th:object="${baikeproduct}">
+        <div class="only-mobile bk-entry-name">
+            <div class="bk-name" th:text="*{name}"></div>
+        </div>
+        <div class="bk-detail-left">
+            <div class="bk-name" th:utext="*{alias}"></div>
+            <div class="bk-overview" th:utext="*{discription}"></div>
+            <div class="bk-information only-pc">
+                <div class="bk-row" th:each="row : *{infoListPC}">
+                    <th:block th:each="col : ${row}">
+                        <div class="bk-label" th:text="${col.infoName}"></div>
+                        <div class="bk-content" th:utext="${col.infoContent}"></div>
+                    </th:block>
+                </div>
+            </div>
+            <div class="bk-information only-mobile">
+                <div class="bk-row" th:each="item :*{infoList}">
+                    <div class="bk-label" th:text="${item.infoName}"></div>
+                    <div class="bk-content" th:utext="${item.infoContent}"></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" th:each="item : *{imageList}">
+                            <img th:src="${item.image}" th:if="${item.type == 1}">
+                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
+                            <span class="bk-play" th:if="${item.type == 2}"></span>
+                        </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">
+                <th:block th:each="item : *{textInfoList}">
+                    <div class="bk-title" th:if="${item.dictionaryType == 1}">
+                        <h2 th:utext="${item.dictionaryContent}">美容作用</h2>
+                        <div class="line"></div>
+                    </div>
+                    <h3 th:if="${item.dictionaryType == 2}" th:utext="${item.dictionaryContent}"></h3>
+                    <div class="bk-section-content" th:if="${item.dictionaryType == 3}" th:utext="${item.dictionaryContent}"></div>
+                </th:block>
+            </div>
+            <div class="bk-literature">
+                <div class="bk-title">
+                    <div>参考资料</div>
+                    <div class="line"></div>
+                </div>
+                <ul class="bk-literature-list">
+                    <th:block th:each="item,stat :*{referenceList}">
+                        <li th:if="${item.referenceType == 1}" th:id="${item.ctrlId}">
+                            [<em th:text="${stat.index+1}">1</em>]
+                            <i></i>
+                            <a class="link" th:href="${item.website}" th:text="${item.articleName}"></a>.
+                            <span th:text="${item.websiteName}"></span>
+                            <span th:if="${item.acitationTimeStr}">[引用日期:<span th:text="${item.acitationTimeStr}"></span>]</span>
+                        </li>
+                        <li th:if="${item.referenceType == 2}" th:id="${item.ctrlId}">
+                            [<em th:text="${stat.index+1}">1</em>]
+                            <i></i>
+                            <span th:text="${item.author}"></span>
+                            <span th:text="${item.workName}"></span>：
+                            <span th:text="${item.press}"></span>，
+                            <span th:text="${item.publicationYearStr}"></span>
+                        </li>
+                        <li th:if="${item.referenceType == 3}" th:id="${item.ctrlId}">
+                            [<em th:text="${stat.index+1}">1</em>]
+                            <i></i>
+                            <span th:text="${item.referenceDescription}"></span>
+                            <span th:text="${item.imageDescription}"></span>
+                            <a class="image" th:href="${item.imageUrl}" th:text="${item.articleName}" target="_blank">图片</a>
+                        </li>
+                    </th:block>
+                </ul>
+            </div>
+            <div class="bk-pv">
+                <div class="bk-pv-item">浏览次数：<span th:text="*{pv}"></span></div>
+                <div class="bk-pv-item" th:text="*{publishTimeStr}"></div>
+            </div>
+        </div>
+        <div class="bk-detail-right only-pc">
+            <div class="bk-album" th:if="*{#lists.size(imageList) ne 0}">
+                <div class="swiper-container" id="album">
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide" th:each="item : *{imageList}">
+                            <img th:src="${item.image}" th:if="${item.type == 1}">
+                            <video th:src="${item.videoUrl}" th:if="${item.type == 2}"></video>
+                            <span class="bk-play" th:if="${item.type == 2}"></span>
+                        </div>
+                    </div>
+                    <div class="swiper-pagination"></div>
+                </div>
+                <div class="bk-title"><span th:text="*{name}"></span>的概述图册</div>
+            </div>
+            <div class="bk-company" th>
+                <img th:src="*{shopLogo} ? *{shopLogo} : '/img/base/placeholder.png'">
+                <div class="bk-title" th:text="*{shopName}">上海品辉医疗科技有限公司</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>
+
+<!-- 视频播放弹窗 -->
+<div class="video-popup" style="display: none;" id="video-popup">
+    <div class="mask"></div>
+    <span class="close"></span>
+    <div class="content">
+        <video controls></video>
+    </div>
+</div>
+
+<!-- 底部区域 -->
+<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,80 @@
+<!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 href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/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>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<!-- 顶部公共区域 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 顶部公共区域 end -->
+
+<main>
+    <!-- banner区域 -->
+    <a th:href="${Typedata.bannerLink}" th:if="Typedata.bannerLink">
+        <div class="bk-banner">
+            <img th:src="${Typedata.pcBanner} ? ${Typedata.pcBanner} : '/img/encyclopedia/assets/pc-banner.png'" alt="采美百科" class="only-pc">
+            <img th:src="${Typedata.appBanner} ? ${Typedata.appBanner} : '/img/encyclopedia/assets/h5-banner.png'" alt="采美百科" class="only-mobile">
+        </div>
+    </a>
+    <div class="bk-banner" th:if="!Typedata.bannerLink">
+        <img th:src="${Typedata.pcBanner} ? ${Typedata.pcBanner} : '/img/encyclopedia/assets/pc-banner.png'" alt="采美百科" class="only-pc">
+        <img th:src="${Typedata.appBanner} ? ${Typedata.appBanner} : '/img/encyclopedia/assets/h5-banner.png'" alt="采美百科" class="only-mobile">
+    </div>
+    <!-- banner区域 end -->
+    <!-- 百科列表区域 -->
+    <div class="bk-list bk-container">
+        <a th:href="'/encyclopedia/detail-' + ${item.id} + '.html'" class="bk-list-item" th:each="item : ${authUserList}" th:object="${item}">
+            <div class="bk-cover"><img th:src="*{image}" th:alt="*{name}"/></div>
+            <div class="bk-info">
+                <h2 th:text="*{name}"></h2>
+                <div class="bk-info-desc" th:utext="*{discription}"></div>
+                <div class="bk-info-footer"><span>浏览量：<span th:text="*{pv lt 10000 ? pv : '9999+'}"></span></span><span th:text="*{publishTimeStr}"></span></div>
+            </div>
+        </a>
+    </div>
+    <!-- 百科列表区域 end -->
+</main>
+
+
+<!-- 发布词条 -->
+<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 id="loginForm">
+            <div class="bk-input"><label><input id="mobileOrEmail" name="mobileOrEmail" placeholder="请登录您的供应商账号"/></label></div>
+            <div class="bk-input"><label><input type="password" id="password" name="password" placeholder="请输入密码"/></label></div>
+            <div class="verify-wrap" id="slide-verify"></div>
+            <button class="bk-disabled bk-submit">登陆</button>
+        </form>
+        <div class="bk-tools">
+            <a href="/supplier/register.html">免费注册</a>
+            <a href="/forget.html">忘记密码</a>
+        </div>
+<!--        <div class="bk-agreement">-->
+<!--            <input type="checkbox" id="agreement"/>-->
+<!--            <label for="agreement"></label>-->
+<!--            <span>请仔细阅读<a href="#">《采美百科协议》</a></span>-->
+<!--        </div>-->
+    </div>
+</div>
+
+
+<!-- 底部区域 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<!-- 底部区域 end -->
+</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>