#body{ width:100%; min-width: 1280px; height:100%; } @font-face{font-family:electronicFont;src:url(../../assets/screen/font/DS-DIGIT.TTF)} #index { color: #d3d6dd; width: 100%; min-width: 1280px; overflow-x:scroll; height: 100%; padding: 0.2rem 0.2rem 0 0.2rem; font-size: 14px; } .head-title{ height: 8vh; line-height:8vh; min-height: 48px; } .icon_shdq{ width:100px; margin-left:0px; } .icon_lb{ width:60px; margin-right:0px; } .el-row { &:last-child { margin-bottom: 0; } } .el-col { border-radius: 4px; } .grid-content { border-radius: 4px; min-height: 2vh; } .chart { display: inline-block; } /*标题*/ .title { overflow: hidden; // font-size: 36px; font-size: 1.3vw; color: rgb(8, 240, 255); font-weight: bold; text-align: center; } .title_l { // background-image: url("../../assets/screen/ksh31.png"); height: 4vh; min-height: 24px; background-size: cover; background-position: center center; } .title_r{ // background-image: url("../../assets/screen/ksh32.png"); height: 4vh; min-height: 24px; text-align: right; background-size: cover; color:#fff; background-position: center center; } /*日期栏*/ .time-box-row{ height:4vh; min-height: 24px; // margin-top: 25px; } .time-box-left{ width:40%; margin-left: 5px; padding-left: 5px; border-radius: 0px; margin-top: 2px; line-height: 3.5vh; height:3.5vh; min-height: 21px; background-image: url("../../assets/screen/time_left.png"); background-size: cover; background-position: center center; display: inline-block; } .time-box-right{ text-align: right; display: inline-block; border-radius: 0px; margin-top: 2px; line-height: 3.5vh; width:40%; height:3.5vh; min-height: 21px; margin-right: 5px; padding-right: 10px; background-image: url("../../assets/screen/time_right.png"); background-size: cover; background-position: center center; } .time-box{ font-weight: 600; font-size: 1.7vh; } /*表格栏*/ .left-chart{ position: relative; border: 1px solid rgba(25,186,139,.17); padding: 5px; height:15vw; min-height: 188px; background-color: #111d41; margin:5px; } .left-chart1-box{ width:50%; height:100%; float: left; display: inline-block; } .left-chart1-box-contnet{ width:100%; height: 20%; font-size: 1.2vw; text-align: center; display: inline-block; } .box-number{ color: #ffeb7b; padding: 0.05rem 0; font-size:3.4vh; font-family: electronicFont; font-weight: bold; } .task-header{ font-weight: 600; font-size: 18px; color: #3fd5f1; margin-bottom: 5px; padding-left: 8px; text-align: left; } .task-table{ width:100%; height:100%; } .table-index{ display:inline-block; width:16px; height:16px; border-radius:8px; background:#1296db; color:#FFF; text-align:center; line-height:16px; } /*告警统计*/ .alarm-title{ font-weight: 600; font-size: 18px; color: #3fd5f1; margin-bottom:5px; padding-left: 8px; } .alarm-total-box{ height:2vw; min-height: 24px; text-align: center; line-height:2vw; font-weight: 500; font-size: 1.5vh; background-color:#15265f; margin:5px 10px; } //右侧表格 .right-chart{ position: relative; border: 1px solid rgba(25,186,139,.17); padding: 5px; height:15vw; min-height: 188px; background-color: #111d41; margin:5px; } .right-chart-left-box{ width:35%; height:100%; display: inline-block; } .right-chart-right-box{ width:65%; height:100%; display: inline-block; } //右侧表格 .right-chart2{ position: relative; border: 1px solid rgba(25,186,139,.17); padding: 5px; height:calc( 30vw + 5px); min-height: 188px; background-color: #111d41; margin:5px; } /*中间地图*/ .center-map{ width:calc( 100% - 10px); background-color: #111d41; margin:5px; position : relative; top:0; left:0; height:calc(30vw + 5px); min-height: 384px; border: 1px solid rgba(25,186,139,.17); z-index: 10; } .topL{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;top:0px;left:0px} .topR{width:20px;height:20px;border-top-width:2px;border-top-color:#26c6f0;border-top-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;top:0px;right:0px} .bottomL{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-left-width:2px;border-left-color:#26c6f0;border-left-style:solid;position:absolute;bottom:0px;left:0px} .bottomR{width:20px;height:20px;border-bottom-width:2px;border-bottom-color:#26c6f0;border-bottom-style:solid;border-right-width:2px;border-right-color:#26c6f0;border-right-style:solid;position:absolute;bottom:0px;right:0px} .center-bottom{ height:15vw; position: relative; border: 1px solid rgba(25,186,139,.17); background-color: #111d41; margin:5px; min-height: 179px; } .center-bottom-left{ width:80%; height:100%; padding: 5px; display: inline-block; } .center-bottom-right{ width:20%; height:100%; display: inline-block; } .center-bottom-right-box{ width:90%; margin-left: 5%; height:50%; display: inline-block; text-align: center; line-height: 50%; position: relative; } .maindataeffect{ animation: scrolleffect 6.5s infinite linear; width:6vw; margin-top:15px; } .maindataeffect-content{ width:100%; height:100%; position: absolute; top: 0px; text-align: center; padding-top: 50%; left: 0; font-size: 3vh; } @keyframes scrolleffect { 0%{transfrom: rotate(0deg);} 25%{transform: rotate(90deg);} 50%{transform: rotate(180deg);} 75%{transform: rotate(270deg);} 100%{transform: rotate(360deg);} } .bm-view { width: 100%; height:46vh; } .map-center-top{ width: 14vw; min-width: 300px; // background-color:green; text-align: center; height: 5vh; font-size: 2.6vh; font-weight: bold; position : absolute; top:20px; left : 21%; margin:0 auto; z-index: 999; } .map-left-bottom{ width: 5vw; min-width: 100px; height: 5vh; font-size: 0.6vw; position : absolute; bottom:20px; left : 20px; z-index: 999; } .map-left-bottom-head{ margin-bottom: 5px; font-weight: bold; } .map-left-bottom-title{ display: inline-block; width:60%; } .map-left-bottom-color0{ display: inline-block; width:20px; height:8px; background-color: green; } .map-left-bottom-color1{ display: inline-block; width:20px; height:8px; background-color: yellow; } .map-left-bottom-color2{ display: inline-block; width:20px; height:8px; background-color: red; } .map-right-bottom{ width: 5vw; min-width: 100px; height: 17vh; background:#245baf; font-size: 1vh; position : absolute; border:1px solid #fff; bottom:10px; right : 10px; z-index: 999; } .center-alarm-label{ padding-top: 1px; line-height: 1.8vh; height:2vh; width:100%; } .center-alarm-label1{ padding-top: 1px; line-height: 1.8vh; height:2vh; width:100%; background:#1262dd; } .center-alarm-total-label{ line-height: 5.2vh; height:5.2vh; width: 16.5vh; font-weight: bold; color:yellow; } .alarm-label-title{ width:65%; height: 100%; text-align: center; display: inline-block; } .alarm-label-value{ width:35%; height: 100%; display: inline-block; text-align: center; } .normal-value{ color:yellow; } .back-btn{ position: fixed; top:10px; right:25px; cursor: pointer; font-family: datavfont!important; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 5px; display: block; color: #3fd5f1; text-align: center; } .el-icon-edit-outline{ font-size: 20px; } .back-btn a{ font-size: 12px; } .back-btn:hover{ color:#1bb0cc; } .el-date-editor{ width:100%; }