start-page/src/views/GameList.vue

<template>
  <div class="container" :style="{ 'background-image': `url(${base}${gameImage})` }">
    <div class="back" @click="$router.back()"></div>
    <div class="btn btn-left" :class="{ disabled: page === 0 }" @click="handlePrev"></div>
    <div class="small-container">
      <div
        class="small-item"
        v-for="item in showGames"
        :key="item.id"
        @mouseover="mouseover(item.name)"
        @click="openGame(item.name)"
        :style="{ 'background-image': `url(${base}page3/${item.name}.jpg)` }"
      ></div>
    </div>
    <div class="btn btn-right" :class="{ disabled: page === total - 1 }" @click="handleNext"></div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex';
import { computed, ref } from 'vue';

// TODO: 训练部位的本地记录 或者 url记录

const store = useStore();
const base = import.meta.env.BASE_URL;

const allGames = computed(() => store.getters.selectedGames); // 当前训练部位对应的游戏
const gameImage = ref(`page3/${allGames.value[0].name}.jpg`); // 大图背景
const page = ref(0); // 第几页
const size = 4;
const count = computed(() => allGames.value.length); // 游戏个数
const total = computed(() => Math.ceil(count.value / size)); // 总页数
const showGames = computed(() => allGames.value.slice(page.value * size, page.value * size + size));

// 上一页
function handlePrev() {
  console.log(allGames.value, showGames.value);
  if (page.value === 0) return;
  page.value -= 1;
}

// 下一页
function handleNext() {
  if (page.value === total.value - 1) return;
  page.value += 1;
}

/**
 * 根据game.name 跳转到对应的游戏界面
 * @param {string} gameName 游戏name与服务器路径对应
 */
function openGame(gameName) {
  window.location.href = `https://www.tall.wiki/kangfu/game/${gameName}/win`;
}

/**
 * 输入移入预览图 切换背景图
 * @param {string} gameName 游戏name
 */
function mouseover(gameName) {
  gameImage.value = `/page3/${gameName}.jpg`;
}
</script>

<style scoped>
.container {
  position: absolute;
  width: 1280rem;
  height: 720rem;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1280rem 720rem;
}
.small-container {
  position: absolute;
  left: 78rem;
  bottom: 20rem;
  width: 1128rem;
  height: 160rem;
  display: flex;
}
.small-item {
  width: 276rem;
  height: 154rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 276rem 154rem;
  border: 4rem solid #fff;
  margin-right: 8rem;
  cursor: pointer;
}
.small-item:last-child {
  margin-right: 0;
}
.btn {
  position: absolute;
  bottom: 64rem;
  transform: translate3d(0, -50%, 0);
  width: 40rem;
  height: 40rem;
  background-position: center;
  background-size: 40rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.btn-left {
  left: 20rem;
  background-image: url('/page3/left.png');
}
.btn-right {
  right: 20rem;
  background-image: url('/page3/right.png');
}
.btn-left.disabled {
  background-image: url('/page3/left-disable.png');
}
.btn-right.disabled {
  background-image: url('/page3/right-disable.png');
}

.back {
  width: 100rem;
  height: 107rem;
  position: absolute;
  left: 30rem;
  top: 30rem;
  background: url('/page2/return.png') no-repeat center;
  background-size: 100rem 107rem;
}
</style>