服务页车场车主模块

Andy
1 parent 72a8599e
Showing 3 changed files with 178 additions and 41 deletions
css/services.css
js/services.js
services.html
@@ -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 {
@@ -6,10 +6,19 @@ $(&#39;#services-soft-wrap li&#39;).on(&#39;click&#39;,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
@@ -64,60 +64,116 @@
 </div>
 <!--banner end-->
 <div class="services-content">
+
+        <!--集团 sta-->
     <div class="container">
-            <!--集团 sta-->
-            <ul class=" services-wrap" >
-                <li class="text-center float-left services-wrap-left-1"></li>
-                <li class="text-center float-left services-wrap-right-1">
-                    <ul class="services-soft-wrap" id="services-soft-wrap">
+        <ul class="row services-wrap">
+            <li class="text-center col-md-6 services-wrap-left-1"></li>
+            <li class="text-center col-md-6 services-wrap-right-1">
+                <ul class="services-soft-wrap" id="services-soft-wrap">
+                    <li class="text-center float-left active">
+                        SAAS平台
+                    </li>
+                    <li class="text-center float-left">
+                        监控中心
+                    </li>
+                    <li class="text-center float-left">
+                        数据互联
+                    </li>
+                </ul>
+                <ul class="services-section-wrap" id="services-section-wrap">
+                    <li class="">
+                        <div class="services-soft-bottom-title">
+                            集团SAAS云平台
+                        </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>
+                    <li class="displaynone">
+                        <div class="services-soft-bottom-title">
+                            实时数据信息流互通
+                        </div>
+                        <div class="services-soft-bottom-des">
+                            多端设备互联，商户、车主、平台数据实时精准安全同步云服务，线上线下一体化
+                            连接，辅助商业决策分析，打造互联网+智慧停车新生态
+                        </div>
+                    </li>
+                </ul>
+            </li>
+        </ul>
+    </div>
+        <!--集团 end-->
+        <!--车场 sta-->
+    <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">
-                            SAAS平台
+                            车场服务
                         </li>
                         <li class="text-center float-left">
-                            监控中心
+                            云平台
                         </li>
                         <li class="text-center float-left">
-                            数据互联
+                            政府云
                         </li>
                     </ul>
-                    <ul class="services-section-wrap" id="services-section-wrap">
+                    <ul class="services-section-park" id="services-section-park">
                         <li class="">
                             <div class="services-soft-bottom-title">
-                                集团SAAS云平台
+                                一站式车场服务平台
                             </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">
-                                建立综合停车数据资源，搭建基础分析模型，提供新一代的数据分析与商业智能
-                                BI解决方案，致力于缓解拥堵实现车位运营智能化
+                                为车场管理者提供财务对账，统计报表，运营监控，收入管理，权限管理，资产
+                                管理、人员排班，车位共享，灵活费率管理等多样化运营服务
                             </div>
                         </li>
                         <li class="displaynone">
                             <div class="services-soft-bottom-title">
-                                实时数据信息流互通
+                                政府云平台
                             </div>
                             <div class="services-soft-bottom-des">
-                                多端设备互联，商户、车主、平台数据实时精准安全同步云服务，线上线下一体化
-                                连接，辅助商业决策分析，打造互联网+智慧停车新生态
+                                对数据进行集成、归类，建立完整的综合停车数据资源目录，深度洞察用户数据，
+                                搭建基础分析模型，提供新一代的数据分析与商业智能BI解决方案，致力于缓解
+                                拥堵实现车位运营智能化。同时打造“新型智慧城市”解决交通拥堵治理、增进绿
+                                色经济发展
                             </div>
                         </li>
                     </ul>
                 </li>
-            </ul>
-            <!--集团 end-->
-            <!--车场 sta-->
+                <li class="text-center col-md-6 services-wrap-right-2">
  
-            <!--车场 end-->
-            <!--车主 sta-->
-        <ul class=" services-wrap" >
-            <li class="text-center float-left services-wrap-left-3"></li>
-            <li class="text-center float-left services-wrap-right-3">
+                </li>
+            </ul>
+        </div>
+    </div>
+        <!--车场 end-->
+        <!--车主 sta-->
+    <div class="container">
+        <ul class="row services-wrap">
+            <li class="text-center col-md-6 services-wrap-left-3"></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">
                         车主服务
@@ -162,9 +218,10 @@
                 </ul>
             </li>
         </ul>
-            <!--车主 end-->
-
     </div>
+        <!--车主 end-->
+
+
 </div>
 <!--content end-->
 <!-- Footer Area -->