Blame view

css/portfollo.css 11.3 KB
f2386841   Andy   产品页 add css3
1
2
3
  /*breadcrumb*/
  .breadcrumb{
      width: 100%;
d66b241f   liuqimichale   banner和百度地图
4
      height: 540px;
ac8b53a3   liuqimichale   关于我们 banner
5
      background:url('../images/breadcrumb-bg.jpg');
f2386841   Andy   产品页 add css3
6
7
      background-size:100% 100%;
      background-repeat:no-repeat;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
8
  
f2386841   Andy   产品页 add css3
9
10
  }
  .breadcrumb-text{
c03ce36e   liuqimichale   关于我们 banner
11
12
      max-width: 832px;
      padding: 0 20px;
2656ab95   liuqimichale   关于我们 banner
13
      margin: 200px auto;
f2386841   Andy   产品页 add css3
14
      text-align: center;
f2386841   Andy   产品页 add css3
15
      color: #fff;
6e350ac4   liuqimichale   产品 banner
16
      font-size: 44px;
2656ab95   liuqimichale   关于我们 banner
17
      background-color: #3F9FFE;
f2386841   Andy   产品页 add css3
18
19
  }
  #portfolio-soft-top{
763188c7   liuqimichale   产品 硬件平台
20
      padding-bottom: 0;
f2386841   Andy   产品页 add css3
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
      background: #fff;
  }
  /*软件sta-----*/
  .portfolio-soft-wrap li{
      color:rgba(6,14,19,.8);
      font-size: 20px;
      cursor: pointer;
      position: relative;
  }
  .portfolio-soft-wrap li:nth-of-type(1){
      padding-top: 60px;
      background: url("../images/portfolio-soft-wrap-1.png") no-repeat center 0;
  
  }
  .portfolio-soft-wrap li:nth-of-type(2){
      padding-top: 60px;
      background: url("../images/portfolio-soft-wrap-2.png") no-repeat center 0;
  
  }
  .portfolio-soft-wrap li:nth-of-type(3){
      padding-top: 60px;
      background: url("../images/portfolio-soft-wrap-3.png") no-repeat center 0;
  
  }
  .portfolio-soft-wrap li:nth-of-type(1).active{
      color: #3F9FFE;
      padding-bottom: 10px;
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
      background: url("../images/portfolio-soft-wrap-1-active.png") no-repeat center 0;
  }
  .portfolio-soft-wrap li:nth-of-type(2).active{
      color: #3F9FFE;
      padding-bottom: 10px;
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
      background: url("../images/portfolio-soft-wrap-2-active.png") no-repeat center 0;
  }
  .portfolio-soft-wrap li:nth-of-type(3).active{
      color: #3F9FFE;
      padding-bottom: 10px;
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
      background: url("../images/portfolio-soft-wrap-3-active.png") no-repeat center 0;
  }
  
  .portfolio-section-wrap{
      min-height: 596px;
  }
  .portfolio-section-wrap>li{
  }
  .portfolio-section-wrap>li li{
763188c7   liuqimichale   产品 硬件平台
70
      height: 500px;
f2386841   Andy   产品页 add css3
71
72
  }
  .ortfolio-soft-bottom-1>li:nth-of-type(1){
18baebbd   liuqimichale   产品介绍 sass
73
74
      padding-left: 100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
75
76
77
78
79
80
  .ortfolio-soft-bottom-2>li:nth-of-type(1){
      padding-left: 100px;
  }
  .ortfolio-soft-bottom-3>li:nth-of-type(1){
      padding-left: 100px;
  }
18baebbd   liuqimichale   产品介绍 sass
81
82
83
  .ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{
      height: 500px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
84
  .portfolio-rnt-wrap{
18baebbd   liuqimichale   产品介绍 sass
85
86
87
88
89
      height: 500px;
      float: left;
      background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
      overflow: hidden;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
90
  .portfolio-pc-wrap{
4c61ea2c   liuqimichale   产品介绍 Swiper
91
92
93
94
95
96
97
      height: 500px;
      float: left;
      background: url("../images/portfolio-pc.png") no-repeat center center;
      background-size: 100% 70%;
      overflow: hidden;
  }
   .portfolio-analysis-wrap{
4c61ea2c   liuqimichale   产品介绍 Swiper
98
99
100
101
102
103
       height: 500px;
       float: left;
       background: url("../images/portfolio-pc.png") no-repeat center center;
       background-size: 100% 70%;
       overflow: hidden;
   }
18baebbd   liuqimichale   产品介绍 sass
104
105
106
  #portfolio-rnt{
      width: 300px;
      height: 500px;
fc9a2e1f   liuqimichale   关于我们 banner
107
      margin-left: 200px;
18baebbd   liuqimichale   产品介绍 sass
108
109
      margin-top: 23px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
110
111
112
  #portfolio-pc{
      width: 473px;
      height: 300px;
fc9a2e1f   liuqimichale   关于我们 banner
113
      margin-left: 48px;
4c61ea2c   liuqimichale   产品介绍 Swiper
114
115
116
117
118
      margin-top: 93px;
  }
  #portfolio-analysis{
      width: 473px;
      height: 300px;
fc9a2e1f   liuqimichale   关于我们 banner
119
      margin-left: 49px;
4c61ea2c   liuqimichale   产品介绍 Swiper
120
121
      margin-top: 93px;
  }
18baebbd   liuqimichale   产品介绍 sass
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
  #portfolio-rnt .portfolio-rnt1{
      width:100%;
      height: 500px;
      background: url("../images/portfolio-rnt1.png") no-repeat ;
  }
  #portfolio-rnt .portfolio-rnt2{
      width:100%;
      height: 500px;
      background: url("../images/portfolio-rnt2.png") no-repeat ;
  }
  #portfolio-rnt .portfolio-rnt3{
      width:100%;
      height: 500px;
      background: url("../images/portfolio-rnt3.png") no-repeat ;
  }
  #portfolio-rnt .portfolio-rnt4{
      width:100%;
      height: 500px;
      background: url("../images/portfolio-rnt4.png") no-repeat ;
