peko-h5/view/peko/modules/room_rank/css/index.scss

@function px2rem($px, $rem:75) {
    @return $px / $rem+rem;
}

@font-face{
    font-family: 'pingfang-bold';
    src: url('../../../common/fonts/PingFang\ Bold.ttf');
    src: url('../../../common/fonts/PingFang\ Bold.ttf') format('woff'),
        url('../../../common/fonts/PingFang\ Bold.ttf') format('truetype'),
        url('../../../common/fonts/PingFang\ Bold.ttf') format('svg');
}
@font-face{
    font-family: 'pingfang-medium';
    src: url('../../../common/fonts/PingFang\ Medium.ttf');
    src: url('../../../common/fonts/PingFang\ Medium.ttf') format('woff'),
        url('../../../common/fonts/PingFang\ Medium.ttf') format('truetype'),
        url('../../../common/fonts/PingFang\ Medium.ttf') format('svg');
}

body{
    width: 100%;
    font-family: 'pingfang-bold';
    background-color: #fff;
}

.wrap{
    display: none;
    .tab_wrap{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: px2rem(200, );
        background: url('../images/top.png') no-repeat 0 0/100% 100%;
        overflow: hidden;
        .tab_contain{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: px2rem(640, );
            height: px2rem(72, );
            margin: px2rem(50, ) auto px2rem(26, );
            background-color: #9785FA;
            border-radius: px2rem(40, );
            color: rgba($color: #fff, $alpha: .6);
            font-size: px2rem(30, );
            p{
                width: px2rem(312, );
                height: px2rem(64, );
                line-height: px2rem(64, );
                margin: 0 px2rem(4, );
                text-align: center;
                font-weight: bold;
                &.active{
                    background-color: #fff;
                    color: #7898F3;
                    border-radius: px2rem(40, );
                }
            }
        }
        .rank_type{
            display: flex;
            margin-left: px2rem(60, );
            p{
                position: relative;
                margin-right: px2rem(32, );
                color: rgba($color: #fff, $alpha: .6);
                font-size: px2rem(24, );
                &.active{
                    color: rgba($color: #fff, $alpha: 1);
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: px2rem(-16, );
                        left: 50%;
                        transform: translateX(-50%);
                        width: px2rem(20, );
                        height: px2rem(8, );
                        border-radius: px2rem(4, );
                        background-color: #fff;
                    }
                }
                &:last-child{
                    display: none;
                }
            }
        }
    }
    .rank_wrap{
        overflow: auto;
        
        .top_three_wrap{
            position: relative;
            width: 100%;
            height: px2rem(400, );
            background: url('../images/topthree-bg.png') no-repeat 0 0/100% 100%;
            margin-top: px2rem(200, );
            .top_three_item{
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: px2rem(174, );
                text-align: center;
                color: #fff;
                &:nth-child(2), &:nth-child(3){
                    left: px2rem(60, );
                    transform: translateX(0);
                    .avatar{
                        width: px2rem(142, );
                        height: px2rem(164, );
                        margin-top: px2rem(112, );
                        p{
                            background-image: url('../images/second.png');
                        }
                        img{
                            top: px2rem(-132, );
                            width: px2rem(116, );
                            height: px2rem(116, );
                        }
                    }
                }
                &:nth-child(3){
                    left: px2rem(516, );
                    .avatar{
                        p{
                            background-image: url('../images/third.png');
                        }
                    }
                }
                .avatar{
                    width: px2rem(174, );
                    height: px2rem(200, );
                    margin: px2rem(34, ) auto px2rem(24, );
                    p{
                        position: relative;
                        z-index: 99;
                        width: 100%;
                        height: 100%;
                        background: url('../images/first.png') no-repeat 0 0/100% 100%;
                    }
                    img{
                        position: relative;
                        top: px2rem(-160, );
                        width: px2rem(144, );
                        height: px2rem(144, );
                        border-radius: 50%;
                    }
                }
                .nick{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: px2rem(24, );
                    img{
                        width: px2rem(30, );
                        width: px2rem(30, );
                        margin-left: px2rem(4, );
                    }
                }
                .erbanNo{
                    font-size: px2rem(20, );
                    color: rgba($color: #fff, $alpha: .6);
                    margin: px2rem(8, ) 0 px2rem(8, );
                }
                .num{
                    font-size: px2rem(28, );
                    color: #FF7979;
                }
            }
        }
        
        ul{
            height: px2rem(280, );
            // overflow: auto;
            margin-top: px2rem(34, );
            li{
                display: flex;
                align-items: center;
                margin-bottom: px2rem(32, );
                .index{
                    width: px2rem(30, );
                    text-align: center;
                    font-size: px2rem(36, );
                    font-weight: bold;
                    color: #666;
                    margin: 0 px2rem(40, );
                }
                .others_avatar{
                    width: px2rem(100, );
                    height: px2rem(100, );
                    margin-right: px2rem(32, );
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .info_wrap{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: px2rem(70, );
                    .others_nick{
                        color: #333;
                        font-size: px2rem(28, );
                        img{
                            width: px2rem(30, );
                            height: px2rem(30, );
                            vertical-align: bottom;
                        }
                    }
                    .others_erbanNo{
                        color: rgba($color: #666, $alpha: .6);
                    }
                }
                .others_num{
                    color: #FF7979;
                    font-size: px2rem(28, );
                    font-weight: bold;
                    margin-right: px2rem(50, );
                }
            }
        }
    }
}

::-webkit-scrollbar{
    display: none;
}