Commit 06acedaf0acc7837cf3a25517e5197454b11b806

Authored by Andy
2 parents 2e23ec26 b7db9be2

Merge branch 'test'

contact.html
... ... @@ -53,28 +53,8 @@
53 53 </head>
54 54 <body>
55 55  
56   -<!--<div class="color-plate ">-->
57   -<!--<a class="icon"><i class="fa fa-cog fa-spin"></i></a>-->
58   -<!--<h2>Ruby Color</h2>-->
59   -<!--<div class="color-head">-->
60   -<!--<span class="color1"></span>-->
61   -<!--<span class="color2"></span>-->
62   -<!--<span class="color3"></span>-->
63   -<!--<span class="color4"></span>-->
64   -<!--<span class="color5"></span>-->
65   -<!--<span class="color6"></span>-->
66   -<!--<span class="color7"></span>-->
67   -<!--<span class="color8"></span>-->
68   -<!--<span class="color9"></span>-->
69   -<!--</div>-->
70   -<!--</div>-->
71   -
72   -<!-- Header Area -->
73   -<header id="header" class="header">
74   -
75   -</header>
76   -<!--/ End Header Area -->
77   -
  56 +<header id="header" class="header"></header>
  57 +<!--topbar 任你停-->
78 58 <div class="contactside-bg" >
79 59 <div class="container">
80 60 <div class="row">
... ... @@ -85,47 +65,86 @@
85 65 </div>
86 66 </div>
87 67 </div>
88   -
  68 +<!--经典案例-->
89 69 <section id="contact" class="section contact" >
90 70 <div class="container">
91   - <div class="row">
  71 + <p class="row">
92 72 <div class="example-title text-center">经典案例</div>
93 73 <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
94 74 <ul class="example-wrap" id="example-wrap">
95   - <li class="text-center col-md-6 col-xs-12 example-wrap-dy example-wrap-main">
96   - <div>
97   - <div>丹阳</div>
98   - <div>智慧停车</div>
99   - </div>
  75 + <li class="example-wrap-main example-wrap-l example-img1">
  76 + </li>
  77 + <li class="example-wrap-main example-msg">
  78 + <div class="exa-msg-title">内蒙古赤峰市</div>
  79 + <p>总投资不低于10亿元,分两期实施。</p>
  80 + <p>平面泊位运营资源1.5万个</p>
  81 + <p>新增泊位资源1万个</p>
  82 + <p>社会停车场接入300+</p>
  83 + <p>主城区机动车保有量18万</p>
  84 + <p>用户空间30万+</p>
  85 + <p>特许经营25年</p>
100 86 </li>
101   - <li class="text-center col-md-6 col-xs-12 example-wrap-cf example-wrap-main">
102   - <div>
103   - <div>赤峰红山区</div>
104   - <div>智慧停车</div>
105   - </div>
106 87  
  88 + <li class="example-wrap-main example-wrap-l example-img2">
  89 + </li>
  90 + <li class="example-wrap-main example-msg">
  91 + <div class="exa-msg-title">江苏扬中市</div>
  92 + <p>负责扬中市城区智慧停车系统的全额投</p>
  93 + <p>资、勘察、设计、建设、运营、维护。</p>
  94 + <p>覆盖路侧车位超过1万个,建设智能停车</p>
  95 + <p>云服务平台,运营管理权限20年</p>
  96 + <p>用户空间10万+</p>
107 97 </li>
108   - <li class="text-center col-md-6 col-xs-12 example-wrap-yz example-wrap-main">
109   - <div>
110   - <div>扬中</div>
111   - <div>智慧停车</div>
112   - </div>
113 98  
  99 + <li class="example-wrap-main example-wrap-l example-img3">
  100 + </li>
  101 + <li class="example-wrap-main example-msg">
  102 + <div class="exa-msg-title">江苏丹阳市</div>
  103 + <p>总投资4200万元</p>
  104 + <p>政府公共资源运营泊位1万个</p>
  105 + <p>社会车场接入数量200+</p>
  106 + <p>主城区机动车保有量12万</p>
  107 + <p>用户空间20万+</p>
  108 + <p>特许经营15年</p>
114 109 </li>
115   - <li class="text-center col-md-6 col-xs-12 example-wrap-empty example-wrap-main">
116   - <div>
117   - <div>双流</div>
118   - <div>智慧停车</div>
119   - </div>
120 110  
  111 + <li class=" example-wrap-main example-wrap-l example-img4">
  112 + </li>
  113 + <li class=" example-wrap-main example-msg">
  114 + <div class="exa-msg-title">北京西城区</div>
  115 + <p>建设静态交通大数据中心、“西城区停车</p>
  116 + <p>综合管理及信息服务共享平台”</p>
  117 + <p>建立北京西城区停车数据标准规范体系</p>
  118 + <p>实现800多个停车场,13万个停车泊位</p>
  119 + <p>的数据接入。</p>
