about.htm 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  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 "header.htm"/>
  38. <#include "search-bar.htm"/>
  39. <div class="content">
  40. <div class="detail">
  41. <div class="top">
  42. <span class="title" >
  43. ${field.title}
  44. </span>
  45. <div class="date">
  46. <span >
  47. 发布时间:
  48. </span>
  49. <span >
  50. ${field.date?string("yyyy-MM-dd")}
  51. </span>
  52. <span >
  53. 浏览次数:
  54. </span>
  55. <span >
  56. ${field.hit}
  57. </span>
  58. </div> </div>
  59. <div class="body">
  60. <span class="body-text" >
  61. ${field.content}
  62. </span>
  63. </div> </div> <!--返回顶部-start-->
  64. <!--返回顶部 - start -->
  65. <div class="ms-right-fixed-top" onclick="document.getElementById(..).scrollTop = 0;">
  66. <!--内容区域 - start -->
  67. <div class="content">
  68. <i class="iconfont icon-shang"></i>
  69. <span>
  70. 回到顶部
  71. </span>
  72. </div>
  73. <!--内容区域 -end -->
  74. </div>
  75. <!--返回顶部 -end --> <!--返回顶部-end-->
  76. </div>
  77. <#include "footer.htm"/>
  78. </div>
  79. </body>
  80. </html>
  81. <script>
  82. var app = new Vue({
  83. el: '#app',
  84. watch:{
  85. },
  86. data: {
  87. },
  88. methods: {
  89. switchShow:function(arr){
  90. var that = this
  91. arr.forEach(function(x){
  92. let e = that.$el.querySelector("#key_"+x)
  93. if(e){
  94. e.style.display=e.style.display=='none'?'flex':'none'
  95. }
  96. })
  97. },
  98. },
  99. created(){
  100. }
  101. })
  102. </script>
  103. <style>
  104. body {
  105. background-color:#f5f5f5;
  106. box-sizing:border-box;
  107. font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
  108. moz-box-sizing:border-box;
  109. webkit-box-sizing:border-box;
  110. }
  111. .content
  112. {
  113. flex-wrap:nowrap;
  114. flex-direction:column;
  115. display:flex;
  116. padding-right:0px;
  117. width:100%;
  118. margin-bottom:0px;
  119. box-sizing:border-box;
  120. padding-left:0px;
  121. margin-top:0px;
  122. height:unset;
  123. }
  124. .content .detail
  125. {
  126. background-color:#FFFFFF;
  127. align-items:center;
  128. flex-direction:column;
  129. display:flex;
  130. padding-right:0px;
  131. box-sizing:border-box;
  132. margin-left:auto;
  133. min-height:800px;
  134. margin-right:auto;
  135. padding-bottom:0px;
  136. flex-wrap:nowrap;
  137. width:1170px;
  138. margin-bottom:10px;
  139. padding-top:0px;
  140. position:relative;
  141. padding-left:0px;
  142. margin-top:10px;
  143. height:300px;
  144. }
  145. .content .detail .top
  146. {
  147. align-items:center;
  148. flex-direction:column;
  149. display:flex;
  150. padding-right:0px;
  151. box-sizing:border-box;
  152. justify-content:center;
  153. border-bottom-color:#EBEEF5;
  154. padding-bottom:32px;
  155. flex-wrap:nowrap;
  156. width:90%;
  157. margin-bottom:0px;
  158. border-bottom-style:solid;
  159. padding-top:32px;
  160. border-bottom-width:1px;
  161. padding-left:0px;
  162. margin-top:0px;
  163. }
  164. .content .detail .top .title
  165. {
  166. padding-bottom:0px;
  167. flex-direction:row;
  168. word-wrap:break-word;
  169. display:inline-block;
  170. font-size:28PX;
  171. padding-top:0px;
  172. }
  173. .content .detail .top .date
  174. {
  175. align-items:center;
  176. flex-direction:row;
  177. display:flex;
  178. box-sizing:border-box;
  179. justify-content:center;
  180. margin-left:0px;
  181. margin-right:0px;
  182. flex-wrap:nowrap;
  183. width:100%;
  184. margin-bottom:0px;
  185. padding-top:0px;
  186. margin-top:0px;
  187. height:100%;
  188. }
  189. .content .detail .top .date span
  190. {
  191. font-size:16PX;
  192. flex-direction:row;
  193. word-wrap:break-word;
  194. display:inline-block;
  195. }
  196. .content .detail .body
  197. {
  198. align-items:center;
  199. flex-wrap:nowrap;
  200. flex-direction:column;
  201. display:flex;
  202. width:90%;
  203. margin-bottom:0px;
  204. box-sizing:border-box;
  205. padding-top:32px;
  206. justify-content:center;
  207. margin-top:0px;
  208. }
  209. .content .detail .body .body-text
  210. {
  211. margin-right:auto;
  212. padding-bottom:0px;
  213. flex-direction:row;
  214. word-wrap:break-word;
  215. display:inline-block;
  216. font-size:18PX;
  217. line-height:32px;
  218. margin-bottom:0px;
  219. padding-top:0px;
  220. margin-top:0px;
  221. margin-left:0px;
  222. }
  223. .content .ms-right-fixed-top
  224. {
  225. margin:0 auto;
  226. align-items:center;
  227. flex-direction:row;
  228. display:flex;
  229. padding-right:0px;
  230. box-sizing:border-box;
  231. justify-content:center;
  232. margin-left:0px;
  233. padding-bottom:0px;
  234. flex-wrap:nowrap;
  235. width:1200px;
  236. margin-bottom:0px;
  237. position:relative;
  238. padding-top:0px;
  239. padding-left:0px;
  240. margin-top:0px;
  241. height:0px;
  242. }
  243. .content .ms-right-fixed-top >.content
  244. {
  245. align-items:center;
  246. flex-direction:column;
  247. display:flex;
  248. padding-right:0px;
  249. box-sizing:border-box;
  250. margin-left:600px;
  251. padding-bottom:0px;
  252. top:400px;
  253. flex-wrap:nowrap;
  254. left:50%;
  255. width:40px;
  256. position:fixed;
  257. padding-top:0px;
  258. padding-left:0px;
  259. z-index:1;
  260. }
  261. .content .ms-right-fixed-top >.content i
  262. {
  263. padding-bottom:0px;
  264. padding-top:0px;
  265. padding-left:0px;
  266. padding-right:0px;
  267. margin-left:0px;
  268. }
  269. .content .ms-right-fixed-top >.content span
  270. {
  271. background-color:#909399;
  272. color:#FFFFFF;
  273. text-align:center;
  274. flex-direction:row;
  275. word-wrap:break-word;
  276. display:inline-block;
  277. padding-right:5px;
  278. margin-left:0px;
  279. padding-bottom:5px;
  280. width:50px;
  281. font-size:14px;
  282. padding-top:5px;
  283. padding-left:5px;
  284. height:40%;
  285. }
  286. @media (max-width: 768px){
  287. .content .detail
  288. {
  289. background-color:#FFFFFF;
  290. align-items:center;
  291. flex-direction:column;
  292. display:flex;
  293. box-sizing:border-box;
  294. margin-left:auto;
  295. min-height:800px;
  296. margin-right:auto;
  297. padding-bottom:0px;
  298. flex-wrap:nowrap;
  299. width:100%;
  300. margin-bottom:10px;
  301. padding-top:0px;
  302. position:relative;
  303. padding-left:0px;
  304. margin-top:10px;
  305. height:300px;
  306. }
  307. .content .detail .top
  308. {
  309. align-items:center;
  310. flex-direction:column;
  311. display:flex;
  312. box-sizing:border-box;
  313. justify-content:center;
  314. border-bottom-color:#EBEEF5;
  315. padding-bottom:32px;
  316. flex-wrap:nowrap;
  317. width:90%;
  318. margin-bottom:0px;
  319. border-bottom-style:solid;
  320. padding-top:32px;
  321. border-bottom-width:1px;
  322. margin-top:0px;
  323. }
  324. .content .detail .top .title
  325. {
  326. margin-right:0px;
  327. padding-bottom:0px;
  328. flex-direction:row;
  329. word-wrap:break-word;
  330. display:inline-block;
  331. font-size:28PX;
  332. padding-top:0px;
  333. }
  334. .content .detail .top .date
  335. {
  336. align-items:center;
  337. flex-direction:row;
  338. display:flex;
  339. box-sizing:border-box;
  340. justify-content:center;
  341. margin-left:0px;
  342. margin-right:0px;
  343. flex-wrap:nowrap;
  344. width:100%;
  345. margin-bottom:0px;
  346. padding-top:0px;
  347. margin-top:0px;
  348. height:100%;
  349. }
  350. .content .detail .top .date span
  351. {
  352. font-size:16PX;
  353. flex-direction:row;
  354. word-wrap:break-word;
  355. display:inline-block;
  356. }
  357. .content .detail .body
  358. {
  359. align-items:center;
  360. flex-wrap:nowrap;
  361. flex-direction:column;
  362. display:flex;
  363. width:90%;
  364. margin-bottom:0px;
  365. box-sizing:border-box;
  366. padding-top:32px;
  367. justify-content:center;
  368. margin-top:0px;
  369. }
  370. .content .detail .body .body-text
  371. {
  372. margin-right:auto;
  373. padding-bottom:0px;
  374. flex-direction:row;
  375. word-wrap:break-word;
  376. display:inline-block;
  377. font-size:18PX;
  378. line-height:32px;
  379. margin-bottom:0px;
  380. padding-top:0px;
  381. margin-top:0px;
  382. margin-left:0px;
  383. }
  384. .content .ms-right-fixed-top
  385. {
  386. margin:0 auto;
  387. align-items:center;
  388. flex-direction:row;
  389. display:flex;
  390. box-sizing:border-box;
  391. justify-content:center;
  392. margin-left:0px;
  393. flex-wrap:nowrap;
  394. width:100%;
  395. margin-bottom:0px;
  396. position:relative;
  397. margin-top:0px;
  398. height:0px;
  399. }
  400. .content .ms-right-fixed-top >.content
  401. {
  402. align-items:center;
  403. flex-direction:column;
  404. display:flex;
  405. padding-right:0px;
  406. box-sizing:border-box;
  407. margin-left:600px;
  408. padding-bottom:0px;
  409. top:400px;
  410. flex-wrap:nowrap;
  411. left:50%;
  412. width:40px;
  413. position:fixed;
  414. padding-top:0px;
  415. padding-left:0px;
  416. z-index:1;
  417. }
  418. .content .ms-right-fixed-top >.content i
  419. {
  420. margin-left:0px;
  421. }
  422. .content .ms-right-fixed-top >.content span
  423. {
  424. background-color:#909399;
  425. color:#FFFFFF;
  426. text-align:center;
  427. flex-direction:row;
  428. word-wrap:break-word;
  429. display:inline-block;
  430. padding-right:5px;
  431. margin-left:0px;
  432. padding-bottom:5px;
  433. width:50px;
  434. font-size:14px;
  435. padding-top:5px;
  436. padding-left:5px;
  437. height:40%;
  438. }
  439. }</style>