refactor: 游戏界面的交互效果

src/store/index.js

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

src/views/GameList.vue

@@ -7,11 +7,17 @@
         class="small-item"
         v-for="item in showGames"
         :key="item.id"
+        :class="{ active: item.name === newname }"
         @mouseover="mouseover(item.name)"
         @click="openGame(item.name)"
-        :style="{ 'background-image': `url(${base}page3/${item.name}.jpg)` }"
         @mouseout="hoverEnd"
-      ></div>
+      >
+        <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>
@@ -27,7 +33,6 @@ import { computed, ref } from 'vue';
 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);
 }
@@ -39,6 +44,7 @@ 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() {
@@ -66,6 +72,8 @@ function openGame(gameName) {
  * @param {string} gameName 游戏name
  */
 function mouseover(gameName) {
+  // console.log(gameName);
+  newname.value = gameName;
   hover();
   gameImage.value = `/page3/${gameName}.jpg`;
 }
@@ -85,13 +93,13 @@ function hoverEnd() {
 .container {
   position: absolute;
   width: 1280rem;
-  height: 720rem;
+  height: 619rem;
   left: 50%;
   top: 50%;
   transform: translate3d(-50%, -50%, 0);
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 1280rem 720rem;
+  background-size: 1280rem 670rem;
 }
 .small-container {
   position: absolute;
@@ -110,6 +118,33 @@ function hoverEnd() {
   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;

yarn.lock

@@ -2222,9 +2222,9 @@
     "is-date-object" "^1.0.1"
     "is-symbol" "^1.0.2"
 
-"esbuild-linux-64@0.13.8":
-  "integrity" "sha1-AJL8igZAAad3v6DjtCW7i+j5bmo="
-  "resolved" "https://registry.npmmirror.com/esbuild-linux-64/download/esbuild-linux-64-0.13.8.tgz?cache=0&sync_timestamp=1634439421101&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-linux-64%2Fdownload%2Fesbuild-linux-64-0.13.8.tgz"
+"esbuild-windows-64@0.13.8":
+  "integrity" "sha1-fe/Y15rju35vU7ZacZC+fa+QFoY="
+  "resolved" "https://registry.npmmirror.com/esbuild-windows-64/download/esbuild-windows-64-0.13.8.tgz?cache=0&sync_timestamp=1634439403833&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fesbuild-windows-64%2Fdownload%2Fesbuild-windows-64-0.13.8.tgz"
   "version" "0.13.8"
 
 "esbuild@^0.13.2":