🐞 fix: 修复2048尺寸溢出的bug

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 });

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);