* {
|
scrollbar-color: #2cb7fc rgba(51, 238, 255, 0.2); /* 婊戝潡棰滆壊 婊氬姩鏉¤儗鏅鑹� */
|
scrollbar-width: thin; /* 婊氬姩鏉″搴︽湁涓夌锛歵hin銆乤uto銆乶one */
|
}
|
|
.container {
|
width: 100%;
|
height: calc(100% - 7vw);
|
padding: 1vw 1.56vw;
|
box-sizing: border-box;
|
}
|
|
.left-container {
|
display: inline-block;
|
vertical-align: top;
|
width: 29.38vw;
|
height: 100%;
|
}
|
|
.left-container .base-info-panel {
|
position: relative;
|
width: 100%;
|
height: 10.47vw;
|
background-image: url("../img/databoard/bg_panel_1.png");
|
background-size: 100% 100%;
|
margin-bottom: 1vw;
|
padding: 3.49vw 1.3vw 2.29vw;
|
box-sizing: border-box;
|
}
|
|
.left-container .base-info-panel .panel-content {
|
width: 100%;
|
height: 100%;
|
}
|
|
.left-container .base-info-panel .panel-content > div {
|
display: inline-block;
|
vertical-align: top;
|
}
|
|
.left-container .base-info-panel .panel-content .inventory {
|
width: 7.45vw;
|
height: 100%;
|
background-image: url(../img/databoard/bg_item_green.png);
|
background-size: 100% 100%;
|
padding: 0.5vw 2.7vw 0 0;
|
box-sizing: border-box;
|
float: left;
|
}
|
|
.left-container .base-info-panel .panel-content .entrepot {
|
width: 7.45vw;
|
height: 100%;
|
background-image: url(../img/databoard/bg_item_blue.png);
|
background-size: 100% 100%;
|
position: relative;
|
left: -0.8vw;
|
padding: 0.5vw 1.25vw 0 0;
|
box-sizing: border-box;
|
}
|
|
.left-container .base-info-panel .panel-content .real-time {
|
width: calc(100% - 7.45vw - 7.45vw);
|
height: 100%;
|
float: right;
|
}
|
|
.left-container .base-info-panel .panel-content .panel-content-text {
|
text-align: right;
|
font-size: 0.73vw;
|
line-height: 1.5vw;
|
color: #ffffff;
|
}
|
|
.left-container .base-info-panel .panel-content .panel-content-count {
|
text-align: right;
|
font-size: 2vw;
|
line-height: 2.5vw;
|
color: #2fc7ff;
|
}
|
|
|
.left-container .base-info-panel .panel-content .real-time .panel-content-text {
|
font-size: 0.9vw;
|
line-height: 2vw;
|
}
|
|
|
.left-container .base-info-panel .panel-content .real-time .panel-content-count {
|
text-align: right;
|
font-size: 2vw;
|
line-height: 2.5vw;
|
color: #2fc7ff;
|
}
|
|
|
.left-container .inventory-info-panel {
|
position: relative;
|
width: 100%;
|
height: 17.24vw;
|
background-image: url("../img/databoard/bg_panel_2.png");
|
background-size: 100% 100%;
|
margin-bottom: 1vw;
|
padding: 2.45vw 1.88vw 2vw;
|
box-sizing: border-box;
|
}
|
|
.left-container .inventory-info-panel .panel-content {
|
width: 100%;
|
height: 100%;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-head {
|
width: 100%;
|
height: 1.61vw;
|
line-height: 1.61vw;
|
background-image: url("../img/databoard/bg_table_head.png");
|
background-size: 100% 100%;
|
display: flex;
|
font-size: 0.73vw;
|
color: #91ceff;
|
padding-left: 1vw;
|
padding-right: 6px;
|
box-sizing: border-box;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-head .head-item {
|
flex: 1;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-body {
|
width: 100%;
|
height: calc(100% - 1.6vw);
|
padding-left: 1vw;
|
box-sizing: border-box;
|
overflow: hidden;
|
overflow-y: auto;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-body::-webkit-scrollbar {
|
width: 6px;
|
background-color: rgba(51, 238, 255, 0.2);
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-body::-webkit-scrollbar-thumb {
|
-webkit-box-shadow: inset 0 0 6px rgba(2, 160, 251, 0.3);
|
background-color: rgba(2, 158, 249, 0.5);
|
border-radius: 3px;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-body .panel-content-body-tr {
|
width: 100%;
|
height: 1.8vw;
|
line-height: 1.8vw;
|
display: flex;
|
}
|
|
.left-container .inventory-info-panel .panel-content .panel-content-body .panel-content-body-tr .body-item {
|
flex: 1;
|
font-size: 0.7vw;
|
color: #ffffff;
|
}
|
|
|
.left-container .all-inventory-panel {
|
position: relative;
|
width: 100%;
|
height: calc(100% - 17.24vw - 10.47vw - 2vw);
|
background-image: url("../img/databoard/bg_panel_3.png");
|
background-size: 100% 100%;
|
margin-bottom: 1vw;
|
}
|
|
.left-container .all-inventory-panel .panel-content {
|
width: 100%;
|
height: 100%;
|
padding: 3.1vw 2vw 1.5vw;
|
box-sizing: border-box;
|
}
|
|
.left-container .all-inventory-panel .panel-content .chart-box {
|
display: inline-block;
|
vertical-align: top;
|
width: calc(100% - 5.26vw);
|
height: 100%;
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box {
|
display: inline-block;
|
vertical-align: top;
|
width: 5.26vw;
|
height: 100%;
|
position: relative;
|
float: right;
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box .details-panel {
|
position: absolute;
|
left: 0;
|
top: 2.5vw;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
width: 5.26vw;
|
height: 6.56vw;
|
background-color: rgba(10, 67, 188, 0.21);
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box .details-panel .details-panel-title {
|
font-size: 0.73vw;
|
line-height: 1.5vw;
|
color: #39c9ff;
|
padding-left: 0.5vw;
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box .details-panel .details-panel-text {
|
font-size: 0.83vw;
|
line-height: 2vw;
|
color: #ffffff;
|
text-align: center;
|
padding-top: 0.6vw;
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box .details-panel .details-panel-num {
|
font-size: 1.15vw;
|
color: #39c9ff;
|
text-align: center;
|
line-height: 1.3vw;
|
font-weight: 600;
|
}
|
|
.left-container .all-inventory-panel .panel-content .details-box .details-unit {
|
font-size: 0.83vw;
|
color: #ffffff;
|
position: absolute;
|
top: 0;
|
right: 0;
|
}
|
|
|
.right-container {
|
display: inline-block;
|
vertical-align: top;
|
width: calc(100% - 29.38vw - 1vw);
|
height: 100%;
|
margin-left: 1vw;
|
float: right;
|
}
|
|
.right-container .top-container {
|
margin-bottom: 1vw;
|
}
|
|
.right-container .map-container {
|
display: inline-block;
|
vertical-align: top;
|
width: 36vw;
|
height: 28.7vw;
|
margin-right: 1vw;
|
}
|
|
.right-container .info-container {
|
display: inline-block;
|
vertical-align: top;
|
width: calc(100% - 36vw - 1vw);
|
height: 28.7vw;
|
float: right;
|
}
|
|
.right-container .info-container .weather-panel {
|
position: relative;
|
width: 100%;
|
height: 10.47vw;
|
margin-bottom: 1vw;
|
background-image: url("../img/databoard/bg_panel_6.png");
|
background-size: 100% 100%;
|
}
|
|
.right-container .info-container .weather-panel .panel-content {
|
width: 100%;
|
height: 100%;
|
padding: 2.6vw 2.8vw 1.5vw;
|
box-sizing: border-box;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather {
|
display: inline-block;
|
vertical-align: top;
|
width: 14.5vw;
|
height: 100%;
|
padding-top: 0.9vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .temperature {
|
display: inline-block;
|
vertical-align: middle;
|
color: #ffffff;
|
font-size: 2.8vw;
|
line-height: 3vw;
|
position: relative;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .temperature:after {
|
content: '°C';
|
font-size: 1vw;
|
color: #ffffff;
|
position: absolute;
|
right: -1vw;
|
top: -0.6vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img {
|
display: inline-block;
|
vertical-align: middle;
|
width: 3vw;
|
height: 3vw;
|
margin: 0vw 0vw 0vw 1.5vw;
|
background-size: 100% auto;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.lei {
|
background-image: url("../img/databoard/weather/lei.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.qing {
|
background-image: url("../img/databoard/weather/qing.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.shachen {
|
background-image: url("../img/databoard/weather/shachen.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.wu {
|
background-image: url("../img/databoard/weather/wu.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.xue {
|
background-image: url("../img/databoard/weather/xue.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.yin {
|
background-image: url("../img/databoard/weather/yin.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.yu {
|
background-image: url("../img/databoard/weather/yu.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.yujiaxue {
|
background-image: url("../img/databoard/weather/yujiaxue.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.yun {
|
background-image: url("../img/databoard/weather/yun.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-img.zhenyu {
|
background-image: url("../img/databoard/weather/zhenyu.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-text {
|
display: inline-block;
|
vertical-align: middle;
|
height: 3vw;
|
font-size: 0.73vw;
|
color: #ffffff;
|
padding: 0.4vw;
|
box-sizing: border-box;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .weather-text > span {
|
display: inline-block;
|
line-height: 1.2vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .turnover-time-info {
|
font-size: 0.73vw;
|
color: #ffffff;
|
margin-top: 1vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather .turnover-time-info .turnover-time-text {
|
color: rgba(255, 255, 255, 0.61);
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail {
|
display: inline-block;
|
vertical-align: top;
|
width: calc(100% - 14.5vw);
|
height: 100%;
|
float: right;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item {
|
height: 2.5vw;
|
width: 100%;
|
margin-bottom: 1.25vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item span {
|
display: inline-block;
|
vertical-align: middle;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item .detail-item-icon {
|
width: 2.5vw;
|
height: 2.5vw;
|
background-image: url("../img/databoard/icon_water.png");
|
background-size: 100% 100%;
|
margin-right: 0.5vw;;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item .detail-item-text {
|
width: 2.2vw;
|
line-height: 2.5vw;
|
font-size: 0.73vw;
|
color: rgba(255, 255, 255, 0.6);
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item .detail-item-info {
|
line-height: 2.5vw;
|
font-size: 1.25vw;
|
font-weight: 600;
|
color: rgba(255, 255, 255, 1);
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item:last-child .detail-item-icon {
|
background-image: url("../img/databoard/icon_wind.png");
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item .detail-item-infos {
|
display: inline-block;
|
vertical-align: top;
|
height: 100%;
|
width: calc(100% - 2.6vw - 1.15vw - 0.1vw);
|
margin-left: 0.1vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item:last-child .detail-item-text {
|
line-height: 1.25vw;
|
}
|
|
.right-container .info-container .weather-panel .panel-content .today-weather-detail .detail-item:last-child .detail-item-info {
|
font-size: 0.73vw;
|
line-height: 1.25vw;
|
}
|
|
|
.right-container .info-container .inventory-detail-panel {
|
position: relative;
|
width: 100%;
|
height: calc(100% - 10.47vw - 1vw);
|
background-image: url("../img/databoard/bg_panel_5.png");
|
background-size: 100% 100%;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content {
|
width: 100%;
|
height: 100%;
|
padding: 3.2vw 2.1vw 1.25vw;
|
box-sizing: border-box;
|
position: relative;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-title {
|
font-size: 1.6vw;
|
line-height: 1.7vw;
|
color: #ffffff;
|
font-weight: 600;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-subtitle {
|
font-size: 1vw;
|
color: #ffffff;
|
font-weight: normal;
|
margin-left: 0.6vw;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-charts {
|
width: 100%;
|
height: calc(100% - 1.7vw);
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-charts .chart-item {
|
display: inline-block;
|
vertical-align: top;
|
width: 50%;
|
height: 100%;
|
float: left;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-charts .chart-item .chart-box {
|
width: 100%;
|
height: 9vw;
|
margin-top: 0.8vw;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .panel-content-charts .chart-item .chart-item-text {
|
text-align: center;
|
font-size: 0.83vw;
|
color: #ffffff;
|
margin-top: 0.5vw;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .location {
|
position: absolute;
|
top: 0.8vw;
|
right: 2vw;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .location .icon-location {
|
display: inline-block;
|
vertical-align: middle;
|
width: 1.23vw;
|
height: 1.34vw;
|
background-image: url("../img/databoard/icon_location.png");
|
background-size: 100% 100%;
|
}
|
|
.right-container .info-container .inventory-detail-panel .panel-content .location .location-text {
|
font-size: 0.9vw;
|
color: #ffffff;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
|
|
.right-container .bottom-container {
|
position: relative;
|
width: 100%;
|
height: calc(100% - 28.7vw - 1vw);
|
background-image: url("../img/databoard/bg_panel_4.png");
|
background-size: 100% 100%;
|
}
|
|
.right-container .bottom-container .panel-content {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
}
|
|
.right-container .bottom-container .panel-content .stats-chart-box {
|
display: inline-block;
|
vertical-align: top;
|
height: 100%;
|
width: calc(100% - 14.74vw);
|
padding: 2.81vw 1vw 1.3vw;
|
box-sizing: border-box;
|
}
|
|
.right-container .bottom-container .panel-content .stats-chart-box .chart-item {
|
display: inline-block;
|
vertical-align: top;
|
height: 100%;
|
width: calc(100% / 3);
|
border-right: 0.05vw solid rgba(0, 160, 233, 0.3);
|
box-sizing: border-box;
|
text-align: center;
|
float: left;
|
}
|
|
.right-container .bottom-container .panel-content .stats-chart-box .chart-item:last-child {
|
border-right: 0px;
|
}
|
|
.right-container .bottom-container .panel-content .stats-chart-box .chart-item .chart-item-title {
|
display: inline-block;
|
width: 8.13vw;
|
height: 1.77vw;
|
line-height: 1.77vw;
|
background-image: url("../img/databoard/bg_title.png");
|
background-size: 100% 100%;
|
font-size: 0.9vw;
|
color: #ffffff;
|
margin-top: 0.4vw;
|
}
|
|
.right-container .bottom-container .panel-content .stats-chart-box .chart-item .chart-box {
|
width: 100%;
|
height: calc(100% - 1.77vw - 0.4vw);
|
}
|
|
.right-container .bottom-container .panel-content .today-inbound {
|
display: inline-block;
|
vertical-align: top;
|
height: 100%;
|
width: 14.74vw;
|
padding: 1.7vw;
|
box-sizing: border-box;
|
float: right;
|
}
|
|
.right-container .bottom-container .panel-content .today-inbound .today-inbound-title {
|
font-size: 1.25vw;
|
line-height: 1.5vw;
|
color: #ffffff;
|
}
|
|
.right-container .bottom-container .panel-content .today-inbound .today-inbound-item {
|
display: inline-block;
|
vertical-align: top;
|
width: 50%;
|
height: 3.5vw;
|
margin-top: 2.3vw;
|
text-align: center;
|
float: left;
|
}
|
|
.right-container .bottom-container .panel-content .today-inbound .today-inbound-item .item-title {
|
font-size: 0.7vw;
|
color: #ffffff;
|
}
|
|
.right-container .bottom-container .panel-content .today-inbound .today-inbound-item .item-num {
|
font-size: 1.5vw;
|
color: #ffffff;
|
margin-top: 1vw;
|
}
|
|
|
.panel-title {
|
position: absolute;
|
left: -0.3vw;
|
top: 0px;
|
display: inline-block;
|
width: 10.21vw;
|
height: 2.2vw;
|
line-height: 2vw;
|
font-size: 0.9vw;
|
color: #ffffff;
|
padding-left: 1.4vw;
|
box-sizing: border-box;
|
background-image: url("../img/databoard/bg_panel_title.png");
|
background-size: 100% 100%;
|
}
|
