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":