.page {
    padding-bottom: 186rpx;

    .single_box {
        margin: 16rpx 0 0 0;
        padding: 30rpx;
        background-color: #fff !important;

        &:last-child {
            margin-bottom: 16rpx;
        }

        .title {
            margin-bottom: 30rpx;
            font-size: 34rpx;
            line-height: 48rpx;
            color: $font-color;
            font-weight: 500;
        }

        .title2 {
            margin: 30rpx 0 20rpx 0;
            font-size: 28rpx;
            font-weight: 500;
            line-height: 40rpx;
            text-align: center;
        }

        .trend_icon {
            margin-left: 10rpx;
            width: 26rpx;
            height: 26rpx;
        }

        .study_situation {
            display: flex;

            .item {
                flex: 1;
                padding: 42rpx 30rpx;
                display: flex;
                justify-content: space-between;
                height: 119rpx;
                border-radius: 20rpx;
                background-color: #f7faff;
                font-size: 26rpx;
                font-weight: 500;
                box-sizing: border-box;

                &:first-child {
                    margin-right: 30rpx;
                }

                .date {
                    color: #3fd15f;
                    font-size: 28rpx;
                }
            }
        }

        .study_situation2 {
            display: flex;
            justify-content: space-between;

            .item {
                width: calc(50% - 15rpx);
                text-align: center;
                font-weight: 500;

                &_label {
                    display: block;
                    height: 76rpx;
                    line-height: 76rpx;
                    background-color: #ebf2ff;
                    border-bottom: 1rpx solid #d9e1f2;
                    border-radius: 20rpx 20rpx 0 0;
                    font-size: 26rpx;
                }

                &_date {
                    display: block;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 79rpx;
                    line-height: 79rpx;
                    background-color: #f7faff;
                    border-radius: 0 0 20rpx 20rpx;

                    font-size: 28rpx;
                    // rgba(255, 40, 40, 1)jiang rgba(255, 141, 95, 1)ping
                }

                .keep {
                    color: #FF8D5F;

                }

                .down {
                    color: #FF2828;
                }

                .up {
                    color: #21D17A;
                }

            }
        }

        .date_filter_box {
            text-align: center;
        }
    }

    .children_box {

        padding-top: 0;

        .children {
            display: flex;
            justify-content: space-between;
            padding: 30rpx 0 30rpx 0;
            border-bottom: 1rpx solid $border-color;


            .left {
                display: flex;
                align-items: center;

                .children_avatar {
                    margin-right: 20rpx;
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }

                .name_vip {
                    display: flex;
                    align-items: center;
                    margin-bottom: 6rpx;

                    .name {
                        display: inline-block;
                        max-width: 210rpx;
                        font-weight: 500;
                        font-size: 32rpx;
                        line-height: 48rpx;
                        color: $font-color;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .vip {
                        margin-left: 10rpx;
                        width: 85rpx;
                        height: 32rpx;
                    }
                }

                .time {
                    font-size: 24rpx;
                    line-height: 34rpx;
                    color: $font-aux-color;
                }
            }

            .icon {
                width: 30rpx;
                height: 30rpx;
            }

            .checked_icon {
                margin: auto 0;
            }

            .rotate {
                transform: rotate(-180deg);
            }
        }

        .children_info {
            display: flex;
            padding: 30rpx 0 0 0;

            .item {
                width: 50%;
                font-size: 28rpx;
                line-height: 40rpx;
                color: $font-aux-color;

                .level {
                    color: $font-color;
                }
            }
        }
    }

    .filter_box {
        padding: 30rpx 30rpx 13rpx 30rpx;

        .title {
            margin-bottom: 0;
        }
    }

    .learning_time {
        .date_filter_box {
            margin: 50rpx 0 30rpx 0;
        }
    }

    .video_learning {
        .date_filter_box {
            margin: 30rpx 0;
        }
    }

    .exercise_statistics {
        .study_situation2 {
            margin: 30rpx 0 0 0;

            .item {
                width: 210rpx;
            }
        }
    }

    .language_statistics {
        .study_situation2 {
            margin: 30rpx 0 50rpx 0;
        }
    }

    .knowledge_mapping {
        .chart_label {
            display: flex;
            justify-content: center;
            font-size: 26rpx;
            color: rgba(102, 102, 102, 1);

            .iden_color {
                display: inline-block;
                width: 30rpx;
                height: 8rpx;
                margin-right: 4rpx;
            }

            .increase {
                display: flex;
                align-items: center;
                margin-right: 16rpx;

                .iden_color {
                    background-color: rgba(69, 203, 70, 1);
                }
            }

            .decrease {
                display: flex;
                align-items: center;

                .iden_color {
                    background-color: rgba(248, 104, 96, 1);
                }
            }
        }
    }
}