121 120 </li>
122 121  
123 122 </ul>
124 123 </div>
125 124 </div>
126 125 </section>
  126 +<!--荣誉轮播-->
  127 +<section class="section contact" style="padding-top: 60px;padding-bottom: 0px;">
  128 + <div class="container">
  129 + <div class="example-title text-center">服务资质</div>
  130 + <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
  131 + <div class="box">
  132 + <dl id="roll">
  133 + <dd><img src="images/cups-1.png" /></dd>
  134 + <dd><img src="images/cups-2.png" /></dd>
  135 + <dd><img src="images/cups-3.png" /></dd>
  136 + <dd><img src="images/cups-4.png" /></dd>
  137 + <dd><img src="images/cups-5.png" /></dd>
  138 + <dd><img src="images/cups-6.png" /></dd>
  139 + <dd><img src="images/cups-7.png" /></dd>
  140 + <dd><img src="images/cups-8.png" /></dd>
  141 + </dl>
  142 + </div>
127 143  
128   -<section id="" class="section contact" style="padding-top: 0;padding-bottom: 0;">
  144 + </div>
  145 +</section>
  146 +<!--联系我们-->
  147 +<section class="section contact" style="padding-top: 0;padding-bottom: 0;">
129 148 <div class="container">
130 149 <div class="row rnt_pos_rel">
131 150 <div class="contact_msg_cont rnt_pos_abs">
... ...
css/contact.css
... ... @@ -35,7 +35,7 @@
35 35 font-weight:400;
36 36 color:rgba(0,0,0,.7);
37 37 }
38   -.example-wrap li{
  38 +/*.example-wrap li{
39 39 height: 331px;
40 40 margin-top: 58px ;
41 41 }
... ... @@ -76,7 +76,7 @@
76 76 line-height: 20px;
77 77 font-size:20px;
78 78 color:rgba(255,255,255,1);
79   -}
  79 +}*/
80 80 .contact-map{
81 81 height: 811px;
82 82 /*background: url("../images/contact-map.png") no-repeat;*/
... ... @@ -130,3 +130,72 @@
130 130  
131 131 }
132 132  
  133 +/*新版 经典案例*/
  134 +.example-wrap-main{
  135 + width: 100%;
  136 + height: auto;
  137 + /*min-width: 1200px;*/
  138 +}
  139 +.example-wrap li{
  140 + height: 232px;
  141 + margin-top: 58px;
  142 + width: 25%;
  143 + float: left;
  144 +}
  145 +.example-wrap-l{
  146 + /*width:336px;*/
  147 + width:100%;
  148 + height:232px;
  149 + border-radius:4px !important;
  150 +}
  151 +.example-img1{
  152 + background: url("../images/contact-wrap-cf.png") no-repeat center center;
  153 + background-size: 100% 100%;
  154 +}
  155 +.example-img2{
  156 + background: url("../images/contact-wrap-yz.png") no-repeat center center;
  157 + background-size: 100% 100%;
  158 +}
  159 +.example-img3{
  160 + background: url("../images/contact-wrap-dy.png") no-repeat center center;
  161 + background-size: 100% 100%;
  162 +}
  163 +.example-img4{
  164 + background: url("../images/contact-wrap-xc.png") no-repeat center center;
  165 + background-size: 100% 100%;
  166 +}
  167 +.example-msg{
  168 + padding-left: 24px;
  169 +}
  170 +.exa-msg-title{
  171 + height:22px;
  172 + font-size:22px;
  173 + font-weight:500;
  174 + color:rgba(0,0,0,1);
  175 + margin-bottom: 18px;
  176 + margin-top: 18px;
  177 +}
  178 +.example-msg p{
  179 + font-size:14px;
  180 + font-weight:400;
  181 + color:rgba(0,0,0,1);
  182 + line-height:23px;
  183 +}
  184 +
  185 +/* 荣誉 轮播*/
  186 +.box{
  187 + height: 260px;
  188 + overflow: hidden;
  189 + width: 1200px;
  190 + margin: 60px auto;
  191 + position: relative;
  192 +}
  193 +#roll{
  194 + width: 200%;
  195 +}
  196 +#roll dd{
  197 + width: 382px;
  198 + height: 260px;
  199 + float: left;
  200 + margin-right: 20px;
  201 +}
... ...
css/portfollo.css
... ... @@ -254,6 +254,8 @@
254 254 font-size: 20px;
255 255 cursor: pointer;
256 256 position: relative;
  257 + width: 20%;
  258 + float: left;
257 259 }
258 260 .portfolio-hardware-wrap li:nth-of-type(1){
259 261 padding-top: 60px;
... ... @@ -275,6 +277,11 @@
275 277 background: url("../images/portfolio-hardware-wrap-4.png") no-repeat center 0;
276 278  
277 279 }
  280 +.portfolio-hardware-wrap li:nth-of-type(5){
  281 + padding-top: 60px;
  282 + background: url("../images/portfolio-hardware-wrap-5.png") no-repeat center 0;
  283 +
  284 +}
