<template>
  <div class="home_game">
    <!-- 标题 -->
    <Title :title="title" />
    <ul class="h5_games clear">
      <li
        class="clear"
        v-for="(item, index) in gameList"
        :key="index"
        @click="toH5Game"
      >
        <img
          :src="`${item.image}`"
          :alt="item.gameName"
          :title="item.gameName"
        />
        <span class="game_name">{{ item.gameName }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 标题
import Title from "@/components/Title/Title";
export default {
  name: "HomeGames",
  components: {
    Title,
  },
  data() {
    return {};
  },
  props: {
    // 游戏列表
    gameList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    // 标题
    title: {
      type: String,
      default: "",
    },
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toH5Game() {
      window.location.href = this.$CONFIG.jumpUrl;
    },
  },
};
</script>

<style lang='less' scoped>
.home_game {
  .h5_games {
    margin: 20 / @rem;
    padding: 20 / @rem;
    background-color: #f5f5f5;
    box-sizing: border-box;

    li {
      width: 50%;
      height: 120 / @rem;
      float: left;

      img {
        width: 96 / @rem;
        margin-top: 10 / @rem;
        float: left;
      }

      span {
        line-height: 120 / @rem;
        margin-left: 20 / @rem;
        float: left;
      }
    }
  }
}
// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  .home_game {
    .h5_games {
      margin: 10 / @rem;
      padding: 10 / @rem;
      box-sizing: border-box;

      li {
        height: 60 / @rem;

        img {
          width: 48 / @rem;
          margin-top: 5 / @rem;
        }

        span {
          line-height: 60 / @rem;
          margin-left: 10 / @rem;
        }
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
}
</style>