@import "../../../sass/base/mixins";

html,body,.o-container {
    @include gradient(#382062,#231441);
}
.page-totalrank{
    padding: px2rem(60) 0 px2rem(150) 0;
    font-size: px2rem(24);
    color: #FFFFFF;
    overflow: hidden;
    @include gradient(#382062,#231441);
    .list-rank1{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        font-size: px2rem(30);
        line-height: px2rem(50);
        text-align: center;
        padding: 0 px2rem(60);
        .item-user{
            &:first-child,&:last-child{
                padding-top: px2rem(40);
                width: px2rem(180);
                .u-cover{
                    width: px2rem(130);
                    height: px2rem(130);
                }
            }
            &:first-child{
                .u-cover{
                    &:before{
                        background: url(./../../img/act/icon-rank2.png) no-repeat;
                        background-size: 100%;
                    }
                }
            }
            &:last-child{
                .u-cover{
                    &:before{
                        background: url(./../../img/act/icon-rank3.png) no-repeat;
                        background-size: 100%;
                    }
                }
            }
            &:nth-child(2){
                width: px2rem(200);
                font-size: px2rem(40);
                line-height: px2rem(50);
                .u-cover{
                    width: px2rem(170);
                    height: px2rem(170);
                    &:before{
                        top: px2rem(-25);
                        width: px2rem(50);
                        height: px2rem(50);
                        background: url(./../../img/act/icon-rank1.png) no-repeat;
                        background-size: 100%;
                    }
                }
            }
        }
        .u-cover{
            position: relative;
            display: inline-block;
            background: #3e266d;
            border-radius: 50%;
            &:before{
                content: "";
                position: absolute;
                top: px2rem(-20);
                left: 50%;
                margin-left: px2rem(-20);
                width: px2rem(40);
                height: px2rem(40);
            }
        }
        h2{
            white-space: nowrap;
            overflow: hidden;
        }
        img{
            width: 100%;
            height: 100%;
            display: block;
            overflow: hidden;
            border-radius: 50%;
        }
    }
    .list-rank2{
        padding: 0 px2rem(40);
        color: #333333;
        font-size: px2rem(30);
        transform: translate3d(0,100%,0);
        -webkit-animation: fadeInUp .2s .4s ease-out;
                animation: fadeInUp .2s .4s ease-out;
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
        li{
            position: relative;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #ffffff;
            border-radius: px2rem(16);
            margin-top: px2rem(30);
            padding: px2rem(16) px2rem(56) px2rem(16) px2rem(40);
            overflow: hidden;
        }
        .info_name{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
        }
        .info_rank{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            @include triangle-topleft(px2rem(30),#ff6b1a);
            &:before{
                content: attr(data-index);
                position: absolute;
                top: px2rem(-23);
                left: px2rem(-26);
                color: #FFFFFF;
                font-size: px2rem(20);
            }
        }
        img{
            display: block;
            width: px2rem(88);
            height: px2rem(88);
            background: #8e6acf;
            overflow: hidden;
            border-radius: 50%;
            margin-right: px2rem(24);
        }
    }
}
.rank-uinfo{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(87,61,134,0.9);
    height: px2rem(120);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 px2rem(40);
    font-size: px2rem(30);
    transition: transform .2s;
    &.isHasDlfooter{
        transform: translateY(px2rem(-120));
    }
    .info_name{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        span{
            margin-right: px2rem(24);
            font-size: px2rem(24);
        }
    }
    img{
        display: block;
        width: px2rem(88);
        height: px2rem(88);
        background: #8e6acf;
        overflow: hidden;
        border-radius: 50%;
        margin-right: px2rem(24);
    }
}

.tip-empty{
    padding: px2rem(300) 0 px2rem(20);
    text-align: center;
    color: #61498c;
    background: url(./../../img/no-data2.png) center px2rem(100) no-repeat;
    background-size: auto px2rem(170);
}

@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
                transform: translate3d(0,100%,0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
    }
}