278 285 .portfolio-hardware-wrap li:nth-of-type(1).active{
279 286 color: #3F9FFE;
280 287 padding-bottom: 10px;
... ... @@ -299,6 +306,11 @@
299 306 padding-bottom: 10px;
300 307 /*border-bottom: 3px solid rgba(63,159,254,1);*/
301 308 background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
  309 +}.portfolio-hardware-wrap li:nth-of-type(5).active{
  310 + color: #3F9FFE;
  311 + padding-bottom: 10px;
  312 + /*border-bottom: 3px solid rgba(63,159,254,1);*/
  313 + background: url("../images/portfolio-hardware-wrap-5-active.png") no-repeat center 0;
302 314 }
303 315  
304 316 .portfolio-section-wrap{
... ... @@ -323,15 +335,15 @@
323 335 .ortfolio-hardware-bottom-1>li:nth-of-type(1){
324 336 /*width: 460px;*/
325 337 height: 200px;
326   - margin: 190px auto 0 ;
  338 + margin: 90px auto 0 ;
327 339 padding-right: 100px;
328 340 }
329 341 .ortfolio-hardware-bottom-1 li:nth-of-type(2){
330 342 /*padding-left: 100px;*/
331   - background: url("../images/produect_dev1new.png") no-repeat center 0;
332   - /*width: 578px;*/
333   - height: 500px;
334   - background-size: 578px 500px;
  343 + background: url("../images/produect_dev1.jpg") no-repeat center 0;
  344 + height: 375px;
  345 + background-size: 658px 375px;
  346 + /*background-size: 578px 500px;*/
335 347 }
336 348 .ortfolio-hardware-bottom-2 li:nth-of-type(1){
337 349 margin-top: 190px;
... ... @@ -366,6 +378,16 @@
366 378 height: 500px;
367 379 /*margin-left: 180px;*/
368 380 }
  381 +.ortfolio-hardware-bottom-5 li:nth-of-type(1){
  382 + margin-top: 187px;
  383 + height: 200px;
  384 +}
  385 +.ortfolio-hardware-bottom-5 li:nth-of-type(2){
  386 + background: url("../images/produect_dev5.jpg") no-repeat center center;
  387 + /*width: 297px;*/
  388 + height: 500px;
  389 + /*margin-left: 180px;*/
  390 +}
369 391 .ortfolio-hardware-bottom-1{
370 392  
371 393 }
... ...
css/services.css
... ... @@ -303,12 +303,12 @@
303 303 width: 100%;
304 304 }
305 305 .services-foot-div{
306   - height: 362px;
  306 + height: 302px;
307 307 background:rgba(255,255,255,1);
308 308 box-shadow:2px 2px 2px 2px rgba(234,235,235,0.48);
309 309 }
310 310 .services-foot-div div:nth-of-type(1){
311   - height: 219px;
  311 + height: 165px;
312 312 width: 100%;
313 313 }
314 314 .services-footmsgtit{
... ... @@ -326,7 +326,7 @@
326 326 font-size: 16px;
327 327 font-weight: 500;
328 328 color: rgba(0,0,0,0.6);
329   - line-height: 28px;
  329 + line-height: 22px;
330 330 text-align: left;
331 331 padding: 0 20px 0 40px;
332 332 }
... ... @@ -337,10 +337,15 @@
337 337 .services-footIco2{
338 338 background: url("../images/services_footIco2.png") no-repeat;
339 339 /*background-size: ;*/
340   -}.services-footIco3{
  340 +}
  341 +.services-footIco3{
341 342 background: url("../images/services_footIco3.png") no-repeat;
342 343 /*background-size: ;*/
343 344 }
  345 +.services-footIco4{
  346 + background: url("../images/services_footIco4.png") no-repeat;
  347 + /*background-size: ;*/
  348 +}
