list.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3. xsi:schemaLocation="https://www.thymeleaf.org ">
  4. <head>
  5. <title>信息平台</title>
  6. <template th:replace="article/components/article-link"></template>
  7. <template th:replace="components/analysis"></template>
  8. </head>
  9. <body class="home listData">
  10. <div class="cm-modal"></div>
  11. <!--导航栏-->
  12. <template th:replace="article/components/article-header"></template>
  13. <div class="tip-bar">
  14. <!-- <div class="tip">提示:产品详情请到采美商城搜索</div> -->
  15. <!-- 面包屑-->
  16. <div th:if="${typeId}>0" class="bar">
  17. <a th:each="type: ${articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" th:href="'/info/center-' + ${type.id} + '-1.html'" class="title newTitle"></a>
  18. <span th:each="type: ${articleType}">
  19. <span th:each="childLink: ${type.linkList}" th:if="${typeId}==${childLink.id}">
  20. <a th:text="${type.name}" th:href="'/info/center-' + ${type.id} + '-1.html'" class="title newTitle"></a>
  21. <a th:if="${typeId}==${childLink.id}" th:href="'/info/center-' + ${childLink.id} + '-1.html'" class="title newTitle" th:text="'>' + ${childLink.name}"></a>
  22. </span>
  23. </span>
  24. </div>
  25. </div>
  26. <div class="info-banner AppBanner" th:if="${isSearch} and ${articleImages}">
  27. <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headAppBanner}" >
  28. <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
  29. <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />
  30. </a>
  31. <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
  32. </div>
  33. <div class="sider-banner">
  34. <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headAppBanner}" >
  35. <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
  36. <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" />
  37. </a>
  38. <img th:src="${type.headAppBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
  39. </div>
  40. </div>
  41. </div>
  42. <!--主体内容-->
  43. <div class="content clearfix" id="ArticleContent">
  44. <!--侧边栏Ross广告图-->
  45. <div class="mainData">
  46. <div class="new-list" id="articleList" v-cloak>
  47. <!-- h5 公告-->
  48. <div class="info-h5-notice" th:if="${isSearch}">
  49. <div class="h5-notice">公告:</div>
  50. <div class="h5-notice-title">
  51. <ul>
  52. <li @click="hanldDetails(newsList[0].id)" v-if="newsList[0].title">{{ newsList[0].title }}</li>
  53. </ul>
  54. </div>
  55. <div class="h5-notice-more"><a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a></div>
  56. </div>
  57. <div class="info-banner PcBanner" th:if="${isSearch} and ${articleImages}">
  58. <div class="banner" th:each="type: ${articleImages}" th:if="${type.levelType} == 1 and ${type.headPcBanner}" >
  59. <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
  60. <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
  61. </a>
  62. <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
  63. </div>
  64. <div class="sider-banner">
  65. <div th:each="type: ${articleImages}" th:if="${type.levelType} == 2 and ${type.headPcBanner}">
  66. <a th:href="${type.jumpLink}" th:if="${type.jumpStatus} == 2">
  67. <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" />
  68. </a>
  69. <img th:src="${type.headPcBanner}" style="width: 100%;height: 100%;" th:if="${type.jumpStatus} == 0"/>
  70. </div>
  71. </div>
  72. </div>
  73. <!-- 精选文章推荐-->
  74. <div class="featured-Articles" id="featured-Articles" th:if="${isSearch} and ${#arrays.length(infoSelected)} > 0">
  75. <div class="featured-title">
  76. <div>精选推荐</div>
  77. <div>
  78. <a href="/info/articlerecommendation-1-1.html?isSelected">更多 ></a>
  79. </div>
  80. </div>
  81. <div class="featured-content">
  82. <div class="item-content" th:each="featured: ${infoSelected}">
  83. <div class="item-img">
  84. <a th:href="'/info/detail-' + ${featured.id} + '-1.html'" class="img-a">
  85. <img th:src="${featured.image}"/>
  86. </a>
  87. </div>
  88. <a th:href="'/info/detail-' + ${featured.id} + '-1.html'" class="text-a">
  89. <div class="item-title" th:text="${featured.title}"></div>
  90. </a>
  91. </div>
  92. </div>
  93. </div>
  94. <div v-if="!isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'"><a href="/supplier-1378.html" ><img src="/img/ross/ross-image@2x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a></div>
  95. <!-- 产品搜索结果 -->
  96. <div class="search-section" v-show="params.keyword && productRecord > 0">
  97. <div class="search__product_list">
  98. <div class="search__tip">为您找到相关产品<span v-text="productRecord"></span>个</div>
  99. <div class="search__content">
  100. <template v-for="product in productList">
  101. <a :href="'/product-' + product.productId + '.html'" class="search__product" :key="product.productId" target="_blank">
  102. <div class="search__product_cover"><img :src="product.image" :alt="product.name"/></div>
  103. <div class="search__product_name" v-html="product.name"></div>
  104. </a>
  105. </template>
  106. <template v-if="isPC && 8 - productRecord > 0">
  107. <div class="search__product" v-for="i in (8 - productRecord)" :key="'empty' + i">
  108. <div class="search__product_cover"><img src="/img/base/placeholder.png"/></div>
  109. <div class="search__product_name"></div>
  110. </div>
  111. </template>
  112. <div class="search__more" v-if="!isPC && productRecord > 8">
  113. <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
  114. <span class="search__more_line"></span>
  115. <a class="search__more_link" :href="'/product/list.html?productFlag=0&linkageFlag=0&keyword=' + keyword" target="_blank">查看全部</a>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="search__more" v-if="isPC && productRecord > 8">
  120. <span class="search__more_tip">更多{{keyword | keywordSlice}}产品</span>
  121. <span class="search__more_line"></span>
  122. <a class="search__more_link" :href="'/product/list.html?productFlag=0&linkageFlag=0&keyword=' + keyword" target="_blank">查看全部</a>
  123. </div>
  124. </div>
  125. <!-- 文章筛选 -->
  126. <div class="search-filter" v-show="params.keyword">
  127. <div class="search__content">
  128. <div class="search__tip">为您找到相关文章<span v-text="listRecord"></span>条</div>
  129. <div class="search__sort" id="searchSortControl">
  130. <div class="search__sort_current">综合排序</div>
  131. <ul class="search__sort_select">
  132. <li class="selected" data-type="1">综合排序</li>
  133. <li data-type="2">时间排序</li>
  134. </ul>
  135. </div>
  136. </div>
  137. </div>
  138. <!-- 文章列表 -->
  139. <div class="listData-select-title" th:if="${isSearch}">
  140. <div class="search-select">
  141. <div class="select-new" :class="params.sortType === 1 ? 'now-search-select' : '' " @click="selectListNew(1)">最新</div>
  142. <div class="select-earliest" :class="params.sortType === 2 ? 'now-search-select' : '' " @click="selectListNew(2)">最早</div>
  143. </div>
  144. </div>
  145. <div v-if="listData && listData.length>0" class="dataRousce">
  146. <div class="row" v-for="item in listData">
  147. <div class="new-img">
  148. <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
  149. <img :src="item.image"/>
  150. </a>
  151. </div>
  152. <div class="new-blurb">
  153. <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
  154. <p class="title" v-html="item.title"></p>
  155. </a>
  156. <p class="introduction" v-html="item.intro"></p>
  157. <p class="xinxi"><em v-if="item.labels && item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">
  158. <template v-for="(id,i) in item.labelIds">{{i>0?' | ':''}}<a v-if="item.labels[i]" v-text="item.labels[i]" :href="'/info/label-' +id+ '-1.html'"></a></template>
  159. </em></p>
  160. <p class="xinxi">
  161. <em v-if="!isPC" class="pv icon mIcon" v-text="item.pv"></em>
  162. <em class="write icon mIcon" v-text="item.publisher"></em>
  163. <em v-if="item.publishDate" class="time icon mIcon" v-text="item.publishDate.substr(0,10)"></em>
  164. <em v-if="isPC" class="pv icon mIcon" v-text="item.pv"></em>
  165. <!-- <em v-if="item.labels.length>0&&item.labels[0]" class="hotspot icon mIcon">-->
  166. <!-- <template v-for="(id,i) in item.labelIds">{{i>0?',':''}}<a v-if="item.labels[i]" v-text="item.labels[i]" :href="'/info/label-' +id+ '-1.html'"></a></template>-->
  167. <!-- </em>-->
  168. </p>
  169. <!-- <p v-if="isPC" class="P_img"><em class="pv icon mIcon" v-text="item.pv"></em></p>-->
  170. </div>
  171. </div>
  172. <div class="handleMore" v-if="!noMore">
  173. <el-button class="more" @click="handleMore">查看更多</el-button>
  174. </div>
  175. </div>
  176. <div v-if="listLoading" class="loading">
  177. <img src="/img/base/loading.gif">
  178. </div>
  179. <!-- 如果没有搜索结果。显示此div -->
  180. <div v-else-if="listRecord==0" class="no-result">
  181. <p><img src="/img/info/kuqi.jpg"></p>
  182. <p class="nofound">很抱歉,没有找到 “<span v-text="params.keyword"></span>” 相关结果!</p>
  183. <p class="change">请修改或者尝试其他搜索词</p>
  184. </div>
  185. <div v-if="(!isPC) && noMore" class="no-more">---- 没有更多了 ----</div>
  186. <!--分页-->
  187. <div v-if="isPC && pageTotal>1" class="pageWrap clear">
  188. <a v-if="params.num>1" class="prev" :href="paginationUrl(params.num*1-1)"></a>
  189. <template v-for="n in showPageBtn">
  190. <a v-if="n" :class="{'on':(n==params.num)}" :href="paginationUrl(n)" v-text="n"></a>
  191. <span v-else>···</span>
  192. </template>
  193. <a v-if="params.num<pageTotal" class="next" :href="paginationUrl(params.num*1+1)"></a>
  194. <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
  195. <span>跳至</span>
  196. <input v-model="pageInput" @blur="checkNum()"/>
  197. <span>页</span>&nbsp;
  198. <a class="btn" :href="paginationUrl(pageInput)">点击跳转</a>
  199. </div>
  200. <!-- <div class="side-pop-up" :class="dialogVisible ? 'eject' : 'retract'" @click="handlerPopup">-->
  201. <!-- <div v-if="dialogVisible">侧边弹窗13-->
  202. <!-- <el-button @click.stop="dialogVisible = false"></el-button></div>-->
  203. <!-- </div>-->
  204. </div>
  205. </div>
  206. <div class="info-Notice" id="infoNotice" th:if="${isSearch}" v-cloak>
  207. <div class="notice-title">
  208. <div>公告</div>
  209. <div>
  210. <a href="/info/articlerecommendation-3-1.html?isNotice">更多 ></a>
  211. </div>
  212. </div>
  213. <div class="notice-content" v-cloak>
  214. <ul class="notice-content-list">
  215. <li class="notice-content-li" v-for="(list ,index) in newsList" :key="index" @click="hanldDetails(list.id)">
  216. {{ list.title }}
  217. </li>
  218. </ul>
  219. </div>
  220. </div>
  221. <!--侧边栏Ross广告图-->
  222. <div v-if="isPC && isRossShow" class="article-right-ross article-PC" :class="isRossShow ? 'show' : 'none'">
  223. <a href="/supplier-1378.html" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
  224. </div>
  225. <!--侧边栏-->
  226. <template th:replace="article/components/article-sidebar"></template>
  227. <div id="scrollTop">
  228. <div class="item">
  229. <span class="toTop icon mIcon">置顶</span>
  230. </div>
  231. </div>
  232. </div>
  233. <template th:replace="article/components/article-drawer"></template>
  234. <template th:replace="article/components/article-footer"></template>
  235. <template th:replace="components/foot-link"></template>
  236. <script charset="utf-8" type="text/javascript" src="/lib/datapicker/moment-2.29.min.js"></script>
  237. <script charset="utf-8" type="text/javascript" src="/lib/datapicker/jquery.daterangepicker.js"></script>
  238. <script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
  239. <script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
  240. <script type="text/javascript" src="/lib/element-ui/vant.min.js"></script>
  241. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
  242. <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
  243. <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
  244. <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
  245. </body>
  246. </html>