proginn-frontend/components/t-level-tag.vue

<template>
<span class="t-user-level" :class="'t-level-'+level"></span>
</template>

<script>
export default {
    props: ['level']
}
</script>

<style lang="scss" scoped>
@for $i from 1 through 7 {
    .t-level-#{$i} {
        background-image: url("~@/assets/img/t_level/T#{$i}@3x.png");
    }
}

.t-user-level {
    width: 26px;
    height: 15px;
    display: inline-block;
    background-size: 100% auto;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    vertical-align: baseline;
}
</style>