344 349 /*.ai-success-stories-list-bar{
345 350 position: absolute;
346 351 left: 0;
... ...
images/contact-wrap-cf.png 0 → 100644

137 KB

images/contact-wrap-dy.png 0 → 100644

128 KB

images/contact-wrap-xc.png 0 → 100644

127 KB

images/contact-wrap-yz.png 0 → 100644

131 KB

images/cups-1.png 0 → 100644

174 KB

images/cups-2.png 0 → 100644

162 KB

images/cups-3.png 0 → 100644

192 KB

images/cups-4.png 0 → 100644

173 KB

images/cups-5.png 0 → 100644

162 KB

images/cups-6.png 0 → 100644

135 KB

images/cups-7.png 0 → 100644

159 KB

images/cups-8.png 0 → 100644

161 KB

images/news/point.png 0 → 100644

90 Bytes

images/portfolio-hardware-wrap-5-active.png 0 → 100644

1.94 KB

images/portfolio-hardware-wrap-5.png 0 → 100644

2.02 KB

images/produect_dev1.jpg 0 → 100644

51.7 KB

images/produect_dev5.jpg 0 → 100644

86.2 KB

images/services_footIco1.png

137 KB | W: | H:

81.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/services_footIco2.png 100755 → 100644

176 KB | W: | H:

85.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/services_footIco3.png 100755 → 100644

151 KB | W: | H:

66.1 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/services_footIco4.png 0 → 100644

88.3 KB

index.html
... ... @@ -201,7 +201,29 @@
201 201 </div>
202 202 </div>
203 203 </section>
  204 +<section class="section index-news-section" style="background: #fff;">
  205 + <div class="container">
  206 + <div class="row">
  207 + <div class="col-md-12">
  208 + <div class="section-title">
  209 + <h2>新闻中心</h2>
  210 + </div>
  211 + </div>
  212 + </div>
  213 + <div class="news-bd">
  214 + <div class="focus swiper-container" id="swiper-container-news">
  215 + <div class="swiper-wrapper index_slide_list">
  216 + </div>
  217 + <!-- 如果需要分页器 -->
  218 + <div class="swiper-pagination news-pagination" style=""></div>
  219 + </div>
  220 + <div class="newslist">
  221 + <ul></ul>
  222 + </div>
  223 + </div>
204 224  
  225 + </div>
  226 +</section>
205 227  
206 228  
207 229 <!-- Footer Area -->
... ... @@ -227,6 +249,7 @@
227 249 <!--<script type="text/javascript" src="js/particle-code.js"></script>-->
228 250 <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
229 251 <script type="text/javascript" src="js/swiper.js"></script>
  252 +<!--<script type="text/javascript" src="js/idangero.swiper.js"></script>-->
230 253 <script type="text/javascript" src="js/gmaps.min.js"></script>
231 254 <script type="text/javascript" src="js/nav-footer.js?a=2"></script>
232 255 <script type="text/javascript" src="js/main.js?a=1"></script>
... ...
js/contact.js
... ... @@ -442,3 +442,198 @@ option = {
442 442  
443 443 // 使用刚指定的配置项和数据显示图表。
444 444 myChart.setOption(option);
  445 +
  446 +
  447 +/**
  448 +
  449 + * parallelRoll 左右无缝滚动
  450 +
  451 + * boxName : 最外层盒子类名
  452 +
  453 + * tagName : 滚动标签元素
  454 +
  455 + * time : 滚动间隔时间
  456 +
  457 + * direction : 滚动方向 right-->向右 left-->向左
  458 +
  459 + * visual : 可视数
  460 +
  461 + * prev : 上一张
  462 +
  463 + * next : 下一张
  464 +
  465 + * Date: 19-01-24
  466 +
  467 + * */
  468 +
  469 +(function($){
  470 +
  471 + $.fn.parallelRoll = function(options){
  472 +
  473 + var opts = $.extend({}, $.fn.parallelRoll.defaults, options);
  474 +
  475 + var _this = this;
  476 +
  477 + var l = _this.find(opts.tagName).length;
  478 +
  479 + var autoRollTimer;
  480 +
  481 + var flag = true; // 防止用户快速多次点击上下按钮
  482 +
  483 + var arr = new Array();
  484 +
  485 + /**
  486 +
  487 + * 如果当 (可视个数+滚动个数 >滚动元素个数) 时 为不出现空白停顿 将滚动元素再赋值一次
  488 +
  489 + * 同时赋值以后的滚动元素个数是之前的两倍 2 * l.
  490 +
  491 + * */
  492 +
  493 + if(opts.amount + opts.visual > l){
  494 +
  495 + _this[0].innerHTML += _this[0].innerHTML;
  496 +
  497 + l = 2 * l;
  498 +
  499 + }else{
  500 +
  501 + l = l;
  502 +
  503 + }
  504 +
  505 + var w = $(opts.tagName).outerWidth(true); //计算元素的宽度 包括补白+边框
  506 +
  507 + _this.css({width: (l * w) + 'px'}); // 设置滚动层盒子的宽度
  508 +
  509 + return this.each(function(){
  510 +
  511 + _this.closest('.'+opts.boxName).hover(function(){
  512 +
  513 + clearInterval(autoRollTimer);
  514 +
  515 + },function(){
  516 +
  517 + switch (opts.direction){
  518 +
  519 + case 'left':
  520 +
  521 + autoRollTimer = setInterval(function(){
  522 +
  523 + left();
  524 +
  525 + },opts.time);
  526 +
  527 + break;
  528 +
  529 + case 'right':
  530 +
  531 + autoRollTimer = setInterval(function(){
  532 +
  533 + right();
  534 +
  535 + },opts.time);
  536 +
  537 + break;
  538 +
  539 + default :
  540 +
  541 + alert('参数错误!');
  542 +
  543 + break;
  544 +
  545 + }
  546 +
  547 + }).trigger('mouseleave');
  548 +
  549 + $('.'+opts.prev).on('click',function(){
  550 +
  551 + flag ? left() : "";
  552 +
  553 + });
  554 +
  555 + $('.'+opts.next).on('click',function(){
  556 +
  557 + flag ? right() : "";
  558 +
  559 + });
  560 +
  561 + });
  562 +
  563 + function left(){
  564 +
  565 + flag = false;
  566 +
  567 + _this.animate({marginLeft : -(w*opts.amount)},1000,function(){
  568 +
  569 + _this.find(opts.tagName).slice(0,opts.amount).appendTo(_this);
  570 +
  571 + _this.css({marginLeft:0});
  572 +
  573 + flag = true;
  574 +
  575 + });
  576 +
  577 + };
  578 +
  579 + function right(){
  580 +
  581 + flag = false;
  582 +
  583 + arr = _this.find(opts.tagName).slice(-opts.amount);
  584 +
  585 + for(var i = 0; i<opts.amount; i++){
  586 +
  587 + $(arr[i]).css({marginLeft : -w*(i+1)}).prependTo(_this);
  588 +
  589 + }
  590 +
  591 + _this.animate({marginLeft : w*opts.amount},1000,function(){
  592 +
  593 + _this.find(opts.tagName).removeAttr('style');
  594 +
  595 + _this.css({marginLeft:0});
  596 +
  597 + flag = true;
  598 +
  599 + });
  600 +
  601 + };
  602 +
  603 + };
  604 +
  605 + //插件默认选项
  606 +
  607 + $.fn.parallelRoll.defaults = {
  608 +
  609 + boxName : 'box',
  610 +
  611 + tagName : 'dd',
  612 +
  613 + time : 3000, //
  614 +
  615 + direction : 'left', // 滚动方向
  616 +
  617 + visual : 3 , //可视数
  618 +
  619 + prev : 'prev',
  620 +
  621 + next : 'next',
  622 +
  623 + amount : 1 // 滚动数 默认是1
  624 +
  625 + };
  626 +
  627 +})(jQuery);
  628 +
  629 +
  630 +
  631 +$(document).ready(function(){
  632 +
  633 + $("#roll").parallelRoll({
  634 +
  635 + amount : 1
  636 +
  637 + });
  638 +
  639 +});
