diff --git a/css/services.css b/css/services.css index f3f8267..2ccbb0a 100644 --- a/css/services.css +++ b/css/services.css @@ -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; diff --git a/js/services.js b/js/services.js index d6f9e05..bfa6adb 100644 --- a/js/services.js +++ b/js/services.js @@ -1,6 +1,6 @@ //集团 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('#swiper-tab',{ -}) -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()) + } + } +}; diff --git a/services.html b/services.html index 7687ed4..9412526 100644 --- a/services.html +++ b/services.html @@ -70,45 +70,9 @@
-
-
+

@@ -125,7 +89,7 @@

-
+
  • @@ -156,121 +120,108 @@
    -
    -
    -
      -
    • -
        -
      • - 车场服务 -
        -
        • -
      • - 云平台 -
        -
        • -
      • - 政府云 -
        -
        • -
      -
        -
      • -
        - 一站式车场服务平台 -
        -
        - 运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位 - 引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制， - 推动智慧停车商业运营新生态 -
        -
        • -
      • -
        - 企业云平台 -
        -
        - 为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产 - 管理、人员排班，车位共享，灵活费率管理等多样化运营服务 -
        -
        • -
      • -
        - 政府云平台 -
        -
        - 对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据， - 搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解 - 拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿 - 色经济发展 -
        -
        • -
      -
      • -
    • +
      +
      +
      +
      +

      + + 车场服务 +

      +

      + + 云平台 +

      +

      + + 政府云 +

      +
      +
      +
      +
      +
        +
      • +
        +

        一站式车场服务平台

        +

        运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制，推动智慧停车商业运营新生态 +

        +
        +
        +
        • +
      • +
        +

        企业云平台

        +

        为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产管理、人员排班，车位共享，灵活费率管理等多样化运营服务

        +
        +
        +
        • +
      • +
        +

        政府云平台

        +

        对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿色经济发展

        +
        +
        • +
      +
      +
      -
    +
    +
+
-
-
-
    -
  • -
  • -
      -
    • - 车主服务 -
      -
      • -
    • - 移动APP -
      -
      • -
    • - 会员服务 -
      -
      • -
    -
      -
    • -
      - 车主服务平台 -
      -
      - 移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费， - 订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车 - 难题，方便车主快捷出行 -
      -
      • -
    • -
      - 移动端停车服务 -
      -
      - 提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往） - 车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新） - 电子支付（支持常用电子支付，更有抵扣优惠券） -
      -
      • -
    • -
      - 会员和车主服务 -
      -
      - 成为任你停会员，尊贵会员身份停车优惠。 - 为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务 -
      -
      • -
    -
    • -
+
+
+
+
+

+ + 车主服务 +

+

+ + 移动APP +

+

+ + 会员服务 +

+
+
+
+
+
    +
  • +
    +

    车主服务平台

    +

    移动掌上互联，为车主提供附近车位，个性导航，语音播报，手机缴费，订单详情，积分会员，共享车位，无感支付等多样化移动应用，解决停车难题，方便车主快捷出行

    +
    +
    +
    • +
  • +
    +

    移动端停车服务

    +

    提供附近停车场（当前位置智能推荐，选择离您“最近”停车场，一键导航前往）车场详情（展示停车场详情信息，距离、位置，空余车位数实时更新）电子支付（支持常用电子支付，更有抵扣优惠券）

    +
    +
    +
    • +
  • +
    +

    会员和车主服务

    +

    成为任你停会员，尊贵会员身份停车优惠。为车主提供查违章、加油站、汽车美容等完善的服务，一站式出行，一站式服务

    +
    +
    +
    • +
+
-
+