BJ_web_developers / webportal

Commit 8cf8c4c7d9ddfd6f5c1571678fe8004abb75a127

Authored by Andy
1 parent 58a7219e

产品界面 add 硬件平台 以及icon

Inline Side-by-side
Showing 17 changed files with 225 additions and 7 deletions
css/portfollo.css 0 → 100644
  View file @8cf8c4c
  1 +
  2 +.portfolio-hardware-top{
  3 + background: #fff;
  4 + padding-top: 101px !important;
  5 +}
  6 +
  7 +.portfolio-hardware-wrap li{
  8 + color:rgba(6,14,19,.8);
  9 + font-size: 20px;
  10 + cursor: pointer;
  11 +}
  12 +.portfolio-hardware-wrap li:nth-of-type(1){
  13 + padding-top: 60px;
  14 + background: url("../images/portfolio-hardware-wrap-1.png") no-repeat center 0;
  15 +
  16 +}
  17 +.portfolio-hardware-wrap li:nth-of-type(2){
  18 + padding-top: 60px;
  19 + background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
  20 +
  21 +}
  22 +.portfolio-hardware-wrap li:nth-of-type(3){
  23 + padding-top: 60px;
  24 + background: url("../images/portfolio-hardware-wrap-3.png") no-repeat center 0;
  25 +
  26 +}
  27 +.portfolio-hardware-wrap li:nth-of-type(4){
  28 + padding-top: 60px;
  29 + background: url("../images/portfolio-hardware-wrap-4.png") no-repeat center 0;
  30 +
  31 +}
  32 +.portfolio-hardware-wrap li:nth-of-type(1).active{
  33 + color: #3F9FFE;
  34 + padding-bottom: 10px;
  35 + border-bottom: 3px solid rgba(63,159,254,1);
  36 + background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0;
  37 +}
  38 +.portfolio-hardware-wrap li:nth-of-type(2).active{
  39 + color: #3F9FFE;
  40 + padding-bottom: 10px;
  41 + border-bottom: 3px solid rgba(63,159,254,1);
  42 + background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
  43 + /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/
  44 +}
  45 +.portfolio-hardware-wrap li:nth-of-type(3).active{
  46 + color: #3F9FFE;
  47 + padding-bottom: 10px;
  48 + border-bottom: 3px solid rgba(63,159,254,1);
  49 + background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0;
  50 +}
  51 +.portfolio-hardware-wrap li:nth-of-type(4).active{
  52 + color: #3F9FFE;
  53 + padding-bottom: 10px;
  54 + border-bottom: 3px solid rgba(63,159,254,1);
  55 + background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
  56 +}
  57 +
  58 +.portfolio-section-wrap{
  59 + height: 596px;
  60 + overflow: hidden;
  61 +}
  62 +.portfolio-section-wrap>li{
  63 + height: 596px;
  64 +}
  65 +.portfolio-section-wrap>li li{
  66 + height: 596px;
  67 +}
  68 +.displaynone{
  69 + display: none;
  70 +}
  71 +.ortfolio-hardware-bottom-1>li:nth-of-type(1){
  72 + background: #ffff00;
  73 +}
  74 +.ortfolio-hardware-bottom-1 li:nth-of-type(2){
  75 + padding-left: 100px;
  76 +}
  77 +.ortfolio-hardware-bottom-2 li:nth-of-type(1){
  78 + background: #f00;
  79 +}
  80 +.ortfolio-hardware-bottom-2 li:nth-of-type(2){
  81 +
  82 +}
  83 +.ortfolio-hardware-bottom-3 li:nth-of-type(1){
  84 + background: #f0f;
  85 +}
  86 +.ortfolio-hardware-bottom-3 li:nth-of-type(2){
  87 +
  88 +}
  89 +.ortfolio-hardware-bottom-title{
  90 + font-size:30px;
  91 + font-weight:bold;
  92 + color:rgba(0,0,0,.8);
  93 + margin: 239px 0 27px;
  94 + text-align: left;
  95 +}
  96 +.ortfolio-hardware-bottom-des{
  97 + font-size: 16px;
  98 + text-align: left;
  99 + color:rgba(0,0,0,.6);
  100 + padding-left: 20px;
  101 + position: relative;
  102 +}
  103 +.ortfolio-hardware-bottom-des:before{
  104 + position: absolute;
  105 + content: '';
  106 + left: 0;
  107 + top:50%;
  108 + margin-top: -3px;
  109 + width:6px;
  110 + height:6px;
  111 + background:rgba(66,160,251,1);
  112 + border-radius:50%;
  113 +}
