BJ_web_developers / webportal

Commit 8398ceab4bb5a1b2f3c763edeea742c3b9390d41

Authored by Andy
2 parents f7547cea 8a04149d

add

Inline Side-by-side
Showing 9 changed files with 288 additions and 144 deletions
images/portfolio-soft-wrap-1-active.png 0 → 100755
View file @8398cea

2.45 KB
images/portfolio-soft-wrap-1.png 0 → 100755
View file @8398cea

2.95 KB
images/portfolio-soft-wrap-2-active.png 0 → 100755
View file @8398cea

1.87 KB
images/portfolio-soft-wrap-2.png 0 → 100755
View file @8398cea

2.24 KB
images/portfolio-soft-wrap-3-active.png 0 → 100755
View file @8398cea

2.04 KB
images/portfolio-soft-wrap-3.png 0 → 100755
View file @8398cea

2.43 KB
js/main.js
  View file @8398cea
@@ -198,3 +198,8 @@ @@ -198,3 +198,8 @@
198 198
199 }) 199 })
200 200
  201 + $('#portfolio-soft-wrap li').on('click',function () {
  202 + var _index = $(this).index();
  203 + $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
  204 + $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
  205 + })
portfolio.html
  View file @8398cea
1 <!Doctype html> 1 <!Doctype html>
2 <html class="no-js" lang=""> 2 <html class="no-js" lang="">
3 - <head>  
4 - <meta charset="utf-8">  
5 - <meta http-equiv="x-ua-compatible" content="ie=edge">  
6 - <title>产品介绍</title>  
7 - <meta name="description" content="">  
8 - <meta name="viewport" content="width=device-width, initial-scale=1">  
9 -  
10 - <link type="text/css" rel="icon" href="images/logo.png">  
11 - <!-- Place favicon.ico in the root directory -->  
12 -  
13 - <!-- Google Fonts -->  
14 - <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">  
15 -  
16 - <link rel="stylesheet" href="css/bootstrap.min.css">  
17 - <link rel="stylesheet" href="css/slicknav.min.css">  
18 - <link rel="stylesheet" href="css/bootstrap-theme.min.css">  
19 - <link rel="stylesheet" href="css/owl.carousel.min.css">  
20 - <link rel="stylesheet" href="css/owl.theme.default.min.css">  
21 - <link rel="stylesheet" href="css/animate.min.css">  
22 - <link rel="stylesheet" href="css/animate-text.css">  
23 - <link rel="stylesheet" href="css/magnific-popup.css">  
24 - <link rel="stylesheet" href="css/font-awesome.min.css">  
25 -  
26 - <!-- Ruby CSS -->  
27 - <link rel="stylesheet" href="css/normalize.css">  
28 - <link rel="stylesheet" href="style.css">  
29 - <link rel="stylesheet" href="css/responsive.css">  
30 -  
31 - <!-- Color CSS -->  
32 - <link rel="stylesheet" href="css/color/color7.css">  
33 - <!--<link rel="stylesheet" href="css/color/color1.css">-->  
34 - <!--<link rel="stylesheet" href="css/color/color2.css">-->  
35 - <!--<link rel="stylesheet" href="css/color/color3.css">-->  
36 - <!--<link rel="stylesheet" href="css/color/color4.css">-->  
37 - <!--<link rel="stylesheet" href="css/color/color5.css">-->  
38 - <!--<link rel="stylesheet" href="css/color/color6.css">-->  
39 - <!--<link rel="stylesheet" href="css/color/color8.css">-->  
40 - <!--<link rel="stylesheet" href="css/color/color9.css">-->  
41 -  
42 - <!--<link rel="stylesheet" href="#" id="colors">-->  
43 -  
44 - </head>  
45 - <body>  
46 -  
47 -  
48 - <!-- Header Area -->  
49 - <header id="header" class="header">  
50 -  
51 - </header>  
52 - <!--/ End Header Area -->  
53 -  
54 -  
55 - <!--breadcrumb -->  
56 - <div class="breadcrumb" >  
57 - <div class="container">  
58 - <div class="row">  
59 - <div class="col-md-12">  
60 - <div class="breadcrumb-text">  
61 - 城市智慧停车综合解决方案领航者  
62 - </div>  
63 - </div>  
64 - </div>  
65 - </div>  
66 - </div>  
67 - <!--/ End breadcrumb -->  
68 -  
69 - <!-- Latest Works Area -->  
70 - <section id="portfolio-soft" class="section">  
71 - <div class="container">  
72 - <div class="row">  
73 - <div class="col-md-12">  
74 - <div class="section-title">  
75 - <h2>硬件设备</h2>  
76 - <ul>  
77 - <li class="text-center">  
78 - 任你停  
79 - </li>  
80 - <li class="text-center">  
81 - 企业云平台  
82 - </li>  
83 - <li class="text-center">  
84 - 数据分析平台  
85 - </li>  
86 - </ul>  
87 - </div>  
88 - </div>  
89 - </div>  
90 - <div class="row">  
91 -  
92 - <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInLeft " data-wow-duration="0.8s" data-wow-delay="0.9s">  
93 - <div class="features-container-text">  
94 - <ul class="features-container">  
95 - <li>高清智能芯片、车辆进出场车牌识别快、准、清。</li>  
96 - <li>地磁、视频桩、PDA多级设备联动，路侧车辆入场实时通知。</li>  
97 - <li>多级诱导系统 ,车位、路况信息精准、高清展示、为车主快速 ‘指路’。</li>  
98 - <li>低照度、高防护、成像高清、违章抓拍系统让 违章停车 无所遁形</li>  
99 - </ul>  
100 - </div>  
101 -  
102 - </div>  
103 - <div class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight" data-wow-duration="0.8s" data-wow-delay="0.9s">  
104 - <div class="feature-left">  
105 - <img src="images/deviceall.png" alt="#">  
106 - </div>  
107 - </div>  
108 - </div>  
109 - </div>  
110 - </section>  
111 - <!--/ End Works Area -->  
112 -  
113 -  
114 -  
115 -  
116 -  
117 -  
118 - <!-- Footer Area -->  
119 - <footer id="footer" class="footer_cont">  
120 -  
121 - </footer>  
122 - <!--/ End Footer Area -->  
123 -  
124 - <script src="js/jquery.min.js"></script>  
125 - <script src="js/bootstrap.min.js"></script>  
126 - <script src="js/colors.js"></script>  
127 - <script src="js/jquery.nav.js"></script>  
128 - <script src="js/jquery.scrollUp.min.js"></script>  
129 - <script src="js/jquery.slicknav.min.js"></script>  
130 - <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>  
131 - <script src="js/owl.carousel.min.js"></script>  
132 -  
133 - <script src="js/isotope.pkgd.min.js"></script>  
134 - <script src="js/wow.min.js"></script>  
135 - <script src="js/jquery.stellar.min.js"></script>  
136 - <script src="js/jquery.magnific-popup.min.js"></script>  
137 - <script src="js/animate-text.js"></script>  
138 - <!--<script src="js/particles.min.js"></script>-->  
139 - <!--<script src="js/particle-code.js"></script>-->  
140 - <script src="js/jquery.counterup.min.js"></script>  
141 - <script type="text/javascript" src="js/swiper.js"></script>  
142 - <script type="text/javascript" src="js/gmaps.min.js"></script>  
143 - <script type="text/javascript" src="js/nav-footer.js?a=1"></script>  
144 -  
145 - </body> 3 +<head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 + <title>产品介绍</title>
  7 + <meta name="description" content="">
  8 + <meta name="viewport" content="width=device-width, initial-scale=1">
  9 +
  10 + <link type="text/css" rel="icon" href="images/logo.png">
  11 + <!-- Place favicon.ico in the root directory -->
  12 +
  13 + <!-- Google Fonts -->
  14 + <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
  15 +
  16 + <link rel="stylesheet" href="css/bootstrap.min.css">
  17 + <link rel="stylesheet" href="css/slicknav.min.css">
  18 + <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  19 + <link rel="stylesheet" href="css/owl.carousel.min.css">
  20 + <link rel="stylesheet" href="css/owl.theme.default.min.css">
  21 + <link rel="stylesheet" href="css/animate.min.css">
  22 + <link rel="stylesheet" href="css/animate-text.css">
  23 + <link rel="stylesheet" href="css/magnific-popup.css">
  24 + <link rel="stylesheet" href="css/font-awesome.min.css">
  25 +
  26 + <!-- Ruby CSS -->
  27 + <link rel="stylesheet" href="css/normalize.css">
  28 + <link rel="stylesheet" href="style.css">
  29 + <link rel="stylesheet" href="css/responsive.css">
  30 +
  31 + <!-- Color CSS -->
  32 + <link rel="stylesheet" href="css/color/color7.css">
  33 + <!--<link rel="stylesheet" href="css/color/color1.css">-->
  34 + <!--<link rel="stylesheet" href="css/color/color2.css">-->
  35 + <!--<link rel="stylesheet" href="css/color/color3.css">-->
  36 + <!--<link rel="stylesheet" href="css/color/color4.css">-->
  37 + <!--<link rel="stylesheet" href="css/color/color5.css">-->
  38 + <!--<link rel="stylesheet" href="css/color/color6.css">-->
  39 + <!--<link rel="stylesheet" href="css/color/color8.css">-->
  40 + <!--<link rel="stylesheet" href="css/color/color9.css">-->
  41 +
  42 + <!--<link rel="stylesheet" href="#" id="colors">-->
  43 +
  44 +</head>
  45 +<body>
  46 +
  47 +
  48 +<!-- Header Area -->
  49 +<header id="header" class="header">
  50 +
  51 +</header>
  52 +<!--/ End Header Area -->
  53 +
  54 +
  55 +<!--breadcrumb -->
  56 +<div class="breadcrumb" >
  57 + <div class="container">
  58 + <div class="row">
  59 + <div class="col-md-12">
  60 + <div class="breadcrumb-text">
  61 + 城市智慧停车综合解决方案领航者
  62 + </div>
  63 + </div>
  64 + </div>
  65 + </div>
  66 +</div>
  67 +<!--/ End breadcrumb -->
  68 +
  69 +<section id="portfolio-soft-top" class="section">
  70 + <div class="container">
  71 + <div class="row">
  72 + <div class="section-title-name">软件平台</div>
  73 + <ul class="portfolio-soft-wrap" id="portfolio-soft-wrap">
  74 + <li class="text-center col-md-4 active">
  75 + 任你停
  76 + </li>
  77 + <li class="text-center col-md-4">
  78 + 企业云平台
  79 + </li>
  80 + <li class="text-center col-md-4">
  81 + 数据分析平台
  82 + </li>
  83 + </ul>
  84 + </div>
  85 + </div>
  86 +</section>
  87 +<ul class="portfolio-section-wrap" id="portfolio-section-wrap">
  88 + <li class="">
  89 + <section>
  90 + <div class="container">
  91 + <ul class="row ortfolio-soft-bottom-1">
  92 + <li class="text-center col-md-6">
  93 + 1
  94 + </li>
  95 + <li class="text-center col-md-6">
  96 + <div class="ortfolio-soft-bottom-title">
  97 + 任你停APP
  98 + </div>
  99 + <div class="ortfolio-soft-bottom-des">车场智能推荐,一键导航随停即走
  100 +
  101 + </div>
  102 + <div class="ortfolio-soft-bottom-des">电子支付，简单方便，账户余额，自动代扣，快速离场
  103 + </div>
  104 + <div class="ortfolio-soft-bottom-des">会员卡线上办理，到期智能提醒，快捷实用
  105 + </div>
  106 + <div class="ortfolio-soft-bottom-des">积分兑换，礼券不断，优惠多多</div>
  107 + </li>
  108 +
  109 + </ul>
  110 + </div>
  111 + </section>
  112 + </li>
  113 + <li class="displaynone">
  114 + <section>
  115 + <div class="container">
  116 + <ul class="row ortfolio-soft-bottom-2">
  117 + <li class="text-center col-md-6">
  118 + 1
  119 + </li>
  120 + <li class="text-center col-md-6">
  121 + 2
  122 + </li>
  123 +
  124 + </ul>
  125 + </div>
  126 + </section>
  127 + </li>
  128 + <li class="displaynone">
  129 + <section>
  130 + <div class="container">
  131 + <ul class="row ortfolio-soft-bottom-3">
  132 + <li class="text-center col-md-6">
  133 + 1
  134 + </li>
  135 + <li class="text-center col-md-6">
  136 + 2
  137 + </li>
  138 +
  139 + </ul>
  140 + </div>
  141 + </section>
  142 + </li>
  143 +</ul>
  144 +
  145 +
  146 +
  147 +
  148 +
  149 +
  150 +
  151 +<!-- Footer Area -->
  152 +<footer id="footer" class="footer_cont">
  153 +
  154 +</footer>
  155 +<!--/ End Footer Area -->
  156 +
  157 +<script src="js/jquery.min.js"></script>
  158 +<script src="js/bootstrap.min.js"></script>
  159 +<script src="js/colors.js"></script>
  160 +<script src="js/jquery.nav.js"></script>
  161 +<script src="js/jquery.scrollUp.min.js"></script>
  162 +<script src="js/jquery.slicknav.min.js"></script>
  163 +<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
  164 +<script src="js/owl.carousel.min.js"></script>
  165 +<script src="js/isotope.pkgd.min.js"></script>
  166 +<script src="js/wow.min.js"></script>
  167 +<script src="js/jquery.stellar.min.js"></script>
  168 +<script src="js/jquery.magnific-popup.min.js"></script>
  169 +<script src="js/animate-text.js"></script>
  170 +<!--<script src="js/particles.min.js"></script>-->
  171 +<!--<script src="js/particle-code.js"></script>-->
  172 +<script src="js/jquery.counterup.min.js"></script>
  173 +<script type="text/javascript" src="js/swiper.js"></script>
  174 +<script type="text/javascript" src="js/gmaps.min.js"></script>
  175 +<script type="text/javascript" src="js/nav-footer.js"></script>
  176 +<script src="js/main.js?a=1"></script>
  177 +</body>
