knowledgeDetails.ftl 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="keywords"
  8. content="工时管理,工时统计,工时填报,项目成本统计,生产工时管理系统,工时成本管理,工时管理软件,研发工时管理系统,企业工时管理系统,项目工时统计,项目工时统计软件,项目工时统计系统,工时统计系统,工时统计表" />
  9. <meta name="description" content="工时管家提供专业的工时填报和统计报表。支持PC和手机端。可按项目,部门,岗位等多维度统计成本。" />
  10. <title>工时管家-专注工时管理,手机移动填报,核算项目投入人力成本,企业IPO利器!</title>
  11. <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
  12. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700&display=swap&subset=latin-ext"
  13. rel="stylesheet">
  14. <link href="/css/bootstrap.css" rel="stylesheet">
  15. <link href="/css/font-awesome.css" rel="stylesheet">
  16. <link href="/css/swiper.css" rel="stylesheet">
  17. <link href="/css/magnific-popup.css" rel="stylesheet">
  18. <link href="/css/styles.css" rel="stylesheet">
  19. <link href="/css/reset.css" rel="stylesheet" >
  20. <link href="/css/tongyong.css" rel="stylesheet">
  21. <link href="/css/knowledgeField.css" rel="stylesheet" >
  22. </head>
  23. <body data-spy="scroll" data-target=".fixed-top" id="body">
  24. <div class="spinner-wrapper">
  25. <div class="spinner">
  26. <div class="bounce1"></div>
  27. <div class="bounce2"></div>
  28. <div class="bounce3"></div>
  29. </div>
  30. </div>
  31. <iframe id="headerIframe" src="/moduleView/header.html" class="iframeClass"></iframe>
  32. <div class="knowledgeFieldCon">
  33. <div v-if="isItForDetails" class="knowledgeDetails">
  34. <div class="returnIcon" id="returnIcon">
  35. <img src="/image/ions/zuos.png" />
  36. </div>
  37. <div class="knowledgeDetails-left">
  38. <div class="knowledgeDetails-left-title">${article.title}</div>
  39. <div class="dividingLine"></div>
  40. <div class="knowledgeDetails-left-con">
  41. <div class="flex distribution">
  42. <ul class="flex">
  43. <li class="grey">标签:</li>
  44. <#list categoryNameList as item>
  45. <li class="blue">${item}</li>
  46. </#list>
  47. </ul>
  48. </div>
  49. <div class="flex-center distribution timeContent">
  50. <p>发布时间</p>
  51. <span>${ article.createTimeStr }</span>
  52. </div>
  53. <div class="flex-center distribution readUse" style="justify-content: flex-end;">
  54. <div class="text">推荐使用:</div>
  55. <#if article?exists && article.productId?exists>
  56. <#if article.productId == "1">
  57. <div class="jumpToImg" id="imgClick">工时管家</div>
  58. <#elseif article.productId == "2">
  59. <div class="jumpToImg" id="imgClick">随访管家</div>
  60. <#elseif article.productId == "3">
  61. <div class="jumpToImg" id="imgClick">项目管家</div>
  62. <#elseif article.productId == "4">
  63. <div class="jumpToImg" id="imgClick">客户管家</div>
  64. <#elseif article.productId == "5">
  65. <div class="jumpToImg" id="imgClick">生产车间管家</div>
  66. <#else>
  67. <div class="jumpToImg">敬请期待</div>
  68. </#if>
  69. <#else>
  70. <div class="jumpToImg">敬请期待</div>
  71. </#if>
  72. </div>
  73. </div>
  74. <div class="hypertextContent" id="hypertextContent">
  75. ${ article.content }
  76. </div>
  77. <div class="knowledgeDetails-left-bottom flex-center"></div>
  78. </div>
  79. <div class="knowledgeDetails-right">
  80. <div class="latestArticles">
  81. <div class="knowledgeDetails-right-title">
  82. <div>最新文章</div>
  83. <buttom class="linkButton" onclick="toKnowledge()">查看更多></buttom>
  84. </div>
  85. <div class="line"></div>
  86. <div class="latestList">
  87. <#list latestList as item>
  88. <div class="latestList-item" data-item='${item.id}'>
  89. <div class="latestList-item-image">
  90. <img src="${item.coverImgUrl}" class="wh100"></img>
  91. </div>
  92. <div class="latestList-item-text">
  93. <div class="latestList-item-text-title">${ item.title }</div>
  94. <div class="data">${ item.createTimeStr }</div>
  95. </div>
  96. </div>
  97. </#list>
  98. </div>
  99. </div>
  100. <div class="relatedRecommendations">
  101. <div class="knowledgeDetails-right-title">
  102. <div>相关推荐</div>
  103. <buttom class="linkButton" onclick="toKnowledge()">查看更多></buttom>
  104. </div>
  105. <div class="line"></div>
  106. <div class="latestList">
  107. <#list relatedList as item>
  108. <div class="latestList-item" data-item='${item.id}'>
  109. <div class="latestList-item-image">
  110. <img src="${item.coverImgUrl}" class="wh100"></img>
  111. </div>
  112. <div class="latestList-item-text">
  113. <div class="latestList-item-text-title">${ item.title }</div>
  114. <div class="data">${item.createTimeStr}</div>
  115. </div>
  116. </div>
  117. </#list>
  118. </div>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </body>
  124. <script src="/js/js/jquery.min.js"></script> <!-- jQuery for Bootstrap's JavaScript plugins -->
  125. <script src="/js/js/popper.min.js"></script> <!-- Popper tooltip library for Bootstrap -->
  126. <script src="/js/js/bootstrap.min.js"></script> <!-- Bootstrap framework -->
  127. <script src="/js/js/jquery.easing.min.js"></script> <!-- jQuery Easing for smooth scrolling between anchors -->
  128. <script src="/js/js/swiper.min.js"></script> <!-- Swiper for image and text sliders -->
  129. <script src="/js/js/jquery.magnific-popup.js"></script> <!-- Magnific Popup for lightboxes -->
  130. <script src="/js/js/validator.min.js"></script> <!-- Validator.js - Bootstrap plugin that validates forms -->
  131. <script src="/js/js/scripts.js"></script>
  132. <script src="/js/iframe.js"></script>
  133. <script>
  134. const knowledgeDetails = '/articleTemplate/articleDetail'
  135. function toKnowledge() {
  136. window.location.href = `/articleTemplate/pageList?pageIndex=1&pageSize=10`
  137. }
  138. $('#returnIcon').click(function () {
  139. window.history.back()
  140. })
  141. $('#imgClick').click(function () {
  142. const id = ${article.productId}
  143. const jumpObject = {
  144. '1': 'http://worktime.ttkuaiban.com/#/login',
  145. '2': 'http://clinic.ttkuaiban.com/#/login',
  146. '3': 'http://worktime.ttkuaiban.com/#/login',
  147. '4': 'http://crm.ttkuaiban.com/login',
  148. '5': 'http://workshop.ttkuaiban.com'
  149. }
  150. if (id) {
  151. window.location.href = jumpObject[id]
  152. }
  153. })
  154. document.addEventListener("DOMContentLoaded", function () {
  155. const items = document.querySelectorAll('.latestList-item');
  156. items.forEach(item => {
  157. item.addEventListener('click', function () {
  158. const itemData = item.getAttribute('data-item');
  159. console.log('点击了', itemData)
  160. window.location.href = knowledgeDetails + `?id=` + itemData
  161. });
  162. });
  163. });
  164. function reinitIframe() {
  165. const iframe = document.getElementById("headerIframe");
  166. let observer = null
  167. if (iframe) {
  168. const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
  169. const iframeBody = iframeDocument.body
  170. observer = new MutationObserver(function(mutationsList, observer) {
  171. const bodyHeight = iframeBody.clientHeight;
  172. iframe.style.height = (bodyHeight + 1) + 'px';
  173. });
  174. observer.observe(iframeBody, { attributes: true, childList: true, subtree: true });
  175. let imgElement = iframeDocument.getElementById('logo');
  176. let headerItems = iframeDocument.querySelectorAll('.header-item')
  177. let headerView = iframeDocument.querySelector('.headerView')
  178. headerView.style.background = '#fff'
  179. imgElement.src = './image/logos.jpg'
  180. headerView.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0)';
  181. headerItems.forEach(function(item) {
  182. item.style.color = '#000'; // 设置你想要的字体颜色
  183. });
  184. }
  185. }
  186. reinitIframe()
  187. </script>
  188. </html>