* { scrollbar-color: #2cb7fc rgba(51, 238, 255, 0.2); scrollbar-width: thin; } .home_wrap2 { width: 100%; height: 100%; background-color: #0c1333; background-image: url("../img/databoard/bg_home2.png"); background-size: 100% 100%; overflow: hidden; } .container { width: 100%; height: calc(100% - 3.5vw); padding: 1vw 1.56vw; box-sizing: border-box; } .nav-bar_wrap { height: 3.5vw; background-image: url(../img/databoard/bg_navbar2.png); } .panel-title { position: absolute; left: -0.3vw; top: 0px; display: inline-block; width: 10.21vw; height: 2.2vw; line-height: 1.8vw; font-size: 0.9vw; color: #ffffff; font-weight: bold; padding-left: 1.4vw; box-sizing: border-box; background-image: url("../img/databoard/bg_panel_title.png"); background-size: 100% 100%; } .left-container { display: inline-block; vertical-align: top; width: 29.38vw; height: 100%; } .left-container .base-info-panel { position: relative; width: 100%; height: 13.5vw; background-image: url("../img/databoard/bg_panel_1_2.png"); background-size: 100% 100%; margin-bottom: 1vw; padding: 2.5vw 1.3vw 2.29vw; box-sizing: border-box; } .left-container .base-info-panel .panel-content { width: 100%; height: 100%; } .panel-box1-item{ width: 100%; height: 2.1vw; line-height: 2.1vw; font-size: 0.9vw; color: #fff; margin-bottom: 0.5vw; background: url("../img/databoard/bg_panel_1_item.png") no-repeat; } .panel-box1-title{ background: url("../img/databoard/bg_panel_1_title.png") no-repeat; padding: 0 15px; font-weight: bold; } .panel-box1-title a{ color: #fff; } .panel-box1-title a span{ margin-left: 15px; font-family: '宋体'; position: relative; top: 2px; } .panel-box1-item p{ height: 2.1vw; overflow: hidden; } .panel-box1-item p i{ display: block; float: left; width: 2.1vw; height: 2.1vw; } .panel-box1-item p i img{ 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; } .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%; } .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: 17vw; 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_head2.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% - 17vw - 13.5vw - 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; } .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-top{ width: 100%; height: 31.5vw; background: url(../img/databoard/right-top-bg.png) no-repeat; margin-bottom: 1vw; background-size: 100% 100%; position: relative; } .right-top .panel-content{ position: relative; width: 100%; height: 100%; display: flex; } .right-videoWrap{ padding: 2.6vw 1vw 1vw 1.5vw; overflow: hidden; flex: 1; } .right-video{ width: 100%; } .right-video li{ width: 49%; height: 13.5vw; margin: 1vw 2% 0 0; float: left; position: relative; } .right-video li:first-child, .right-video li:nth-child(2){ margin-top: 0; } .right-video li:nth-child(2n){ margin-right: 0; } .right-video li h4{ position: absolute; height: 1.5vw; line-height: 1.5vw; width:8.5vw; display: block; background: url(../img/databoard/bg-jiankong-tit.png) no-repeat; background-size:100% 100% ; text-indent: 1vw; color: #fff; font-size: 0.8vw; } .video-box, .video-pic{ width: 100%; height: 100%; } .right-topGroup{ width: 12.5vw; height: 100%; box-sizing: border-box; padding: 0.5vw 2vw; } .right-topItem{ width: 100%; height: 5.3vw; background: url(../img/databoard/bg-right-topItem.png) no-repeat; background-size: 100% 100%; margin-top: 3.8vw; } .right-topItem h4{ height: 1.8vw; color: #fff; line-height: 1.8vw; overflow: hidden; } .right-topItem h4 i{ float: left; width: 1.8vw; height: 1.8vm; display: block; margin-right: 5px; } .right-topItem h4 i img{ width: 100%; height: 100%; } .right-topItem p{ text-align: center; color: #02a5f4; font-size: 1.6vw; font-weight: bold; line-height: 3.5vw; height: 3.5vw; overflow: hidden; margin: 0; padding: 0; } .right-bottom { position: relative; width: 100%; height: calc(100% - 31.5vw - 1vw); background: url("../img/databoard/right-bottom-bg.png") no-repeat; background-size: 100% 100%; box-sizing: border-box; padding: 2.6vw 1.88vw 1.5vw; } .right-bottom .panel-content { position: relative; width: 100%; height: 100%; } .right-bottom .panel-content-head { width: 100%; height: 1.61vw; line-height: 1.61vw; background-image: url("../img/databoard/bg_table_head3.png"); background-size: 100% 100%; display: flex; font-size: 0.73vw; color: #91ceff; padding-left: 1vw; padding-right: 6px; box-sizing: border-box; } .right-bottom .panel-content-head .head-item { flex: 1; } .right-bottom .panel-content-body { width: 100%; height: calc(100% - 1.6vw); padding-left: 1vw; box-sizing: border-box; overflow: hidden; overflow-y: auto; } .right-bottom .panel-content-body::-webkit-scrollbar { width: 6px; background-color:rgba(51,238,255,0.2); } .right-bottom .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; } .right-bottom .panel-content-body .panel-content-body-tr { width: 100%; height: 1.8vw; line-height: 1.8vw; display: flex; } .right-bottom .panel-content-body .panel-content-body-tr .body-item { flex: 1; font-size: 0.7vw; color: #ffffff; }