<template>
    <div class='own-invite'>
        <div class='number'>
            <span>{{info.rank}}</span>
        </div>
        <div class='user'>
            <img :src="info.avatar" alt="" class='img-box'>
            <div class='info'>
                <p class='name'>{{info.nickname}}</p>
                <p class='invite-number'>已成功邀请<span class='invite-number-n'>{{info.upvote}}</span>人</p>
            </div>
        </div>
        <div class='btn' @click='clickInvite'>
                邀请好友
        </div>
    </div>
</template>
<script>
export default {
    props:{
        info:{
            default:()=>{
                return {}
            }
        }
    },
    methods:{
        clickInvite(){
            this.$emit('clickInvite')
        }
    }
}
</script>
<style scoped lang='scss'>
.own-invite{
    width:7.5rem;
    z-index:99;
    height:1.44rem;
    padding:0.24rem 0.32rem;
    box-sizing: border-box;
    background: #FFF8EB;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    .number{
        font-size: 0.32rem;
        font-weight: bold;
        color: #666666;
    }
    .user{
        display: flex;
        flex:1;
        align-items: center;
        margin-left:0.22rem;
        .img-box{
            width:0.72rem;
            height: 0.72rem;
            margin-right:0.16rem;
            border-radius: 100%;
            overflow: hidden;
        }
        .info{
            .name{
                font-size: 0.24rem;
                font-weight: 400;
                color: #666666;
            }
            .invite-number{
                color: #333333;
                font-size: 0.24rem;
                font-weight: 400;
                margin-top:0.08rem;
            }
            p{
                padding: 0;
                margin:0;
            }
        }
    }
    .btn{
        width: 1.6rem;
        height:0.56rem;
        background: linear-gradient(180deg, #FF4B1F 0%, #FF925C 100%);
        box-shadow: 0rem 0rem 0.08rem 0rem rgba(255, 116, 33, 0), 0rem 0rem 0.04rem 0rem rgba(255, 255, 255, 0.7);
        border-radius: 0.28rem;
        border: 0.02rem solid;
        box-sizing: border-box;
        font-size: 0.28rem;
        font-weight: 500;
        color: #FFFFDF;
        line-height: 0.56rem;
        text-align: center;
    }
}
.invite-number-n{
    color: #FF8A22;
}
</style>
