xw_admin/src/style/home.scss

.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;
	}
	.cardTitleFlex{
		display: flex;align-items: center;justify-content: space-between;
		.titleBtnView{
			display: flex;align-items: center;
			background: #F4F5F9;
			border-radius: 4px;
			.btnItem{
				padding: 4px 18px;
				color: #444;font-size: 12px;font-weight: initial;
				cursor: pointer;
			}
			.trueItem{
				background: var(--el-color-primary);
				border-radius: 4px;
				color: var(--el-color-white);
			}
		}
	}
	.cardBody{
		flex: 1;
		display: flex;
		overflow: hidden;
	}
}

.inletView{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	.leftBox{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.item{
		display: flex;
		align-items: center;
		flex-direction: column;
		margin:0 18px 0 0;
		padding-bottom: 20px;
		width: 50px;
		.img{
			width: 50px;height: 50px;background: var(--el-color-primary);border-radius: 8px;
			display: flex;align-items: center;justify-content: center;
			cursor: pointer;
		}
		.text{
			margin-top: 8px;
			width: 100%;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
	.add{
		display: flex;
		justify-content: center;
		align-items: center;
		margin:0;
		padding-bottom: 20px;
		.addBack{
			background: #f2f2f2;
			border-radius: 8px;
			width: 50px;
			height: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
		.icon{
			width: 30px;
			height: 30px;
			color: #888;
		}
		.text{
			width: 50px;
			text-align: center;
		}
	}
}

.headerBox{
	.cardBox{
		.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;
			}
		}
	}
}

.workOrderView{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-start;
	.item{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		width: 25%;
		.cardContent{
			.num{font-size: 26px;font-weight: 500;color: var(--el-color-dark);margin-bottom: 8px;}
			.name{font-size: 12px;color: #888;width: 120px;}
		}
	}
	.item:nth-child(1),.item:nth-child(5){

	}
	.item:nth-child(4),.item:nth-child(8){

	}
}

.spareParts{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item{
		width: calc(50% - 8px);
		height: 100%;
		padding: 10px;
		background: #F8F8F8;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		.icon{font-size: 56px;}
		.num{font-size: 26px;font-weight: 500;margin: 8px 0;}
		.name{font-size: 12px;color: #555;}
	}
}
.orderNum{
	.item{
		flex: 1;
		padding: 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;
			flex-wrap: wrap;
			.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;
		}
	}
}


@media (max-width: 992px){
	.consoleView{
		.headerBox{

		}
		.middleBox{
			.briefing{
				.item{
					.comMain{
						margin-bottom: 10px;
						.num{
							height: 80px;
						}
					}
				}
			}
		}
		.footerBox{

		}
		.progressView{
			height: 200px;
		}
		.chartView{
			height: 460px;

		}
	}
}