diff --git a/css/services.css b/css/services.css index 7587aae..4e6bdda 100644 --- a/css/services.css +++ b/css/services.css @@ -29,6 +29,10 @@ .services-content{ background-color: #fff; } +.services_bgF7F8FA{ + background-color: #F7F8FA; + width: 100%; +} /*tab sta */ .services-wrap{ height: 680px; @@ -41,19 +45,22 @@ background: url("../images/services_saasIco.png") no-repeat; width: 542px; height: 494px; - margin-top: 102px; - margin-left: 10px; + /*width: 100%;*/ + margin: 102px auto 0; } .services-wrap-right-1{ width: 543px; + /*width: 100%;*/ height: 400px; - margin-top: 177px; - margin-left: 78px; + margin: 177px auto 0; + /*margin-left: 20px;*/ + /*margin-left: 78px;*/ } /*1----tab 右侧 切换部分 sta*/ .services-soft-wrap{ height: 168px; - width: 100%; + /*width: 100%;*/ + width: 543px; border-bottom: 2px solid rgba(228,229,229,1);; } .services-soft-wrap li { @@ -96,7 +103,7 @@ background: url(../images/services_titico3_active.png) no-repeat center 0; } /*1------tab 右侧 cont*/ -.services-section-wrap,.services-section-user{ +.services-section-wrap,.services-section-user,.services-section-park{ height: 100px; margin-top: 58px; width: 400px; @@ -121,27 +128,91 @@ } /*----2------ tab sta*/ - +/*2 tab*/ +.services-wrap-left-2{ + width: 543px; + /*width: 100%;*/ + height: 400px; + margin: 165px auto 0; + margin-left: 20px; +} +.services-wrap-right-2{ + background: url("../images/services_parkIco.png") no-repeat; + width: 558px; + /*width: 100%;*/ + height: 574px; + margin: 67px auto 0; + /*margin-left: 10px;*/ +} +/*-------2---*/ +.services-park-wrap{ + height: 168px; + width: 543px; + /*width: 100%;*/ + border-bottom: 2px solid rgba(228,229,229,1);; +} +.services-park-wrap li { + color: rgba(6,14,19,.8); + font-size:20px; + cursor: pointer; + height: 168px; + width: 133px; +} +.services-park-wrap li:nth-of-type(1) { + padding-top: 114px; + background: url(../images/services_titico4.png) no-repeat center 0; + margin-right: 72px; +} +.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; +} +.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; +} /*----3------ tab sta*/ -/*1 tab*/ +/*---3 tab*/ .services-wrap-left-3{ background: url("../images/services_userIco.png") no-repeat; width: 568px; + /*width: 100%;*/ height: 593px; - margin-top: 67px; - margin-left: 10px; + margin: 67px auto 0; + /*margin-left: 10px;*/ } .services-wrap-right-3{ width: 543px; + /*width: 100%;*/ height: 400px; - margin-top: 165px; - margin-left: 50px; + margin: 165px auto 0; + margin-left: 20px; } /*-------3---*/ .services-user-wrap{ height: 168px; - width: 100%; + width: 543px; + /*width: 100%;*/ border-bottom: 2px solid rgba(228,229,229,1);; } .services-user-wrap li { diff --git a/js/services.js b/js/services.js index a385954..b003d76 100644 --- a/js/services.js +++ b/js/services.js @@ -6,10 +6,19 @@ $('#services-soft-wrap li').on('click',function () { $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') }); + +//车场 tab 切换 +$('#services-park-wrap li').on('click',function () { + var _index = $(this).index(); + console.log(_index) + $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active') + $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') +}); + //车主 tab 切换 $('#services-user-wrap li').on('click',function () { var _index = $(this).index(); console.log(_index) $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active') $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') -}) \ No newline at end of file +}); \ No newline at end of file diff --git a/services.html b/services.html index 75b9c12..0f3d381 100644 --- a/services.html +++ b/services.html @@ -64,60 +64,116 @@
+ +
- -
+ + +
+
+
    +
  • +
    • - SAAS平台 + 车场服务
    • - 监控中心 + 云平台
    • - 数据互联 + 政府云
    -
      +
      • - 集团SAAS云平台 + 一站式车场服务平台
        - 跨平台停车管控云平台系统，提供集中数据管理和监控、数据挖掘和分析、资产管理和增值运营等一体化服务。 + 运用互联网+、物联网、AI开放平台，为车场提供科学专业建设方案，综合车位 + 引导、视频监控、停车计费、运营监控等运营管理，提供一站式个性化定制， + 推动智慧停车商业运营新生态
      • - 任你停运营监控中心 + 企业云平台
        - 建立综合停车数据资源，搭建基础分析模型，提供新一代的数据分析与商业智能 - BI解决方案，致力于缓解拥堵实现车位运营智能化 + 为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产 + 管理、人员排班，车位共享，灵活费率管理等多样化运营服务
      • - 实时数据信息流互通 + 政府云平台
        - 多端设备互联，商户、车主、平台数据实时精准安全同步云服务，线上线下一体化 - 连接，辅助商业决策分析，打造互联网+智慧停车新生态 + 对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据， + 搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解 + 拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿 + 色经济发展
      -
    - - +
  • - - -
      -
    • -
    • +
      • +
    +
+
+ + +
+ - -
+ + +