Merge branch 'test' of http://192.168.1.195:9998/web_developers/webportal into test

liuqimichale
2 parents 7d632d11 f2386841
Showing 7 changed files with 223 additions and 141 deletions
css/portfollo.css
css/services.css
js/portfollo.js
js/services.js
portfolio.html
services.html
style.css
+/*breadcrumb*/
+.breadcrumb{
+    width: 100%;
+    height: 682px;
+    background:url('../images/breadcrumb-bg.png');
+    background-size:100% 100%;
+    background-repeat:no-repeat;
  
+}
+.breadcrumb-text{
+    text-align: center;
+    padding-top: 300px;
+    color: #fff;
+    font-size: 71px;
+}
+#portfolio-soft-top{
+    background: #fff;
+}
+/*软件sta-----*/
+.portfolio-soft-wrap li{
+    color:rgba(6,14,19,.8);
+    font-size: 20px;
+    cursor: pointer;
+    position: relative;
+}
+.portfolio-soft-wrap li:nth-of-type(1){
+    padding-top: 60px;
+    background: url("../images/portfolio-soft-wrap-1.png") no-repeat center 0;
+
+}
+.portfolio-soft-wrap li:nth-of-type(2){
+    padding-top: 60px;
+    background: url("../images/portfolio-soft-wrap-2.png") no-repeat center 0;
+
+}
+.portfolio-soft-wrap li:nth-of-type(3){
+    padding-top: 60px;
+    background: url("../images/portfolio-soft-wrap-3.png") no-repeat center 0;
+
+}
+.portfolio-soft-wrap li:nth-of-type(1).active{
+    color: #3F9FFE;
+    padding-bottom: 10px;
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
+    background: url("../images/portfolio-soft-wrap-1-active.png") no-repeat center 0;
+}
+.portfolio-soft-wrap li:nth-of-type(2).active{
+    color: #3F9FFE;
+    padding-bottom: 10px;
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
+    background: url("../images/portfolio-soft-wrap-2-active.png") no-repeat center 0;
+}
+.portfolio-soft-wrap li:nth-of-type(3).active{
+    color: #3F9FFE;
+    padding-bottom: 10px;
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
+    background: url("../images/portfolio-soft-wrap-3-active.png") no-repeat center 0;
+}
+
+.portfolio-section-wrap{
+    min-height: 596px;
+}
+.portfolio-section-wrap>li{
+}
+.portfolio-section-wrap>li li{
+    height: 596px;
+}
+.ortfolio-soft-bottom-1>li:nth-of-type(1){
+    background: url("../images/ortfolio-soft-mobile.gif") no-repeat center center;
+    background-size: 100% 80%;
+}
+.ortfolio-soft-bottom-1 li:nth-of-type(2){
+    padding-left: 100px;
+}
+.ortfolio-soft-bottom-2 li:nth-of-type(1){
+    background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;
+    background-size: 100% 70%;
+}
+.ortfolio-soft-bottom-2 li:nth-of-type(2){
+    padding-left:100px;
+}
+.ortfolio-soft-bottom-3 li:nth-of-type(1){
+    background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;
+    background-size: 100% 70%;
+}
+.ortfolio-soft-bottom-3 li:nth-of-type(2){
+    padding-left:100px;
+}
+.ortfolio-soft-bottom-title{
+    font-size:30px;
+    font-weight:bold;
+    color:rgba(0,0,0,.8);
+    margin: 239px 0 27px;
+    text-align: left;
+}
+.ortfolio-soft-bottom-des{
+    font-size: 16px;
+    text-align: left;
+    color:rgba(0,0,0,.6);
+    padding-left: 20px;
+    position: relative;
+}
+.ortfolio-soft-bottom-des span{
+    width:6px;
+    height:6px;
+    display: inline-block;
+    position: relative;
+}
+.ortfolio-soft-bottom-des span:before{
+    position: absolute;
+    content: '';
+    left: -10px;
+    top:50%;
+    margin-top: -6px;
+    width:6px;
+    height:6px;
+    background:rgba(66,160,251,1);
+    border-radius:50%;
+}
+/*硬件sta-----*/
 .portfolio-hardware-top{
     background: #fff;
     padding-top: 101px !important;
@@ -8,6 +127,7 @@
     color:rgba(6,14,19,.8);
     font-size: 20px;
     cursor: pointer;
+    position: relative;
 }
 .portfolio-hardware-wrap li:nth-of-type(1){
     padding-top: 60px;
@@ -32,26 +152,26 @@
 .portfolio-hardware-wrap li:nth-of-type(1).active{
     color: #3F9FFE;
     padding-bottom: 10px;
-    border-bottom: 3px solid rgba(63,159,254,1);
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
     background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0;
 }
 .portfolio-hardware-wrap li:nth-of-type(2).active{
     color: #3F9FFE;
     padding-bottom: 10px;
-    border-bottom: 3px solid rgba(63,159,254,1);
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
     background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
     /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/
 }
 .portfolio-hardware-wrap li:nth-of-type(3).active{
     color: #3F9FFE;
     padding-bottom: 10px;
-    border-bottom: 3px solid rgba(63,159,254,1);
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
     background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0;
 }
 .portfolio-hardware-wrap li:nth-of-type(4).active{
     color: #3F9FFE;
     padding-bottom: 10px;
-    border-bottom: 3px solid rgba(63,159,254,1);
+    /*border-bottom: 3px solid rgba(63,159,254,1);*/
     background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
 }
  
@@ -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;
+}*/
 //软件
 $('#portfolio-soft-wrap li').on('click',function () {
     var _index = $(this).index();
-    $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
-    $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
+    $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
+    $('#portfolio-soft-wrap li').children('div').addClass('displaynone');
+    $('#portfolio-soft-wrap li').eq(_index).children('div').removeClass('displaynone');
+    $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
 })
 //硬件
 $('#portfolio-hardware-wrap li').on('click',function () {
     var _index = $(this).index();
-    $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
-    $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
+    $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active');
+    $('#portfolio-hardware-wrap li').children('div').addClass('displaynone');
+    $('#portfolio-hardware-wrap li').eq(_index).children('div').removeClass('displaynone');
+    $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone');
 })
