提交代码

fhKeeper/formulahousekeeper/inva_4_tivo/css/knowledgeField.css

@@ -32,13 +32,13 @@
   margin-right: 0.8125rem;
 }
 .knowledgeFieldCon .knowledgeField .knowledgeField-header .knowledgeInput:focus {
-  border: 0.0625rem solid #3396FB;
+  border: 0.0625rem solid #3396fb;
   outline: none;
 }
 .knowledgeFieldCon .knowledgeField .knowledgeField-header .searchButton {
   width: 7.1875rem;
   height: 2.8125rem;
-  background: #3396FB;
+  background: #3396fb;
   border-radius: 0.375rem;
   display: flex;
   justify-content: center;
@@ -66,11 +66,6 @@
   margin: 1.875rem 0;
   overflow-y: auto;
 }
-.knowledgeFieldCon .knowledgeField .knowledgeField-content .dividingLine {
-  height: 0.0625rem;
-  background: #dcdfe6;
-  margin: 1.25rem 0;
-}
 .knowledgeFieldCon .knowledgeField .knowledgeField-content .knowledgeField-content-item {
   display: flex;
 }
@@ -122,6 +117,7 @@
 }
 .knowledgeFieldCon .knowledgeField .knowledgeField-bottom {
   padding: 1.5625rem 0;
+  font-size: 1rem !important;
 }
 .knowledgeFieldCon .knowledgeDetails {
   padding: 1.25rem 2.1875rem;
@@ -134,6 +130,7 @@
   left: 4.0625rem;
   top: 2.8125rem;
   font-size: 1.5625rem;
+  z-index: 2;
   cursor: pointer;
 }
 .knowledgeFieldCon .knowledgeDetails .returnIcon:hover {
@@ -179,9 +176,16 @@
   margin-right: 1rem;
   color: #7b7b7b;
 }
