BJ_web_developers / webportal

Commit 2459da425e014e9c26973ada5c8a060b02a7f190

Authored by Andy
1 parent d6718231

add service swiper

Inline Side-by-side
Showing 3 changed files with 232 additions and 441 deletions
css/services.css
  View file @2459da4
... ... @@ -45,7 +45,7 @@
45 45 margin: 0 auto;
46 46 width: 100%;
47 47 }
48   -.part{ height: 635px; position: relative; overflow: hidden; width: 1000px; padding: 0;}
  48 +.part{ height: 535px; position: relative; overflow: hidden; width: 1000px; padding: 0;}
49 49 .part .con{ width: 100%; }
50 50 .part .bd, .part .bd ul {
51 51 width: 100%;
... ... @@ -55,30 +55,10 @@
55 55 width: 100%;
56 56 float: left;
57 57 }
58   -
59   -.part4 .phonebg{
60   - background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
61   -}
62   -.part .hd{width: 500px!important; margin-top: 100px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
  58 +.part3 .hd,.part5 .hd{width: 500px!important; margin-top: 50px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
63 59 .part .hd h2{width: 110px !important; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;}
64 60 .part .hd h2.active-nav{ border-bottom: solid 3px #3F9FFE;color:#3F9FFE; }
65   -.part .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -4px 0 no-repeat; display: inline-block; }
66   -.part .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -544px 0 no-repeat;}
67   -.part .hd h2 span{display: block;}
68   -.part .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -65px 0 no-repeat; }
69   -.part .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -605px 0 no-repeat;}
70   -.part .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
71   -.part .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
72 61 .part .bd{width: 100%;float: left;}
73   -.part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
74   -.part4 .bd .txt {float: left; width: 416px; margin-left: 0px;}
75   -.part4 .hd {
76   - width: 300px!important;
77   - margin: 100px auto 0;
78   - overflow: hidden;
79   - margin-left: 0px;
80   - background: #f7f7f7;
81   -}
82 62 .part .line {
83 63 width: 90%;
84 64 /* margin: 0 auto; */
... ... @@ -97,14 +77,6 @@
97 77 color: #999999;
98 78 font-weight: normal;
99 79 }
100   -.part .bd .img {
101   - width: 433.6px;
102   - height: 395.2px;
103   - z-index: 10000000;
104   - margin: -100px 0 0 0%;
105   - float: left;
106   - /*overflow: hidden;*/
107   -}
108 80 .part .bd .img img {
109 81 /*border: solid 1px #b8b8b8;*/
110 82 display: block;
... ... @@ -112,248 +84,71 @@
112 84 width: 100%;
113 85 height: 100%;
114 86 }
115   -
116   -
117   -
118   -
119   -
120   -
121   -
122   -
123   -
124   -
125   -
126   -
127   -
128   -
129   -
130   -
131   -
132   -
133   -
134   -
135   -
136   -
137   -
138   -/*1 tab*/
139   -.services-wrap-left-1{
140   - background: url("../images/services_saasIco1.png") no-repeat center center;
141   - background-size:542px 494px;
142   - height: 494px;
143   -}
144   -.services-wrap-right-1{
145   - /*width: 100%;*/
146   - height: 400px;
147   - margin: 70px auto 0;
148   - padding-left: 100px;
149   -}
150   -.services-wrap{
151   - padding: 70px 0;
152   -}
153   -/*1----tab 右侧 切换部分 sta*/
154   -.services-soft-wrap{
155   - height: 168px;
156   - /*width: 100%;*/
157   - /*width: 543px;*/
158   - border-bottom: 2px solid rgba(228,229,229,1);
159   - display: flex;
160   -}
161   -.services-soft-wrap li {
162   - flex: 1;
163   - color: rgba(6,14,19,.7);
164   - font-size:20px;
165   - cursor: pointer;
166   - height: 168px;
167   - position: relative;
168   - /*width: 133px;*/
169   -}
170   -.services-soft-wrap li:nth-of-type(1) {
171   - padding-top: 114px;
172   - background: url(../images/service_bgsmallIco.png) no-repeat;
173   - background-position: -500px 0;
174   -}
175   -.services-soft-wrap li:nth-of-type(1).active {
176   - color: #3F9FFE;
177   - padding-bottom: 22px;
178   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
179   - background: url(../images/services_titico1_active.png) no-repeat center 0;
180   -}
181   -.services-soft-wrap li:nth-of-type(2) {
182   - padding-top: 114px;
183   - background: url(../images/services_titico2.png) no-repeat center 0;
184   - margin-right: 72px;
185   - margin-left: 72px;
186   -}
187   -.services-soft-wrap li:nth-of-type(2).active {
188   - color: #3F9FFE;
189   - padding-bottom: 22px;
190   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
191   - background: url(../images/services_titico2_active.png) no-repeat center 0;
192   -}
193   -.services-soft-wrap li:nth-of-type(3) {
194   - padding-top: 114px;
195   - background: url(../images/services_titico3.png) no-repeat center 0;
  87 +.part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
  88 +.part4 .bd .txt {float: left; width: 500px; margin-left: 0px;}
  89 +.part3 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -4px 0 no-repeat; display: inline-block; }
  90 +.part3 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -544px 0 no-repeat;}
  91 +.part3 .hd h2 span{display: block;}
  92 +.part3 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -65px 0 no-repeat; }
  93 +.part3 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -605px 0 no-repeat;}
  94 +.part3 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
  95 +.part3 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
  96 +.part3 .bd .img {
  97 + width: 433.6px;
  98 + height: 395.2px;
  99 + z-index: 1000;
  100 + margin: -50px 0 0 0%;
  101 + float: left;
  102 + /*overflow: hidden;*/
196 103 }
197   -.services-soft-wrap li:nth-of-type(3).active {
198   - color: #3F9FFE;
199   - padding-bottom: 22px;
200   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
201   - background: url(../images/services_titico3_active.png) no-repeat center 0;
  104 +/*part4==============*/
  105 +.part4 .phonebg{
  106 + background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
202 107 }
203   -/*1------tab 右侧 cont*/
204   -.services-section-wrap,.services-section-user,.services-section-park{
205   - height: 100px;
206   - margin-top: 58px;
  108 +.part4 .hd {
  109 + margin-top: 50px;
  110 + z-index: 1000;
  111 + width: 500px!important;
  112 + overflow: hidden;
  113 + margin-left: 0px;
  114 + background: #f7f7f7;
207 115 }
208   -.services-soft-bottom-title{
209   - height:30px;
210   - font-size:30px;
211   - font-weight:500;
212   - color:rgba(0,0,0,1);
213   - margin-bottom: 22px;
214   - text-align: left;
  116 +.part4 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -183px 0 no-repeat; display: inline-block; }
  117 +.part4 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -723px 0 no-repeat;}
  118 +.part4 .hd h2 span{display: block;}
  119 +.part4 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -244px 0 no-repeat; }
  120 +.part4 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -784px 0 no-repeat;}
  121 +.part4 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -305px 0 no-repeat; }
  122 +.part4 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -845px 0 no-repeat;}
  123 +.part4 .bd .img {
  124 + width: 433.6px;
  125 + height: 395.2px;
  126 + z-index: 1000;
  127 + margin: -50px 0 0 30px;
  128 + float: left;
  129 + /*overflow: hidden;*/
215 130 }
216   -.services-soft-bottom-des{
217   - text-align: left;
218   - height:44px;
219   - line-height: 22px;
220   - font-size:16px;
221   - font-weight:400;
222   - color:rgba(0,0,0,0.7);
  131 +/*part5==============*/
  132 +.part5 .phonebg{
  133 + background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
223 134 }
224 135  
225   -/*----2------ tab sta*/
226   -/*2 tab*/
227   -.services-wrap-left-2{
228   - /*width: 543px;*/
229   - /*width: 100%;*/
230   - height: 400px;
231   - margin: 70px auto 0;
232   - padding-right: 100px;
233   -
234   -}
235   -.services-wrap-right-2{
236   - background: url("../images/services_parkIco1.png") no-repeat;
237   - background-size: 542px 494px;
238   - /*width: 558px;*/
239   - /*width: 100%;*/
240   - height: 494px;
241   - /*margin-left: 10px;*/
242   -}
243   -/*-------2---*/
244   -.services-park-wrap{
245   - display: flex;
246   - height: 168px;
247   - /*width: 543px;*/
248   - /*width: 100%;*/
249   - border-bottom: 2px solid rgba(228,229,229,1);;
250   -}
251   -.services-park-wrap li {
252   - flex: 1;
253   - color: rgba(6,14,19,.8);
254   - font-size:20px;
255   - cursor: pointer;
256   - height: 168px;
257   - position: relative;
258   -}
259   -.services-park-wrap li:nth-of-type(1) {
260   - padding-top: 114px;
261   - background: url(../images/services_titico4.png) no-repeat center 0;
262   -}
263   -.services-park-wrap li:nth-of-type(1).active {
264   - color: #3F9FFE;
265   - padding-bottom: 22px;
266   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
267   - background: url(../images/services_titico4_active.png) no-repeat center 0;
268   -}
269   -.services-park-wrap li:nth-of-type(2) {
270   - padding-top: 114px;
271   - background: url(../images/services_titico5.png) no-repeat center 0;
272   - margin-right: 72px;
273   - margin-left: 72px;
274   -}
275   -.services-park-wrap li:nth-of-type(2).active {
276   - color: #3F9FFE;
277   - padding-bottom: 22px;
278   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
279   - background: url(../images/services_titico5_active.png) no-repeat center 0;
280   -}
281   -.services-park-wrap li:nth-of-type(3) {
282   - padding-top: 114px;
283   - background: url(../images/services_titico6.png) no-repeat center 0;
284   -}
285   -.services-park-wrap li:nth-of-type(3).active {
286   - color: #3F9FFE;
287   - padding-bottom: 22px;
288   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
289   - background: url(../images/services_titico6_active.png) no-repeat center 0;
  136 +.part5 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -363px 0 no-repeat; display: inline-block; }
  137 +.part5 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -903px 0 no-repeat;}
  138 +.part5 .hd h2 span{display: block;}
  139 +.part5 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -424px 0 no-repeat; }
  140 +.part5 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -964px 0 no-repeat;}
  141 +.part5 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -485px 0 no-repeat; }
  142 +.part5 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -1025px 0 no-repeat;}
  143 +.part5 .bd .img {
  144 + width: 433.6px;
  145 + height: 395.2px;
  146 + z-index: 1000;
  147 + margin: -50px 0 0 0%;
  148 + float: left;
  149 + /*overflow: hidden;*/
290 150 }
291 151  
292   -/*----3------ tab sta*/
293   -/*---3 tab*/
294   -.services-wrap-left-3{
295   - background: url("../images/services_userIco1.png") no-repeat;
296   - background-size: 542px 494px;
297   - /*width: 568px;*/
298   - /*width: 100%;*/
299   - height: 494px;
300   -}
301   -.services-wrap-right-3{
302   - /*width: 543px;*/
303   - /*width: 100%;*/
304   - height: 400px;
305   - margin: 70px auto 0;
306   - padding-left: 100px;
307   - /*margin-left: 20px;*/
308   -}
309   -/*-------3---*/
310   -.services-user-wrap{
311   - display: flex;
312   - height: 168px;
313   - /*width: 543px;*/
314   - /*width: 100%;*/
315   - border-bottom: 2px solid rgba(228,229,229,1);;
316   -}
317   -.services-user-wrap li {
318   - flex: 1;
319   - color: rgba(6,14,19,.8);
320   - font-size:20px;
321   - cursor: pointer;
322   - height: 168px;
323   - position: relative;
324   -}
325   -.services-user-wrap li:nth-of-type(1) {
326   - padding-top: 114px;
327   - background: url(../images/services_titico7.png) no-repeat center 0;
328   - margin-right: 72px;
329   -}
330   -.services-user-wrap li:nth-of-type(1).active {
331   - color: #3F9FFE;
332   - padding-bottom: 22px;
333   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
334   - background: url(../images/services_titico7_active.png) no-repeat center 0;
335   -}
336   -.services-user-wrap li:nth-of-type(2) {
337   - padding-top: 114px;
338   - background: url(../images/services_titico8.png) no-repeat center 0;
339   - margin-right: 72px;
340   -}
341   -.services-user-wrap li:nth-of-type(2).active {
342   - color: #3F9FFE;
343   - padding-bottom: 22px;
344   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
345   - background: url(../images/services_titico8_active.png) no-repeat center 0;
346   -}
347   -.services-user-wrap li:nth-of-type(3) {
348   - padding-top: 114px;
349   - background: url(../images/services_titico9.png) no-repeat center 0;
350   -}
351   -.services-user-wrap li:nth-of-type(3).active {
352   - color: #3F9FFE;
353   - padding-bottom: 22px;
354   - /*border-bottom: 2px solid rgba(63,159,254,1);*/
355   - background: url(../images/services_titico9_active.png) no-repeat center 0;
356   -}
357 152 /*footer sta*/
358 153 .services-foottit{
359 154 height:38px;
... ...
js/services.js
  View file @2459da4
1 1  
2 2 //集团 tab 切换
3   -var mySwiper2 = new Swiper('#swiper-tab',{
  3 +var mySwiper2 = new Swiper('#swiper-tab3',{
4 4 watchSlidesProgress : true,
5 5 watchSlidesVisibility : true,
6 6 slidesPerView : 3,//将tabs块儿平均分成几份
... ... @@ -12,19 +12,18 @@ var mySwiper2 = new Swiper('#swiper-tab',{
12 12  
13 13  
14 14  
15   -})
16   -var mySwiper3 = new Swiper('#swiper-con',{
  15 +});
  16 +var mySwiper3 = new Swiper('#swiper-con3',{
17 17  
18 18 onSlideChangeStart: function(){
19   - updateNavPosition()
  19 + updateNavPosition3()
20 20 }
21 21  
22   -})
23   -
24   -function updateNavPosition(){
  22 +});
  23 +function updateNavPosition3(){
25 24 //默认哪一块是被选中的状态
26   - $('#swiper-tab .active-nav').removeClass('active-nav')
27   - var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
  25 + $('#swiper-tab3 .active-nav').removeClass('active-nav')
  26 + var activeNav = $('#swiper-tab3 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
28 27  
29 28  
30 29 if (!activeNav.hasClass('swiper-slide-visible')) {
... ... @@ -39,35 +38,81 @@ function updateNavPosition(){
39 38 mySwiper2.slideTo(activeNav.index())
40 39 }
41 40 }
42   -}
  41 +};
  42 +
  43 +//车场 tab 切换
  44 +var mySwiper4 = new Swiper('#swiper-tab4',{
  45 + watchSlidesProgress : true,
  46 + watchSlidesVisibility : true,
  47 + slidesPerView : 3,//将tabs块儿平均分成几份
  48 +
  49 + /*点击了上面的滑块时，下面的内容区也跟着变化 若去掉后，拖动下面上面可继续移动*/
  50 + onTap: function(){
  51 + mySwiper5.slideTo( mySwiper4.clickedIndex)
  52 + }
  53 +
43 54  
44   -$('#services-soft-wrap li').on('click',function () {
45   - var _index = $(this).index();
46 55  
47   - $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)')
48   - $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
49   - $('#services-soft-wrap li').children('div').addClass('displaynone');
50   - $('#services-soft-wrap li').eq(_index).children('div').removeClass('displaynone');
51   - // $('.ai-success-stories-list-bar').css('left',100*_index);
52   - $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
53 56 });
  57 +var mySwiper5 = new Swiper('#swiper-con4',{
  58 +
  59 + onSlideChangeStart: function(){
  60 + updateNavPosition4()
  61 + }
54 62  
55   -//车场 tab 切换
56   -$('#services-park-wrap li').on('click',function () {
57   - var _index = $(this).index();
58   - $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)');
59   - $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
60   - $('#services-park-wrap li').children('div').addClass('displaynone');
61   - $('#services-park-wrap li').eq(_index).children('div').removeClass('displaynone');
62   - $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
63 63 });
  64 +function updateNavPosition4(){
  65 +//默认哪一块是被选中的状态
  66 + $('#swiper-tab4 .active-nav').removeClass('active-nav')
  67 + var activeNav = $('#swiper-tab4 .swiper-slide').eq(mySwiper5.activeIndex).addClass('active-nav');
  68 +
  69 +
  70 + if (!activeNav.hasClass('swiper-slide-visible')) {
  71 + if (activeNav.index()>mySwiper4.activeIndex) {
  72 + var thumbsPerNav = Math.floor(mySwiper4.width/activeNav.width())-1
  73 + mySwiper4.slideTo(activeNav.index()-thumbsPerNav)
  74 + }
  75 + else {
  76 + mySwiper4.slideTo(activeNav.index())
  77 + }
  78 + }
  79 +};
  80 +
64 81  
65 82 //车主 tab 切换
66   -$('#services-user-wrap li').on('click',function () {
67   - var _index = $(this).index();
68   - $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)');
69   - $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
70   - $('#services-user-wrap li').children('div').addClass('displaynone');
71   - $('#services-user-wrap li').eq(_index).children('div').removeClass('displaynone');
72   - $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
  83 +var mySwiper6 = new Swiper('#swiper-tab5',{
  84 + watchSlidesProgress : true,
  85 + watchSlidesVisibility : true,
  86 + slidesPerView : 3,//将tabs块儿平均分成几份
  87 +
  88 + /*点击了上面的滑块时，下面的内容区也跟着变化 若去掉后，拖动下面上面可继续移动*/
  89 + onTap: function(){
  90 + mySwiper7.slideTo( mySwiper6.clickedIndex)
  91 + }
  92 +
  93 +
  94 +
  95 +});
  96 +var mySwiper7 = new Swiper('#swiper-con5',{
  97 +
  98 + onSlideChangeStart: function(){
  99 + updateNavPosition5()
  100 + }
  101 +
73 102 });
  103 +function updateNavPosition5(){
  104 +//默认哪一块是被选中的状态
  105 + $('#swiper-tab5 .active-nav').removeClass('active-nav')
  106 + var activeNav = $('#swiper-tab5 .swiper-slide').eq(mySwiper7.activeIndex).addClass('active-nav');
  107 +
  108 +
  109 + if (!activeNav.hasClass('swiper-slide-visible')) {
  110 + if (activeNav.index()>mySwiper6.activeIndex) {
  111 + var thumbsPerNav = Math.floor(mySwiper6.width/activeNav.width())-1
  112 + mySwiper6.slideTo(activeNav.index()-thumbsPerNav)
  113 + }
  114 + else {
  115 + mySwiper6.slideTo(activeNav.index())
  116 + }
  117 + }
  118 +};
... ...
services.html
  View file @2459da4
... ... @@ -70,45 +70,9 @@
70 70 <!--banner end-->
71 71 <div class="services-content">
72 72 <!--集团 sta-->
73   - <!--<section class="cd-hero">
74   - <div class="cd-slider-nav">
75   - <nav>
76   - <span class="cd-marker item-3"></span>
77   - <ul>
78   - <li class=""><a href="#0">1</a></li>
79   - <li class=""><a href="#0">2</a></li>
80   - <li class="selected"><a href="#0">3</a></li>
81   -
82   -
83   - </ul>
84   - </nav>
85   - </div>
86   -
87   - <ul class="cd-hero-slider">
88   - <li class="move-left">
89   - <div class="cd-full-width">
90   - 23
91   - </div>
92   - </li>
93   - <li class="move-left">
94   - <div class="cd-half-width">
95   - <p>23</p>
96   - </div>
97   - <div class="cd-half-width cd-img-container">
98   - </div>
99   - </li>
100   - <li class="selected from-right">
101   - <div class="cd-half-width cd-img-container">
102   - 3r3
103   - </div>
104   - <div class="cd-half-width">
105   - </div>
106   - </li>
107   - </ul>
108   - </section>-->
109 73 <div class="container part part3">
110 74 <div class="con">
111   - <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab">
  75 + <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab3">
112 76 <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
113 77 <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
114 78 <span class="icon"></span>
... ... @@ -125,7 +89,7 @@
125 89 <div class="line"></div>
126 90 </div>
127 91 </div>
128   - <div class="swiper-container swiper-container-horizontal bd" id="swiper-con">
  92 + <div class="swiper-container swiper-container-horizontal bd" id="swiper-con3">
129 93 <ul class='swiper-wrapper' style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
130 94 <li class="swiper-slide swiper-slide-active" style="display:block">
131 95 <div class="txt">
... ... @@ -156,121 +120,108 @@
156 120 </div>
157 121 <!--集团 end-->
158 122 <!--车场 sta-->
159   - <section class="section">
160 123 <div class="services_bgF7F8FA">
161   - <div class="container">
162   - <ul class="row services-wrap">
163   - <li class="text-center col-md-6 services-wrap-left-2" >
164   - <ul class="services-park-wrap" id="services-park-wrap">
165   - <li class="text-center float-left active">
166   - 车场服务
167   - <div class="ai-success-stories-list-bar"></div>
168   - </li>
169   - <li class="text-center float-left">
170   - 云平台
171   - <div class="ai-success-stories-list-bar displaynone"></div>
172   - </li>
173   - <li class="text-center float-left">
174   - 政府云
175   - <div class="ai-success-stories-list-bar displaynone"></div>
176   - </li>
177   - </ul>
178   - <ul class="services-section-park" id="services-section-park">
179   - <li class="">
180   - <div class="services-soft-bottom-title">
181   - 一站式车场服务平台
182   - </div>
183   - <div class="services-soft-bottom-des">
184   - 运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位
185   - 引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制，
186   - 推动智慧停车商业运营新生态
187   - </div>
188   - </li>
189   - <li class="displaynone">
190   - <div class="services-soft-bottom-title">
191   - 企业云平台
192   - </div>
193   - <div class="services-soft-bottom-des">
194   - 为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产
195   - 管理、人员排班，车位共享，灵活费率管理等多样化运营服务
196   - </div>
197   - </li>
198   - <li class="displaynone">
199   - <div class="services-soft-bottom-title">
200   - 政府云平台
201   - </div>
202   - <div class="services-soft-bottom-des">
203   - 对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，
204   - 搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解
205   - 拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿
206   - 色经济发展
207   - </div>
208   - </li>
209   - </ul>
210   - </li>
211   - <li class="text-center col-md-6 services-wrap-right-2" id="services_parkIco">
  124 + <div class="container part part4">
  125 + <div class="con">
  126 + <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab4">
  127 + <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
  128 + <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
  129 + <span class="icon"></span>
  130 + <span class="txt">车场服务</span>
  131 + </h2>
  132 + <h2 class="icon2 swiper-slide swiper-slide-visible swiper-slide-next">
  133 + <span class="icon"></span>
  134 + <span class="txt">云平台</span>
  135 + </h2>
  136 + <h2 class="icon3 swiper-slide">
  137 + <span class="icon"></span>
  138 + <span class="txt">政府云</span>
  139 + </h2>
212 140  
  141 + <div class="line"></div>
  142 + </div>
  143 + </div>
  144 + <div class="swiper-container swiper-container-horizontal bd" id="swiper-con4">
  145 + <ul class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
  146 + <li class="swiper-slide swiper-slide-active" style="display:block">
  147 + <div class="txt">
  148 + <p class="p1">一站式车场服务平台</p>
  149 + <p class="p2">运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制，推动智慧停车商业运营新生态
  150 + </p>
  151 + </div>
  152 + <div class="img"><img src="images/services_parkIco1.png" alt=""></div>
  153 + </li>
  154 + <li class="swiper-slide swiper-slide-next">
  155 + <div class="txt">
  156 + <p class="p1">企业云平台</p>
  157 + <p class="p2">为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产管理、人员排班，车位共享，灵活费率管理等多样化运营服务</p>
  158 + </div>
  159 + <div class="img"><img src="images/services_parkIco2.png" alt=""></div>
  160 + </li>
  161 + <li class="swiper-slide">
  162 + <div class="txt">
  163 + <p class="p1">政府云平台</p>
  164 + <p class="p2">对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿色经济发展</p>
  165 + </div>
  166 + <div class="img"><img src="images/services_parkIco3.png" alt="" ></div>
213 167 </li>
  168 +
214 169 </ul>
  170 +
215 171 </div>
  172 +
216 173 </div>
217   - </section>
  174 + <div class="phonebg"></div>
  175 + </div>
  176 + </div>
218 177 <!--车场 end-->
219 178 <!--车主 sta-->
220   - <section class="section">
221   - <div class="container">
222   - <ul class="row services-wrap">
223   - <li class="text-center col-md-6 services-wrap-left-3" id="services_userIco"></li>
224   - <li class="text-center col-md-6 services-wrap-right-3">
225   - <ul class="services-user-wrap" id="services-user-wrap">
226   - <li class="text-center float-left active">
227   - 车主服务
228   - <div class="ai-success-stories-list-bar"></div>
229   - </li>
230   - <li class="text-center float-left">
231   - 移动APP
232   - <div class="ai-success-stories-list-bar displaynone"></div>
233   - </li>
234   - <li class="text-center float-left">
235   - 会员服务
236   - <div class="ai-success-stories-list-bar displaynone"></div>
237   - </li>
238   - </ul>
239   - <ul class="services-section-user" id="services-section-user">
240   - <li class="">
241   - <div class="services-soft-bottom-title">
242   - 车主服务平台
243   - </div>
244   - <div class="services-soft-bottom-des">
245   - 移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费，
246   - 订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车
247   - 难题，方便车主快捷出行
248   - </div>
249   - </li>
250   - <li class="displaynone">
251   - <div class="services-soft-bottom-title">
252   - 移动端停车服务
253   - </div>
254   - <div class="services-soft-bottom-des">
255   - 提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往）
256   - 车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新）
257   - 电子支付（支持常用电子支付，更有抵扣优惠券）
258   - </div>
259   - </li>
260   - <li class="displaynone">
261   - <div class="services-soft-bottom-title">
262   - 会员和车主服务
263   - </div>
264   - <div class="services-soft-bottom-des">
265   - 成为任你停会员，尊贵会员身份停车优惠。
266   - 为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务
267   - </div>
268   - </li>
269   - </ul>
270   - </li>
271   - </ul>
  179 + <div class="container part part5">
  180 + <div class="con">
  181 + <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab5">
  182 + <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
  183 + <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
  184 + <span class="icon"></span>
  185 + <span class="txt">车主服务</span>
  186 + </h2>
  187 + <h2 class="icon2 swiper-slide swiper-slide-visible swiper-slide-next">
  188 + <span class="icon"></span>
  189 + <span class="txt">移动APP</span>
  190 + </h2>
  191 + <h2 class="icon3 swiper-slide">
  192 + <span class="icon"></span>
  193 + <span class="txt">会员服务</span>
  194 + </h2>
  195 + <div class="line"></div>
  196 + </div>
  197 + </div>
  198 + <div class="swiper-container swiper-container-horizontal bd" id="swiper-con5">
  199 + <ul class='swiper-wrapper' style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
  200 + <li class="swiper-slide swiper-slide-active" style="display:block">
  201 + <div class="txt">
  202 + <p class="p1">车主服务平台</p>
  203 + <p class="p2">移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费，订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车难题，方便车主快捷出行</p>
  204 + </div>
  205 + <div class="img"><img src="images/services_userIco1.png" alt="" ></div>
  206 + </li>
  207 + <li class="swiper-slide swiper-slide-next">
  208 + <div class="txt">
  209 + <p class="p1">移动端停车服务</p>
  210 + <p class="p2">提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往）车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新）电子支付（支持常用电子支付，更有抵扣优惠券）</p>
  211 + </div>
  212 + <div class="img"><img src="images/services_userIco2.png" alt=""></div>
  213 + </li>
  214 + <li class="swiper-slide">
  215 + <div class="txt">
  216 + <p class="p1">会员和车主服务</p>
  217 + <p class="p2">成为任你停会员，尊贵会员身份停车优惠。为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务</p>
  218 + </div>
  219 + <div class="img"><img src="images/services_userIco3.png" alt=""></div>
  220 + </li>
  221 + </ul>
  222 + </div>
272 223 </div>
273   - </section>
  224 + </div>
274 225 <!--车主 end-->
275 226 <!--footer sta-->
276 227 <section class="section">
... ...