diff --git a/css/services.css b/css/services.css new file mode 100644 index 0000000..096416c --- /dev/null +++ b/css/services.css @@ -0,0 +1,119 @@ +.services-banner{ + width: 100%; + height: 600px; + background: url(../images/services_bgIxo.png); + background-size: 100% 100%; + background-repeat: no-repeat; +} +.services-bannertit{ + width:600px; + height:50px; + line-height: 50px; + font-size:48px; + font-weight:500; + color:rgba(255,255,255,1); + text-align: center; + margin: 191px auto 44px; + +} +.services-bannertext{ + width:450px; + height:25px; + line-height:25px; + font-size:24px; + font-weight:500; + color:rgba(255,255,255,1); + text-align: center; + margin: 0 auto; +} +.services-content{ + background-color: #fff; +} +/*tab sta */ +.services-wrap{ + height: 680px; + width: 1200px; + margin: 0 auto; +} +.services-wrap-left-1{ + background: url("../images/services_saasIco.png") no-repeat; + width: 542px; + height: 494px; + margin-top: 102px; + margin-left: 50px; +} +.services-wrap-right-1{ + width: 543px; + height: 400px; + margin-top: 177px; + margin-left: 50px; +} +/*tab 右侧 切换部分 sta*/ +.services-soft-wrap{ + height: 168px; + width: 100%; + border-bottom: 2px solid rgba(228,229,229,1);; +} +.services-soft-wrap li { + color: rgba(6,14,19,.8); + font-size:20px; + cursor: pointer; + height: 168px; + width: 133px; +} +.services-soft-wrap li:nth-of-type(1) { + padding-top: 114px; + background: url(../images/services_titico1_active.png) no-repeat center 0; + margin-right: 72px; +} +.services-soft-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_titico1_active.png) no-repeat center 0; +} +.services-soft-wrap li:nth-of-type(2) { + padding-top: 114px; + background: url(../images/services_titico2.png) no-repeat center 0; + margin-right: 72px; +} +.services-soft-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_titico2_active.png) no-repeat center 0; +} +.services-soft-wrap li:nth-of-type(3) { + padding-top: 114px; + background: url(../images/services_titico3.png) no-repeat center 0; +} +.services-soft-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_titico3_active.png) no-repeat center 0; +} +/*tab 右侧 cont*/ +.services-section-wrap{ + height: 100px; + margin-top: 58px; + width: 400px; +} +.services-soft-bottom-title{ + width:230px; + height:30px; + font-size:30px; + font-weight:500; + color:rgba(0,0,0,1); + margin-bottom: 22px; +} +.services-soft-bottom-des{ + text-align: left; + width:400px; + height:44px; + line-height: 22px; + font-size:16px; + font-weight:400; + color:rgba(0,0,0,0.7); +} + diff --git a/images/services_bgIxo.png b/images/services_bgIxo.png new file mode 100755 index 0000000..7fa9631 --- /dev/null +++ b/images/services_bgIxo.png diff --git a/images/services_footIco1.png b/images/services_footIco1.png new file mode 100755 index 0000000..bf0dff3 --- /dev/null +++ b/images/services_footIco1.png diff --git a/images/services_footIco2.png b/images/services_footIco2.png new file mode 100755 index 0000000..df6a191 --- /dev/null +++ b/images/services_footIco2.png diff --git a/images/services_footIco3.png b/images/services_footIco3.png new file mode 100755 index 0000000..8aec220 --- /dev/null +++ b/images/services_footIco3.png diff --git a/images/services_parkIco.png b/images/services_parkIco.png new file mode 100755 index 0000000..164fb2a --- /dev/null +++ b/images/services_parkIco.png diff --git a/images/services_saasIco.png b/images/services_saasIco.png new file mode 100755 index 0000000..871b8cd --- /dev/null +++ b/images/services_saasIco.png diff --git a/images/services_titico1_active.png b/images/services_titico1_active.png new file mode 100755 index 0000000..c7c9b57 --- /dev/null +++ b/images/services_titico1_active.png diff --git a/images/services_titico2.png b/images/services_titico2.png new file mode 100755 index 0000000..be246ba --- /dev/null +++ b/images/services_titico2.png diff --git a/images/services_titico3.png b/images/services_titico3.png new file mode 100755 index 0000000..057ec3c --- /dev/null +++ b/images/services_titico3.png diff --git a/images/services_titico4_active.png b/images/services_titico4_active.png new file mode 100755 index 0000000..5422b31 --- /dev/null +++ b/images/services_titico4_active.png diff --git a/images/services_titico5.png b/images/services_titico5.png new file mode 100755 index 0000000..3cb48b0 --- /dev/null +++ b/images/services_titico5.png diff --git a/images/services_titico6.png b/images/services_titico6.png new file mode 100755 index 0000000..0a56976 --- /dev/null +++ b/images/services_titico6.png diff --git a/images/services_titico7_active.png b/images/services_titico7_active.png new file mode 100755 index 0000000..a96e657 --- /dev/null +++ b/images/services_titico7_active.png diff --git a/images/services_titico8.png b/images/services_titico8.png new file mode 100755 index 0000000..a74b4b3 --- /dev/null +++ b/images/services_titico8.png diff --git a/images/services_titico9.png b/images/services_titico9.png new file mode 100755 index 0000000..e01f7dd --- /dev/null +++ b/images/services_titico9.png diff --git a/images/services_userIco.png b/images/services_userIco.png new file mode 100755 index 0000000..84e3d8c --- /dev/null +++ b/images/services_userIco.png diff --git a/js/services.js b/js/services.js new file mode 100644 index 0000000..7ae1ea9 --- /dev/null +++ b/js/services.js @@ -0,0 +1,8 @@ + +//集团 tab 切换 +$('#services-soft-wrap li').on('click',function () { + var _index = $(this).index(); + 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') +}) \ No newline at end of file diff --git a/services.html b/services.html index fc7bbbe..7273028 100644 --- a/services.html +++ b/services.html @@ -28,45 +28,96 @@ + - - - - - - - - - - - + - - - - - - - - - - - - - - - + + +
+
+
+
+
+ 专业智慧停车综合服务平台 +
+
+ 服务一体化+运营智能化+使用便捷化 +
+
+
+
+
+ +
+
+ + + + + + + + +
+
+