导入未成功时加遮罩

jero-web/src/components/ImportFile/index.vue

@@ -9,6 +9,14 @@
       <a-icon type="import" :rotate="270"/>
       {{$t('import')}}
     </a-upload>
+    <div class="loading-box" v-if="spinning">
+      <div class="loading-content">
+        <a-icon class="loading" type="loading" />
+        <div class="loading-tips">
+          {{this.$t('Importing')}}...
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -53,6 +61,7 @@
     data() {
       return {
         tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
+        spinning: false,
         cut: ''
       }
     },
@@ -174,4 +183,36 @@
     font-weight: 400 !important;
     color: #040B29 !important;
   }
+</style>
+<style scoped lang="less">
+  .loading-box{
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999900;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    user-select: none;
+    .loading-content{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      color: #21c9cc;
+      transform: translate(-50%, -50%);
+      text-align: center;
+      .loading{
+        font-size:28px ;
+      }
+      .spin-loading{
+        animation: rotating 2s linear infinite;
+      }
+      .loading-tips{
+        margin-top: 5px;
+        font-size: 16px;
+        color: #21c9cc;
+      }
+    }
+  }
 </style>