From 85819af9d2dab9de167cd68bda3ff80c707b7e29 Mon Sep 17 00:00:00 2001
From: lin <1439713475@qq.com>
Date: Fri, 16 Sep 2022 19:55:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E9=BC=A0=E6=A0=87?=
 =?UTF-8?q?=E7=BB=8F=E8=BF=87=E5=9B=BE=E6=A0=87=E7=9A=84=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamePage.vue | 161 +++++++++++++++++++++--------------------
 1 file changed, 83 insertions(+), 78 deletions(-)

diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 573c78a..55744fd 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -1,59 +1,53 @@
 <template>
-  <div id="gamePage">
-    <a-button @click="doBack"> ⬅️ 返回</a-button>
-    <a-row align="center">
-      <!-- 分层选块 -->
-      <div class="level-board">
-        <div
-          v-for="(block, idx) in levelBlocksVal"
-          v-show="gameStatus > 0"
-          :key="idx"
-          class="block level-block"
-          :class="{ disabled: block.lowerThanBlocks.length > 0 }"
-          :data-id="block.id"
-          :style="{
+    <div id="gamePage">
+        <a-button @click="doBack">⬅️ 返回</a-button>
+        <a-row align="center">
+            <!-- 分层选块 -->
+            <div class="level-board">
+                <div
+                    v-for="(block, idx) in levelBlocksVal"
+                    v-show="gameStatus > 0"
+                    :key="idx"
+                    class="block level-block"
+                    :class="{ disabled: block.lowerThanBlocks.length > 0 }"
+                    :data-id="block.id"
+                    :style="{
             zIndex: 100 + block.level,
             left: block.x * widthUnit + 'px',
             top: block.y * heightUnit + 'px',
           }"
-          @click="(e) => doClickBlock(block, e)"
-        >
-          {{ block.type }}
-        </div>
-      </div>
-      <!-- 随机选块 -->
-      <div class="random-board">
-        <div
-          v-for="(randomBlock, index) in randomBlocksVal"
-          :key="index"
-          class="random-area"
-        >
-          <div
-            v-if="randomBlock.length > 0"
-            class="block"
-            @click="(e) => doClickBlock(randomBlock[0], e, index)"
-          >
-            {{ randomBlock[0].type }}
-          </div>
-          <div
-            v-for="num in Math.max(randomBlock.length - 1, 0)"
-            :key="num"
-            class="block disabled"
-          ></div>
-        </div>
-      </div>
-      <!-- 槽位 -->
-      <div v-if="slotAreaVal.length > 0" class="slot-board">
-        <div
-          v-for="(slotBlock, index) in slotAreaVal"
-          :key="index"
-          class="block"
-        >
-          {{ slotBlock?.type }}
-        </div>
-      </div>
-    </a-row>
-  </div>
+                    @click="(e) => doClickBlock(block, e)"
+                >{{ block.type }}</div>
+            </div>
+            <!-- 随机选块 -->
+            <div class="random-board">
+                <div
+                    v-for="(randomBlock, index) in randomBlocksVal"
+                    :key="index"
+                    class="random-area"
+                >
+                    <div
+                        v-if="randomBlock.length > 0"
+                        class="block"
+                        @click="(e) => doClickBlock(randomBlock[0], e, index)"
+                    >{{ randomBlock[0].type }}</div>
+                    <div
+                        v-for="num in Math.max(randomBlock.length - 1, 0)"
+                        :key="num"
+                        class="block disabled"
+                    ></div>
+                </div>
+            </div>
+            <!-- 槽位 -->
+            <div v-if="slotAreaVal.length > 0" class="slot-board">
+                <div
+                    v-for="(slotBlock, index) in slotAreaVal"
+                    :key="index"
+                    class="block"
+                >{{ slotBlock?.type }}</div>
+            </div>
+        </a-row>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -64,64 +58,75 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 const {
-  gameStatus,
-  levelBlocksVal,
-  randomBlocksVal,
-  slotAreaVal,
-  widthUnit,
-  heightUnit,
-  doClickBlock,
-  doStart,
+    gameStatus,
+    levelBlocksVal,
+    randomBlocksVal,
+    slotAreaVal,
+    widthUnit,
+    heightUnit,
+    doClickBlock,
+    doStart,
 } = useGame();
 
 /**
  * 回上一页
  */
 const doBack = () => {
-  router.back();
+    router.back();
 };
 
 onMounted(() => {
-  doStart();
+    doStart();
 });
 </script>
 
 <style scoped>
 .level-board {
-  position: relative;
+    position: relative;
 }
 
 .level-block {
-  position: absolute;
+    position: absolute;
 }
 
 .random-board {
-  margin-top: 8px;
+    margin-top: 8px;
 }
 
 .random-area {
-  margin-top: 8px;
+    margin-top: 8px;
 }
 
 .slot-board {
-  margin-top: 24px;
-  border: 10px solid saddlebrown;
+    margin-top: 24px;
+    border: 10px solid saddlebrown;
 }
 
 .block {
-  font-size: 28px;
-  width: 42px;
-  height: 42px;
-  line-height: 42px;
-  border: 1px solid #eee;
-  background: white;
-  text-align: center;
-  vertical-align: top;
-  display: inline-block;
+    font-size: 28px;
+    width: 42px;
+    height: 42px;
+    line-height: 42px;
+    border: 1px solid #eee;
+    background: white;
+    text-align: center;
+    vertical-align: top;
+    display: inline-block;
+    cursor: pointer;
+    transition: all 0.1s;
 }
 
+.block:hover {
+    transform: scale(1.05);
+}
+
+
 .disabled {
-  background: grey;
-  cursor: not-allowed;
+    background: grey;
+    cursor: not-allowed;
+}
+
+.disabled:hover {
+    transform: scale(1);
 }
 </style>