1
2
3
4
5
6
7
8
9
10
11 *{
12 padding:0;
13 margin:0;
14 font: 24px/24px "Microsoft Yahei";
15 color:white;
16 }
17 body{
18 background:#202020;
19 }
20 .main{
21 width: 1520px;
22 height:900px;
23 background:#06192A;
24 margin:0 auto;
25 border:2px solid white;
26 }
27 .main header{
28 height: 150px;
29 border-bottom:2px solid #637382;
30 }
31 .main header h1{
32 text-align:center;
33 font-weight:bolder;
34 position: relative;
35 bottom:0;
36 padding-top: 104px;
37 }
38 .main section{
39
40 height:500px;
41 margin:0 auto;
42 }
43
44 .main section .title{
45 display:inline-block;
46 height:30px;
47 line-height:30px;
48 padding-top:20px;
49 width: 100%;
50 }
51
52 .main section b.radio,.main section b.radio:before{
53 display:block;
54 position: relative;
55 }
56 .main section b.radio{
57 width:16px;
58 height:16px;
59 border-radius:8px;
60 background:white;
61 margin-left:2px;
62
63 float:right;
64 margin-right:68px;
65 }
66
67 .main section b.green:before,.main section b.red:before,.main section b.yellow:before{
68 width:12px;
69 height: 12px;
70 content:"";
71 border-radius:6px;
72 top:2px;
73 left:2px;
74 }
75
76 .main section b.green:before{
77 background:#008F40;
78 }
79
80 .main section b.red:before{
81 background:#D10F12;
82 }
83
84 .main section b.yellow:before{
85 background:#F4A700;
86 }
87
88 .main section b.green:after,.main section b.red:after,.main section b.yellow:after{
89 display:block;
90 width:40px;
91 font-size:20px;
92 position: relative;
93 top:-17px;
94 left:-47px;
95 }
96
97 .main section .title b.green:after{
98 content:"运行";
99 }
100 .main section .title b.red:after{
101 content:"故障";
102 }
103 .main section .title b.yellow:after{
104 content:"报警";
105 }
106
107 .content{
108 display:inline-block;
109 position: relative;
110 width: 100%;
111 height: 100%;
112 }
113
114 .content .bg b{
115 position: absolute !important;
116 margin-right:15px !important;
117 }
118
119 .content .s1{
120 background-image:url(images/hospital/s1.png);
121 width:368.4px;
122 height: 412.8px;
123 }
124
125 .content .s1 .arrow{
126 -webkit-transform: rotate(90deg);
127 -moz-transform: rotate(90deg);
128 -ms-transform: rotate(90deg);
129 -o-transform: rotate(90deg);
130 transform: rotate(90deg);
131 top: 92px;
132 left: 57px;
133 }
134
135 .content .s1 b{
136 bottom: 24px;
137 right: 70px;
138 }
139
140 .content .s2{
141 background-image:url(images/hospital/s2.png);
142 width: 250.2px;
143 height: 208.2px;
144 left: 380px;
145 top: 216px;
146 }
147
148 .content .s2 b,.content .s3 b,.content .s4 b{
149 bottom: 35px;
150 right: 35px;
151 }
152
153 .content .s3{
154 background-image:url(images/hospital/s3.png);
155 width: 250.2px;
156 height: 208.2px;
157 left: 680px;
158 top: 216px;
159 }
160
161 .content .s4{
162 background-image:url(images/hospital/s4.png);
163 width: 250.2px;
164 height: 208.2px;
165 left: 980px;
166 top: 216px;
167 }
168
169 .content .s5{
170 background-image:url(images/hospital/s5.png);
171 width: 202.15px;
172 height: 113.75px;
173 left: 1270px;
174 top: 300px;
175 }
176
177 .content .s5 span{
178 font-size:20px;
179 position: relative;
180 left: 80px;
181 }
182
183 .content .arrow{
184 background-image:url(images/hospital/arrow.png);
185 width:53.1px;
186 height: 23.4px;
187 zoom:2 !important;
188 top: -8px;
189 left:1px;
190 }
191
192 .content .f1{
193 background-image:url(images/hospital/f1.png);
194 width: 171.6px;
195 height: 163.8px;
196 top: 33px;
197 left: 416px;
198 }
199
200 .content .f1 b{
201 bottom:53px;
202 left:-24px;
203 }
204
205 .content .f1 b:after{
206 content:"余氮值";
207 width: 60px !important;
208 left:-21px !important;
209 top: -40px !important;
210 }
211
212 .content .f2{
213 background-image:url(images/hospital/f2.png);
214 width: 250.2px;
215 height: 208.2px;
216 top: 0;
217 left: 680px;
218 }
219
220 .content .t1{
221 background-image:url(images/hospital/f1.png);
222 width: 171.6px;
223 height: 163.8px;
224 top: 530px;
225 left: 416px;
226 }
227
228 .content .t2{
229 background-image:url(images/hospital/t2.png);
230 width: 182px;
231 height: 140.25px;
232 top: 530px;
233 left: 701px;
234 }
235
236 .content .t2 b{
237 right: -16px;
238 top: 65px;
239 }
240
241 .pt92{
242 top:92px !important;
243 }
244
245 .content .bg{
246 background-repeat: no-repeat;
247 background-position:center center;
248 background-size: cover;
249 -webkit-background-size: cover;
250 -o-background-size: cover;
251 zoom: 1;
252 position: absolute;
253 z-index: 2;
254 }
255 2
56 .pr48{
257 right:48px !important;
258 }
259 .pb33{
260 bottom:33px !important;
261 }
262 .pr12{
263 right:12px !important;
264 }
265 .pb44{
266 bottom:44px !important;
267 }
268
269 .content .gw{
270 content:"";
271 height: 7px;
272 border-top:1px solid #83868C;
273 border-bottom:1px solid #83868C;
274 position: absolute;
275
276 background:#06192A;
277 }
278
279 .content .f1-f2{
280 left: 544px;
281 top: 135px;
282 width:693px;
283 }
284
285 .content p.full{
286 background:#B3B3B6;
287
289 }
290
291 .content .gw p.full{
292 width:0;
293 height:inherit;
294 }
295
296 .content .gh p.full{
297 height:0;
298 width:inherit;
299 }
300
301 .lTor{302 -webkit-transition: all 0.5s linear;
303 -moz-transition: all 0.5s linear;
304 -ms-transition: all 0.5s linear;
305 -o-transition: all 0.5s linear;
306 transition: all 0.5s linear;
307
308 -webkit-animation: lToR 2s ease infinite;
309 -o-animation: lToR 2s ease infinite;
310 animation: lToR 2s ease infinite;
311 }
312
313 .content .f1-f2 .a1 span{
314 display: inline-block;
315 font-size: 20px;
316 position: relative;
317 top: -26px;
318 left: -10px;
319 width: 60px;
320 }
321
322 .content .f1-f2 .arrow{
323 left: 330px;
324 top: -13.5px;
325 }
326
327 .content .f1-f2 .arrow span{
328 font-size:10px;
329 left: 40px;
330 top: -3px;
331 position: relative;
332 }
333
334 .content .a1{
335 background-image:url(images/hospital/a1.png);
336 width: 36.4px;
337 height: 30.8px;
338 top: -15px;
339 left: 55px;
340 }
341
342 .content .a1 b{
343 bottom:-20px;
344 left:-4px;
345 }
346
347 .pr20{
348 left:23px !important;
349 }
350
351 .content .gh{
352 content:"";
353 width: 7px;
354 border-left:1px solid #83868C;
355 border-right:1px solid #83868C;
356 position: absolute;
357
358 background:#06192A;
359 }
360 361 .content .f2-s3{
362 left: 790px;
363 top: 135px;
364 height:150px;
365 }
366
367 .tTod{
368 -webkit-transition: all 0.5s linear;
369 -moz-transition: all 0.5s linear;
370 -ms-transition: all 0.5s linear;
371 -o-transition: all 0.5s linear;
372 transition: all 0.5s linear;
373
374 -webkit-animation: tTod 2s ease infinite;
375 -o-animation: tTod 2s ease infinite;
376 animation: tTod 2s ease infinite;
377 }
378
379 .content .s2-s5{
380 left: 300px;
381 top: 347px;
382 width:1050px;
383 }
384
385 .content .s2-t1{
386 left: 495px;
387 top: 355px;
388 height: 125px;
389 }
390
391 .content .s2-t1-wl{
392 left: 468px;
393 top: 480px;
394 width: 32px;
395
396 -webkit-transform: rotateY(-180deg);
397 -moz-transform: rotateY(-180deg);
398 -ms-transform: rotateY(-180deg);
399 -o-transform: rotateY(-180deg);
400 transform: rotateY(-180deg);
401 }
402
403 .content .s2-t1-wr{
404 left: 500px;
405 top: 480px;
406 width: 32px;
407 }
408
409 .content .s2-t1-dl{
410 left: 468px;
411 top: 480px;
412 height:125px;
413 }
414
415 .content .s2-t1-dl .a1{
416 left: -16px;
417 top: 40px;
418 }
419
420 .content .s2-t1-dl .a1 b.green{
421 left: -25px;
422 top: -8px;
423 }
424
425 .content .s2-t1-dl .a1 b.red{
426 left: -25px;427 top: 20px;
428 }
429
430 .content .s2-t1-dr{
431 left: 523px;
432 top: 480px;
433 height:125px;
434 }
435
436 .content .s2-t1-dr .a1{
437 left: -16px;
438 top: 40px;
439 }
440
441 .content .s2-t1-dr .a1 b.green{
442 left: 40px;
443 top: -8px;
444 }
445
446 .content .s2-t1-dr .a1 b.red{
447 left: 40px;
448 top: 20px;
449 }
450
451 .content .s3-t2{
452 top: 363px;
453 width:5px;
454 height:125px;
455 }
456
457 .st-1{left: 733px;}
458 .st-2{left: 773px;}
459 .st-3{left: 813px;}
460 .st-4{left: 853px;}
461
462 .s3-t2-wl{
463 left: 733px;
464 top: 480px;
465 width: 63.5px;
466 }
467
468 .s3-t2-wr{
469 left: 797px;
470 top: 480px;
471 width: 63.5px;
472
473 -webkit-transform: rotateY(-180deg);
474 -moz-transform: rotateY(-180deg);
475 -ms-transform: rotateY(-180deg);
476 -o-transform: rotateY(-180deg);
477 transform: rotateY(-180deg);
478 }
479
480 .s3-t2-d{
481 left: 792px;
482 top: 481px;
483 height: 125px;
484 }
485
486 .a2{
487 background-image:url("images/hospital/a2.jpg");
488 width: 23px;
489 height: 19px;
490 display: inline-block;
491 position: absolute;
492 top: 57px;
493 left: -8px;
494 }
495
496 .a2:before{
497 font-size:20px;
498 position: relative;
499 left: -12px;
500 top: -4px;
501 }
502
503 .st-1 .a2:before{
504 content:"1";
505 }
506
507 .st-2 .a2:before{
508 content:"2";
509 }
510
511 .st-3 .a2:before{
512 content:"3";
513 }
514
515 .st-4 .a2:before{
516 content:"4";
517 }
518
519 .st-4 .a2:after{
520 content:"电磁阀";
521 font-size:20px;
522 position: absolute;
523 left: 26px;
524 top: -4px;
525 width: 60px;
526 }
527
528 .s3-t2 b{
529 margin-right:0 !important;
530 position: absolute !important;
531 top: 80px;
532 left: -7px;
533 }
534
535 .arr{
536 position: absolute;
537 }
538
539 .arr img{
540 width: 106.2px;
541 height: 46.8px;
542 }
543
544 .s1 .arr{
545 -webkit-transform: rotate(90deg);
546 -moz-transform: rotate(90deg);
547 -ms-transform: rotate(90deg);
548 -o-transform: rotate(90deg);
549 transform: rotate(90deg);
550
551 left: calc(50% - 70px);
552 top: calc(50% - 25px);
553 }
554
555 .s5 .arr{
556 top:-16px;
557 }
558
559 .content .f1-f2 .arr{
560 right: -72px;
561 top: -27px;
562 }
563
564 .content .f1-f2 .arr span{
565 font-size:20px;
566 left: 80px;
567 top: 15px;
568 position: absolute;
569 width: 80px;
570 }
571
572
573 .content .s2-t1-wl,.content .s2-t1-wl .full,
574 .content .s2-t1-wr,.content .s2-t1-wr .full,
575 .content .s2-t1-dr,.content .s2-t1-dr .full{
576 border-radius: 0 10px 0 0;
577 }
578 .content .s2-t1-dl,.content .s2-t1-dl .full{
579 border-radius:10px 0 0 0;
580 }
581 .content .st-1,.content .st-1 .full,
582 .content .s3-t2-wl,.content .s3-t2-wl .full,
583 .content .s3-t2-wr,.content .s3-t2-wr .full{
584 border-radius: 0 0 0 10px;
585 }
586 .content .st-4,.content .st-4 .full{
587 border-radius: 0 0 10px 0;
588 }
589
590 @-webkit-keyframes lToR{
591 0% {width:0;}
592 100% {width:100%;}
593 }
594
595 @-moz-keyframes lToR{
596 0% {width:0;}
597 100% {width:100%;}
598 }
599
600 @-o-keyframes lToR{
601 0% {width:0;}
602 100% {width:100%;}
603 }
604
605 @keyframes lToR{
606 0% {width:0;}
607 100% {width:100%;}
608 }
609
610 @-webkit-keyframes tTod{
611 0% {height:0;}
612 100% {height:100%;}
613 }
614
615 @-moz-keyframes tTod{
616 0% {height:0;}
617 100% {height:100%;}
618 }
619
620 @-o-keyframes tTod{
621 0% {height:0;}
622 100% {height:100%;}
623 }
624
625 @keyframes tTod{
626 0% {height:0;}
627 100% {height:100%;}
628 }
629
630 .count{
631 position: absolute;
632 top: -38px;
633 right: 60px;
634 }
635
636 .count span {
637 position: absolute;
638 left: -65px;
639 top: 3px;
640 font-size: 20px;
641 }
642
643 .count ul{
644 height: 30px;
645 color: #ddd;
646 font-family: Consolas, monaco, monospace;
647 background:#000009;
648 margin:0 1px !important;
649 text-align:center;
650 list-style: none;
651 }
652
653 .count ul li{
654 font-size: 20px;
655 width:18px;
656 height:26px;
657 margin-top:2px;
658 background:#1A2730;
659
660 float:left;
661 margin-left:1px;
662 }
663
664
665
666
667
668
污水处理系统
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707 环卫车外运
708
709
710
711
712
713
714
715
716
717
720
721
722 达标排外
723
724
725
726 总流量
727
728
729
4
730
3
731
5
732
733
.
734
4
735
6
736
1
737
738
739
740
741 加药泵
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811 $(function(){
812 var count = 0;
813 /
883 });
884 885
本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源：php中文网