From e27e875790ac9a06f958acddd4a5c8499b8117ca Mon Sep 17 00:00:00 2001
From: zhudaoruyi <1430757558@qq.com>
Date: Wed, 21 Sep 2022 14:45:32 +0800
Subject: [PATCH] =?UTF-8?q?[upgrade]=E6=B8=B2=E6=9F=93=E9=9A=8F=E6=9C=BA?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GamePage.vue | 59 +++++++++++++++++++-----------------------
 1 file changed, 26 insertions(+), 33 deletions(-)

diff --git a/src/pages/GamePage.vue b/src/pages/GamePage.vue
index bce7e69..03eed9d 100644
--- a/src/pages/GamePage.vue
+++ b/src/pages/GamePage.vue
@@ -16,50 +16,32 @@
     <a-row align="center">
       <div v-show="gameStatus > 0" class="level-board">
         <div v-for="(block, idx) in levelBlocksVal" :key="idx">
-          <div
-            v-if="block.status === 0"
-            class="block level-block"
-            :class="{
-              disabled: !isHolyLight && block.lowerThanBlocks.length > 0,
-            }"
-            :data-id="block.id"
-            :style="{
-              zIndex: 100 + block.level,
-              left: block.x * widthUnit + 'px',
-              top: block.y * heightUnit + 'px',
-            }"
-            @click="() => doClickBlock(block)"
-          >
+          <div v-if="block.status === 0" class="block block-1 level-block" :class="{
+            disabled: !isHolyLight && block.lowerThanBlocks.length > 0,
+          }" :data-id="block.id" :style="{
+            zIndex: 100 + block.level,
+            left: block.x * widthUnit + 'px',
+            top: block.y * heightUnit + 'px',
+          }" @click="() => doClickBlock(block)">
             {{ block.type }}
           </div>
         </div>
       </div>
     </a-row>
     <!-- 随机选块 -->
-    <a-row align="space-between" class="random-board">
-      <div
-        v-for="(randomBlock, index) in randomBlocksVal"
-        :key="index"
-        class="random-area"
-      >
-        <div
-          v-if="randomBlock.length > 0"
-          :data-id="randomBlock[0].id"
-          class="block"
-          @click="() => doClickBlock(randomBlock[0], index)"
-        >
-          {{ randomBlock[0].type }}
-        </div>
+    <a-row align="space-around" class="random-board">
+      <div v-for="(randomBlock, index) in randomBlocksVal" :key="index" class="random-area">
         <!-- 隐藏 -->
-        <div
-          v-for="num in Math.max(randomBlock.length - 1, 0)"
-          :key="num"
-          class="block disabled"
-        >
+        <div v-for="num in Math.max(randomBlock.length - 1, 0)" :key="num" class="block block-2 disabled">
           <span v-if="canSeeRandom">
             {{ randomBlock[num].type }}
           </span>
         </div>
+        <!-- 展示 -->
+        <div v-if="randomBlock.length > 0" :data-id="randomBlock[0].id" class="block block-2"
+          @click="() => doClickBlock(randomBlock[0], index)">
+          {{ randomBlock[0].type }}
+        </div>
       </div>
     </a-row>
     <!-- 槽位 -->
@@ -162,6 +144,17 @@ onMounted(() => {
   display: inline-block;
 }
 
+.block-1 {
+  border-radius: 4px;
+  border: 1px solid #666;
+}
+
+.block-2 {
+  margin-left: -30px;
+  border-radius: 4px;
+  border: 1px solid #666;
+}
+
 .disabled {
   background: grey;
   cursor: not-allowed;