MiniPrograms/subpkg/common/infopage.scss

.container {
		height: 600rpx;
		background: linear-gradient(#ff8caf, $page-background-color);

		.top-info {
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.top-avatar {
				margin-left: 50rpx;
				width: 140rpx;
				height: 140rpx;
				border-radius: 100%;
				border: 6rpx solid #FFFFFF;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
			}

			.top-name {
				margin-left: 50rpx;
				display: flex;
				flex-direction: column;
				font-weight: bold;

				.name {
					color: #3B4144;
					font-size: 45rpx;
					font-weight: bold;
				}

				.detail {
					color: #596166;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		.card-box {
			position: relative;
			background-color: #FFFFFF;
			box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, 0.2);
			top: 80rpx;
			left: 50rpx;
			border-radius: 100rpx;
			width: 750rpx;
			height: 100vh;

			.i-item {
				display: flex;
				align-items: center;
				margin-left: 35rpx;
			}
		}

		.data-box-item {
			display: flex;
			flex-direction: column;
			margin: 20rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			width: 280rpx;
			height: 280rpx;
			box-shadow: $box-shadow-stereo-white;

			.item-text {
				font-size: 30rpx;
				font-weight: bold;
				color: #353535;
				margin: 30rpx 0 0 30rpx;
			}

			.t-icon {
				width: 100rpx;
				height: 100rpx;
			}

			.item-number {
				font-size: 60rpx;
				margin: 20rpx 0 10rpx 30rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
	}