hy/aslan-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: correct activity dialog overlay stacking

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ActivityDialog/index.vue Normal file
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>

155
src/views/activity/game-king/index.vue
View File

@ -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,88 +1150,86 @@ export default {
</script>
<style scoped lang="scss">
.aslan-game-king {
.filter-container {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.filter-container {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.page-tip {
flex: 1;
margin-left: 15px;
}
.page-tip {
flex: 1;
margin-left: 15px;
}
.primary-text {
color: #303133;
font-weight: 600;
}
.primary-text {
color: #303133;
font-weight: 600;
}
.secondary-text,
.form-help {
color: #909399;
font-size: 12px;
line-height: 20px;
}
.secondary-text,
.form-help {
color: #909399;
font-size: 12px;
line-height: 20px;
}
.event-tag {
margin: 2px 4px 2px 0;
}
.event-tag {
margin: 2px 4px 2px 0;
}
.settlement-status {
margin-top: 6px;
color: #606266;
font-size: 12px;
}
.settlement-status {
margin-top: 6px;
color: #606266;
font-size: 12px;
}
.editor-body {
max-height: 76vh;
overflow-y: auto;
padding: 0 8px 20px;
}
.editor-body {
max-height: 76vh;
overflow-y: auto;
padding: 0 8px 20px;
}
.section-title {
margin: 22px 0 14px;
padding-left: 10px;
border-left: 4px solid #409eff;
color: #303133;
font-size: 16px;
font-weight: 600;
line-height: 22px;
}
.section-title {
margin: 22px 0 14px;
padding-left: 10px;
border-left: 4px solid #409eff;
color: #303133;
font-size: 16px;
font-weight: 600;
line-height: 22px;
}
.config-table {
margin-top: 12px;
}
.config-table {
margin-top: 12px;
}
.weight-summary {
padding: 10px 5px;
color: #606266;
text-align: right;
}
.weight-summary {
padding: 10px 5px;
color: #606266;
text-align: right;
}
.readonly-prize-image {
width: 72px;
height: 72px;
}
.readonly-prize-image {
width: 72px;
height: 72px;
}
.dialog-actions {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.dialog-actions {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.backfill-form {
margin-top: 20px;
}
.backfill-form {
margin-top: 20px;
}
.delivery-item-table {
margin: 8px 0;
}
.delivery-item-table {
margin: 8px 0;
}
.danger-link {
color: #f56c6c;
}
.danger-link {
color: #f56c6c;
}
</style>

147
src/views/activity/gift-challenge/index.vue
View File

@ -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,88 +1200,86 @@ export default {
</script>
<style scoped lang="scss">
.aslan-gift-challenge {
.page-tip {
margin: 8px 0 18px;
}
.page-tip {
margin: 8px 0 18px;
}
.primary-text {
font-weight: 600;
}
.primary-text {
font-weight: 600;
}
.secondary-text,
.form-help {
margin-top: 4px;
color: #909399;
font-size: 12px;
line-height: 18px;
}
.secondary-text,
.form-help {
margin-top: 4px;
color: #909399;
font-size: 12px;
line-height: 18px;
}
.editor-body {
max-height: 76vh;
padding-right: 8px;
overflow-y: auto;
}
.editor-body {
max-height: 76vh;
padding-right: 8px;
overflow-y: auto;
}
.section-title {
margin: 24px 0 14px;
padding-left: 10px;
border-left: 4px solid #409eff;
color: #303133;
font-size: 16px;
font-weight: 600;
}
.section-title {
margin: 24px 0 14px;
padding-left: 10px;
border-left: 4px solid #409eff;
color: #303133;
font-size: 16px;
font-weight: 600;
}
.rank-title-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.rank-title-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.config-table,
.settlement-table {
margin-top: 12px;
}
.config-table,
.settlement-table {
margin-top: 12px;
}
.task-desc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.task-desc-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.task-desc-item {
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.task-desc-item {
padding: 10px;
border: 1px solid #ebeef5;
border-radius: 4px;
}
.task-desc-label {
margin-bottom: 8px;
color: #606266;
font-size: 13px;
}
.task-desc-label {
margin-bottom: 8px;
color: #606266;
font-size: 13px;
}
.dialog-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.dialog-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.delivery-item-table {
width: calc(100% - 30px);
margin: 4px 15px 12px;
}
.delivery-item-table {
width: calc(100% - 30px);
margin: 4px 15px 12px;
}
.danger-link {
color: #f56c6c;
}
.danger-link {
color: #f56c6c;
}
@media (max-width: 1100px) {
.aslan-gift-challenge .task-desc-grid {
.task-desc-grid {
grid-template-columns: 1fr;
}
}