MiniPrograms/gradepkg/common/chartpage.scss

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

		.children-box {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			.children-avatar {
				margin-left: 40rpx;
				width: 96rpx;
				height: 96rpx;
				border-radius: 50rpx;
				border: 4rpx solid #FFFFFF;
				box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.2);
			}

			.children-msg {
				margin-left: 30rpx;

				.children-name {
					color: #3B4144;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.children-class {
					color: #696969;
					font-size: 32rpx;
					font-weight: bold;
					margin-top: 10rpx;
				}
			}
		}

		.chart-container {
			margin: 20rpx;
			border-radius: $card-border-radius;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #FFFFFF;

			.chart-name {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 40rpx;
				margin-top: 20rpx;

				.chart-name-text {
					font-size: 30rpx;
					font-weight: bold;
					color: #3B4144;
					margin-left: 10rpx;
				}

				.search-box {
					display: flex;
					align-items: center;
					margin-left: auto;
					margin-right: 40rpx;
				}
			}

			.charts-box {
				width: 100%;
				height: 550rpx;
			}
		}
	}