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 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 1 <!Doctype html>
2 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 178 </html>
... ...
style.css
  View file @8398cea
... ... @@ -4,7 +4,7 @@
4 4 padding:0;
5 5 }
6 6 .section{
7   - padding:162px 0 19px 0;
  7 + padding:162px 0 0 0;
8 8 }
9 9 html,body {
10 10 height: 100%;
... ... @@ -118,8 +118,115 @@ a:hover{
118 118 color: #fff;
119 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 230 .slicknav_menu{
124 231 display:none;
125 232 }
... ...