html 代码 body{background: url(../img/m-bg.jpg) left top no-repeat #181f26 ;color:#a5d0fc} /*公用*/ .num_blue{color:#0981fa} .num_green{color:#8aeb0c} .num_orenge{color:#ebd90c} .num_red{color:#ee0819} .bg_orenge{background:#e9a825;} .font_text{margin:25px 0 0 20px;} .font_title{font-size:24px;font-weight: bold;} .font_num{font-size:80px;} section{border:4px solid #1c2a33;width:1920px;height: 1080px;padding:4px;box-sizing: border-box;float:left;} table,tr,td,th{padding: 0;margin: 0;border:none;color:#fff;} table{width: 98%;margin:0 1%;} table tr{line-height: 48px;} table th,table td{text-align: left;padding:0 20px;font-size:16px;} table thead tr{background: #181f26;} table tr:nth-child(even){background: #1b2431;} /*container*/ .container{width:7680px;height:2160px;overflow: hidden;} /*section01--D5000*/ .section01 .header{height:100px;line-height:100px;} .section01{width:1920px;height: 1080px;padding:8px;box-sizing: border-box} .section01 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section01 .header h2>span{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section01>ul.s01_content{width:100%;} .section01>ul.s01_content li{margin-top:50px;float:left;box-sizing: border-box;width:33%;border-right:1px solid #282f3d;} .section01 >ul.s01_content li>div{float:left} .section01 >ul li .chart{height:200px; padding:0 40px;} .section01 >ul li .chart_text{margin:25px 0 0 20px;} .section01 >ul li .font_title{font-size:24px;font-weight: bold;} .section01 >ul li .font_num{font-size:80px;} .section01 .s01_agc h3.erji_header span{display:inline-block;background: #2b6aaa;width:23px;height:15px;margin:-5px 20px 0 0;} .section01 .s01_agc h3.erji_header{font-size:32px;color:#fff;height:100px;line-height: 100px;} .section01 .s01_agc ul.s01_agc_list li{margin-top:80px;float:left;margin-left:10px;box-sizing: border-box;width:calc( 33% - 10px );} /*第3个li*/ .section01 .s01_agc ul.s01_agc_list li:nth-child(3){position:relative;} .section01 .s01_agc ul.s01_agc_list li:nth-child(3) .s01_agc_whether{font-size:24px;font-weight:bold;width:41px;height:41px;text-align:center;position: absolute;top:20px;right:200px;border-radius: 50% ;background: #0e4781;border:4px solid rgba(39,55,88,.2);} .section01 .s01_agc ul.s01_agc_list li>div{float: left;} .section01 .s01_agc>ul>li .chart{height:200px; padding:0 40px;} /*section02--OMS*/ .section02 .header{height:100px;line-height:100px;position: relative;vertical-align: middle;} .section02{width:1920px;height: 1080px;padding:7px;} .section02 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section02 .header h2>span{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section02 .s02_subheader{position:absolute;top:0;right:50px;font-size:32px;font-weight: bold;vertical-align: middle;} .section02 .s02_subheader>span{display:inline-block;padding-left:36px;font-size:64px;vertical-align: middle;margin-top:-10px;} .section02 .s02_content >ul{margin-top:-20px;} .section02 .s02_content >ul >li{float:left;padding: 60px 40px;box-sizing: border-box;} .section02 .s02_content >ul >li:nth-child(1),.section02 .s02_content >ul >li:nth-child(3){width:60%;} .section02 .s02_content >ul >li:nth-child(2),.section02 .s02_content >ul >li:nth-child(4){width:40%;} .section02 .s02_content ul li>div{float:left;} .section02 .s02_content ul li .font_num{color:#0981fa} .section02 .s02_content ul li>ul>li{float:left;margin:0 25px;} .section02 .s02_transfer h3.erji_header {font-size: 32px;color: #fff;height: 100px;line-height: 100px;} .section02 .s02_transfer h3.erji_header span{display:inline-block;background: #2b6aaa;width:23px;height:15px;margin:-5px 20px 0 0;} .section02 .s02_transfer .s02_tf_content>div{float:left;} .section02 .s02_transfer .s02_tf_content .s02_tc_total{width:235px;height:200px;margin:25px 60px 25px 100px;box-sizing:border-box;border:8px solid rgba(29,55,88,.2);padding:30px 10px;text-align: center;} .section02 .s02_transfer .s02_tf_content .font_num{padding-top:20px;} .section02 .s02_transfer .s02_tf_content ul.s02_tc_citys li{float:left;width:184px;height:60px;line-height:60px;font-size:18px;color:#fff;padding:0 28px;text-align:center;background: #1d9d0c;border-radius:10px;margin:20px 0 0 100px;} .section02 .s02_transfer .s02_tf_content ul.s02_tc_citys li.bg_orenge{background:#e9a825;} /*机房*/ .section03 .header{height:100px;line-height:100px;position: relative;vertical-align: middle; } .section03 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section03 .header h2>span.rec{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section03 .header h2>span.s03_subheader{color:#2f5e87;font-size:42px;padding-left:60px;} .section03 .s03_content .s03_plan{width:1089px;height:906px;box-sizing:border-box;padding:10px;float:left;background: url(../img/others/jifang-01.svg) 50% top no-repeat;background-size: 1089px 906px;position:relative;} .section03 .s03_content .s03_plan .icon{width:18px;height:18px;position: absolute;} .section03 .s03_content .s03_plan .s03_p_iconTpt1{top:43px;left:59px;} .section03 .s03_content .s03_plan .s03_p_iconTpt2{top:43px;left:208px;} .section03 .s03_content .s03_plan .s03_p_iconTpt3{top:43px;left:59px;} .section03 .s03_content .s03_plan .s03_p_iconTpt4{top:132px;left:208px;} .section03 .s03_content .s03_plan .s03_p_iconTpt5{top:43px;left:349px;} .section03 .s03_content .s03_plan .s03_p_iconTpt6{top:132px;left:349px;} .section03 .s03_content .s03_plan .s03_p_iconTpt7{top:204px;left:708px;} .section03 .s03_content .s03_plan .s03_p_iconTpt8{top:204px;left:768px;} .section03 .s03_content .s03_plan .s03_p_iconTpt9{top:43px;left:59px;} .section03 .s03_content .s03_plan .s03_p_iconTpt10{top:43px;left:59px;} .section03 .s03_content .s03_plan .s03_p_warnBox{position:absolute;top:173px;left:377px;} .section03 .s03_content .s03_plan .s03_pw_inner{padding:10px 10px 10px 20px;color:#fff;font-size:14px;position: relative;width:158px;height:75px;background:#fc4100;box-shadow:0 0 12px 5px rgba(256,65,0,.4);} .section03 .s03_content .s03_plan .s03_pw_inner p{line-height:27px;} .section03 .s03_content .s03_plan .s03_pw_inner p span{display: inline-block;padding-left:30px;} .section03 .s03_content .s03_plan .s03_pw_inner>i{position:absolute;top:10px;left:139px;} .section03 .s03_content ul{float:left;} .section03 .s03_content ul li{margin-bottom:30px;} .section03 .s03_content ul li>div{float:left;} .section03 .s03_content ul li .img_box{margin:30px 0 0 30px;} .section03 .s03_content ul li .server_msg{margin:10px 0 0 30px;} .section03 .s03_content ul li .server_msg .server_title{font-size:18px;color:#fff;padding-bottom:10px;} .server_content>div{float:left} .section03 .s03_content ul li .server_msg .server_content .server_memory .sm_piechart{width:110px;height:110px;float:left;} .section03 .s03_content ul li .server_msg .server_content .server_memory .sm_msg{float:left;margin-left:30px;} .section03 .s03_content ul li .server_msg .server_content .server_memory .sm_msg .font_num{font-size:60px;} .section03 .s03_content ul li .server_msg .server_content .server_cpu{margin-left:50px;} /*告警*/ .section04 .header{height:100px;line-height:100px;position: relative;vertical-align: middle; position:relative;} .section04 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section04 .header h2>span.rec{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section04 .s04_subheader{position:absolute;top:0;right:50px;vertical-align:middle;font-size:32px;color:#3878c3;font-weight: bold;} .section04 .s04_subheader .num_green{font-size:64px; vertical-align: middle;display: inline-block;margin-top:-10px;} .section04 ul.s04_content{padding:60px 70px;} .section04 ul.s04_content>li{float:left;width:50%;box-sizing:border-box;} .section04 ul.s04_content>li>div>div{float:left;} .section04 ul.s04_content>li>div>div.font_text{margin-left:100px;} .section04 table tbody tr td:nth-child(1){color:#0981FA} .section04 table tbody tr td:nth-child(3){color:#ffd501} /*统调发电用电曲线*/ .section05 h3.s05_subheader{font-size: 32px;color: #fff;height: 100px;line-height: 100px;} .section05 h3.s05_subheader span{display: inline-block;background: #2b6aaa;width: 23px;height: 15px;margin: -5px 20px 0 0;} .section05 .s05_etcline{width:100%;;height:590px;padding:10px;box-sizing:border-box;border:1px solid #ccc;} .section05 .s05_waysMonitor ul{float:left;width:60%;} .section05 .s05_waysMonitor .s05_ways li{float:left;margin:40px 100px 0 25px;} .section05 .s05_waysMonitor .s05_ways li>div{float:left;} .section05 .s05_waysMonitor table{float:left;width:32%;box-sizing: border-box;margin:none;} .section05 .s05_waysMonitor table tr{background: transparent;} .section05 .s05_waysMonitor table thead tr td{color:#ccc} .section05 .s05_waysMonitor table tbody tr td{position: relative;} .section05 .s05_waysMonitor table tbody tr td:nth-child(2),.section05 .s05_waysMonitor table tbody tr td:nth-child(3){width:100px;} .section05 .s05_waysMonitor table tbody tr td img{position:absolute;top:10px;left:20px;} /*网络*/ .section06 .header{height:100px;line-height:100px;position: relative;vertical-align: middle;} .section06 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section06 .header h2>span{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section06 .s06_subheader{position:absolute;top:0;right:50px;font-size:32px;font-weight: bold;vertical-align: middle;} .section06 .s06_subheader>span{display:inline-block;padding-left:36px;font-size:64px;vertical-align: middle;margin-top:-10px;} .section06 .s06_nets .s06_net_img{margin:50px 30px 0 50px;} .section06 .s06_nets>ul{float:left} .section06 .s06_nets>div{float:left} .section06 .s06_nets ul.s06_net_list li{margin:50px 80px 0 80px;float:left;} .section06 .s06_nets ul.s06_net_list li .font_num{display: inline-block;margin-top:25px;} .section06 .s06_citysNet li {box-sizing:border-box;width:16%;float:left;border-right: 6px solid rgba(29,55,88,.15);} .section06 .s06_citysNet li table tr {background:transparent;} .section06 .s06_citysNet li table span.s06_cns_cityname{display: inline-block;width:77px;height:36px;font-size:16px;border-radius:4px;background: #134c86;line-height: 36px;text-align: center;} .section06 .s06_citysNet li table thead .s06_cns_warn .s06_cw_text{font-size:16px;} .section06 .s06_citysNet li table thead .s06_cns_warn .s06_cw_num{color:#ff001a;display: inline-block;margin-left:10px;} .section06 .s06_citysNet li table tbody tr td:nth-child(1){text-align: center;} .section06 .s06_citysNet li table tbody tr td:nth-child(2){padding:0 40px;} .section06 .s06_citysNet li table tbody tr td:nth-child(2)>span{display: inline-block;border: 2px solid #faf701;border-radius:50%;width:32px;height:32px;position: relative;} .section06 .s06_citysNet li table tbody tr td:nth-child(2)>span>span{display:inline-block;width:32px;text-align:center;position:absolute;top:-10px; right:0px;color:#faf701;font-size:16px;} .section06 .s06_citysNet li table tbody tr td:nth-child(2)>span.warnRed{border: 2px solid #ee0819;} .section06 .s06_citysNet li table tbody tr td:nth-child(2)>span.warnRed>span{color:#ee0819;} /*电源接线图*/ .section07 .header{height:100px;line-height:100px;position: relative;vertical-align: middle;} .section07 .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section07 .header h2>span{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section07 .s07_diagramWrap{width:1890px;height:720px;border:1px solid #ccc;} .section07 ul.s07_airList{margin-top:40px;} .section07 ul.s07_airList li{float:left;width:20%;box-sizing:border-box;} .section07 ul.s07_airList li>div{float:left;} .section07 ul.s07_airList li .s07_al_circleChart{width:106px;height:106px;} .section07 ul.s07_airList li .s07_al_msg{margin-left:20px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_title{color:#fff;font-size:18px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content{margin-top:10px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content>div{float:left;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content .s07_al_circleChart{width:106px;height:106px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content .font_text{margin:0 0 0 20px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content .font_text .font_num{font-size:60px;} .section07 ul.s07_airList li .s07_al_msg .s07_am_content .font_text .font_num>small{font-size:24px;} /*交接班*/ .section08 .s08_Screen{width:50%;box-sizing:border-box;float:left;position: relative;height:100%;} .section08 .s08_Screen01 .header{height:100px;line-height:100px;position: relative;vertical-align: middle;} .section08 .s08_Screen .header h2{font-size:42px;font-weight: bold;color:#fff;height:100px;line-height: 100px;} .section08 .s08_Screen .header h2>span{display:inline-block;background: #2b6aaa;width:68px;height:24px;margin-right: 20px;margin-top:-5px;} .section08 .s08_Screen .s08s_sl_summary{line-height:80px;margin-left:50px;} .section08 .s08_Screen .font_title{font-size:24px;font-weight:bold;color:#7487a5;display: inline-block;margin-top:-5px;vertical-align: middle;} .section08 .s08_Screen .s08s_sl_summary .font_num{margin-left:50px;vertical-align: middle;font-size:72px;} .section08 .s08_Screen ul.s08s_sl_list {width:calc( 100% - 1%);padding:30px 1% 0 1%;background:#1a222d;} .section08 .s08_Screen ul.s08s_sl_list li{padding:20px 0 10px 80px;height:100px;min-height:100px;position:relative;font-weight: normal;vertical-align: middle;} .section08 .s08_Screen02 ul.s08s_sl_list li{padding:20px 0 10px 80px;height:auto;position:relative;font-weight: normal;vertical-align: middle;} .section08 .s08_Screen ul.s08s_sl_list li:nth-child(odd){background: #181c24} .section08 .s08_Screen ul.s08s_sl_list li .s08s_sl_li_img{position: absolute;top:35px;left:10px;} .section08 .s08_Screen ul.s08s_sl_list li p:nth-child(2) {font-size:24px;font-weight:bold;color:#a5d0fc;line-height: 40px;} .section08 .s08_Screen ul.s08s_sl_list li p:nth-child(3){font-size:18px;color:#0a7cf0;line-height: 30px;} .section08 .s08_Screen .s08s_person{background:#1e2739;padding:20px 0;;height:235px;position:absolute;bottom:10px;left:0;width:100%;box-sizing: border-box;} .section08 .s08_Screen .s08s_person>div{float:left;} .section08 .s08_Screen .s08s_person .s08s_p_photo{width:130px;height:190px;margin-left: 40px;margin-bottom:20px;} .section08 .s08_Screen .s08s_person .s08s_p_msg,.s08s_p_time{margin:40px 0 0 40px;font-size:36px;line-height:60px;} .section08 .s08_Screen .s08s_person .s08s_p_msg span:nth-child(1),.s08s_p_time span:nth-child(1){color:#7487a5;} .section08 .s08_Screen .s08s_person .s08s_p_msg span:nth-child(2),.s08s_p_time span:nth-child(2) {color:#fff;}
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复