header { width: 100%; height: 1.3125rem; text-align: center; color: #00F6FF; position: relative; /* z-index:99 */ } .header-logo { /* height: 1.3125rem; */ /* top:0; left:50%; */ height: 1.3125rem; width: 100%; background-image: url(../images/header-logo.png); background-size: contain; background-position: top center; display: inline-block; background-repeat: no-repeat } header .weather { position: absolute; top: .2rem; left: .7rem; font-size: .25rem; } header .weather span { display: inline-block; margin-right: 3px } header .showTime { position: absolute; top: .2rem; right: .7rem; font-size: .25rem; } .mainbox { min-width: 1270px; max-width: 1920px; /* padding: .287rem .287rem 0; */ display: flex; height: 100vh; /* height:13.5rem; */ position: relative; } .mainbox .column { flex: 3 } .mainbox .column:nth-child(2) { flex: 6; } .panel { position: relative; padding: .225rem; } .no h2, .panel h2 { /* text-align: center; */ font-size: .175rem; color: #fff; margin-bottom: .225rem; position: relative; } /* 搜索区域样式 */ .choose-box { position: absolute; bottom: -0.0625rem; right: 0; font-size: .175rem } .choose-box select, .choose-box input { border: 1px solid #036B77; width: 2.05rem; height: .3rem; color: #fff; line-height: .3rem; background: rgba(0, 0, 0, 0); margin-right: .125rem } .choose-box span { display: inline-block; margin-right: .125rem } a.button { width: .6875rem; height: .3rem; line-height: .3rem; text-align: center; border: 1px solid #036B77; color: #fff; display: inline-block; text-decoration: none; background: #034854; cursor: pointer; } .panel .chart { height: 1.625rem; display: flex; justify-content: center; align-items: center } .no { height: 4.05rem; overflow: hidden; /* background-image: url(../images/no-bg.png) */ /* border:1px solid green */ } .data-table-box table { /* width: 10.262rem; */ width: 100%; margin: 0 auto; color: #fff; font-weight: 400; font-size: .175rem; text-align: left; width: 100%; table-layout: fixed; } .data-table-box thead th { font-size: 0.175rem; /* line-height: 0.5rem; */ font-weight: 400; padding: 0 .125rem; line-height: .4rem; } .data-table-box table td { padding: 0 .125rem; line-height: .4rem; } .data-table-box table tr:nth-child(even) { background: rgba(14, 25, 49, 0.20); } .data-table-box table tr:nth-child(odd) { background: rgba(14, 25, 49, 0.40); } .data-table-box table tbody tr { cursor: pointer } .data-table-box table tbody tr:hover, .data-table-box table tbody tr.selected { background-color: rgb(14, 112, 203); } .scroll { height: 2.3rem; overflow-y: auto; } .device-table tr td:first-child, .device-table tr th:first-child { width: 1.5rem } .device-table tr td:nth-child(2), .device-table tr th:nth-child(2) { width: 1rem } .alarm-table tr td:first-child, .alarm-table tr th:first-child { width: 2rem } .alarm-table tr td:nth-child(2), .alarm-table tr th:nth-child(2) { width: 3.5rem } .alarm-table tr td:nth-child(3), .alarm-table tr th:nth-child(3) { width: 1.3rem } .alarm-table tr td:nth-child(4), .alarm-table tr th:nth-child(4) { width: 3.5rem } .alarm-table tr td:nth-child(5), .alarm-table tr th:nth-child(5) { width: 2.5rem } .alarm-table tr td:nth-child(6), .alarm-table tr th:nth-child(6) { width: 1rem } .map { position: relative; height: 7.55rem; margin-bottom: .287rem; /* background-size: 90% 90%; background-position: bottom center; background-image:url(../images/store.png); background-repeat: no-repeat; opacity: .5 */ } .map .chart { position: absolute; top: 0; left: 0; z-index: 5; height: 10.125rem; width: 100% } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0) } to { transform: translate(-50%, -50%) rotate(360deg) } } @keyframes rotate1 { from { transform: translate(-50%, -50%) rotate(0) } to { transform: translate(-50%, -50%) rotate(-360deg) } } .title-btn { color: #fff; width: 1.75rem; line-height: .4rem; background: rgba(0, 130, 255, .4); border: 2px solid #0082ff; border-radius: 10px; text-align: center; font-size: .25rem; margin: .125rem auto } .total-squares { margin: .175rem auto; text-align: center } .total-square { display: inline-block; width: .55rem; height: .55rem; line-height: .55rem; border: 1px solid rgba(0, 212, 233, .4); font-size: .375rem; color: #F6FF00 } .yq-total { font-size: .25rem; color: #00D4E9; text-align: center } .panel { /* opacity: 0.8; */ background: linear-gradient(#003d83 0%, rgba(0, 61, 131, 0.25) 48%, #003d83 100%); border: 1px solid #00f6ff; border-radius: 10px; box-shadow: 0px 0px 40px 0px rgba(0, 61, 131, 0.70) inset; } .data-table-box { position: absolute; bottom: .25rem; /* bottom: 200px; */ width: 100%; display: flex; /* background:pink; */ /* border:1px solid pink; */ padding: 0 .25rem; /* height:30vh */ /* height:3.5rem; */ } .data-table-box .panel { height: 3.5rem; overflow: hidden /* border:1px solid pink */ } .data-table-box .column:first-child .panel { margin-right: .25rem; } .data-statistic { width: 3.5rem; height: 6.5rem; top: .7875rem; left: .25rem; position: absolute; } .data-statistic li { display: inline-block; color: #fff; width: 1.375rem; border: 1px solid red; background: rgba(0, 106, 94, 0.50); border: 1px solid #039aa0; text-align: center; padding: .15rem 0; margin-bottom: .25rem } .data-statistic li:nth-child(odd) { margin-right: .15rem } .digit-num { font-size: .375rem; font-family: "electronicFont"; } .digit-des { font-size: .15rem; color: #fff; margin-top: .0875rem } /* 声明字体*/ @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF); } #map1 { width: 100%; height: 100%; z-index: 0; position: fixed; top: 0; left: 0 } .layui-layer { background: rgba(0, 0, 0, 0)!important } .dataOut { /* transform:scale(.5); */ width: 100%; height: 100%; width: 638px; height: 620px; position: absolute; top: 50%; left: 50%; margin-top: -310px; margin-left: -319px; background-size: contain; background-repeat: no-repeat; background-size: 100% 100%; } .masker { width: 100%; height: 100%; background: rgba(0, 0, 0, .5); display: block; position: absolute; top: 0 } @media(max-width:1440px) { .dataOut { transform: scale(.8); } } /* 设备详情弹框 */ .deviceDetailOut { display: none } .deviceDetailOut .dataOut { background-image: url(../images/deviceOut-bg.png); } .dataOut .ttBox { padding: 25px 20px; cursor: move; /* border: 1px solid pink */ } .dataOut .ttBox .tt { font-size: 14px; display: block; color: #01FBF6 } .dataOut .ttBox .clsBtn { display: block; color: black; cursor: pointer; width: 24px; height: 24px; position: absolute; border-radius: 50%; text-align: center; line-height: 24px; top: 20px; right: 20px; background: #01FBF6; } .dataOut .ttBox .clsBtn img { width: 24px; height: 24px; } .timeTitle { color: #fff; width: 100%; text-align: center; font-size: 14px; } .deviceDetailOut ul { position: absolute; top: 167px; } .deviceDetailOut ul.leftUl { left: 117px; } .deviceDetailOut ul.rightUl { left: 457px; } .deviceDetailOut ul li { width: 70px; height: 34px; line-height: 34px; text-align: center; background: pink; margin-bottom: 20px; font-size: 14px; opacity: .5 } .alarmHanleOut { display: none } .alarmHanleOut .dataOut { background-image: url(../images/alarm-handle-bg.png); } .alarmHanleOut .txtBox { padding-right: 50px; padding-bottom: 20px; padding-left: 50px; } .alarmHanleOut .txtBox span { width: 60px; color: #fff; font-size: 14px; display: inline-block; text-align: right; line-height:34px; margin-right: 10px; vertical-align: middle; } .alarmHanleOut .txtBox input { width: 186px; line-height: 34px; font-size: 14px; /* color:#fff; */ border: 1px solid #016F6D; margin-bottom: 14px; background: #555555; outline: none; } input::-webkit-input-placeholder { color: rgba(255, 255, 255, .7)!important; } input::-moz-input-placeholder { color: rgba(255, 255, 255, .7)!important; } input::-ms-input-placeholder { color: rgba(255, 255, 255, .7)!important; } .error-radio .layui-form-item { display: inline-block; margin-bottom: 0; color: #fff; line-height: 34px; } .error-radio .layui-input-block { margin-left: 0 } .error-radio .layui-form-radio { margin: 0; width: 80px; line-height: 20px; } .error-radio .layui-form-radioed>i, .error-radio .layui-form-radio>i:hover { color: #01FBF6 } .error-radio .layui-anim-scaleSpring { -webkit-animation-name: none; animation-name: none; } .error-radio .layui-input-block { min-height: auto; } .error-radio .layui-form-radio>i { font-size: 14px; } .dataOut .btnArea { position: absolute; bottom: 43px; width: 100%; text-align: center } .dataOut .btnGroup { padding: 5px; } .dataOut .btnGroup img { position: absolute; left: 5px; top: 5px; } .dataOut .sgBtn { display: inline-block; cursor: pointer; width: 75px; line-height: 20px; text-align: center; color: #FFFFFF; border-radius: 5px; } .dataOut .sgBtn:hover { opacity: .7 } .dataOut .sgBtn.ok { margin-right: 100px } .dataOut .sgBtn.ok, .dataOut .sgBtn.cancel, .dataOut .sgBtn.cancel2 { width: 92px; line-height: 34px; position: relative; color: #fff; background: #00BCB8; border-radius: 3px; font-size: 14px; } #drop_area { display: inline-block; vertical-align: middle; line-height: 114px; text-align: center; } } /* 地图撒点样式 */ #detail_info { padding: 0px 8px; } .info-text { display: inline-block; color: #00F6FF; width: 70px; text-align: right } #digitalValue{ color:#B4C5D8; } #deviceStatus{ color:#B4C5D8; }