index.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624
  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="app">
  34. <!--====== HEADER START ======-->
  35. <header class="header-absolute sticky-header">
  36. <div class="custom-container-one">
  37. <div class="header-top-area">
  38. </div>
  39. <div id="headerNav"></div>
  40. <div>
  41. <div class="mobile-menu"></div>
  42. </div>
  43. </div>
  44. </header>
  45. <!--====== HEADER END ======-->
  46. <div class="video-section">
  47. <video autoplay loop muted style="width:100%;height:100%;object-fit:fill;"
  48. poster="assets/img/banner/111.png">
  49. <source src="assets/video/11.mp4" type="video/mp4">
  50. </video>
  51. <div class="video-des">
  52. <div class="des1">
  53. <!-- <h1 class="animate__animated animate__bounce">An animated element</h1> -->
  54. <p class="animate__animated animate__fadeInUp">公司成立<span class="num1">20年</span>,围绕行业细分,累计服务超过 <span class="num1">5000</span> 家企业,近<span class="num1"> 10万 </span>个用户</p>
  55. </div>
  56. <div class="des2 desCom animate__animated animate__flipInX" style="top:43%; left:0;width:100%;text-align:center">
  57. <p>核心价值观</p>
  58. <span>一起梦想,一起成长,一起分享</span>
  59. </div>
  60. <div class="des3 desCom animate__animated animate__lightSpeedInLeft" style="top:65%; left:20%;">
  61. <p>企业使命</p>
  62. <span>用数字化手段助力客户融入数智时代</span>
  63. </div>
  64. <div class="des4 desCom animate__animated animate__lightSpeedInRight" style="top:65%; right:25%;">
  65. <p>企业愿景</p>
  66. <span>成为智慧数字产业的领跑者</span>
  67. </div>
  68. </div>
  69. <span class="go_down"></span>
  70. </div>
  71. <section v-for="(list,ind) in homeList">
  72. <!--====== WHYUS SECTION START ======-->
  73. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '物联网行业垂直应用'">
  74. <div class="container">
  75. <div class="section-title text-center both-border pb-90">
  76. <span class="title-tag">{{list.title}}</span>
  77. <div v-for="one in list.content_one">
  78. {{one.content}}
  79. </div>
  80. </div>
  81. <div class="row align-items-center justify-content-center">
  82. <div class="col-md-12">
  83. <div class="row" id="hexGrid">
  84. <div :class="
  85. indx == 0 ? 'col-md-4 offset-2 col-sm-6'
  86. : indx == 1 ? 'col-md-4 col-sm-6'
  87. : indx == 2 ? 'hex hex3 col-md-4 col-sm-6'
  88. : indx >= 3 ? 'hex col-md-4 col-sm-6'
  89. : '' " v-for="(con,indx) in list.content">
  90. <!-- <a class="hexIn" href="#"> -->
  91. <img :src="con.picture" alt="" />
  92. <!-- </a> -->
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <!--====== WHYUS SECTION END ======-->
  100. <!--====== ABOUT SECTION START ======-->
  101. <div class="about-section pt-60 pb-60 " v-if="list.title === '数字化管理平台'">
  102. <div class="container ">
  103. <div class="section-title text-center both-border pb-80">
  104. <span class="title-tag ">{{list.title}}</span>
  105. <div v-for="one in list.content_one">
  106. {{one.content}}
  107. </div>
  108. </div>
  109. <div class="row align-items-center justify-content-center about-background"
  110. v-for="con in list.content">
  111. <div class="imgCenter col-md-6 about-img-box" v-if="con.picture != null && con.picture != ''">
  112. <img :src="con.picture" alt=" ">
  113. </div>
  114. <div class="col-md-6 about-text-box">
  115. <div class="">
  116. <span class="title-tag" v-if="con.title != null && con.title != ''">{{con.title}}</span>
  117. <div>
  118. <br><br>
  119. <span v-for="cont in con.content">
  120. <span style="margin-right: 35px;"></span>{{cont.content}}
  121. </span>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <!--====== ABOUT SECTION END ======-->
  129. <!--====== WHYUS SECTION START ======-->
  130. <div class="whyUs-section pt-60 pb-60" v-if="list.title === '核心优势'">
  131. <div class="container">
  132. <div class="section-title text-center both-border pb-90">
  133. <span class="title-tag">{{list.title}}</span>
  134. </div>
  135. <div class="row align-items-center justify-content-center">
  136. <div class="col-md-12">
  137. <div class="row ys-text-align">
  138. <div class="maxWidth col-md-4 col-sm-6" v-for="(con,ind) in list.content">
  139. <div class="about-img-box">
  140. <img :src="con.picture" alt="">
  141. <div>
  142. <span :class="
  143. ind == 0 ? 'span1 title-tag'
  144. :ind == 1 ? 'span2 title-tag'
  145. :ind == 2 ? 'span3 title-tag':''">{{con.title}}</span>
  146. </div>
  147. <div>
  148. <span v-for="cont in con.content">{{cont.content}}<br></span>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. <!--====== WHYUS SECTION END ======-->
  158. <!--====== Trademark SECTION START ======-->
  159. <div class="about-section pt-60 pb-60 " v-if="list.title === '合作伙伴'">
  160. <div class="container ">
  161. <div class="section-title text-center both-border pb-80">
  162. <span class="title-tag ">{{list.title}}</span>
  163. </div>
  164. <div class="row align-items-center justify-content-center trademark-background">
  165. <div class="col-md-12">
  166. <div class="row">
  167. <div class="col-md-2" v-for="con in list.content">
  168. <img :src="con.picture" alt="">
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </div>
  175. <!--====== Trademark SECTION END ======-->
  176. <!--====== NEWS SECTION START ======-->
  177. <div class="news-section pt-60 pb-60" v-if="list.title === '友情链接'">
  178. <div class="container">
  179. <div class="section-title text-center both-border">
  180. <span class="title-tag ">{{list.title}}</span>
  181. <br><br><br>
  182. </div>
  183. <div class="row">
  184. <div class="newsBack col-md-12">
  185. <div class="row">
  186. <div class="newsImg col-md-3" v-for="con in list.content">
  187. <a :href="con.catenate" target="_blank">
  188. <img :src="con.picture" alt="">
  189. </a>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. </div>
  196. <!--====== NEWS SECTION END ======-->
  197. </section>
  198. <!--====== FOOTER PART START ======-->
  199. <div id="footer">
  200. </div>
  201. <!--====== FOOTER PART END ======-->
  202. <div class="feedBackBox">
  203. <div class="contactOne">
  204. <img src="assets/img/home/f_phone.png" alt="">
  205. <ul class="contactInner">
  206. <li>
  207. <span>服务热线:</span>
  208. <span>400-633-8668</span>
  209. </li>
  210. <li>
  211. <span> 电话:</span>
  212. <span>021-65376655 <br> 021-62985186</span>
  213. <li>
  214. <span> 传真:</span>
  215. <span>021-65376655-8588</span>
  216. </li>
  217. </ul>
  218. </div>
  219. <div @click="centerDialogVisible=true">
  220. <img src="assets/img/home/f_feed.png" alt="">
  221. </div>
  222. <div @click="scrollToTop">
  223. <img src="assets/img/home/f_top.png" alt="">
  224. </div>
  225. </div>
  226. <el-dialog title="项目咨询" :visible.sync="centerDialogVisible" width="700px" center class="feedBackDialog" :lock-scroll="false">
  227. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
  228. <el-form-item label="" prop="platName">
  229. <el-radio-group v-model="ruleForm.platName">
  230. <el-radio-button label="智慧安防"></el-radio-button>
  231. <el-radio-button label="智慧消防"></el-radio-button>
  232. <el-radio-button label="智慧楼宇"></el-radio-button>
  233. <el-radio-button label="智慧商区"></el-radio-button>
  234. <el-radio-button label="智慧园区"></el-radio-button>
  235. <el-radio-button label="其他"></el-radio-button>
  236. </el-radio-group>
  237. </el-form-item>
  238. <el-row :gutter="20">
  239. <el-col :span="12">
  240. <el-form-item label="姓名" prop="consultName">
  241. <el-input v-model="ruleForm.consultName"></el-input>
  242. </el-form-item>
  243. </el-col>
  244. <el-col :span="12">
  245. <el-form-item label="联系电话" prop="consultPhone">
  246. <el-input v-model="ruleForm.consultPhone"></el-input>
  247. </el-form-item>
  248. </el-col>
  249. <el-col :span="12">
  250. <el-form-item label="邮箱" prop="mail">
  251. <el-input v-model="ruleForm.mail"></el-input>
  252. </el-form-item>
  253. </el-col>
  254. <el-col :span="12">
  255. <el-form-item label="公司" prop="company">
  256. <el-input v-model="ruleForm.company"></el-input>
  257. </el-form-item>
  258. </el-col>
  259. </el-row>
  260. <el-form-item label="需求描述" prop="consultContent">
  261. <el-input type="textarea" v-model="ruleForm.consultContent"></el-input>
  262. </el-form-item>
  263. </el-form>
  264. <!-- <span>需要注意的是内容是默认不居中的</span> -->
  265. <span slot="footer" class="dialog-footer">
  266. <el-button @click="resetForm('ruleForm')">取 消</el-button>
  267. <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
  268. </span>
  269. </el-dialog>
  270. </div>
  271. <!--====== jquery js ======-->
  272. <script src="assets/js/vendor/modernizr-3.6.0.min.js "></script>
  273. <script src="assets/js/vendor/jquery-1.12.4.min.js "></script>
  274. <!--====== Bootstrap js ======-->
  275. <script src="assets/js/bootstrap.min.js "></script>
  276. <script src="assets/js/popper.min.js "></script>
  277. <!--====== Slick js ======-->
  278. <script src="assets/js/slick.min.js "></script>
  279. <!--====== Mean Menu ======-->
  280. <script src="assets/js/jquery.meanmenu.min.js "></script>
  281. <script src="assets/css/font_mun4q5ltrbp/iconfont.js "></script>
  282. <!--====== Main js ======-->
  283. <script src="assets/js/main.js "></script>
  284. <!--====== Setting Info js ======-->
  285. <script src="assets/js/settinginfo.js"></script>
  286. <!--====== Vue js ======-->
  287. <script src="assets/js/vue.min.js "></script>
  288. <script src="assets/summernote/plugin/jquery-blinds-player/js/velocity.js"></script>
  289. <script src="assets/summernote/plugin/jquery-blinds-player/js/shutter.js"></script>
  290. <script src="../assets/js/element/index.js"></script>
  291. <script>
  292. $(function () {
  293. $('#headerNav').load("./headerNav.html");
  294. var $wh = $(window).height();
  295. $('.go_down').click(function (e) {
  296. $('html,body').animate({
  297. scrollTop: $wh
  298. }, 700);
  299. });
  300. $('#footer').load("./footer.html");
  301. })
  302. var app = new Vue({
  303. el: '#app',
  304. data: {
  305. screenWidth: 0,
  306. homeList: [],
  307. status: false,
  308. centerDialogVisible: false,
  309. ruleForm: {
  310. platName: '智慧安防',
  311. consultName: '',
  312. consultPhone:'',
  313. mail:'',
  314. company:'',
  315. consultContent: "", //?
  316. },
  317. rules: {
  318. platName: [{
  319. required: true,
  320. message: '请选择类型',
  321. trigger: 'change'
  322. },
  323. ],
  324. consultName: [{
  325. required: true,
  326. message: '请输入姓名',
  327. trigger: 'blur'
  328. },
  329. // {
  330. // min: 2,
  331. // max: 10,
  332. // message: '长度在 2 到 10 个字符',
  333. // trigger: 'blur'
  334. // }
  335. ],
  336. consultPhone: [{
  337. required: true,
  338. message: '请输入正确的电话号码',
  339. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  340. trigger: 'change'
  341. }],
  342. mail: [{
  343. required: false,
  344. type: "email",
  345. message: "请输入正确的邮箱地址",
  346. trigger: 'blur'
  347. }],
  348. company: [
  349. // { required: true, message: '请选择活动区域', trigger: 'change' }
  350. ],
  351. consultContent: [
  352. // { required: true, message: '请填写需求描述', trigger: 'blur' }
  353. ]
  354. }
  355. },
  356. computed: {
  357. },
  358. mounted: function () {
  359. this.screenWidth = document.body.clientWidth
  360. window.onresize = () => {
  361. return (() => {
  362. this.screenWidth = document.body.clientWidth
  363. })()
  364. }
  365. var _this = this;
  366. jQuery.ajax({
  367. type: 'POST',
  368. dataType: 'json',
  369. url: window.FQDN + 'Index/index',
  370. }).done(function (res) {
  371. _this.homeList = res
  372. _this.status = true
  373. }).fail(function (err) {});
  374. },
  375. methods: {
  376. submitForm(formName) {
  377. _this=this
  378. this.$refs[formName].validate((valid) => {
  379. if (valid) {
  380. console.log(_this.ruleForm)
  381. let param = JSON.stringify(_this.ruleForm)
  382. jQuery.ajax({
  383. type: 'POST',
  384. // dataType: 'json',
  385. contentType: 'application/json;charset=UTF-8',
  386. url: window.FQDN2 + 'siteReview',
  387. data: param
  388. }).done(function(res) {
  389. if (res.status === "SUCCESS") {
  390. _this.$message({
  391. message: '提交成功',
  392. type: 'success'
  393. });
  394. _this.centerDialogVisible=false
  395. _this.$refs[formName].resetFields(); //重置from校验
  396. }
  397. }).fail(function(err) {});
  398. } else {
  399. console.log('error submit!!');
  400. return false;
  401. }
  402. });
  403. },
  404. resetForm(formName) {
  405. this.$refs[formName].resetFields();
  406. this.centerDialogVisible = false
  407. },
  408. scrollToTop() {
  409. window.scrollTo({
  410. top: 0,
  411. behavior: "smooth"
  412. });
  413. }
  414. },
  415. });
  416. var app = new Vue({
  417. el: '.aaaa',
  418. data: {
  419. screenWidth: 0,
  420. homeList: [],
  421. status: false,
  422. centerDialogVisible: false,
  423. ruleForm: {
  424. platName: '智慧安防',
  425. consultName: '',
  426. consultPhone:'',
  427. mail:'',
  428. company:'',
  429. consultContent: "", //?
  430. },
  431. rules: {
  432. platName: [{
  433. required: true,
  434. message: '请选择类型',
  435. trigger: 'change'
  436. },
  437. ],
  438. consultName: [{
  439. required: true,
  440. message: '请输入姓名',
  441. trigger: 'blur'
  442. },
  443. // {
  444. // min: 2,
  445. // max: 10,
  446. // message: '长度在 2 到 10 个字符',
  447. // trigger: 'blur'
  448. // }
  449. ],
  450. consultPhone: [{
  451. required: true,
  452. message: '请输入正确的电话号码',
  453. pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
  454. trigger: 'change'
  455. }],
  456. mail: [{
  457. required: false,
  458. type: "email",
  459. message: "请输入正确的邮箱地址",
  460. trigger: 'blur'
  461. }],
  462. company: [
  463. // { required: true, message: '请选择活动区域', trigger: 'change' }
  464. ],
  465. consultContent: [
  466. // { required: true, message: '请填写需求描述', trigger: 'blur' }
  467. ]
  468. }
  469. },
  470. computed: {
  471. },
  472. mounted: function () {
  473. this.screenWidth = document.body.clientWidth
  474. window.onresize = () => {
  475. return (() => {
  476. this.screenWidth = document.body.clientWidth
  477. })()
  478. }
  479. var _this = this;
  480. jQuery.ajax({
  481. type: 'POST',
  482. dataType: 'json',
  483. url: window.FQDN + 'Index/index',
  484. }).done(function (res) {
  485. _this.homeList = res
  486. _this.status = true
  487. }).fail(function (err) {});
  488. },
  489. methods: {
  490. submitForm(formName) {
  491. _this=this
  492. this.$refs[formName].validate((valid) => {
  493. if (valid) {
  494. console.log(_this.ruleForm)
  495. let param = JSON.stringify(_this.ruleForm)
  496. jQuery.ajax({
  497. type: 'POST',
  498. // dataType: 'json',
  499. contentType: 'application/json;charset=UTF-8',
  500. url: window.FQDN2 + 'siteReview',
  501. data: param
  502. }).done(function(res) {
  503. if (res.status === "SUCCESS") {
  504. _this.$message({
  505. message: '提交成功',
  506. type: 'success'
  507. });
  508. _this.centerDialogVisible=false
  509. _this.$refs[formName].resetFields(); //重置from校验
  510. }
  511. }).fail(function(err) {});
  512. } else {
  513. console.log('error submit!!');
  514. return false;
  515. }
  516. });
  517. },
  518. resetForm(formName) {
  519. this.$refs[formName].resetFields();
  520. this.centerDialogVisible = false
  521. },
  522. scrollToTop() {
  523. window.scrollTo({
  524. top: 0,
  525. behavior: "smooth"
  526. });
  527. }
  528. },
  529. });
  530. </script>
  531. </body>
  532. </html>