@mixin boxStyle {
	border-radius: 8px;
	background: #ffffff;
}
@mixin flex {
	display: flex;
	align-items: center;
}
.operate-box {
	width: 100%;
	height: 100%;
	@include flex;
	.monitor-data {
		@include boxStyle;
		flex: 1;
		height: 100%;
		min-height: 600px;
		.monitor-title {
			margin-top: 15px;
			margin-left: 36px;
			@include flex;
			span:first-child {
				font-size: 30px;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-right: 20px;
			}
			span:last-child {
				font-size: 22px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
			}
		}
		.monitor-content {
			display: flex;
			height: calc(100% - 265px);
			margin-top: 36px;
			margin-left: 36px;
			.monitor-tool {
				position: relative;
				span {
					font-size: 18px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
				.property-one {
					position: absolute;
					top: 0;
					left: 0;
				}
				.property-two {
					position: absolute;
					top: 0;
					right: 0;
				}
				.property-three {
					position: absolute;
					top: 180px;
					left: 0;
				}
				.other-info {
					position: absolute;
					top: 240px;
					right: 0px;
					display: flex;
					flex-direction: column;
					> span {
						margin-bottom: 20px;
					}
				}
				img {
					width: 688px;
					height: 100%;
				}
			}
			.monitor-aspect {
				margin-left: 86px;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				&-item {
					width: 184px;
					height: 100px;
					background: #ffffff;
					border-radius: 4px;
					border: 1px solid #ebebeb;
					@include flex;
					flex-direction: column;
					justify-content: center;
					margin-right: 26px;
					margin-bottom: 30px;
					> div:first-child {
						@include flex;
						margin-bottom: 12px;
						span {
							font-size: 18px;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
							margin-right: 7px;
						}
						img {
							width: 20px;
							height: 20px;
						}
					}
					> div:last-child {
						@include flex;
						span {
							font-size: 18px;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #00378f;
						}
					}
				}
			}
		}
		.monitor-equip {
			margin-top: 31px;
			margin-left: 36px;
			margin-bottom: 16px;
			@include flex;
			.monitor-state:not(:last-child) {
				margin-right: 26px;
			}
			.monitor-state {
				@include flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
				> div {
					position: relative;
					img {
						width: 184px;
						height: 100px;
					}
					span {
						width: 32px;
						height: 15px;
						font-size: 10px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #ffffff;
						text-align: center;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
				> span {
					font-size: 16px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}
			}
			.active-class {
				box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
			}
		}
	}
	.no-data {
		@include boxStyle;
		flex: 1;
		height: 100%;
		min-height: 600px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		color: #999;
	}
	.history-data {
		@include boxStyle;
		width: 300px;
		height: 100%;
		margin-left: 20px;
		:deep() {
			.leftMenu {
				height: 100%;
			}
			.content {
				height: calc(100% - 100px);
			}
		}
		.search-wrapper {
			@include flex;
			height: 50px;
			padding: 0 10px;
			background-color: #ffffff;
			border-bottom: 1px solid #e5e5e5;
		}
		.alarm-list {
			height: calc(100% - 50px);
			min-height: 83%;
			overflow-y: scroll;
			&-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #e5e5e5;
				padding: 12px;
				> div {
					span {
						font-size: 12px;
						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
						font-weight: 400;
						color: #333333;
					}
				}
				> div:not(:last-child) {
					margin-bottom: 8px;
				}
			}
		}
		.info-list {
			height: calc(100% - 50px);
			min-height: 83%;
			overflow-y: scroll;
			&-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #e5e5e5;
				padding: 12px;
				> div:nth-child(1) {
					font-size: 16px;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					margin-bottom: 10px;
				}
				&-aspect {
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-item {
						margin-bottom: 8px;
						span {
							font-size: 12px;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
						}
						> span:nth-child(1) {
							display: inline-block;
							width: 36px;
							height: 18px;
							color: #606266;
							margin-right: 20px;
							text-align: left;
						}
						> span:nth-child(2) {
							display: inline-block;
							width: 42px;
							height: 18px;
							color: #333333;
						}
					}
				}
				> div:last-child {
					font-size: 10px;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: rgba(102, 102, 102, 0.8);
					margin-top: 5px;
				}
			}
		}
	}
}
:deep() {
	.tabs-option {
		display: none;
	}
}