Commit c39dc7ee05df3bf56392614bd3730d67e2e9bdad
1 parent
b439919c
服务 add css3
Showing
4 changed files
with
82 additions
and
16 deletions
css/services.css
| @@ -68,6 +68,7 @@ | @@ -68,6 +68,7 @@ | ||
| 68 | font-size:20px; | 68 | font-size:20px; |
| 69 | cursor: pointer; | 69 | cursor: pointer; |
| 70 | height: 168px; | 70 | height: 168px; |
| 71 | + position: relative; | ||
| 71 | /*width: 133px;*/ | 72 | /*width: 133px;*/ |
| 72 | } | 73 | } |
| 73 | .services-soft-wrap li:nth-of-type(1) { | 74 | .services-soft-wrap li:nth-of-type(1) { |
| @@ -77,7 +78,7 @@ | @@ -77,7 +78,7 @@ | ||
| 77 | .services-soft-wrap li:nth-of-type(1).active { | 78 | .services-soft-wrap li:nth-of-type(1).active { |
| 78 | color: #3F9FFE; | 79 | color: #3F9FFE; |
| 79 | padding-bottom: 22px; | 80 | padding-bottom: 22px; |
| 80 | - border-bottom: 2px solid rgba(63,159,254,1); | 81 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 81 | background: url(../images/services_titico1_active.png) no-repeat center 0; | 82 | background: url(../images/services_titico1_active.png) no-repeat center 0; |
| 82 | } | 83 | } |
| 83 | .services-soft-wrap li:nth-of-type(2) { | 84 | .services-soft-wrap li:nth-of-type(2) { |
| @@ -89,7 +90,7 @@ | @@ -89,7 +90,7 @@ | ||
| 89 | .services-soft-wrap li:nth-of-type(2).active { | 90 | .services-soft-wrap li:nth-of-type(2).active { |
| 90 | color: #3F9FFE; | 91 | color: #3F9FFE; |
| 91 | padding-bottom: 22px; | 92 | padding-bottom: 22px; |
| 92 | - border-bottom: 2px solid rgba(63,159,254,1); | 93 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 93 | background: url(../images/services_titico2_active.png) no-repeat center 0; | 94 | background: url(../images/services_titico2_active.png) no-repeat center 0; |
| 94 | } | 95 | } |
| 95 | .services-soft-wrap li:nth-of-type(3) { | 96 | .services-soft-wrap li:nth-of-type(3) { |
| @@ -99,7 +100,7 @@ | @@ -99,7 +100,7 @@ | ||
| 99 | .services-soft-wrap li:nth-of-type(3).active { | 100 | .services-soft-wrap li:nth-of-type(3).active { |
| 100 | color: #3F9FFE; | 101 | color: #3F9FFE; |
| 101 | padding-bottom: 22px; | 102 | padding-bottom: 22px; |
| 102 | - border-bottom: 2px solid rgba(63,159,254,1); | 103 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 103 | background: url(../images/services_titico3_active.png) no-repeat center 0; | 104 | background: url(../images/services_titico3_active.png) no-repeat center 0; |
| 104 | } | 105 | } |
| 105 | /*1------tab 右侧 cont*/ | 106 | /*1------tab 右侧 cont*/ |
| @@ -156,6 +157,7 @@ | @@ -156,6 +157,7 @@ | ||
| 156 | font-size:20px; | 157 | font-size:20px; |
| 157 | cursor: pointer; | 158 | cursor: pointer; |
| 158 | height: 168px; | 159 | height: 168px; |
| 160 | + position: relative; | ||
| 159 | } | 161 | } |
| 160 | .services-park-wrap li:nth-of-type(1) { | 162 | .services-park-wrap li:nth-of-type(1) { |
| 161 | padding-top: 114px; | 163 | padding-top: 114px; |
| @@ -164,7 +166,7 @@ | @@ -164,7 +166,7 @@ | ||
| 164 | .services-park-wrap li:nth-of-type(1).active { | 166 | .services-park-wrap li:nth-of-type(1).active { |
| 165 | color: #3F9FFE; | 167 | color: #3F9FFE; |
| 166 | padding-bottom: 22px; | 168 | padding-bottom: 22px; |
| 167 | - border-bottom: 2px solid rgba(63,159,254,1); | 169 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 168 | background: url(../images/services_titico4_active.png) no-repeat center 0; | 170 | background: url(../images/services_titico4_active.png) no-repeat center 0; |
| 169 | } | 171 | } |
| 170 | .services-park-wrap li:nth-of-type(2) { | 172 | .services-park-wrap li:nth-of-type(2) { |
| @@ -176,7 +178,7 @@ | @@ -176,7 +178,7 @@ | ||
| 176 | .services-park-wrap li:nth-of-type(2).active { | 178 | .services-park-wrap li:nth-of-type(2).active { |
| 177 | color: #3F9FFE; | 179 | color: #3F9FFE; |
| 178 | padding-bottom: 22px; | 180 | padding-bottom: 22px; |
| 179 | - border-bottom: 2px solid rgba(63,159,254,1); | 181 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 180 | background: url(../images/services_titico5_active.png) no-repeat center 0; | 182 | background: url(../images/services_titico5_active.png) no-repeat center 0; |
| 181 | } | 183 | } |
| 182 | .services-park-wrap li:nth-of-type(3) { | 184 | .services-park-wrap li:nth-of-type(3) { |
| @@ -186,7 +188,7 @@ | @@ -186,7 +188,7 @@ | ||
| 186 | .services-park-wrap li:nth-of-type(3).active { | 188 | .services-park-wrap li:nth-of-type(3).active { |
| 187 | color: #3F9FFE; | 189 | color: #3F9FFE; |
| 188 | padding-bottom: 22px; | 190 | padding-bottom: 22px; |
| 189 | - border-bottom: 2px solid rgba(63,159,254,1); | 191 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 190 | background: url(../images/services_titico6_active.png) no-repeat center 0; | 192 | background: url(../images/services_titico6_active.png) no-repeat center 0; |
| 191 | } | 193 | } |
| 192 | 194 | ||
| @@ -222,6 +224,7 @@ | @@ -222,6 +224,7 @@ | ||
| 222 | font-size:20px; | 224 | font-size:20px; |
| 223 | cursor: pointer; | 225 | cursor: pointer; |
| 224 | height: 168px; | 226 | height: 168px; |
| 227 | + position: relative; | ||
| 225 | } | 228 | } |
| 226 | .services-user-wrap li:nth-of-type(1) { | 229 | .services-user-wrap li:nth-of-type(1) { |
| 227 | padding-top: 114px; | 230 | padding-top: 114px; |
| @@ -231,7 +234,7 @@ | @@ -231,7 +234,7 @@ | ||
| 231 | .services-user-wrap li:nth-of-type(1).active { | 234 | .services-user-wrap li:nth-of-type(1).active { |
| 232 | color: #3F9FFE; | 235 | color: #3F9FFE; |
| 233 | padding-bottom: 22px; | 236 | padding-bottom: 22px; |
| 234 | - border-bottom: 2px solid rgba(63,159,254,1); | 237 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 235 | background: url(../images/services_titico7_active.png) no-repeat center 0; | 238 | background: url(../images/services_titico7_active.png) no-repeat center 0; |
| 236 | } | 239 | } |
| 237 | .services-user-wrap li:nth-of-type(2) { | 240 | .services-user-wrap li:nth-of-type(2) { |
| @@ -242,7 +245,7 @@ | @@ -242,7 +245,7 @@ | ||
| 242 | .services-user-wrap li:nth-of-type(2).active { | 245 | .services-user-wrap li:nth-of-type(2).active { |
| 243 | color: #3F9FFE; | 246 | color: #3F9FFE; |
| 244 | padding-bottom: 22px; | 247 | padding-bottom: 22px; |
| 245 | - border-bottom: 2px solid rgba(63,159,254,1); | 248 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 246 | background: url(../images/services_titico8_active.png) no-repeat center 0; | 249 | background: url(../images/services_titico8_active.png) no-repeat center 0; |
| 247 | } | 250 | } |
| 248 | .services-user-wrap li:nth-of-type(3) { | 251 | .services-user-wrap li:nth-of-type(3) { |
| @@ -252,7 +255,7 @@ | @@ -252,7 +255,7 @@ | ||
| 252 | .services-user-wrap li:nth-of-type(3).active { | 255 | .services-user-wrap li:nth-of-type(3).active { |
| 253 | color: #3F9FFE; | 256 | color: #3F9FFE; |
| 254 | padding-bottom: 22px; | 257 | padding-bottom: 22px; |
| 255 | - border-bottom: 2px solid rgba(63,159,254,1); | 258 | + /*border-bottom: 2px solid rgba(63,159,254,1);*/ |
| 256 | background: url(../images/services_titico9_active.png) no-repeat center 0; | 259 | background: url(../images/services_titico9_active.png) no-repeat center 0; |
| 257 | } | 260 | } |
| 258 | /*footer sta*/ | 261 | /*footer sta*/ |
| @@ -306,3 +309,18 @@ | @@ -306,3 +309,18 @@ | ||
| 306 | background: url("../images/services_footIco3.png") no-repeat; | 309 | background: url("../images/services_footIco3.png") no-repeat; |
| 307 | /*background-size: ;*/ | 310 | /*background-size: ;*/ |
| 308 | } | 311 | } |
| 312 | +/*.ai-success-stories-list-bar{ | ||
| 313 | + position: absolute; | ||
| 314 | + left: 0; | ||
| 315 | + bottom: 0px; | ||
| 316 | + width: 50%; | ||
| 317 | + height: 2px; | ||
| 318 | + background: rgba(63,159,254,1); | ||
| 319 | + transition:width .8s; | ||
| 320 | + -webkit-transition:width .8s; | ||
| 321 | +} | ||
| 322 | +.ai-bar{ | ||
| 323 | + width:100%; | ||
| 324 | + transition:width .8s; | ||
| 325 | + -webkit-transition:width .8s; | ||
| 326 | +}*/ |
js/services.js
| @@ -2,23 +2,31 @@ | @@ -2,23 +2,31 @@ | ||
| 2 | //集团 tab 切换 | 2 | //集团 tab 切换 |
| 3 | $('#services-soft-wrap li').on('click',function () { | 3 | $('#services-soft-wrap li').on('click',function () { |
| 4 | var _index = $(this).index(); | 4 | var _index = $(this).index(); |
| 5 | + | ||
| 5 | $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)') | 6 | $('#services-wrap-sass').css('background-image','url(images/services_saasIco'+(_index+1)+'.png)') |
| 6 | - $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | 7 | + $('#services-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); |
| 8 | + $('#services-soft-wrap li').children('div').addClass('displaynone'); | ||
| 9 | + $('#services-soft-wrap li').eq(_index).children('div').removeClass('displaynone'); | ||
| 10 | + // $('.ai-success-stories-list-bar').css('left',100*_index); | ||
| 7 | $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | 11 | $('#services-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') |
| 8 | }); | 12 | }); |
| 9 | 13 | ||
| 10 | //车场 tab 切换 | 14 | //车场 tab 切换 |
| 11 | $('#services-park-wrap li').on('click',function () { | 15 | $('#services-park-wrap li').on('click',function () { |
| 12 | var _index = $(this).index(); | 16 | var _index = $(this).index(); |
| 13 | - $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)') | ||
| 14 | - $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | ||
| 15 | - $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | 17 | + $('#services_parkIco').css('background-image','url(images/services_parkIco'+(_index+1)+'.png)'); |
| 18 | + $('#services-park-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); | ||
| 19 | + $('#services-park-wrap li').children('div').addClass('displaynone'); | ||
| 20 | + $('#services-park-wrap li').eq(_index).children('div').removeClass('displaynone'); | ||
| 21 | + $('#services-section-park>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | ||
| 16 | }); | 22 | }); |
| 17 | 23 | ||
| 18 | //车主 tab 切换 | 24 | //车主 tab 切换 |
| 19 | $('#services-user-wrap li').on('click',function () { | 25 | $('#services-user-wrap li').on('click',function () { |
| 20 | var _index = $(this).index(); | 26 | var _index = $(this).index(); |
| 21 | - $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)') | ||
| 22 | - $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active') | ||
| 23 | - $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone') | 27 | + $('#services_userIco').css('background-image','url(images/services_userIco'+(_index+1)+'.png)'); |
| 28 | + $('#services-user-wrap li').eq(_index).addClass('active').siblings().removeClass('active'); | ||
| 29 | + $('#services-user-wrap li').children('div').addClass('displaynone'); | ||
| 30 | + $('#services-user-wrap li').eq(_index).children('div').removeClass('displaynone'); | ||
| 31 | + $('#services-section-user>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone'); | ||
| 24 | }); | 32 | }); |
services.html
| @@ -71,14 +71,18 @@ | @@ -71,14 +71,18 @@ | ||
| 71 | <li class="text-center col-md-6 services-wrap-left-1" id="services-wrap-sass"></li> | 71 | <li class="text-center col-md-6 services-wrap-left-1" id="services-wrap-sass"></li> |
| 72 | <li class="text-center col-md-6 services-wrap-right-1"> | 72 | <li class="text-center col-md-6 services-wrap-right-1"> |
| 73 | <ul class="services-soft-wrap" id="services-soft-wrap"> | 73 | <ul class="services-soft-wrap" id="services-soft-wrap"> |
| 74 | + | ||
| 74 | <li class="text-center float-left active"> | 75 | <li class="text-center float-left active"> |
| 75 | SAAS平台 | 76 | SAAS平台 |
| 77 | + <div class="ai-success-stories-list-bar"></div> | ||
| 76 | </li> | 78 | </li> |
| 77 | <li class="text-center float-left"> | 79 | <li class="text-center float-left"> |
| 78 | 监控中心 | 80 | 监控中心 |
| 81 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 79 | </li> | 82 | </li> |
| 80 | <li class="text-center float-left"> | 83 | <li class="text-center float-left"> |
| 81 | 数据互联 | 84 | 数据互联 |
| 85 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 82 | </li> | 86 | </li> |
| 83 | </ul> | 87 | </ul> |
| 84 | <ul class="services-section-wrap" id="services-section-wrap"> | 88 | <ul class="services-section-wrap" id="services-section-wrap"> |
| @@ -123,12 +127,15 @@ | @@ -123,12 +127,15 @@ | ||
| 123 | <ul class="services-park-wrap" id="services-park-wrap"> | 127 | <ul class="services-park-wrap" id="services-park-wrap"> |
| 124 | <li class="text-center float-left active"> | 128 | <li class="text-center float-left active"> |
| 125 | 车场服务 | 129 | 车场服务 |
| 130 | + <div class="ai-success-stories-list-bar"></div> | ||
| 126 | </li> | 131 | </li> |
| 127 | <li class="text-center float-left"> | 132 | <li class="text-center float-left"> |
| 128 | 云平台 | 133 | 云平台 |
| 134 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 129 | </li> | 135 | </li> |
| 130 | <li class="text-center float-left"> | 136 | <li class="text-center float-left"> |
| 131 | 政府云 | 137 | 政府云 |
| 138 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 132 | </li> | 139 | </li> |
| 133 | </ul> | 140 | </ul> |
| 134 | <ul class="services-section-park" id="services-section-park"> | 141 | <ul class="services-section-park" id="services-section-park"> |
| @@ -181,12 +188,15 @@ | @@ -181,12 +188,15 @@ | ||
| 181 | <ul class="services-user-wrap" id="services-user-wrap"> | 188 | <ul class="services-user-wrap" id="services-user-wrap"> |
| 182 | <li class="text-center float-left active"> | 189 | <li class="text-center float-left active"> |
| 183 | 车主服务 | 190 | 车主服务 |
| 191 | + <div class="ai-success-stories-list-bar"></div> | ||
| 184 | </li> | 192 | </li> |
| 185 | <li class="text-center float-left"> | 193 | <li class="text-center float-left"> |
| 186 | 移动APP | 194 | 移动APP |
| 195 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 187 | </li> | 196 | </li> |
| 188 | <li class="text-center float-left"> | 197 | <li class="text-center float-left"> |
| 189 | 会员服务 | 198 | 会员服务 |
| 199 | + <div class="ai-success-stories-list-bar displaynone"></div> | ||
| 190 | </li> | 200 | </li> |
| 191 | </ul> | 201 | </ul> |
| 192 | <ul class="services-section-user" id="services-section-user"> | 202 | <ul class="services-section-user" id="services-section-user"> |
style.css
| @@ -2609,3 +2609,33 @@ a:hover{ | @@ -2609,3 +2609,33 @@ a:hover{ | ||
| 2609 | } | 2609 | } |
| 2610 | } | 2610 | } |
| 2611 | 2611 | ||
| 2612 | +/*bordr css3 */ | ||
| 2613 | +.ai-success-stories-list-bar { | ||
| 2614 | + width:100%; | ||
| 2615 | + height:2px; | ||
| 2616 | + background:rgba(63,159,254,1); | ||
| 2617 | + position:absolute; | ||
| 2618 | + bottom: 0; | ||
| 2619 | + animation:myfirst 0.3s; | ||
| 2620 | + -moz-animation:myfirst 0.3s; /* Firefox */ | ||
| 2621 | + -webkit-animation:myfirst 0.3s; /* Safari and Chrome */ | ||
| 2622 | + -o-animation:myfirst 0.3s; /* Opera */ | ||
| 2623 | +} | ||
| 2624 | + | ||
| 2625 | +@keyframes myfirst | ||
| 2626 | +{ | ||
| 2627 | + 0% {width:0%;} | ||
| 2628 | + 25% {width:25%;} | ||
| 2629 | + 50% {width:50%;} | ||
| 2630 | + 75% {width:75%;} | ||
| 2631 | + 100% {width:100%;} | ||
| 2632 | +} | ||
| 2633 | + | ||
| 2634 | +@-webkit-keyframes myfirst /*Safari and Chrome*/ | ||
| 2635 | +{ | ||
| 2636 | + 0% {width:0%;} | ||
| 2637 | + 25% {width:25%;} | ||
| 2638 | + 50% {width:50%;} | ||
| 2639 | + 75% {width:75%;} | ||
| 2640 | + 100% {width:100%;} | ||
| 2641 | +} | ||
| 2612 | \ No newline at end of file | 2642 | \ No newline at end of file |