<template>
    <main class="container">
        <div class="bg"></div>
        <div class="head">
            <div>
                <p>排名</p>
                <span>{{userData.Ranking}}</span>
            </div>
            <div>
                <div style="width: 1rem;height: 1rem;border-radius: 50%;overflow: hidden;margin: 0 auto;">
                    <img :src="userData.HeadImg" alt="">
                </div>
                <b style="max-width: 2.5rem;line-height: normal;" class="ellips">{{userData.NickName}}</b>
            </div>
            <div>
                <p>人气</p>
                <span>{{userData.PopularityValue}}</span>
            </div>

        </div>
        <div class="tab">
            <div>好友</div>
            <div>助力时间</div>
        </div>
        <div>
            <transition-group
                 enter-active-class="animated fadeInRight"
                 leave-active-class="animated fadeOutRight"
            >
                <div
                    v-for="(item,index) in userData.rankingListDetails"
                    :key="index"
                    class="item"
                >
                    <div>
                        <span>{{index+1}}</span>
                        <div class="ava">
                            <img :src="item.HeadImg" alt="">
                        </div>
                        <span class="ellips" style="max-width: 2.5rem;line-height: normal;">{{item.NickName}}</span>
                    </div>
                    <div>
                        <span>{{item.BoosterTime | compatibleDate}}</span>
                    </div>
                </div>
            </transition-group>

        </div>
    </main>
</template>

<script>
    export default {
        name: "rankingDetail",
        data(){
            return{
                userData:''
            }
        },
        created(){
            this.GetData();
        },
        methods:{
            GetData(){
                this.userData =  JSON.parse(sessionStorage['rankingDetailList'])
            }
        },
    }
</script>

<style scoped lang="less">

    .container{
        width: 7.5rem;
        max-width: 7.5rem;
        min-height: 100vh;
        margin: 0 auto;
        box-sizing: border-box;
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .bg{
        width: 7.5rem;
        height: 2.53rem;
        background: url('./img/detail_bg.jpg') no-repeat;
        -webkit-background-size: 7.5rem 2.53rem;
        background-size: 7.5rem 2.53rem;
    }
    .head{
        width: 6.9rem;
        height: 2.05rem;
        background-color: #fff;
        border-radius: .15rem;
        margin: -1.8rem auto 0;
        box-shadow: 1px 1px 10px 0px #cccccc;
        display: flex;
        display: flex;
        align-items: center;
        justify-content: space-around;
        p{
            font-size: .2rem;
            color: #999999;
        }
        span{
            font-size: .48rem;
            color: #ec5a20;
            font-weight: bold;
        }
        b{
            margin-top: .2rem;
            display: inline-block;
        }

    }
    .tab{
        height: .6rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: .3rem;
        >div{
            flex: 1;
            font-size: .24rem;
            color: #666;
        }
    }
    .item{
        height: 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: .28rem;
        color: #333333;
        box-sizing: border-box;
        padding: 0 .2rem;
        >div:nth-child(1){
            display: flex;
            align-items: center;
        }
        .ava{
            width: .75rem;
            height: .75rem;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 .4rem;
        }
    }

</style>