... ...
js/main.js
... ... @@ -170,8 +170,6 @@
170 170 });
171 171  
172 172  
173   -
174   -
175 173 // Preloader
176 174 $(window).on('load', function() {
177 175 $('.loader').fadeOut('slow', function(){
... ... @@ -179,22 +177,144 @@
179 177 });
180 178 });
181 179  
182   - var mySwiper = new Swiper ('#swiper-container-index', {
183   - direction: 'horizontal',
184   - loop: true,
185   - speed: 500, //设置轮播时长 可以不设置 会有个默认值
186   - autoplay: true,//可选选项,自动滑动
187   - // 如果需要分页器
188   - pagination: {
189   - el: '.swiper-pagination',
190   - clickable:true
191   - },
192   - autoplay: {
193   - disableOnInteraction: false, //点击后继续轮播(这个很重要)
194   - delay: 3000, //自动轮播的每次的时间 可以不设置 会有个默认值
195   - },
196   - // 如果需要前进后退按钮
197   -
198   -
199   - })
  180 + /*
  181 + @ 首页topbar轮播数据渲染
  182 + */
  183 + var mySwiper = new Swiper ('#swiper-container-index', {
  184 + direction: 'horizontal',
  185 + loop: true,
  186 + speed: 500, //设置轮播时长 可以不设置 会有个默认值
  187 + autoplay: true,//可选选项,自动滑动
  188 + // 如果需要分页器
  189 + pagination: {
  190 + el: '.swiper-pagination',
  191 + clickable:true
  192 + },
  193 + autoplay: {
  194 + disableOnInteraction: false, //点击后继续轮播(这个很重要)
  195 + delay: 3000, //自动轮播的每次的时间 可以不设置 会有个默认值
  196 + },
  197 + // 如果需要前进后退按钮
  198 +
  199 +
  200 + });
  201 +
  202 + /*
  203 + @ chenbiao
  204 + @ 2018-01-23
  205 + @ 首页新闻图片轮播数据渲染
  206 + */
  207 + function indexImgSlide(){
  208 + var indexSlideList = $('.index_slide_list');
  209 + var imgList= [];
  210 + //直接使用ajax访问
  211 + $.ajax({
  212 + type:'get',
  213 + url:'newsdata/swipernewsdata.json',
  214 + dataType:'json',
  215 + success:function(data){
  216 + $.each(data, function(i, obj){
  217 + imgList.push(
  218 + '<div class="swiper-slide red-slide">',
  219 + '<a data-href="'+obj.href+'" class="swiper-slide news_a">',
  220 + '<div class="news_title">',
  221 + '<p title="'+obj.newsTitle+'">' + obj.newsTitle + '</p>',
  222 + '</div>',
  223 + '<img class="banner" src="'+obj.imgUrl+'" alt="" width="100%">',
  224 + '</a>',
  225 + '</div>'
  226 + )
  227 + });
  228 + indexSlideList.html(imgList.join(' '));
  229 + var mySwipernews = new Swiper ('#swiper-container-news', {
  230 + direction: 'horizontal',
  231 + loop: true,
  232 + speed: 500, //设置轮播时长 可以不设置 会有个默认值
  233 + autoplay: true,//可选选项,自动滑动
  234 + // 如果需要分页器
  235 + pagination: {
  236 + el: '.swiper-pagination',
  237 + clickable:true
  238 + },
  239 + autoplay: {
  240 + disableOnInteraction: false, //点击后继续轮播(这个很重要)
  241 + delay: 3000, //自动轮播的每次的时间 可以不设置 会有个默认值
  242 + },
  243 + // 如果需要前进后退按钮
  244 +
200 245  
  246 + });
  247 + }
  248 + });
  249 +
  250 + }
  251 +
  252 + indexImgSlide();
  253 +
  254 +
  255 + /*
  256 + @ chenbiao
  257 + @ 2018-01-23
  258 + @ 首页新闻列表 右侧
  259 + */
  260 + function indexNewsList(){
  261 + var newslist = $('.newslist ul');
  262 + var list= [];
  263 + //直接使用ajax访问
  264 + $.ajax({
  265 + type:'get',
  266 + url:'newsdata/newslistdata.json',
  267 + dataType:'json',
  268 + success:function(data){
  269 + $.each(data, function(i, obj){
  270 + list.push(
  271 + '<li>',
  272 + '<p class="pos-rel red-slide">',
  273 + '<a data-href="'+obj.href+'" title="'+obj.newsTitle+'">' + commonStrandNum.cutString(obj.newsTitle, 26) ,
  274 + '<span class="pos-abs" style="bottom: 0px;right: 2px;color: rgba(0,0,0,0.3)">'+obj.time+'</span>',
  275 + '</a>',
  276 + '</p>',
  277 + '</li>'
  278 + )
  279 + });
  280 + newslist.html(list.join(' '));
  281 + }
  282 + })
  283 + }
  284 +
  285 + indexNewsList();
  286 +
  287 + /*
  288 + @ chenbiao
  289 + @ 2018-01-23
  290 + @ 打开新窗口 新闻
  291 + */
  292 + $(document).on('click','.red-slide a',function () {
  293 + var link = $(this).attr('data-href');
  294 + window.open(link)
  295 + });
  296 +
  297 + /*
  298 + @ chenbiao
  299 + @ 2018-01-23
  300 + @ 切割字符串方法 commonStrandNum.cutString(str, 25)
  301 + */
  302 +
  303 + var commonStrandNum = {
  304 + /*
  305 + @切割字符串
  306 + @str原字符串
  307 + @num字符位数
  308 + */
  309 + cutString: function (str, num) {
  310 + var _str = "";
  311 + if (str.length >= num) {
  312 + var strN = str.substring(0, num);
  313 + strN += "...";
  314 + _str = strN;
  315 + } else {
  316 + _str = str;
  317 + }
  318 + return _str;
  319 + },
  320 + }
