mark-web/src/App.vue

<template>
  <a-config-provider :locale="zhCN">
    <router-view> </router-view>
    <a-spin
      v-if="spinning"
      size="large"
      :spinning="spinning"
      :delay="1000"
      class="global-mask fade-in"
    />
  </a-config-provider>
</template>

<script setup lang="ts">
import { watch, watchEffect, computed } from "vue";
import { store } from "@/store/store";
import zhCN from "ant-design-vue/es/locale/zh_CN";

let spinning = $ref(false);

watch(
  () => store.globalMask,
  () => (spinning = store.globalMask)
);

watchEffect(() => {
  const bodyScrollProp = spinning ? "hidden" : "auto";
  document.body.style.overflow = bodyScrollProp;
});
</script>

<style>
#app {
  font-family: "PingFang SC", tahoma, "Hiragino Sans GB", "宋体", "微软雅黑",
    arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--app-main-bg-color);
  width: 100%;
  color: var(--app-main-text-color);
}

.global-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
  min-width: var(--app-min-width);
  overflow: hidden;
  display: flex;
  place-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 6000;
}
.fade-in {
  opacity: 0.7;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}
</style>