From c39dc7ee05df3bf56392614bd3730d67e2e9bdad Mon Sep 17 00:00:00 2001
From: chenbiao <chenbiao@zte-its.com>
Date: Thu, 27 Sep 2018 16:48:35 +0800
Subject: [PATCH] 服务 add css3

---
 css/services.css | 36 +++++++++++++++++++++++++++---------
 js/services.js   | 22 +++++++++++++++-------
 services.html    | 10 ++++++++++
 style.css        | 30 ++++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/css/services.css b/css/services.css
index 20e4901..5edd010 100644
--- a/css/services.css
+++ b/css/services.css
@@ -68,6 +68,7 @@
     font-size:20px;
     cursor: pointer;
     height: 168px;
+    position: relative;
     /*width: 133px;*/
 }
 .services-soft-wrap li:nth-of-type(1) {
@@ -77,7 +78,7 @@
 .services-soft-wrap li:nth-of-type(1).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -89,7 +90,7 @@
 .services-soft-wrap li:nth-of-type(2).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -99,7 +100,7 @@
 .services-soft-wrap li:nth-of-type(3).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*border-bottom: 2px solid rgba(63,159,254,1);*/
     background: url(../images/services_titico3_active.png) no-repeat center 0;
 }
 /*1------tab 右侧 cont*/
@@ -156,6 +157,7 @@
     font-size:20px;
     cursor: pointer;
     height: 168px;
+    position: relative;
 }
 .services-park-wrap li:nth-of-type(1) {
     padding-top: 114px;
@@ -164,7 +166,7 @@
 .services-park-wrap li:nth-of-type(1).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -176,7 +178,7 @@
 .services-park-wrap li:nth-of-type(2).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -186,7 +188,7 @@
 .services-park-wrap li:nth-of-type(3).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*border-bottom: 2px solid rgba(63,159,254,1);*/
     background: url(../images/services_titico6_active.png) no-repeat center 0;
 }
 
@@ -222,6 +224,7 @@
     font-size:20px;
     cursor: pointer;
     height: 168px;
+    position: relative;
 }
 .services-user-wrap li:nth-of-type(1) {
     padding-top: 114px;
@@ -231,7 +234,7 @@
 .services-user-wrap li:nth-of-type(1).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -242,7 +245,7 @@
 .services-user-wrap li:nth-of-type(2).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*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) {
@@ -252,7 +255,7 @@
 .services-user-wrap li:nth-of-type(3).active {
     color: #3F9FFE;
     padding-bottom: 22px;
-    border-bottom: 2px solid rgba(63,159,254,1);
+    /*border-bottom: 2px solid rgba(63,159,254,1);*/
     background: url(../images/services_titico9_active.png) no-repeat center 0;
 }
 /*footer sta*/
@@ -306,3 +309,18 @@
     background: url("../images/services_footIco3.png") no-repeat;
     /*background-size: ;*/
 }
+/*.ai-success-stories-list-bar{
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    width: 50%;
+    height: 2px;
+    background: rgba(63,159,254,1);
+    transition:width .8s;
+    -webkit-transition:width .8s;
+}
+.ai-bar{
+    width:100%;
+    transition:width .8s;
+    -webkit-transition:width .8s;
+}*/
diff --git a/js/services.js b/js/services.js
index 36e85b3..6a88bab 100644
--- a/js/services.js
+++ b/js/services.js
@@ -2,23 +2,31 @@
 //集团 tab 切换
 $('#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').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')
 });
 
 //车场 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-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
+    $('#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');
 });
 
 //车主 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-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
+    $('#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');
 });
diff --git a/services.html b/services.html
index 9bbfb6c..4c380bf 100644
--- a/services.html
+++ b/services.html
@@ -71,14 +71,18 @@
                 <li class="text-center col-md-6 services-wrap-left-1" id="services-wrap-sass"></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平台
+                            <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-wrap" id="services-section-wrap">
@@ -123,12 +127,15 @@
                         <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">
@@ -181,12 +188,15 @@
                     <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">
diff --git a/style.css b/style.css
index a58fc2f..cc865fd 100755
--- a/style.css
+++ b/style.css
@@ -2609,3 +2609,33 @@ a:hover{
 	}
 }
 
+/*bordr css3 */
+.ai-success-stories-list-bar {
+	width:100%;
+	height:2px;
+	background:rgba(63,159,254,1);
+	position:absolute;
+	bottom: 0;
+	animation:myfirst 0.3s;
+	-moz-animation:myfirst 0.3s; /* Firefox */
+	-webkit-animation:myfirst 0.3s; /* Safari and Chrome */
+	-o-animation:myfirst 0.3s; /* Opera */
+}
+
+@keyframes myfirst
+{
+	0%   {width:0%;}
+	25%  {width:25%;}
+	50%  {width:50%;}
+	75%  {width:75%;}
+	100% {width:100%;}
+}
+
+@-webkit-keyframes myfirst /*Safari and Chrome*/
+{
+	0%   {width:0%;}
+	25%  {width:25%;}
+	50%  {width:50%;}
+	75%  {width:75%;}
+	100% {width:100%;}
+}
\ No newline at end of file
--
libgit2 0.21.4