MiniPrograms/gradepkg/common/chartpage.scss

.page-box {
		background: linear-gradient(#a5c6ff, $page-background-color);
		height: 675rpx;
		//数据分析模块
		.data-box {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 20rpx 20rpx 10rpx 20rpx;
			justify-content: space-between;
			
			.data-box-item {
				margin: 2% 0;
				display: flex;
				flex-direction: column;
				width: 48%;
				border-radius: $card-border-radius;
				overflow: hidden;
				padding: 20rpx 0;
		
				.item-text {
					margin-left: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;
					z-index: 2;
					padding: 15rpx 10rpx;
				}
				.module-item-box{
					width: 0rpx;
					height: 0rpx;
				}
				.t-icon {
					position: relative;
					width: 200rpx;
					height: 200rpx;
					top: -220rpx;
					right: -165rpx;
					z-index: 1;
					background-repeat: no-repeat;
				}		
				.icon-text-item {
					width: 180rpx;
					font-size: 35rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-left: 20rpx;
					margin-right: 20rpx;
					z-index: 2;
				}
			}
		}
	.tooltip {
		position: absolute;
		width: auto;
		height: auto;
		z-index: 99;
		padding: 15rpx;
		top: 220rpx;
		right: 20rpx;
		background-color: #FFF;
		border-radius: $card-border-radius;
			
		.tooltip-text {
			font-size: 24rpx;
			color: $color-title;
			font-weight: bold;
		}
	}
		//头像区域
		.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: $color-title;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.children-class {
					color: #FFF;
					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;
			overflow: hidden;
		
			.chart-name {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 45rpx;
				margin-top: 25rpx;
		
				.chart-name-text {
					line-height: 45rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: $color-title;
					margin-left: 15rpx;
				}
		
				.btn-box {
					display: flex;
					margin-left: auto;
					margin-right: 45rpx;
					.btn {
						margin-right: 10rpx;
						line-height: 45rpx;
						color: $color-mixblue;
						font-size: 28rpx;
					}
					.t-icon{
						width: 45rpx; 
						height: 45rpx;
					}
				}
			}
		
			.charts-box {
				width: 100%;
				height: 550rpx;
			}
		}
	}