919 lines
21 KiB
CSS
919 lines
21 KiB
CSS
html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
width: 100%;
|
|
min-width: 1280px;
|
|
margin: 0;
|
|
background: url('../personal-img/bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
padding: 3%;
|
|
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "numfont";
|
|
src: url('../fonts/num.otf') format('truetype');
|
|
}
|
|
|
|
.numfont {
|
|
font-family: "numfont" !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: 22% !important;
|
|
height: 100%;
|
|
margin-right: 1% !important;
|
|
}
|
|
|
|
/*closed*/
|
|
#btn {
|
|
position: absolute;
|
|
top: 12%;
|
|
right: 12%;
|
|
width: 52px;
|
|
height: 52px;
|
|
z-index: 9999999;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#btn>div {
|
|
width: 52px;
|
|
height: 52px;
|
|
position: relative;
|
|
}
|
|
|
|
.btn0 {
|
|
position: absolute;
|
|
width: 52px;
|
|
height: 52px;
|
|
background: url("../personal-img/close0.png") no-repeat;
|
|
background-size: 100%;
|
|
animation: clockwise 3s linear infinite;
|
|
}
|
|
|
|
.btn1 {
|
|
position: absolute;
|
|
width: 34px;
|
|
height: 34px;
|
|
margin: 9px;
|
|
background: url("../personal-img/close1.png") no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.btn2 {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 16px;
|
|
background: url("../personal-img/close2.png") no-repeat;
|
|
background-size: 100%;
|
|
animation: anticlockwise 3s linear infinite;
|
|
}
|
|
|
|
@keyframes clockwise {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes anticlockwise {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/*air*/
|
|
.air {
|
|
height: 20%;
|
|
margin-top: 5%;
|
|
}
|
|
|
|
.air-title {
|
|
height: 4% !important; /* 缩小标题高度 */
|
|
font-size: 16px !important;
|
|
margin-bottom: 10px !important;
|
|
padding: 2px 0 !important; /* 添加内边距 */
|
|
}
|
|
|
|
.air-relative,
|
|
.air-absolutely {
|
|
height: 20%;
|
|
margin-top: 5%;
|
|
position: relative;
|
|
}
|
|
|
|
.air-relative {
|
|
margin: 2% 0 8% 0;
|
|
}
|
|
|
|
.air-val {
|
|
float: left;
|
|
color: white;
|
|
height: 100%;
|
|
line-height: 100%;
|
|
width: 15%;
|
|
}
|
|
|
|
.air-val div {
|
|
width: 60%;
|
|
height: 100%;
|
|
float: left;
|
|
margin-left: 1%;
|
|
margin-top: 4%;
|
|
}
|
|
|
|
.air-val div p {
|
|
margin: 0 5%;
|
|
}
|
|
|
|
.unit {
|
|
width: 15%;
|
|
float: right;
|
|
margin-right: 5%;
|
|
color: white;
|
|
height: 100%;
|
|
font-family: numfont;
|
|
line-height: 200%;
|
|
text-align: right;
|
|
}
|
|
|
|
.gray {
|
|
border-bottom: 1px solid #25201E;
|
|
}
|
|
|
|
.gray,
|
|
.light {
|
|
height: 100%;
|
|
width: 70%;
|
|
position: absolute;
|
|
left: 15%;
|
|
}
|
|
|
|
.gray span,
|
|
.light span {
|
|
display: block;
|
|
width: 2%;
|
|
height: 90%;
|
|
float: left;
|
|
}
|
|
|
|
.air-relative .gray span {
|
|
background: url("../personal-img/bartop1.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.air-relative .light span {
|
|
background: url("../personal-img/bartop0.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.air-absolutely .gray span {
|
|
background: url("../personal-img/barfoot1.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.air-absolutely .light span {
|
|
background: url("../personal-img/barfoot0.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.air-icon {
|
|
display: block;
|
|
width: 20%;
|
|
height: 90%;
|
|
float: left;
|
|
|
|
}
|
|
|
|
.air-relative .air-icon {
|
|
background: url("../personal-img/bartop0.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.air-absolutely .air-icon {
|
|
background: url("../personal-img/barfoot0.png") no-repeat;
|
|
background-size: auto 100%;
|
|
}
|
|
|
|
.hpa-rel,
|
|
.hpa-abs {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.air-val .hpa-nam {
|
|
margin-top: 20%;
|
|
}
|
|
|
|
.hpa-nam {
|
|
font-size: 10px;
|
|
}
|
|
|
|
/*tem-hum*/
|
|
.tem-hum {
|
|
height: 40% !important;
|
|
margin-top: 1% !important;
|
|
margin-bottom: 1% !important;
|
|
top: 80px;
|
|
overflow: hidden !important;
|
|
background: transparent !important;
|
|
}
|
|
|
|
.temperature,
|
|
.humidity {
|
|
float: left;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: transparent !important; /* 移除背景图片可能的蒙板 */
|
|
position: relative;
|
|
}
|
|
|
|
.temperature::before,
|
|
.humidity::before {
|
|
display: none !important; /* 移除可能的伪元素蒙板 */
|
|
}
|
|
|
|
.tem-hum-title {
|
|
background: #B0CC35;
|
|
width: 60%;
|
|
margin-left: 25%;
|
|
height: 10%;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 160%;
|
|
}
|
|
|
|
.tem-hum-chart {
|
|
width: 80%;
|
|
height: 80%;
|
|
margin: 0 auto;
|
|
background: transparent !important; /* 移除表盘背景蒙板 */
|
|
z-index: 1;
|
|
position: relative !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.tem-hum-chart canvas {
|
|
background: transparent !important;
|
|
opacity: 1 !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
.tem-val,
|
|
.hum-val {
|
|
width: 70%;
|
|
margin-left: 25%;
|
|
height: 12% !important; /* 增加高度 */
|
|
font-size: 14px !important; /* 增大字体 */
|
|
font-weight: bold;
|
|
color: #00ff88 !important; /* 设置明亮绿色 */
|
|
text-shadow: 0 0 10px rgba(0, 255, 136, 0.6) !important; /* 添加发光效果 */
|
|
background: rgba(0, 255, 136, 0.1) !important; /* 添加背景色 */
|
|
border-radius: 4px !important;
|
|
text-align: center !important;
|
|
line-height: 1.2 !important;
|
|
padding: 2px 0 !important;
|
|
}
|
|
|
|
.bloodOxygen-val, .heartRate-val, .pressure-val, .temperature-val {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(0, 228, 255, 0.15) !important; /* 添加背景 */
|
|
border: 1px solid rgba(0, 228, 255, 0.3) !important; /* 添加边框 */
|
|
border-radius: 6px !important;
|
|
color: #00e4ff !important; /* 明亮蓝色 */
|
|
font-size: 13px !important; /* 增大字体 */
|
|
font-weight: bold !important;
|
|
text-shadow: 0 0 8px rgba(0, 228, 255, 0.5) !important; /* 发光效果 */
|
|
padding: 3px 6px !important;
|
|
margin: 2px !important;
|
|
min-height: 20px !important;
|
|
}
|
|
|
|
.bloodOxygen-val:hover, .heartRate-val:hover, .pressure-val:hover, .temperature-val:hover {
|
|
background: rgba(0, 228, 255, 0.25) !important;
|
|
border-color: rgba(0, 228, 255, 0.5) !important;
|
|
text-shadow: 0 0 12px rgba(0, 228, 255, 0.8) !important;
|
|
transform: scale(1.02) !important;
|
|
transition: all 0.2s ease !important;
|
|
}
|
|
|
|
.indoor,
|
|
.outdoor {
|
|
display: inline-block;
|
|
color: white;
|
|
text-indent: 8px;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.indoor {
|
|
border-left: 4px solid #B0CC35;
|
|
}
|
|
|
|
.outdoor {
|
|
border-left: 4px solid red;
|
|
}
|
|
|
|
/*temp-k*/
|
|
.temp-k {
|
|
height: 21%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
#tempKChart {
|
|
height: 87%;
|
|
}
|
|
|
|
.dity-k {
|
|
height: 21%;
|
|
}
|
|
|
|
#dityKChart {
|
|
height: 87%;
|
|
}
|
|
|
|
/*map*/
|
|
.middle {
|
|
float: left;
|
|
width: 50% !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.chinaMap {
|
|
margin-top: 3%;
|
|
width: 100%;
|
|
height: 70%;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
position: relative;
|
|
}
|
|
|
|
.mapBox {
|
|
background: url("../personal-img/旷工.png") no-repeat center;
|
|
background-size: 100% 100%;
|
|
width: 80%;
|
|
margin: 7% auto;
|
|
height: 95%;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.lineRun {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: url("../personal-img/animate.png") no-repeat bottom;
|
|
background-size: 100%;
|
|
position: relative !important;
|
|
z-index: 10 !important;
|
|
margin-top: 5px !important;
|
|
}
|
|
|
|
.headTitle {
|
|
font-family: numfont;
|
|
color: #B0CC35;
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 40px;
|
|
}
|
|
|
|
/*right*/
|
|
.right {
|
|
float: left;
|
|
width: 24% !important;
|
|
height: 100%;
|
|
box-sizing: border-box !important;
|
|
padding-left: 0.8% !important;
|
|
padding-right: 0.8% !important;
|
|
margin-left: 0.5% !important;
|
|
margin-right: 0.5% !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.information {
|
|
width: 90%;
|
|
height: 20%;
|
|
padding: 0 5%;
|
|
}
|
|
|
|
.baseInfo,
|
|
.temData {
|
|
width: 45%;
|
|
height: 100%;
|
|
float: left;
|
|
background: url("../personal-img/verticalline.png") no-repeat left;
|
|
background-size: auto 100%;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
.infoTitle {
|
|
font-size: 10px;
|
|
color: #AEA7A3;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.area {
|
|
font-family: numfont;
|
|
font-size: 30px;
|
|
color: #B0CC35;
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
.days {
|
|
font-family: numfont;
|
|
color: #B0CC35;
|
|
font-size: 25px;
|
|
}
|
|
|
|
.date {
|
|
display: inline-block;
|
|
text-indent: 29px;
|
|
}
|
|
|
|
.idNum {
|
|
display: inline-block;
|
|
text-indent: 50px;
|
|
}
|
|
|
|
.temTitle {
|
|
color: red;
|
|
font-size: 18px;
|
|
margin: 0;
|
|
}
|
|
|
|
.indoorTem {
|
|
font-family: numfont;
|
|
color: red;
|
|
font-size: 30px;
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.temperatureN {
|
|
font-size: 60px;
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.point span {
|
|
display: inline-block;
|
|
|
|
margin-right: 80px;
|
|
}
|
|
|
|
.wind {
|
|
height: 30% !important;
|
|
margin-top: 1% !important;
|
|
margin-bottom: 1% !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
#windChart {
|
|
width: 90% !important;
|
|
margin-left: 5% !important;
|
|
float: left;
|
|
height: 100%;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.windData {
|
|
width: 45%;
|
|
float: left;
|
|
height: 100%;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.health-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.windSpeed,
|
|
.gust {
|
|
width: 94%;
|
|
height: 40%;
|
|
float: right;
|
|
background: url("../personal-img/line1.png") no-repeat center;
|
|
background-size: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.windTitle {
|
|
background: #B0CC35;
|
|
width: 60%;
|
|
margin-top: 5%;
|
|
margin-left: 35%;
|
|
height: 14%;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
line-height: 160%;
|
|
}
|
|
|
|
.windBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #ACA5A1;
|
|
}
|
|
|
|
.windBox>div {
|
|
margin-top: 2%;
|
|
height: 98%;
|
|
float: left;
|
|
}
|
|
|
|
.windBox div p {
|
|
font-size: 12px;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.windWrap {
|
|
width: 76%;
|
|
height: 80%;
|
|
margin: 20% 12%;
|
|
background: url("../personal-img/wind0.png") no-repeat;
|
|
background-size: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.windFan {
|
|
width: 60%;
|
|
margin: 20%;
|
|
}
|
|
|
|
.currentSpeed,
|
|
.highestSpeed {
|
|
font-family: numfont;
|
|
color: #B0CC35;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.windSpeed .windFan {
|
|
animation: speed 600ms linear infinite;
|
|
}
|
|
|
|
.gust .windFan {
|
|
animation: speed 400ms linear infinite;
|
|
}
|
|
|
|
@keyframes speed {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/*rain - 基础rainfall样式*/
|
|
.rainfall {
|
|
width: 100%;
|
|
height: 33%; /* 恢复默认高度 */
|
|
margin-top: 5%;
|
|
background: linear-gradient(135deg, rgba(0, 21, 41, 0.9), rgba(0, 255, 157, 0.05));
|
|
border: 1px solid rgba(0, 228, 255, 0.3);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 20px rgba(0, 21, 41, 0.3);
|
|
}
|
|
|
|
/* 左侧告警panel专用样式 - 确保显示 */
|
|
.rainfall.alert-panel {
|
|
height: 30% !important;
|
|
margin-top: 1% !important;
|
|
margin-bottom: 1% !important;
|
|
position: relative !important;
|
|
z-index: 1 !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
/* 右侧设备状态panel - 恢复原有高度 */
|
|
.rainfall.device-status {
|
|
height: 40% !important;
|
|
max-height: 40% !important;
|
|
margin-top: 1% !important;
|
|
margin-bottom: 2% !important;
|
|
overflow: visible !important;
|
|
box-sizing: border-box !important;
|
|
}
|
|
|
|
/* 右侧消息panel - 恢复高度 */
|
|
.rainfall.message-panel {
|
|
height: 30% !important; /* 恢复到30% */
|
|
margin-top: 1% !important;
|
|
margin-bottom: 2% !important;
|
|
}
|
|
|
|
.alert-title {
|
|
text-align: center;
|
|
font-size: 18px; /* 减小字体 */
|
|
margin-bottom: 8px; /* 减少底部边距 */
|
|
}
|
|
|
|
.alert-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 5px 0 !important; /* 缩小表格边距 */
|
|
font-size: 10px !important; /* 缩小字体 */
|
|
text-align: left;
|
|
}
|
|
|
|
.alert-table th, .alert-table td {
|
|
padding: 4px !important; /* 缩小内边距 */
|
|
border-bottom: 1px solid #576322;
|
|
color: #adaf2f;
|
|
font-size: 9px !important; /* 进一步缩小字体 */
|
|
}
|
|
|
|
.alert-table th {
|
|
background-color: #576322;
|
|
color: white;
|
|
}
|
|
|
|
.alert-table .level {
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.alert-table .level.medium {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.alert-table .level.critical {
|
|
background-color: #dc3545;
|
|
}
|
|
|
|
.alert-table .level.high {
|
|
background-color: #ffc107;
|
|
}
|
|
|
|
.alert-table .pending {
|
|
color: red;
|
|
}
|
|
|
|
.alert-table .responded {
|
|
color: green;
|
|
}
|
|
|
|
.message-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 10px 0; /* 减少表格边距 */
|
|
font-size: 11px; /* 减小字体 */
|
|
text-align: left;
|
|
}
|
|
|
|
.message-table th, .message-table td {
|
|
padding: 8px; /* 减少内边距 */
|
|
border-bottom: 1px solid #576322;
|
|
color: #adaf2f;
|
|
}
|
|
|
|
.message-table th {
|
|
background-color: #576322;
|
|
color: white;
|
|
}
|
|
|
|
.message-table .status {
|
|
padding: 5px 10px;
|
|
border-radius: 5px;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.message-table .status.announcement {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.message-table .status.notification {
|
|
background-color: #6f42c1;
|
|
}
|
|
|
|
.message-table .status.task {
|
|
background-color: #4f9183;
|
|
}
|
|
|
|
.message-table .status.job {
|
|
background-color: #b2abbe;
|
|
}
|
|
|
|
.message-table .status.warning {
|
|
background-color: #dc3545;
|
|
}
|
|
|
|
.message-table .pending {
|
|
color: red;
|
|
}
|
|
|
|
.message-table .responded {
|
|
color: green;
|
|
}
|
|
|
|
.hp_con_right_u{
|
|
background: url(../images/ztl_bg1.png) no-repeat center;
|
|
padding: 8px !important; /* 从3px增加到8px */
|
|
background-size: 100% 100%;
|
|
margin-bottom: 3px !important;
|
|
height: 90% !important; /* 从85%增加到90% */
|
|
max-height: 90% !important;
|
|
overflow: hidden !important;
|
|
}
|
|
|
|
.table3 {
|
|
font-size: 0.18rem !important; /* 从0.14rem增加到0.18rem */
|
|
border: 1px solid #B0CC35;
|
|
border-top: none;
|
|
margin: 5px auto !important; /* 增加边距 */
|
|
margin-top: 3% !important;
|
|
width: 98% !important; /* 确保表格充分利用空间 */
|
|
}
|
|
|
|
.table3 tr {
|
|
border-top: 1px solid #B0CC35;
|
|
}
|
|
|
|
.table3 thead tr {
|
|
background: rgba(129, 184, 9, 0.4);
|
|
}
|
|
|
|
.table3 tr.bg-color {
|
|
background: rgba(180, 204, 139, 0.2);
|
|
}
|
|
|
|
.table3 tr td:nth-child(2n+1),
|
|
.table3 tr td:nth-child(2n+1)>p {
|
|
width: 3rem;
|
|
}
|
|
|
|
.table3 tr td:nth-child(2n),
|
|
.table3 tr td:nth-child(2n)>p {
|
|
width: 1.8rem;
|
|
}
|
|
|
|
/* 优化闪烁灯和文字布局 */
|
|
.table3 tr td {
|
|
border-right: 1px solid #B0CC35;
|
|
height: 0.6rem !important; /* 从0.4rem增加到0.6rem */
|
|
line-height: 0.6rem !important;
|
|
color: #cdddf7;
|
|
text-align: center;
|
|
font-size: 14px !important; /* 从11px增加到14px */
|
|
padding: 4px !important; /* 从2px增加到4px */
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.table3 tr th {
|
|
border-right: 1px solid #B0CC35;
|
|
height: 0.6rem !important;
|
|
line-height: 0.6rem !important;
|
|
color: #cdddf7;
|
|
text-align: center;
|
|
font-size: 14px !important;
|
|
padding: 4px !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.table3 tr td p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #cdddf7;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.table3 thead tr th {
|
|
border-right: none;
|
|
}
|
|
|
|
.rainfall .windData {
|
|
margin-left: 2.5%;
|
|
}
|
|
|
|
/* 个人统计面板样式 - 大幅缩小 */
|
|
.personal-stats {
|
|
background: linear-gradient(135deg, rgba(0, 21, 41, 0.9), rgba(0, 255, 157, 0.05));
|
|
border: 1px solid rgba(0, 228, 255, 0.3);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(8px);
|
|
box-shadow: 0 4px 20px rgba(0, 21, 41, 0.3);
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
height: 25% !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 修复表盘容器样式 */
|
|
.gauge-container {
|
|
width: 100%;
|
|
height: 65%;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
background: transparent !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 历史图表容器优化 */
|
|
#deviceHistoryChart {
|
|
background: rgba(0, 21, 41, 0.3) !important;
|
|
border: 1px solid rgba(0, 228, 255, 0.2) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
.right { width: 25% !important; padding-left: 0.3% !important; padding-right: 0% !important; margin-left: 0.7% !important; box-sizing: border-box !important; overflow: hidden !important; }
|
|
.rainfall.device-status { height: 40% !important; max-height: 40% !important; overflow: visible !important; }
|
|
/* 设备状态panel重新设计 - 确保40%/60%垂直布局 */
|
|
.device-real-status { height: 40% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; }
|
|
.device-history-section { height: 60% !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; }
|
|
.rainfall.device-status { display: flex !important; flex-direction: column !important; padding: 8px !important; }
|
|
#deviceHistoryChart { overflow: hidden !important; flex: 1 !important; min-height: 0 !important; }
|
|
/* 修复右侧面板太靠边的问题 */
|
|
.right { width: 23.5% !important; padding-left: 0.8% !important; padding-right: 1% !important; margin-left: 0.5% !important; margin-right: 0.5% !important; overflow: visible !important; }
|
|
.wind { overflow: visible !important; padding-right: 10px !important; }
|
|
/* 旧样式已覆盖 */
|
|
.middle { width: 49% !important; }
|
|
/* 进一步缩小健康画像雷达图 */
|
|
/* 旧样式已覆盖 */
|
|
/* 移除padding限制 */
|
|
.windData { width: 40% !important; padding-left: 5px !important; }
|
|
/* 雷达图JavaScript尺寸控制 */
|
|
/* 移除高度限制 */
|
|
/* 移除canvas尺寸限制，让雷达图自由缩放 */
|
|
/* 旧样式已覆盖 */
|
|
/* 调整左中右panel底部对齐，保留5%空间 */
|
|
.left, .middle, .right { height: 95% !important; margin-top: 1% !important; margin-bottom: 4% !important; }
|
|
.mapBox { height: 100% !important; margin: 0 auto !important; }
|
|
.chinaMap { height: 95% !important; margin-top: 1% !important; }
|
|
.content { height: 95vh !important; overflow: hidden !important; }
|
|
/* 调整中间人像比例，显示底座 */
|
|
.mapBox { background-size: 90% auto !important; background-position: center 75% !important; height: 90% !important; margin: 3% auto 7% auto !important; }
|
|
.chinaMap { height: 100% !important; margin-top: 0% !important; display: flex !important; align-items: flex-end !important; }
|
|
/* 修复设备状态比例、健康画像位置、中间人像高度 */
|
|
/* 1. 调整设备状态历史趋势比例 30%:70% */
|
|
.device-real-status { height: 30% !important; }
|
|
.device-history-section { height: 68% !important; }
|
|
/* 2. 健康画像在title位置，数据区域宽度增大 */
|
|
.wind .air-title { display: none !important; }
|
|
/* 旧样式已覆盖 */
|
|
.windData { width: 60% !important; padding-left: 2% !important; }
|
|
/* 3. 中间人像抬高，保留5%底部空间 */
|
|
|
|
.wind .air-title { display: block !important; position: absolute !important; top: -8px !important; left: 10px !important; color: #00e4ff !important; font-size: 12px !important; z-index: 10 !important; }
|
|
/* 健康画像专业化改造 - 只显示雷达图，数据作为悬停提示 */
|
|
.windData { display: none !important; }
|
|
/* 旧样式已覆盖 */
|
|
/* 移除padding限制 */
|
|
/* 修复雷达图可视性和tooltip问题 */
|
|
/* 调整左侧panel高度比例 30%/45%/25% 和优化统计布局 */
|
|
.personal-stats { height: 30% !important; margin-bottom: 2% !important; }
|
|
.tem-hum { height: 45% !important; margin-bottom: 2% !important; }
|
|
.hp_con_right_u { height: 23% !important; }
|
|
/* 优化实时统计卡片布局 - 数字和标签水平对齐 */
|
|
.stat-card { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 8px 12px !important; height: 45% !important; }
|
|
.stat-card .stat-icon { font-size: 18px !important; margin-right: 8px !important; }
|
|
.stat-card .stat-value { font-size: 20px !important; font-weight: bold !important; margin: 0 8px !important; }
|
|
.stat-card .stat-label { font-size: 11px !important; color: #00e4ff !important; margin: 0 !important; white-space: nowrap !important; }
|
|
.stat-card .stat-trend { font-size: 10px !important; margin: 0 !important; white-space: nowrap !important; }
|
|
.stats-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: 1fr 1fr !important; gap: 8px !important; height: 100% !important; padding: 8px !important; }
|
|
/* 修复设备状态描述显示和实时统计数据问题 */
|
|
.device-real-status table td { color: #00e4ff !important; font-size: 11px !important; text-align: center !important; vertical-align: middle !important; padding: 2px !important; }
|
|
.device-real-status .breathe-zc, .device-real-status .breathe-yc { margin: 0 auto !important; display: block !important; }
|
|
.device-real-status table { width: 100% !important; height: 100% !important; }
|
|
.device-real-status table tr:first-child td { height: 70% !important; }
|
|
.device-real-status table tr:last-child td { height: 30% !important; display: table-cell !important; vertical-align: middle !important; }
|
|
/* 让雷达图铺满整个健康画像panel */
|
|
#windChart { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
|
|
/* 旧样式已覆盖 */
|
|
.wind { position: relative !important; padding: 0 !important; margin: 0 !important; }
|
|
#windChart { position: absolute !important; top: 20px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: calc(100% - 20px) !important; margin: 0 !important; padding: 0 !important; }
|
|
/* 强制雷达图铺满健康画像panel - 最终版本 */
|
|
.wind .air-title { position: absolute !important; top: 5px !important; left: 15px !important; z-index: 1000 !important; font-size: 14px !important; }
|
|
#windChart canvas { width: 100% !important; height: 100% !important; }
|
|
/* 强制ECharts使用容器完整尺寸 */
|