采美百科上测试

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,7 @@
 
 var scrollFlag = false;
 var navbarIndex = 0;
+var isPC = true;
 
 /**
  * 防抖
@@ -46,7 +47,7 @@ var resetScrollFlag = debounce(function () {
  */
 
 function responseScreen(size, callback) {
-    var isPc = $(window).width() > size; // callback(isPc)
+    var isPc = isPC = $(window).width() > size; // callback(isPc)
 
     $(window).resize(function () {
         if (!isPc && $(this).width() > size) {
@@ -373,6 +374,14 @@ function slideBarHandle(selector) {
     });
 }
 
+/*
+* 跳转到搜索页面
+* */
+function toSearchPage(){
+
+}
+
+
 $(function () {
     activeNavbar('.navbar .nav li');
     slideBarHandle('#menuBtn', 'flex');

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

@@ -32,4 +32,11 @@ $(function () {
             $(el).toggleClass('arrowup');
         });
     });
+
+    $('#contactPopupBtn').on('click', function () {
+        $('#contactPopup').show();
+    });
+    $('#contactPopupClose').on('click', function () {
+        $('#contactPopup').hide();
+    });
 });

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/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 th:src="@{banner}" 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>