.cardBox{
	background: #fff;
	height: 100%;
	border-radius: 6px;
	padding: 12px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	.cardTitle{
		flex-basis: 30px;
		font-weight: 500;
		color: var(--el-color-dark);
		font-size: 14px;
	}
	.cardBody{
		flex: 1;
		display: flex;
		overflow: hidden;
		.boxScrollbar{
			display: flex;
			align-items: center;
		}
	}
}

.headerBox{
	.cardBox{
		.inletView{
			display: flex;
			align-items: center;
			.leftBox{
				display: flex;
				align-items: center;
			}
			.item{
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-right: 30px;
				.img{
					width: 50px;
				}
				.text{
					margin-top: 8px;
				}
			}
			.add{
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				.addBack{
					background: #f2f2f2;
					border-radius: 8px;
					width: 50px;
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.icon{
					width: 30px;
					height: 30px;
					color: #888;
				}
				.text{
					width: 50px;
					text-align: center;
				}
			}
		}
		.newBell{
			display: flex;
			flex-wrap: wrap;
			.item{
				width: calc(50% - 10px);
				margin-bottom: 15px;
				box-sizing: border-box;
				.title{
					color: var(--el-color-dark);
					font-weight: 500;
					display: flex;
					align-items: center;
					font-size: 13px;
					.status{
						background: var(--el-color-danger);
						color: var(--el-color-white);
						font-weight: normal;
						padding: 0 4px;
						font-size: 12px;
						border-radius: 3px;
						margin-right: 6px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				.com{
					margin-top: 5px;
					color: #888;
				}
				.text{
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}
			}
			.item:nth-child(odd){
				margin-right: 10px;
			}
			.item:nth-child(even){
				margin-left: 10px;
			}
		}
	}
}
.middleBox{
	.briefing{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item{
			width: calc(33% - 6px);
			background: #E9F3FF;
			box-sizing: border-box;
			margin-top: 15px;
			padding: 12px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.comMain{
				.num{
					color: var(--el-color-dark);
					font-size: 28px;
					font-weight: 500;
					.unit{
						font-weight: normal;
						font-size: 12px;
					}
				}
				.name{
					margin-top: 8px;
					color: #555;
				}
			}
			.comChart{
				.icon{
					width: 50px;
					height: 50px;
				}
			}
		}
		.item:nth-child(1),.item:nth-child(2),.item:nth-child(3){
			margin-top: 0;
		}
		.item:nth-child(3n){
			margin-right: 0;
		}
	}
}

.boxScrollbar{
	.el-scrollbar__wrap{
		display: flex;
		align-items: center;
	}
}