index.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524
  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. <!--====== element css ====== -->
  18. <link rel="stylesheet" href="../assets/css/element.css">
  19. <!--====== Default css ======-->
  20. <link rel="stylesheet" href="assets/css/default.css" />
  21. <!--====== animate css ======-->
  22. <link rel="stylesheet" href="https://animate.style/animate.min.css" />
  23. <!--====== Style css ======-->
  24. <link rel="stylesheet" href="assets/css/style.css"/>
  25. <!--====== home css ====== -->
  26. <link rel="stylesheet" href="assets/css/home.css"/>
  27. <link rel="stylesheet" href="assets/fonts/iconfont/iconfont.css">
  28. </head>
  29. <body>
  30. <!--[if lte IE 9]>
  31. <p class="browserupgrade">请使用chrome,IE11等现代浏览器,浏览本网站.</p>
  32. <![endif]-->
  33. <div id="app2">
  34. <div class="feedBackBox">
  35. <div class="contactOne">
  36. <img src="assets/img/home/f_phone.png" alt="">
  37. <ul class="contactInner">
  38. <li>
  39. <span>服务热线:</span>
  40. <span>400-633-8668</span>
  41. </li>
  42. <li>
  43. <span> 电话:</span>
  44. <span>021-65376655 <br> 021-62985186</span>
  45. <li>
  46. <span> 传真:</span>
  47. <span>021-65376655-8588</span>
  48. </li>
  49. </ul>
  50. </div>
  51. <div @click="centerDialogVisible=true">
  52. <img src="assets/img/home/f_feed.png" alt="">
  53. </div>
  54. <div @click="scrollToTop">
  55. <img src="assets/img/home/f_top.png" alt="">
  56. </div>
  57. </div>
  58. <el-dialog title="项目咨询" style="display:none" :style="{display:(centerDialogVisible?'block':'none')}" :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
  59. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  60. <el-form-item label="" prop="platName">
  61. <el-radio-group v-model="ruleForm.platName">
  62. <el-radio-button label="智慧安防"></el-radio-button>
  63. <el-radio-button label="智慧消防"></el-radio-button>
  64. <el-radio-button label="智慧楼宇"></el-radio-button>
  65. <el-radio-button label="智慧商区"></el-radio-button>
  66. <el-radio-button label="智慧园区"></el-radio-button>
  67. <el-radio-button label="其他"></el-radio-button>
  68. </el-radio-group>
  69. </el-form-item>
  70. <el-row :gutter="20">
  71. <el-col :span="12">
  72. <el-form-item label="姓名" prop="consultName">
  73. <el-input v-model="ruleForm.consultName"></el-input>
  74. </el-form-item>
  75. </el-col>
  76. <el-col :span="12">
  77. <el-form-item label="联系电话" prop="consultPhone">
  78. <el-input v-model="ruleForm.consultPhone"></el-input>
  79. </el-form-item>
  80. </el-col>
  81. <el-col :span="12">
  82. <el-form-item label="邮箱" prop="mail">
  83. <el-input v-model="ruleForm.mail"></el-input>
  84. </el-form-item>
  85. </el-col>
  86. <el-col :span="12">
  87. <el-form-item label="公司" prop="company">
  88. <el-input v-model="ruleForm.company"></el-input>
  89. </el-form-item>
  90. </el-col>
  91. </el-row>
  92. <el-form-item label="需求描述" prop="consultContent">
  93. <el-input type="textarea" v-model="ruleForm.consultContent"></el-input>
  94. </el-form-item>
  95. </el-form>
  96. <!-- <span>需要注意的是内容是默认不居中的</span> -->
  97. <span slot="footer" class="dialog-footer" >
  98. <el-button @click="resetForm('ruleForm')">取 消</el-button>
  99. <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
  100. </span>
  101. </el-dialog>
  102. </div>
  103. <div id="app">
  104. <!--====== HEADER START ======-->
  105. <header class="header-absolute sticky-header">
  106. <div class="custom-container-one">
  107. <div class="mainmenu-area container d-flex align-items-center justify-content-center">
  108. <div class="logo">
  109. <a href="/index.html"><img src="../assets/img/logo-white.png" alt="uskylogo"></a>
  110. </div>
  111. <div class="d-flex align-items-center ">
  112. <nav class="main-menu">
  113. <div class="menu-items">
  114. <ul v-if="columnList" >
  115. <li v-for="item in columnList" :key="item.id" :class="
  116. currentPath==item.sname? 'active':''" >
  117. <a :href="`${item.sname}?id=${item.id}`">{{item.categoryName}}</a>
  118. <ul class="submenu" >
  119. <li v-if="item.children" v-for="aa in item.children" :key="aa.id"><a :href="`${item.sname}?id=${aa.id}`"> <span style="font-weight:bold;margin-right:10px">·</span> {{aa.sname}}</a></li>
  120. </ul>
  121. </li>
  122. </ul>
  123. </div>
  124. </nav>
  125. <div class="apply-expre" v-if="columnList.length>0" >申请体验</div>
  126. </div>
  127. </div>
  128. <div>
  129. <div class="mobile-menu"></div>
  130. </div>
  131. </div>
  132. </header>
  133. <!--====== HEADER END ======-->
  134. <div class="video-section">
  135. <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
  136. poster="assets/img/banner/111.png">
  137. <source src="assets/video/111.mp4" type="video/mp4">
  138. </video>
  139. <div class="video-des">
  140. <div class="des1">
  141. <!-- <h1 class="animate__animated animate__bounce">An animated element</h1> -->
  142. <p class="animate__animated animate__fadeInUp">公司成立<span class="num1">20年</span>,围绕行业细分,累计服务超过 <span class="num1">5000</span> 家企业,近<span class="num1"> 10万 </span>个用户</p>
  143. </div>
  144. <div class="des2 desCom animate__animated animate__flipInX" style="top:43%; left:0;width:100%;text-align:center">
  145. <p>核心价值观</p>
  146. <span>一起梦想,一起成长,一起分享</span>
  147. </div>
  148. <div class="des3 desCom animate__animated animate__lightSpeedInLeft" style="top:65%; left:20%;">
  149. <p>企业使命</p>
  150. <span>用数字化手段助力客户融入数智时代</span>
  151. </div>
  152. <div class="des4 desCom animate__animated animate__lightSpeedInRight" style="top:65%; right:25%;">
  153. <p>企业愿景</p>
  154. <span>成为智慧数字产业的领跑者</span>
  155. </div>
  156. </div>
  157. <span class="go_down"></span>
  158. </div>
  159. <!-- <button-counter></button-counter> -->
  160. <section v-for="(list,ind) in homeList">
  161. <!--====== WHYUS SECTION START ======-->
  162. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '物联网行业垂直应用'">
  163. <div class="container">
  164. <div class="section-title text-center both-border pb-90">
  165. <span class="title-tag">{{list.title}}</span>
  166. <div v-for="one in list.content_one">
  167. {{one.content}}
  168. </div>
  169. </div>
  170. <div class="row align-items-center justify-content-center">
  171. <div class="col-md-12">
  172. <div class="row" id="hexGrid">
  173. <div :class="
  174. indx == 0 ? 'col-md-4 offset-2 col-sm-6'
  175. : indx == 1 ? 'col-md-4 col-sm-6'
  176. : indx == 2 ? 'hex hex3 col-md-4 col-sm-6'
  177. : indx >= 3 ? 'hex col-md-4 col-sm-6'
  178. : '' " v-for="(con,indx) in list.content">
  179. <!-- <a class="hexIn" href="#"> -->
  180. <img :src="con.picture" alt="" />
  181. <!-- </a> -->
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. </div>
  188. <!--====== WHYUS SECTION END ======-->
  189. <!--====== ABOUT SECTION START ======-->
  190. <div class="about-section pt-60 pb-60 " v-if="list.title === '数字化管理平台'">
  191. <div class="container ">
  192. <div class="section-title text-center both-border pb-80">
  193. <span class="title-tag ">{{list.title}}</span>
  194. <div v-for="one in list.content_one">
  195. {{one.content}}
  196. </div>
  197. </div>
  198. <div class="row align-items-center justify-content-center about-background"
  199. v-for="con in list.content">
  200. <div class="imgCenter col-md-6 about-img-box" v-if="con.picture != null && con.picture != ''">
  201. <img :src="con.picture" alt=" ">
  202. </div>
  203. <div class="col-md-6 about-text-box">
  204. <div class="">
  205. <span class="title-tag" v-if="con.title != null && con.title != ''">{{con.title}}</span>
  206. <div>
  207. <br><br>
  208. <span v-for="cont in con.content">
  209. <span style="margin-right: 35px;"></span>{{cont.content}}
  210. </span>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. </div>
  217. <!--====== ABOUT SECTION END ======-->
  218. <!--====== WHYUS SECTION START ======-->
  219. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '核心优势'">
  220. <div class="container">
  221. <div class="section-title text-center both-border pb-90">
  222. <span class="title-tag">{{list.title}}</span>
  223. </div>
  224. <div class="row align-items-center justify-content-center">
  225. <div class="col-md-12">
  226. <div class="row ys-text-align">
  227. <div class="maxWidth col-md-4 col-sm-6" v-for="(con,ind) in list.content">
  228. <div class="about-img-box">
  229. <img :src="con.picture" alt="">
  230. <div>
  231. <span :class="
  232. ind == 0 ? 'span1 title-tag'
  233. :ind == 1 ? 'span2 title-tag'
  234. :ind == 2 ? 'span3 title-tag':''">{{con.title}}</span>
  235. </div>
  236. <div>
  237. <span v-for="cont in con.content">{{cont.content}}<br></span>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <!--====== WHYUS SECTION END ======-->
  247. <!--====== Trademark SECTION START ======-->
  248. <div class="about-section pt-60 pb-60 " v-if="list.title === '合作伙伴'">
  249. <div class="container ">
  250. <div class="section-title text-center both-border pb-80">
  251. <span class="title-tag ">{{list.title}}</span>
  252. </div>
  253. <div class="row align-items-center justify-content-center trademark-background">
  254. <div class="col-md-12">
  255. <div class="row">
  256. <div class="col-md-2" v-for="con in list.content">
  257. <img :src="con.picture" alt="">
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. </div>
  263. </div>
  264. <!--====== Trademark SECTION END ======-->
  265. <!--====== NEWS SECTION START ======-->
  266. <div class="news-section pt-60 pb-60" v-if="list.title === '友情链接'">
  267. <div class="container">
  268. <div class="section-title text-center both-border">
  269. <span class="title-tag ">{{list.title}}</span>
  270. <br><br><br>
  271. </div>
  272. <div class="row">
  273. <div class="newsBack col-md-12">
  274. <div class="row">
  275. <div class="newsImg col-md-3" v-for="con in list.content">
  276. <a :href="con.catenate" target="_blank">
  277. <img :src="con.picture" alt="">
  278. </a>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. </div>
  284. </div>
  285. <!--====== NEWS SECTION END ======-->
  286. </section>
  287. <!--====== FOOTER PART START ======-->
  288. <footer>
  289. <!-- widgets -->
  290. <div class="footer-widget-area">
  291. <div class="container">
  292. <div class="row footerOne">
  293. <div class="col-lg-2 col-md-6 col-sm-6 footerWidth">
  294. <div class="copyrigt-or-code d-flex flex-column align-items-center ">
  295. <img width="130 " height="130 " src="https://aiot.usky.cn/uskyq/assets/img/qr_code.png">
  296. <span style="text-align: left;color:#fff;margin-top:10px ">微信公众号</span>
  297. </div>
  298. </div>
  299. <div class="footerNone" style="width:15% !important;" v-for="item in columnList" :key="item.id">
  300. <div class="widget nav-widget d-flex justify-content-center ">
  301. <div >
  302. <h5 class="widget-title"><a href="/solution/index.html">{{item.categoryName}}</a></h5>
  303. <ul>
  304. <li v-if="item.children" v-for="r in item.children" :key="r.id">
  305. <a :href="`${item.sname}?id=${r.id}`"> {{r.sname}}</a>
  306. </li>
  307. </ul>
  308. </div>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. <!-- copyright -->
  315. <div class="copy-right-area ">
  316. <div class="container ">
  317. <div class="row copyrigt-text ">
  318. <div class="col-lg-12 ">
  319. <p>Copyright © 2001- 2022 Usky. All Rights Reserved. 永天股份 版权所有</p>
  320. <p>增值电信业务经营许可证(IDC、ISP)编号B2-20080010</p>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. </footer>
  326. <!--====== FOOTER PART END ======-->
  327. </div>
  328. <!--====== jquery js ======-->
  329. <script src="assets/js/vendor/modernizr-3.6.0.min.js "></script>
  330. <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
  331. <!--====== Bootstrap js ======-->
  332. <script src="assets/js/bootstrap.min.js "></script>
  333. <script src="assets/js/popper.min.js "></script>
  334. <!--====== Slick js ======-->
  335. <script src="assets/js/slick.min.js "></script>
  336. <!--====== Mean Menu ======-->
  337. <script src="assets/js/jquery.meanmenu.min.js "></script>
  338. <script src="assets/css/font_mun4q5ltrbp/iconfont.js "></script>
  339. <!--====== Main js ======-->
  340. <script src="assets/js/main.js "></script>
  341. <!--====== Setting Info js ======-->
  342. <script src="assets/js/settinginfo.js"></script>
  343. <!--====== Vue js ======-->
  344. <script src="assets/js/vue.min.js "></script>
  345. <script src="assets/summernote/plugin/jquery-blinds-player/js/velocity.js"></script>
  346. <script src="assets/summernote/plugin/jquery-blinds-player/js/shutter.js"></script>
  347. <script src="../assets/js/element/index.js"></script>
  348. <script src="assets/js/commonVue.js "></script>
  349. <script>
  350. $(function () {
  351. var $wh = $(window).height();
  352. $('.go_down').click(function (e) {
  353. $('html,body').animate({
  354. scrollTop: $wh
  355. }, 700);
  356. });
  357. })
  358. var app2 = new Vue({
  359. el: '#app2',
  360. data: {
  361. centerDialogVisible: false,
  362. ruleForm: {
  363. platName: '智慧安防',
  364. consultName: '',
  365. consultPhone:'',
  366. mail:'',
  367. company:'',
  368. consultContent: "",
  369. },
  370. rules: {
  371. platName: [{
  372. required: true,
  373. message: '请选择类型',
  374. trigger: 'change'
  375. },
  376. ],
  377. consultName: [{
  378. required: true,
  379. message: '请输入姓名',
  380. trigger: 'blur'
  381. },
  382. ],
  383. consultPhone: [{
  384. required: true,
  385. message: '请输入正确的电话号码',
  386. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  387. trigger: 'change'
  388. }],
  389. mail: [{
  390. required: false,
  391. type: "email",
  392. message: "请输入正确的邮箱地址",
  393. trigger: 'blur'
  394. }],
  395. company: [
  396. // { required: true, message: '请选择活动区域', trigger: 'change' }
  397. ],
  398. consultContent: [
  399. // { required: true, message: '请填写需求描述', trigger: 'blur' }
  400. ]
  401. }
  402. },
  403. computed: {
  404. },
  405. mounted: function () {
  406. },
  407. methods: {
  408. scrollToTop() {
  409. window.scrollTo({
  410. top: 0,
  411. behavior: "smooth"
  412. });
  413. },
  414. submitForm(formName) {
  415. _this=this
  416. this.$refs[formName].validate((valid) => {
  417. if (valid) {
  418. console.log(_this.ruleForm)
  419. let param = JSON.stringify(_this.ruleForm)
  420. jQuery.ajax({
  421. type: 'POST',
  422. // dataType: 'json',
  423. contentType: 'application/json;charset=UTF-8',
  424. url: window.FQDN2 + 'siteReview',
  425. data: param
  426. }).done(function(res) {
  427. if (res.status === "SUCCESS") {
  428. _this.$message({
  429. message: '提交成功',
  430. type: 'success'
  431. });
  432. _this.centerDialogVisible=false
  433. _this.$refs[formName].resetFields(); //重置from校验
  434. }
  435. }).fail(function(err) {});
  436. } else {
  437. console.log('error submit!!');
  438. return false;
  439. }
  440. });
  441. },
  442. resetForm(formName) {
  443. this.$refs[formName].resetFields();
  444. this.centerDialogVisible = false
  445. },
  446. },
  447. });
  448. </script>
  449. </body>
  450. </html>