* { margin: 0; padding: 0; box-sizing: border-box; list-style: none; } html, body { font-family: "微软雅黑", arial, helvetica, sans-serif; font-size: 14px; border: 0; outline: none; color: #eeeffe; } .clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clearfix { zoom: 1; } .fl { float: left; } .fr { float: right; } body { background: url(../images/bg.jpg) top center no-repeat; background-size: 100% 100%; } .content { width: 100%; height: 92%; padding: 20px 20px 0 20px; } .left-con, .right-con{ width: 20.8%; height: 100%; } .center-con{ width: 57.4%; height: 100%; margin-left: 10px; position: relative; } /* 营区简介 */ .yqjj{ width: 100%; height: 63%; background: url(../images/yqjjbg.png) top no-repeat; background-size: 100% 100%; padding: 15px; } .yq-title{ height: 26px; line-height: 26px; font-size: 20px; color: #3dcdf9; } .yq-title img{ vertical-align: middle; display: inline-block; } .yq-title span{ padding-left: 10px; } .yq-con{ height: 100%; margin-top: 16px; overflow: hidden; text-overflow: ellipsis; } .yq-con p{ font-size: 15px; line-height: 25px; } @media screen and (min-height: 500px) and (max-height: 700px){ .yq-con p{font-size: 12px;line-height: 12px;} } @media screen and (min-height: 700px) and (max-height: 900px){ .yq-con p{font-size: 12px;line-height: 25px;} } @media screen and (min-height: 1050px) and (max-height: 1090px){ .yq-con p{font-size: 17px;line-height: 29px;} } /* 周界报警趋势图 */ .zjbj{ width: 100%; height: 32%; background: url(../images/zjbjbg.png) top no-repeat; background-size: 100% 100%; padding: 15px; } .m-t20{ margin-top: 10px; } .zj-con{ height: 88%; margin-top: 15px; } /* 中间数据统计 */ .sjtj{ width: 100%; height: 110px; overflow: hidden; } .sjtj li{ width: 25%; height: 110px; padding: 0 10px; float: left; } .sjtj li .sjtjli{ width: 100%; height: 110px; background: url(../images/sjtjbg.png) top no-repeat; background-size: 100% 100%; padding: 16px; } .sj-left{ width: 64.2%; } .sj-title{ height: 20px; font-size: 20px; color: #3DCDF9; line-height: 20px; } .sj-zg{ height: 48px; margin-top: 10px; } .sj-zg div{ height: 24px; font-size: 16px; color: #EEEFFE; line-height: 24px; } .sj-icon{ width: 28.9%; height: 63px; margin-top: 8px; line-height: 63px; } .sj-icon img{ vertical-align: middle; display: inline-block; }