@import '../../c/config';
@import '../../c/function';
@import '../c/common';

.g-row {
	padding: 0 6px 24px;
	display: flex;
	justify-content: space-between;

	.g-left {
		width: 460px;
	}

	.g-center {
		position: relative;
		width: 884px;
	}

	.g-right {
		width: 460px;
	}
}

.m-map {
	position: relative;
	width: 100%;
	height: 690px;
	margin-bottom: 10px;
}


.m-box {
	width: 460px;
	background: linear-gradient(144deg, rgba(46, 164, 255, 0.1) 0%, rgba(46, 164, 255, 0) 100%);
}

.m-rybox {
	width: 884px;
}

.m-subbox {
	@include scrollBar;
	height: 334px;
	overflow-y: auto;
}

.m-jdjs {
	height: 318px;
	padding: 0 16px;

	&-js {
		margin: 20px 0;
		display: flex;
		justify-content: space-between;

		&-img {
			width: 200px;
			height: 140px;
			background: #00ACF7;
			border-radius: 6px;
			overflow: hidden;

			img {
				width: 200px;
				height: 140px;
			}
		}

		&-txt {
			width: 213px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 24px;
			margin-left: 16px;
			padding-top: 14px;
		}
	}

	&-bg {
		width: 428px;
		height: 104px;
		padding: 16px;
		background: linear-gradient(20deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%);

		&-title {
			display: flex;

			&-img {
				img {
					width: 18px;
					height: 18px;
				}
			}

			&-txt {
				margin-left: 9px;
				width: 79px;
				height: 18px;
				font-size: 18px;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				line-height: 24px;
			}
		}

		&-txt {
			margin-top: 14px;
			width: 391px;
			height: 39px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 24px;
		}
	}
}

@mixin rounded-corners {
	width: 76px;
	height: 76px;
	background-size: 76px 76px;
	padding-top: 16px;

	&-icon {
		width: 26px;
		margin: 0 auto;

		img {
			width: 26px;
			height: 26px;
		}
	}

	&-txt {
		text-align: center;
		color: #ffffff;
		height: 12px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 16px;
	}
}

.m-jdhx {
	height: 556px;
	padding: 20px 16px 0;

	&-top {
		display: flex;
		justify-content: space-between;
		padding-top: 20px;
	}

	&-card {
		width: 180px;
		height: 120px;
		padding: 16px;
		background: linear-gradient(90deg, rgba(1, 94, 234, 0.3) 0%, rgba(16, 50, 103, 0.3) 100%);

		&-title {
			display: flex;

			&-icon {
				padding-top: 2px;

				img {
					width: 10px;
					height: 10px;
				}
			}

			&-txt {
				margin-left: 8px;
				height: 16px;
				font-size: 16px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 22px;
			}
		}

		&-content {
			margin-top: 15px;

			&-item {
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 22px;

				&-lable {
					color: #A3B9DA;
				}

				&-value {
					color: #FFFFFF;
				}
			}
		}
	}

	&-f {
		background: linear-gradient(90deg, rgba(16, 50, 103, 0.3) 0%, rgba(1, 94, 234, 0.3) 100%);
	}

	&-h {
		height: 144px;
	}

	&-center {
		margin-top: 6px;

		&-line {}

		&-content {
			margin: 0 auto;
			width: 240px;
			height: 224px;
			background: url(../../../../assets/images/shuju/overview/jiedao-img.png);
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 234px 186px;

			&-item {
				display: flex;
				justify-content: space-between;

				&-jumin {
					background: url(../../../../assets/images/shuju/overview/renkou-bg.png);
					@include rounded-corners;
				}

				&-fangwu {
					background: url(../../../../assets/images/shuju/overview/fangwu-bg.png);
					@include rounded-corners;
				}

				&-manyi {
					background: url(../../../../assets/images/shuju/overview/manyidu-bg.png);
					@include rounded-corners;
				}

				&-fengxian {
					background: url(../../../../assets/images/shuju/overview/fengxian-bg.png);
					@include rounded-corners;
				}
			}
		}
	}
}


.m-jdwgy {
	height: 220px;
	padding: 12px 16px;
}

