@import "./index.skeleton.wxss";

.chart {
	width: 100vw;
	background-color: #fff;
	display: flex;
	padding: 30rpx 0;
	box-sizing: border-box;

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		justify-content: center;
		flex-shrink: 0;
		width: 0;
		font-weight: bold;

		.s-label,
		.s-fulfill,
		.s-row {
			width: 100%;
			text-align: center;
			padding: 0 8rpx;
		}

		.s-label {
			font-size: 26rpx;
		}

		.s-fulfill {
			font-size: 34rpx;
			margin-top: 8rpx;
		}

		.s-row {
			font-size: 22rpx;
			margin-top: 8rpx;
		}


		.circle {
			width: 100rpx;
			height: 100rpx;
			position: relative;
			border-radius: 50%;
			margin-bottom: 25rpx;
			transform: scale(1.15);

			.ab {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
			}

			&_left {
				border: 8rpx solid #ccc;
				border-radius: 50%;
				clip: rect(0, 50rpx, 100rpx, 0);
			}

			&_right {
				border: 8rpx solid #ccc;
				border-radius: 50%;
				clip: rect(0, 100rpx, 100rpx, 50rpx);
			}

			&_text {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;

				.value {
					margin-top: -6rpx;
				}

				.name {
					margin-top: 6rpx;
				}
			}
		}

	}
}

.table {
	width: 100vw;
	background-color: #ffffff;
	box-sizing: border-box;
	margin-top: 30rpx;

	.label {
		display: flex;
		align-items: center;
		height: 80rpx;
		padding: 0 20rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #666;

		.text {
			display: inline-block;
			width: 14rpx;
			height: 26rpx;
			background: #31A7FF;
			margin-right: 14rpx;
		}
	}

	.row,
	.row-label {
		display: flex;
		align-items: center;
		height: 70rpx;
		background-color: #F2F2F2;
		font-weight: bold;
		padding-left: 30rpx;

		view {
			flex: 1;
			width: 0;
			flex-shrink: 0;
		}
	}

	.row:nth-child(odd) {
		background-color: #fff;
	}

	.row-label {
		font-weight: normal;
	}

}