chat/_src/components/hotGame/hotGame.vue

<template>
  <ul class="list-game">
    <li class="game-item" v-for="(item,index) in hotGame" :key="index">
      <a :href="item.game_url" target="_blank">
        <div class="game-cover">
          <img v-if="item.game_icon" class="user-avatar" :src="`${item.game_icon}?imageview/0/w/180`" alt>
          <div
              v-else
              class="user-avatar"
              :class="`avatar_bg${bgColorNum(item.group_id)}`"
              :data-name="item.game_name && item.game_name.slice(0,2).toUpperCase()"
            ></div>
        </div>
        <h3 class="game-title">{{item.game_name}}</h3>
      </a>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'
import { getAvatarBgColor } from '@/util/util'

export default {
  name: 'hotGame',
  props: {
  },
  computed: {
    ...mapState(['hotGame'])
  },
  methods: {
    bgColorNum (str) {
      return getAvatarBgColor(str, this.userId)
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
@import "./hotGame.scss";
</style>