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 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 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 58 ' <div class="footer-title">联系我们</div>' +
59 59 ' <ul class="footer-links">' +
60 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 62 ' <li>E-mail:info@zte-its.com</li>' +
63 63 ' </ul>' +
64 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 27 <link rel="stylesheet" href="css/normalize.css">
28 28 <link rel="stylesheet" href="style.css">
29 29 <link rel="stylesheet" href="css/responsive.css">
  30 + <link rel="stylesheet" href="css/portfollo.css?a=2">
30 31  
31 32 <!-- Color CSS -->
32 33 <link rel="stylesheet" href="css/color/color7.css">
... ... @@ -69,7 +70,7 @@
69 70 </div>
70 71 </div>
71 72 <!--/ End breadcrumb -->
72   -
  73 +<!--软件平台 sta-->
73 74 <section id="portfolio-soft-top" class="section">
74 75 <div class="container">
75 76 <div class="row">
... ... @@ -145,9 +146,103 @@
145 146 </section>
146 147 </li>
147 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 273 <script type="text/javascript" src="js/gmaps.min.js"></script>
179 274 <script type="text/javascript" src="js/nav-footer.js"></script>
180 275 <script src="js/main.js?a=1"></script>
  276 +<script src="js/portfollo.js?a=1"></script>
181 277 </body>
182 278 </html>
... ...
style.css
  View file @8cf8c4c
... ... @@ -18,6 +18,8 @@ body{
18 18 background:#F6F6F6;
19 19 margin:0;
20 20 padding:0;
  21 + min-width: 1200px !important;
  22 + height: 100%;
21 23 }
22 24  
23 25 a,button{
... ...