201 321 \ No newline at end of file
... ...
newsdata/newslistdata.json 0 → 100644
  1 +[
  2 + {
  3 + "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
  4 + "newsTitle":"【公司要闻】中兴智能交通助力西部大发展,建设甘肃省周边“一带一路”沿线城市的智慧停车",
  5 + "img":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
  6 + "time":"2019-01-06"
  7 + },
  8 + {
  9 + "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
  10 + "newsTitle":"【公司要闻】年度盘点丨2018,中兴智能交通铸就辉煌",
  11 + "img":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
  12 + "time":"2018-12-30"
  13 + },
  14 + {
  15 + "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
  16 + "newsTitle":"【公司要闻】中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
  17 + "img":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
  18 + "time":"2019-01-14"
  19 + },
  20 + {
  21 + "href":"https://mp.weixin.qq.com/s/ilplSVvIBUt0sDtqTgsgbw",
  22 + "newsTitle":"【公司要闻】2018年年底,赤峰智慧停车项目正式上线运营",
  23 + "img":"http://www.zte-its.com/ckfinder/userfiles/images/Snap2(34).jpg",
  24 + "time":"2018-12-26"
  25 + },
  26 + {
  27 + "href":"https://mp.weixin.qq.com/s/j4FJmW-dAMAKK8WBilHSzw",
  28 + "newsTitle":"【公司要闻】物联网下的智慧停车,中兴智能交通应邀出席“2018第三届中国物联网国际峰会”",
  29 + "img":"http://www.zte-its.com/Upload/2018-05/20180529172415999.jpg",
  30 + "time":"2018-05-15"
  31 + },
  32 + {
  33 + "href":"https://mp.weixin.qq.com/s/Q3V4F0PHm0cS7a-zlXx6OA",
  34 + "newsTitle":"【行业动态】贵州机动车停放收费新规5月起试行 小区停车费由业主大会决定",
  35 + "img":"http://www.zte-its.com/Upload/2018-08/20180808173733771.jpg",
  36 + "time":"2018-04-24"
  37 + },
  38 + {
  39 + "href":"https://mp.weixin.qq.com/s/BEyfUDkfrZqLokZxoKp04Q",
  40 + "newsTitle":"【行业动态】广州停车场条例10月起施行 小区停车收费标准先议价",
  41 + "img":"http://www.zte-its.com/Upload/2018-09/20180918095140370.jpg",
  42 + "time":"2018-04-24"
  43 + },
  44 + {
  45 + "href":"https://mp.weixin.qq.com/s/-ltsBzboxdeCzwz4-nOy0Q",
  46 + "newsTitle":"【行业动态】2018雄安新区停车设备设施投资建设高峰论坛暨博览会在雄安新区隆重召开!",
  47 + "img":"https://mmbiz.qpic.cn/mmbiz_jpg/eRs8EuRTNC1tBsAtYFuuFx3SgKrPpkMYib3bP9kBKnxqcwcosVOUc5iaF4hQ9JkHfZib0SWuANXAuzI8u4vzWgDFA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
  48 + "time":"2018-04-20"
  49 + },
  50 + {
  51 + "href":"https://mp.weixin.qq.com/s/3tWOAvnXl5T78TzBPgWszA",
  52 + "newsTitle":"【行业动态】滴滴发布企业公民报告:让城市交通更智慧 运行更高效",
  53 + "img":"https://mmbiz.qpic.cn/mmbiz_jpg/uWQ5Iz1kD2bHvLt6DEdN4ib00PeTsmxiaTye2BHMuxXSD7Z51HnBicxNc53FeZceD2ZiaJ4Eq4ft9cHY9Uib1CXNzIA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
  54 + "time":"2018-04-20"
  55 + }, {
  56 + "href":"https://mp.weixin.qq.com/s/ZrDwirjt0JTntmcCI5L4Ag",
  57 + "newsTitle":"【行业动态】昆明停车管理新规 力图破解“圈地收费”乱象",
  58 + "img":"http://www.zte-its.com/Upload/2018-05/20180529173902781.jpg",
  59 + "time":"2018-04-20"
  60 + }
  61 +
  62 + ]
