Blame view

css/portfollo.css 10.6 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;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
257
258
      width: 20%;
      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
284
  .portfolio-hardware-wrap li:nth-of-type(5){
      padding-top: 60px;
      background: url("../images/portfolio-hardware-wrap-5.png") no-repeat center 0;
  
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
285
286
287
  .portfolio-hardware-wrap li:nth-of-type(1).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
288
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
289
290
291
292
293
      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
294
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
295
296
297
298
299
300
      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
301
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
302
303
304
305
306
      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
307
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
308
      background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
309
310
311
312
313
  }.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;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
314
315
316
  }
  
  .portfolio-section-wrap{
16521b31   liuqimichale   产品自适应
317
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
318
319
  }
  .portfolio-section-wrap>li{
16521b31   liuqimichale   产品自适应
320
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
321
322
  }
  .portfolio-section-wrap>li li{
16521b31   liuqimichale   产品自适应
323
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
324
325
326
327
  }
  .displaynone{
      display: none;
  }
15cf61be   Andy   产品界面 add 硬件平台
328
329
330
331
332
333
334
  .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
335
  .ortfolio-hardware-bottom-1>li:nth-of-type(1){
16521b31   liuqimichale   产品自适应
336
      /*width: 460px;*/
15cf61be   Andy   产品界面 add 硬件平台
337
      height: 200px;
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
338
      margin: 90px auto 0 ;
85761138   liuqimichale   产品介绍
339
      padding-right: 100px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
340
341
  }
  .ortfolio-hardware-bottom-1 li:nth-of-type(2){
15cf61be   Andy   产品界面 add 硬件平台
342
      /*padding-left: 100px;*/
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
343
344
345
346
      background: url("../images/produect_dev1.jpg") no-repeat center 0;
      height: 375px;
      background-size: 658px 375px;
      /*background-size: 578px 500px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
347
348
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(1){
b75babf1   liuqimichale   产品介绍
349
350
      margin-top: 190px;
      height: 200px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
351
352
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
353
      background: url("../images/produect_dev4new.png") no-repeat center 0;
16521b31   liuqimichale   产品自适应
354
      /*width: 383px;*/
b75babf1   liuqimichale   产品介绍
355
      height: 500px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
356
357
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
358
      margin-top: 130px;
b75babf1   liuqimichale   产品介绍
359
      height: 200px;
266aaa10   Andy   产品界面 硬件平台 部分完成
360
      /*padding-left: 50px;*/
16521b31   liuqimichale   产品自适应
361
362
      /*width: 460px;*/
      /*margin-left: 100px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
363
364
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
365
      background: url("../images/produect_dev3new.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
366
      /*width: 298px;*/
b75babf1   liuqimichale   产品介绍
367
      height: 500px;
16521b31   liuqimichale   产品自适应
368
      /*margin-left: 108px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
369
370
  
  }
15cf61be   Andy   产品界面 add 硬件平台
371
  .ortfolio-hardware-bottom-4 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
372
      margin-top: 110px;
b75babf1   liuqimichale   产品介绍
373
      height: 200px;
15cf61be   Andy   产品界面 add 硬件平台
374
375
  }
  .ortfolio-hardware-bottom-4 li:nth-of-type(2){
947e9c6a   Andy   add new produect IMG
376
      background: url("../images/produect_dev2new.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
377
      /*width: 297px;*/
b75babf1   liuqimichale   产品介绍
378
      height: 500px;
16521b31   liuqimichale   产品自适应
379
      /*margin-left: 180px;*/
15cf61be   Andy   产品界面 add 硬件平台
380
  }
85c3efcc   Andy   产品介绍:更新图片 新增无人值守
381
382
383
384
385
386
387
388
389
390
  .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;*/
  }
b75babf1   liuqimichale   产品介绍
391
392
393
  .ortfolio-hardware-bottom-1{
  
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
394
  .ortfolio-hardware-bottom-title{
b75babf1   liuqimichale   产品介绍
395
      font-size:26px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
396
397
      font-weight:bold;
      color:rgba(0,0,0,.8);
15cf61be   Andy   产品界面 add 硬件平台
398
      /*margin: 239px 0 27px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
399
400
401
402
403
404
405
406
407
408
409
410
411
      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 硬件平台
412
      top:10px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
413
414
415
416
417
      margin-top: -3px;
      width:6px;
      height:6px;
      background:rgba(66,160,251,1);
      border-radius:50%;
16521b31   liuqimichale   产品自适应
418
  }