146 </html> 178 </html>
style.css
  View file @8398cea
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 padding:0; 4 padding:0;
5 } 5 }
6 .section{ 6 .section{
7 - padding:162px 0 19px 0; 7 + padding:162px 0 0 0;
8 } 8 }
9 html,body { 9 html,body {
10 height: 100%; 10 height: 100%;
@@ -118,8 +118,115 @@ a:hover{ @@ -118,8 +118,115 @@ a:hover{
118 color: #fff; 118 color: #fff;
119 font-size: 71px; 119 font-size: 71px;
120 } 120 }
  121 +#portfolio-soft-top{
  122 + background: #fff;
  123 +}
  124 +.section-title-name{
  125 + font-size: 36px;
  126 + font-weight: 500;
  127 + text-transform: uppercase;
  128 + padding-bottom: 15px;
  129 + margin-bottom: 15px;
  130 + position: relative;
  131 + text-align: center;
  132 + margin-bottom: 40px;
  133 +}
  134 +
  135 +.portfolio-soft-wrap li{
  136 + color:rgba(6,14,19,.8);
  137 + font-size: 20px;
  138 + cursor: pointer;
  139 +}
  140 +.portfolio-soft-wrap li:nth-of-type(1){
  141 + padding-top: 60px;
  142 + background: url("images/portfolio-soft-wrap-1.png") no-repeat center 0;
  143 +
  144 +}
  145 +.portfolio-soft-wrap li:nth-of-type(2){
  146 + padding-top: 60px;
  147 + background: url("images/portfolio-soft-wrap-2.png") no-repeat center 0;
  148 +
  149 +}
  150 +.portfolio-soft-wrap li:nth-of-type(3){
  151 + padding-top: 60px;
  152 + background: url("images/portfolio-soft-wrap-3.png") no-repeat center 0;
  153 +
  154 +}
  155 +.portfolio-soft-wrap li:nth-of-type(1).active{
  156 + color: #3F9FFE;
  157 + padding-bottom: 10px;
  158 + border-bottom: 3px solid rgba(63,159,254,1);
  159 + background: url("images/portfolio-soft-wrap-1-active.png") no-repeat center 0;
  160 +}
  161 +.portfolio-soft-wrap li:nth-of-type(2).active{
  162 + color: #3F9FFE;
  163 + padding-bottom: 10px;
  164 + border-bottom: 3px solid rgba(63,159,254,1);
  165 + background: url("images/portfolio-soft-wrap-2-active.png") no-repeat center 0;
  166 +}
  167 +.portfolio-soft-wrap li:nth-of-type(3).active{
  168 + color: #3F9FFE;
  169 + padding-bottom: 10px;
  170 + border-bottom: 3px solid rgba(63,159,254,1);
  171 + background: url("images/portfolio-soft-wrap-3-active.png") no-repeat center 0;
  172 +}
121 173
  174 +.portfolio-section-wrap{
  175 + height: 596px;
  176 + overflow: hidden;
  177 +}
  178 +.portfolio-section-wrap>li{
  179 + height: 596px;
  180 +}
  181 +.portfolio-section-wrap>li li{
  182 + height: 596px;
  183 +}
  184 +.displaynone{
  185 + display: none;
  186 +}
  187 +.ortfolio-soft-bottom-1>li:nth-of-type(1){
  188 + background: #ffff00;
  189 +}
  190 +.ortfolio-soft-bottom-1 li:nth-of-type(2){
  191 + padding-left: 100px;
  192 +}
  193 +.ortfolio-soft-bottom-2 li:nth-of-type(1){
  194 + background: #f00;
  195 +}
  196 +.ortfolio-soft-bottom-2 li:nth-of-type(2){
  197 +
  198 +}
  199 +.ortfolio-soft-bottom-3 li:nth-of-type(1){
  200 + background: #f0f;
  201 +}
  202 +.ortfolio-soft-bottom-3 li:nth-of-type(2){
122 203
  204 +}
  205 +.ortfolio-soft-bottom-title{
  206 + font-size:30px;
  207 + font-weight:bold;
  208 + color:rgba(0,0,0,.8);
  209 + margin: 239px 0 27px;
  210 + text-align: left;
  211 +}
  212 +.ortfolio-soft-bottom-des{
  213 + font-size: 16px;
  214 + text-align: left;
  215 + color:rgba(0,0,0,.6);
  216 + padding-left: 20px;
  217 + position: relative;
  218 +}
  219 +.ortfolio-soft-bottom-des:before{
  220 + position: absolute;
  221 + content: '';
  222 + left: 0;
  223 + top:50%;
  224 + margin-top: -3px;
  225 + width:6px;
  226 + height:6px;
  227 + background:rgba(66,160,251,1);
  228 + border-radius:50%;
  229 +}
123 .slicknav_menu{ 230 .slicknav_menu{
124 display:none; 231 display:none;
125 } 232 }