<template>
    <div class="tuan" v-if="activityId && isLogin" @click="goActivityRank">
        <img class="fire1" src="@assets/fire.gif" alt="" />
        <div class="fire2bg">
            <img class="fire2" src="@assets/fire2.gif" alt="" />

            <div class="content">
                <img :src="activityIcon" alt="" />
                <span>团灭大战</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            activityId: 0,
            activityIcon: ''
        };
    },
    mounted() {
        this.$http.get('/sysConfig/get/activity_rank_icon,activity_rank_id').then(res => {
            this.activityId = Number(res['activity_rank_id'].value);
            this.activityIcon = res['activity_rank_icon'].value;
        });
    },
    methods: {
        goActivityRank() {
            this.$router.push('/' + this.$route.params.companyId + '/activityRank');
        }
    }
};
</script>

<style lang="less" scoped>
.tuan {
    .flex-col();
    align-items: center;
    position: absolute;
    z-index: 20;
    top: 80px;
    right: -1px;
}
.fire1 {
    width: 42px;
    display: block;
    transform: translateY(12px);
}
.fire2 {
    width: 40px;
    height: 120px;
    display: block;
}
.fire2bg {
    background: linear-gradient(142deg, #8622b2 0%, #b730dc 47%, #8422b1 100%);
    position: relative;
}
.content {
    position: absolute;
    .flex-col();
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    img {
        width: 26px;
        height: 26px;
    }
    span {
        width: 18px;
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
        line-height: 20px;
        background: linear-gradient(140deg, #fcfe1e 0%, #feffa3 48%, #fcfd1d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        word-wrap: break-word;
        margin-top: 3px;
    }
}
</style>