0 \ No newline at end of file 114 \ No newline at end of file
images/portfolio-hardware-wrap-1-active.png 0 → 100755
View file @8cf8c4c

2.22 KB
images/portfolio-hardware-wrap-1.png 0 → 100755
View file @8cf8c4c

2.59 KB
images/portfolio-hardware-wrap-2.png 0 → 100755
View file @8cf8c4c

2.45 KB
images/portfolio-hardware-wrap-3-active.png 0 → 100755
View file @8cf8c4c

2.02 KB
images/portfolio-hardware-wrap-3.png 0 → 100755
View file @8cf8c4c

2.28 KB
images/portfolio-hardware-wrap-4-active.png 0 → 100755
View file @8cf8c4c

1.49 KB
images/portfolio-hardware-wrap-4.png 0 → 100755
View file @8cf8c4c

1.76 KB
images/produect_dev1.png 0 → 100755
View file @8cf8c4c

161 KB
images/produect_dev2.png 0 → 100755
View file @8cf8c4c

66.6 KB
images/produect_dev3.png 0 → 100755
View file @8cf8c4c

47.7 KB
images/produect_dev4.png 0 → 100755
View file @8cf8c4c

68.3 KB
js/main.js
  View file @8cf8c4c
@@ -198,8 +198,3 @@ @@ -198,8 +198,3 @@
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 - })  
js/nav-footer.js
  View file @8cf8c4c
