index.htm 36 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242
  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 src="https://cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"></script>
  27. <script>
  28. SwiperClass = Swiper
  29. </script>
  30. <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@4.1.1/dist/vue-awesome-swiper.min.js"></script>
  31. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css">
  32. <script>
  33. Vue.use(VueAwesomeSwiper)
  34. </script>
  35. <style>
  36. :root {
  37. --swiper-theme-color:$ {
  38. component.config.color.value
  39. }
  40. ;
  41. }
  42. </style>
  43. <script>
  44. ms.base = "";
  45. </script>
  46. <style>
  47. [v-cloak]{
  48. display: none;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <div id="app" v-cloak>
  54. <#include "nav.htm" />
  55. <div class="ms-banner">
  56. <swiper class="ms-vue-awesome-swiper" :options="{
  57. slidesPerView : 1,
  58. spaceBetween: 0,
  59. autoplay: {
  60. delay: 1500,
  61. },
  62. navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}
  63. }">
  64. <div class="swiper-button-prev " slot="button-prev">
  65. </div>
  66. <div class="swiper-button-next " slot="button-next">
  67. </div>
  68. <!--静态图片-->
  69. <!--动态图片-->
  70. {ms:arclist typeid=1329357285870346241 size=3 }
  71. <swiper-slide>
  72. <a href="[field.source/]" target="_blank" style="width:100%;height: 100%">
  73. <div style="background-image: url('{ms:global.host/}/{@ms:file field.litpic/}');background-size: cover; background-position: center; width:100%;height: 100%">
  74. </div>
  75. </a>
  76. </swiper-slide>
  77. {/ms:arclist}
  78. </swiper>
  79. </div>
  80. <div class="about">
  81. {ms:arclist typeid='1329259260493766658'}
  82. <div class="body">
  83. <div class="left">
  84. <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
  85. </div>
  86. <div class="right">
  87. <div class="title">
  88. <span> ${field.title} </span>
  89. </div>
  90. <div class="desc">
  91. <span> ${field.descrip} </span>
  92. </div>
  93. </div>
  94. </div> {/ms:arclist}
  95. </div>
  96. <div class="product">
  97. <div class="title">
  98. <span> 核心产品 </span>
  99. </div>
  100. <div class="body">
  101. {ms:arclist flag='c' typeid='1329257213283344385'}
  102. <div class="prod">
  103. <div class="pic">
  104. <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
  105. </div>
  106. <a href="{ms:global.url/}${field.link}" class="text"> ${field.title} </a>
  107. </div> {/ms:arclist}
  108. </div>
  109. <a href="{ms:global.url/}/product/index.html" class="more"> 更多产品 </a>
  110. </div>
  111. <div class="news">
  112. <div class="title">
  113. <span> 新闻动态 </span>
  114. </div>
  115. <div class="body">
  116. {ms:arclist flag='c' typeid='1329257282518720513'}
  117. <div class="left">
  118. <img title="" alt="" src="{ms:global.host/}/{@ms:file field.litpic/}">
  119. <a href="{ms:global.url/}${field.link}" target="_blank" class="title"> ${field.title} </a>
  120. <span class="desc"> ${field.descrip} </span>
  121. </div> {/ms:arclist}
  122. <div class="right">
  123. {ms:arclist size=3 typeid='1329257282518720513'}
  124. <div class="news-item">
  125. <div class="date">
  126. <span class="day"> ${field.date?string("dd")} </span>
  127. <span class="date"> ${field.date?string("yyyy-MM")} </span>
  128. </div>
  129. <div class="news-body">
  130. <a href="{ms:global.url/}${field.link}" class="title"> ${field.title} </a>
  131. <span class="desc"> ${field.descrip} </span>
  132. </div>
  133. </div> {/ms:arclist}
  134. </div>
  135. </div>
  136. <div class="more">
  137. </div>
  138. <a href="{ms:global.url/}/news/index.html" class="more"> 更多新闻 </a>
  139. </div>
  140. <#include "footer.htm" />
  141. </div>
  142. <script>
  143. var app = new Vue({
  144. el: '#app',
  145. watch:{
  146. },
  147. data: {
  148. },
  149. methods: {
  150. switchShow:function(arr){
  151. var that = this
  152. arr.forEach(function(x){
  153. let e = that.$el.querySelector("#key_"+x)
  154. if(e){
  155. e.style.display=e.style.display=='none'?'flex':'none'
  156. }
  157. })
  158. },
  159. },
  160. created(){
  161. }
  162. })
  163. </script>
  164. <style>
  165. body {
  166. background-color:#fff;
  167. box-sizing:border-box;
  168. font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Segoe UI", "Helvetica Neue", "PingFang SC", "Noto Sans", "Noto Sans CJK SC", "Microsoft YaHei", 微软雅黑, sans-serif;
  169. moz-box-sizing:border-box;
  170. webkit-box-sizing:border-box;
  171. }
  172. .swiper-button-prev, .swiper-button-next{
  173. color: #fff;
  174. }
  175. .ms-banner
  176. {
  177. flex-wrap:nowrap;
  178. flex-direction:row;
  179. display:flex;
  180. width:100%;
  181. box-sizing:border-box;
  182. margin-top:0px;
  183. height:630px;
  184. }
  185. .ms-banner .ms-vue-awesome-swiper
  186. {
  187. background-color:#E8F4FD;
  188. align-items:center;
  189. flex-wrap:nowrap;
  190. flex-direction:row;
  191. display:flex;
  192. width:100%;
  193. box-sizing:border-box;
  194. position:relative;
  195. padding-left:0px;
  196. justify-content:space-between;
  197. margin-top:0px;
  198. height:100%;
  199. }
  200. .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom
  201. {
  202. background-color:rgba(0,0,0,0.5);
  203. align-items:center;
  204. flex-direction:row;
  205. bottom:0px;
  206. display:flex;
  207. box-sizing:border-box;
  208. justify-content:flex-start;
  209. flex-wrap:nowrap;
  210. width:100%;
  211. position:absolute;
  212. padding-left:10px;
  213. margin-top:0px;
  214. height:40px;
  215. }
  216. .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom .ms-vue-awesome-swiper-title
  217. {
  218. color:#FFFFFF;
  219. flex-direction:row;
  220. word-wrap:break-word;
  221. display:inline-block;
  222. font-size:14px;
  223. padding-left:0px;
  224. }
  225. .about
  226. {
  227. align-items:center;
  228. flex-wrap:nowrap;
  229. flex-direction:row;
  230. display:flex;
  231. padding-right:0px;
  232. width:100%;
  233. box-sizing:border-box;
  234. padding-left:0px;
  235. justify-content:center;
  236. margin-top:18px;
  237. height:200px;
  238. }
  239. .about .body
  240. {
  241. padding-bottom:0px;
  242. flex-wrap:nowrap;
  243. flex-direction:row;
  244. display:flex;
  245. padding-right:0px;
  246. width:1200px;
  247. box-sizing:border-box;
  248. padding-top:0px;
  249. padding-left:0px;
  250. margin-top:0px;
  251. height:100%;
  252. }
  253. .about .body .left
  254. {
  255. flex-wrap:nowrap;
  256. flex-direction:row;
  257. display:flex;
  258. padding-right:0px;
  259. width:40%;
  260. box-sizing:border-box;
  261. padding-left:0px;
  262. height:100%;
  263. }
  264. .about .body .left img
  265. {
  266. width:100%;
  267. padding-top:0px;
  268. padding-left:0px;
  269. height:100%;
  270. }
  271. .about .body .right
  272. {
  273. flex-wrap:nowrap;
  274. flex-direction:column;
  275. display:flex;
  276. padding-right:20px;
  277. width:100%;
  278. box-sizing:border-box;
  279. padding-left:20px;
  280. margin-top:0px;
  281. height:100%;
  282. }
  283. .about .body .right .title
  284. {
  285. align-items:center;
  286. flex-wrap:nowrap;
  287. flex-direction:row;
  288. display:flex;
  289. padding-right:0px;
  290. width:100%;
  291. box-sizing:border-box;
  292. padding-left:0px;
  293. margin-top:0px;
  294. height:40px;
  295. }
  296. .about .body .right .title span
  297. {
  298. padding-bottom:0px;
  299. flex-direction:row;
  300. word-wrap:break-word;
  301. display:inline-block;
  302. padding-right:0px;
  303. font-size:28PX;
  304. padding-top:0px;
  305. padding-left:0px;
  306. }
  307. .about .body .right .desc
  308. {
  309. flex-wrap:nowrap;
  310. flex-direction:row;
  311. display:flex;
  312. padding-right:0px;
  313. width:100%;
  314. box-sizing:border-box;
  315. padding-left:0px;
  316. height:100%;
  317. }
  318. .about .body .right .desc span
  319. {
  320. padding-bottom:0px;
  321. flex-direction:row;
  322. word-wrap:break-word;
  323. display:inline-block;
  324. font-size:16PX;
  325. padding-top:0px;
  326. margin-top:20px;
  327. line-height: 32px;
  328. }
  329. .product
  330. {
  331. background-color:#F2F2F2;
  332. align-items:center;
  333. flex-direction:column;
  334. display:flex;
  335. padding-right:0px;
  336. box-sizing:border-box;
  337. justify-content:center;
  338. padding-bottom:40px;
  339. flex-wrap:nowrap;
  340. width:100%;
  341. margin-bottom:0px;
  342. padding-top:40px;
  343. padding-left:0px;
  344. margin-top:20px;
  345. }
  346. .product .title
  347. {
  348. align-items:center;
  349. flex-direction:row;
  350. display:flex;
  351. padding-right:0px;
  352. box-sizing:border-box;
  353. justify-content:center;
  354. padding-bottom:0px;
  355. flex-wrap:nowrap;
  356. width:100%;
  357. margin-bottom:0px;
  358. padding-top:0px;
  359. padding-left:0px;
  360. margin-top:0px;
  361. height:40px;
  362. }
  363. .product .title span
  364. {
  365. padding-bottom:0px;
  366. flex-direction:row;
  367. word-wrap:break-word;
  368. display:inline-block;
  369. padding-right:0px;
  370. font-size:28PX;
  371. padding-top:0px;
  372. padding-left:0px;
  373. }
  374. .product .body
  375. {
  376. flex-direction:row;
  377. display:flex;
  378. padding-right:0px;
  379. box-sizing:border-box;
  380. justify-content:space-between;
  381. padding-bottom:0px;
  382. flex-wrap:wrap;
  383. width:1200px;
  384. margin-bottom:40px;
  385. padding-top:0px;
  386. padding-left:0px;
  387. margin-top:40px;
  388. height:100%;
  389. }
  390. .product .body .prod
  391. {
  392. background-color:#FFFFFF;
  393. flex-direction:column;
  394. display:flex;
  395. padding-right:20px;
  396. box-sizing:border-box;
  397. padding-bottom:20px;
  398. flex-wrap:nowrap;
  399. width:32%;
  400. margin-bottom:20px;
  401. padding-top:20px;
  402. padding-left:20px;
  403. margin-top:0px;
  404. height:100%;
  405. }
  406. .product .body .prod .pic
  407. {
  408. padding-bottom:0px;
  409. flex-wrap:nowrap;
  410. flex-direction:row;
  411. display:flex;
  412. padding-right:0px;
  413. width:100%;
  414. box-sizing:border-box;
  415. padding-top:0px;
  416. padding-left:0px;
  417. margin-top:0px;
  418. height:200px;
  419. }
  420. .product .body .prod .pic img
  421. {
  422. padding-bottom:0px;
  423. width:100%;
  424. margin-bottom:0px;
  425. padding-top:0px;
  426. margin-top:0px;
  427. height:100%;
  428. }
  429. .product .body .prod .text
  430. {
  431. padding-bottom:0px;
  432. text-align:center;
  433. flex-direction:row;
  434. word-wrap:break-word;
  435. display:inline-block;
  436. padding-right:0px;
  437. font-size:16PX;
  438. padding-top:8px;
  439. padding-left:0px;
  440. margin-top:10px;
  441. height:40px;
  442. }
  443. .product .more
  444. {
  445. background-color:#FFFFFF;
  446. align-items:center;
  447. flex-direction:row;
  448. display:flex;
  449. padding-right:0px;
  450. box-sizing:border-box;
  451. justify-content:center;
  452. padding-bottom:0px;
  453. flex-wrap:nowrap;
  454. width:100px;
  455. margin-bottom:0px;
  456. padding-top:0px;
  457. padding-left:0px;
  458. margin-top:0px;
  459. height:48px;
  460. }
  461. .news
  462. {
  463. align-items:center;
  464. flex-direction:column;
  465. display:flex;
  466. padding-right:0px;
  467. box-sizing:border-box;
  468. justify-content:center;
  469. padding-bottom:20px;
  470. flex-wrap:nowrap;
  471. width:100%;
  472. margin-bottom:20px;
  473. padding-top:20px;
  474. padding-left:0px;
  475. margin-top:20px;
  476. }
  477. .news .title
  478. {
  479. align-items:center;
  480. flex-direction:row;
  481. display:flex;
  482. padding-right:0px;
  483. box-sizing:border-box;
  484. justify-content:center;
  485. padding-bottom:0px;
  486. flex-wrap:nowrap;
  487. width:100%;
  488. margin-bottom:0px;
  489. padding-top:0px;
  490. padding-left:0px;
  491. margin-top:0px;
  492. height:40px;
  493. }
  494. .news .title span
  495. {
  496. padding-bottom:0px;
  497. flex-direction:row;
  498. word-wrap:break-word;
  499. display:inline-block;
  500. padding-right:0px;
  501. font-size:28PX;
  502. padding-top:0px;
  503. padding-left:0px;
  504. }
  505. .news .body
  506. {
  507. align-items:flex-start;
  508. flex-direction:row;
  509. display:flex;
  510. padding-right:0px;
  511. box-sizing:border-box;
  512. justify-content:space-between;
  513. padding-bottom:0px;
  514. flex-wrap:nowrap;
  515. width:1200px;
  516. margin-bottom:20px;
  517. padding-top:0px;
  518. padding-left:0px;
  519. margin-top:20px;
  520. height:100%;
  521. }
  522. .news .body .left
  523. {
  524. padding-bottom:0px;
  525. flex-wrap:nowrap;
  526. flex-direction:column;
  527. display:flex;
  528. width:400px;
  529. box-sizing:border-box;
  530. margin-bottom:0px;
  531. padding-top:0px;
  532. padding-left:0px;
  533. margin-top:0px;
  534. }
  535. .news .body .left img
  536. {
  537. width:100%;
  538. padding-top:0px;
  539. height:280px;
  540. }
  541. .news .body .left .title
  542. {
  543. text-align:left;
  544. flex-direction:row;
  545. word-wrap:break-word;
  546. display:inline-block;
  547. padding-right:0px;
  548. justify-content:flex-start;
  549. padding-bottom:0px;
  550. font-size:18PX;
  551. margin-bottom:0px;
  552. padding-top:10px;
  553. padding-left:0px;
  554. margin-top:0px;
  555. height:40px;
  556. }
  557. .news .body .left .desc
  558. {
  559. padding-bottom:0px;
  560. color:#B5B5B5;
  561. text-align:left;
  562. flex-direction:row;
  563. word-wrap:break-word;
  564. display:inline-block;
  565. padding-right:0px;
  566. font-size:14PX;
  567. padding-top:0px;
  568. padding-left:0px;
  569. margin-top:0px;
  570. }
  571. .news .body .right
  572. {
  573. padding-bottom:0px;
  574. flex-wrap:nowrap;
  575. flex-direction:column;
  576. display:flex;
  577. padding-right:0px;
  578. width:800px;
  579. margin-bottom:0px;
  580. box-sizing:border-box;
  581. padding-top:0px;
  582. padding-left:20px;
  583. margin-top:0px;
  584. height:100%;
  585. }
  586. .news .body .right .news-item
  587. {
  588. padding-bottom:0px;
  589. flex-wrap:nowrap;
  590. flex-direction:row;
  591. display:flex;
  592. padding-right:0px;
  593. width:100%;
  594. margin-bottom:10px;
  595. box-sizing:border-box;
  596. padding-top:0px;
  597. padding-left:0px;
  598. margin-top:0px;
  599. height:100px;
  600. }
  601. .news .body .right .news-item .date
  602. {
  603. background-color:#EEEEEE;
  604. align-items:center;
  605. flex-direction:column;
  606. display:flex;
  607. padding-right:8px;
  608. box-sizing:border-box;
  609. justify-content:center;
  610. padding-bottom:8px;
  611. flex-wrap:nowrap;
  612. width:100px;
  613. margin-bottom:0px;
  614. padding-top:8px;
  615. padding-left:8px;
  616. height:100%;
  617. }
  618. .news .body .right .news-item .date .day
  619. {
  620. padding-bottom:0px;
  621. text-align:center;
  622. flex-direction:row;
  623. word-wrap:break-word;
  624. display:inline-block;
  625. padding-right:0px;
  626. font-size:28PX;
  627. padding-top:14px;
  628. padding-left:0px;
  629. height:70%;
  630. }
  631. .news .body .right .news-item .date .date
  632. {
  633. text-align:center;
  634. flex-direction:row;
  635. word-wrap:break-word;
  636. display:inline-block;
  637. font-size:16PX;
  638. padding-top:0px;
  639. }
  640. .news .body .right .news-item .news-body
  641. {
  642. padding-bottom:0px;
  643. flex-wrap:nowrap;
  644. flex-direction:column;
  645. display:flex;
  646. padding-right:0px;
  647. width:90%;
  648. margin-bottom:10px;
  649. box-sizing:border-box;
  650. padding-top:0px;
  651. padding-left:10px;
  652. margin-top:0px;
  653. height:100%;
  654. }
  655. .news .body .right .news-item .news-body .title
  656. {
  657. text-align:left;
  658. flex-direction:row;
  659. word-wrap:break-word;
  660. display:inline-block;
  661. padding-right:0px;
  662. justify-content:flex-start;
  663. padding-bottom:0px;
  664. font-size:18PX;
  665. margin-bottom:0px;
  666. padding-top:10px;
  667. padding-left:0px;
  668. margin-top:0px;
  669. height:40px;
  670. }
  671. .news .body .right .news-item .news-body .desc
  672. {
  673. padding-bottom:0px;
  674. color:#B5B5B5;
  675. text-align:left;
  676. flex-direction:row;
  677. word-wrap:break-word;
  678. display:inline-block;
  679. padding-right:0px;
  680. font-size:14PX;
  681. padding-top:0px;
  682. padding-left:0px;
  683. margin-top:0px;
  684. }
  685. .news .more
  686. {
  687. background-color:#FFFFFF;
  688. align-items:center;
  689. flex-direction:row;
  690. display:flex;
  691. padding-right:0px;
  692. box-sizing:border-box;
  693. justify-content:center;
  694. padding-bottom:0px;
  695. flex-wrap:nowrap;
  696. width:100px;
  697. margin-bottom:0px;
  698. padding-top:0px;
  699. padding-left:0px;
  700. margin-top:0px;
  701. height:48px;
  702. }
  703. @media (max-width: 768px){
  704. .ms-banner
  705. {
  706. flex-wrap:nowrap;
  707. flex-direction:row;
  708. display:flex;
  709. width:100%;
  710. box-sizing:border-box;
  711. margin-top:0px;
  712. height:unset;
  713. }
  714. .ms-banner .ms-vue-awesome-swiper
  715. {
  716. background-color:#E8F4FD;
  717. align-items:center;
  718. flex-wrap:nowrap;
  719. flex-direction:row;
  720. display:flex;
  721. width:100%;
  722. box-sizing:border-box;
  723. position:relative;
  724. padding-left:0px;
  725. justify-content:space-between;
  726. margin-top:0px;
  727. height:300px;
  728. }
  729. .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom
  730. {
  731. background-color:RGBA(63, 158, 255, .75);
  732. align-items:center;
  733. flex-direction:row;
  734. bottom:0px;
  735. display:flex;
  736. box-sizing:border-box;
  737. justify-content:flex-start;
  738. flex-wrap:nowrap;
  739. width:100%;
  740. position:absolute;
  741. padding-left:10px;
  742. margin-top:0px;
  743. height:40px;
  744. }
  745. .ms-banner .ms-vue-awesome-swiper .ms-vue-awesome-swiper-bottom .ms-vue-awesome-swiper-title
  746. {
  747. color:#FFFFFF;
  748. flex-direction:row;
  749. word-wrap:break-word;
  750. display:inline-block;
  751. font-size:14px;
  752. padding-left:0px;
  753. }
  754. .about
  755. {
  756. align-items:center;
  757. flex-wrap:nowrap;
  758. flex-direction:column;
  759. display:flex;
  760. padding-right:0px;
  761. width:100%;
  762. box-sizing:border-box;
  763. padding-left:0px;
  764. justify-content:center;
  765. margin-top:18px;
  766. height:100%;
  767. }
  768. .about .body
  769. {
  770. padding-bottom:0px;
  771. align-items:center;
  772. flex-wrap:nowrap;
  773. flex-direction:column;
  774. display:flex;
  775. width:100%;
  776. box-sizing:border-box;
  777. margin-bottom:0px;
  778. padding-top:0px;
  779. margin-top:0px;
  780. justify-content:flex-start;
  781. height:100%;
  782. }
  783. .about .body .left
  784. {
  785. align-items:center;
  786. flex-wrap:nowrap;
  787. flex-direction:column;
  788. display:flex;
  789. padding-right:0px;
  790. width:90%;
  791. box-sizing:border-box;
  792. margin-bottom:10px;
  793. padding-left:0px;
  794. justify-content:center;
  795. }
  796. .about .body .left img
  797. {
  798. width:100%;
  799. margin-bottom:0px;
  800. padding-top:0px;
  801. height:200px;
  802. }
  803. .about .body .right
  804. {
  805. flex-wrap:nowrap;
  806. flex-direction:column;
  807. display:flex;
  808. padding-right:20px;
  809. width:100%;
  810. box-sizing:border-box;
  811. margin-bottom:0px;
  812. padding-left:20px;
  813. margin-top:0px;
  814. height:100%;
  815. }
  816. .about .body .right .title
  817. {
  818. align-items:center;
  819. flex-wrap:nowrap;
  820. flex-direction:row;
  821. display:flex;
  822. padding-right:0px;
  823. width:100%;
  824. box-sizing:border-box;
  825. padding-left:0px;
  826. margin-top:0px;
  827. height:40px;
  828. }
  829. .about .body .right .title span
  830. {
  831. padding-bottom:0px;
  832. flex-direction:row;
  833. word-wrap:break-word;
  834. display:inline-block;
  835. padding-right:0px;
  836. font-size:28PX;
  837. padding-top:0px;
  838. padding-left:0px;
  839. }
  840. .about .body .right .desc
  841. {
  842. flex-wrap:nowrap;
  843. flex-direction:row;
  844. display:flex;
  845. padding-right:0px;
  846. width:100%;
  847. box-sizing:border-box;
  848. padding-left:0px;
  849. height:100%;
  850. }
  851. .about .body .right .desc span
  852. {
  853. padding-bottom:0px;
  854. flex-direction:row;
  855. word-wrap:break-word;
  856. display:inline-block;
  857. font-size:16PX;
  858. padding-top:0px;
  859. margin-top:20px;
  860. }
  861. .product
  862. {
  863. background-color:#F2F2F2;
  864. align-items:center;
  865. flex-direction:column;
  866. display:flex;
  867. padding-right:0px;
  868. box-sizing:border-box;
  869. justify-content:center;
  870. padding-bottom:40px;
  871. flex-wrap:nowrap;
  872. width:100%;
  873. margin-bottom:0px;
  874. padding-top:40px;
  875. padding-left:0px;
  876. margin-top:20px;
  877. height:unset;
  878. }
  879. .product .title
  880. {
  881. align-items:center;
  882. flex-direction:row;
  883. display:flex;
  884. padding-right:0px;
  885. box-sizing:border-box;
  886. justify-content:center;
  887. padding-bottom:0px;
  888. flex-wrap:nowrap;
  889. width:100%;
  890. margin-bottom:0px;
  891. padding-top:0px;
  892. padding-left:0px;
  893. margin-top:0px;
  894. height:40px;
  895. }
  896. .product .title span
  897. {
  898. padding-bottom:0px;
  899. flex-direction:row;
  900. word-wrap:break-word;
  901. display:inline-block;
  902. padding-right:0px;
  903. font-size:28PX;
  904. padding-top:0px;
  905. padding-left:0px;
  906. }
  907. .product .body
  908. {
  909. padding-bottom:0px;
  910. align-items:center;
  911. flex-wrap:nowrap;
  912. flex-direction:column;
  913. display:flex;
  914. width:100%;
  915. box-sizing:border-box;
  916. margin-bottom:0px;
  917. padding-top:0px;
  918. margin-top:0px;
  919. justify-content:center;
  920. height:100%;
  921. }
  922. .product .body .prod
  923. {
  924. background-color:#FFFFFF;
  925. flex-direction:column;
  926. display:flex;
  927. padding-right:0px;
  928. box-sizing:border-box;
  929. padding-bottom:0px;
  930. flex-wrap:nowrap;
  931. width:90%;
  932. margin-bottom:40px;
  933. padding-top:0px;
  934. padding-left:0px;
  935. margin-top:0px;
  936. height:100%;
  937. }
  938. .product .body .prod .pic
  939. {
  940. padding-bottom:0px;
  941. flex-wrap:nowrap;
  942. flex-direction:row;
  943. display:flex;
  944. padding-right:0px;
  945. width:100%;
  946. box-sizing:border-box;
  947. padding-top:0px;
  948. padding-left:0px;
  949. height:200px;
  950. }
  951. .product .body .prod .pic img
  952. {
  953. padding-bottom:0px;
  954. width:100%;
  955. padding-top:0px;
  956. margin-top:0px;
  957. height:100%;
  958. }
  959. .product .body .prod .text
  960. {
  961. padding-bottom:0px;
  962. text-align:center;
  963. flex-direction:row;
  964. word-wrap:break-word;
  965. display:inline-block;
  966. padding-right:0px;
  967. font-size:16PX;
  968. padding-top:8px;
  969. padding-left:0px;
  970. margin-top:10px;
  971. height:40px;
  972. }
  973. .product .more
  974. {
  975. background-color:#FFFFFF;
  976. align-items:center;
  977. flex-direction:row;
  978. display:flex;
  979. padding-right:0px;
  980. box-sizing:border-box;
  981. justify-content:center;
  982. padding-bottom:0px;
  983. flex-wrap:nowrap;
  984. width:100px;
  985. margin-bottom:0px;
  986. padding-top:0px;
  987. padding-left:0px;
  988. margin-top:0px;
  989. height:48px;
  990. }
  991. .news
  992. {
  993. align-items:center;
  994. flex-direction:column;
  995. display:flex;
  996. padding-right:0px;
  997. box-sizing:border-box;
  998. justify-content:center;
  999. padding-bottom:20px;
  1000. flex-wrap:nowrap;
  1001. width:100%;
  1002. margin-bottom:20px;
  1003. padding-top:20px;
  1004. padding-left:0px;
  1005. margin-top:20px;
  1006. height:unset;
  1007. }
  1008. .news .title
  1009. {
  1010. align-items:center;
  1011. flex-direction:row;
  1012. display:flex;
  1013. padding-right:0px;
  1014. box-sizing:border-box;
  1015. justify-content:center;
  1016. padding-bottom:0px;
  1017. flex-wrap:nowrap;
  1018. width:100%;
  1019. margin-bottom:0px;
  1020. padding-top:0px;
  1021. padding-left:0px;
  1022. margin-top:0px;
  1023. height:40px;
  1024. }
  1025. .news .title span
  1026. {
  1027. padding-bottom:0px;
  1028. flex-direction:row;
  1029. word-wrap:break-word;
  1030. display:inline-block;
  1031. padding-right:0px;
  1032. font-size:28PX;
  1033. padding-top:0px;
  1034. padding-left:0px;
  1035. }
  1036. .news .body
  1037. {
  1038. align-items:flex-start;
  1039. flex-direction:column;
  1040. display:flex;
  1041. padding-right:0px;
  1042. box-sizing:border-box;
  1043. justify-content:space-between;
  1044. padding-bottom:0px;
  1045. flex-wrap:nowrap;
  1046. width:90%;
  1047. margin-bottom:20px;
  1048. padding-top:0px;
  1049. padding-left:0px;
  1050. margin-top:20px;
  1051. height:100%;
  1052. }
  1053. .news .body .left
  1054. {
  1055. padding-bottom:0px;
  1056. flex-wrap:nowrap;
  1057. flex-direction:column;
  1058. display:flex;
  1059. width:100%;
  1060. box-sizing:border-box;
  1061. margin-bottom:10px;
  1062. padding-top:0px;
  1063. padding-left:0px;
  1064. margin-top:0px;
  1065. }
  1066. .news .body .left img
  1067. {
  1068. padding-bottom:0px;
  1069. width:100%;
  1070. margin-bottom:0px;
  1071. padding-top:0px;
  1072. margin-top:0px;
  1073. height:100%;
  1074. }
  1075. .news .body .left .title
  1076. {
  1077. padding-bottom:0px;
  1078. text-align:left;
  1079. flex-direction:row;
  1080. word-wrap:break-word;
  1081. display:inline-block;
  1082. padding-right:0px;
  1083. font-size:18PX;
  1084. padding-top:10px;
  1085. padding-left:0px;
  1086. margin-top:0px;
  1087. justify-content:flex-start;
  1088. height:40px;
  1089. }
  1090. .news .body .left .desc
  1091. {
  1092. padding-bottom:0px;
  1093. color:#B5B5B5;
  1094. text-align:left;
  1095. flex-direction:row;
  1096. word-wrap:break-word;
  1097. display:inline-block;
  1098. padding-right:0px;
  1099. font-size:14PX;
  1100. padding-top:0px;
  1101. padding-left:0px;
  1102. margin-top:0px;
  1103. }
  1104. .news .body .right
  1105. {
  1106. padding-bottom:0px;
  1107. flex-wrap:nowrap;
  1108. flex-direction:column;
  1109. display:flex;
  1110. padding-right:0px;
  1111. width:100%;
  1112. margin-bottom:0px;
  1113. box-sizing:border-box;
  1114. padding-top:0px;
  1115. padding-left:0px;
  1116. margin-top:0px;
  1117. height:100%;
  1118. }
  1119. .news .body .right .news-item
  1120. {
  1121. padding-bottom:0px;
  1122. flex-wrap:nowrap;
  1123. flex-direction:row;
  1124. display:flex;
  1125. padding-right:0px;
  1126. width:100%;
  1127. margin-bottom:10px;
  1128. box-sizing:border-box;
  1129. padding-top:0px;
  1130. padding-left:0px;
  1131. margin-top:0px;
  1132. height:100px;
  1133. }
  1134. .news .body .right .news-item .date
  1135. {
  1136. background-color:#EEEEEE;
  1137. align-items:center;
  1138. flex-direction:column;
  1139. display:flex;
  1140. padding-right:8px;
  1141. box-sizing:border-box;
  1142. justify-content:center;
  1143. padding-bottom:8px;
  1144. flex-wrap:nowrap;
  1145. width:100px;
  1146. margin-bottom:0px;
  1147. padding-top:8px;
  1148. padding-left:8px;
  1149. height:100%;
  1150. }
  1151. .news .body .right .news-item .date .day
  1152. {
  1153. padding-bottom:0px;
  1154. text-align:center;
  1155. flex-direction:row;
  1156. word-wrap:break-word;
  1157. display:inline-block;
  1158. padding-right:0px;
  1159. font-size:28PX;
  1160. padding-top:14px;
  1161. padding-left:0px;
  1162. height:70%;
  1163. }
  1164. .news .body .right .news-item .date .date
  1165. {
  1166. text-align:center;
  1167. flex-direction:row;
  1168. word-wrap:break-word;
  1169. display:inline-block;
  1170. font-size:16PX;
  1171. padding-top:0px;
  1172. }
  1173. .news .body .right .news-item .news-body
  1174. {
  1175. padding-bottom:0px;
  1176. flex-wrap:nowrap;
  1177. flex-direction:column;
  1178. display:flex;
  1179. padding-right:0px;
  1180. width:90%;
  1181. margin-bottom:10px;
  1182. box-sizing:border-box;
  1183. padding-top:0px;
  1184. padding-left:10px;
  1185. margin-top:0px;
  1186. height:100%;
  1187. }
  1188. .news .body .right .news-item .news-body .title
  1189. {
  1190. text-align:left;
  1191. flex-direction:row;
  1192. word-wrap:break-word;
  1193. display:inline-block;
  1194. padding-right:0px;
  1195. justify-content:flex-start;
  1196. padding-bottom:0px;
  1197. font-size:18PX;
  1198. margin-bottom:0px;
  1199. padding-top:10px;
  1200. padding-left:0px;
  1201. margin-top:0px;
  1202. height:40px;
  1203. }
  1204. .news .body .right .news-item .news-body .desc
  1205. {
  1206. display: none;
  1207. padding-bottom:0px;
  1208. color:#B5B5B5;
  1209. text-align:left;
  1210. flex-direction:row;
  1211. word-wrap:break-word;
  1212. padding-right:0px;
  1213. font-size:14PX;
  1214. padding-top:0px;
  1215. padding-left:0px;
  1216. margin-top:0px;
  1217. }
  1218. .news .more
  1219. {
  1220. background-color:#FFFFFF;
  1221. align-items:center;
  1222. flex-direction:row;
  1223. display:flex;
  1224. padding-right:0px;
  1225. box-sizing:border-box;
  1226. justify-content:center;
  1227. padding-bottom:0px;
  1228. flex-wrap:nowrap;
  1229. width:100px;
  1230. margin-bottom:0px;
  1231. padding-top:0px;
  1232. padding-left:0px;
  1233. margin-top:0px;
  1234. height:48px;
  1235. }
  1236. }</style>
  1237. </body>
  1238. </html>