style: 优化图片切换加载

This commit is contained in:
hzj 2025-12-01 15:35:45 +08:00
parent 5ef54e3a9b
commit 3a226827c5
3 changed files with 14 additions and 14 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<div style="position: relative; width: 100%"> <div style="position: relative; width: 100%">
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="imgUrl" alt="" width="100%" style="display: block" /> <img v-smart-img :src="imgUrl" :key="imgUrl" alt="" width="100%" style="display: block" />
<!-- 内容 --> <!-- 内容 -->
<div <div
style=" style="

View File

@ -157,7 +157,7 @@
<!-- 排行榜切换按钮 --> <!-- 排行榜切换按钮 -->
<div style="width: 100%"> <div style="width: 100%">
<div <div
v-if="visibleKingList" v-show="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
@ -171,7 +171,7 @@
</div> </div>
<div <div
v-if="!visibleKingList" v-show="!visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img <img
@ -299,12 +299,12 @@
<!-- 弹窗遮罩层 --> <!-- 弹窗遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop> <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
<img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" /> <img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" />
</div> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
<div v-if="historyShow" style="margin: 20% 0" @click.stop> <div v-show="historyShow" style="margin: 20% 0" @click.stop>
<div style="width: 100%"> <div style="width: 100%">
<borderImg title="History"> <borderImg title="History">
<div <div
@ -444,7 +444,7 @@
</div> </div>
<!-- rewards弹窗 --> <!-- rewards弹窗 -->
<div v-if="rewardsShow" style="padding: 20% 0" @click.stop> <div v-show="rewardsShow" style="padding: 20% 0" @click.stop>
<div style="position: relative"> <div style="position: relative">
<!-- 取消按钮 --> <!-- 取消按钮 -->
<img <img
@ -468,7 +468,7 @@
<!-- 奖励榜切换按钮 --> <!-- 奖励榜切换按钮 -->
<div style="width: 100%"> <div style="width: 100%">
<div <div
v-if="visibleKingRewards" v-show="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" /> <img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
@ -481,7 +481,7 @@
/> />
</div> </div>
<div <div
v-if="!visibleKingRewards" v-show="!visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
> >
<img <img
@ -717,13 +717,13 @@ const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const historyList = ref([]) // const historyList = ref([]) //
const showTopOne = computed(() => { const showTopOne = computed(() => {
let topNew = [] let topNew = []
if (historyList.value[historyIndex.value].wealth) if (historyList.value[historyIndex.value]?.wealth)
topNew.push({ topNew.push({
type: 'topKing', type: 'topKing',
Frame: images.kingFrame, Frame: images.kingFrame,
userInfo: historyList.value[historyIndex.value].wealth || {}, userInfo: historyList.value[historyIndex.value].wealth || {},
}) })
if (historyList.value[historyIndex.value].charm) { if (historyList.value[historyIndex.value]?.charm) {
topNew.push({ topNew.push({
type: 'topQueen', type: 'topQueen',
Frame: images.queenFrame, Frame: images.queenFrame,
@ -731,7 +731,7 @@ const showTopOne = computed(() => {
}) })
} }
return { return {
group: historyList.value[historyIndex.value].group, group: historyList.value[historyIndex.value]?.group,
top: topNew, top: topNew,
} }
}) })

View File

@ -466,12 +466,12 @@
<!-- 弹窗遮罩层 --> <!-- 弹窗遮罩层 -->
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop> <div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
<img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" /> <img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" />
</div> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
<div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop> <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 --> <!-- 背景图 -->
<img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" /> <img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
<!-- 标题 --> <!-- 标题 -->
@ -611,7 +611,7 @@
<!-- gifts弹窗 --> <!-- gifts弹窗 -->
<itemCenter <itemCenter
v-if="giftsShow" v-show="giftsShow"
style="margin: 20% 0" style="margin: 20% 0"
@click.stop @click.stop
:imgUrl="images.giftsBg" :imgUrl="images.giftsBg"