.m-rfsjtj {
	height: 166px;
	width: 100%;
	padding: 24px;
	display: flex;
	justify-content: space-between;

	&-item {
		width: 200px;

		&-des {
			width: 100%;
			height: 16px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin-bottom: 20px;
		}

		&-jian {
			height: 36px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #A3B9DA;

			span {
				margin-right: 8px;
				height: 36px;
				font-size: 36px;
				font-family: DIN Alternate;
				font-weight: bold;
				font-style: italic;
				color: #FFB73C;
			}
		}

		&-ren {
			height: 36px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #A3B9DA;

			span {
				margin-right: 8px;
				height: 36px;
				font-size: 36px;
				font-family: DIN Alternate;
				font-weight: bold;
				font-style: italic;
				color: #08EBAE;
			}
		}

		&-change {
			margin-top: 16px;
			display: flex;
			height: 36px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #A3B9DA;

			&-today {
				width: 36px;
				height: 18px;
				font-size: 12px;
				line-height: 18px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				text-align: center;
				background-image: url(../../../../assets/images/shuju/overview/jinri-bg.png);
				background-repeat: no-repeat;
				background-size: 36px 18px;
			}

			&-new {
				margin-left: 6px;

				span {
					margin-left: 6px;
					height: 15px;
					font-size: 18px;
					font-family: DIN Alternate;
					font-weight: bold;
					font-style: italic;
					color: #00D6D9;
				}
			}

			&-update {
				margin-left: 18px;

				span {
					margin-left: 6px;
					height: 15px;
					font-size: 18px;
					font-family: DIN Alternate;
					font-weight: bold;
					font-style: italic;
					color: #279AFF;
				}
			}
		}
	}
}

.m-per {
	position: absolute;
	z-index: 100;
	top: 20px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding-left: 10px;

	.item {
		display: flex;
		width: 140px;
		height: 90px;
		background: url(../../../../assets/images/shuju/overview/top-bg.png);
		background-size: 140px 70px;
		padding: 8px 16px;
		background-repeat: no-repeat;

		.item-info {
			height: 14px;
			line-height: 40px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			margin: 0 auto;

			div {
				margin-bottom: 3px;

				&:first-child {
					line-height: 20px;
				}
			}

			img {
				display: inline-block;
				margin-right: 5px;
				width: 20px;
				height: 20px;
				vertical-align: bottom;
			}

			b {
				padding-left: 28px;
				height: 23px;
				font-size: 30px;
				font-family: DIN Alternate;
				font-weight: bold;
				font-style: italic;
				color: #3CF5FF;
			}
		}

	}

	.item:nth-child(1) {
		.item-info {
			b {
				color: #F37346;
			}
		}
	}

	.item:nth-child(2) {
		.item-info {
			b {
				color: #3CF5FF;
			}
		}
	}

	.item:nth-child(3) {
		.item-info {
			b {
				color: #3CF5FF;
			}
		}
	}

	.item:nth-child(4) {
		.item-info {
			b {
				color: #FFB73C;
			}
		}
	}

	.item:nth-child(5) {
		.item-info {
			b {
				color: #64C1FF;
			}
		}
	}

	.item:nth-child(6) {
		.item-info {
			b {
				color: #FFB73C;
			}
		}
	}
}

.m-sqrfph {
	padding: 24px 16px;

	.table {
		.tr {
			display: flex;
			height: 40px;

			.th {
				width: 110px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				font-weight: 400;
				color: #A3B9DA;
			}

			.th:nth-child(1) {
				width: 65px;
				text-align: center;
			}

			.td {
				height: 40px;
				line-height: 40px;
				width: 110px;
				overflow: hidden;
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
				text-overflow: ellipsis;
				white-space: nowrap;
				// padding: 0 8px;
				// overflow: hidden;
				// white-space: nowrap;
				// text-overflow: ellipsis;
			}

			.tdbg1 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no1-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.tdbg2 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no2-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.tdbg3 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no3-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.td:nth-child(1) {
				width: 65px;
				text-align: center;
			}
		}

		.tr:nth-child(even) {
			background: rgba(14, 56, 115, 0.4);

		}
	}
}

.m-sq12345 {
	padding: 24px 16px;

	.table {
		.tr {
			display: flex;
			height: 40px;

			.th {
				width: 110px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				font-weight: 400;
				color: #A3B9DA;
			}

			.th:nth-child(1) {
				width: 65px;
				text-align: center;
			}

			.td {
				height: 40px;
				line-height: 40px;
				width: 110px;
				font-size: 14px;
				font-weight: 400;
				color: #FFFFFF;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.tdbg1 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no1-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.tdbg2 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no2-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.tdbg3 {
				height: 40px;
				background: url(../../../../assets/images/shuju/overview/no3-bg.png);
				background-repeat: no-repeat;
				background-size: 30px 12px;
				background-position: center center;
			}

			.td-or {
				color: #FFB73C;
			}

			.td-gr {
				color: #06CD9B;
			}

			.td:nth-child(1) {
				width: 65px;
				text-align: center;
			}
		}

		.tr:nth-child(even) {
			background: rgba(14, 56, 115, 0.4);

		}
	}
}

.date-span {
	float: right;
	width: 90px;
	height: 24px;

	::v-deep .el-input--medium .el-input__inner {
		height: 24px;
		line-height: 24px;
		background: #04224a;
		border: 1px solid #125aaa;
		border-radius: 12px;
		width: 90px;
		padding: 0px;
		text-align: center;
		color: #a0cdff;
	}

	::v-deep .el-input--medium .el-input__icon {
		display: none;
	}

	::v-deep .el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 90px;
		border: 0;
	}
}