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"
        :class="{ active: item.name === newname }"
        @mouseover="mouseover(item.name)"
        @click="openGame(item.name)"
        @mouseout="hoverEnd"
      >
        <img :src="`${base}/page3/${item.name}.jpg`" alt="" class="list-img" />
        <div v-if="item.name === newname" class="mask">
          {{ item.text }}
          <img class="play-img" :src="`${base}/page3/play.png`" />
        </div>
      </div>
    </div>
    <div class="btn btn-right" :class="{ disabled: page === total - 1 }" @click="handleNext"></div>
  </div>
</template>

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

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

const store = useStore();
const route = useRoute();
const base = import.meta.env.BASE_URL;
if (route.query && route.query.site) {
  store.commit('setSelectedSite', route.query.site);
}

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));
const newname = ref('');

// 上一页
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) {
  // console.log(gameName);
  newname.value = gameName;
  hover();
  gameImage.value = `/page3/${gameName}.jpg`;
}

function hover() {
  const audioActive = document.getElementById('audio-active');
  audioActive.play();
}

function hoverEnd() {
  const audioActive = document.getElementById('audio-active');
  audioActive.pause();
}
</script>

<style scoped>
.container {
  position: absolute;
  width: 1280rem;
  height: 619rem;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1280rem 670rem;
}
.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;
  position: relative;
  overflow: hidden;
}
.mask {
  font-size: 20rem;
  font-weight: 600;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0;
  color: #fff;
  text-align: center;
  line-height: 240rem;
}
.list-img {
  width: 276rem;
  transition: all 0.6s;
}
.active .list-img {
  transform: scale(1.1);
}
.play-img {
  width: 40rem;
  position: absolute;
  top: 35%;
  left: 43%;
}
.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>