dgs.bigScreen/css/hbjc.css

.grid-wrapper {
  color: #ffffff;
  padding: 23px 16px 16px;
  height: calc(100% - 80px);
  display: grid;
  grid-gap: 8px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 33%);
  grid-template-areas: "left1 center center right1" "left2 center center right2" "bottom1 bottom1 bottom1 bottom1"; 
}
.grid-wrapper .wrapper {
    border-radius: 6px;
    height: 100%;
	background-color: #001346;
	overflow: hidden;
}
.grid-wrapper .chart-tab-t{
	padding-left: 82px;
    height: 40px;
    line-height: 40px;
	background-color: #0f215c;
}
.grid-wrapper .chart-tab-t .chart-tab-title{
	font-size: 1em;
    position: relative;
}
.grid-wrapper .chart-tab-t .chart-tab-title:before{
	content:'';
	width:14px;
	height:14px;
	border-radius:50%;
	position:absolute;
	left:-20px;
	top:50%;
	background-color:#fff;
	transform:translateY(-50%);
-ms-transform:translateY(-50%); 	/* IE 9 */
-moz-transform:translateY(-50%); 	/* Firefox */
-webkit-transform:translateY(-50%); /* Safari 和 Chrome */
-o-transform:translateY(-50%); 	/* Opera */
}
.grid-wrapper .wrapper-content{
	position:relative;
	height:calc(100% - 40px);
	
}
.grid-wrapper .wide-border{
	height:calc(100% + 1px);
	width:100%;
	position:absolute;
	top:-3px;
	left:0px;
	border:1px solid #53BAFD;
}

.wide-border-line1{
	position:absolute;
	left:0px;
	top:-26px;
	background-color:#0f215c
}
.wide-border-line2{
	position:absolute;
	right:0px;
	top:-26px;
	background-color:#0f215c
}
.wide-border-line3{
	position:absolute;
	left:0px;
	bottom:0;
	background-color:#001346;
	
}
.wide-border-line4{
	position:absolute;
	right:0px;
	bottom:0;
	background-color:#001346;
	
}

.grid-wrapper .left1 {
    grid-area: left1; 
}
.grid-wrapper .left2 {
    grid-area: left2; 
}
.grid-wrapper .center {
    grid-area: center; 
}
.right2 .chart-tab-t{
	flex:1;
	width:100%;
	
}
 .grid-wrapper .right1 {
    grid-area: right1; 
}
 .grid-wrapper .right2 {
    grid-area: right2;
}
 .grid-wrapper .bottom1 {
    grid-area: bottom1; 
}
 .grid-wrapper .bottom2 {
    grid-area: bottom2; 
}
 .grid-wrapper .bottom3 {
    grid-area: bottom3; 
}
 .grid-wrapper .bottom4 {
    grid-area: bottom4; 
}
#chart-hxxyl,#chart-ad,#chart-ll,#chart-ljll,#chart-zl,#chart-zd,#chart-ph{
	width:100%;
	height:100%;
}
.grid-wrapper .center .line1 {
    font-size: 1.4em;
    height: 66px;
    display: flex;
    align-items: center; 
}
.grid-wrapper .center .line1 .division {
    flex: 1;
    height: 2px; 
	background-color:#528DFF;
}
.grid-wrapper .center .line1 .cont {
    margin: 1px 20px; 
}
.center .line3{
	height:calc(100% - 66px);
	display:flex;
	align-items:center;
	justify-content:center;
}
.line3 canvas {
    width: 940px;
    height: 576px;
}
.chartBlock{
	width:100%;
	height:100%;
	display:flex;
	justify-content:space-around;
	align-items:center;
}
#chartBottom1,#chartBottom2,#chartBottom3{
	width:30%;
	height:100%;
}
#chartBottom1 .chartTab-t,#chartBottom2 .chartTab-t,#chartBottom3 .chartTab-t,#chartBottom4 .chartTab-t{
	padding-left: 102px;
    height: 40px;
    line-height: 40px;
	
}
#chartBottom2 .chartTab-t,#chartBottom4 .chartTab-t,{
	padding-left: 12px;
}
#chartBottom1 .chartTab-t .chartTab-title,#chartBottom2 .chartTab-t .chartTab-title,#chartBottom3 .chartTab-t .chartTab-title,#chartBottom4 .chartTab-t .chartTab-title{
	font-size: 1em;
    position: relative;
}
#chartBottom1 .chartTab-t .chartTab-title:before,#chartBottom2 .chartTab-t .chartTab-title:before,#chartBottom3 .chartTab-t .chartTab-title:before,#chartBottom4 .chartTab-t .chartTab-title:before{
	content:'';
	width:14px;
	height:14px;
	border-radius:50%;
	position:absolute;
	left:-20px;
	top:50%;
	background-color:#fff;
	margin-top:-7px;
}