peko-h5/view/peko/activity/act-ocean/css/rank.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: 'din-medium';
    src: url('../../../common/fonts/DINCond-Medium.ttf');
    src: url('../../../common/fonts/DINCond-Medium.ttf') format('woff'),
        url('../../../common/fonts/DINCond-Medium.ttf') format('truetype'),
        url('../../../common/fonts/DINCond-Medium.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');
}

@font-face{
    font-family: 'pingfang-regular';
    src: url('../../../common/fonts/PingFang-Regular.ttf');
    src: url('../../../common/fonts/PingFang-Regular.ttf') format('woff'),
        url('../../../common/fonts/PingFang-Regular.ttf') format('truetype'),
        url('../../../common/fonts/PingFang-Regular.ttf') format('svg');
}


html,body{
   font-family: 'pingfang-bold';
   position: relative;
}

.rank-top{
    height: px2rem(500);
    background-image: linear-gradient(#3491F5, #60C7FC);
    overflow: hidden;
    .tab-wrap{
        font-family: 'pingfang-regular';
        width: px2rem(400);
        height: px2rem(70);
        background-color: #7ABDF9;
        border-radius: px2rem(36);
        margin: px2rem(36) auto px2rem(22);
        span{
            display: inline-block;
            width: px2rem(190);
            height: px2rem(60);
            line-height: px2rem(60);
            text-align: center;
            font-size: px2rem(30);
            color: white;
            margin-top: px2rem(5);
            &:first-child{
                margin-left: px2rem(6);
            }
        }
        .active{
            background-color: white;
            color: #3C9BF7;
            border-radius: px2rem(30);
        }
    }
    .topthree-wrap{
        position: relative;
        .info-wrap{
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: px2rem(200);
            height: px2rem(240);
            background-image: linear-gradient(#3F9EF7, #52B6FA);
            margin-top: px2rem(126);
            border-radius: px2rem(20) px2rem(20) 0 0;
            &:first-child{
                width: px2rem(240);
                height: px2rem(280);
                margin-top: px2rem(86);
                left: 50%;
                transform: translateX(-50%);

            }
            &:nth-child(2){
                left: px2rem(36);
                .avatar{
                    width: px2rem(140);
                    height: px2rem(190);
                    margin-top: px2rem(-86);
                    p{
                        background-image: url('../images/second.png');
                    }
                    img{
                        width: px2rem(140);
                        height: px2rem(140);
                        top: px2rem(-148);
                    }
                }
            }
            &:nth-child(3){
                right: px2rem(36);
                .avatar{
                    width: px2rem(140);
                    height: px2rem(190);
                    margin-top: px2rem(-86);
                    p{
                        background-image: url('../images/third.png');
                    }
                    img{
                        width: px2rem(140);
                        height: px2rem(140);
                        top: px2rem(-148);
                    }
                }
            }
            .avatar{
                width: px2rem(160);
                height: px2rem(214);
                margin-top: px2rem(-70);
                p{
                    position: relative;
                    z-index: 99;
                    height: 100%;
                    background: url('../images/first.png') no-repeat 0 0/100% 100%;
                }
                img{
                    position: relative;
                    z-index: 9;
                    top: px2rem(-168);
                    width: px2rem(160);
                    height: px2rem(160);
                    border-radius: 50%;
                }
            }
            .nick, .diamond-num{
                font-size: px2rem(30);
                font-weight: bold;
                color: white;
                margin: px2rem(16) 0;
            }
            .diamond-num{
                font-family: 'din-medium';
                margin: 0;
            }
        }
    }
}

.other-rank{
    overflow: auto;
    position: absolute;
    width: 100%;
    // height: px2rem(760);
    border-radius: px2rem(30) px2rem(30) 0 0;
    margin-top: px2rem(-26);
    background-color: white;
    padding: px2rem(40) px2rem(58) 0;
    box-sizing: border-box;
    li{
        display: flex;
        align-items: center;
        margin-bottom: px2rem(40);
        &:last-child{
            margin-bottom: px2rem(140);
        }
        .index{
            display: inline-block;
            width: px2rem(30);
            font-size: px2rem(30);
            font-weight: bold;
            color: #333333;
        }
        .others-info{
            flex: 1;
            display: flex;
            align-items: center;
            margin-left: px2rem(30);
            img{
                width: px2rem(100);
                height: px2rem(100);
                border-radius: 50%;
                margin-right: px2rem(20);
            }
            .others-nick{
                font-size: px2rem(28);
                font-weight: bold;
                color: #333333;
            }
        }
        .others-diamond-num{
            font-size: px2rem(26);
            font-weight: bold;
            color: #ED7B50;
        }
    }
}

.mine{
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: px2rem(120);
    background-color: rgba($color: #000000, $alpha: .8);
    padding: 0 px2rem(58);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .mine-rank{
        font-size: px2rem(26);
        font-weight: bold;
        color: white;
    }
    .mine-info{
        flex: 1;
        display: flex;
        align-items: center;
        img{
            width: px2rem(100);
            height: px2rem(100);
            border-radius: 50%;
            margin-left: px2rem(30);
            margin-right: px2rem(20);
        }
        .mine-nick{
            font-size: px2rem(28);
            font-weight: bold;
            color: white;
        }
    }
    .mine-diamond-num{
        font-size: px2rem(26);
        font-weight: bold;
        color: #ED7B50;
    }
}

.no-in-app{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background-color: white;
}