弹窗问题

src/views/moneyManage/receiveDetail/receiveService.vue

@@ -164,7 +164,8 @@
         </div>
 
         <!-- 撤回确认弹窗 -->
-        <div class="recallDialog" v-show="recallDialog">
+        <div class="dialog-mask" v-show="recallDialog">
+            <div class="recallDialog">
                 <div class="close">
                     <button @click="closeRecall" class="Btn">{{ t('common.close') }}</button>
                 </div>
@@ -178,9 +179,11 @@
                     <button @click="handleRecall" class="Btn">{{ t('common.confirm') }}</button>
                 </div>
             </div>
+        </div>
 
         <!-- 退款确认弹窗 -->
-        <div class="recallDialog" v-show="refundConfirmDialog">
+        <div class="dialog-mask" v-show="refundConfirmDialog">
+            <div class="recallDialog">
                 <div class="close">
                     <button @click="closeConfirmRefund" class="Btn">{{ t('common.close') }}</button>
                 </div>
@@ -194,6 +197,7 @@
                     <button @click="openRefundDialog" class="Btn">{{ t('common.confirm') }}</button>
                 </div>
             </div>
+        </div>
 
         <!-- 客服新增/编辑收款弹窗 -->
         <el-dialog class="adddialog" v-model="addFormisible" width="25vw" :before-close="closeAddForm">
@@ -1652,6 +1656,16 @@ onMounted(async () => {
         }
     }
 
+    .dialog-mask {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 2000;
+    }
+
     .recallDialog {
         height: 392px;
         width: 700px;
@@ -1660,7 +1674,7 @@ onMounted(async () => {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        z-index: 1000;
+        z-index: 2001;
 
         .close,
         .cancle,