... ...
newsdata/swipernewsdata.json 0 → 100644
  1 +[
  2 + {
  3 + "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
  4 + "newsTitle":"中兴智能交通助力西部大发展,建设甘肃省周边“一带一路”沿线城市的智慧停车",
  5 + "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
  6 + "time":"2019-01-06"
  7 + },
  8 + {
  9 + "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
  10 + "newsTitle":"年度盘点丨2018,中兴智能交通铸就辉煌",
  11 + "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
  12 + "time":"2018-12-30"
  13 + },
  14 + {
  15 + "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
  16 + "newsTitle":"中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
  17 + "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
  18 + "time":"2019-01-14"
  19 + }
  20 +]
... ...
portfolio.html
... ... @@ -230,22 +230,26 @@
230 230 <div class="row">
231 231 <div class="section-title-name">硬件产品</div>
232 232 <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap">
233   - <li class="text-center col-md-3 col-xs-3 active">
  233 + <li class="text-center active">
234 234 封闭式设备
235 235 <div class="ai-success-stories-list-bar"></div>
236 236 </li>
237   - <li class="text-center col-md-3 col-xs-3">
  237 + <li class="text-center">
238 238 开放式设备
239 239 <div class="ai-success-stories-list-bar displaynone"></div>
240 240 </li>
241   - <li class="text-center col-md-3 col-xs-3">
  241 + <li class="text-center">
242 242 场内引导设备
243 243 <div class="ai-success-stories-list-bar displaynone"></div>
244 244 </li>
245   - <li class="text-center col-md-3 col-xs-3">
  245 + <li class="text-center ">
246 246 停车诱导设备
247 247 <div class="ai-success-stories-list-bar displaynone"></div>
248 248 </li>
  249 + <li class="text-center ">
  250 + 无人值守一体机
  251 + <div class="ai-success-stories-list-bar displaynone"></div>
  252 + </li>
249 253  
250 254 </ul>
251 255 </div>
... ... @@ -334,7 +338,7 @@
334 338 <ul class="row ortfolio-hardware-bottom-4">
335 339 <li class="text-center col-md-6">
336 340 <div class="ortfolio-hardware-bottom-title">
337   - 城市道路三级停车诱导系统
  341 + 城市道路停车诱导系统
338 342 </div>
339 343 <div class="ortfolio-soft-bottom-des"><span></span>
340 344 LED高亮、小间距全点阵全彩诱导屏,像素间距10mm,像素密度10000点/㎡。
... ... @@ -364,6 +368,32 @@
364 368 </div>
365 369 </section>
366 370 </li>
  371 + <li class="displaynone">
  372 + <section>
  373 + <div class="container">
  374 + <ul class="row ortfolio-hardware-bottom-5">
  375 + <li class="text-center col-md-6">
  376 + <div class="ortfolio-hardware-bottom-title">
  377 + 无人值守一体机
  378 + </div>
  379 + <div class="ortfolio-soft-bottom-des"><span></span>
  380 + 联网智能监控相机,实时监控运行状况 高清屏幕,实时展示收费信息
  381 + </div>
  382 + <div class="ortfolio-soft-bottom-des"><span></span>
  383 + 入口取票,无牌车精准计时计费 自助语音对讲,远程/中心协助
  384 + </div>
  385 +
  386 +
  387 +
  388 + </li>
  389 + <li class="text-center col-md-6">
  390 +
  391 + </li>
  392 +
  393 + </ul>
  394 + </div>
  395 + </section>
  396 + </li>
367 397 </ul>
368 398 <!--硬件平台 end-->
369 399  
... ...
services.html
... ... @@ -229,26 +229,33 @@
229 229 <div class="text-center services-foottit">全面智慧停车解决方案</div>
230 230 <div class="container">
231 231 <div class="row ">
232   - <div class="text-center col-md-4 col-sm-4">
  232 + <div class="text-center col-md-3 col-sm-3">
233 233 <div class="services-foot-div">
234 234 <div class="services-footIco1"></div>
235 235 <div class="services-footmsgtit">硬件互联</div>
236 236 <div class="services-footmsg">一体化车牌识别、地磁感应、道闸、岗亭收费系统</div>
237 237 </div>
238 238 </div>
239   - <div class="text-center col-md-4 col-sm-4">
  239 + <div class="text-center col-md-3 col-sm-3">