f2386841   Andy   产品页 add css3
141
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
  
  #portfolio-pc .portfolio-pc1{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-pc1.png") no-repeat ;
      background-size: 100% 100%;
  }
  
  #portfolio-pc .portfolio-pc2{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-pc2.png") no-repeat ;
      background-size: 100% 100%;
  }
  
  #portfolio-pc .portfolio-pc3{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-pc3.png") no-repeat ;
      background-size: 100% 100%;
  }
  
  #portfolio-pc .portfolio-pc4{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-pc4.png") no-repeat ;
      background-size: 100% 100%;
  }
  #portfolio-analysis .portfolio-analysis1{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-analysis1.png") no-repeat ;
      background-size: 100% 100%;
  }
  #portfolio-analysis .portfolio-analysis2{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-analysis2.png") no-repeat ;
      background-size: 100% 100%;
  }
  #portfolio-analysis .portfolio-analysis3{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-analysis3.png") no-repeat ;
      background-size: 100% 100%;
  }
  #portfolio-analysis .portfolio-analysis4{
      width:100%;
      height: 300px;
      background: url("../images/portfolio-analysis4.png") no-repeat ;
      background-size: 100% 100%;
  }
f2386841   Andy   产品页 add css3
194
195
196
  .ortfolio-soft-bottom-1 li:nth-of-type(2){
      padding-left: 100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
197
198
199
200
  /*.ortfolio-soft-bottom-2 li:nth-of-type(1){*/
      /*background: url("../images/ortfolio-soft-pc1.gif") no-repeat center center;*/
      /*background-size: 100% 80%;*/
  /*}*/
f2386841   Andy   产品页 add css3
201
202
203
  .ortfolio-soft-bottom-2 li:nth-of-type(2){
      padding-left:100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
204
205
206
207
  /*.ortfolio-soft-bottom-3 li:nth-of-type(1){*/
      /*background: url("../images/ortfolio-soft-pc2.gif") no-repeat center center;*/
      /*background-size: 100% 80%;*/
  /*}*/
f2386841   Andy   产品页 add css3
208
209
210
211
  .ortfolio-soft-bottom-3 li:nth-of-type(2){
      padding-left:100px;
  }
  .ortfolio-soft-bottom-title{
763188c7   liuqimichale   产品 硬件平台
212
      font-size:26px;
f2386841   Andy   产品页 add css3
213
      font-weight:bold;
763188c7   liuqimichale   产品 硬件平台
214
215
      color:#333;
      margin: 155px 0 27px;
f2386841   Andy   产品页 add css3
216
217
218
      text-align: left;
  }
  .ortfolio-soft-bottom-des{
763188c7   liuqimichale   产品 硬件平台
219
220
      margin: 10px 0 20px;
      font-size: 18px;
763188c7   liuqimichale   产品 硬件平台
221
      color: #666;
f2386841   Andy   产品页 add css3
222
      position: relative;
763188c7   liuqimichale   产品 硬件平台
223
      text-align: left;
f2386841   Andy   产品页 add css3
224
225
226
227
  }
  .ortfolio-soft-bottom-des span{
      width:6px;
      height:6px;
763188c7   liuqimichale   产品 硬件平台
228
      margin-right: 10px;
f2386841   Andy   产品页 add css3
229
230
231
232
233
234
      display: inline-block;
      position: relative;
  }
  .ortfolio-soft-bottom-des span:before{
      position: absolute;
      content: '';
daadc05c   Andy   add service swiper效果
235
236
237
238
239
240
      top: 50%;
      margin-top: -8px;
      width: 10px;
      height: 10px;
      background: rgba(66,160,251,1);
      border-radius: 50%;
f2386841   Andy   产品页 add css3
241
  }
763188c7   liuqimichale   产品 硬件平台
242
  .padding20-0-70{
18baebbd   liuqimichale   产品介绍 sass
243
      padding: 70px 0 70px;
763188c7   liuqimichale   产品 硬件平台
244
  }
f2386841   Andy   产品页 add css3
245
  /*硬件sta-----*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
246
247
  .portfolio-hardware-top{
      background: #fff;
daadc05c   Andy   add service swiper效果
248
      padding-top: 36px !important;
763188c7   liuqimichale   产品 硬件平台
249
      padding-bottom: 0;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
250
251
252
253
254
255
  }
  
  .portfolio-hardware-wrap li{
      color:rgba(6,14,19,.8);
      font-size: 20px;
      cursor: pointer;
f2386841   Andy   产品页 add css3
256
      position: relative;
6294a698   Andy   add dev 智联地锁
257
      width: 200px;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
258
      float: left;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
259
260
261
262
263
264
265
266
  }
  .portfolio-hardware-wrap li:nth-of-type(1){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-1.png") no-repeat center 0;
  
  }
  .portfolio-hardware-wrap li:nth-of-type(2){
      padding-top: 60px;
ff43139b   Andy   产品界面 硬件平台 部分完成
267
      background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
268
269
270
271
272
273
274
275
276
277
278
279
  
  }
  .portfolio-hardware-wrap li:nth-of-type(3){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-3.png") no-repeat center 0;
  
  }
  .portfolio-hardware-wrap li:nth-of-type(4){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-4.png") no-repeat center 0;
  
  }
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
280
281
282
283
  .portfolio-hardware-wrap li:nth-of-type(5){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-5.png") no-repeat center 0;
  
6294a698   Andy   add dev 智联地锁
284
285
286
287
  }.portfolio-hardware-wrap li:nth-of-type(6){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-6.png") no-repeat center 0;
  
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
288
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
289
290
291
  .portfolio-hardware-wrap li:nth-of-type(1).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
292
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
293
294
295
296
297
      background: url("../images/portfolio-hardware-wrap-1-active.png") no-repeat center 0;
  }
  .portfolio-hardware-wrap li:nth-of-type(2).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
298
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
299
300
301
302
303
304
      background: url("../images/portfolio-hardware-wrap-2.png") no-repeat center 0;
      /*background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;*/
  }
  .portfolio-hardware-wrap li:nth-of-type(3).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
305
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
306
307
308
309
310
      background: url("../images/portfolio-hardware-wrap-3-active.png") no-repeat center 0;
  }
  .portfolio-hardware-wrap li:nth-of-type(4).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
