add service swiper

Andy
1 parent d6718231
Showing 3 changed files with 232 additions and 441 deletions
css/services.css
js/services.js
services.html
@@ -45,7 +45,7 @@
     margin: 0 auto;
     width: 100%;
 }
-.part{ height: 635px; position: relative; overflow: hidden; width: 1000px; padding: 0;}
+.part{ height: 535px; position: relative; overflow: hidden; width: 1000px; padding: 0;}
 .part .con{ width: 100%; }
 .part .bd, .part .bd ul {
     width: 100%;
@@ -55,30 +55,10 @@
     width: 100%;
     float: left;
 }
-
-.part4 .phonebg{
-    background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
-}
-.part .hd{width: 500px!important; margin-top: 100px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
+.part3 .hd,.part5 .hd{width: 500px!important; margin-top: 50px; overflow: hidden;margin-left:500px; background: #fff; z-index: 1000;}
 .part .hd h2{width: 110px !important; cursor: pointer; float: left; font-size: 20px; padding-bottom: 15px; margin-bottom: 0; text-align: center;}
 .part .hd h2.active-nav{ border-bottom: solid 3px #3F9FFE;color:#3F9FFE; }
-.part .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -4px 0 no-repeat; display: inline-block; }
-.part .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -544px 0 no-repeat;}
-.part .hd h2 span{display: block;}
-.part .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -65px 0 no-repeat; }
-.part .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -605px 0 no-repeat;}
-.part .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
-.part .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
 .part .bd{width: 100%;float: left;}
-.part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
-.part4 .bd .txt {float: left; width: 416px; margin-left: 0px;}
-.part4 .hd {
-    width: 300px!important;
-    margin: 100px auto 0;
-    overflow: hidden;
-    margin-left: 0px;
-    background: #f7f7f7;
-}
 .part .line {
     width: 90%;
     /* margin: 0 auto; */
@@ -97,14 +77,6 @@
     color: #999999;
     font-weight: normal;
 }
-.part .bd .img {
-    width: 433.6px;
-    height: 395.2px;
-    z-index: 10000000;
-    margin: -100px 0 0 0%;
-    float: left;
-    /*overflow: hidden;*/
-}
 .part .bd .img img {
     /*border: solid 1px #b8b8b8;*/
     display: block;
@@ -112,248 +84,71 @@
     width: 100%;
     height: 100%;
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/*1 tab*/
-.services-wrap-left-1{
-    background: url("../images/services_saasIco1.png") no-repeat center center;
-    background-size:542px 494px;
-    height: 494px;
-}
-.services-wrap-right-1{
-    /*width: 100%;*/
-    height: 400px;
-    margin: 70px auto 0;
-    padding-left: 100px;
-}
-.services-wrap{
-    padding: 70px 0;
-}
-/*1----tab  右侧 切换部分 sta*/
-.services-soft-wrap{
-    height: 168px;
-    /*width: 100%;*/
-    /*width: 543px;*/
-    border-bottom: 2px solid rgba(228,229,229,1);
-    display: flex;
-}
-.services-soft-wrap li {
-    flex: 1;
-    color: rgba(6,14,19,.7);
-    font-size:20px;
-    cursor: pointer;
-    height: 168px;
-    position: relative;
-    /*width: 133px;*/
-}
-.services-soft-wrap li:nth-of-type(1) {
-    padding-top: 114px;
-    background: url(../images/service_bgsmallIco.png) no-repeat;
-    background-position: -500px 0;
-}
-.services-soft-wrap li:nth-of-type(1).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico1_active.png) no-repeat center 0;
-}
-.services-soft-wrap li:nth-of-type(2) {
-    padding-top: 114px;
-    background: url(../images/services_titico2.png) no-repeat center 0;
-    margin-right: 72px;
-    margin-left: 72px;
-}
-.services-soft-wrap li:nth-of-type(2).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico2_active.png) no-repeat center 0;
-}
-.services-soft-wrap li:nth-of-type(3) {
-    padding-top: 114px;
-    background: url(../images/services_titico3.png) no-repeat center 0;
+.part3 .bd .txt , .part5 .bd .txt {float: right; width: 500px;}
+.part4 .bd .txt {float: left; width: 500px; margin-left: 0px;}
+.part3 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -4px 0 no-repeat; display: inline-block; }
+.part3 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -544px 0 no-repeat;}
+.part3 .hd h2 span{display: block;}
+.part3 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -65px 0 no-repeat; }
+.part3 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -605px 0 no-repeat;}
+.part3 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -127px 0 no-repeat; }
+.part3 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -667px 0 no-repeat;}
+.part3 .bd .img {
+    width: 433.6px;
+    height: 395.2px;
+    z-index: 1000;
+    margin: -50px 0 0 0%;
+    float: left;
+    /*overflow: hidden;*/
 }
