.data {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column;

	.data-card {
		width: 100%;
		overflow: hidden;
		zoom: 1;
		position: relative;
		padding: 40rpx 30rpx 30rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		margin-bottom: 15rpx;
		background-color: #FFFFFF;

		&::before {
			content: "";
			position: absolute;
			top: 2rpx;
			left: 2rpx;
			right: 2rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #D3E9FF 0%, #FCFBFD 100%);
		}


		/* 用户信息行 */
		.userInfo {
			position: relative;
			z-index: 2;
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			/* 头像色块（展示姓名首字） */
			.avatar {
				width: 90rpx;
				height: 90rpx;
				margin-right: 24rpx;
			}

			/* 姓名 + meta */
			.info {
				flex: 1;

				.info-name-row {
					height: 40rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.info-name {
						color: #252535;
						height: 40rpx;
						font-size: 30rpx;
						font-weight: bold;
						line-height: 40rpx;
						margin-right: 20rpx;
					}

					/* 本人 badge */
					.badge-self {
						color: #1385FA;
						height: 40rpx;
						padding: 0 18rpx;
						font-size: 24rpx;
						line-height: 40rpx;
						border-radius: 8rpx;
						background-color: rgba(19, 133, 250, 0.2);
					}
				}

				.info-meta {
					height: 26rpx;
					display: flex;
					align-items: center;

					.meta-text {
						color: #808080;
						height: 26rpx;
						font-size: 24rpx;
						line-height: 26rpx;
					}

					.meta-divider {
						color: #CCCCCC;
						font-size: 24rpx;
						line-height: 26rpx;
						margin: 0 12rpx;
					}
				}
			}

			/* 切换用户按钮 */
			.btn {
				color: #1385FA;
				width: 120rpx;
				height: 48rpx;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 48rpx;
				border-radius: 8rpx;
				text-align: center;
				border: 2rpx solid #1385FA;
			}
		}

		.card-divider {
			position: relative;
			z-index: 2;
			width: calc(100% + 60rpx);
			left: -30rpx;
			height: 1rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx dashed #EAECF1;

			&::before {
				content: "";
				position: absolute;
				left: -15rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 30rpx;
				height: 30rpx;
				background-color: #F5F7FB;
				border-radius: 50%;
			}

			&::after {
				content: "";
				position: absolute;
				right: -15rpx;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 30rpx;
				height: 30rpx;
				background-color: #F5F7FB;
				border-radius: 50%;
			}
		}

		/* 时间范围 Tab */
		.nav {
			width: 100%;
			height: 72rpx;
			padding: 4rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: nowrap;
			background-color: #E8EBF2;
			border-radius: 16rpx;
			margin-bottom: 24rpx;

			>view {
				flex: 1;
				height: 64rpx;
				border-radius: 16rpx;
				font-size: 28rpx;
				color: #808080;
				line-height: 64rpx;
				text-align: center;

				&.active {
					color: #FFFFFF;
					font-weight: bold;
					background-color: #1385FA;
				}
			}
		}

		/* 统计摘要 4 格 */
		.summary {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			padding: 24rpx 0;
			background-color: #F3F4F6;
			border-radius: 16rpx;

			.summary-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				.summary-label {
					color: #808080;
					height: 24rpx;
					font-size: 24rpx;
					line-height: 24rpx;
					margin-bottom: 20rpx;
				}

				.summary-value {
					color: #252535;
					height: 32rpx;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 32rpx;

					text {
						color: #808080;
						font-size: 24rpx;
						font-weight: normal;
						margin-left: 4rpx;
					}
				}

				/* 体重下降(利好) */
				.value-down {
					color: #2AC79F;
				}

				/* 体重上升(警示) */
				.value-up {
					color: #FF4D4F;
				}
			}
		}
	}

	.data-user-title {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-wrap: nowrap;
		box-sizing: border-box;
		justify-content: space-between;

		> view:nth-of-type(1) {
			color: #252535;
			height: 80rpx;
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 80rpx;
		}

		> view:nth-of-type(2) {
			color: #808080;
			height: 80rpx;
			font-size: 26rpx;
			line-height: 80rpx;
		}
	}

	.data-user-list {
		flex: 1;
		overflow: hidden;

		.scrollViewContent {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
		
			/* 历史记录列表 */
			.data-list {
				width: 100%;
		
				.list {
					width: 100%;
					padding: 30rpx 48rpx 30rpx 30rpx;
					border-radius: 24rpx;
					box-sizing: border-box;
					background-color: #FFFFFF;
					margin-bottom: 24rpx;

					.list-examTime {
						color: #808080;
						width: 100%;
						height: 24rpx;
						font-size: 24rpx;
						line-height: 24rpx;
						margin-bottom: 24rpx;
					}

					.list-weight {
						width: 100%;
						height: 48rpx;
						display: flex;
						flex-wrap: nowrap;
						justify-content: space-between;
						margin-bottom: 30rpx;

						> view:nth-of-type(1) {
							color: #252535;
							height: 48rpx;
							font-size: 48rpx;
							font-weight: bolder;
							line-height: 48rpx;

							text {
								color: #808080;
								font-size: 24rpx;
								margin-left: 6rpx;
								font-weight: normal;
							}
						}

						> view:nth-of-type(2) {
							height: 48rpx;
							padding: 0 16rpx;
							display: flex;
							flex-wrap: nowrap;
							align-items: center;
							border-radius: 8rpx;
							background-color: #EAFAF6;

							> view:nth-of-type(1) {
								width: 14rpx;
								height: 18rpx;
								display: flex;
								align-items: center;
								margin-right: 8rpx;
							}

							> view:nth-of-type(2) {
								color: #2AC79F;
								font-size: 26rpx;
								height: 26rpx;
								line-height: 26rpx;
							}

							&.diff-up {
								background-color: #FEF0F0;

								> view:nth-of-type(2) {
									color: #F24439;
								}
							}
						}

						&.arrow::after {
							right: -24rpx;
						}
					}

					.list-bmi {
						width: 100%;
						height: 26rpx;
						display: flex;
						flex-wrap: nowrap;

						> view {
							height: 26rpx;
							display: flex;
							flex-wrap: nowrap;
							margin-right: 55rpx;

							> view:nth-of-type(1) {
								height: 26rpx;
								width: 26rpx;
								display: flex;
								align-items: center;
								margin-right: 10rpx;
							}

							> view:nth-of-type(2) {
								color: #77849E;
								height: 26rpx;
								font-size: 26rpx;
								line-height: 26rpx;
								margin-right: 20rpx;
							}

							> view:nth-of-type(3) {
								color: #252535;
								height: 26rpx;
								font-size: 26rpx;
								font-weight: bolder;
								line-height: 26rpx;
							}
						}
					}
		
					// >view:first-of-type {
					// 	color: #808080;
					// 	width: 100%;
					// 	height: 24rpx;
					// 	font-size: 24rpx;
					// 	line-height: 24rpx;
					// 	margin-bottom: 20rpx;
					// }
		
					// >view:last-of-type {
					// 	width: 100%;
					// 	height: 96rpx;
					// 	display: flex;
					// 	justify-content: space-between;
					// 	padding-left: 30rpx;
					// 	padding-right: 50rpx;
					// 	box-sizing: border-box;
					// 	flex-wrap: nowrap;
					// 	border-radius: 16rpx;
					// 	background-color: #FFFFFF;
		
					// 	>view {
					// 		color: #808080;
					// 		font-size: 26rpx;
					// 		height: 96rpx;
					// 		line-height: 96rpx;
		
					// 		text {
					// 			color: #252535;
					// 			font-weight: bold;
					// 		}
					// 	}
					// }
				}
			}
		
			/* ===== 空态 ===== */
			.empty-state {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 160rpx;
		
				.empty-icon {
					width: 193rpx;
					height: 138rpx;
					margin-bottom: 40rpx;
		
					image {
						width: 100%;
						height: 100%;
					}
				}
		
				.empty-text {
					color: #808080;
					height: 30rpx;
					font-size: 30rpx;
					line-height: 30rpx;
				}
			}
		}
	}
}