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

src/main/java/com/caimei/www/controller/BaseController.java

@@ -32,7 +32,7 @@ public class BaseController {
     /** 错误页面 */
 	private static final String ERROR_PATH = "error/404";
 
-    private BaseService baseService;
+    public BaseService baseService;
     @Autowired
     public void setBaseService(BaseService baseService) {
         this.baseService = baseService;

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

@@ -48,14 +48,6 @@ public class EncyclopediaController extends BaseController {
         this.productService = productService;
     }
 
-    private BaseService baseService;
-
-    @Override
-    @Autowired
-    public void setBaseService(BaseService baseService) {
-        this.baseService = baseService;
-    }
-
     /**
      * 产品列表
      */

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

@@ -184,7 +184,7 @@ public class ProductServiceImpl implements ProductService {
         String dataUrl = coreServer + "/commodity/baike/page?commodityType=" + commodityType;
         try {
             String classifyResult = RequestUtil.sendGet(dataUrl);
-            log.debug(classifyResult);
+            log.info(classifyResult);
             Map<String, Object> classifyMap = JSONObject.parseObject(classifyResult, Map.class);
             return (JSONArray) classifyMap.get("data");
         } catch (Exception e) {

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

@@ -7,7 +7,7 @@
 .article .section .title h2{font-size:20px;font-weight:bold;color:#4a4f58}
 .article .section .title .line{width:100%;height:1px;background:#e3e6eb;margin-top:4px}
 .article .section .title .line::before{content:"";display:block;width:20px;height:1px;background:#e15616}
-.article .section .content{padding-top:24px}
+.article .section .content{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}
@@ -18,7 +18,7 @@
 .article .section.description .content .content-left .alias{color:#93979f;margin-left:40px}
 .article .section.description .content .cover{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
 .article .section.description .content .cover img{width:120px;height:120px}
-.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb}
+.article .section.params .tr{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{width:50%;line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}
@@ -38,6 +38,12 @@
 .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}
+.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}
 }
 @media screen and (max-width:768px){
 .flex,.flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group,.flex-between-center,.flex-center{display:-webkit-box;display:-ms-flexbox;display:flex}
@@ -58,7 +64,7 @@ body{padding-top:40.3vw}
 .article .section .title h2{font-size:3.6vw;font-weight:bold}
 .article .section .title .line{width:100%;height:1px;margin-top:1vw;background:#e3e6eb}
 .article .section .title .line::before{content:"";display:block;width:3.5vw;height:0.2vw;background:#e15616}
-.article .section .content{padding:3.2vw 0}
+.article .section .content{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}
@@ -68,6 +74,7 @@ body{padding-top:40.3vw}
 .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 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%}
@@ -78,4 +85,10 @@ body{padding-top:40.3vw}
 .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/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}
 }

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

@@ -72,8 +72,9 @@
 .floor .article .section a{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
 .floor .article .section .cover{margin-right:2.4vw}
 .floor .article .section .cover img{display:block;width:30.4vw;height:30.4vw;border:1px solid #e1e1e1}
-.floor .article .section .content h3{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold}
-.floor .article .section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw}
+.floor .article .section .content {flex: 1;}
+.floor .article .section .content h3{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold;word-break: break-all;}
+.floor .article .section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw; word-break: break-all;}
 .floor .article .section .content .question{height:10vw;margin:2.4vw 0}
 .floor .article .section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:2.6vw;line-height:5vw;color:#93979f}
 .floor .article .section .content .question p:last-child{display:none}
@@ -86,7 +87,7 @@
 .search-floor{margin-top:0;padding:0}
 .search-floor .search-title{position:fixed;top:29.5vw;left:0;z-index:999;width:100vw;line-height:10vw;padding:0 4vw;background:#f5f5f5;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box}
 .search-floor .search-title span{color:#e15616}
-.search-floor .emtyp{padding:10vw 0 4vw;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:75vh}
+.search-floor .emtyp{display: flex; padding:10vw 0 4vw;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:75vh}
 .search-floor .emtyp p{margin-top:5vw;font-size:3.2vw;color:#4a4f58}
 .search-floor .article{padding:10vw 4vw 0}
 .search-floor .article .section:first-child{border-top:0}

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

@@ -0,0 +1,34 @@
+@media screen and (min-width:768px){
+.pagination-container{width:100%;margin-top: 24px; 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}
+.pagination-container ul.pagination,.pagination-container .tool,.pagination-container .tool .total,.pagination-container .tool .jump{display:inline-block}
+.pagination-container ul.pagination{padding:0;margin:0}
+.pagination-container ul.pagination li{display:inline}
+.pagination-container ul.pagination li span,.pagination-container ul.pagination li a{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;width:20px;height:40px;line-height:40px;font-size:16px;color:#2d3036;border-radius:2px;text-align:center}
+.pagination-container ul.pagination li a{width:40px;margin:0 5px;border:1px solid #ebecef;background:#fff}
+.pagination-container ul.pagination li a:hover{background-color:#e15616;color:white}
+.pagination-container ul.pagination li.active a{background-color:#e15616;color:white}
+.pagination-container .tool{height:40px;line-height:40px;margin-left:5px;color:#93979f;font-size:14px}
+.pagination-container .tool .total,.pagination-container .tool .jump{display:inline-block;overflow:hidden}
+.pagination-container .tool .total span{color:#2d3036}
+.pagination-container .tool .jump{margin-left:5px}
+.pagination-container .tool .jump .pagenum-input{display:inline-block;margin-right:5px}
+.pagination-container .tool .jump .pagenum-input input{-webkit-box-sizing:border-box;box-sizing:border-box;width:80px;height:40px;color:#2d3036;margin:0 5px;line-height:40px;font-size:16px;border:1px solid #ebecef;outline:none;border-radius:2px;text-align:center}
+.pagination-container .tool .jump .jump-btn{display:inline-block;color:#e15616}
+}
+@media screen and (max-width:768px){
+.pagination-container{width:100%;margin-top: 2.4vw;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}
+.pagination-container ul.pagination,.pagination-container .tool,.pagination-container .tool .total,.pagination-container .tool .jump{display:inline-block}
+.pagination-container ul.pagination{padding:0;margin:0}
+.pagination-container ul.pagination li{display:inline;line-height:6.8vw}
+.pagination-container ul.pagination li span,.pagination-container ul.pagination li a{display:inline-block;width:3.4vw;height:6.8vw;line-height:6.8vw;font-size:2.6vw;color:#2d3036;border-radius:2px;text-align:center}
+.pagination-container ul.pagination li a{width:6.8vw;margin:0 0.4vw;border:1px solid #ebecef;background:#fff}
+.pagination-container ul.pagination li a:hover{background-color:#e15616;color:white}
+.pagination-container ul.pagination li.active a{background-color:#e15616;color:white}
+.pagination-container .tool{display:none;height:6.8vw;line-height:6.8vw;margin-left:1vw;color:#93979f;font-size:2.4vw}
+.pagination-container .tool .total,.pagination-container .tool .jump{display:inline-block;overflow:hidden}
+.pagination-container .tool .total span{color:#2d3036}
+.pagination-container .tool .jump{margin-left:5px}
+.pagination-container .tool .jump .pagenum-input{display:inline-block;margin-right:5px}
+.pagination-container .tool .jump .pagenum-input input{-webkit-box-sizing:border-box;box-sizing:border-box;width:13.4vw;height:6.8vw;color:#2d3036;margin:0 1vw;line-height:6.8vw;font-size:2.6vw;border:1px solid #ebecef;outline:none;border-radius:2px;text-align:center}
+.pagination-container .tool .jump .jump-btn{display:inline-block;color:#e15616}
+}

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

@@ -0,0 +1,30 @@
+/*
+* 采美百科api
+* */
+
+var EncyclopediaApi = {
+    /* 根据关键词搜索商品or仪器 */
+    FetchListByKeyword: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/search/query/baike/keyword',
+            type: 'GET',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    },
+    /* 更多商品or仪器楼层 */
+    FetchMoreFloorData: function (params, callback) {
+        Http.AjaxService({
+            url: '/commodity/baike/type',
+            type: 'GET',
+            data: params,
+            json: false,
+        })
+            .then(function (res) {
+                callback(res);
+            });
+    }
+};

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

@@ -2,6 +2,8 @@
 
 var scrollFlag = false;
 var navbarIndex = 0;
+var isPC = true;
+
 /**
  * 防抖
  * @param {*} func 执行数
@@ -11,32 +13,33 @@ var navbarIndex = 0;
  */
 
 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 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;
+    scrollFlag = false;
 }, 200);
+
 /**
  * 监听视窗大小
  * @param {*} size 视窗断点大小
@@ -44,18 +47,19 @@ var resetScrollFlag = debounce(function () {
  */
 
 function responseScreen(size, callback) {
-  var isPc = $(window).width() > size; // callback(isPc)
-
-  $(window).resize(function () {
-    if (!isPc && $(this).width() > size) {
-      isPc = true;
-      callback(isPc);
-    } else if (isPc && $(this).width() < size) {
-      isPc = false;
-      callback(isPc);
-    }
-  });
+    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 触发事件的元素
@@ -67,32 +71,33 @@ function responseScreen(size, callback) {
 
 
 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
+    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 节点选择器
@@ -101,17 +106,18 @@ function collapseToggle(bindEl, eventName, callback) {
 
 
 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);
+    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 监听的元素
@@ -119,24 +125,25 @@ var activeCategory = debounce(function (selector, index) {
  */
 
 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
-      });
-    }
-  });
+    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 需要获取的元素列表
@@ -144,16 +151,17 @@ function stickyResponse(el) {
 
 
 function getScrollOffset(offsetEl) {
-  if (typeof offsetEl === 'string') {
-    return $(offsetEl).height();
-  }
-
-  var height = 0;
-  offsetEl.forEach(function (el) {
-    height += $(el).height();
-  });
-  return height;
+    if (typeof offsetEl === 'string') {
+        return $(offsetEl).height();
+    }
+
+    var height = 0;
+    offsetEl.forEach(function (el) {
+        height += $(el).height();
+    });
+    return height;
 }
+
 /**
  * 侧边栏点击跳转
  * @param {*} selector 侧边栏节点选择器
@@ -164,22 +172,23 @@ function getScrollOffset(offsetEl) {
 
 
 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);
+    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 被观察的元素节点选择器
@@ -189,26 +198,27 @@ function bindCategory(selector, floorEl) {
 
 
 function pageScrollObserve(selector) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  var callback = arguments.length > 2 ? arguments[2] : undefined;
-  $(window).scroll(function () {
-    if (scrollFlag) return;
-    var scrollTop = $(this).scrollTop();
-
-    if (scrollTop < $(selector).eq(0).offset().top - offset) {
-      callback(null, -1);
-    }
-
-    $(selector).each(function (index, el) {
-      var offsetTop = $(el).offset().top - offset;
-      var height = $(el).height();
-
-      if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
-        callback(el, index);
-      }
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var callback = arguments.length > 2 ? arguments[2] : undefined;
+    $(window).scroll(function () {
+        if (scrollFlag) return;
+        var scrollTop = $(this).scrollTop();
+
+        if (scrollTop < $(selector).eq(0).offset().top - offset) {
+            callback(null, -1);
+        }
+
+        $(selector).each(function (index, el) {
+            var offsetTop = $(el).offset().top - offset;
+            var height = $(el).height();
+
+            if (scrollTop >= offsetTop && scrollTop < offsetTop + height) {
+                callback(el, index);
+            }
+        });
     });
-  });
 }
+
 /**
  * 动态生成侧边导航
  * @param {*} selector 从该节点元素中获取文本
@@ -217,18 +227,19 @@ function pageScrollObserve(selector) {
 
 
 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);
+    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
@@ -245,77 +256,89 @@ function makeNavigate(selector, bindEl) {
 
 
 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);
+    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);
     }
-    // 展开回调
-    options.open(floor);
-  }
-
-  // 全部收起
-  function closeMore(floor) {
-    floor.current = 1;
-    floor.hasMore = true;
-    floor.$floor.find(options.collapse).height(floor.height); // 收起回调
-    options.close(floor);
-  }
 } // 激活导航栏
 
 
 function activeNavbar(selector) {
-  var baseHref = window.location.href;
-  navbarIndex = localStorage.getItem('navbarIndex') || 0;
-  selector = $(selector);
-  selector.each(function (index, el) {
-    $(el).removeClass('active');
-    if ($(el).find('a').length > 0) {
-      var href = $(el).find('a').attr('href');
-      href = href.split('?')[0].split('#')[0];
-      if (baseHref.indexOf(href) > -1) {
-        navbarIndex = index;
-        localStorage.setItem('navbarIndex', navbarIndex)
-      }
-    }
-  });
-  selector.eq(navbarIndex).addClass('active');
+    var baseHref = window.location.href;
+    navbarIndex = localStorage.getItem('navbarIndex') || 0;
+    selector = $(selector);
+    selector.each(function (index, el) {
+        $(el).removeClass('active');
+
+        if ($(el).find('a').length > 0) {
+            var href = $(el).find('a').attr('href');
+            href = href.split('?')[0].split('#')[0];
+
+            if (baseHref.indexOf(href) > -1) {
+                navbarIndex = index;
+                localStorage.setItem('navbarIndex', navbarIndex);
+            }
+        }
+    });
+    selector.eq(navbarIndex).addClass('active');
 }
+
 /**
  * 将导航滚动到激活位置
  * @param {*} selector 导航元素
@@ -326,36 +349,44 @@ function activeNavbar(selector) {
 
 
 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');
+    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();
-  });
+    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 toSearchPage(){
+
+}
+
+
 $(function () {
-  activeNavbar('.navbar .nav li');
-  slideBarHandle('#menuBtn', 'flex');
-  slideBarHandle('#hotKeyword');
-  responseScreen(768, function () {
-    window.location.reload();
-  });
+    activeNavbar('.navbar .nav li');
+    slideBarHandle('#menuBtn', 'flex');
+    slideBarHandle('#hotKeyword');
+    responseScreen(768, function () {
+        window.location.reload();
+    });
 });

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

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

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

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

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

@@ -0,0 +1,87 @@
+var search = new Vue({
+    el: '#search',
+    data: {
+        listQuery: {
+            keyword: '',
+            pageSize: 6,
+            pageNum: 1
+        },
+        searchList: [],
+        hasNextPage: false,
+        total: 100,
+        totalPage: 10,
+        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 () {
+            const pageNum = this.listQuery.pageNum;
+            const pageNumList = [pageNum - 2, pageNum - 1, pageNum, pageNum + 1, pageNum + 2];
+            return pageNumList;
+        }
+    },
+    mounted: function () {
+        this.initSearchWord();
+        this.fetchSearchList();
+    },
+    methods: {
+        queryString: function (queryStr) {
+            const queryStrList = decodeURI(queryStr).split('&');
+            const query = Object.create(null);
+            queryStrList.forEach(function (str) {
+                const temp = str.split('=');
+                const key = temp[0];
+                const val = temp[1] || '';
+                query[key] = val;
+            });
+            return query
+        },
+        // 初始化关键字
+        initSearchWord: function () {
+            console.log(decodeURI(window.location.search.slice(1)));
+            const query = this.queryString(window.location.search.slice(1));
+            document.querySelector('#searchKeyword').value = query.keyword;
+            this.listQuery.keyword = query.keyword || '';
+        },
+        // 获取查询列表
+        fetchSearchList: function () {
+            const self = this;
+            EncyclopediaApi.FetchListByKeyword(this.listQuery, function (res) {
+                if (res.code === 0) {
+                    const data = res.data;
+                    self.hasNextPage = data.hasNextPage;
+                    self.listQuery.pageNum = data.pageNum;
+                    self.searchList = data.results;
+                    self.total = 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) {
+            const reg = new RegExp(this.listQuery.keyword, 'ig');
+            return name.replace(reg, function ($1) {
+                return '<span style="color: #e15616">' + $1 + '</span>'
+            });
+        }
+    }
+});

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

@@ -1,95 +1,113 @@
+"use strict";
 
-
-new Vue({
+var articleEdit = new Vue({
     el: '#articleEdit',
     mixins: [formMixin, uploadMixin],
     data: {
         NODE_ENV_BASE_URL: '',
         editor: null,
-        shopId: GLOBAL_SHOP_ID, // 供应商id
+        shopId: GLOBAL_SHOP_ID,
+        // 供应商id
         formData: {
-            articleId: 0, // 文章id
-            title: '', // 标题
-            articleContent: '', // 内容
-            guidanceImage: '', // 引导图
-            keyword: '', // seo关键词
-            label: '', // 标签
-            publisher: '', // 发布人
-            recommendContent: '', // 推荐语
-            source: '', // 来源
-            status: 1, // 状态
-            typeId: '', // 文章分类
+            articleId: 0,
+            // 文章id
+            title: '',
+            // 标题
+            articleContent: '',
+            // 内容
+            guidanceImage: '',
+            // 引导图
+            keyword: '',
+            // seo关键词
+            label: '',
+            // 标签
+            publisher: '',
+            // 发布人
+            recommendContent: '',
+            // 推荐语
+            source: '',
+            // 来源
+            status: 1,
+            // 状态
+            typeId: '' // 文章分类
+
         },
         articleLabels: [],
         chooseLabels: [],
         articleTypeList: [],
-        addLabelName: '',
+        addLabelName: ''
     },
     watch: {
-        chooseLabels: function (newVal) {
+        chooseLabels: function chooseLabels(newVal) {
             this.formData.label = newVal.join(',');
         },
-        'formData.label': function (newVal, oldVal) {
+        'formData.label': function formDataLabel(newVal, oldVal) {
             if (!newVal.trim()) {
                 return this.chooseLabels = [];
             }
+
             if (newVal === oldVal) return;
             this.chooseLabels = newVal.split(',');
         }
     },
-    created() {
+    created: function created() {
         this.init();
     },
-    mounted() {
-        this.NODE_ENV_BASE_URL = $('#coreServer').val();
-        // console.log(this.NODE_ENV_BASE_URL);
+    mounted: function mounted() {
+        this.NODE_ENV_BASE_URL = $('#coreServer').val(); // console.log(this.NODE_ENV_BASE_URL);
+
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
         this.initEditor();
     },
-    beforeDestroy() {
+    beforeDestroy: function beforeDestroy() {
         // 销毁编辑器
         this.editor.destroy();
         this.editor = null;
     },
     methods: {
         // 页面初始化
-        init() {
-            const articleId = localStorage.getItem('articleId') || 0;
+        init: function init() {
+            var articleId = localStorage.getItem('articleId') || 0;
             localStorage.removeItem('articleId');
             this.formData.articleId = articleId;
-            this.fetchArticleCatagory();
-            // 文章id就是修改文章
+            this.fetchArticleCatagory(); // 文章id就是修改文章
+
             this.fetchFormList();
         },
         // 获取标签列表和分类列表
-        fetchFormList() {
-            const that = this;
-            SupplierApi.GetArticleForm({articleId: this.formData.articleId}, function (res) {
+        fetchFormList: function fetchFormList() {
+            var that = this;
+            SupplierApi.GetArticleForm({
+                articleId: this.formData.articleId
+            }, function (res) {
                 if (res.code === 0) {
                     // console.log(res);
-                    that.articleLabels = res.data.articleLabels.split(',');
-                    // 初始化表单数据
+                    that.articleLabels = res.data.articleLabels.split(','); // 初始化表单数据
+
                     if (res.data.shopArticle) {
-                        that.setFormData(res.data.shopArticle)
+                        that.setFormData(res.data.shopArticle);
                     }
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
-        setFormData(shopArticle) {
-            for (let key in this.formData) {
-                if(key === 'status' || key === 'typeId'){
+        // 设置表单初始数据
+        setFormData: function setFormData(shopArticle) {
+            for (var key in this.formData) {
+                if (key === 'status' || key === 'typeId') {
                     this.formData[key] = shopArticle[key].toString();
-                }else{
+                } else {
                     this.formData[key] = shopArticle[key];
                 }
             }
+
             this.editor.txt.html(this.formData.articleContent);
         },
-        fetchArticleCatagory() {
-            const that = this;
+        // 获取文章分类
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
             SupplierApi.ArticleCategory({}, function (res) {
                 if (res.code === 0) {
                     // console.log(res);
@@ -97,94 +115,104 @@ new Vue({
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
-        labelClick(index) {
-            const newLabel = this.articleLabels[index];
-            const popIndex = this.chooseLabels.indexOf(newLabel);
+        // 选择文章标签
+        labelClick: function labelClick(index) {
+            var newLabel = this.articleLabels[index];
+            var popIndex = this.chooseLabels.indexOf(newLabel);
+
             if (popIndex > -1) {
                 this.chooseLabels.splice(popIndex, 1);
             } else {
                 this.chooseLabels.push(newLabel);
             }
         },
-        addLabel() {
+        // 手动添加文章标签
+        addLabel: function addLabel() {
             if (!this.addLabelName.trim()) return;
             if (this.chooseLabels.indexOf(this.addLabelName) > -1) return this.addLabelName = '';
             this.chooseLabels.push(this.addLabelName);
-            this.addLabelName = ''
+            this.addLabelName = '';
         },
-        checkLabel(index) {
-            return this.chooseLabels.indexOf(this.articleLabels[index]) > -1
+        // 判断标签是否被选
+        checkLabel: function checkLabel(index) {
+            return this.chooseLabels.indexOf(this.articleLabels[index]) > -1;
         },
-        // 引导图上传
-        fileInputChange(e) {
-            this.uploadImage(e.target.files[0]).then(res => {
-                this.formData.guidanceImage = res;
-            })
+        // 引导图上传（文章封面图）
+        fileInputChange: function fileInputChange(e) {
+            var _this = this;
+
+            this.uploadImage(e.target.files[0]).then(function (res) {
+                _this.formData.guidanceImage = res;
+            });
         },
         // 初始化富文本
-        initEditor() {
-            const E = window.wangEditor;
+        initEditor: function initEditor() {
+            var E = window.wangEditor;
             this.editor = new E("#editor");
             this.initEditorOptions(this.editor, this.NODE_ENV_BASE_URL);
             this.editor.create();
         },
         // 保存 提交表单
-        handleSave() {
+        handleSave: function handleSave() {
+            var _this2 = this;
+
             this.formData.articleContent = this.editor.txt.html();
-            this.handleFormData();
-            // console.log(this.formData);
-            this.validAll(this.formData).then(valid => {
+            this.handleFormData(); // console.log(this.formData);
+
+            this.validAll(this.formData).then(function (valid) {
                 console.log(valid);
-                this.save()
-            }).catch(err => {
+
+                _this2.save();
+            }).catch(function (err) {
                 console.log(err);
-            })
+            });
         },
         // 保存接口
-        save() {
+        save: function save() {
             this.formData.shopId = this.shopId;
             SupplierApi.ArticleSubmitSave(this.formData, function (res) {
                 if (res.code === 0) {
                     CAIMEI.dialog('保存成功');
                     localStorage.setItem('refreshType', '1'); // 通知文章列表需要刷新
+
                     setTimeout(function () {
                         window.location.href = '/supplier/article/list.html';
-                    }, 2000)
+                    }, 2000);
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
         // 处理表单数据
-        handleFormData() {
-            const that = this;
+        handleFormData: function handleFormData() {
+            var that = this;
             $('.form').submit(function (eventData) {
-                const formData = that.serializeArrayToObj($(this).serializeArray());
-                for (let key in formData) {
+                var formData = that.serializeArrayToObj($(this).serializeArray());
+
+                for (var key in formData) {
                     if (key === 'typeId' || key === 'status') {
                         that.formData[key] = Number(formData[key]);
                     } else {
                         that.formData[key] = formData[key];
                     }
                 }
+
                 return false;
-            })
+            });
         },
         // 表单数据转为对象
-        serializeArrayToObj(serializeArray) {
-            const obj = Object.create(null);
+        serializeArrayToObj: function serializeArrayToObj(serializeArray) {
+            var obj = Object.create(null);
             serializeArray.forEach(function (item) {
-                obj[item.name] = item.value
+                obj[item.name] = item.value;
             });
             return obj;
         },
-        handleBack() {
+        handleBack: function handleBack() {
+            // window.open('/supplier/article/list.html')
             window.close();
         }
     }
 });
-
-
-

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

@@ -1,10 +1,12 @@
+"use strict";
+
 var articleList = new Vue({
     el: '#articleList',
     data: {
         refreshType: '',
         hidden: '',
         visibilityChange: '',
-        listRecord: 30,
+        listRecord: 0,
         shopId: GLOBAL_SHOP_ID || 0,
         listQuery: {
             articleId: '',
@@ -18,81 +20,87 @@ var articleList = new Vue({
         pageInput: 1,
         pageTotal: 0,
         articleList: [],
-        articleTypeList: [],
+        articleTypeList: []
     },
     computed: {
-        pageTotal: function () {
+        pageTotal: function pageTotal() {
             var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
             return total > 0 ? total : 1;
         },
-        showPageBtn: function () {
+        showPageBtn: function showPageBtn() {
             var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
             total = total > 0 ? total : 1;
-            var index = this.listQuery.pageNum, arr = [];
+            var index = this.listQuery.pageNum,
+                arr = [];
+
             if (total <= 6) {
                 for (var i = 1; i <= total; i++) {
                     arr.push(i);
                 }
+
                 return arr;
             }
+
             if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
             if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
             return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
         }
     },
     filters: {
-        formatDate(date) {
+        // 时间格式化
+        formatDate: function formatDate(date) {
             if (!date) return '---';
-            return dateFormat(new Date(date))
+            return dateFormat(new Date(date));
         }
     },
-    created() {
+    created: function created() {
         this.getArticleList();
-        this.fetchArticleCatagory()
+        this.fetchArticleCatagory();
     },
-    mounted() {
-        this.bindWindowHiddenOrVis()
+    mounted: function mounted() {
+        // this.bindWindowHiddenOrVis();
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
     },
     methods: {
         // 获取文章列表
-        getArticleList() {
-            const that = this;
+        getArticleList: function getArticleList() {
+            var that = this;
             this.listQuery.shopId = this.shopId;
             SupplierApi.GetArticleList(this.listQuery, function (res) {
-                console.log(res);
+                // console.log(res);
                 if (res.code === 0) {
                     that.listRecord = res.data.total;
                     that.articleList = res.data.list;
-                    that.pageTotal = res.data.pages
+                    that.pageTotal = res.data.pages;
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
         //表格操作按钮点击
-        clickOption(article, type) {
-            const handles = {
+        clickOption: function clickOption(article, type) {
+            var handles = {
                 1: this.toEdit,
                 2: this.changeStatus,
                 3: this.toDetail,
-                4: this.handleDelete,
+                4: this.handleDelete
             };
-            handles[type](article)
+            handles[type](article);
         },
-        //编辑
-        toEdit(article) {
+        //跳转编辑页面
+        toEdit: function toEdit(article) {
             localStorage.setItem('articleId', article.articleId);
-            window.open('/supplier/article/edit.html')
+            window.open('/supplier/article/edit.html');
         },
         //修改状态
-        changeStatus(article) {
-            let newStatus = 1;
+        changeStatus: function changeStatus(article) {
+            var newStatus = 1;
+
             if (article.status === 1) {
-                newStatus = 0
+                newStatus = 0;
             }
-            // return;
+
             SupplierApi.ArticleStatusChange({
                 articleId: article.articleId,
                 shopId: this.shopId,
@@ -105,70 +113,77 @@ var articleList = new Vue({
                 } else {
                     CAIMEI.dialog('修改文章状态失败!');
                 }
-            })
+            });
         },
         //查看
-        toDetail() {
+        toDetail: function toDetail() {
         },
-        handleAddArticle() {
-            window.open('/supplier/article/edit.html')
+        // 跳转添加文章页面
+        handleAddArticle: function handleAddArticle() {
+            window.open('/supplier/article/edit.html');
         },
-        handleSearchList() {
+        // 查询文章列表
+        handleSearchList: function handleSearchList() {
             this.listQuery.pageNum = 1;
             this.getArticleList();
         },
-        fetchArticleCatagory() {
-            const that = this;
+        // 获取文章列表
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
             SupplierApi.ArticleCategory({}, function (res) {
                 if (res.code === 0) {
-                    // console.log(res);
                     that.articleTypeList = res.data;
                 } else {
                     CAIMEI.Alert(res.msg, '确定', false);
                 }
-            })
+            });
         },
-        //删除
-        handleDelete(article) {
-            const that = this;
-            const params = {
+        //删除确认
+        handleDelete: function handleDelete(article) {
+            var that = this;
+            var params = {
                 content: '确认删除改文章?',
                 cancelBtnText: '取消',
                 confitmBtnText: '删除'
             };
             CAIMEI.Popup(params, function () {
-                that.articleDelete(article)
-            })
+                that.articleDelete(article);
+            });
         },
-        articleDelete(article) {
-            const that = this;
-            SupplierApi.ArticleRemove({articleId: article.articleId}, function (res) {
+        // 删除文章
+        articleDelete: function articleDelete(article) {
+            var that = this;
+            SupplierApi.ArticleRemove({
+                articleId: article.articleId
+            }, function (res) {
                 if (res.code === 0) {
                     that.getArticleList();
                     CAIMEI.dialog('删除文章成功!');
                 } else {
                     CAIMEI.dialog('删除文章失败!');
                 }
-            })
+            });
         },
         //页码跳转
-        toPagination: function (pageNum) {
+        toPagination: function toPagination(pageNum) {
             if (pageNum <= this.pageTotal) {
-                this.listQuery.pageNum = pageNum;
-                console.log('页码跳转');
+                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
+
                 this.getArticleList();
             }
         },
-        checkNum: function () {
+        // 输入框设置页码
+        checkNum: function checkNum() {
             if (this.pageInput > this.pageTotal) {
                 this.pageInput = this.pageTotal;
             } else if (this.pageInput < 1) {
                 this.pageInput = 1;
             }
         },
-        bindWindowHiddenOrVis() {
+        bindWindowHiddenOrVis: function bindWindowHiddenOrVis() {
             // 设置隐藏属性和改变可见属性的事件的名称
-            if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+            if (typeof document.hidden !== "undefined") {
+                // Opera 12.10 and Firefox 18 and later support
                 this.hidden = "hidden";
                 this.visibilityChange = "visibilitychange";
             } else if (typeof document.msHidden !== "undefined") {
@@ -177,8 +192,9 @@ var articleList = new Vue({
             } else if (typeof document.webkitHidden !== "undefined") {
                 this.hidden = "webkitHidden";
                 this.visibilityChange = "webkitvisibilitychange";
-            }
-            // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
+            } // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
+
+
             if (typeof document.addEventListener === "undefined" || typeof document[this.hidden] === "undefined") {
                 console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
             } else {
@@ -187,21 +203,20 @@ var articleList = new Vue({
             }
         },
         // 如果页面是展示状态 && 需要刷新列表，则刷新列表
-        handleVisibilityChange() {
-            const that = this;
+        handleVisibilityChange: function handleVisibilityChange() {
+            var that = this;
             this.refreshType = window.localStorage.getItem('refreshType');
+
             if (document[that.hidden]) {
                 console.log(this.refreshType);
                 console.log('article list page is show');
+
                 if (this.refreshType) {
                     that.listQuery.pageNum = 1;
                     window.localStorage.removeItem('refreshType');
-                    that.getArticleList()
+                    that.getArticleList();
                 }
             }
         }
     }
 });
-
-
-

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

@@ -1,3 +1,5 @@
+"use strict";
+
 var formMixin = {
     data: {
         validData: {},
@@ -10,12 +12,12 @@ var formMixin = {
             }, {
                 maxLength: 10,
                 minLength: 2,
-                message: '最大字符长度为10，最小字符长度为2',
+                message: '最大字符长度为10，最小字符长度为2'
             }],
             label: [{
                 required: true,
                 message: '请输入文章标签',
-                trigger: ['blur','change']
+                trigger: ['blur', 'change']
             }],
             keyword: [{
                 required: true,
@@ -51,21 +53,21 @@ var formMixin = {
                 required: true,
                 message: '请选择文章状态',
                 trigger: 'change'
-            }],
+            }]
         }
     },
-    mounted() {
+    mounted: function mounted() {
         //初始化表单验证
-        this.initValidForm(this.formData)
+        this.initValidForm(this.formData);
     },
-    created() {
+    created: function created() {
         //初始化验证关系对象
         this.initValidData();
     },
     methods: {
         //初始化验证关系对象
-        initValidData() {
-            for (let key in this.rules) {
+        initValidData: function initValidData() {
+            for (var key in this.rules) {
                 this.$set(this.validData, key, {
                     valid: true,
                     message: ''
@@ -73,54 +75,66 @@ var formMixin = {
             }
         },
         //初始化表单验证
-        initValidForm(formData) {
-            const that = this;
-            for (let key in this.rules) {
-                const rules = this.rules[key];
-                const input = document.querySelector(`.form-item[prop="${key}"] input`);
-                const textarea = document.querySelector(`.form-item[prop="${key}"] textarea`);
-                const trigger = rules[0].trigger.toString();
-                if(trigger.indexOf('blur') > -1){
+        initValidForm: function initValidForm(formData) {
+            var _this = this;
+
+            var that = this;
+
+            var _loop = function _loop(key) {
+                var rules = _this.rules[key];
+                var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
+                var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
+                var trigger = rules[0].trigger.toString();
+
+                if (trigger.indexOf('blur') > -1) {
                     if (input) {
                         input.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules)
-                        })
+                            that.validInputHandle(formData, key, rules);
+                        });
                     }
+
                     if (textarea) {
                         textarea.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules)
-                        })
+                            that.validInputHandle(formData, key, rules);
+                        });
                     }
                 }
-                if(trigger.indexOf('change') > -1){
-                    const  str = 'formData.' + key;
-                    that.$watch(str, function(newVal, oldVal){
-                        that.validInputHandle(formData, key, rules)
-                    })
+
+                if (trigger.indexOf('change') > -1) {
+                    var str = 'formData.' + key;
+                    that.$watch(str, function (newVal, oldVal) {
+                        that.validInputHandle(formData, key, rules);
+                    });
                 }
+            };
+
+            for (var key in this.rules) {
+                _loop(key);
             }
         },
         //数据校验
-        validInputHandle(formData, key, rules) {
-            const validData = {
+        validInputHandle: function validInputHandle(formData, key, rules) {
+            var validData = {
                 valid: true,
                 message: ''
             };
             rules.forEach(function (rule, index) {
-                if (!validData.valid) return;
-                // 字符长度
-                const len = formData[key].toString().trim().length;
-                // 是否必填
+                if (!validData.valid) return; // 字符长度
+
+                var len = formData[key].toString().trim().length; // 是否必填
+
                 if (rule.required && !formData[key]) {
                     validData.valid = false;
                     validData.message = rule.message || '';
-                }
-                // 最大值最小值
-                if ((rule.maxLength && len < rule.minLength) || (rule.maxLength && len > rule.maxLength)) {
+                } // 最大值最小值
+
+
+                if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
                     validData.valid = false;
                     validData.message = rule.message || '';
-                }
-                // 自定义校验规则
+                } // 自定义校验规则
+
+
                 if (rule.pattern && !rule.pattern.test(formData[key])) {
                     validData.valid = false;
                     validData.message = rule.message || '';
@@ -128,18 +142,21 @@ var formMixin = {
             });
             this.validData[key] = validData;
         },
-        validAll(formData) {
-            for (let key in this.rules) {
-                const rules = this.rules[key];
+        // 验证全部数据
+        validAll: function validAll(formData) {
+            for (var key in this.rules) {
+                var rules = this.rules[key];
                 this.validInputHandle(formData, key, rules);
             }
-            for(let key in this.validData){
+
+            for (var _key in this.validData) {
                 // console.log(key, this.validData[key].valid);
-                if(!this.validData[key].valid) {
-                    return Promise.reject(false)
+                if (!this.validData[_key].valid) {
+                    return Promise.reject(false);
                 }
             }
-            return Promise.resolve(true)
+
+            return Promise.resolve(true);
         }
     }
 };

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

@@ -1,33 +1,37 @@
+"use strict";
+
 var uploadMixin = {
     methods: {
-        initEditorOptions(editor, baseUrl) {
-            const that = this;
+        // 富文本框配置
+        initEditorOptions: function initEditorOptions(editor, baseUrl) {
+            var that = this;
             this.editor.config.zIndex = 333;
             this.editor.config.height = 400;
             this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
             this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
+
             this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
                 resultFiles.forEach(function (file) {
                     // resultFiles 是 input 中选中的文件列表
                     // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-                    that.uploadImage(file).then(res => {
+                    that.uploadImage(file).then(function (res) {
                         insertImgFn(res);
-                    })
+                    });
                 });
-            }
+            };
         },
         // 上传图片
-        uploadImage(file) {
-            const formData = new FormData();
+        uploadImage: function uploadImage(file) {
+            var formData = new FormData();
             formData.append('file', file);
             return new Promise(function (resolve, reject) {
                 PublicApi.uploadimg(formData, function (res) {
                     if (res.code === 0) {
                         resolve(res.data);
                     }
-                    reject()
+                    reject();
                 });
-            })
+            });
         }
     }
 };

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

@@ -1,5 +1,7 @@
 <!-- 头部导航 -->
-<header class="navbar">
+<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">
@@ -19,8 +21,8 @@
         </ul>
         <div class="search">
             <div class="search-control">
-                <form action="">
-                    <input type="text" class="search-input" placeholder="请输入产品/仪器名称"/>
+                <form action="search.html">
+                    <input type="text" id="searchKeyword" class="search-input" name="keyword" placeholder="请输入产品/仪器名称"/>
                     <button class="search-btn">搜索</button>
                 </form>
                 <button class="hot-keyword" id="hotKeyword" data-target="#hotKeywords">热搜词</button>
@@ -28,23 +30,10 @@
             <div class="keywords" id="hotKeywords">
                 <span class="close-btn icon close"></span>
                 <span>热门搜索：</span>
-                <a href="search.html">MD果酸</a>
-                <em>/</em>
-                <a href="#">无针水光</a>
-                <em>/</em>
-                <a href="#">光子</a>
-                <em>/</em>
-                <a href="#">超皮秒</a>
-                <em>/</em>
-                <a href="#">热玛吉</a>
-                <em>/</em>
-                <a href="#">热玛吉</a>
-                <em>/</em>
-                <a href="#">热玛吉</a>
-                <em>/</em>
-                <a href="#">热玛吉</a>
-                <em>/</em>
-                <a href="#">热玛吉</a>
+                <th:block th:each="keyword,keywordStat: ${searchHotWord}">
+                    <a th:href="'search.html?keyword=' + ${keyword}" th:text="${keyword}" th:title="${keyword}"></a>
+                    <em th:if="${keywordStat.size gt 1}">/</em>
+                </th:block>
             </div>
         </div>
     </div>

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

@@ -5,7 +5,7 @@
     <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>
+    <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})}"/>
@@ -15,42 +15,36 @@
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
 
-
-<article class="article">
+<article class="article" th:object="${baikeInstrument}">
     <section class="section description">
         <div class="title">
-            <h2>仪器描简述</h2>
+            <h2>仪器描述</h2>
             <div class="line"></div>
         </div>
         <div class="content">
             <div class="content-left">
                 <div class="names">
-                    <div class="name"><b>仪器名称：</b>Reyoungel瑞漾医用玻尿酸水光小白盒</div>
-                    <div class="alias">别名：ULTRAFORMERⅢ</div>
-                </div>
-                <div class="row desc">
-                    ULTRAFORMERⅢ
-                    时光梭是韩国科莱希斯第三代HIFU超声提升。利用HIFU及MMFU的专利技术，产生高能聚焦超声波，迅速穿透表皮层，脂肪层、刺激SMAS
-                    层筋膜收缩，瞬间让皮肤组织达65~75C˚高温，从而肌肤产生热凝固效应，在真皮层、筋膜层形成网状凝结点，刺激纤维和胶原组织收缩紧致，再生修复，达到
-                    层层提拉，层层紧致。
+                    <div class="name"><b>仪器名称：</b><span th:text="*{name}"></span></div>
+                    <div class="alias">别名：<span th:text="*{alias}"></span></div>
                 </div>
+                <!-- 描述 -->
+                <div class="row desc" th:text="*{discription}"></div>
             </div>
             <div class="cover">
-                <img src="https://picsum.photos/120/120" alt=""/>
+                <img th:src="*{image}" th:alt="*{name}"/>
             </div>
         </div>
     </section>
-
     <section class="section approve">
         <div class="title">
             <h2>正品识别</h2>
             <div class="line"></div>
         </div>
         <div class="content">
-            <p>认证连接：<a href="#">www.baidu.com</a></p>
+            <p>认证连接：<a th:href="*{authLink}"></a></p>
             <p>认证二维码</p>
             <div class="img-list">
-                <img src="https://picsum.photos/120/120"/>
+                <img th:src="*{authQrCode}" alt="认证二维码"/>
             </div>
         </div>
     </section>
@@ -61,23 +55,9 @@
         </div>
         <div class="content">
             <div class="tr">
-                <div class="group">
-                    <div class="th">波长</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-                <div class="group">
-                    <div class="th">影像系统</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-            </div>
-            <div class="tr">
-                <div class="group">
-                    <div class="th">波长</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-                <div class="group">
-                    <div class="th">影像系统</div>
-                    <div class="td">1.0-3.0J</div>
+                <div class="group" th:each="params: *{paramList}">
+                    <div class="th" th:text="${params.name}"></div>
+                    <div class="td" th:text="${params.content}"></div>
                 </div>
             </div>
         </div>
@@ -88,10 +68,7 @@
             <h2>仪器优点</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、专利MMFU宏观&微观高能聚焦超音波覆盖面积是超声提升的8倍，速度是超声提升的5倍；</p>
-            <p>2、共有7个操作探头,双引擎实现高峰值，左右治疗手柄自动识别。</p>
-        </div>
+        <div class="content" th:utext="*{advantage}"></div>
     </section>
 
     <section class="section">
@@ -99,9 +76,7 @@
             <h2>仪器缺点</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>未获得NMPA认证，中国境内严禁销售和使用。</p>
-        </div>
+        <div class="content" th:utext="*{disadvantage}"></div>
     </section>
 
     <section class="section">
@@ -109,13 +84,7 @@
             <h2>仪器原理</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>
-                整体改善是通过两大技术实现，一是HIFU技术：单点聚焦，用于面部筋膜提升有显著效果。聚焦超声波聚焦于皮下整个脂肪层面（聚焦在皮下约6MM--13MM的脂肪层），然后通过内生
-                热促使脂肪细胞分解，分解为脂肪酸与三酸甘油酯，这个时候脂肪组织由固态转化为液态，然后通过淋巴循环排出体外。二是MMFU技术：独特的MMFU技术是目前全球惟一的专利技术，
-                以【微+宽】的聚焦作用于肌肤，大大增加了溶脂的面积，采用立体式覆盖治疗效果惊人。促进胶原蛋白再生，令肌肤更紧致。
-            </p>
-        </div>
+        <div class="content" th:utext="*{principle}"></div>
     </section>
 
     <section class="section params">
@@ -127,31 +96,31 @@
             <div class="tr">
                 <div class="group">
                     <div class="th">品牌</div>
-                    <div class="td">Classys</div>
+                    <div class="td" th:text="*{brand}"></div>
                 </div>
                 <div class="group">
                     <div class="th">产地</div>
-                    <div class="td">韩国</div>
+                    <div class="td" th:text="*{producePlace}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">上市时间</div>
-                    <div class="td">2019年10月</div>
+                    <div class="td" th:text="*{marketTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">公司/厂商</div>
-                    <div class="td">和创元</div>
+                    <div class="td" th:text="*{company}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">NMPA认证时间</div>
-                    <div class="td">2019年10月</div>
+                    <div class="td" th:text="*{nmpaTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">价格区间</div>
-                    <div class="td"><a href="#">点击查询</a></div>
+                    <div class="td"><a href="javascript:void(0);" id="contactPopupBtn">点击查询</a></div>
                 </div>
             </div>
         </div>
@@ -165,9 +134,7 @@
         <div class="content">
             <div class="name">该仪器已获得以下认证：</div>
             <div class="img-list">
-                <img src="https://picsum.photos/120/120"/>
-                <img src="https://picsum.photos/120/120"/>
-                <img src="https://picsum.photos/120/120"/>
+                <img th:src="${img}" th:each="img: *{authImageList}"/>
             </div>
         </div>
     </section>
@@ -177,11 +144,7 @@
             <h2>适宜人群</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
 
     <section class="section">
@@ -189,16 +152,7 @@
             <h2>不适宜人群</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <h3>以下人群禁忌使用：</h3>
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-            <h3>以下人群禁忌使用：</h3>
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
 
     <section class="section">
@@ -206,11 +160,7 @@
             <h2>术前术后</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{aroundOperation}"></div>
     </section>
 
     <section class="section effect">
@@ -219,8 +169,7 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <img src="https://picsum.photos/1138/328" alt=""/>
-            <img src="https://picsum.photos/1138/400" alt=""/>
+            <img th:src="${img}" th:each="img: *{displayImageList}"/>
         </div>
     </section>
 
@@ -230,26 +179,17 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <dl class="collapse">
+            <dl class="collapse" th:each="question,questionStat: *{questionList}">
                 <dt>
-                    <span>问</span>光子嫩肤有哪些副作用?
-                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question1"></i>
+                    <span>问</span><block th:text="${question.question}"></block>
+                    <i class="icon arrowdown" data-toggle="collapse" th:data-target="'#question' + ${questionStat.index}"></i>
                 </dt>
-                <dd id="question1">
+                <dd th:id="'question' + ${questionStat.index}">
                     <span>答</span>
-                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
-                    治疗方法...
-                </dd>
-            </dl>
-            <dl class="collapse">
-                <dt>
-                    <span>问</span>光子嫩肤有哪些副作用?
-                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question2"></i>
-                </dt>
-                <dd id="question2">
-                    <span>答</span>
-                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
+                    <block th:text="${question.answer}">
+                        几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
                     治疗方法...
+                    </block>
                 </dd>
             </dl>
         </div>
@@ -257,6 +197,17 @@
 </article>
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>
+<!-- 立即咨询弹窗 -->
+<div class="contact-popup" id="contactPopup">
+    <span class="close" id="contactPopupClose">&times;</span>
+    <div class="content">
+        <p class="tel">0755-22907771</p>
+        <p class="tel">15398851365</p>
+        <p>工作日</p>
+        <p class="time">周一~周五 / 09:00 ~ 18:00</p>
+    </div>
+</div>
+
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>

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

@@ -5,7 +5,7 @@
     <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>
+    <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})}"/>
@@ -16,11 +16,11 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
 <div class="banner">
-    <img src="https://picsum.photos/1920/510" alt="采美百科"/>
+    <img th:src="${banner.image}" th:alt="${banner.link}"/>
 </div>
-<!-- 仪器 / 仪器分类 -->
+<!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">
-    <div class="name"><b>仪器分类</b><em></em></div>
+    <div class="name"><b>产品分类</b><em></em></div>
     <div class="category-list" id="category-list"></div>
     <div
             class="collapse on"
@@ -35,152 +35,26 @@
 </div>
 <!-- 分类楼层 -->
 <div class="floor-list">
-    <div class="floor">
+    <div class="floor" th:each="floor : ${typeData}" th:id="${floor}">
         <div class="floor-title">
-            <h2>中胚层仪器</h2>
+            <h2 th:text="${floor.name}"></h2>
             <div class="h5-more-btn">
                 <span>更多</span>
                 <i class="icon arrowright"></i>
             </div>
-            <img src="/img/encyclopedia/01.png" alt="中胚层仪器"/>
+            <img src="/img/encyclopedia/01.png" th:alt="${floor.name}"/>
         </div>
         <article class="article container">
-            <section class="section">
-                <a href="product-detail.html">
+            <section class="section" th:each="item,stat : ${floor.productList}" th:object="${item}">
+                <a th:href="'instrument-' + *{productId} + '.html'">
                     <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
+                        <img th:src="*{image}" th:alt="*{name}"/>
                     </div>
                     <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/instrument-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/instrument-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/instrument-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-
-            <section class="section">
-                <a href="/encyclopedia/instrument-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
+                        <h3 th:text="*{name}"></h3>
+                        <div class="title" th:text="*{discription}"></div>
                         <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
+                            <p th:each="question : *{questionList}" th:text="${question}"></p>
                         </div>
                         <div class="tag-list">
                             <span class="tag">常见问题</span>
@@ -190,8 +64,8 @@
                         </div>
                         <div class="dashed-line"></div>
                         <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
+                            <time>日期：<span th:text="*{publishTime}"></span></time>
+                            <span>浏览量：<span th:text="*{pv}"></span></span>
                         </footer>
                     </div>
                 </a>
@@ -206,7 +80,6 @@
         </div>
     </div>
 </div>
-
 <!-- 侧边楼层导航 -->
 <aside class="navigate"></aside>
 <!-- 引用公共底部 -->

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

@@ -9,94 +9,29 @@
     <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/pagination.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
 </head>
 <body>
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
-
 <!-- 分类楼层 -->
-<div class="floor container more-floor">
-    <div class="floor-title">
-        <h2>中胚层产品</h2>
+<div class="floor container more-floor" id="moreFloor" th:object="${moreData}">
+    <div class="floor-title" th:id="${moreData}">
+        <h2 v-text="*{typeName}"></h2>
         <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
     </div>
     <article class="article">
-        <section class="section" th:each="prod: ${list}">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
+        <section class="section" th:each="item: *{results}">
+            <a th:href="'product-' + ${item.productId} + '.html'">
                 <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
+                    <img th:src="${item.image}" th:alt="${item.name}"/>
                 </div>
                 <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
+                    <h3 th:text="${item.name}"></h3>
+                    <div class="title" th:text="${item.discription}"></div>
                     <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
+                        <p th:each="question : ${item.questionList}" th:text="${question}"></p>
                     </div>
                     <div class="tag-list">
                         <span class="tag">常见问题</span>
@@ -106,202 +41,52 @@
                     </div>
                     <div class="dashed-line"></div>
                     <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
+                        <time>日期：<span th:text="${item.publishTime}"></span></time>
+                        <span>浏览量：<span th:text="${item.pv}"></span></span>
                     </footer>
                 </div>
             </a>
         </section>
     </article>
-    <!-- 更多 -->
-    <div class="more">
-        <div class="more-btn">
-            <span class="">查看更多</span>
-            <i class="icon arrowdown"></i>
+</div>
+
+<th:block th:object="${moreData}">
+    <div class="pagination-container" th:if="*{totalPage gt 1}">
+        <ul class="pagination">
+            <li th:if="*{pageNum gt 1}"><a th:href="'more-7-' + *{pageNum - 1} + '-12.html'">«</a></li>
+            <li th:if="*{pageNum gt 3}">
+                <a th:href="'more-7-1-12.html'">1</a>
+            </li>
+            <li class="ellipsis" th:if="*{pageNum gt 4}"><span>···</span></li>
+            <li th:if="*{pageNum gt 2}">
+                <a th:href="'more-7-' + *{pageNum - 2} + '-12.html'" th:text="*{pageNum - 2}"></a>
+            </li>
+            <li th:if="*{pageNum gt 1}">
+                <a th:href="'more-7-' + *{pageNum - 1} + '-12.html'" th:text="*{pageNum - 1}"></a>
+            </li>
+            <li class="active"><a href="#" th:text="*{pageNum}"></a></li>
+            <li th:if="*{pageNum lt totalPage - 1}">
+                <a th:href="'more-7-' + *{pageNum + 1} + '-12.html'" th:text="*{pageNum + 1}"></a>
+            </li>
+            <li th:if="*{pageNum lt totalPage - 2}">
+                <a th:href="'more-7-' + *{pageNum + 2} + '-12.html'" th:text="*{pageNum + 2}"></a>
+            </li>
+            <li class="ellipsis" th:if="*{pageNum lt totalPage - 3}"><span>···</span></li>
+            <li th:if="*{pageNum lt totalPage}">
+                <a th:href="'more-7-' + *{totalPage} + '-12.html'" th:text="*{totalPage}"></a>
+            </li>
+            <li th:if="*{pageNum lt totalPage}"><a th:href="'more-7-' + *{pageNum + 1} + '-12.html'">»</a></li>
+        </ul>
+        <div class="tool">
+            <div class="total">共<span th:text="*{totalPage}"></span>页</div>
+            <div class="jump">
+                <div class="pagenum-input">跳至<input type="text" value="1"/>页</div>
+                <a href="#" class="jump-btn">点击跳转</a>
+            </div>
         </div>
     </div>
-</div>
+</th:block>
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
-<script type="text/javascript">
-    'use strict';
-    $(function () {
-        var windowWidth = $(window).width();
-        if (windowWidth > 768) {
-            // 可折叠楼层
-            makeFloorList({
-                root: '.floor', // 根节点元素
-                collapse: '.article', //可折叠元素
-                item: '.section', // 子元素
-                touch: '.more-btn', // 事件绑定元素
-                size: 6, // 每页最多显示的子元素个数
-                col: 3, // 每列最多显示的子元素个数
-                minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
-                // 展开时的回调
-                open: function open(floor) {
-                    if (floor.current === floor.step) {
-                        floor.$floor.find('.more span').text('收起全部');
-                        floor.$floor.find('.more .icon').addClass('arrowup');
-                    }
-                },
-                // 收起时的回调
-                close: function close(floor) {
-                    floor.$floor.find('.more span').text('查看更多');
-                    floor.$floor.find('.more .icon').removeClass('arrowup');
-                }
-            });
-        }
-    });
-</script>
 </body>
 </html>

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

@@ -15,7 +15,7 @@
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
 
-<article class="article">
+<article class="article" th:object="${baikeProduct}">
     <section class="section description">
         <div class="title">
             <h2>产品描述</h2>
@@ -24,18 +24,14 @@
         <div class="content">
             <div class="content-left">
                 <div class="names">
-                    <div class="name"><b>产品名称：</b>Reyoungel瑞漾医用玻尿酸水光小白盒</div>
-                    <div class="alias">别名：ULTRAFORMERⅢ</div>
-                </div>
-                <div class="row desc">
-                    ULTRAFORMERⅢ
-                    时光梭是韩国科莱希斯第三代HIFU超声提升。利用HIFU及MMFU的专利技术，产生高能聚焦超声波，迅速穿透表皮层，脂肪层、刺激SMAS
-                    层筋膜收缩，瞬间让皮肤组织达65~75C˚高温，从而肌肤产生热凝固效应，在真皮层、筋膜层形成网状凝结点，刺激纤维和胶原组织收缩紧致，再生修复，达到
-                    层层提拉，层层紧致。
+                    <div class="name"><b>产品名称：</b><span th:text="*{name}"></span></div>
+                    <div class="alias">别名：<span th:text="*{alias}"></span></div>
                 </div>
+                <!-- 描述 -->
+                <div class="row desc" th:text="*{discription}"></div>
             </div>
             <div class="cover">
-                <img src="https://picsum.photos/120/120" alt=""/>
+                <img th:src="*{image}" th:alt="*{name}"/>
             </div>
         </div>
     </section>
@@ -46,23 +42,9 @@
         </div>
         <div class="content">
             <div class="tr">
-                <div class="group">
-                    <div class="th">波长</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-                <div class="group">
-                    <div class="th">影像系统</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-            </div>
-            <div class="tr">
-                <div class="group">
-                    <div class="th">波长</div>
-                    <div class="td">1.0-3.0J</div>
-                </div>
-                <div class="group">
-                    <div class="th">影像系统</div>
-                    <div class="td">1.0-3.0J</div>
+                <div class="group" th:each="params: *{paramList}">
+                    <div class="th" th:text="${params.name}"></div>
+                    <div class="td" th:text="${params.content}"></div>
                 </div>
             </div>
         </div>
@@ -73,10 +55,7 @@
             <h2>产品优点</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、专利MMFU宏观&微观高能聚焦超音波覆盖面积是超声提升的8倍，速度是超声提升的5倍；</p>
-            <p>2、共有7个操作探头,双引擎实现高峰值，左右治疗手柄自动识别。</p>
-        </div>
+        <div class="content" th:utext="*{advantage}"></div>
     </section>
 
     <section class="section">
@@ -84,9 +63,7 @@
             <h2>产品缺点</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>未获得NMPA认证，中国境内严禁销售和使用。</p>
-        </div>
+        <div class="content" th:utext="*{disadvantage}"></div>
     </section>
 
     <section class="section">
@@ -94,13 +71,7 @@
             <h2>产品原理</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>
-                整体改善是通过两大技术实现，一是HIFU技术：单点聚焦，用于面部筋膜提升有显著效果。聚焦超声波聚焦于皮下整个脂肪层面（聚焦在皮下约6MM--13MM的脂肪层），然后通过内生
-                热促使脂肪细胞分解，分解为脂肪酸与三酸甘油酯，这个时候脂肪组织由固态转化为液态，然后通过淋巴循环排出体外。二是MMFU技术：独特的MMFU技术是目前全球惟一的专利技术，
-                以【微+宽】的聚焦作用于肌肤，大大增加了溶脂的面积，采用立体式覆盖治疗效果惊人。促进胶原蛋白再生，令肌肤更紧致。
-            </p>
-        </div>
+        <div class="content" th:utext="*{principle}"></div>
     </section>
 
     <section class="section params">
@@ -112,31 +83,31 @@
             <div class="tr">
                 <div class="group">
                     <div class="th">品牌</div>
-                    <div class="td">Classys</div>
+                    <div class="td" th:text="*{brand}"></div>
                 </div>
                 <div class="group">
                     <div class="th">产地</div>
-                    <div class="td">韩国</div>
+                    <div class="td" th:text="*{producePlace}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">上市时间</div>
-                    <div class="td">2019年10月</div>
+                    <div class="td" th:text="*{marketTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">公司/厂商</div>
-                    <div class="td">和创元</div>
+                    <div class="td" th:text="*{company}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">NMPA认证时间</div>
-                    <div class="td">2019年10月</div>
+                    <div class="td" th:text="*{nmpaTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">价格区间</div>
-                    <div class="td"><a href="#">点击查询</a></div>
+                    <div class="td"><a href="javascript:void(0);" id="contactPopupBtn">点击查询</a></div>
                 </div>
             </div>
         </div>
@@ -150,9 +121,7 @@
         <div class="content">
             <div class="name">该产品已获得以下认证：</div>
             <div class="img-list">
-                <img src="https://picsum.photos/120/120"/>
-                <img src="https://picsum.photos/120/120"/>
-                <img src="https://picsum.photos/120/120"/>
+                <img th:src="${img}" th:each="img: *{authImageList}"/>
             </div>
         </div>
     </section>
@@ -162,11 +131,7 @@
             <h2>适宜人群</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
 
     <section class="section">
@@ -174,16 +139,7 @@
             <h2>不适宜人群</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <h3>以下人群禁忌使用：</h3>
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-            <h3>以下人群禁忌使用：</h3>
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
 
     <section class="section">
@@ -191,11 +147,7 @@
             <h2>术前术后</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <p>1、皮肤松弛，轮廓不清晰，眼部、面部皮肤老化，希望非侵入性的方法实现面部年轻化者。</p>
-            <p>2、肌肤出现皱纹，如额头纹、鼻唇沟、颈纹，腹部有妊娠纹和大腿有肥胖纹等多种皱纹的人群。</p>
-            <p>3、面部有轻微脂肪、轮廓不清晰；身体臃肿、赘肉明显；希望非侵入性的方法提升面部轮廓，实现曲线美。</p>
-        </div>
+        <div class="content" th:utext="*{aroundOperation}"></div>
     </section>
 
     <section class="section effect">
@@ -204,8 +156,7 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <img src="https://picsum.photos/1138/328" alt=""/>
-            <img src="https://picsum.photos/1138/400" alt=""/>
+            <img th:src="${img}" th:each="img: *{displayImageList}"/>
         </div>
     </section>
 
@@ -215,26 +166,14 @@
             <div class="line"></div>
         </div>
         <div class="content">
-            <dl class="collapse">
-                <dt>
-                    <span>问</span>光子嫩肤有哪些副作用?
-                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question1"></i>
-                </dt>
-                <dd id="question1">
-                    <span>答</span>
-                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
-                    治疗方法...
-                </dd>
-            </dl>
-            <dl class="collapse">
+            <dl class="collapse" th:each="question,questionStat: *{questionList}">
                 <dt>
-                    <span>问</span>光子嫩肤有哪些副作用?
-                    <i class="icon arrowdown" data-toggle="collapse" data-target="#question2"></i>
+                    <span>问</span><th:block th:text="${question.question}"></th:block>
+                    <i class="icon arrowdown" data-toggle="collapse" th:data-target="'#question' + ${questionStat.index}"></i>
                 </dt>
-                <dd id="question2">
+                <dd th:id="'question' + ${questionStat.index}">
                     <span>答</span>
-                    几乎没有什么副作用，非常安全，这是光子嫩肤治疗的一个非常大的优点。但是和任何治疗都一样，治疗本身是具有两面性的，光子一方面是治疗色素性皮肤疾病非常好的
-                    治疗方法...
+                    <th:block th:text="${question.answer}"></th:block>
                 </dd>
             </dl>
         </div>
@@ -242,6 +181,16 @@
 </article>
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>
+<!-- 立即咨询弹窗 -->
+<div class="contact-popup" id="contactPopup">
+    <span class="close" id="contactPopupClose">&times;</span>
+    <div class="content">
+        <p class="tel">0755-22907771</p>
+        <p class="tel">15398851365</p>
+        <p>工作日</p>
+        <p class="time">周一~周五 / 09:00 ~ 18:00</p>
+    </div>
+</div>
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <script th:src="@{/js/encyclopedia/detail.js(v=${version})}"></script>

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

@@ -16,7 +16,7 @@
 <template th:replace="encyclopedia/components/header"></template>
 <!-- banner -->
 <div class="banner">
-    <img src="https://picsum.photos/1920/510" alt="采美百科"/>
+    <img th:src="${banner.image}" th:alt="${banner.link}"/>
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">
@@ -35,152 +35,26 @@
 </div>
 <!-- 分类楼层 -->
 <div class="floor-list">
-    <div class="floor">
+    <div class="floor" th:each="floor : ${typeData}" th:id="${floor}">
         <div class="floor-title">
-            <h2>中胚层产品</h2>
+            <h2 th:text="${floor.name}"></h2>
             <div class="h5-more-btn">
                 <span>更多</span>
                 <i class="icon arrowright"></i>
             </div>
-            <img src="/img/encyclopedia/01.png" alt="中胚层产品"/>
+            <img src="/img/encyclopedia/01.png" th:alt="${floor.name}"/>
         </div>
         <article class="article container">
-            <section class="section">
-                <a href="product-detail.html">
+            <section class="section" th:each="item,stat : ${floor.productList}" th:object="${item}">
+                <a th:href="'product-' + *{productId} + '.html'">
                     <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
+                        <img th:src="*{image}" th:alt="*{name}"/>
                     </div>
                     <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/product-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/product-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-            <section class="section">
-                <a href="/encyclopedia/product-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
-                        <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
-                        </div>
-                        <div class="tag-list">
-                            <span class="tag">常见问题</span>
-                            <span class="tag">效果展示</span>
-                            <span class="tag">技术原理</span>
-                            <span class="tag">术前术后</span>
-                        </div>
-                        <div class="dashed-line"></div>
-                        <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
-                        </footer>
-                    </div>
-                </a>
-            </section>
-
-            <section class="section">
-                <a href="/encyclopedia/product-detail.html">
-                    <div class="cover">
-                        <img src="https://picsum.photos/246/246" alt=""/>
-                    </div>
-                    <div class="content">
-                        <h3>MD果酸</h3>
-                        <div class="title">
-                            MD果酸（ceuticals™
-                            ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                        </div>
+                        <h3 th:text="*{name}"></h3>
+                        <div class="title" th:text="*{discription}"></div>
                         <div class="question">
-                            <p>MD果酸为什么不会刺激皮肤？</p>
-                            <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                            <p>MD果酸是否具有腐蚀性？</p>
+                            <p th:each="question : *{questionList}" th:text="${question}"></p>
                         </div>
                         <div class="tag-list">
                             <span class="tag">常见问题</span>
@@ -190,8 +64,8 @@
                         </div>
                         <div class="dashed-line"></div>
                         <footer class="footer">
-                            <time>日期：2021-11-18 16:52</time>
-                            <span>浏览量：42</span>
+                            <time>日期：<span th:text="*{publishTime}"></span></time>
+                            <span>浏览量：<span th:text="*{pv}"></span></span>
                         </footer>
                     </div>
                 </a>

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

@@ -9,246 +9,30 @@
     <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
+    <link rel="stylesheet" th:href="@{/css/encyclopedia/pagination.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/index.css(v=${version})}"/>
 </head>
 <body>
 <!-- 引用公共头部 -->
 <template th:replace="encyclopedia/components/header"></template>
-
-
 <!-- 分类楼层 -->
-<div class="floor container search-floor">
-    <p class="search-title">为您找到相关结果<span>0</span>条</p>
-    <div class="emtyp" style="display: flex">
+<div class="floor container search-floor" id="search">
+    <p class="search-title">为您找到相关结果<span v-text="total"></span>条</p>
+    <div class="emtyp" v-if="searchList.length <= 0">
         <img src="/img/encyclopedia/pc-icon-empty.png" alt="搜索结果为空"/>
         <p>未找到相关结果！</p>
     </div>
-    <article class="article" style="display: none">
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
+    <article class="article" v-else>
+        <section class="section" v-for="(item, index) in searchList" :key="index">
+            <a :href="item | formatUrl">
                 <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
+                    <img :src="item.image" :alt="item.name"/>
                 </div>
                 <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
-                    <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
-                    </div>
-                    <div class="tag-list">
-                        <span class="tag">常见问题</span>
-                        <span class="tag">效果展示</span>
-                        <span class="tag">技术原理</span>
-                        <span class="tag">术前术后</span>
-                    </div>
-                    <div class="dashed-line"></div>
-                    <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
-                    </footer>
-                </div>
-            </a>
-        </section>
-        <section class="section">
-            <a href="/encyclopedia/product-detail.html">
-                <div class="cover">
-                    <img src="https://picsum.photos/246/246" alt=""/>
-                </div>
-                <div class="content">
-                    <h3>MD果酸</h3>
-                    <div class="title">
-                        MD果酸（ceuticals™
-                        ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比例的通过使用不同比例的通过使用不同比例的
-                    </div>
+                    <h3 v-html="formatFromKeyword(item.name)"></h3>
+                    <div class="title" v-text="item.discription"></div>
                     <div class="question">
-                        <p>MD果酸为什么不会刺激皮肤？</p>
-                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
-                        <p>MD果酸是否具有腐蚀性？</p>
+                        <p v-for="question in item.questionList" v-html="formatFromKeyword(question)"></p>
                     </div>
                     <div class="tag-list">
                         <span class="tag">常见问题</span>
@@ -258,53 +42,47 @@
                     </div>
                     <div class="dashed-line"></div>
                     <footer class="footer">
-                        <time>日期：2021-11-18 16:52</time>
-                        <span>浏览量：42</span>
+                        <time>日期：<span v-text="item.publishTime"></span></time>
+                        <span>浏览量：<span v-text="item.pv"></span></span>
                     </footer>
                 </div>
             </a>
         </section>
     </article>
-    <!-- 更多 -->
-    <div class="more">
-        <div class="more-btn">
-            <span class="">查看更多</span>
-            <i class="icon arrowdown"></i>
+    <!--页码-->
+    <div class="pagination-container" v-if="totalPage >1">
+        <ul class="pagination">
+            <li><a href="#" @click.prevent="pageChange(listQuery.pageNum - 1)">«</a></li>
+            <li :class="{active: listQuery.pageNum === 1}" v-if="listQuery.pageNum >= 4">
+                <a href="#" @click.prevent="pageChange(1)">1</a>
+            </li>
+            <li class="ellipsis" v-if="listQuery.pageNum - 2 > 2"><span>···</span></li>
+            <template v-for="num in pagination">
+                <li :class="{active: listQuery.pageNum === num}" v-if="num >= 1 && num <= totalPage">
+                    <a href="#" v-text="num" @click.prevent="pageChange(num)"></a>
+                </li>
+            </template>
+            <li class="ellipsis" v-if="listQuery.pageNum + 3 < totalPage"><span>···</span></li>
+            <li :class="{active: listQuery.pageNum === totalPage}" v-if="listQuery.pageNum + 2 < totalPage">
+                <a href="#" v-text="totalPage" @click.prevent="pageChange(totalPage)"></a>
+            </li>
+            <li><a href="#" @click.prevent="pageChange(listQuery.pageNum + 1)">»</a></li>
+        </ul>
+        <div class="tool">
+            <div class="total">共<span v-text="totalPage"></span>页</div>
+            <div class="jump">
+                <div class="pagenum-input">跳至<input type="text" v-model="jumpInput"/>页</div>
+                <a href="#" class="jump-btn" @click.prevent="pageChange(jumpInput)">点击跳转</a>
+            </div>
         </div>
     </div>
 </div>
 
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
-<script type="text/javascript">
-    'use strict';
-    $(function () {
-        var windowWidth = $(window).width();
-        if (windowWidth > 768) {
-            // 可折叠楼层
-            makeFloorList({
-                root: '.floor', // 根节点元素
-                collapse: '.article', //可折叠元素
-                item: '.section', // 子元素
-                touch: '.more-btn', // 事件绑定元素
-                size: 6, // 每页最多显示的子元素个数
-                col: 3, // 每列最多显示的子元素个数
-                minHeight: $('.floor').find('.section').height() + 24, // 单个子元素的高度
-                // 展开时的回调
-                open: function open(floor) {
-                    if (floor.current === floor.step) {
-                        floor.$floor.find('.more span').text('收起全部');
-                        floor.$floor.find('.more .icon').addClass('arrowup');
-                    }
-                },
-                // 收起时的回调
-                close: function close(floor) {
-                    floor.$floor.find('.more span').text('查看更多');
-                    floor.$floor.find('.more .icon').removeClass('arrowup');
-                }
-            });
-        }
-    });
-</script>
+<script src="/lib/vue2.6.12.min.js"></script>
+<script th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+<script th:src="@{/js/common/serviceapi/encyclopedia.service.js(v=${version})}"></script>
+<script th:src="@{/js/encyclopedia/search.js(v=${version})}"></script>
 </body>
 </html>