feat: 游戏列表界面及功能实现实现

src/store/index.js

@@ -2,7 +2,7 @@ import { createStore } from 'vuex';
 import { getGamesBySite } from 'config/gameList';
 
 export default createStore({
-  state: { selectedSite: '' },
+  state: { selectedSite: 'UpperLimb' },
   getters: {
     /**
      * 当前选中的训练部位下的 游戏列表

src/views/GameList.vue

@@ -1,17 +1,53 @@
 <template>
-  <button @click="$router.back()">返回</button>
+  <!--  <button @click="$router.back()">返回</button>-->
-  游戏列表选择
+  <!--  游戏列表选择-->
-  <div v-for="item in games" :key="item.id" @click="openGame(item.name)">
+  <!--  <div v-for="item in games" :key="item.id" @click="openGame(item.name)">-->
-    {{ item.text }}
+  <!--    {{ item.text }}-->
+  <!--  </div>-->
+  <div class="container" :style="{ 'background-image': `url(${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(/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 } from 'vue';
+import { computed, ref } from 'vue';
+
+// TODO: 训练部位的本地记录 或者 url记录
 
 const store = useStore();
-const games = computed(() => store.getters.selectedGames);
+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 跳转到对应的游戏界面
@@ -20,6 +56,82 @@ const games = computed(() => store.getters.selectedGames);
 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></style>
+<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>