fix globalMask

src/App.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watch } from "vue";
+import { defineComponent, ref, watch, watchEffect } from "vue";
 import { store } from "./features/mark/store";
 // import TestStatus from "./test/TestStatus.vue";
 // import TestSetting from "./test/TestSetting.vue";
@@ -32,6 +32,10 @@ export default defineComponent({
       () => (spinning.value = store.globalMask)
     );
 
+    watchEffect(() => {
+      const bodyScrollProp = spinning.value ? "hidden" : "auto";
+      document.body.style.overflow = bodyScrollProp;
+    });
     return { spinning };
   },
   // beforeCreate() {
@@ -66,9 +70,9 @@ export default defineComponent({
   position: absolute;
   top: 0;
   left: 0;
-  height: 100%;
-  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全 */
-  width: 200%;
+  height: 100vh;
+  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
+  width: 300vw;
   overflow: hidden;
   display: flex;
   place-content: center;