Blame view

css/portfollo.css 9.88 KB
f2386841   Andy   产品页 add css3
1
2
3
  /*breadcrumb*/
  .breadcrumb{
      width: 100%;
d66b241f   liuqimichale   banner和百度地图
4
      height: 540px;
f2386841   Andy   产品页 add css3
5
6
7
      background:url('../images/breadcrumb-bg.png');
      background-size:100% 100%;
      background-repeat:no-repeat;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
8
  
f2386841   Andy   产品页 add css3
9
10
11
  }
  .breadcrumb-text{
      text-align: center;
6e350ac4   liuqimichale   产品 banner
12
      padding-top: 210px;
f2386841   Andy   产品页 add css3
13
      color: #fff;
6e350ac4   liuqimichale   产品 banner
14
      font-size: 44px;
f2386841   Andy   产品页 add css3
15
16
  }
  #portfolio-soft-top{
763188c7   liuqimichale   产品 硬件平台
17
      padding-bottom: 0;
f2386841   Andy   产品页 add css3
18
19
20
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
      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   产品 硬件平台
67
      height: 500px;
f2386841   Andy   产品页 add css3
68
69
  }
  .ortfolio-soft-bottom-1>li:nth-of-type(1){
18baebbd   liuqimichale   产品介绍 sass
70
71
72
      width: 50%;
      padding-left: 100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
73
74
75
76
77
78
  .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
79
80
81
  .ortfolio-soft-bottom-1>li:nth-of-type(1) .swiper-slide{
      height: 500px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
82
  .portfolio-rnt-wrap{
18baebbd   liuqimichale   产品介绍 sass
83
84
85
86
87
88
      width: 50%;
      height: 500px;
      float: left;
      background: url("../images/portfolio-rnt.png") no-repeat -35px 0;
      overflow: hidden;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
  .portfolio-pc-wrap{
      width: 50%;
      height: 500px;
      float: left;
      background: url("../images/portfolio-pc.png") no-repeat center center;
      background-size: 100% 70%;
      overflow: hidden;
  }
   .portfolio-analysis-wrap{
       width: 50%;
       height: 500px;
       float: left;
       background: url("../images/portfolio-pc.png") no-repeat center center;
       background-size: 100% 70%;
       overflow: hidden;
   }
18baebbd   liuqimichale   产品介绍 sass
105
106
107
108
109
110
  #portfolio-rnt{
      width: 300px;
      height: 500px;
      margin-left: 215px;
      margin-top: 23px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
111
112
113
114
115
116
117
118
119
120
121
122
  #portfolio-pc{
      width: 473px;
      height: 300px;
      margin-left: 63px;
      margin-top: 93px;
  }
  #portfolio-analysis{
      width: 473px;
      height: 300px;
      margin-left: 63px;
      margin-top: 93px;
  }
18baebbd   liuqimichale   产品介绍 sass
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
  #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
142
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
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
194
  
  #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
195
196
197
  .ortfolio-soft-bottom-1 li:nth-of-type(2){
      padding-left: 100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
198
199
200
201
  /*.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
202
203
204
  .ortfolio-soft-bottom-2 li:nth-of-type(2){
      padding-left:100px;
  }
4c61ea2c   liuqimichale   产品介绍 Swiper
205
206
207
208
  /*.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
209
210
211
212
  .ortfolio-soft-bottom-3 li:nth-of-type(2){
      padding-left:100px;
  }
  .ortfolio-soft-bottom-title{
763188c7   liuqimichale   产品 硬件平台
213
      font-size:26px;
f2386841   Andy   产品页 add css3
214
      font-weight:bold;
763188c7   liuqimichale   产品 硬件平台
215
216
      color:#333;
      margin: 155px 0 27px;
f2386841   Andy   产品页 add css3
217
218
219
      text-align: left;
  }
  .ortfolio-soft-bottom-des{
763188c7   liuqimichale   产品 硬件平台
220
221
      margin: 10px 0 20px;
      font-size: 18px;
763188c7   liuqimichale   产品 硬件平台
222
      color: #666;
f2386841   Andy   产品页 add css3
223
      position: relative;
763188c7   liuqimichale   产品 硬件平台
224
      text-align: left;
f2386841   Andy   产品页 add css3
225
226
227
228
  }
  .ortfolio-soft-bottom-des span{
      width:6px;
      height:6px;
763188c7   liuqimichale   产品 硬件平台
229
      margin-right: 10px;
f2386841   Andy   产品页 add css3
230
231
232
233
234
235
      display: inline-block;
      position: relative;
  }
  .ortfolio-soft-bottom-des span:before{
      position: absolute;
      content: '';
f2386841   Andy   产品页 add css3
236
237
238
239
240
241
242
      top:50%;
      margin-top: -6px;
      width:6px;
      height:6px;
      background:rgba(66,160,251,1);
      border-radius:50%;
  }
763188c7   liuqimichale   产品 硬件平台
243
  .padding20-0-70{
18baebbd   liuqimichale   产品介绍 sass
244
      padding: 70px 0 70px;
763188c7   liuqimichale   产品 硬件平台
245
  }
f2386841   Andy   产品页 add css3
246
  /*硬件sta-----*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
247
248
  .portfolio-hardware-top{
      background: #fff;
763188c7   liuqimichale   产品 硬件平台
249
250
      padding-top: 70px !important;
      padding-bottom: 0;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
251
252
253
254
255
256
  }
  
  .portfolio-hardware-wrap li{
      color:rgba(6,14,19,.8);
      font-size: 20px;
      cursor: pointer;
f2386841   Andy   产品页 add css3
257
      position: relative;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
258
259
260
261
262
263
264
265
  }
  .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   产品界面 硬件平台 部分完成
266
      background: url("../images/portfolio-hardware-wrap-2-active.png") no-repeat center 0;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
  
  }
  .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;
  
  }
  .portfolio-hardware-wrap li:nth-of-type(1).active{
      color: #3F9FFE;
      padding-bottom: 10px;
f2386841   Andy   产品页 add css3
282
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
283
284
285
286
287
      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
288
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
289
290
291
292
293
294
      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
295
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
296
297
298
299
300
      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
301
      /*border-bottom: 3px solid rgba(63,159,254,1);*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
302
303
304
305
      background: url("../images/portfolio-hardware-wrap-4-active.png") no-repeat center 0;
  }
  
  .portfolio-section-wrap{
16521b31   liuqimichale   产品自适应
306
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
307
308
  }
  .portfolio-section-wrap>li{
16521b31   liuqimichale   产品自适应
309
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
310
311
  }
  .portfolio-section-wrap>li li{
16521b31   liuqimichale   产品自适应
312
  
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
313
314
315
316
  }
  .displaynone{
      display: none;
  }
15cf61be   Andy   产品界面 add 硬件平台
317
318
319
320
321
322
323
  .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
324
  .ortfolio-hardware-bottom-1>li:nth-of-type(1){
16521b31   liuqimichale   产品自适应
325
      /*width: 460px;*/
15cf61be   Andy   产品界面 add 硬件平台
326
      height: 200px;
b75babf1   liuqimichale   产品介绍
327
      margin: 190px auto 0 ;
85761138   liuqimichale   产品介绍
328
      padding-right: 100px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
329
330
  }
  .ortfolio-hardware-bottom-1 li:nth-of-type(2){
15cf61be   Andy   产品界面 add 硬件平台
331
      /*padding-left: 100px;*/
16521b31   liuqimichale   产品自适应
332
333
      background: url("../images/produect_dev1.png") no-repeat center 0;
      /*width: 578px;*/
b75babf1   liuqimichale   产品介绍
334
      height: 500px;
85761138   liuqimichale   产品介绍
335
      background-size: 578px 500px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
336
337
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(1){
b75babf1   liuqimichale   产品介绍
338
339
      margin-top: 190px;
      height: 200px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
340
341
  }
  .ortfolio-hardware-bottom-2 li:nth-of-type(2){
16521b31   liuqimichale   产品自适应
342
343
      background: url("../images/produect_dev4.png") no-repeat center 0;
      /*width: 383px;*/
b75babf1   liuqimichale   产品介绍
344
      height: 500px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
345
346
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
347
      margin-top: 130px;
b75babf1   liuqimichale   产品介绍
348
      height: 200px;
266aaa10   Andy   产品界面 硬件平台 部分完成
349
      /*padding-left: 50px;*/
16521b31   liuqimichale   产品自适应
350
351
      /*width: 460px;*/
      /*margin-left: 100px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
352
353
  }
  .ortfolio-hardware-bottom-3 li:nth-of-type(2){
b75babf1   liuqimichale   产品介绍
354
      background: url("../images/produect_dev3.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
355
      /*width: 298px;*/
b75babf1   liuqimichale   产品介绍
356
      height: 500px;
16521b31   liuqimichale   产品自适应
357
      /*margin-left: 108px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
358
359
  
  }
15cf61be   Andy   产品界面 add 硬件平台
360
  .ortfolio-hardware-bottom-4 li:nth-of-type(1){
36e8ecf7   liuqimichale   产品介绍
361
      margin-top: 110px;
b75babf1   liuqimichale   产品介绍
362
      height: 200px;
15cf61be   Andy   产品界面 add 硬件平台
363
364
  }
  .ortfolio-hardware-bottom-4 li:nth-of-type(2){
b75babf1   liuqimichale   产品介绍
365
      background: url("../images/produect_dev2.png") no-repeat center center;
16521b31   liuqimichale   产品自适应
366
      /*width: 297px;*/
b75babf1   liuqimichale   产品介绍
367
      height: 500px;
16521b31   liuqimichale   产品自适应
368
      /*margin-left: 180px;*/
15cf61be   Andy   产品界面 add 硬件平台
369
  }
b75babf1   liuqimichale   产品介绍
370
371
372
  .ortfolio-hardware-bottom-1{
  
  }
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
373
  .ortfolio-hardware-bottom-title{
b75babf1   liuqimichale   产品介绍
374
      font-size:26px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
375
376
      font-weight:bold;
      color:rgba(0,0,0,.8);
15cf61be   Andy   产品界面 add 硬件平台
377
      /*margin: 239px 0 27px;*/
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
378
379
380
381
382
383
384
385
386
387
388
389
390
      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 硬件平台
391
      top:10px;
8cf8c4c7   Andy   产品界面 add 硬件平台 以及icon
392
393
394
395
396
      margin-top: -3px;
      width:6px;
      height:6px;
      background:rgba(66,160,251,1);
      border-radius:50%;
16521b31   liuqimichale   产品自适应
397
  }