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 1/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E7=BB=8F=E8=BF=87=E5=9B=BE=E6=A0=87=E7=9A=84=E4=BD=93?=
 =?UTF-8?q?=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>

From 7c39b8156f49220d76ba99cba3ff68e07d77a0bf Mon Sep 17 00:00:00 2001
From: lin <1439713475@qq.com>
Date: Fri, 16 Sep 2022 19:59:17 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87=E7=BB=8F=E8=BF=87=E5=9B=BE=E6=A0=87=E7=9A=84=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=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 | 116 ++++++++++++++++++++++-------------------
 1 file changed, 61 insertions(+), 55 deletions(-)

diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 55744fd..4491795 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -1,53 +1,59 @@
 <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">
@@ -58,25 +64,25 @@ 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>
 

From 256b16de7f784c5d775cb95fde1532bce0742b68 Mon Sep 17 00:00:00 2001
From: lin <1439713475@qq.com>
Date: Fri, 16 Sep 2022 20:28:34 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BA=86random-board?=
 =?UTF-8?q?=E5=92=8Cslot-board=E7=9B=92=E5=AD=90=E4=BC=9A=E9=9A=8F?=
 =?UTF-8?q?=E7=9D=80random-board=E5=86=85=E5=AE=B9=E7=9A=84=E5=87=8F?=
 =?UTF-8?q?=E5=B0=91=E8=80=8C=E5=87=BA=E7=8E=B0=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamePage.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 4491795..29ab9f4 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -89,6 +89,8 @@ onMounted(() => {
 <style scoped>
 .level-board {
     position: relative;
+    margin: 0 calc(50% - 184px);
+    width: 100%;
 }
 
 .level-block {
@@ -96,6 +98,7 @@ onMounted(() => {
 }
 
 .random-board {
+    margin: 0 calc(50% - 184px);
     margin-top: 8px;
 }
 
@@ -104,8 +107,9 @@ onMounted(() => {
 }
 
 .slot-board {
-    margin-top: 24px;
     border: 10px solid saddlebrown;
+    margin: 0 calc(50% - 157px);
+    margin-top: 24px;
 }
 
 .block {

From 8eb17e4c02fa2f208a284fea63c408c702bd03eb Mon Sep 17 00:00:00 2001
From: lin <1439713475@qq.com>
Date: Fri, 16 Sep 2022 20:31:15 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E4=BA=86random-board?=
 =?UTF-8?q?=E6=B8=85=E7=A9=BA=E5=90=8Eslot-board=E4=B8=8A=E7=A7=BB?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamePage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index 29ab9f4..958c3bf 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -100,6 +100,7 @@ onMounted(() => {
 .random-board {
     margin: 0 calc(50% - 184px);
     margin-top: 8px;
+    min-height: 100px;
 }
 
 .random-area {