From 561353cb7c471cdedf1aacd21d6052014bdb1439 Mon Sep 17 00:00:00 2001
From: Litrix <wbpstn@163.com>
Date: Mon, 16 Dec 2024 20:34:20 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20=E4=BF=AE=E5=A4=8D2048?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E6=BA=A2=E5=87=BA=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app/LoginRegisterDialog.vue | 12 +++++++++---
 src/views/Game2048Page.vue                 | 10 ++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/app/LoginRegisterDialog.vue b/src/components/app/LoginRegisterDialog.vue
index b32722a..19f2683 100644
--- a/src/components/app/LoginRegisterDialog.vue
+++ b/src/components/app/LoginRegisterDialog.vue
@@ -1,8 +1,14 @@
 <template>
-  <el-dialog v-model="show" :fullscreen="xs" align-center class="login-register-dialog" width="400">
+  <el-dialog
+    v-model="show"
+    :fullscreen="smLess"
+    align-center
+    class="login-register-dialog"
+    width="400"
+  >
     <el-tabs
       class="login-register-dialog__tabs"
-      :class="{ 'login-register-dialog__tabs--center': xs }"
+      :class="{ 'login-register-dialog__tabs--center': smLess }"
       stretch
       v-model="loginRegisterDialogActiveName"
     >
@@ -152,7 +158,7 @@ import { useMediaStore } from '@/stores/media';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { inject, reactive, ref, watch, type InjectionKey } from 'vue';
-const { smLess: xs } = storeToRefs(useMediaStore());
+const { smLess } = storeToRefs(useMediaStore());
 const loginImpl = inject(loginImplKey, async () => false),
   registerImpl = inject(registerImplKey, async () => false);
 const show = defineModel<boolean>({ default: false });
diff --git a/src/views/Game2048Page.vue b/src/views/Game2048Page.vue
index e0fac9d..8eb8e71 100644
--- a/src/views/Game2048Page.vue
+++ b/src/views/Game2048Page.vue
@@ -31,6 +31,7 @@
 }
 .game-2048-page {
   width: max-content;
+  zoom: v-bind(zoomCSS);
 }
 .game-header {
   display: flex;
@@ -60,7 +61,6 @@
 .game-container {
   margin: 0 auto 10px;
 }
-
 .el-input {
   width: auto;
 }
@@ -70,9 +70,15 @@ import Game2048 from '@/components/game2048/Game2048.vue';
 import Game2048Button from '@/components/game2048/Game2048Button.vue';
 import Game2048Score from '@/components/game2048/Game2048Score.vue';
 import { useGame2048Store } from '@/stores/2048';
+import { useMediaStore } from '@/stores/media';
+import { storeToRefs } from 'pinia';
+import { computed } from 'vue';
 
 const game2048Store = useGame2048Store();
-
+const { smLess } = storeToRefs(useMediaStore());
+const zoomCSS = computed(() => {
+  return smLess.value ? 0.75 : 1;
+});
 function click() {
   game2048Store.$reset();
   console.log(game2048Store.gameKey);