diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index b52f4fa5e..2f02faefb 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -151,6 +151,9 @@ function myLoadingFunction (el, binding, vnode) {
   if (binding.modifiers.scaleMax) {
     divBox.style.transform = 'scale(2)'
   }
+  if (binding.modifiers.dark) {
+    divBox.style.background = 'rgba(0, 0, 0, 0.7)'
+  }
   const div = document.createElement('div')
   div.setAttribute('class', className + ' my-loading')
   if (className === 'bars1') {
diff --git a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
index dd40b7652..626edd192 100644
--- a/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
+++ b/nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
@@ -93,7 +93,7 @@
               <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
             </el-upload>
           </div>
-          <div slot="footer" class="footer">
+          <div class="footer">
             <div class="el-message-box__btns" style="text-align: right;">
               <button :id="id+'-xlsx-import-template'" class="nz-btn el-button el-button--default el-button--small" @click="downloadTemplate()">
                 <span>{{$t('upload.template')}}</span>
@@ -127,7 +127,7 @@
               </el-radio-group>
             </div>
           </div>
-          <div slot="footer" class="footer">
+          <div class="footer">
             <div class="el-message-box__btns">
               <button :id="id+'-xlsx-import-export'"  class="nz-btn el-button--small nz-btn-style-normal" @click="exportData">
                 <span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
@@ -180,7 +180,7 @@
               </div>
             </div>
           </div>
-          <div slot="footer" class="footer">
+          <div class="footer">
             <div class="el-message-box__btns">
               <button :id="id+'-xlsx-import-rollback'"  class="nz-btn el-button el-button--small nz-btn-style-error" @click="rollbackImport">
                 <span>{{$t('overall.rollbackImport')}}</span>
diff --git a/nezha-fronted/src/components/layout/home.vue b/nezha-fronted/src/components/layout/home.vue
index bc7df6a22..1ce94e984 100644
--- a/nezha-fronted/src/components/layout/home.vue
+++ b/nezha-fronted/src/components/layout/home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home" :class="mode" v-my-loading="loading">
+  <div class="home" :class="mode" v-my-loading.dark="loading">
     <left-menu @refresh="refresh"></left-menu>
     <div ref="body" class="body">
       <Header></Header>