311
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
312
      background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
313
314
315
316
317
  }.portfolio-hardware-wrap li:nth-of-type(5).active{
      color: #3F9FFE;
      padding-bottom: 10px;
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
      background: url("../images/portfolio-hardware-wrap-5-active.png") no-repeat center 0;
6294a698   Andy   add dev 智联地锁
318
319
320
321
322
  }.portfolio-hardware-wrap li:nth-of-type(6).active{
      color: #3F9FFE;
      padding-bottom: 10px;
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
      background: url("../images/portfolio-hardware-wrap-6-active.png") no-repeat center 0;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
323
324
325
  }
  
  .portfolio-section-wrap{
16521b31   liuqimichale   产品自适应
326
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
327
328
  }
  .portfolio-section-wrap>li{
16521b31   liuqimichale   产品自适应
329
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
330
331
  }
  .portfolio-section-wrap>li li{
16521b31   liuqimichale   产品自适应
332
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
333
334
335
336
  }
  .displaynone{
      display: none;
  }
15cf61be   Andy   产品界面 add 硬件平台
337
338
339
340
341
342
343
  .ortfolio-hardware-bottom-title {
      font-size: 30px;
      font-weight: bold;
      color: rgba(0,0,0,.8);
      margin: 0px 0 27px;
      text-align: left;
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
344
  .ortfolio-hardware-bottom-1>li:nth-of-type(1){
16521b31   liuqimichale   产品自适应
345
      /*width: 460px;*/
15cf61be   Andy   产品界面 add 硬件平台
346
      height: 200px;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
347
      margin: 90px auto 0 ;
85761138   liuqimichale   产品介绍
348
      padding-right: 100px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
349
350
  }
  .ortfolio-hardware-bottom-1 li:nth-of-type(2){
15cf61be   Andy   产品界面 add 硬件平台
351
      /*padding-left: 100px;*/
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
352
353
354
355
      background: url("../images/produect_dev1.jpg") no-repeat center 0;
      height: 375px;
      background-size: 658px 375px;
      /*background-size: 578px 500px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
356
357
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(1){
b75babf1   liuqimichale   产品介绍
358
359
      margin-top: 190px;
      height: 200px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
360
361
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
362
      background: url("../images/produect_dev4new.png") no-repeat center 0;
16521b31   liuqimichale   产品自适应
363
      /*width: 383px;*/
b75babf1   liuqimichale   产品介绍
364
      height: 500px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
365
366
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
367
      margin-top: 130px;
b75babf1   liuqimichale   产品介绍
368
      height: 200px;
266aaa10   Andy   产品界面 硬件平台 部分完成
369
      /*padding-left: 50px;*/
16521b31   liuqimichale   产品自适应
370
371
      /*width: 460px;*/
      /*margin-left: 100px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
372
373
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
374
      background: url("../images/produect_dev3new.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
375
      /*width: 298px;*/
b75babf1   liuqimichale   产品介绍
376
      height: 500px;
16521b31   liuqimichale   产品自适应
377
      /*margin-left: 108px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
378
379
  
  }
15cf61be   Andy   产品界面 add 硬件平台
380
  .ortfolio-hardware-bottom-4 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
381
      margin-top: 110px;
b75babf1   liuqimichale   产品介绍
382
      height: 200px;
15cf61be   Andy   产品界面 add 硬件平台
383
384
  }
  .ortfolio-hardware-bottom-4 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
385
      background: url("../images/produect_dev2new.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
386
      /*width: 297px;*/
b75babf1   liuqimichale   产品介绍
387
      height: 500px;
16521b31   liuqimichale   产品自适应
388
      /*margin-left: 180px;*/
15cf61be   Andy   产品界面 add 硬件平台
389
  }
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
390
391
392
393
394
395
396
397
398
399
  .ortfolio-hardware-bottom-5 li:nth-of-type(1){
      margin-top: 187px;
      height: 200px;
  }
  .ortfolio-hardware-bottom-5 li:nth-of-type(2){
      background: url("../images/produect_dev5.jpg") no-repeat center center;
      /*width: 297px;*/
      height: 500px;
      /*margin-left: 180px;*/
  }
6294a698   Andy   add dev 智联地锁
400
401
402
403
404
405
406
407
408
409
410
  .ortfolio-hardware-bottom-6 li:nth-of-type(1){
      margin-top: 187px;
      height: 200px;
  }
  .ortfolio-hardware-bottom-6 li:nth-of-type(2){
      background: url("../images/produect_dev6.png") no-repeat center center;
      /*width: 297px;*/
      height: 337px;
      margin-top: 120px;
      /*margin-left: 180px;*/
  }
b75babf1   liuqimichale   产品介绍
411
412
413
  .ortfolio-hardware-bottom-1{
  
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
414
  .ortfolio-hardware-bottom-title{
b75babf1   liuqimichale   产品介绍
415
      font-size:26px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
416
417
      font-weight:bold;
      color:rgba(0,0,0,.8);
15cf61be   Andy   产品界面 add 硬件平台
418
      /*margin: 239px 0 27px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
419
420
421
422
423
424
425
426
427
428
429
430
431
      text-align: left;
  }
  .ortfolio-hardware-bottom-des{
      font-size: 16px;
      text-align: left;
      color:rgba(0,0,0,.6);
      padding-left: 20px;
      position: relative;
  }
  .ortfolio-hardware-bottom-des:before{
      position: absolute;
      content: '';
      left: 0;
15cf61be   Andy   产品界面 add 硬件平台
432
      top:10px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
433
434
435
436
437
      margin-top: -3px;
      width:6px;
      height:6px;
      background:rgba(66,160,251,1);
      border-radius:50%;
16521b31   liuqimichale   产品自适应
438
  }