media 服务页

Andy
1 parent 4354a61b
Showing 14 changed files with 138 additions and 17 deletions
css/services.css
images/services_titico1.png
images/services_titico2_active.png
images/services_titico3_active.png
images/services_titico4.png
images/services_titico5_active.png
images/services_titico6_active.png
images/services_titico7.png
images/services_titico8_active.png
images/services_titico9_active.png
js/nav-footer.js
js/services.js
services.html
style.css
@@ -35,20 +35,21 @@
     width: 1200px;
     margin: 0 auto;
 }
+/*1 tab*/
 .services-wrap-left-1{
     background: url("../images/services_saasIco.png") no-repeat;
     width: 542px;
     height: 494px;
     margin-top: 102px;
-    margin-left: 50px;
+    margin-left: 10px;
 }
 .services-wrap-right-1{
     width: 543px;
     height: 400px;
     margin-top: 177px;
-    margin-left: 50px;
+    margin-left: 78px;
 }
-/*tab  右侧 切换部分 sta*/
+/*1----tab  右侧 切换部分 sta*/
 .services-soft-wrap{
     height: 168px;
     width: 100%;
@@ -63,7 +64,7 @@
 }
 .services-soft-wrap li:nth-of-type(1) {
     padding-top: 114px;
-    background: url(../images/services_titico1_active.png) no-repeat center 0;
+    background: url(../images/services_titico1.png) no-repeat center 0;
     margin-right: 72px;
 }
 .services-soft-wrap li:nth-of-type(1).active {
@@ -93,19 +94,20 @@
     border-bottom: 2px solid rgba(63,159,254,1);
     background: url(../images/services_titico3_active.png) no-repeat center 0;
 }
-/*tab 右侧 cont*/
-.services-section-wrap{
+/*1------tab 右侧 cont*/
+.services-section-wrap,.services-section-user{
     height: 100px;
     margin-top: 58px;
     width: 400px;
 }
 .services-soft-bottom-title{
-    width:230px;
+    width:360px;
     height:30px;
     font-size:30px;
     font-weight:500;
     color:rgba(0,0,0,1);
     margin-bottom: 22px;
+    text-align: left;
 }
 .services-soft-bottom-des{
     text-align: left;
@@ -117,3 +119,66 @@
     color:rgba(0,0,0,0.7);
 }
+/*----2------ tab sta*/
+
+
+/*----3------ tab sta*/
+/*1 tab*/
+.services-wrap-left-3{
+    background: url("../images/services_userIco.png") no-repeat;
+    width: 568px;
+    height: 593px;
+    margin-top: 67px;
+    margin-left: 10px;
+}
+.services-wrap-right-3{
+    width: 543px;
+    height: 400px;
+    margin-top: 165px;
+    margin-left: 50px;
+}
+/*-------3---*/
+.services-user-wrap{
+    height: 168px;
+    width: 100%;
+    border-bottom: 2px solid rgba(228,229,229,1);;
+}
+.services-user-wrap li {
+    color: rgba(6,14,19,.8);
+    font-size:20px;
+    cursor: pointer;
+    height: 168px;
+    width: 133px;
+}
+.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;
+}
 \ No newline at end of file
@@ -32,7 +32,7 @@ var headerHtmls=&#39;&lt;div class=&quot;header-inner&quot;&gt;&#39; +
 //footer HTML
 var footHtmls='<div class="container">' +
   '        <div class="row">' +
-  '            <div class="col-md-3 col-xs-6">' +
+  '            <div class="col-md-3 col-xs-3">' +
   '                <div class="footer">' +
   '                    <div class="footer-title">公司介绍</div>' +
   '                    <ul class="footer-links">' +
@@ -43,7 +43,7 @@ var footHtmls=&#39;&lt;div class=&quot;container&quot;&gt;&#39; +
   '                    </ul>' +
   '                </div>' +
   '            </div>' +
-  '            <div class="col-md-3 col-xs-6">' +
+  '            <div class="col-md-3 col-xs-3">' +
   '                <div class="footer">' +
   '                    <div class="footer-title">产品介绍</div>' +
   '                    <ul class="footer-links">' +
@@ -53,7 +53,7 @@ var footHtmls=&#39;&lt;div class=&quot;container&quot;&gt;&#39; +
   '                    </ul>' +
   '                </div>' +
   '            </div>' +
-  '            <div class="col-md-3 col-xs-6">' +
+  '            <div class="col-md-3 col-xs-3">' +
   '                <div class="footer">' +
   '                    <div class="footer-title">联系我们</div>' +
   '                    <ul class="footer-links">' +
@@ -63,7 +63,7 @@ var footHtmls=&#39;&lt;div class=&quot;container&quot;&gt;&#39; +
   '                    </ul>' +
   '                </div>' +
   '            </div>' +
-  '            <div class="col-md-3 col-xs-6">' +
+  '            <div class="col-md-3 col-xs-3">' +
   '                <div class="footer">' +
   '                    <div class="footer-media">官方媒体</div>' +
   '                    <ul class="footer-links">' +
@@ -5,4 +5,11 @@ $(&#39;#services-soft-wrap li&#39;).on(&#39;click&#39;,function () {
     console.log(_index)
     $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
     $('#services-section-wrap>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
@@ -91,28 +91,77 @@
                         </li>
                         <li class="displaynone">
                             <div class="services-soft-bottom-title">
-                                集团SAAS云平台
+                                任你停运营监控中心
                             </div>
                             <div class="services-soft-bottom-des">
-                                跨平台停车管控云平台系统，提供集中数据管理和监控、数据挖掘和分析、资产管理和增值运营等一体化服务。
+                                建立综合停车数据资源，搭建基础分析模型，提供新一代的数据分析与商业智能
+                                BI解决方案，致力于缓解拥堵实现车位运营智能化
                             </div>
                         </li>
                         <li class="displaynone">
                             <div class="services-soft-bottom-title">
-                                集团SAAS云平台
+                                实时数据信息流互通
                             </div>
                             <div class="services-soft-bottom-des">
-                                跨平台停车管控云平台系统，提供集中数据管理和监控、数据挖掘和分析、资产管理和增值运营等一体化服务。
+                                多端设备互联，商户、车主、平台数据实时精准安全同步云服务，线上线下一体化
+                                连接，辅助商业决策分析，打造互联网+智慧停车新生态
                             </div>
                         </li>
                     </ul>
                 </li>
             </ul>
-
             <!--集团 end-->
             <!--车场 sta-->
+
             <!--车场 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">
+                <ul class="services-user-wrap" id="services-user-wrap">
+                    <li class="text-center float-left active">
+                        车主服务
+                    </li>
+                    <li class="text-center float-left">
+                        移动APP
+                    </li>
+                    <li class="text-center float-left">
+                        会员服务
+                    </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>
             <!--车主 end-->
     </div>
@@ -18,7 +18,7 @@ body{
 	background:#F6F6F6;
 	margin:0;
 	padding:0;
-	min-width: 1200px !important;
+	width: 100%;
 	height: 100%;
 }