服务页集团部分

Andy
1 parent ff43139b
Showing 19 changed files with 205 additions and 26 deletions
css/services.css
images/services_bgIxo.png
images/services_footIco1.png
images/services_footIco2.png
images/services_footIco3.png
images/services_parkIco.png
images/services_saasIco.png
images/services_titico1_active.png
images/services_titico2.png
images/services_titico3.png
images/services_titico4_active.png
images/services_titico5.png
images/services_titico6.png
images/services_titico7_active.png
images/services_titico8.png
images/services_titico9.png
images/services_userIco.png
js/services.js
services.html
+.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);
+}
+
+
+//集团 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
@@ -28,45 +28,96 @@
     <link type="text/css" rel="stylesheet" href="css/normalize.css">
     <link type="text/css" rel="stylesheet" href="style.css?a=1">
     <link type="text/css" rel="stylesheet" href="css/responsive.css">
+    <link type="text/css" rel="stylesheet" href="css/services.css">
     <!-- Color CSS -->
     <link type="text/css" rel="stylesheet" href="css/color/color7.css">
-    <!--<link rel="stylesheet" href="css/color/color1.css">-->
-    <!--<link rel="stylesheet" href="css/color/color2.css">-->
-    <!--<link rel="stylesheet" href="css/color/color3.css">-->
-    <!--<link rel="stylesheet" href="css/color/color4.css">-->
-    <!--<link rel="stylesheet" href="css/color/color5.css">-->
-    <!--<link rel="stylesheet" href="css/color/color6.css">-->
-    <!--<link rel="stylesheet" href="css/color/color8.css">-->
-    <!--<link rel="stylesheet" href="css/color/color9.css">-->
-
-    <!--<link type="text/css" rel="stylesheet" href="" id="colors">-->
-
+    <style>
+        #nav>li:nth-child(3){
+            border-bottom: 2px solid #fff;
+        }
+    </style>
 </head>
 <body>
-<!--<div class="color-plate ">-->
-<!--<a class="icon"><i class="fa fa-cog fa-spin"></i></a>-->
-<!--<h2>Ruby Color</h2>-->
-<!--<div class="color-head">-->
-<!--<span class="color1"></span>-->
-<!--<span class="color2"></span>-->
-<!--<span class="color3"></span>-->
-<!--<span class="color4"></span>-->
-<!--<span class="color5"></span>-->
-<!--<span class="color6"></span>-->
-<!--<span class="color7"></span>-->
-<!--<span class="color8"></span>-->
-<!--<span class="color9"></span>-->
-<!--</div>-->
-<!--</div>-->
 <!-- Header Area -->
 <header id="header" class="header">
 </header>
 <!--/ End Header Area -->
+<!--content sta-->
+<!--banner sta-->
+<div class="services-banner">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="services-bannertit">
+                    专业智慧停车综合服务平台
+                </div>
+                <div class="services-bannertext">
+                    服务一体化+运营智能化+使用便捷化
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--banner end-->
+<div class="services-content">
+    <div class="container">
+            <!--集团 sta-->
+            <ul class=" services-wrap" >
+                <li class="text-center float-left services-wrap-left-1"></li>
+                <li class="text-center float-left services-wrap-right-1">
+                    <ul class="services-soft-wrap" id="services-soft-wrap">
+                        <li class="text-center float-left active">
+                            SAAS平台
+                        </li>
+                        <li class="text-center float-left">
+                            监控中心
+                        </li>
+                        <li class="text-center float-left">
+                            数据互联
+                        </li>
+                    </ul>
+                    <ul class="services-section-wrap" id="services-section-wrap">
+                        <li class="">
+                            <div class="services-soft-bottom-title">
+                                集团SAAS云平台
+                            </div>
+                            <div class="services-soft-bottom-des">
+                                跨平台停车管控云平台系统，提供集中数据管理和监控、数据挖掘和分析、资产管理和增值运营等一体化服务。
+                            </div>
+                        </li>
+                        <li class="displaynone">
+                            <div class="services-soft-bottom-title">
+                                集团SAAS云平台
+                            </div>
+                            <div class="services-soft-bottom-des">
+                                跨平台停车管控云平台系统，提供集中数据管理和监控、数据挖掘和分析、资产管理和增值运营等一体化服务。
+                            </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-->
+            <!--车主 end-->
+    </div>
+</div>
+<!--content end-->
 <!-- Footer Area -->
 <footer id="footer" class="footer_cont">
@@ -93,5 +144,6 @@
 <script type="text/javascript" src="js/gmaps.min.js"></script>
 <script type="text/javascript" src="js/nav-footer.js?a=2"></script>
 <script type="text/javascript" src="js/main.js?a=2"></script>
+<script type="text/javascript" src="js/services.js?a=2"></script>
 </body>
 </html>