-.services-soft-wrap li:nth-of-type(3).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico3_active.png) no-repeat center 0;
+/*part4==============*/
+.part4 .phonebg{
+    background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
 }
-/*1------tab 右侧 cont*/
-.services-section-wrap,.services-section-user,.services-section-park{
-    height: 100px;
-    margin-top: 58px;
+.part4 .hd {
+    margin-top: 50px;
+    z-index: 1000;
+    width: 500px!important;
+    overflow: hidden;
+    margin-left: 0px;
+    background: #f7f7f7;
 }
-.services-soft-bottom-title{
-    height:30px;
-    font-size:30px;
-    font-weight:500;
-    color:rgba(0,0,0,1);
-    margin-bottom: 22px;
-    text-align: left;
+.part4 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -183px 0 no-repeat; display: inline-block; }
+.part4 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -723px 0 no-repeat;}
+.part4 .hd h2 span{display: block;}
+.part4 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -244px 0 no-repeat; }
+.part4 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -784px 0 no-repeat;}
+.part4 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -305px 0 no-repeat; }
+.part4 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -845px 0 no-repeat;}
+.part4 .bd .img {
+    width: 433.6px;
+    height: 395.2px;
+    z-index: 1000;
+    margin: -50px 0 0 30px;
+    float: left;
+    /*overflow: hidden;*/
 }
-.services-soft-bottom-des{
-    text-align: left;
-    height:44px;
-    line-height: 22px;
-    font-size:16px;
-    font-weight:400;
-    color:rgba(0,0,0,0.7);
+/*part5==============*/
+.part5 .phonebg{
+    background: #f7f7f7 url(../images/service_bgsmallIco.png) 0 0 no-repeat;
 }
  
-/*----2------ tab sta*/
-/*2 tab*/
-.services-wrap-left-2{
-    /*width: 543px;*/
-    /*width: 100%;*/
-    height: 400px;
-    margin: 70px auto 0;
-    padding-right: 100px;
-
-}
-.services-wrap-right-2{
-    background: url("../images/services_parkIco1.png") no-repeat;
-    background-size: 542px 494px;
-    /*width: 558px;*/
-    /*width: 100%;*/
-    height: 494px;
-    /*margin-left: 10px;*/
-}
-/*-------2---*/
-.services-park-wrap{
-    display: flex;
-    height: 168px;
-    /*width: 543px;*/
-    /*width: 100%;*/
-    border-bottom: 2px solid rgba(228,229,229,1);;
-}
-.services-park-wrap li {
-    flex: 1;
-    color: rgba(6,14,19,.8);
-    font-size:20px;
-    cursor: pointer;
-    height: 168px;
-    position: relative;
-}
-.services-park-wrap li:nth-of-type(1) {
-    padding-top: 114px;
-    background: url(../images/services_titico4.png) no-repeat center 0;
-}
-.services-park-wrap li:nth-of-type(1).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico4_active.png) no-repeat center 0;
-}
-.services-park-wrap li:nth-of-type(2) {
-    padding-top: 114px;
-    background: url(../images/services_titico5.png) no-repeat center 0;
-    margin-right: 72px;
-    margin-left: 72px;
-}
-.services-park-wrap li:nth-of-type(2).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico5_active.png) no-repeat center 0;
-}
-.services-park-wrap li:nth-of-type(3) {
-    padding-top: 114px;
-    background: url(../images/services_titico6.png) no-repeat center 0;
-}
-.services-park-wrap li:nth-of-type(3).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico6_active.png) no-repeat center 0;
+.part5 .hd h2 .icon{ width: 54px;height: 54px; margin-bottom: 15px; background:url(../images/service_bgsmallIco.png) -363px 0 no-repeat; display: inline-block; }
+.part5 .hd h2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -903px 0 no-repeat;}
+.part5 .hd h2 span{display: block;}
+.part5 .hd h2.icon2 .icon{ background:url(../images/service_bgsmallIco.png) -424px 0 no-repeat; }
+.part5 .hd h2.icon2.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -964px 0 no-repeat;}
+.part5 .hd h2.icon3 .icon{ background:url(../images/service_bgsmallIco.png) -485px 0 no-repeat; }
+.part5 .hd h2.icon3.active-nav .icon{ background:url(../images/service_bgsmallIco.png) -1025px 0 no-repeat;}
+.part5 .bd .img {
+    width: 433.6px;
+    height: 395.2px;
+    z-index: 1000;
+    margin: -50px 0 0 0%;
+    float: left;
+    /*overflow: hidden;*/
 }
  