-.knowledgeFieldCon .knowledgeDetails .knowledgeDetails-left .knowledgeDetails-left-con .readUse .image {
-  width: 8.8125rem;
+.knowledgeFieldCon .knowledgeDetails .knowledgeDetails-left .knowledgeDetails-left-con .readUse .jumpToImg {
+  width: 8.75rem;
   height: 2.5rem;
+  font-size: 1rem;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  background: linear-gradient(180deg, #3597fb 0%, #39e5ff 100%);
 }
 .knowledgeFieldCon .knowledgeDetails .knowledgeDetails-left .knowledgeDetails-left-con li {
   font-family: Microsoft YaHei UI;
@@ -319,4 +323,86 @@
   line-height: normal;
   letter-spacing: 0px;
   cursor: pointer;
+  position: relative;
+  z-index: 2;
+}
+.knowledgeFieldCon .dividingLine {
+  height: 0.0625rem;
+  background: #dcdfe6;
+  margin: 1.25rem 0;
+}
+.knowledgeFieldCon .pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+}
+.knowledgeFieldCon .pagination button {
+  padding: 0.3125rem 0.625rem;
+  cursor: pointer;
+  background-color: #007bff;
+  color: white;
+  border: 0.0625rem solid #007bff;
+  border-radius: 0.3125rem;
+}
+.knowledgeFieldCon .pagination button:disabled {
+  background-color: #fff;
+  border-color: #d6d6d6;
+  cursor: not-allowed;
+  color: #000000;
+}
+.knowledgeFieldCon .pagination ul {
+  list-style-type: none;
+  display: flex;
+  gap: 0.3125rem;
+}
+.knowledgeFieldCon .pagination li {
+  padding: 0.3125rem 0.625rem;
+  cursor: pointer;
+  border: 0.0625rem solid #d6d6d6;
+  border-radius: 0.3125rem;
+}
+.knowledgeFieldCon .pagination li.active {
+  background-color: #007bff;
+  background: #007bff;
+  color: white;
+}
+.knowledgeFieldCon .pagination li:hover {
+  background-color: #007bff;
+  color: white;
+}
+.knowledgeFieldCon .pagination button {
+  padding: 0.3125rem 0.625rem;
+  margin: 0 0.3125rem;
+}
+.knowledgeFieldCon .paginationInput {
+  width: 3.75rem;
+  height: 2rem;
+  text-align: center;
+  border-radius: 0.1875rem;
+  background: #ffffff;
+  border: 0.0625rem solid #d6d6d6;
+  margin: 0 0.5rem;
+}
+.knowledgeFieldCon .paginationInput:focus {
+  border: 0.0625rem solid #3396fb;
+  outline: none;
+}
+.knowledgeFieldCon .paginationButton {
+  width: 3.75rem;
+  height: 2rem;
+  border-radius: 0.1875rem;
+  background: #f6f6f6;
+  border: 0.0625rem solid #d6d6d6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  color: #363636;
+  margin: 0 0.5rem;
+}
+.knowledgeFieldCon .paginationButton:hover {
+  background: #3396fb;
+  color: #fff;
+  border-color: #3396fb;
 }

fhKeeper/formulahousekeeper/inva_4_tivo/css/knowledgeField.less

@@ -27,17 +27,17 @@
         border-radius: 2.625rem;
         border: 1px solid #fff;
         padding: 0 1.25rem;
-        margin-right: .8125rem;
+        margin-right: 0.8125rem;
         &:focus {
-          border: .0625rem solid #3396FB;
+          border: 0.0625rem solid #3396fb;
           outline: none;
         }
       }
       .searchButton {
         width: 7.1875rem;
         height: 2.8125rem;
-        background: #3396FB;
-        border-radius: .375rem;
+        background: #3396fb;
+        border-radius: 0.375rem;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -65,11 +65,7 @@
       padding: 0 1.5625rem;
       margin: 1.875rem 0;
       overflow-y: auto;
-      .dividingLine {
-        height: 0.0625rem;
-        background: #dcdfe6;
-        margin: 1.25rem 0;
-      }
+
       .knowledgeField-content-item {
         display: flex;
         .image {
@@ -118,6 +114,7 @@
 
     .knowledgeField-bottom {
       padding: 1.5625rem 0;
+      font-size: 1rem !important;
     }
   }
 
@@ -132,6 +129,7 @@
       left: 4.0625rem;
       top: 2.8125rem;
       font-size: 1.5625rem;
+      z-index: 2;
       cursor: pointer;
     }
     .returnIcon:hover {
@@ -179,9 +177,16 @@
             margin-right: 1rem;
             color: #7b7b7b;
           }
-          .image {
-            width: 8.8125rem;
+          .jumpToImg {
+            width: 8.75rem;
             height: 2.5rem;
+            font-size: 1rem;
+            color: #fff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: .375rem;
+            background: linear-gradient(180deg, #3597fb 0%, #39e5ff 100%);
           }
         }
         li {
@@ -323,5 +328,95 @@
     line-height: normal;
     letter-spacing: 0px;
     cursor: pointer;
+    position: relative;
+    z-index: 2;
+  }
+
+  .dividingLine {
+    height: 0.0625rem;
+    background: #dcdfe6;
+    margin: 1.25rem 0;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  .pagination button {
+    padding: 0.3125rem 0.625rem;
+    cursor: pointer;
+    background-color: #007bff;
+    color: white;
+    border: 0.0625rem solid #007bff;
+    border-radius: 0.3125rem;
+  }
+
+  .pagination button:disabled {
+    background-color: #fff;
+    border-color: #d6d6d6;
+    cursor: not-allowed;
+    color: #000000;
+  }
+
+  .pagination ul {
+    list-style-type: none;
+    display: flex;
+    gap: 0.3125rem;
+  }
+
+  .pagination li {
+    padding: 0.3125rem 0.625rem;
+    cursor: pointer;
+    border: 0.0625rem solid #d6d6d6;
+    border-radius: 0.3125rem;
+  }
+
+  .pagination li.active {
+    background-color: #007bff;
+    background: #007bff;
+    color: white;
+  }
+
+  .pagination li:hover {
+    background-color: #007bff;
+    color: white;
+  }
+  .pagination button {
+    padding: 0.3125rem 0.625rem;
+    margin: 0 0.3125rem;
+  }
+  .paginationInput {
+    width: 3.75rem;
+    height: 2rem;
+    text-align: center;
+    border-radius: 0.1875rem;
+    background: #ffffff;
+    border: 0.0625rem solid #d6d6d6;
+    margin: 0 0.5rem;
+    &:focus {
+      border: 0.0625rem solid #3396fb;
+      outline: none;
+    }
+  }
+  .paginationButton {
+    width: 3.75rem;
+    height: 2rem;
+    border-radius: 0.1875rem;
+    background: #f6f6f6;
+    border: 0.0625rem solid #d6d6d6;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    color: #363636;
+    margin: 0 0.5rem;
+    &:hover {
+      background: #3396fb;
+      color: #fff;
+      border-color: #3396fb;
+    }
   }
 }

fhKeeper/formulahousekeeper/inva_4_tivo/knowledge.ftl

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="keywords"
+    content="工时管理，工时统计，工时填报，项目成本统计，生产工时管理系统，工时成本管理，工时管理软件，研发工时管理系统，企业工时管理系统，项目工时统计，项目工时统计软件，项目工时统计系统，工时统计系统，工时统计表" />
+  <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目，部门，岗位等多维度统计成本。" />
+  <title>工时管家-专注工时管理，手机移动填报，核算项目投入人力成本，企业IPO利器！</title>
+  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
+    rel="stylesheet">
+  <link href="/css/bootstrap.css" rel="stylesheet">
+  <link href="/css/font-awesome.css" rel="stylesheet">
+  <link href="/css/swiper.css" rel="stylesheet">
+  <link href="/css/magnific-popup.css" rel="stylesheet">
+  <link href="/css/styles.css" rel="stylesheet">
+  <link href="/css/reset.css" rel="stylesheet">
+  <link href="/css/tongyong.css" rel="stylesheet" >
+  <link href="/css/knowledgeField.css" rel="stylesheet" >
+</head>
+
+<body>
+  <iframe id="headerIframe" src="/moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
+  <div class="knowledgeFieldCon">
+    <div v-loading="detailsSwitchingLoading" class="wh100 flex">
+      <div class="knowledgeField">
+        <div class="knowledgeField-header">
+          <div class="knowledgeField-header-text">知识园地</div>
+          <div class="flex">
+            <input id="knowledgeInput" type="text" class="knowledgeInput" placeholder="请输入关键字搜索">
+            <button class="searchButton" onclick="search()">搜索</button>
+          </div>
+        </div>
+        <div class="flex1 knowledgeField-content">
+          <#list knowledgeFieldTableList as item>
+            <div>
+              <div class="knowledgeField-content-item">
+                <div class="image"><img src="data:image;base64,${item.baseImage}" class="wh100" class="wh100"></img>
+                </div>
+                <div class="textContent">
+                  <div>${ item.title }</div>
+                  <p>${ item.profile }</p>
+                  <button class="linkButton" onclick="learnMore(${item.id})">了解详情></button>
+                </div>
+              </div>
+              <div class="dividingLine"></div>
+            </div>
+          </#list>
+        </div>
+        <div class="knowledgeField-bottom flex-center">
+          <div class="pagination">
+            <button class="prev" onclick="goToPage(currentPage - 1)">上一页</button>
+            <ul id="page-list">
+              <!-- 动态生成页码 -->
+            </ul>
+            <button class="next" onclick="goToPage(currentPage + 1)">下一页</button>
+          </div>
+          <div class="flex-center">
+            到第
+            <input type="number" class="paginationInput" min="0" id="paginationInput">
+            页
+          </div>
+          <button onClick="confirmJump()" class="paginationButton">确定</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+<script src="/js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
+<script src="/js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+<script src="/js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+<script src="/js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+<script src="/js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+<script src="/js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
+<script src="/js/js/scripts.js"></script>
+<script src="/js/iframe.js"></script>
+
+<script>
+  // 获取当前页面的 URL 参数
+  const params = new URLSearchParams(window.location.search);
+
+  // 将参数转换为一个对象
+  const paramObj = {};
+  params.forEach((value, key) => {
+    paramObj[key] = value;
+  });
+
+  // 获取当前页面地址的参数
+  const { pageIndex = 1, pageSize = 10 } = params;
+
+  let total = ${total}
+  let totalPages = Math.ceil(total / pageSize); // 总页数
+  let currentSize = pageSize;
+  let currentPage = pageIndex; // 当前页
+  const knowledgeUrl = '/articleTemplate/pageList'
+  const knowledgeDetails = '/articleTemplate/articleDetail'
+  const fixedParameters = '?pageIndex=' + currentPage + '&pageSize=' + currentSize + '&info=' // 分页固定参数
+
+  function search() {
+    const inputVal = document.getElementById("knowledgeInput").value;
+    window.location.href = knowledgeUrl + fixedParameters + inputVal
+  }
+  function learnMore(id) {
+    window.location.href = knowledgeDetails + `?id=` + id
+  }
+  function confirmJump() {
+    let inputVal = document.getElementById("paginationInput").value;
+    if(inputVal <= 0) {
+      inputVal = 1
+    }
+    if(inputVal > totalPages) {
+      inputVal = totalPages
+    }
+    if(!inputVal) {
+      return
+    }
+    window.location.href = knowledgeUrl + '?pageIndex=' + inputVal + '&pageSize=' + currentSize
+  }
+
+  // 初始化分页组件
+  function initPagination() {
+    const pageList = document.getElementById('page-list');
+    pageList.innerHTML = ''; // 清空之前的页码
+
+    for (let i = 1; i <= totalPages; i++) {
+      const li = document.createElement('li');
+      li.textContent = i;
+      li.classList.toggle('active', i === currentPage); // 设置当前页的样式
+      li.onclick = () => goToPage(i);
+      pageList.appendChild(li);
+    }
+
+    // 更新按钮的禁用状态
+    document.querySelector('.prev').disabled = currentPage === 1;
+    document.querySelector('.next').disabled = currentPage === totalPages;
+  }
+
+  // 跳转到指定页面
+  function goToPage(page) {
+    window.location.href = knowledgeUrl + '?pageIndex=' + page + '&pageSize=' + currentSize
+  }
+
+  // 初始化分页
+  initPagination();
+</script>
+
+</html>

fhKeeper/formulahousekeeper/inva_4_tivo/knowledge.html

@@ -1,78 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <meta name="keywords"
-    content="工时管理，工时统计，工时填报，项目成本统计，生产工时管理系统，工时成本管理，工时管理软件，研发工时管理系统，企业工时管理系统，项目工时统计，项目工时统计软件，项目工时统计系统，工时统计系统，工时统计表" />
-  <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目，部门，岗位等多维度统计成本。" />
-  <title>工时管家-专注工时管理，手机移动填报，核算项目投入人力成本，企业IPO利器！</title>
-  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
-  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
-    rel="stylesheet">
-  <link href="css/bootstrap.css" rel="stylesheet">
-  <link href="css/font-awesome.css" rel="stylesheet">
-  <link href="css/swiper.css" rel="stylesheet">
-  <link href="css/magnific-popup.css" rel="stylesheet">
-  <link href="css/styles.css" rel="stylesheet">
-  <link rel="stylesheet" href="css/reset.css">
-  <link rel="stylesheet" href="css/tongyong.css">
-  <link rel="stylesheet" href="css/knowledgeField.css">
-</head>
-
-<body>
-  <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
-  <div class="knowledgeFieldCon">
-    <div v-loading="detailsSwitchingLoading" class="wh100 flex"></div>
-    <div class="knowledgeField">
-      <div class="knowledgeField-header">
-        <div class="knowledgeField-header-text">知识园地</div>
-        <div class="flex">
-          <input id="knowledgeInput" type="text" class="knowledgeInput" placeholder="请输入关键字搜索">
-          <button class="searchButton" onclick="search()">搜索</button>
-        </div>
-      </div>
-      <div class="flex1 knowledgeField-content">
-        <#list articles as item>
-          <div>
-            <div class="knowledgeField-content-item">
-              <div class="image"><img src="data:image;base64,${item.baseImage}" class="wh100" class="wh100"></img></div>
-              <div class="textContent">
-                <div>${ item.title }</div>
-                <p>${ item.profile }</p>
-                <button class="linkButton" onclick="learnMore(${item.id})">了解详情></button>
-              </div>
-            </div>
-            <div class="dividingLine"></div>
-          </div>
-        </#list>
-      </div>
-      <div class="knowledgeField-bottom flex-center">
-
-      </div>
-    </div>
-  </div>
-</body>
-<script src="js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
-<script src="js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
-<script src="js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
-<script src="js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
-<script src="js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
-<script src="js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
-<script src="js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
-<script src="js/js/scripts.js"></script>
-<script src="js/iframe.js"></script>
-
-<script>
-  function search() {
-    const inputVal = document.getElementById("knowledgeInput").value;
-    console.log(inputVal)
-    window.location.href = `/articleTemplate/pageList?pageIndex=1&pageSize=10&info=${inputVal}`
-  }
-  function learnMore(id) {
-    window.location.href = `/articleTemplate/articleDetail?id=${id}`
-  }
-</script>
-</html>

fhKeeper/formulahousekeeper/inva_4_tivo/knowledgeDetails.ftl

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="keywords"
+    content="工时管理，工时统计，工时填报，项目成本统计，生产工时管理系统，工时成本管理，工时管理软件，研发工时管理系统，企业工时管理系统，项目工时统计，项目工时统计软件，项目工时统计系统，工时统计系统，工时统计表" />
+  <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目，部门，岗位等多维度统计成本。" />
+  <title>工时管家-专注工时管理，手机移动填报，核算项目投入人力成本，企业IPO利器！</title>
+  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
+    rel="stylesheet">
+  <link href="/css/bootstrap.css" rel="stylesheet">
+  <link href="/css/font-awesome.css" rel="stylesheet">
+  <link href="/css/swiper.css" rel="stylesheet">
+  <link href="/css/magnific-popup.css" rel="stylesheet">
+  <link href="/css/styles.css" rel="stylesheet">
+  <link href="/css/reset.css" rel="stylesheet" >
+  <link href="/css/tongyong.css" rel="stylesheet">
+  <link href="/css/knowledgeField.css" rel="stylesheet" >
+</head>
+
+<body>
+  <iframe id="headerIframe" src="/moduleView/header.html" class="iframeClass" onload="reinitIframe();"></iframe>
+  <div class="knowledgeFieldCon">
+    <div v-if="isItForDetails" class="knowledgeDetails">
+      <div class="returnIcon" id="returnIcon">
+        ◀
+      </div>
+      <div class="knowledgeDetails-left">
+        <div class="knowledgeDetails-left-title">${article.title}</div>
+        <div class="dividingLine"></div>
+        <div class="knowledgeDetails-left-con">
+          <div class="flex distribution">
+            <ul class="flex">
+              <li class="grey">标签：</li>
+              <#list categoryNameList as item>
+                <li class="blue">${item}</li>
+              </#list>
+            </ul>
+          </div>
+          <div class="flex-center distribution timeContent">
+            <p>发布时间</p>
+            <span>${ article.createTime }</span>
+          </div>
+          <div class="flex-center distribution readUse" style="justify-content: flex-end;">
+            <div class="text">推荐使用:</div>
+            <#if article?exists && article.productId?exists>
+              <#if article.productId == "1">
+                <div class="jumpToImg" id="imgClick">工时管家</div>
+              <#elseif article.productId == "2">
+                <div class="jumpToImg" id="imgClick">随访管家</div>
+              <#elseif article.productId == "3">
+                <div class="jumpToImg" id="imgClick">项目管家</div>
+              <#elseif article.productId == "4">
+                <div class="jumpToImg" id="imgClick">客户管家</div>
+              <#elseif article.productId == "5">
+                <div class="jumpToImg" id="imgClick">生产车间管家</div>
+              <#else>
+                <div class="jumpToImg">敬请期待</div>
+              </#if>
+            <#else>
+              <div class="jumpToImg">敬请期待</div>
+            </#if>
+
+          </div>
+        </div>
+        <div class="hypertextContent" id="hypertextContent">
+          ${ article.content }
+        </div>
+        <div class="knowledgeDetails-left-bottom flex-center"></div>
+      </div>
+      <div class="knowledgeDetails-right">
+        <div class="latestArticles">
+          <div class="knowledgeDetails-right-title">
+            <div>最新文章</div>
+            <buttom class="linkButton" onclick="toKnowledge()">查看更多></buttom>
+          </div>
+          <div class="line"></div>
+          <div class="latestList">
+            <#list latestList as item>
+              <div class="latestList-item" data-item='${item.id}'>
+                <div class="latestList-item-image">
+                  <img src="data:image;base64,${item.baseImage}" class="wh100"></img>
+                </div>
+                <div class="latestList-item-text">
+                  <div class="latestList-item-text-title">${ item.title }</div>
+                  <div class="data">${ item.createTime }</div>
+                </div>
+              </div>
+            </#list>
+          </div>
+        </div>
+        <div class="relatedRecommendations">
+          <div class="knowledgeDetails-right-title">
+            <div>相关推荐</div>
+            <buttom class="linkButton" onclick="toKnowledge()">查看更多></buttom>
+          </div>
+          <div class="line"></div>
+          <div class="latestList">
+            <#list relatedList as item>
+              <div class="latestList-item" data-item='${item.id}'>
+                <div class="latestList-item-image">
+                  <img src="data:image;base64,${item.baseImage}" class="wh100"></img>
+                </div>
+                <div class="latestList-item-text">
+                  <div class="latestList-item-text-title">${ item.title }</div>
+                  <div class="data">${item.createTime}</div>
+                </div>
+              </div>
+            </#list>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+<script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
+<script src="/js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
+<script src="/js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
+<script src="/js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
+<script src="/js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
+<script src="/js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
+<script src="/js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
+<script src="/js/js/scripts.js"></script>
+
+<script>
+  const knowledgeDetails = '/articleTemplate/articleDetail'
+  function toKnowledge() {
+    window.location.href = `/articleTemplate/pageList?pageIndex=1&pageSize=10`
+  }
+  $('#returnIcon').click(function () {
+    window.history.back()
+  })
+
+  $('#imgClick').click(function () {
+    const id = ${article.productId}
+    const jumpObject = {
+      '1': 'http://worktime.ttkuaiban.com/#/login',
+      '2': 'http://clinic.ttkuaiban.com/#/login',
+      '3': 'http://worktime.ttkuaiban.com/#/login',
+      '4': 'http://crm.ttkuaiban.com/login',
+      '5': 'http://workshop.ttkuaiban.com'
+    }
+    if (id) {
+      window.location.href = jumpObject[id]
+    }
+  })
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const items = document.querySelectorAll('.latestList-item');
+    items.forEach(item => {
+      item.addEventListener('click', function () {
+        const itemData = item.getAttribute('data-item');
+        console.log('点击了', itemData)
+        window.location.href = knowledgeDetails + `?id=` + itemData
+      });
+    });
+  });
+</script>
+<script src="/js/iframe.js"></script>
+
+</html>