@@ -58,7 +58,7 @@ var footHtmls='<div class="container">' + @@ -58,7 +58,7 @@ var footHtmls='<div class="container">' +
58 ' <div class="footer-title">联系我们</div>' + 58 ' <div class="footer-title">联系我们</div>' +
59 ' <ul class="footer-links">' + 59 ' <ul class="footer-links">' +
60 ' <li>电话:(0510) 66055077</li>' + 60 ' <li>电话:(0510) 66055077</li>' +
61 - ' <li style="height: 36px;line-height: 18px;margin-bottom: 16px;">地址:江苏省无锡新区菱湖大道200号<br> &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;中国传感网国际创新园A座6层</li>' + 61 + ' <li style="height: 36px;line-height: 18px;margin-bottom: 16px;">地址:江苏省无锡新区菱湖大道200号中国传感网国际创新园A座6层</li>' +
62 ' <li>E-mail:info@zte-its.com</li>' + 62 ' <li>E-mail:info@zte-its.com</li>' +
63 ' </ul>' + 63 ' </ul>' +
64 ' </div>' + 64 ' </div>' +
js/portfollo.js 0 → 100644
  View file @8cf8c4c
  1 +//软件
  2 +$('#portfolio-soft-wrap li').on('click',function () {
  3 + var _index = $(this).index();
  4 + $('#portfolio-soft-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
  5 + $('#portfolio-section-wrap>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
  6 +})
  7 +//硬件
  8 +$('#portfolio-hardware-wrap li').on('click',function () {
  9 + var _index = $(this).index();
  10 + $('#portfolio-hardware-wrap li').eq(_index).addClass('active').siblings().removeClass('active')
  11 + $('#portfolio-section-hardware>li').eq(_index).removeClass('displaynone').siblings().addClass('displaynone')
  12 +})
portfolio.html
  View file @8cf8c4c
@@ -27,6 +27,7 @@ @@ -27,6 +27,7 @@
27 <link rel="stylesheet" href="css/normalize.css"> 27 <link rel="stylesheet" href="css/normalize.css">
28 <link rel="stylesheet" href="style.css"> 28 <link rel="stylesheet" href="style.css">
29 <link rel="stylesheet" href="css/responsive.css"> 29 <link rel="stylesheet" href="css/responsive.css">
  30 + <link rel="stylesheet" href="css/portfollo.css?a=2">
30 31
31 <!-- Color CSS --> 32 <!-- Color CSS -->
32 <link rel="stylesheet" href="css/color/color7.css"> 33 <link rel="stylesheet" href="css/color/color7.css">
@@ -69,7 +70,7 @@ @@ -69,7 +70,7 @@
69 </div> 70 </div>
70 </div> 71 </div>
71 <!--/ End breadcrumb --> 72 <!--/ End breadcrumb -->
72 - 73 +<!--软件平台 sta-->
73 <section id="portfolio-soft-top" class="section"> 74 <section id="portfolio-soft-top" class="section">
74 <div class="container"> 75 <div class="container">
75 <div class="row"> 76 <div class="row">
@@ -145,9 +146,103 @@ @@ -145,9 +146,103 @@
145 </section> 146 </section>
146 </li> 147 </li>
147 </ul> 148 </ul>
  149 +<!--软件平台 end-->
  150 +<!--硬件平台 sta-->
  151 +<section id="portfolio-hardware-top" class="portfolio-hardware-top section">
  152 + <div class="container">
  153 + <div class="row">
  154 + <div class="section-title-name">硬件平台</div>
  155 + <ul class="portfolio-hardware-wrap" id="portfolio-hardware-wrap">
  156 + <li class="text-center col-md-3 active">
  157 + 封闭式设备
  158 + </li>
  159 + <li class="text-center col-md-3">
  160 + 开放式设备
  161 + </li>
  162 + <li class="text-center col-md-3">
  163 + 场内引导设备
  164 + </li>
  165 + <li class="text-center col-md-3">
  166 + 停车诱导设备
  167 + </li>
  168 +
  169 + </ul>
  170 + </div>
  171 + </div>
  172 +</section>
  173 +<ul class="portfolio-section-wrap" id="portfolio-section-hardware">
  174 + <li class="">
  175 + <section>
  176 + <div class="container">
  177 + <ul class="row ortfolio-soft-bottom-1">
  178 + <li class="text-center col-md-6">
  179 + 1
  180 + </li>
  181 + <li class="text-center col-md-6">
  182 + <div class="ortfolio-soft-bottom-title">
  183 + 任你停APP
  184 + </div>
  185 + <div class="ortfolio-soft-bottom-des">车场智能推荐,一键导航随停即走
  186 +
  187 + </div>
  188 + <div class="ortfolio-soft-bottom-des">电子支付，简单方便，账户余额，自动代扣，快速离场
  189 + </div>
  190 + <div class="ortfolio-soft-bottom-des">会员卡线上办理，到期智能提醒，快捷实用
  191 + </div>
  192 + <div class="ortfolio-soft-bottom-des">积分兑换，礼券不断，优惠多多</div>
  193 + </li>
  194 +
  195 + </ul>
  196 + </div>
  197 + </section>
  198 + </li>
  199 + <li class="displaynone">
  200 + <section>
  201 + <div class="container">
  202 + <ul class="row ortfolio-soft-bottom-2">
  203 + <li class="text-center col-md-6">
  204 + 1
  205 + </li>
  206 + <li class="text-center col-md-6">
  207 + 2
  208 + </li>
148 209
  210 + </ul>
  211 + </div>
  212 + </section>
  213 + </li>
  214 + <li class="displaynone">
  215 + <section>
  216 + <div class="container">
  217 + <ul class="row ortfolio-soft-bottom-3">
  218 + <li class="text-center col-md-6">
  219 + 1
  220 + </li>
  221 + <li class="text-center col-md-6">
  222 + 2
  223 + </li>
149 224
  225 + </ul>
  226 + </div>
  227 + </section>
  228 + </li>
  229 + <li class="displaynone">
  230 + <section>
  231 + <div class="container">
  232 + <ul class="row ortfolio-soft-bottom-3">
  233 + <li class="text-center col-md-6">
  234 + 1
  235 + </li>
  236 + <li class="text-center col-md-6">
  237 + 2
  238 + </li>
150 239
  240 + </ul>
  241 + </div>
  242 + </section>
  243 + </li>
  244 +</ul>
  245 +<!--硬件平台 end-->
151 246
152 247
153 248
@@ -178,5 +273,6 @@ @@ -178,5 +273,6 @@
178 <script type="text/javascript" src="js/gmaps.min.js"></script> 273 <script type="text/javascript" src="js/gmaps.min.js"></script>
179 <script type="text/javascript" src="js/nav-footer.js"></script> 274 <script type="text/javascript" src="js/nav-footer.js"></script>
180 <script src="js/main.js?a=1"></script> 275 <script src="js/main.js?a=1"></script>
  276 +<script src="js/portfollo.js?a=1"></script>
181 </body> 277 </body>
182 </html> 278 </html>
style.css
  View file @8cf8c4c
@@ -18,6 +18,8 @@ body{ @@ -18,6 +18,8 @@ body{
18 background:#F6F6F6; 18 background:#F6F6F6;
19 margin:0; 19 margin:0;
20 padding:0; 20 padding:0;
  21 + min-width: 1200px !important;
  22 + height: 100%;
21 } 23 }
22 24
23 a,button{ 25 a,button{