t-level-tag.vue 518 B

123456789101112131415161718192021222324252627
  1. <template>
  2. <span class="t-user-level" :class="'t-level-'+level"></span>
  3. </template>
  4. <script>
  5. export default {
  6. props: ['level']
  7. }
  8. </script>
  9. <style lang="scss" scoped>
  10. @for $i from 1 through 7 {
  11. .t-level-#{$i} {
  12. background-image: url("~@/assets/img/t_level/T#{$i}@3x.png");
  13. }
  14. }
  15. .t-user-level {
  16. width: 26px;
  17. height: 15px;
  18. display: inline-block;
  19. background-size: 100% auto;
  20. background-position: 50% 50%;
  21. background-repeat: no-repeat;
  22. vertical-align: baseline;
  23. }
  24. </style>