diff --git a/public/page3/fish.jpg b/public/page3/fish.jpg new file mode 100644 index 0000000..f1f17e9 Binary files /dev/null and b/public/page3/fish.jpg differ diff --git a/public/page3/play.png b/public/page3/play.png new file mode 100644 index 0000000..2871f88 Binary files /dev/null and b/public/page3/play.png differ diff --git a/src/store/index.js b/src/store/index.js index 088ca8b..f2d1eaa 100644 --- a/src/store/index.js +++ b/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: { /** * 当前选中的训练部位下的 游戏列表 diff --git a/src/views/GameList.vue b/src/views/GameList.vue index 092e579..80743ae 100644 --- a/src/views/GameList.vue +++ b/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" - > + > + +
+ {{ item.text }} + +
+
@@ -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; diff --git a/yarn.lock b/yarn.lock index 514d9e9..576e45c 100644 --- a/yarn.lock +++ b/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":