.activityBox {
    position: relative;
    padding: 35rpx 25rpx calc(140rpx + env(safe-area-inset-bottom)) !important;

    .rankList,
    .activeyList {
        margin-bottom: 35rpx;

        .headline {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30rpx;

            .left {
                display: flex;
                align-items: center;
                font-size: 36rpx;
                font-weight: 400;

                .logo {
                    margin-right: 10rpx;
                    width: 49rpx;
                    height: 49rpx;
                }
            }

            .toAll {
                font-size: 28rpx;
                color: #333333;

                .backIcon {
                    width: 14rpx;
                    height: 24rpx;
                }
            }
        }
    }

    .rankList {
        .scrollView {
            display: flex;
            align-items: center;
            white-space: nowrap;
            width: 100%;

            .ranking-class-2 {
                display: inline-block;
                margin-right: 20rpx;
                width: 630rpx;
                box-sizing: border-box;
                border-radius: 30rpx;
                overflow: hidden;
                box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;

                .header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 25rpx 30rpx;
                    box-sizing: border-box;

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

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

                        .title {
                            font-size: 30rpx;
                            font-weight: bold;
                            margin: 0rpx 10rpx;
                        }
                    }

                    .toAll {
                        font-size: 28rpx;
                        color: white;

                        .backIcon {
                            width: 14rpx;
                            height: 24rpx;
                        }
                    }
                }

                .body {
                    width: 100%;
                    padding: 25rpx 20rpx;
                    box-sizing: border-box;

                    .row {
                        padding: 14rpx 25rpx;
                        border-radius: 14rpx;
                        margin-bottom: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        background-color: white;

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

                            .stand {
                                width: 36rpx;
                                height: 36rpx;
                            }

                            .avatar {
                                width: 72rpx;
                                height: 72rpx;
                                margin: 0rpx 30rpx;
                                border-radius: 50%;
                                background-color: #EBEBEB;
                            }

                            .nickName {
                                width: 210rpx;
                                font-size: 28rpx;
                            }
                        }

                        .right {
                            text-align: center;
                            font-size: 0rpx;

                            .playIcon {
                                width: 34rpx;
                                height: 34rpx;
                            }

                            .num {
                                font-size: 28rpx;
                            }
                        }
                    }
                }
            }

            .yxb {
                .header {
                    background-color: #2DCE66;
                }

                .body {
                    background-image: linear-gradient(180deg, #4cd67c 0%, #66ec95 100%);
                }
            }

            .rbb {
                .header {
                    background-color: #FF7E6C;
                }

                .body {
                    background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
                }
            }

            .pkb {
                .header {
                    background-color: #967DFF;
                }

                .body {
                    background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
                }



                .playIcon {
                    width: 38rpx !important;
                    height: 34rpx !important;
                }
            }
        }
    }
}