fix: correct activity dialog overlay stacking

This commit is contained in:
zhx 2026-07-18 12:25:44 +08:00
parent fdd71e3319
commit b0e2a98d2a
3 changed files with 173 additions and 152 deletions

View File

@ -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>

View File

@ -87,7 +87,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog <activity-dialog
:title="form.id ? '编辑 Aslan 游戏王活动' : '新建 Aslan 游戏王活动'" :title="form.id ? '编辑 Aslan 游戏王活动' : '新建 Aslan 游戏王活动'"
:visible.sync="editorVisible" :visible.sync="editorVisible"
width="1180px" width="1180px"
@ -307,9 +307,9 @@
<el-button @click="editorVisible = false">取消</el-button> <el-button @click="editorVisible = false">取消</el-button>
<el-button type="primary" :loading="saveLoading" @click="submitActivity">保存全部配置</el-button> <el-button type="primary" :loading="saveLoading" @click="submitActivity">保存全部配置</el-button>
</span> </span>
</el-dialog> </activity-dialog>
<el-dialog <activity-dialog
:title="`${selectedActivity.activityName || ''} - 结算记录`" :title="`${selectedActivity.activityName || ''} - 结算记录`"
:visible.sync="settlementsVisible" :visible.sync="settlementsVisible"
width="1120px" width="1120px"
@ -404,9 +404,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-dialog> </activity-dialog>
<el-dialog <activity-dialog
:title="`${selectedActivity.activityName || ''} - 抽奖发放记录`" :title="`${selectedActivity.activityName || ''} - 抽奖发放记录`"
:visible.sync="drawRecordsVisible" :visible.sync="drawRecordsVisible"
width="1120px" width="1120px"
@ -499,9 +499,9 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-dialog> </activity-dialog>
<el-dialog <activity-dialog
:title="`${selectedActivity.activityName || ''} - 历史游戏流水补数`" :title="`${selectedActivity.activityName || ''} - 历史游戏流水补数`"
:visible.sync="backfillVisible" :visible.sync="backfillVisible"
width="620px" width="620px"
@ -554,7 +554,7 @@
执行一批 执行一批
</el-button> </el-button>
</span> </span>
</el-dialog> </activity-dialog>
<associated-resources <associated-resources
v-if="resourceSelectorVisible" v-if="resourceSelectorVisible"
@ -567,6 +567,7 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import ActivityDialog from '@/components/ActivityDialog'
import AssociatedResources from '@/components/data/AssociatedResources' import AssociatedResources from '@/components/data/AssociatedResources'
import PropsRow from '@/components/data/PropsRow' import PropsRow from '@/components/data/PropsRow'
import UploadImage from '@/components/upload-image' import UploadImage from '@/components/upload-image'
@ -595,7 +596,7 @@ const REQUIRED_RANK_RANGES = [
export default { export default {
name: 'ActivityGameKing', name: 'ActivityGameKing',
components: { AssociatedResources, PropsRow, UploadImage }, components: { ActivityDialog, AssociatedResources, PropsRow, UploadImage },
data() { data() {
return { return {
activities: [], activities: [],
@ -1149,88 +1150,86 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.aslan-game-king { .filter-container {
.filter-container { display: flex;
display: flex; align-items: flex-start;
align-items: flex-start; margin-bottom: 15px;
margin-bottom: 15px; }
}
.page-tip { .page-tip {
flex: 1; flex: 1;
margin-left: 15px; margin-left: 15px;
} }
.primary-text { .primary-text {
color: #303133; color: #303133;
font-weight: 600; font-weight: 600;
} }
.secondary-text, .secondary-text,
.form-help { .form-help {
color: #909399; color: #909399;
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
.event-tag { .event-tag {
margin: 2px 4px 2px 0; margin: 2px 4px 2px 0;
} }
.settlement-status { .settlement-status {
margin-top: 6px; margin-top: 6px;
color: #606266; color: #606266;
font-size: 12px; font-size: 12px;
} }
.editor-body { .editor-body {
max-height: 76vh; max-height: 76vh;
overflow-y: auto; overflow-y: auto;
padding: 0 8px 20px; padding: 0 8px 20px;
} }
.section-title { .section-title {
margin: 22px 0 14px; margin: 22px 0 14px;
padding-left: 10px; padding-left: 10px;
border-left: 4px solid #409eff; border-left: 4px solid #409eff;
color: #303133; color: #303133;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
} }
.config-table { .config-table {
margin-top: 12px; margin-top: 12px;
} }
.weight-summary { .weight-summary {
padding: 10px 5px; padding: 10px 5px;
color: #606266; color: #606266;
text-align: right; text-align: right;
} }
.readonly-prize-image { .readonly-prize-image {
width: 72px; width: 72px;
height: 72px; height: 72px;
} }
.dialog-actions { .dialog-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.backfill-form { .backfill-form {
margin-top: 20px; margin-top: 20px;
} }
.delivery-item-table { .delivery-item-table {
margin: 8px 0; margin: 8px 0;
} }
.danger-link { .danger-link {
color: #f56c6c; color: #f56c6c;
}
} }
</style> </style>

View File

@ -83,7 +83,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog <activity-dialog
:title="form.id ? '编辑 Aslan 礼物挑战' : '新建 Aslan 礼物挑战'" :title="form.id ? '编辑 Aslan 礼物挑战' : '新建 Aslan 礼物挑战'"
:visible.sync="editorVisible" :visible.sync="editorVisible"
width="1240px" width="1240px"
@ -387,9 +387,9 @@
保存全部配置 保存全部配置
</el-button> </el-button>
</span> </span>
</el-dialog> </activity-dialog>
<el-dialog <activity-dialog
:title="`${selectedActivity.activityName || ''} - 排行榜`" :title="`${selectedActivity.activityName || ''} - 排行榜`"
:visible.sync="rankingVisible" :visible.sync="rankingVisible"
width="930px" width="930px"
@ -423,9 +423,9 @@
<template slot-scope="scope">{{ formatNumber(scope.row.score) }}</template> <template slot-scope="scope">{{ formatNumber(scope.row.score) }}</template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-dialog> </activity-dialog>
<el-dialog <activity-dialog
:title="`${selectedActivity.activityName || ''} - 结算记录`" :title="`${selectedActivity.activityName || ''} - 结算记录`"
:visible.sync="settlementsVisible" :visible.sync="settlementsVisible"
width="1240px" width="1240px"
@ -518,7 +518,7 @@
<el-table-column label="补发次数" width="90" align="center" prop="retryCount" /> <el-table-column label="补发次数" width="90" align="center" prop="retryCount" />
<el-table-column label="状态说明" min-width="180" show-overflow-tooltip prop="failureReason" /> <el-table-column label="状态说明" min-width="180" show-overflow-tooltip prop="failureReason" />
</el-table> </el-table>
</el-dialog> </activity-dialog>
<associated-resources <associated-resources
v-if="resourceSelectorVisible" v-if="resourceSelectorVisible"
@ -531,6 +531,7 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import ActivityDialog from '@/components/ActivityDialog'
import AssociatedResources from '@/components/data/AssociatedResources' import AssociatedResources from '@/components/data/AssociatedResources'
import PropsRow from '@/components/data/PropsRow' import PropsRow from '@/components/data/PropsRow'
import { import {
@ -553,7 +554,7 @@ const TASK_SEND_GIFT_GOLD = 'SEND_GIFT_GOLD'
export default { export default {
name: 'ActivityGiftChallenge', name: 'ActivityGiftChallenge',
components: { AssociatedResources, PropsRow }, components: { ActivityDialog, AssociatedResources, PropsRow },
data() { data() {
return { return {
activities: [], activities: [],
@ -1199,88 +1200,86 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.aslan-gift-challenge { .page-tip {
.page-tip { margin: 8px 0 18px;
margin: 8px 0 18px; }
}
.primary-text { .primary-text {
font-weight: 600; font-weight: 600;
} }
.secondary-text, .secondary-text,
.form-help { .form-help {
margin-top: 4px; margin-top: 4px;
color: #909399; color: #909399;
font-size: 12px; font-size: 12px;
line-height: 18px; line-height: 18px;
} }
.editor-body { .editor-body {
max-height: 76vh; max-height: 76vh;
padding-right: 8px; padding-right: 8px;
overflow-y: auto; overflow-y: auto;
} }
.section-title { .section-title {
margin: 24px 0 14px; margin: 24px 0 14px;
padding-left: 10px; padding-left: 10px;
border-left: 4px solid #409eff; border-left: 4px solid #409eff;
color: #303133; color: #303133;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
.rank-title-row { .rank-title-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.config-table, .config-table,
.settlement-table { .settlement-table {
margin-top: 12px; margin-top: 12px;
} }
.task-desc-grid { .task-desc-grid {
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px; gap: 12px;
margin-top: 12px; margin-top: 12px;
} }
.task-desc-item { .task-desc-item {
padding: 10px; padding: 10px;
border: 1px solid #ebeef5; border: 1px solid #ebeef5;
border-radius: 4px; border-radius: 4px;
} }
.task-desc-label { .task-desc-label {
margin-bottom: 8px; margin-bottom: 8px;
color: #606266; color: #606266;
font-size: 13px; font-size: 13px;
} }
.dialog-actions { .dialog-actions {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
margin-bottom: 14px; margin-bottom: 14px;
} }
.delivery-item-table { .delivery-item-table {
width: calc(100% - 30px); width: calc(100% - 30px);
margin: 4px 15px 12px; margin: 4px 15px 12px;
} }
.danger-link { .danger-link {
color: #f56c6c; color: #f56c6c;
}
} }
@media (max-width: 1100px) { @media (max-width: 1100px) {
.aslan-gift-challenge .task-desc-grid { .task-desc-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }