* {
    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%;
}