news-list.htm 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>{ms:global.name/}</title>
  5. <meta http-equiv="content-type" content="text/html">
  6. <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
  7. <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width">
  8. <meta name="format-detection" content="telephone=no">
  9. <meta name="app-mobile-web-app-capable" content="yes">
  10. <meta name="app-mobile-web-app-status-bar-style" content="black-translucent">
  11. <meta name="keywords" content="{ms:global.keyword/}">
  12. <meta name="description" content="{ms:global.descrip/}">
  13. <script type="text/javascript" src="{ms:global.host/}/static/plugins/vue/2.6.9/vue.min.js"></script>
  14. <link rel="stylesheet" href="{ms:global.host/}/static/plugins/minireset/0.0.2/minireset.min.css">
  15. <link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css">
  16. <link rel="stylesheet" href="{ms:global.host/}/static/plugins/animate/4.1.0/animate.min.css">
  17. <script src="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.js"></script>
  18. <link rel="stylesheet" href="{ms:global.host/}/static/plugins/element-ui/2.12.0/index.css">
  19. <link rel="stylesheet" href="{ms:global.host/}/{ms:global.style/}/css/app.css">
  20. <!--网络请求框架-->
  21. <script src="{ms:global.host/}/static/plugins/axios/0.18.0/axios.min.js"></script>
  22. <script src="{ms:global.host/}/static/plugins/qs/6.6.0/qs.min.js"></script>
  23. <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.js"></script>
  24. <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.http.js"></script>
  25. <script src="{ms:global.host/}/static/plugins/ms/1.0.0/ms.util.js"></script>
  26. <script>
  27. ms.base = "";
  28. </script>
  29. <style>
  30. [v-cloak]{
  31. display: none;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="app" v-cloak>
  37. <#include "nav.htm" />
  38. <div class="news">
  39. <div class="body">
  40. <div class="left">
  41. {ms:channel type='parent'}
  42. <span class="title"> ${field.typetitle}</span>
  43. {/ms:channel}
  44. <#assign typetitle=field.typetitle>
  45. <#if field.leaf>
  46. {ms:channel type='level'}
  47. <a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
  48. {/ms:channel}
  49. <#else>
  50. {ms:channel type='son'}
  51. <a href="{ms:global.url/}${field.typelink}" class="<#if typetitle==field.typetitle>sub-title-sel<#else>sub-title</#if>"> ${field.typetitle} </a>
  52. {/ms:channel}
  53. </#if>
  54. </div>
  55. <div class="right">
  56. <div class="ms-channel-path">
  57. <span class="ms-channel-path-label"> 当前位置: </span>
  58. <a href="/" class="ms-channel-path-index"> 首页 </a> {ms:channel type="path"}
  59. <i class="iconfont icon-youjiantou"></i>
  60. <a href="{ms:global.url/}${field.typelink}" class="ms-channel-path-link"> ${field.typetitle} </a> {/ms:channel}
  61. </div>
  62. <div class="right-body">
  63. {ms:arclist size=10 ispaging=true}
  64. <div class="news-item">
  65. <div class="pic">
  66. <img title="" alt="" src="{@ms:file field.litpic/}">
  67. </div>
  68. <div class="news-content">
  69. <a href="{ms:global.url/}${field.link}" class="title"> ${field.title} </a>
  70. <span class="desc"> ${field.descrip} </span>
  71. <div class="news-footer">
  72. <span class="label"> 发布时间 </span>
  73. <span class="v"> ${field.date?string("yyyy-MM-dd")} </span>
  74. </div>
  75. </div>
  76. </div>
  77. {/ms:arclist}
  78. </div>
  79. <div class="page">
  80. <el-pagination
  81. background
  82. @current-change="handleCurrentChange"
  83. :page-size="pageSize"
  84. :current-page.sync="pageCur"
  85. layout="prev, pager, next, jumper"
  86. :total="contentCount"> </el-pagination>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. <#include "footer.htm" />
  92. </div>
  93. <script>
  94. var app = new Vue({
  95. el: '#app',
  96. watch:{
  97. },
  98. data: {
  99. //当前页数
  100. pageCur: ${(page.cur)!1},
  101. //每页文章条数
  102. pageSize: ${(page.size)!20},
  103. //页数总数
  104. pageTotal: ${(page.total)!0},
  105. //内容总数
  106. contentCount: ${(page.rcount)!0}
  107. },
  108. methods: {
  109. handleCurrentChange:function(val) {
  110. if(val==1) {
  111. location.href = "{ms:global.url/}/${field.categoryPath}/index.html";
  112. } else {
  113. location.href = "{ms:global.url/}/${field.categoryPath}/list-" + val + ".html";
  114. }
  115. }
  116. },
  117. created(){
  118. }
  119. })
  120. </script>
  121. <style>
  122. body {
  123. background-color:#fff;
  124. box-sizing:border-box;
  125. font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
  126. moz-box-sizing:border-box;
  127. webkit-box-sizing:border-box;
  128. }
  129. .news
  130. {
  131. align-items:center;
  132. flex-direction:row;
  133. display:flex;
  134. padding-right:0px;
  135. box-sizing:border-box;
  136. justify-content:center;
  137. padding-bottom:0px;
  138. flex-wrap:nowrap;
  139. width:100%;
  140. margin-bottom:0px;
  141. padding-top:0px;
  142. padding-left:0px;
  143. margin-top:0px;
  144. }
  145. .news .body
  146. {
  147. padding-bottom:20px;
  148. flex-wrap:nowrap;
  149. flex-direction:row;
  150. display:flex;
  151. padding-right:0px;
  152. width:1200%;
  153. box-sizing:border-box;
  154. padding-top:20px;
  155. padding-left:0px;
  156. justify-content:center;
  157. height:100%;
  158. }
  159. .news .body .left
  160. {
  161. padding-bottom:0px;
  162. flex-wrap:nowrap;
  163. flex-direction:column;
  164. display:flex;
  165. padding-right:0px;
  166. width:200px;
  167. box-sizing:border-box;
  168. padding-top:0px;
  169. padding-left:0px;
  170. margin-top:0px;
  171. height:100%;
  172. }
  173. .news .body .left .title
  174. {
  175. border-bottom-color:#C0C4CC;
  176. color:#C0C4CC;
  177. flex-direction:row;
  178. word-wrap:break-word;
  179. display:inline-block;
  180. font-size:16PX;
  181. border-bottom-style:dashed;
  182. padding-top:10px;
  183. border-bottom-width:1px;
  184. padding-left:10px;
  185. margin-top:0px;
  186. height:40px;
  187. }
  188. .news .body .left .sub-title-sel
  189. {
  190. background-color:#F2F6FC;
  191. color:#409EFF;
  192. flex-direction:row;
  193. word-wrap:break-word;
  194. display:inline-block;
  195. font-size:16PX;
  196. padding-top:10px;
  197. padding-left:10px;
  198. margin-top:2px;
  199. height:40px;
  200. }
  201. .news .body .left .sub-title
  202. {
  203. color:#5F5F5F;
  204. flex-direction:row;
  205. word-wrap:break-word;
  206. display:inline-block;
  207. font-size:16PX;
  208. padding-top:10px;
  209. padding-left:10px;
  210. margin-top:0px;
  211. height:40px;
  212. }
  213. .news .body .right
  214. {
  215. padding-bottom:0px;
  216. flex-wrap:nowrap;
  217. flex-direction:column;
  218. display:flex;
  219. padding-right:0px;
  220. width:1000px;
  221. margin-bottom:0px;
  222. box-sizing:border-box;
  223. padding-top:0px;
  224. padding-left:20px;
  225. margin-top:0px;
  226. height:100%;
  227. }
  228. .news .body .right .page {
  229. padding-right: 0px;
  230. padding-bottom: 0px;
  231. flex-wrap: nowrap;
  232. height: 60px;
  233. align-items: center;
  234. justify-content: center;
  235. padding-left: 0px;
  236. box-sizing: border-box;
  237. padding-top: 0px;
  238. flex-direction: row;
  239. display: flex;
  240. width: 100%;
  241. }
  242. .news .body .right .ms-channel-path
  243. {
  244. align-items:center;
  245. flex-direction:row;
  246. display:flex;
  247. padding-right:0px;
  248. box-sizing:border-box;
  249. margin-left:auto;
  250. margin-right:auto;
  251. padding-bottom:0px;
  252. flex-wrap:nowrap;
  253. width:100%;
  254. margin-bottom:10px;
  255. padding-top:0px;
  256. padding-left:0px;
  257. margin-top:10px;
  258. height:30px;
  259. }
  260. .news .body .right .ms-channel-path span
  261. {
  262. color:#909399;
  263. flex-direction:row;
  264. word-wrap:break-word;
  265. display:inline-block;
  266. font-size:16PX;
  267. }
  268. .news .body .right .ms-channel-path .ms-channel-path-index
  269. {
  270. cursor:pointer;
  271. color:#000;
  272. font-size:16PX;
  273. text-decoration:none;
  274. margin-bottom:0px;
  275. margin-top:0px;
  276. }
  277. .news .body .right .ms-channel-path >i
  278. {
  279. }
  280. .news .body .right .ms-channel-path .ms-channel-path-link
  281. {
  282. cursor:pointer;
  283. color:#000;
  284. font-size:16PX;
  285. text-decoration:none;
  286. margin-bottom:0px;
  287. margin-top:0px;
  288. }
  289. .news .body .right .right-body
  290. {
  291. align-items:flex-start;
  292. flex-direction:column;
  293. display:flex;
  294. padding-right:10px;
  295. box-sizing:border-box;
  296. margin-left:0px;
  297. margin-right:0px;
  298. padding-bottom:10px;
  299. width:100%;
  300. margin-bottom:0px;
  301. padding-top:10px;
  302. padding-left:10px;
  303. margin-top:0px;
  304. height:100%;
  305. }
  306. .news .body .right .right-body .news-item
  307. {
  308. padding-bottom:0px;
  309. flex-wrap:nowrap;
  310. flex-direction:row;
  311. display:flex;
  312. padding-right:0px;
  313. width:100%;
  314. box-sizing:border-box;
  315. margin-bottom:10px;
  316. padding-top:0px;
  317. padding-left:0px;
  318. margin-top:0px;
  319. height:120px;
  320. }
  321. .news .body .right .right-body .news-item .pic
  322. {
  323. padding-bottom:0px;
  324. flex-wrap:nowrap;
  325. flex-direction:row;
  326. display:flex;
  327. width:200px;
  328. box-sizing:border-box;
  329. padding-top:0px;
  330. height:120px;
  331. }
  332. .news .body .right .right-body .news-item .pic img
  333. {
  334. margin-right:0px;
  335. padding-bottom:0px;
  336. padding-right:0px;
  337. width:100%;
  338. margin-bottom:0px;
  339. padding-top:0px;
  340. padding-left:0px;
  341. height:100%;
  342. margin-left:0px;
  343. }
  344. .news .body .right .right-body .news-item .news-content
  345. {
  346. padding-bottom:0px;
  347. flex-wrap:nowrap;
  348. flex-direction:column;
  349. display:flex;
  350. padding-right:0px;
  351. width:100%;
  352. box-sizing:border-box;
  353. padding-top:0px;
  354. position:relative;
  355. padding-left:10px;
  356. justify-content:flex-start;
  357. height:100%;
  358. }
  359. .news .body .right .right-body .news-item .news-content .title
  360. {
  361. padding-bottom:0px;
  362. flex-direction:row;
  363. word-wrap:break-word;
  364. display:inline-block;
  365. font-size:18PX;
  366. padding-top:0px;
  367. padding-left:0px;
  368. }
  369. .news .body .right .right-body .news-item .news-content .desc
  370. {
  371. padding-bottom:8px;
  372. color:#909399;
  373. flex-direction:row;
  374. word-wrap:break-word;
  375. display:inline-block;
  376. padding-right:0px;
  377. font-size:16PX;
  378. margin-bottom:0px;
  379. padding-top:8px;
  380. padding-left:0px;
  381. height:100px;
  382. }
  383. .news .body .right .right-body .news-item .news-content .news-footer
  384. {
  385. align-items:center;
  386. flex-direction:row;
  387. display:flex;
  388. padding-right:0px;
  389. box-sizing:border-box;
  390. justify-content:flex-start;
  391. margin-left:0px;
  392. margin-right:0px;
  393. padding-bottom:0px;
  394. flex-wrap:nowrap;
  395. width:100%;
  396. margin-bottom:0px;
  397. padding-top:0px;
  398. padding-left:0px;
  399. height:30%;
  400. }
  401. .news .body .right .right-body .news-item .news-content .news-footer .label
  402. {
  403. margin-right:0px;
  404. padding-bottom:0px;
  405. color:#C0C4CC;
  406. flex-direction:row;
  407. word-wrap:break-word;
  408. display:inline-block;
  409. padding-right:0px;
  410. font-size:14PX;
  411. margin-bottom:0px;
  412. padding-top:0px;
  413. padding-left:0px;
  414. margin-left:0px;
  415. }
  416. .news .body .right .right-body .news-item .news-content .news-footer .v
  417. {
  418. margin-right:10px;
  419. padding-bottom:0px;
  420. color:#C0C4CC;
  421. flex-direction:row;
  422. word-wrap:break-word;
  423. display:inline-block;
  424. padding-right:0px;
  425. font-size:14PX;
  426. margin-bottom:0px;
  427. padding-top:0px;
  428. padding-left:0px;
  429. margin-left:10px;
  430. }
  431. @media (max-width: 768px){
  432. .news
  433. {
  434. align-items:center;
  435. flex-direction:row;
  436. display:flex;
  437. padding-right:0px;
  438. box-sizing:border-box;
  439. justify-content:center;
  440. padding-bottom:0px;
  441. flex-wrap:nowrap;
  442. width:100%;
  443. margin-bottom:0px;
  444. padding-top:0px;
  445. padding-left:0px;
  446. margin-top:0px;
  447. }
  448. .news .body
  449. {
  450. padding-bottom:20px;
  451. align-items:center;
  452. flex-wrap:nowrap;
  453. flex-direction:column;
  454. display:flex;
  455. padding-right:0px;
  456. width:100%;
  457. box-sizing:border-box;
  458. padding-top:20px;
  459. padding-left:0px;
  460. justify-content:flex-start;
  461. }
  462. .news .body .right
  463. {
  464. padding-bottom:0px;
  465. flex-wrap:nowrap;
  466. flex-direction:column;
  467. display:flex;
  468. padding-right:0px;
  469. width:100%;
  470. margin-bottom:0px;
  471. box-sizing:border-box;
  472. padding-top:0px;
  473. padding-left:0px;
  474. margin-top:0px;
  475. }
  476. .news .body .right .ms-channel-path
  477. {
  478. align-items:center;
  479. flex-direction:row;
  480. display:flex;
  481. padding-right:0px;
  482. box-sizing:border-box;
  483. margin-left:auto;
  484. margin-right:auto;
  485. padding-bottom:0px;
  486. flex-wrap:nowrap;
  487. width:90%;
  488. margin-bottom:10px;
  489. padding-top:0px;
  490. padding-left:0px;
  491. margin-top:10px;
  492. height:30px;
  493. }
  494. .news .body .right .ms-channel-path span
  495. {
  496. color:#909399;
  497. flex-direction:row;
  498. word-wrap:break-word;
  499. display:inline-block;
  500. font-size:16PX;
  501. }
  502. .news .body .right .ms-channel-path .ms-channel-path-index
  503. {
  504. cursor:pointer;
  505. color:#000;
  506. font-size:16PX;
  507. text-decoration:none;
  508. margin-bottom:0px;
  509. margin-top:0px;
  510. }
  511. .news .body .right .ms-channel-path .ms-channel-path-link
  512. {
  513. cursor:pointer;
  514. color:#000;
  515. font-size:16PX;
  516. text-decoration:none;
  517. margin-bottom:0px;
  518. margin-top:0px;
  519. }
  520. .news .body .right .right-body
  521. {
  522. align-items:center;
  523. flex-direction:column;
  524. display:flex;
  525. padding-right:0px;
  526. box-sizing:border-box;
  527. justify-content:center;
  528. margin-left:0px;
  529. margin-right:0px;
  530. padding-bottom:10px;
  531. width:100%;
  532. margin-bottom:0px;
  533. padding-top:10px;
  534. padding-left:0px;
  535. margin-top:0px;
  536. height:100%;
  537. }
  538. .news .body .right .right-body .news-item
  539. {
  540. padding-bottom:0px;
  541. flex-wrap:nowrap;
  542. flex-direction:column;
  543. display:flex;
  544. padding-right:0px;
  545. width:90%;
  546. box-sizing:border-box;
  547. margin-bottom:10px;
  548. padding-top:0px;
  549. padding-left:0px;
  550. }
  551. .news .body .right .right-body .news-item .pic
  552. {
  553. padding-bottom:0px;
  554. flex-wrap:nowrap;
  555. flex-direction:row;
  556. display:flex;
  557. width:100%;
  558. box-sizing:border-box;
  559. margin-bottom:0px;
  560. padding-top:0px;
  561. height:120px;
  562. }
  563. .news .body .right .right-body .news-item .pic img
  564. {
  565. padding-bottom:0px;
  566. padding-right:0px;
  567. width:100%;
  568. padding-top:0px;
  569. padding-left:0px;
  570. height:100%;
  571. }
  572. .news .body .right .right-body .news-item .news-content
  573. {
  574. padding-bottom:0px;
  575. flex-wrap:nowrap;
  576. flex-direction:column;
  577. display:flex;
  578. padding-right:0px;
  579. width:100%;
  580. box-sizing:border-box;
  581. padding-top:0px;
  582. position:relative;
  583. padding-left:0px;
  584. justify-content:flex-start;
  585. height:100%;
  586. }
  587. .news .body .right .right-body .news-item .news-content .title
  588. {
  589. padding-bottom:0px;
  590. text-align:left;
  591. flex-direction:row;
  592. word-wrap:break-word;
  593. display:inline-block;
  594. font-size:16PX;
  595. margin-bottom:8px;
  596. padding-top:0px;
  597. padding-left:0px;
  598. margin-top:8px;
  599. }
  600. .news .body .right .right-body .news-item .news-content .desc
  601. {
  602. padding-bottom:8px;
  603. color:#909399;
  604. flex-direction:row;
  605. word-wrap:break-word;
  606. display:inline-block;
  607. padding-right:0px;
  608. font-size:14PX;
  609. margin-bottom:0px;
  610. padding-top:8px;
  611. padding-left:0px;
  612. margin-top:0px;
  613. height:100px;
  614. }
  615. .news .body .right .right-body .news-item .news-content .news-footer
  616. {
  617. align-items:center;
  618. flex-direction:row;
  619. display:flex;
  620. padding-right:0px;
  621. box-sizing:border-box;
  622. justify-content:flex-start;
  623. margin-left:0px;
  624. margin-right:0px;
  625. padding-bottom:0px;
  626. flex-wrap:nowrap;
  627. width:100%;
  628. padding-top:0px;
  629. padding-left:0px;
  630. height:30%;
  631. }
  632. .news .body .right .right-body .news-item .news-content .news-footer .label
  633. {
  634. margin-right:0px;
  635. padding-bottom:0px;
  636. color:#C0C4CC;
  637. flex-direction:row;
  638. word-wrap:break-word;
  639. display:inline-block;
  640. padding-right:0px;
  641. font-size:14PX;
  642. margin-bottom:0px;
  643. padding-top:0px;
  644. padding-left:0px;
  645. margin-left:0px;
  646. }
  647. .news .body .right .right-body .news-item .news-content .news-footer .v
  648. {
  649. margin-right:10px;
  650. padding-bottom:0px;
  651. color:#C0C4CC;
  652. flex-direction:row;
  653. word-wrap:break-word;
  654. display:inline-block;
  655. padding-right:0px;
  656. font-size:14PX;
  657. margin-bottom:0px;
  658. padding-top:0px;
  659. padding-left:0px;
  660. margin-left:10px;
  661. }
  662. }</style>
  663. </body>
  664. </html>