-/*----3------ tab sta*/
-/*---3 tab*/
-.services-wrap-left-3{
-    background: url("../images/services_userIco1.png") no-repeat;
-    background-size: 542px 494px;
-    /*width: 568px;*/
-    /*width: 100%;*/
-    height: 494px;
-}
-.services-wrap-right-3{
-    /*width: 543px;*/
-    /*width: 100%;*/
-    height: 400px;
-    margin: 70px auto 0;
-    padding-left: 100px;
-    /*margin-left: 20px;*/
-}
-/*-------3---*/
-.services-user-wrap{
-    display: flex;
-    height: 168px;
-    /*width: 543px;*/
-    /*width: 100%;*/
-    border-bottom: 2px solid rgba(228,229,229,1);;
-}
-.services-user-wrap li {
-    flex: 1;
-    color: rgba(6,14,19,.8);
-    font-size:20px;
-    cursor: pointer;
-    height: 168px;
-    position: relative;
-}
-.services-user-wrap li:nth-of-type(1) {
-    padding-top: 114px;
-    background: url(../images/services_titico7.png) no-repeat center 0;
-    margin-right: 72px;
-}
-.services-user-wrap li:nth-of-type(1).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico7_active.png) no-repeat center 0;
-}
-.services-user-wrap li:nth-of-type(2) {
-    padding-top: 114px;
-    background: url(../images/services_titico8.png) no-repeat center 0;
-    margin-right: 72px;
-}
-.services-user-wrap li:nth-of-type(2).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico8_active.png) no-repeat center 0;
-}
-.services-user-wrap li:nth-of-type(3) {
-    padding-top: 114px;
-    background: url(../images/services_titico9.png) no-repeat center 0;
-}
-.services-user-wrap li:nth-of-type(3).active {
-    color: #3F9FFE;
-    padding-bottom: 22px;
-    /*border-bottom: 2px solid rgba(63,159,254,1);*/
-    background: url(../images/services_titico9_active.png) no-repeat center 0;
-}
 /*footer sta*/
 .services-foottit{
     height:38px;
  
 //集团 tab 切换
-var mySwiper2 = new Swiper('#swiper-tab',{
+var mySwiper2 = new Swiper('#swiper-tab3',{
     watchSlidesProgress : true,
     watchSlidesVisibility : true,
     slidesPerView : 3,//将tabs块儿平均分成几份
@@ -12,19 +12,18 @@ var mySwiper2 = new Swiper(&#39;#swiper-tab&#39;,{
  
  
  
-})
-var mySwiper3 = new Swiper('#swiper-con',{
+});
+var mySwiper3 = new Swiper('#swiper-con3',{
  
     onSlideChangeStart: function(){
-        updateNavPosition()
+        updateNavPosition3()
     }
  
-})
-
-function updateNavPosition(){
+});
+function updateNavPosition3(){
 //默认哪一块是被选中的状态
-    $('#swiper-tab .active-nav').removeClass('active-nav')
-    var activeNav = $('#swiper-tab .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
+    $('#swiper-tab3 .active-nav').removeClass('active-nav')
+    var activeNav = $('#swiper-tab3 .swiper-slide').eq(mySwiper3.activeIndex).addClass('active-nav');
  
  
     if (!activeNav.hasClass('swiper-slide-visible')) {
@@ -39,35 +38,81 @@ function updateNavPosition(){
             mySwiper2.slideTo(activeNav.index())
         }
     }
-}
+};
+
+//车场 tab 切换
+var mySwiper4 = new Swiper('#swiper-tab4',{
+    watchSlidesProgress : true,
+    watchSlidesVisibility : true,
+    slidesPerView : 3,//将tabs块儿平均分成几份
+
+    /*点击了上面的滑块时，下面的内容区也跟着变化  若去掉后，拖动下面上面可继续移动*/
+    onTap: function(){
+        mySwiper5.slideTo( mySwiper4.clickedIndex)
+    }
+
  
-$('#services-soft-wrap li').on('click',function () {
-    var _index = $(this).index();
  
-    $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)')
-    $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
-    $('#services-soft-wrap li').children('div').addClass('displaynone');
-    $('#services-soft-wrap li').eq(_index).children('div').removeClass('displaynone');
-    // $('.ai-success-stories-list-bar').css('left',100*_index);
-    $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
 });
+var mySwiper5 = new Swiper('#swiper-con4',{
+
+    onSlideChangeStart: function(){
+        updateNavPosition4()
+    }
  
-//车场 tab 切换
-$('#services-park-wrap li').on('click',function () {
-    var _index = $(this).index();
-    $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)');
-    $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
-    $('#services-park-wrap li').children('div').addClass('displaynone');
-    $('#services-park-wrap li').eq(_index).children('div').removeClass('displaynone');
-    $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
 });
+function updateNavPosition4(){
+//默认哪一块是被选中的状态
+    $('#swiper-tab4 .active-nav').removeClass('active-nav')
+    var activeNav = $('#swiper-tab4 .swiper-slide').eq(mySwiper5.activeIndex).addClass('active-nav');
+
+
+    if (!activeNav.hasClass('swiper-slide-visible')) {
+        if (activeNav.index()>mySwiper4.activeIndex) {
+            var thumbsPerNav = Math.floor(mySwiper4.width/activeNav.width())-1
+            mySwiper4.slideTo(activeNav.index()-thumbsPerNav)
+        }
+        else {
+            mySwiper4.slideTo(activeNav.index())
+        }
+    }
+};
+
  
 //车主 tab 切换
-$('#services-user-wrap li').on('click',function () {
-    var _index = $(this).index();
-    $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)');
-    $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
-    $('#services-user-wrap li').children('div').addClass('displaynone');
-    $('#services-user-wrap li').eq(_index).children('div').removeClass('displaynone');
-    $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
+var mySwiper6 = new Swiper('#swiper-tab5',{
+    watchSlidesProgress : true,
+    watchSlidesVisibility : true,
+    slidesPerView : 3,//将tabs块儿平均分成几份
+
+    /*点击了上面的滑块时，下面的内容区也跟着变化  若去掉后，拖动下面上面可继续移动*/
+    onTap: function(){
+        mySwiper7.slideTo( mySwiper6.clickedIndex)
+    }
+
+
+
+});
+var mySwiper7 = new Swiper('#swiper-con5',{
+
+    onSlideChangeStart: function(){
+        updateNavPosition5()
+    }
+
 });
+function updateNavPosition5(){
+//默认哪一块是被选中的状态
+    $('#swiper-tab5 .active-nav').removeClass('active-nav')
+    var activeNav = $('#swiper-tab5 .swiper-slide').eq(mySwiper7.activeIndex).addClass('active-nav');
+
+
+    if (!activeNav.hasClass('swiper-slide-visible')) {
+        if (activeNav.index()>mySwiper6.activeIndex) {
+            var thumbsPerNav = Math.floor(mySwiper6.width/activeNav.width())-1
+            mySwiper6.slideTo(activeNav.index()-thumbsPerNav)
+        }
+        else {
+            mySwiper6.slideTo(activeNav.index())
+        }
+    }
+};
@@ -70,45 +70,9 @@
 <!--banner end-->
 <div class="services-content">
     <!--集团 sta-->
-    <!--<section class="cd-hero">
-        <div class="cd-slider-nav">
-            <nav>
-                <span class="cd-marker item-3"></span>
-                <ul>
-                    <li class=""><a href="#0">1</a></li>
-                    <li class=""><a href="#0">2</a></li>
-                    <li class="selected"><a href="#0">3</a></li>
-
-
-                </ul>
-            </nav>
-        </div>
-
-        <ul class="cd-hero-slider">
-            <li class="move-left">
-                <div class="cd-full-width">
-                    23
-                </div>
-            </li>
-            <li class="move-left">
-                <div class="cd-half-width">
-                    <p>23</p>
-                </div>
-                <div class="cd-half-width cd-img-container">
-                </div>
-            </li>
-            <li class="selected from-right">
-                <div class="cd-half-width cd-img-container">
-                    3r3
-                </div>
-                <div class="cd-half-width">
-                </div>
-            </li>
-        </ul>
-    </section>-->
         <div class="container part part3">
                 <div class="con">
-                    <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab">
+                    <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab3">
                         <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                             <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
                                 <span class="icon"></span>
@@ -125,7 +89,7 @@
                             <div class="line"></div>
                         </div>
                     </div>
-                    <div class="swiper-container swiper-container-horizontal bd" id="swiper-con">
+                    <div class="swiper-container swiper-container-horizontal bd" id="swiper-con3">
                         <ul class='swiper-wrapper' style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                             <li class="swiper-slide swiper-slide-active" style="display:block">
                                 <div class="txt">
@@ -156,121 +120,108 @@
         </div>
     <!--集团 end-->
     <!--车场 sta-->
-    <section class="section">
         <div class="services_bgF7F8FA">
-            <div class="container">
-                <ul class="row services-wrap">
-                    <li class="text-center col-md-6 services-wrap-left-2" >
-                        <ul class="services-park-wrap" id="services-park-wrap">
-                            <li class="text-center float-left active">
-                                车场服务
-                                <div class="ai-success-stories-list-bar"></div>
-                            </li>
-                            <li class="text-center float-left">
-                                云平台
-                                <div class="ai-success-stories-list-bar displaynone"></div>
-                            </li>
-                            <li class="text-center float-left">
-                                政府云
-                                <div class="ai-success-stories-list-bar displaynone"></div>
-                            </li>
-                        </ul>
-                        <ul class="services-section-park" id="services-section-park">
-                            <li class="">
-                                <div class="services-soft-bottom-title">
-                                    一站式车场服务平台
-                                </div>
-                                <div class="services-soft-bottom-des">
-                                    运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位
-                                    引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制，
-                                    推动智慧停车商业运营新生态
-                                </div>
-                            </li>
-                            <li class="displaynone">
-                                <div class="services-soft-bottom-title">
-                                    企业云平台
-                                </div>
-                                <div class="services-soft-bottom-des">
-                                    为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产
-                                    管理、人员排班，车位共享，灵活费率管理等多样化运营服务
-                                </div>
-                            </li>
-                            <li class="displaynone">
-                                <div class="services-soft-bottom-title">
-                                    政府云平台
-                                </div>
-                                <div class="services-soft-bottom-des">
-                                    对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，
-                                    搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解
-                                    拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿
-                                    色经济发展
-                                </div>
-                            </li>
-                        </ul>
-                    </li>
-                    <li class="text-center col-md-6 services-wrap-right-2" id="services_parkIco">
+        <div class="container part part4">
+        <div class="con">
+            <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab4">
+            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
+                <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
+                    <span class="icon"></span>
+                    <span class="txt">车场服务</span>
+                </h2>
+                <h2 class="icon2 swiper-slide swiper-slide-visible swiper-slide-next">
+                    <span class="icon"></span>
+                    <span class="txt">云平台</span>
+                </h2>
+                <h2 class="icon3 swiper-slide">
+                    <span class="icon"></span>
+                    <span class="txt">政府云</span>
+                </h2>
  
+                <div class="line"></div>
+            </div>
+            </div>
+            <div class="swiper-container swiper-container-horizontal bd" id="swiper-con4">
+                <ul class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
+                    <li class="swiper-slide swiper-slide-active" style="display:block">
+                        <div class="txt">
+                            <p class="p1">一站式车场服务平台</p>
+                            <p class="p2">运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制，推动智慧停车商业运营新生态
+                            </p>
+                        </div>
+                        <div class="img"><img src="images/services_parkIco1.png" alt=""></div>
+                    </li>
+                    <li class="swiper-slide swiper-slide-next">
+                        <div class="txt">
+                            <p class="p1">企业云平台</p>
+                            <p class="p2">为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产管理、人员排班，车位共享，灵活费率管理等多样化运营服务</p>
+                        </div>
+                        <div class="img"><img src="images/services_parkIco2.png" alt=""></div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="txt">
+                            <p class="p1">政府云平台</p>
+                            <p class="p2">对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿色经济发展</p>
+                        </div>
+                        <div class="img"><img src="images/services_parkIco3.png" alt="" ></div>
                     </li>
+
                 </ul>
+
             </div>
+
         </div>
-    </section>
+        <div class="phonebg"></div>
+    </div>
+    </div>
     <!--车场 end-->
     <!--车主 sta-->
-    <section  class="section">
-        <div class="container">
-            <ul class="row services-wrap">
-                <li class="text-center col-md-6 services-wrap-left-3" id="services_userIco"></li>
-                <li class="text-center col-md-6 services-wrap-right-3">
-                    <ul class="services-user-wrap" id="services-user-wrap">
-                        <li class="text-center float-left active">
-                            车主服务
-                            <div class="ai-success-stories-list-bar"></div>
-                        </li>
-                        <li class="text-center float-left">
-                            移动APP
-                            <div class="ai-success-stories-list-bar displaynone"></div>
-                        </li>
-                        <li class="text-center float-left">
-                            会员服务
-                            <div class="ai-success-stories-list-bar displaynone"></div>
-                        </li>
-                    </ul>
-                    <ul class="services-section-user" id="services-section-user">
-                        <li class="">
-                            <div class="services-soft-bottom-title">
-                                车主服务平台
-                            </div>
-                            <div class="services-soft-bottom-des">
-                                移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费，
-                                订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车
-                                难题，方便车主快捷出行
-                            </div>
-                        </li>
-                        <li class="displaynone">
-                            <div class="services-soft-bottom-title">
-                                移动端停车服务
-                            </div>
-                            <div class="services-soft-bottom-des">
-                                提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往）
-                                车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新）
-                                电子支付（支持常用电子支付，更有抵扣优惠券）
-                            </div>
-                        </li>
-                        <li class="displaynone">
-                            <div class="services-soft-bottom-title">
-                                会员和车主服务
-                            </div>
-                            <div class="services-soft-bottom-des">
-                                成为任你停会员，尊贵会员身份停车优惠。
-                                为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务
-                            </div>
-                        </li>
-                    </ul>
-                </li>
-            </ul>
+    <div class="container part part5">
+        <div class="con">
+            <div class="swiper-container swiper-container-horizontal hd" id="swiper-tab5">
+                <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
+                    <h2 class="icon1 swiper-slide active-nav swiper-slide-visible swiper-slide-active">
+                        <span class="icon"></span>
+                        <span class="txt">车主服务</span>
+                    </h2>
+                    <h2 class="icon2 swiper-slide swiper-slide-visible swiper-slide-next">
+                        <span class="icon"></span>
+                        <span class="txt">移动APP</span>
+                    </h2>
+                    <h2 class="icon3 swiper-slide">
+                        <span class="icon"></span>
+                        <span class="txt">会员服务</span>
+                    </h2>
+                    <div class="line"></div>
+                </div>
+            </div>
+            <div class="swiper-container swiper-container-horizontal bd" id="swiper-con5">
+                <ul class='swiper-wrapper' style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
+                    <li class="swiper-slide swiper-slide-active" style="display:block">
+                        <div class="txt">
+                            <p class="p1">车主服务平台</p>
+                            <p class="p2">移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费，订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车难题，方便车主快捷出行</p>
+                        </div>
+                        <div class="img"><img src="images/services_userIco1.png" alt="" ></div>
+                    </li>
+                    <li class="swiper-slide swiper-slide-next">
+                        <div class="txt">
+                            <p class="p1">移动端停车服务</p>
+                            <p class="p2">提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往）车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新）电子支付（支持常用电子支付，更有抵扣优惠券）</p>
+                        </div>
+                        <div class="img"><img src="images/services_userIco2.png" alt=""></div>
+                    </li>
+                    <li class="swiper-slide">
+                        <div class="txt">
+                            <p class="p1">会员和车主服务</p>
+                            <p class="p2">成为任你停会员，尊贵会员身份停车优惠。为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务</p>
+                        </div>
+                        <div class="img"><img src="images/services_userIco3.png" alt=""></div>
+                    </li>
+                </ul>
+            </div>
         </div>
-    </section>
+    </div>
     <!--车主 end-->
     <!--footer sta-->
     <section  class="section">