弹窗问题

src/views/moneyManage/receiveDetail/receiveService.vue

@@ -164,34 +164,38 @@
         </div>
 
         <!-- 撤回确认弹窗 -->
-        <div class="recallDialog" v-show="recallDialog">
-            <div class="close">
-                <button @click="closeRecall" class="Btn">{{ t('common.close') }}</button>
-            </div>
-            <div class="text">
-                <text class="txt">{{ textContent }}</text>
-            </div>
-            <div class="cancle">
-                <button @click="closeRecall" class="Btn">{{ t('common.cancel') }}</button>
-            </div>
-            <div class="confirm">
-                <button @click="handleRecall" class="Btn">{{ t('common.confirm') }}</button>
+        <div class="dialog-mask" v-show="recallDialog">
+            <div class="recallDialog">
+                <div class="close">
+                    <button @click="closeRecall" class="Btn">{{ t('common.close') }}</button>
+                </div>
+                <div class="text">
+                    <text class="txt">{{ textContent }}</text>
+                </div>
+                <div class="cancle">
+                    <button @click="closeRecall" class="Btn">{{ t('common.cancel') }}</button>
+                </div>
+                <div class="confirm">
+                    <button @click="handleRecall" class="Btn">{{ t('common.confirm') }}</button>
+                </div>
             </div>
         </div>
 
         <!-- 退款确认弹窗 -->
-        <div class="recallDialog" v-show="refundConfirmDialog">
-            <div class="close">
-                <button @click="closeConfirmRefund" class="Btn">{{ t('common.close') }}</button>
-            </div>
-            <div class="text">
-                <text class="txt">{{ textContent }}</text>
-            </div>
-            <div class="cancle">
-                <button @click="closeConfirmRefund" class="Btn">{{ t('common.cancel') }}</button>
-            </div>
-            <div class="confirm">
-                <button @click="openRefundDialog" class="Btn">{{ t('common.confirm') }}</button>
+        <div class="dialog-mask" v-show="refundConfirmDialog">
+            <div class="recallDialog">
+                <div class="close">
+                    <button @click="closeConfirmRefund" class="Btn">{{ t('common.close') }}</button>
+                </div>
+                <div class="text">
+                    <text class="txt">{{ textContent }}</text>
+                </div>
+                <div class="cancle">
+                    <button @click="closeConfirmRefund" class="Btn">{{ t('common.cancel') }}</button>
+                </div>
+                <div class="confirm">
+                    <button @click="openRefundDialog" class="Btn">{{ t('common.confirm') }}</button>
+                </div>
             </div>
         </div>
 
@@ -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,