@@ -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');
 });
@@ -78,12 +78,15 @@
             <ul class="portfolio-soft-wrap" id="portfolio-soft-wrap">
                 <li class="text-center col-md-4 active">
                     任你停
+                    <div class="ai-success-stories-list-bar"></div>
                 </li>
                 <li class="text-center col-md-4">
                     企业云平台
+                    <div class="ai-success-stories-list-bar displaynone"></div>
                 </li>
                 <li class="text-center col-md-4">
                     数据分析平台
+                    <div class="ai-success-stories-list-bar displaynone"></div>
                 </li>
             </ul>
         </div>
@@ -178,15 +181,19 @@
             <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap">
                 <li class="text-center col-md-3 active">
                     封闭式设备
+                    <div class="ai-success-stories-list-bar"></div>
                 </li>
                 <li class="text-center col-md-3">
                     开放式设备
+                    <div class="ai-success-stories-list-bar displaynone"></div>
                 </li>
                 <li class="text-center col-md-3">
                     场内引导设备
+                    <div class="ai-success-stories-list-bar displaynone"></div>
                 </li>
                 <li class="text-center col-md-3">
                     停车诱导设备
+                    <div class="ai-success-stories-list-bar displaynone"></div>
                 </li>
  
             </ul>
@@ -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">
@@ -104,24 +104,7 @@ a:hover{
 .tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
  
  
-/*breadcrumb*/
-.breadcrumb{
-	width: 100%;
-	height: 682px;
-	background:url('images/breadcrumb-bg.png');
-	background-size:100% 100%;
-	background-repeat:no-repeat;
  
-}
-.breadcrumb-text{
-	text-align: center;
-	padding-top: 300px;
-	color: #fff;
-	font-size: 71px;
-}
-#portfolio-soft-top{
-	background: #fff;
-}
 .section-title-name{
 	font-size: 36px;
 	font-weight: 500;
@@ -132,109 +115,10 @@ a:hover{
 	text-align: center;
 	margin-bottom: 40px;
 }
-
-.portfolio-soft-wrap li{
-	color:rgba(6,14,19,.8);
-	font-size: 20px;
-	cursor: pointer;
-}
-.portfolio-soft-wrap li:nth-of-type(1){
-	padding-top: 60px;
-	background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0;
-
-}
-.portfolio-soft-wrap li:nth-of-type(2){
-	padding-top: 60px;
-	background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0;
-
-}
-.portfolio-soft-wrap li:nth-of-type(3){
-	padding-top: 60px;
-	background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0;
-
-}
-.portfolio-soft-wrap li:nth-of-type(1).active{
-	color: #3F9FFE;
-	padding-bottom: 10px;
-	border-bottom: 3px solid rgba(63,159,254,1);
-	background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0;
-}
-.portfolio-soft-wrap li:nth-of-type(2).active{
-	color: #3F9FFE;
-	padding-bottom: 10px;
-	border-bottom: 3px solid rgba(63,159,254,1);
-	background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0;
-}
-.portfolio-soft-wrap li:nth-of-type(3).active{
-	color: #3F9FFE;
-	padding-bottom: 10px;
-	border-bottom: 3px solid rgba(63,159,254,1);
-	background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0;
-}
-
-.portfolio-section-wrap{
-	min-height: 596px;
-}
-.portfolio-section-wrap>li{
-}
-.portfolio-section-wrap>li li{
-	height: 596px;
-}
 .displaynone{
 	display: none;
 }
-.ortfolio-soft-bottom-1>li:nth-of-type(1){
-	background: url("images/ortfolio-soft-mobile.gif") no-repeat center center;
-	background-size: 100% 80%;
-}
-.ortfolio-soft-bottom-1 li:nth-of-type(2){
-	padding-left: 100px;
-}
-.ortfolio-soft-bottom-2 li:nth-of-type(1){
-	background: url("images/ortfolio-soft-pc1.gif") no-repeat center center;
-	background-size: 100% 70%;
-}
-.ortfolio-soft-bottom-2 li:nth-of-type(2){
-	padding-left:100px;
-}
-.ortfolio-soft-bottom-3 li:nth-of-type(1){
-	background: url("images/ortfolio-soft-pc2.gif") no-repeat center center;
-	background-size: 100% 70%;
-}
-.ortfolio-soft-bottom-3 li:nth-of-type(2){
-	padding-left:100px;
-}
-.ortfolio-soft-bottom-title{
-	font-size:30px;
-	font-weight:bold;
-	color:rgba(0,0,0,.8);
-	margin: 239px 0 27px;
-	text-align: left;
-}
-.ortfolio-soft-bottom-des{
-	font-size: 16px;
-	text-align: left;
-	color:rgba(0,0,0,.6);
-	padding-left: 20px;
-	position: relative;
-}
-.ortfolio-soft-bottom-des span{
-	width:6px;
-	height:6px;
-	display: inline-block;
-	position: relative;
-}
-.ortfolio-soft-bottom-des span:before{
-	position: absolute;
-	content: '';
-	left: -10px;
-	top:50%;
-	margin-top: -6px;
-	width:6px;
-	height:6px;
-	background:rgba(66,160,251,1);
-	border-radius:50%;
-}
+
 .slicknav_menu{
 	display:none;
 }
@@ -2609,3 +2493,34 @@ a:hover{
 	}
 }
  
+/*bordr css3 */
+.ai-success-stories-list-bar {
+	width:100%;
+	height:2px;
+	background:rgba(63,159,254,1);
+	position:absolute;
+	bottom: 0;
+	left: 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