/* nova-werun/pages/home/ranking/index.wxss */
.all{
    width: 100vw;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-y: scroll;
    .textbox{
        width: 100%;
        height: 240rpx;
        display: flex;
        position: relative;
        border-bottom: black solid 2px;
        border-radius: 25%;
        margin-bottom: 75rpx;
        .textobx2{
            width:100%;
            display: flex;
            height: 150rpx;
            margin-top: 40rpx;
            justify-content: center;
            .text{
                font-size: 48rpx;
                margin-left: 40rpx;
            }
            .switch{
                width: 130rpx;
                height: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 45rpx;
                border: gray solid 1px;
                margin-left: auto;
                margin-right: 20rpx;
                image{
                    width: 40rpx;
                    height: 40rpx;
                }
                .switch-text{
                    width: 60rpx;
                    height: 40rpx;
                    font-size: 30rpx;
                }
            }
        }
        .cardbox{
            width: 86%;
            height: 130rpx;
            display: flex;
            align-items: center;
            position: absolute;
            justify-content: center;
            bottom: -75rpx;
            border: black solid 1px;
            border-radius: 10rpx;
            background-color: white;
            left: 7%;
            .paiming{
                width: 60rpx;
                height: 60rpx;
                margin-right: 10rpx;
                font-size: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: red;
            }
            image{
                width: 60rpx;
                height: 60rpx;
                margin-right: 10rpx;
            }
            .avarter{
                width: 90rpx;
                height: 90rpx;
                border-radius: 50%;
            }
            .name{
                width: 225rpx;
                font-size: 30rpx;
                margin-left: 20rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .num{
                font-size: 30rpx;
                color: red;
                margin-left: 20rpx;
            }
            .good{
                width: 50rpx;
                color: gray;
                margin-left: 20rpx;
                .good-num{
                    font-size: 28rpx;
                }
            }
        }

    }
    .rankbox{
        width: 86%;
        margin-top:40rpx;
        display: flex;
        align-items: center;
        flex-direction: column;
        border: black solid 1px;
        border-radius: 10rpx;
        margin-bottom: 40rpx;
        .cardbox{
            width: 100%;
            height: 130rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: gray solid 1px;
            border-radius: 10rpx;
            background-color: white;
            .paiming{
                width: 60rpx;
                height: 60rpx;
                margin-right: 10rpx;
                font-size: 36rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: red;
            }
            image{
                width: 60rpx;
                height: 60rpx;
                margin-right: 10rpx;
            }
            .avarter{
                width: 90rpx;
                height: 90rpx;
                border-radius: 50%;
            }
            .name{
                width: 225rpx;
                font-size: 30rpx;
                margin-left: 20rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .num{
                font-size: 30rpx;
                color: red;
                margin-left: 20rpx;
            }
            .good{
                width: 50rpx;
                color: gray;
                margin-left: 20rpx;
                .good-num{
                    font-size: 28rpx;
                }
            }
        }
    }
}