JHGameWeb/src/views/Home/HomeTop/HomeTop.vue

<template>
  <div class="home_top">
    <!-- 顶部导航 -->
    <TopNav />
    <!-- 精品游戏榜 -->
    <HomeGames title="精品游戏榜" :gameList="$CONFIG.gameInfoJP" />
    <!-- H5游戏榜 -->
    <HomeGames title="H5游戏榜" :gameList="$CONFIG.gameInfoH5" />
  </div>
</template>

<script>
// 顶部导航
import TopNav from "@/components/TopNav/TopNav";
// 游戏列表
import HomeGames from "@/views/Home/HomeGames/HomeGames";
export default {
  name: "HomeTop",
  components: {
    TopNav,
    HomeGames,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang='less' scoped>
.home_top {
}
// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  // 横屏最大高度
  // height: 260 / @rem;
  //   overflow-y: auto;
  .home_top {
    font-size: 16 / @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>