240 240 <div class="services-foot-div">
241 241 <div class="services-footIco2"></div>
242 242 <div class="services-footmsgtit">云平台</div>
243 243 <div class="services-footmsg">企业云平台、政府云平台、移动端APP全面停车运营管理</div>
244 244 </div>
245 245 </div>
246   - <div class="text-center col-md-4 col-sm-4">
  246 + <div class="text-center col-md-3 col-sm-3">
247 247 <div class="services-foot-div">
248 248 <div class="services-footIco3"></div>
249 249 <div class="services-footmsgtit">移动支付</div>
250   - <div class="services-footmsg">提供会员优惠、支付宝、微信、无感等多种便捷优惠缴费方式</div>
251   -
  250 + <div class="services-footmsg">提供会员优惠、支付宝、微信、无感等多种便捷缴费方式</div>
  251 + </div>
  252 + </div>
  253 + <div class="text-center col-md-3 col-sm-3">
  254 + <div class="services-foot-div">
  255 + <div class="services-footIco4"></div>
  256 + <div class="services-footmsgtit">无人值守</div>
  257 + <div class="services-footmsg">充分利用“物联网+互联网+云计算+移动支付+AI”技术
  258 + </div>
252 259 </div>
253 260 </div>
254 261 </div>
... ...
style.css
... ... @@ -2538,3 +2538,118 @@ a:hover{
2538 2538 .slicknav_menu .slicknav_btn{
2539 2539 background: #49A4FE !important;
2540 2540 }
  2541 +
  2542 +
  2543 +/*news 新闻中心*/
  2544 +.index-news-section .news-bd{
  2545 + width: 100%;
  2546 + min-width: 1200px;
  2547 + overflow: hidden;
  2548 +}
  2549 +.index-news-section .focus {
  2550 + width: 476px;
  2551 + height: 289px;
  2552 + float: left;
  2553 + position: relative;
  2554 +}
  2555 +.index-news-section .newslist {
  2556 + width: 715px;
  2557 + float: left;
  2558 + margin-bottom: 10px;
  2559 +}
  2560 +.index-news-section .newslist ul {
  2561 + padding: 15px 0;
  2562 + overflow: hidden;
  2563 + list-style: initial;
  2564 + color: #797979;
  2565 +}
  2566 +.index-news-section .newslist li {
  2567 + width: 286px;
  2568 + height: 45px;
  2569 + line-height: 22px;
  2570 + float: left;
  2571 + margin-left: 70px;
  2572 + list-style: none;
  2573 +}
  2574 +.index-news-section .newslist li {
  2575 + margin-bottom: 10px;
  2576 + background-image: url(images/news/point.png);
  2577 + background-repeat: no-repeat;
  2578 + background-position: 5px 7px;
  2579 +}
  2580 +.index-news-section .newslist li p {
  2581 + padding-left: 10px;
  2582 + margin-left: 8px;
  2583 + height: 44px;
  2584 +}
  2585 +.newslist li a{
  2586 + color: rgba(0,0,0,.6);
  2587 + display: block;
  2588 +}
  2589 +.pos-rel{
  2590 + position: relative;
  2591 +}
  2592 +.pos-abs{
  2593 + position: absolute;
  2594 +}
  2595 +/*轮播 */
  2596 +.news_a {
  2597 + position: relative;
  2598 + overflow: hidden;
  2599 + display: block;
  2600 + width: 100%;
  2601 + height: 272px;
  2602 +}
  2603 +.news_title {
  2604 + display: block;
  2605 + position: absolute;
  2606 + bottom: 0;
  2607 + padding: 10px;
  2608 + width: 100%;
  2609 + background: rgba(0,0,0,0.5);
  2610 + color: #fff;
  2611 + font-size: 16px;
  2612 + border-radius: 0 0 5px 5px;
  2613 + text-align: left;
  2614 +}
  2615 +.news_title p {
  2616 + margin: 0;
  2617 + width: 65%;
  2618 + text-overflow: ellipsis;
  2619 + overflow: hidden;
  2620 + white-space: nowrap;
  2621 +}
  2622 +.news_a img {
  2623 + width: 100%;
  2624 + height: 272px;
  2625 +}
  2626 +.pagination{
  2627 + position: absolute;
  2628 + z-index: 20;
  2629 + right: 10px;
  2630 + bottom: 10px;
  2631 + margin: 0;
  2632 + height: 20px;
  2633 +}
  2634 +.news-pagination{
  2635 + right: 0px !important;
  2636 + bottom: 30px !important;
  2637 + width: 120px !important;
  2638 + margin-left: 340px;
  2639 +}
  2640 +.news-pagination .swiper-pagination-bullet{
  2641 + width:28px;
  2642 + height:4px;
  2643 + background:rgba(255,255,255,1);
  2644 + opacity: 0.5;
  2645 + border-radius:0;
  2646 +}
  2647 +.news-pagination .swiper-pagination-bullet-active{
  2648 + background:rgba(255,255,255,1);
  2649 + opacity: 1 !important;
  2650 +}
  2651 +.red-slide{
  2652 + cursor: pointer;
  2653 +}
  2654 +
  2655 +
... ...