fix: correct activity dialog overlay stacking

src/components/ActivityDialog/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-dialog
+    v-bind="$attrs"
+    :append-to-body="true"
+    :modal-append-to-body="true"
+    v-on="$listeners"
+  >
+    <template v-if="$slots.title" slot="title">
+      <slot name="title" />
+    </template>
+    <slot />
+    <template v-if="$slots.footer" slot="footer">
+      <slot name="footer" />
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: 'ActivityDialog',
+  inheritAttrs: false
+}
+</script>

src/views/activity/game-king/index.vue

@@ -87,7 +87,7 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog
+    <activity-dialog
       :title="form.id ? '编辑 Aslan 游戏王活动' : '新建 Aslan 游戏王活动'"
       :visible.sync="editorVisible"
       width="1180px"
@@ -307,9 +307,9 @@
         <el-button @click="editorVisible = false">取消</el-button>
         <el-button type="primary" :loading="saveLoading" @click="submitActivity">保存全部配置</el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 结算记录`"
       :visible.sync="settlementsVisible"
       width="1120px"
@@ -404,9 +404,9 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 抽奖发放记录`"
       :visible.sync="drawRecordsVisible"
       width="1120px"
@@ -499,9 +499,9 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 历史游戏流水补数`"
       :visible.sync="backfillVisible"
       width="620px"
@@ -554,7 +554,7 @@
           执行一批
         </el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
     <associated-resources
       v-if="resourceSelectorVisible"
@@ -567,6 +567,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import ActivityDialog from '@/components/ActivityDialog'
 import AssociatedResources from '@/components/data/AssociatedResources'
 import PropsRow from '@/components/data/PropsRow'
 import UploadImage from '@/components/upload-image'
@@ -595,7 +596,7 @@ const REQUIRED_RANK_RANGES = [
 
 export default {
   name: 'ActivityGameKing',
-  components: { AssociatedResources, PropsRow, UploadImage },
+  components: { ActivityDialog, AssociatedResources, PropsRow, UploadImage },
   data() {
     return {
       activities: [],
@@ -1149,7 +1150,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.aslan-game-king {
 .filter-container {
   display: flex;
   align-items: flex-start;
@@ -1232,5 +1232,4 @@ export default {
 .danger-link {
   color: #f56c6c;
 }
-}
 </style>

src/views/activity/gift-challenge/index.vue

@@ -83,7 +83,7 @@
       </el-table-column>
     </el-table>
 
-    <el-dialog
+    <activity-dialog
       :title="form.id ? '编辑 Aslan 礼物挑战' : '新建 Aslan 礼物挑战'"
       :visible.sync="editorVisible"
       width="1240px"
@@ -387,9 +387,9 @@
           保存全部配置
         </el-button>
       </span>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 排行榜`"
       :visible.sync="rankingVisible"
       width="930px"
@@ -423,9 +423,9 @@
           <template slot-scope="scope">{{ formatNumber(scope.row.score) }}</template>
         </el-table-column>
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
-    <el-dialog
+    <activity-dialog
       :title="`${selectedActivity.activityName || ''} - 结算记录`"
       :visible.sync="settlementsVisible"
       width="1240px"
@@ -518,7 +518,7 @@
         <el-table-column label="补发次数" width="90" align="center" prop="retryCount" />
         <el-table-column label="状态说明" min-width="180" show-overflow-tooltip prop="failureReason" />
       </el-table>
-    </el-dialog>
+    </activity-dialog>
 
     <associated-resources
       v-if="resourceSelectorVisible"
@@ -531,6 +531,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import ActivityDialog from '@/components/ActivityDialog'
 import AssociatedResources from '@/components/data/AssociatedResources'
 import PropsRow from '@/components/data/PropsRow'
 import {
@@ -553,7 +554,7 @@ const TASK_SEND_GIFT_GOLD = 'SEND_GIFT_GOLD'
 
 export default {
   name: 'ActivityGiftChallenge',
-  components: { AssociatedResources, PropsRow },
+  components: { ActivityDialog, AssociatedResources, PropsRow },
   data() {
     return {
       activities: [],
@@ -1199,7 +1200,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.aslan-gift-challenge {
 .page-tip {
   margin: 8px 0 18px;
 }
@@ -1277,10 +1277,9 @@ export default {
 .danger-link {
   color: #f56c6c;
 }
-}
 
 @media (max-width: 1100px) {
-  .aslan-gift-challenge .task-desc-grid {
+  .task-desc-grid {
     grid-template-columns: 1fr;
   }
 }