* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
background: #121e39;
font-family: "Microsoft YaHei";
}
.nav {
display: flex;
justify-content: center;
padding-top: 10px;
}
.nav-title {
position: absolute;
text-align: center;
color: white;
font-size: 36px;
font-weight: bold;
}
.nav img {
width: 1920px;
overflow: hidden;
}
.main {
height: 55%;
}
.main-content {
display: flex;
height: 84%;
margin-top: 5px;
}
.main-content-left, .main-content-right {
display: flex;
flex: 1;
flex-direction: column;
}
.main-content-center {
border: solid 1px #0a2c40;
margin: 7px;
padding: 5px;
flex: 2;
background-repeat: no-repeat;
background-size: 100%;
}
.personnel-ratio {
width: 100%;
height: 86%;
}
.personnel-ratio-type {
width: 50%;
height: 50%;
float: left;
}
.personnel-ratio-container {
height: 100%;
}
.main-content-center-img {
width: 100%;
height: 95%;
}
.main-content-center-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.location-icon {
position: absolute;
top: 20%;
left: 40%;
background-color: red;
z-index: 100000;
}
.location-icon img{
}
.main-bottom {
height: 45%;
display: flex;
flex-direction: row;
margin-top: -8px;
}
.main-bottom .main-bottom-left {
flex: 1;
display: flex;
flex-direction: column;
}
.main-bottom .main-bottom-right {
flex: 3;
display: flex;
flex-direction: row;
}
.from-data, .visual-data {
width: 50%;
flex: 1;
display: flex;
flex-direction: column;
}
.chart-title-img {
background: #0a3849;
height: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.content {
width: 270px;
border-radius: 0 15px 0 0;
background: #082438;
margin-left: 8px;
}
.chart-title-img.content.position-left, .chart-title-img.content.position-right {
position: absolute;
top: 60px;
height: 25px;
}
.chart-title-img.content.position-left {
left: 10px;
}
.chart-title-img.content.position-right {
margin-left: 10px;
}
.icon-title {
color: #ffffff;
flex: 2;
display: inline-block;
font-size: 20px;
line-height: 30px;
padding-left: 9px;
}
.icon-title.first {
padding-left: 60px;
text-align: center;
font-size: 24px;
}
.icon-img {
float: right;
padding-right: 15px;
}
.data-statistics {
flex: 1;
border: 1px solid #0a2c40;
padding: 5px;
margin: 8px;
overflow: hidden;
}
/*表格*/
.table {
color: #ffffff;
width: 100%;
}
th,td {
text-align: center;
font-size: 14px;
height: 31px;
line-height: 32px;
}
.table thead tr{
background: rgba(8,36,56,0.58);
}
.table tbody tr:nth-child(odd){
border-collapse:separate;
border-spacing:0px 10px;
background: rgba(25,177,201,0.2);
}
.table tbody tr:nth-child(even){
background: rgba(8,36,56,0.58);
}
.table-project-name,.icon-title.addr-title {
max-width: 90px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.visual-data {
background-image: url("/public/data/img/xg_img.png");
background-repeat: no-repeat;
background-position: right top;
background-size: 50% 50%;
}
.chart-title-img.data-display {
margin: 10px 8px -10px;
}
.card-back-color {
background: rgba(23,49,96,0.9);
}
.patrol-report {
position: relative;
background:rgba(10,56,73,0.68);
height: 40px;
z-index: 1;
width: 100%;
overflow: hidden;
bottom: 44px;
}
.patrol-record-report {
width: 10%;
height: 20%;
right: 15px;
bottom: 265px;
position: absolute;
}
.patrol-report-content {
width: 100%;
height: 85%;
text-align: center;
}
.patrol-report-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.patrol-report .patrol-report-title {
display: block;
text-align: center;
height: 40px;
line-height: 40px;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}