index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="x-ua-compatible" content="ie=edge" />
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  9. <link rel="icon" href="assets/img/favicon.ico">
  10. <title></title>
  11. <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  12. <!--====== Owl Carousel css ======-->
  13. <link rel="stylesheet" href="assets/css/slick.css" />
  14. <link rel="stylesheet" href="assets/summernote/plugin/jquery-blinds-player/css/shutter.css">
  15. <!--====== Mean Menu ======-->
  16. <link rel="stylesheet" href="assets/css/meanmenu.min.css" />
  17. <!--====== Default css ======-->
  18. <link rel="stylesheet" href="assets/css/default.css" />
  19. <!--====== Style css ======-->
  20. <link rel="stylesheet" href="assets/css/style.css" />
  21. <!--====== home css ====== -->
  22. <link rel="stylesheet" href="assets/css/home.css" />
  23. <link rel="stylesheet" href="assets/fonts/iconfont/iconfont.css">
  24. </head>
  25. <body>
  26. <!--[if lte IE 9]>
  27. <p class="browserupgrade">请使用chrome,IE11等现代浏览器,浏览本网站.</p>
  28. <![endif]-->
  29. <div id="app">
  30. <div class="erMenu">
  31. <div>
  32. </div>
  33. </div>
  34. <!--====== HEADER START ======-->
  35. <header class="header-absolute sticky-header">
  36. <div class="custom-container-one">
  37. <div class="header-top-area">
  38. <!-- <div class="container align-items-center">
  39. <div class="col-md-6 col-sm-7">
  40. <ul class="contact-list">
  41. <li>
  42. <a href="javascipt:void();">www.chinausky.com</a>
  43. </li>
  44. <li>
  45. <a href="javascipt:void();">400 633 8668</a>
  46. </li>
  47. </ul>
  48. </div>
  49. </div> -->
  50. </div>
  51. <div id="headerNav"></div>
  52. <div>
  53. <div class="mobile-menu"></div>
  54. </div>
  55. </div>
  56. </header>
  57. <!--====== HEADER END ======-->
  58. <div class="video-section" >
  59. <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;" poster="assets/img/banner/111.png">
  60. <source src="assets/video/home-video4.mp4" type="video/mp4">
  61. </video>
  62. <div class="video-des">
  63. <div class="des1">
  64. <p>围绕行业细分,累计服务超过 <span>5000</span> 家企业,近<span> 10万 </span>个用户,平台生态高效、健康</p>
  65. </div>
  66. <div class="des2 desCom" style="top:43%; left:0;width:100%;text-align:center">
  67. <p>核心价值观</p>
  68. <span>一起梦想,一起成长,一起分享</span>
  69. </div>
  70. <div class="des3 desCom" style="top:65%; left:20%;">
  71. <p>企业使命</p>
  72. <span>用数字化手段助力客户融入数智时代</span>
  73. </div>
  74. <div class="des4 desCom" style="top:65%; right:25%;">
  75. <p>企业愿景</p>
  76. <span>成为智慧数字产业的领跑者</span>
  77. </div>
  78. </div>
  79. <span class="go_down"></span>
  80. </div>
  81. <section v-for="(list,ind) in homeList">
  82. <!-- 首页轮播 -->
  83. <!--====== BANNER SECTION START ======-->
  84. <!-- <div class="banner-section">
  85. <div id="shutter" class="shutter" v-if="list.title === '幻灯片'">
  86. <div class="shutter-img">
  87. <a href="#" v-for="con in homeList[0].content">
  88. <div class="animate-img pc" style="background-size: cover;background-position: left top;background-image:url(assets/img/banner/111.png)">
  89. </div>
  90. <div class="animate-img mobile">
  91. <img style="min-width: 100%;" :src="con.picture" alt="">
  92. </div>
  93. </a>
  94. </div>
  95. <ul class="shutter-btn">
  96. <li class="prev"></li>
  97. <li class="next"></li>
  98. </ul>
  99. </div>
  100. </div> -->
  101. <!--====== BANNER SECTION END ======-->
  102. <!--====== WHYUS SECTION START ======-->
  103. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '物联网行业垂直应用'">
  104. <div class="container">
  105. <div class="section-title text-center both-border pb-90">
  106. <span class="title-tag">{{list.title}}</span>
  107. <div v-for="one in list.content_one">
  108. {{one.content}}
  109. </div>
  110. </div>
  111. <div class="row align-items-center justify-content-center">
  112. <div class="col-md-12">
  113. <div class="row" id="hexGrid">
  114. <div :class="
  115. indx == 0 ? 'col-md-4 offset-2 col-sm-6'
  116. : indx == 1 ? 'col-md-4 col-sm-6'
  117. : indx == 2 ? 'hex hex3 col-md-4 col-sm-6'
  118. : indx >= 3 ? 'hex col-md-4 col-sm-6'
  119. : '' " v-for="(con,indx) in list.content">
  120. <!-- <a class="hexIn" href="#"> -->
  121. <img :src="con.picture" alt="" />
  122. <!-- </a> -->
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <!--====== WHYUS SECTION END ======-->
  130. <!--====== ABOUT SECTION START ======-->
  131. <div class="about-section pt-60 pb-60 " v-if="list.title === '数字化管理平台'">
  132. <div class="container ">
  133. <div class="section-title text-center both-border pb-80">
  134. <span class="title-tag ">{{list.title}}</span>
  135. <div v-for="one in list.content_one">
  136. {{one.content}}
  137. </div>
  138. </div>
  139. <div class="row align-items-center justify-content-center about-background" v-for="con in list.content">
  140. <div class="imgCenter col-md-6 about-img-box" v-if="con.picture != null && con.picture != ''">
  141. <img :src="con.picture" alt=" ">
  142. </div>
  143. <div class="col-md-6 about-text-box">
  144. <div class="">
  145. <span class="title-tag" v-if="con.title != null && con.title != ''">{{con.title}}</span>
  146. <div>
  147. <br><br>
  148. <span v-for="cont in con.content">
  149. <span style="margin-right: 35px;"></span>{{cont.content}}
  150. </span>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <!--====== ABOUT SECTION END ======-->
  158. <!--====== WHYUS SECTION START ======-->
  159. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '核心优势'">
  160. <div class="container">
  161. <div class="section-title text-center both-border pb-90">
  162. <span class="title-tag">{{list.title}}</span>
  163. </div>
  164. <div class="row align-items-center justify-content-center">
  165. <div class="col-md-12">
  166. <div class="row ys-text-align">
  167. <div class="maxWidth col-md-4 col-sm-6" v-for="(con,ind) in list.content">
  168. <div class="about-img-box">
  169. <img :src="con.picture" alt="">
  170. <div>
  171. <span :class="
  172. ind == 0 ? 'span1 title-tag'
  173. :ind == 1 ? 'span2 title-tag'
  174. :ind == 2 ? 'span3 title-tag':''">{{con.title}}</span>
  175. </div>
  176. <div>
  177. <span v-for="cont in con.content">{{cont.content}}<br></span>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. <!--====== WHYUS SECTION END ======-->
  187. <!--====== Trademark SECTION START ======-->
  188. <div class="about-section pt-60 pb-60 " v-if="list.title === '合作伙伴'">
  189. <div class="container ">
  190. <div class="section-title text-center both-border pb-80">
  191. <span class="title-tag ">{{list.title}}</span>
  192. </div>
  193. <div class="row align-items-center justify-content-center trademark-background">
  194. <div class="col-md-12">
  195. <div class="row">
  196. <div class="col-md-2" v-for="con in list.content">
  197. <img :src="con.picture" alt="">
  198. </div>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. <!--====== Trademark SECTION END ======-->
  205. <!--====== NEWS SECTION START ======-->
  206. <div class="news-section pt-60 pb-60" v-if="list.title === '友情链接'">
  207. <div class="container">
  208. <div class="section-title text-center both-border">
  209. <span class="title-tag ">{{list.title}}</span>
  210. <br><br><br>
  211. </div>
  212. <div class="row">
  213. <div class="newsBack col-md-12">
  214. <div class="row">
  215. <div class="newsImg col-md-3" v-for="con in list.content">
  216. <a :href="con.catenate" target="_blank">
  217. <img :src="con.picture" alt="">
  218. </a>
  219. </div>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. <!--====== NEWS SECTION END ======-->
  226. </section>
  227. <!--====== FOOTER PART START ======-->
  228. <div id="footer">
  229. </div>
  230. <!--====== FOOTER PART END ======-->
  231. </div>
  232. <!--====== jquery js ======-->
  233. <script src="assets/js/vendor/modernizr-3.6.0.min.js "></script>
  234. <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
  235. <!--====== Bootstrap js ======-->
  236. <script src="assets/js/bootstrap.min.js "></script>
  237. <script src="assets/js/popper.min.js "></script>
  238. <!--====== Slick js ======-->
  239. <script src="assets/js/slick.min.js "></script>
  240. <!--====== Mean Menu ======-->
  241. <script src="assets/js/jquery.meanmenu.min.js "></script>
  242. <script src="assets/css/font_mun4q5ltrbp/iconfont.js "></script>
  243. <!--====== Main js ======-->
  244. <script src="assets/js/main.js "></script>
  245. <!--====== Setting Info js ======-->
  246. <script src="assets/js/settinginfo.js"></script>
  247. <!--====== Vue js ======-->
  248. <script src="assets/js/vue.min.js "></script>
  249. <script src="assets/summernote/plugin/jquery-blinds-player/js/velocity.js"></script>
  250. <script src="assets/summernote/plugin/jquery-blinds-player/js/shutter.js"></script>
  251. <script>
  252. $(function() {
  253. $('#headerNav').load("./headerNav.html");
  254. var $wh=$(window).height();
  255. $('.go_down').click(function(e) {
  256. $('html,body').animate({scrollTop:$wh},700);
  257. });
  258. // setTimeout(() => {
  259. // $('#shutter').shutter({
  260. // // shutterW: 1000, // 容器宽度
  261. // // shutterH: 358, // 容器高度
  262. // isAutoPlay: true, // 是否自动播放
  263. // playInterval: 3000, // 自动播放时间
  264. // curDisplay: 3, // 当前显示页
  265. // fullPage: false // 是否全屏展示
  266. // })
  267. // }, 1000)
  268. $('#footer').load("./footer.html");
  269. })
  270. var app = new Vue({
  271. el: '#app',
  272. data: {
  273. screenWidth: 0,
  274. homeList: [],
  275. status: false
  276. },
  277. computed: {
  278. },
  279. mounted: function() {
  280. this.screenWidth = document.body.clientWidth
  281. window.onresize = () => {
  282. return (() => {
  283. this.screenWidth = document.body.clientWidth
  284. })()
  285. }
  286. var _this = this;
  287. jQuery.ajax({
  288. type: 'POST',
  289. dataType: 'json',
  290. url: window.FQDN + 'Index/index',
  291. }).done(function(res) {
  292. _this.homeList = res
  293. _this.status = true
  294. }).fail(function(err) {});
  295. },
  296. methods: {
  297. },
  298. // watch: {
  299. // screenWidth(val) {
  300. // var videoBtn = document.getElementById('videoBtn')
  301. // var widthNum = val / 8;
  302. // var heightNum = val / 32;
  303. // var fontSizeNum = val / 96;
  304. // var bottomNum = val / 47;
  305. // if (widthNum >= 150) {
  306. // videoBtn.style.left = (val / 2) - (widthNum / 2) + "px"
  307. // videoBtn.style.width = widthNum + "px"
  308. // } else {
  309. // videoBtn.style.left = (val / 2) - (150 / 2) + "px"
  310. // videoBtn.style.width = "150px"
  311. // }
  312. // heightNum >= 30 ? videoBtn.style.height = heightNum + "px" : videoBtn.style.height = "30px"; //按钮高度自适应
  313. // fontSizeNum >= 13 ? videoBtn.style.fontSize = fontSizeNum + "px" : videoBtn.style.fontSize = "13px"; //按钮中字体自适应
  314. // videoBtn.style.display = "inline"
  315. // }
  316. // },
  317. });
  318. </script>
  319. </body>
  320. </html>