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

chore(排行榜页面): 全部oss的png转webp格式

Browse Source
This commit is contained in:
hzj 2026-05-18 15:17:05 +08:00
parent 090c1b0205
commit f074c29aeb
14 changed files with 380 additions and 396 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/views/Ranking/Couple/GamePlay/Gameplay.vue
View File

@ -18,14 +18,14 @@
<img
v-show="lotteryShow"
v-smart-img
:src="imageUrl(getImgName('gameLotteryBtActive'))"
:src="webpUrl(getImgName('gameLotteryBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!lotteryShow"
v-smart-img
:src="imageUrl(getImgName('gameLotteryBt'))"
:src="webpUrl(getImgName('gameLotteryBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -36,14 +36,14 @@
<img
v-show="signInShow"
v-smart-img
:src="imageUrl(getImgName('gameSignInBtActive'))"
:src="webpUrl(getImgName('gameSignInBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!signInShow"
v-smart-img
:src="imageUrl(getImgName('gameSignInBt'))"
:src="webpUrl(getImgName('gameSignInBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -54,14 +54,14 @@
<img
v-show="exchangeShow"
v-smart-img
:src="imageUrl(getImgName('gameExchangeBtActive'))"
:src="webpUrl(getImgName('gameExchangeBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!exchangeShow"
v-smart-img
:src="imageUrl(getImgName('gameExchangeBt'))"
:src="webpUrl(getImgName('gameExchangeBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -72,7 +72,7 @@
<!-- 获取历史按钮 -->
<img
v-smart-img
:src="imageUrl('historyBt')"
:src="webpUrl('historyBt')"
alt=""
style="width: 8vw; position: absolute; z-index: 2; top: 0vw; right: 4vw"
@click="showDrawRecord"
@ -81,14 +81,14 @@
<!-- 当前水晶和碎片量 -->
<itemCenter
style="min-height: 75.78vw; position: relative; z-index: 1"
:imgUrl="imageUrl(getImgName('myPropsBg'))"
:imgUrl="webpUrl(getImgName('myPropsBg'))"
:contentStyle="`inset: 28vw 17vw 25vw;justify-content:space-between;`"
>
<!-- 水晶数量 -->
<div style="display: flex; align-items: center; gap: 1vw">
<img
v-smart-img
:src="imageUrl('crystal')"
:src="webpUrl('crystal')"
alt=""
style="display: block; width: 15vw; object-fit: cover"
/>
@ -99,7 +99,7 @@
<div style="display: flex; align-items: center; gap: 1vw">
<img
v-smart-img
:src="imageUrl('debris')"
:src="webpUrl('debris')"
alt=""
style="display: block; width: 15vw; object-fit: cover"
/>
@ -120,7 +120,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -158,7 +158,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {

8
src/views/Ranking/Couple/GamePlay/components/exchange.vue
View File

@ -4,7 +4,7 @@
style="min-height: 35.3vw"
v-for="item in goodsList"
:key="item.id"
:imgUrl="imageUrl('goodsItem')"
:imgUrl="webpUrl('goodsItem')"
:contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
>
<div
@ -54,7 +54,7 @@
</div>
<img
v-smart-img
:src="imageUrl('debris')"
:src="webpUrl('debris')"
alt=""
style="display: block; width: 1em; object-fit: cover"
/>
@ -68,7 +68,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -101,7 +101,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {

16
src/views/Ranking/Couple/GamePlay/components/lottery.vue
View File

@ -2,13 +2,13 @@
<div>
<itemCenter
style="min-height: 181.6vw"
:imgUrl="imageUrl('TaurusLotteryBg')"
:imgUrl="webpUrl('TaurusLotteryBg')"
:contentStyle="`flex-direction: column;justify-content: flex-start;gap: 5vw`"
>
<!-- 中奖历史按钮 -->
<img
v-smart-img
:src="imageUrl('historyBt')"
:src="webpUrl('historyBt')"
alt=""
style="width: 8vw; position: absolute; top: 40vw; right: 4vw"
@click="getDrawRecords"
@ -56,7 +56,7 @@
<img
v-show="activeIndex === index"
v-smart-img
:src="imageUrl('prizeActiveFrame')"
:src="webpUrl('prizeActiveFrame')"
alt=""
style="
display: block;
@ -82,7 +82,7 @@
>
<img
v-smart-img
:src="imageUrl('crystal')"
:src="webpUrl('crystal')"
alt=""
style="display: block; width: 8vw; object-fit: cover"
/>
@ -110,7 +110,7 @@
>
<img
v-smart-img
:src="imageUrl('crystal')"
:src="webpUrl('crystal')"
alt=""
style="display: block; width: 3em; object-fit: cover"
/>
@ -161,7 +161,7 @@
>
<img
v-smart-img
:src="imageUrl('crystal')"
:src="webpUrl('crystal')"
alt=""
style="display: block; width: 3em; object-fit: cover"
/>
@ -206,7 +206,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -242,7 +242,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {

8
src/views/Ranking/Couple/GamePlay/components/signIn.vue
View File

@ -3,7 +3,7 @@
<!-- 规则&倒计时 -->
<itemCenter
style="min-height: 126.7vw"
:imgUrl="imageUrl(getImgName('checkInRule'))"
:imgUrl="webpUrl(getImgName('checkInRule'))"
:contentStyle="`inset: 8vw 28vw 105vw;`"
>
<div class="timeBox">
@ -52,7 +52,7 @@
v-smart-img
v-for="(arrow, arrowIndex) in arrows"
:key="'arrow-' + arrowIndex"
:src="imageUrl('arrowRight')"
:src="webpUrl('arrowRight')"
:style="arrow.style"
alt="arrow"
style="position: absolute; width: 8vw; object-fit: contain"
@ -67,7 +67,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -104,7 +104,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {

12
src/views/Ranking/Couple/GamePlay/components/signInItem.vue
View File

@ -2,7 +2,7 @@
<div style="width: 100%; position: relative">
<itemCenter
style="min-height: 50.6vw"
:imgUrl="imageUrl('rewardBg')"
:imgUrl="webpUrl('rewardBg')"
:flip="true"
:contentStyle="`inset: 4vw 6vw 10vw;`"
:class="{
@ -17,7 +17,7 @@
<itemCenter
style="min-height: 19.3vw"
v-for="(goods, index) in dailyConfigs"
:imgUrl="imageUrl('rewardGoodsBg')"
:imgUrl="webpUrl('rewardGoodsBg')"
:flip="true"
:contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
:style="getGridPosition(index)"
@ -104,7 +104,7 @@
>
<itemCenter
style="width: 80%; min-height: 28vw"
:imgUrl="imageUrl('makeUpBtBg')"
:imgUrl="webpUrl('makeUpBtBg')"
:contentStyle="`inset: 0;flex-direction: column;`"
>
<div style="color: #ff79a1; font-weight: 600">{{ t('sign_in_make_up') }}</div>
@ -128,7 +128,7 @@ import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { useCoupleStore } from '@/stores/couple'
import { showError, showSuccess } from '@/utils/toast.js'
import { storeToRefs } from 'pinia'
@ -168,7 +168,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
@ -198,7 +198,7 @@ const dailyConfigs = computed(() => {
...configs,
{
type: 'TICKET',
cover: imageUrl('crystal'),
cover: webpUrl('crystal'),
content: props.rewards.lotteryTicketCount,
},
]

42
src/views/Ranking/Couple/Ranking.vue
View File

@ -16,14 +16,14 @@
<img
v-show="weeklyShow"
v-smart-img
:src="imageUrl(getImgName('rankingWeeklyBtActive'))"
:src="webpUrl(getImgName('rankingWeeklyBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!weeklyShow"
v-smart-img
:src="imageUrl(getImgName('rankingWeeklyBt'))"
:src="webpUrl(getImgName('rankingWeeklyBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -33,14 +33,14 @@
<img
v-show="seasonShow"
v-smart-img
:src="imageUrl(getImgName('rankingSeasonBtActive'))"
:src="webpUrl(getImgName('rankingSeasonBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!seasonShow"
v-smart-img
:src="imageUrl(getImgName('rankingSeasonBt'))"
:src="webpUrl(getImgName('rankingSeasonBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -49,7 +49,7 @@
<itemCenter
style="min-height: 31.33vw"
:imgUrl="imageUrl(`timeBg`)"
:imgUrl="webpUrl(`timeBg`)"
:contentStyle="`inset:0 0 4vw;`"
>
<div v-show="weeklyShow" style="display: flex; justify-content: center; align-items: center">
@ -77,16 +77,16 @@
</itemCenter>
<div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
<img v-smart-img :src="imageUrl('helpBt')" alt="" class="helpBt" @click="helpShow = true" />
<img v-smart-img :src="webpUrl('helpBt')" alt="" class="helpBt" @click="helpShow = true" />
<itemCenter
style="width: 9vw"
class="rankingBg"
:imgUrl="imageUrl(`top1RankingBg`)"
:imgUrl="webpUrl(`top1RankingBg`)"
:flip="true"
:contentStyle="``"
>
<img v-smart-img :src="imageUrl('num1')" alt="" style="width: 3vw; display: block" />
<img v-smart-img :src="webpUrl('num1')" alt="" style="width: 3vw; display: block" />
</itemCenter>
<div style="margin-top: 2vw; display: flex; flex-direction: column; gap: 2vw">
@ -102,13 +102,13 @@
<itemCenter
style="min-height: 25.92vw"
v-for="item in showRanking"
:imgUrl="imageUrl(`rankingItemBg`)"
:imgUrl="webpUrl(`rankingItemBg`)"
:flip="true"
:contentStyle="`padding: 0 5%;justify-content: flex-start;`"
>
<itemCenter
style="width: 9vw"
:imgUrl="imageUrl(`top1RankingBg`)"
:imgUrl="webpUrl(`top1RankingBg`)"
:flip="true"
:contentStyle="``"
>
@ -166,7 +166,7 @@
>
<img
v-smart-img
:src="imageUrl(`rankingCoupleSign`)"
:src="webpUrl(`rankingCoupleSign`)"
alt=""
style="width: 15vw; display: block; object-fit: cover"
/>
@ -225,7 +225,7 @@
<div style="width: auto; min-width: 0; display: flex; align-items: center">
<img
v-smart-img
:src="imageUrl('distribution')"
:src="webpUrl('distribution')"
alt=""
style="width: 10vw; display: block; object-fit: cover"
/>
@ -241,7 +241,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -252,10 +252,7 @@ import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/im
import { useCoupleStore } from '@/stores/couple'
import { storeToRefs } from 'pinia'
import {
apiGetCpRanking,
apiGetCpRewardPool,
} from '@/api/couple.js'
import { apiGetCpRanking, apiGetCpRewardPool } from '@/api/couple.js'
import TopUser from './components/topUser.vue'
import itemCenter from '@/components/itemCenter.vue'
import maskLayer from '@/components/MaskLayer.vue'
@ -272,7 +269,7 @@ const currentLangType = computed(() => {
})
const isLoading = ref(true) // 预加载状态
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -550,7 +547,7 @@ const getRankDigits = (rank) => {
// 根据名次数字获取对应的数字图片
const getDigitImageUrl = (digit) => {
if (/^[0-9]$/.test(digit)) {
return imageUrl(`num${digit}`)
return webpUrl(`num${digit}`)
}
return ''
}
@ -605,10 +602,7 @@ const apiGetTop3Rewards = async () => {
}
const initData = async () => {
await Promise.all([
apiGetRanking(),
apiGetTop3Rewards(),
])
await Promise.all([apiGetRanking(), apiGetTop3Rewards()])
}
const preloadCriticalImages = async () => {
@ -739,5 +733,3 @@ onUnmounted(() => {
right: 3vw;
}
</style>

17
src/views/Ranking/Couple/components/Barrage.vue
View File

@ -33,12 +33,7 @@
>
<div
class="avatar-pair"
style="
position: relative;
display: flex;
align-items: center;
gap: 2vw;
"
style="position: relative; display: flex; align-items: center; gap: 2vw"
>
<div
v-if="!liteAnimations"
@ -53,7 +48,7 @@
>
<img
v-smart-img
:src="imageUrl('TaurusCoupleSign')"
:src="webpUrl('TaurusCoupleSign')"
alt=""
class="couple-sign-img"
style="width: 5vw; display: block; object-fit: cover"
@ -103,13 +98,13 @@
<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import { shouldUseLiteAnimations } from '@/utils/performanceMode.js'
const { locale } = useI18n()
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
const props = defineProps({
barrageList: {
@ -135,7 +130,9 @@ const isBarragePaused = ref(false)
const liteAnimations = shouldUseLiteAnimations()
const visibleTracks = computed(() => tracks.value)
// 低端机保留一定并发空间，避免长弹幕还没滑完就因为上限过低被后续弹幕挤掉。
const effectiveMaxItems = computed(() => (liteAnimations ? Math.min(props.maxItems, 2) : props.maxItems))
const effectiveMaxItems = computed(() =>
liteAnimations ? Math.min(props.maxItems, 2) : props.maxItems,
)
const effectiveLoopInterval = computed(() =>
liteAnimations ? Math.max(props.loopInterval, 6000) : props.loopInterval,
)

20
src/views/Ranking/Couple/components/topUser.vue
View File

@ -149,13 +149,13 @@
<itemCenter
style="width: 9vw"
class="rankingBg"
:imgUrl="imageUrl(`top${ranking}RankingBg`)"
:imgUrl="webpUrl(`top${ranking}RankingBg`)"
:flip="true"
:contentStyle="``"
>
<img
v-smart-img
:src="imageUrl(`num${ranking}`)"
:src="webpUrl(`num${ranking}`)"
alt=""
style="width: 3vw; display: block"
/>
@ -180,7 +180,7 @@
<!-- 内容 -->
<itemCenter
style="width: 100%; z-index: 1"
:imgUrl="imageUrl(`top${ranking}Frame`)"
:imgUrl="webpUrl(`top${ranking}Frame`)"
:contentStyle="`z-index: -1;`"
>
<div
@ -249,7 +249,7 @@
<div style="width: auto; min-width: 0; display: flex; align-items: center">
<img
v-smart-img
:src="imageUrl('distribution')"
:src="webpUrl('distribution')"
alt=""
style="width: 10vw; display: block; object-fit: cover"
/>
@ -296,7 +296,7 @@ import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -323,7 +323,7 @@ const currentLangType = computed(() => {
})
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
@ -361,13 +361,13 @@ const rewardList = computed(() => {
const BorderImgUrl = computed(() => {
switch (props.ranking) {
case '1':
return imageUrl('top1')
return webpUrl('top1')
case '2':
return imageUrl('top2-3')
return webpUrl('top2-3')
case '3':
return imageUrl('top2-3')
return webpUrl('top2-3')
default:
return imageUrl('top2-3')
return webpUrl('top2-3')
}
})

178
src/views/Ranking/Couple/index.vue
View File

@ -14,11 +14,11 @@
<BackgroundLayer
:useCanvas="true"
:backgroundImages="[
imageUrl('TaurusBg1New'),
imageUrl('TaurusBg2'),
imageUrl('TaurusBg3'),
imageUrl('TaurusBg4'),
imageUrl('TaurusBg5'),
webpUrl('TaurusBg1New'),
webpUrl('TaurusBg2'),
webpUrl('TaurusBg3'),
webpUrl('TaurusBg4'),
webpUrl('TaurusBg5'),
]"
/>
@ -36,7 +36,7 @@
>
<img
v-smart-img
:src="imageUrl(getImgName('letterBg'))"
:src="webpUrl(getImgName('letterBg'))"
alt=""
style="width: 90%"
@click="myCoupleShow = true"
@ -46,7 +46,7 @@
<!-- 历史榜首 -->
<itemCenter
style="min-height: 104.83vw"
:imgUrl="imageUrl(getImgName('historyTopBg'))"
:imgUrl="webpUrl(getImgName('historyTopBg'))"
:contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
>
<div
@ -205,14 +205,14 @@
<img
v-show="RankingShow"
v-smart-img
:src="imageUrl(getImgName('rankingBtActive'))"
:src="webpUrl(getImgName('rankingBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!RankingShow"
v-smart-img
:src="imageUrl(getImgName('rankingBt'))"
:src="webpUrl(getImgName('rankingBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -223,14 +223,14 @@
<img
v-show="GamePlayShow"
v-smart-img
:src="imageUrl(getImgName('gamePlayBtActive'))"
:src="webpUrl(getImgName('gamePlayBtActive'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
<img
v-show="!GamePlayShow"
v-smart-img
:src="imageUrl(getImgName('gamePlayBt'))"
:src="webpUrl(getImgName('gamePlayBt'))"
alt=""
style="width: 100%; display: block; object-fit: cover"
/>
@ -254,7 +254,7 @@
style="width: 100%"
:flip="true"
v-if="myRanking?.cpUserId"
:imgUrl="imageUrl('myRankingBg')"
:imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 0 5%;justify-content: flex-start;`"
>
<!-- 排名 -->
@ -340,7 +340,7 @@
<div style="width: auto; min-width: 0; display: flex; align-items: center">
<img
v-smart-img
:src="imageUrl('distribution')"
:src="webpUrl('distribution')"
alt=""
style="width: 10vw; display: block; object-fit: cover"
/>
@ -432,7 +432,7 @@
@click="selectCouple(couple.cpUserProfile)"
>
<itemCenter
:imgUrl="imageUrl('coupleItem')"
:imgUrl="webpUrl('coupleItem')"
:flip="true"
:contentStyle="`justify-content: space-between;`"
>
@ -502,7 +502,7 @@
v-else
style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
>
<img :src="imageUrl('noCoupleSign')" alt="" style="width: 50%; display: block" />
<img :src="webpUrl('noCoupleSign')" alt="" style="width: 50%; display: block" />
<p style="color: rgba(0, 0, 0, 0.4); font-size: 1em; font-weight: 700">
{{ t('no_couples') }}
</p>
@ -695,7 +695,7 @@
<!-- 我的最新情书 -->
<itemCenter
v-if="lastLetterShow"
:imgUrl="imageUrl(getImgName('lastLetterBg'))"
:imgUrl="webpUrl(getImgName('lastLetterBg'))"
:contentStyle="`inset: 30vw 17vw 27vw;
flex-direction: column;
justify-content: flex-start;
@ -767,7 +767,7 @@
<!-- 抽奖结果 -->
<div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
<itemCenter
:imgUrl="imageUrl('resultBg')"
:imgUrl="webpUrl('resultBg')"
:contentStyle="`inset: 37vw 15vw 16vw;
flex-direction: column;
justify-content: space-between;
@ -795,7 +795,7 @@
<img
class="flipImg"
v-show="result.length > 1 && resultShowIndex > 0"
:src="imageUrl('resultBack')"
:src="webpUrl('resultBack')"
alt=""
style="display: block; width: 80%; object-fit: cover"
@click="resultShowIndex--"
@ -823,7 +823,7 @@
v-smart-img
class="flipImg"
v-show="result.length > 1 && resultShowIndex + 1 < result.length"
:src="imageUrl('resultNext')"
:src="webpUrl('resultNext')"
alt=""
style="display: block; width: 80%; object-fit: cover"
@click="resultShowIndex++"
@ -858,7 +858,7 @@
<!-- 中奖历史 -->
<div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
<itemCenter
:imgUrl="imageUrl(getImgName('recordBg'))"
:imgUrl="webpUrl(getImgName('recordBg'))"
:contentStyle="`padding: 28vw 12vw 25vw;`"
>
<div
@ -919,7 +919,7 @@
<!-- 领取历史(水晶&碎片) -->
<div v-show="receiveRecordShow" style="position: relative; width: 95%" @click.stop>
<itemCenter
:imgUrl="imageUrl('myPropsLogBg')"
:imgUrl="webpUrl('myPropsLogBg')"
:contentStyle="`padding: 28vw 12vw 25vw;`"
>
<div
@ -960,7 +960,7 @@
<div style="min-width: 0; display: flex; align-items: center; gap: 4px">
<img
v-if="record.itemType == 'cp_fragment'"
:src="imageUrl('debris')"
:src="webpUrl('debris')"
alt=""
style="
width: 10vw;
@ -972,7 +972,7 @@
/>
<img
v-else-if="record.itemType == 'lottery_ticket'"
:src="imageUrl('crystal')"
:src="webpUrl('crystal')"
alt=""
style="
width: 10vw;
@ -1137,12 +1137,12 @@
<!-- help弹窗 -->
<div v-show="helpShow" @click.stop>
<itemCenter
:imgUrl="imageUrl(getImgName('helpBg'))"
:imgUrl="webpUrl(getImgName('helpBg'))"
:contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
>
<img
v-smart-img
:src="imageUrl(getImgName('helpInfoNew'))"
:src="webpUrl(getImgName('helpInfoNew'))"
alt=""
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
/>
@ -1324,7 +1324,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { getUserId, setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
@ -1401,7 +1401,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
@ -1416,7 +1416,7 @@ const getRankDigits = (rank) => {
// 获取数字图片URL
const getDigitImageUrl = (digit) => {
if (/^[0-9]$/.test(digit)) {
return imageUrl(`num${digit}`) // 假设数字图片在相同目录下
return webpUrl(`num${digit}`) // 假设数字图片在相同目录下
}
return ''
}
@ -1467,84 +1467,84 @@ const twelveSigns = ref([
startMonthDay: '1.20',
endMonthDay: '2.18',
endYearOffset: 0,
bgUrl: imageUrl('AquariusCoupleFrame'),
bgUrl: webpUrl('AquariusCoupleFrame'),
}, // 水瓶座
{
name: 'Pisces',
startMonthDay: '2.19',
endMonthDay: '3.20',
endYearOffset: 0,
bgUrl: imageUrl('PiscesCoupleFrame'),
bgUrl: webpUrl('PiscesCoupleFrame'),
}, // 双鱼座
{
name: 'Aries',
startMonthDay: '3.21',
endMonthDay: '4.19',
endYearOffset: 0,
bgUrl: imageUrl('AriesCoupleFrame'),
bgUrl: webpUrl('AriesCoupleFrame'),
}, // 白羊座
{
name: 'Taurus',
startMonthDay: '4.20',
endMonthDay: '5.20',
endYearOffset: 0,
bgUrl: imageUrl('TaurusCoupleFrame'),
bgUrl: webpUrl('TaurusCoupleFrame'),
}, // 金牛座
{
name: 'Gemini',
startMonthDay: '5.21',
endMonthDay: '6.21',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 双子座
{
name: 'Cancer',
startMonthDay: '6.22',
endMonthDay: '7.22',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 巨蟹座
{
name: 'Leo',
startMonthDay: '7.23',
endMonthDay: '8.22',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 狮子座
{
name: 'Virgo',
startMonthDay: '8.23',
endMonthDay: '9.22',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 处女座
{
name: 'Libra',
startMonthDay: '9.23',
endMonthDay: '10.22',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 天秤座
{
name: 'Scorpio',
startMonthDay: '10.23',
endMonthDay: '11.21',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 天蝎座
{
name: 'Sagittarius',
startMonthDay: '11.22',
endMonthDay: '12.21',
endYearOffset: 0,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 射手座
{
name: 'Capricorn',
startMonthDay: '12.22',
endMonthDay: '1.19',
endYearOffset: 1,
bgUrl: imageUrl(''),
bgUrl: webpUrl(''),
}, // 摩羯座
]) // 十二星座
@ -2019,65 +2019,65 @@ const initData = async () => {
const preloadCriticalImages = async () => {
const criticalImages = [
// 背景
imageUrl('TaurusBg1New'),
imageUrl('TaurusBg2'),
imageUrl('TaurusBg3'),
imageUrl('TaurusBg4'),
imageUrl('TaurusBg5'),
webpUrl('TaurusBg1New'),
webpUrl('TaurusBg2'),
webpUrl('TaurusBg3'),
webpUrl('TaurusBg4'),
webpUrl('TaurusBg5'),
// 弹幕
imageUrl('TaurusCoupleSign'),
webpUrl('TaurusCoupleSign'),
// 情书
imageUrl(getImgName('letterBg')),
webpUrl(getImgName('letterBg')),
// 历史榜首
imageUrl(getImgName('historyTopBg')),
// imageUrl('topCoupleFrame'),
imageUrl('AquariusCoupleFrame'),
imageUrl('PiscesCoupleFrame'),
webpUrl(getImgName('historyTopBg')),
// webpUrl('topCoupleFrame'),
webpUrl('AquariusCoupleFrame'),
webpUrl('PiscesCoupleFrame'),
// 按钮
imageUrl(getImgName('rankingBtActive')),
imageUrl(getImgName('rankingBt')),
imageUrl(getImgName('gamePlayBtActive')),
imageUrl(getImgName('gamePlayBt')),
imageUrl(getImgName('rankingWeeklyBtActive')),
imageUrl(getImgName('rankingWeeklyBt')),
imageUrl(getImgName('rankingSeasonBtActive')),
imageUrl(getImgName('rankingSeasonBt')),
imageUrl(getImgName('gameLotteryBtActive')),
imageUrl(getImgName('gameLotteryBt')),
imageUrl(getImgName('gameSignInBtActive')),
imageUrl(getImgName('gameSignInBt')),
imageUrl(getImgName('gameExchangeBtActive')),
imageUrl(getImgName('gameExchangeBt')),
webpUrl(getImgName('rankingBtActive')),
webpUrl(getImgName('rankingBt')),
webpUrl(getImgName('gamePlayBtActive')),
webpUrl(getImgName('gamePlayBt')),
webpUrl(getImgName('rankingWeeklyBtActive')),
webpUrl(getImgName('rankingWeeklyBt')),
webpUrl(getImgName('rankingSeasonBtActive')),
webpUrl(getImgName('rankingSeasonBt')),
webpUrl(getImgName('gameLotteryBtActive')),
webpUrl(getImgName('gameLotteryBt')),
webpUrl(getImgName('gameSignInBtActive')),
webpUrl(getImgName('gameSignInBt')),
webpUrl(getImgName('gameExchangeBtActive')),
webpUrl(getImgName('gameExchangeBt')),
// 排行榜
imageUrl(`timeBg`),
imageUrl('helpBt'),
imageUrl(`top1`),
imageUrl(`top2-3`),
imageUrl(`top2RankingBg`),
imageUrl(`top2Frame`),
imageUrl(`top3RankingBg`),
imageUrl(`top3Frame`),
imageUrl(`rankingCoupleSign`),
imageUrl(`rankingItemBg`),
imageUrl('distribution'),
imageUrl(`num0`),
imageUrl(`num1`),
imageUrl(`num2`),
imageUrl(`num3`),
imageUrl(`num4`),
imageUrl(`num5`),
imageUrl(`num6`),
imageUrl(`num7`),
imageUrl(`num8`),
imageUrl(`num9`),
imageUrl('myRankingBg'),
imageUrl('distribution'),
imageUrl(getImgName('lastLetterBg')),
webpUrl(`timeBg`),
webpUrl('helpBt'),
webpUrl(`top1`),
webpUrl(`top2-3`),
webpUrl(`top2RankingBg`),
webpUrl(`top2Frame`),
webpUrl(`top3RankingBg`),
webpUrl(`top3Frame`),
webpUrl(`rankingCoupleSign`),
webpUrl(`rankingItemBg`),
webpUrl('distribution'),
webpUrl(`num0`),
webpUrl(`num1`),
webpUrl(`num2`),
webpUrl(`num3`),
webpUrl(`num4`),
webpUrl(`num5`),
webpUrl(`num6`),
webpUrl(`num7`),
webpUrl(`num8`),
webpUrl(`num9`),
webpUrl('myRankingBg'),
webpUrl('distribution'),
webpUrl(getImgName('lastLetterBg')),
]
await preloadImages(criticalImages)

162
src/views/Ranking/GamesKing/index.vue
View File

@ -11,19 +11,19 @@
<!-- 新增的背景图层 -->
<img
v-smart-img
:src="imageUrl('bg2')"
:src="webpUrl('bg2')"
alt=""
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
/>
<div class="bg">
<itemCenter
:imgUrl="imageUrl('bg')"
:imgUrl="webpUrl('bg')"
style="min-height: 100vw; position: absolute; z-index: 0"
>
<img
v-smart-img
:src="webpUrl('bg')"
:src="webpUrl('bgVideo')"
alt=""
style="min-height: 100vw; display: block; width: 100%; object-fit: cover"
/>
@ -36,7 +36,7 @@
<div style="display: flex; justify-content: center; margin-top: 11vw">
<TopUser
ranking="1"
:BorderImgUrl="imageUrl('top1')"
:BorderImgUrl="webpUrl('top1')"
:avatarUrl="RankingHasTop10[0].avatar"
:name="RankingHasTop10[0].nickname"
:distributionValue="RankingHasTop10[0].quantity || ''"
@ -50,7 +50,7 @@
<!-- 帮助按钮 -->
<img
v-smart-img
:src="imageUrl('helpBt')"
:src="webpUrl('helpBt')"
alt=""
style="display: block; position: relative; width: 8vw; margin-right: 4vw"
@click="openPopup('help')"
@ -60,25 +60,25 @@
<!-- 倒计时 -->
<div class="timeBox">
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap"></div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')">
<itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Second }}</div>
</itemCenter>
</div>
@ -91,7 +91,7 @@
<div style="width: 30%; position: relative" @click="changeModule('history')">
<img
v-smart-img
:src="imageUrl(getImgName('historyBtActive'))"
:src="webpUrl(getImgName('historyBtActive'))"
alt=""
:class="{
'grayscale-container': !historyShow,
@ -104,7 +104,7 @@
<div style="width: 30%; position: relative" @click="changeModule('ranking')">
<img
v-smart-img
:src="imageUrl(getImgName('rankingBtActive'))"
:src="webpUrl(getImgName('rankingBtActive'))"
alt=""
:class="{
'grayscale-container': !rankingShow,
@ -117,7 +117,7 @@
<div style="width: 30%; position: relative" @click="changeModule('rewards')">
<img
v-smart-img
:src="imageUrl(getImgName('rewardBtActive'))"
:src="webpUrl(getImgName('rewardBtActive'))"
alt=""
:class="{
'grayscale-container': !rewardsShow,
@ -138,7 +138,7 @@
<!-- 历史榜首 -->
<itemCenter
style="min-height: 110.3vw"
:imgUrl="imageUrl(getImgName('historyTopBg'))"
:imgUrl="webpUrl(getImgName('historyTopBg'))"
:contentStyle="`inset: 25vw 5vw 4vw;
flex-direction: column;
justify-content: center;
@ -169,7 +169,7 @@
<img
v-smart-img
v-show="historyTopList.length > 1 && historyTopIndex > 0"
:src="imageUrl('topBackBt')"
:src="webpUrl('topBackBt')"
alt=""
class="flipImg"
style="display: block; width: 100%; object-fit: cover"
@ -179,7 +179,7 @@
<!-- 榜首 -->
<TopUser
:BorderImgUrl="imageUrl('historyTopFrame')"
:BorderImgUrl="webpUrl('historyTopFrame')"
:avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
:name="historyTopList[historyTopIndex].topUser.nickname"
:distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
@ -203,7 +203,7 @@
v-show="
historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
"
:src="imageUrl('topNextBt')"
:src="webpUrl('topNextBt')"
alt=""
class="flipImg"
style="display: block; width: 100%; object-fit: cover"
@ -233,7 +233,7 @@
<!-- 特殊奖励 -->
<img
v-smart-img
:src="imageUrl(getImgName('specialRewards_20260518'))"
:src="webpUrl(getImgName('specialRewards_20260518'))"
alt=""
style="display: block; width: 100%; object-fit: cover"
/>
@ -247,7 +247,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('week')">
<itemCenter
style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`"
:class="{
'grayscale-container': !weekShow,
@ -261,7 +261,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('daily')">
<itemCenter
style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`"
:class="{
'grayscale-container': !dailyShow,
@ -278,7 +278,7 @@
<!-- 第2-4名 -->
<itemCenter
style="min-height: 132.2vw"
:imgUrl="imageUrl(getImgName('RankingMain'))"
:imgUrl="webpUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
>
<div>
@ -286,7 +286,7 @@
<div style="display: flex; justify-content: center">
<TopUser
ranking="2"
:BorderImgUrl="imageUrl('top2')"
:BorderImgUrl="webpUrl('top2')"
:avatarUrl="RankingHasTop10[1].avatar"
:name="RankingHasTop10[1].nickname"
:distributionValue="RankingHasTop10[1].quantity || ''"
@ -298,7 +298,7 @@
<div style="display: flex; justify-content: space-between; margin-top: -5vw">
<TopUser
ranking="3"
:BorderImgUrl="imageUrl('top3')"
:BorderImgUrl="webpUrl('top3')"
:avatarUrl="RankingHasTop10[2].avatar"
:name="RankingHasTop10[2].nickname"
:distributionValue="RankingHasTop10[2].quantity || ''"
@ -307,7 +307,7 @@
/>
<TopUser
ranking="4"
:BorderImgUrl="imageUrl('top4')"
:BorderImgUrl="webpUrl('top4')"
:avatarUrl="RankingHasTop10[3].avatar"
:name="RankingHasTop10[3].nickname"
:distributionValue="RankingHasTop10[3].quantity || ''"
@ -321,7 +321,7 @@
<!-- 第5-10名 -->
<itemCenter
style="min-height: 90.13vw"
:imgUrl="imageUrl('RankingCenterBg')"
:imgUrl="webpUrl('RankingCenterBg')"
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
>
<!-- 5-7 -->
@ -330,7 +330,7 @@
v-for="topUser in RankingHasTop10.slice(4, 7)"
:key="topUser.userId"
ranking="5-7"
:BorderImgUrl="imageUrl('top5_7')"
:BorderImgUrl="webpUrl('top5_7')"
:avatarUrl="topUser.avatar"
:name="topUser.nickname"
:distributionValue="topUser.quantity || ''"
@ -345,7 +345,7 @@
v-for="topUser in RankingHasTop10.slice(7, 10)"
:key="topUser.userId"
ranking="8-10"
:BorderImgUrl="imageUrl('top8_10')"
:BorderImgUrl="webpUrl('top8_10')"
:avatarUrl="topUser.avatar"
:name="topUser.nickname"
:distributionValue="topUser.quantity || ''"
@ -361,7 +361,7 @@
style="min-height: 26.4vw"
v-for="(listItem, index) in showRanking"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
:imgUrl="webpUrl('RankingItem')"
:contentStyle="`padding: 0 10%`"
:lazy="true"
:immediate="index < 2"
@ -455,7 +455,7 @@
<!-- 底框 -->
<img
v-smart-img
:src="imageUrl('RankingBottomBorder')"
:src="webpUrl('RankingBottomBorder')"
alt=""
width="100%"
style="display: block; margin-top: -6vw; position: relative; z-index: 2"
@ -469,13 +469,13 @@
<!-- 头部 -->
<itemCenter
style="min-height: 132.2vw"
:imgUrl="imageUrl(getImgName('RankingMain'))"
:imgUrl="webpUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 0 0;flex-direction: column;`"
>
<!-- 前3名 -->
<itemCenter
style="z-index: 0"
:imgUrl="imageUrl('top1-3FrameDaily')"
:imgUrl="webpUrl('top1-3FrameDaily')"
:contentStyle="`flex-direction: column;padding: 17vw 9.5vw 7vw 10.2vw;justify-content: space-between;`"
>
<!-- 第1名 -->
@ -520,7 +520,7 @@
style="min-height: 26.4vw"
v-for="(listItem, index) in showRankingDaily"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
:imgUrl="webpUrl('RankingItem')"
:contentStyle="`padding: 0 10%`"
:lazy="true"
:immediate="index < 2"
@ -614,7 +614,7 @@
<!-- 底框 -->
<img
v-smart-img
:src="imageUrl('RankingBottomBorder')"
:src="webpUrl('RankingBottomBorder')"
alt=""
width="100%"
style="display: block; margin-top: -6vw; position: relative; z-index: 2"
@ -634,7 +634,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('week')">
<itemCenter
style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`"
:class="{
'grayscale-container': !weekShow,
@ -648,7 +648,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('daily')">
<itemCenter
style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')"
:imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`"
:class="{
'grayscale-container': !dailyShow,
@ -813,7 +813,7 @@
<img
v-show="dailyShow"
v-for="(value, index) in 3"
:src="imageUrl(`top${index + 1}RewardDaily`)"
:src="webpUrl(`top${index + 1}RewardDaily`)"
alt=""
style="width: 100%; margin: 4px 0 10px"
/>
@ -827,7 +827,7 @@
<itemCenter
v-if="rankingShow"
style="min-height: 24.33vw; position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('myRankingBg')"
:imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 0 8%`"
>
<!-- 基本信息 -->
@ -918,12 +918,12 @@
<div v-show="helpShow" @click.stop>
<itemCenter
style="min-height: 156.33vw"
:imgUrl="imageUrl(getImgName('helpBg'))"
:imgUrl="webpUrl(getImgName('helpBg'))"
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
>
<img
v-smart-img
:src="imageUrl(getImgName('helpInfo'))"
:src="webpUrl(getImgName('helpInfo'))"
alt=""
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
/>
@ -934,7 +934,7 @@
<div v-show="dailyPopUpShow" @click.stop>
<itemCenter
style="min-height: 147.2vw"
:imgUrl="imageUrl(getImgName('dailyPopUpNew'))"
:imgUrl="webpUrl(getImgName('dailyPopUpNew'))"
:contentStyle="`z-index: 0;`"
>
<!-- 关闭按钮 -->
@ -958,7 +958,7 @@
>
<img
v-smart-img
:src="imageUrl('closeBt')"
:src="webpUrl('closeBt')"
alt=""
style="display: block; width: 100%; pointer-events: none"
/>
@ -1009,8 +1009,8 @@ const currentLangType = computed(() => {
})
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/GamesKing/', filename)
const imageUrl = (filename) => getPngUrl('Ranking/GamesKingWebp/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/GamesKingWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
@ -1133,10 +1133,10 @@ const changeRanking = (type) => {
}
const topImg = ref([
imageUrl('top1RewardBg_20260515'),
imageUrl('top2_4RewardBg'),
imageUrl('top5_7RewardBg'),
imageUrl('top8_10RewardBg'),
webpUrl('top1RewardBg_20260515'),
webpUrl('top2_4RewardBg'),
webpUrl('top5_7RewardBg'),
webpUrl('top8_10RewardBg'),
]) // top奖励背景
// 处理周榜小于10人时的情况
@ -1308,36 +1308,36 @@ const initData = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('bg2'),
imageUrl('closeBt'),
imageUrl(getImgName('dailyPopUpNew')),
imageUrl('helpBt'),
imageUrl(getImgName('helpInfo')),
imageUrl(getImgName('historyBtActive')),
imageUrl('myRankingBg'),
imageUrl(getImgName('rankingBtActive')),
imageUrl(getImgName('rewardBtActive')),
webpUrl('bg'),
webpUrl('bg2'),
webpUrl('closeBt'),
webpUrl(getImgName('dailyPopUpNew')),
webpUrl('helpBt'),
webpUrl(getImgName('helpInfo')),
webpUrl(getImgName('historyBtActive')),
webpUrl('myRankingBg'),
webpUrl(getImgName('rankingBtActive')),
webpUrl(getImgName('rewardBtActive')),
imageUrl('RankingBottomBorder'),
imageUrl('RankingCenterBg'),
imageUrl('RankingItem'),
imageUrl(getImgName('RankingMain')),
webpUrl('RankingBottomBorder'),
webpUrl('RankingCenterBg'),
webpUrl('RankingItem'),
webpUrl(getImgName('RankingMain')),
imageUrl('BtBg'),
imageUrl('top1RewardDaily'),
imageUrl('top2RewardDaily'),
imageUrl('top3RewardDaily'),
imageUrl('timeBg'),
imageUrl('topBackBt'),
imageUrl('topNextBt'),
imageUrl('top1'),
imageUrl('top2'),
imageUrl('top3'),
imageUrl('top4'),
imageUrl('top5_7'),
imageUrl('top8_10'),
imageUrl('top1-3FrameDaily'),
webpUrl('BtBg'),
webpUrl('top1RewardDaily'),
webpUrl('top2RewardDaily'),
webpUrl('top3RewardDaily'),
webpUrl('timeBg'),
webpUrl('topBackBt'),
webpUrl('topNextBt'),
webpUrl('top1'),
webpUrl('top2'),
webpUrl('top3'),
webpUrl('top4'),
webpUrl('top5_7'),
webpUrl('top8_10'),
webpUrl('top1-3FrameDaily'),
]
await preloadImages(criticalImages)
@ -1359,13 +1359,13 @@ const completePreloading = async () => {
// 预加载其他图片
const preloadOtherImages = async () => {
const criticalImages = [
imageUrl(getImgName('historyTopBg')),
imageUrl('historyTopFrame'),
imageUrl(getImgName('specialRewardsNew')),
imageUrl('top1RewardBg_20260515'),
imageUrl('top2_4RewardBg'),
imageUrl('top5_7RewardBg'),
imageUrl('top8_10RewardBg'),
webpUrl(getImgName('historyTopBg')),
webpUrl('historyTopFrame'),
webpUrl(getImgName('specialRewards_20260518')),
webpUrl('top1RewardBg_20260515'),
webpUrl('top2_4RewardBg'),
webpUrl('top5_7RewardBg'),
webpUrl('top8_10RewardBg'),
]
await preloadImagesIdle(criticalImages)

116
src/views/Ranking/KingAndQueen/TopList.vue
View File

@ -9,7 +9,7 @@
<!-- 主要内容 -->
<div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<BackgroundLayer :useCanvas="true" :backgroundImages="[webpUrl('bg')]" />
<div class="bg">
<!-- 状态栏占位区域（仅在APP中显示） -->
@ -18,7 +18,7 @@
<!-- 帮助按钮 -->
<img
v-smart-img
:src="imageUrl('help')"
:src="webpUrl('help')"
alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@click="helpInfoShow = true"
@ -27,7 +27,7 @@
<!-- history按钮 -->
<img
v-smart-img
:src="imageUrl('history')"
:src="webpUrl('history')"
alt=""
style="min-height: 17.22vw; width: 20%; margin-top: 20px"
@click="historyShow = true"
@ -38,7 +38,7 @@
<!-- 主标题 -->
<img
v-smart-img
:src="imageUrl('listTitle')"
:src="webpUrl('listTitle')"
alt=""
style="min-height: 11.55vw; width: 90%"
/>
@ -120,12 +120,12 @@
<!-- 刷新倒计时 -->
<div style="min-height: 9vw; display: flex; justify-content: center; margin-top: 20px">
<!-- 天数 -->
<itemCenter :imgUrl="imageUrl('dayBg')" style="width: 12vw; margin-right: 10px">
<itemCenter :imgUrl="webpUrl('dayBg')" style="width: 12vw; margin-right: 10px">
<div class="time">{{ Days }}D</div>
</itemCenter>
<!-- 当天时间倒计时 -->
<itemCenter :imgUrl="imageUrl('timeBg')" style="width: 28.5%">
<itemCenter :imgUrl="webpUrl('timeBg')" style="width: 28.5%">
<div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
</itemCenter>
</div>
@ -134,7 +134,7 @@
<div style="min-height: 17.46vw; display: flex; justify-content: flex-end; margin-top: -8%">
<img
v-smart-img
:src="imageUrl('rewards')"
:src="webpUrl('rewards')"
alt=""
style="width: 20%"
@click="rewardsShow = true"
@ -151,14 +151,14 @@
left: -4vw;
"
>
<itemCenter style="min-height: 74.91vw" :imgUrl="imageUrl('eventGifts')">
<itemCenter style="min-height: 74.91vw" :imgUrl="webpUrl('eventGifts')">
<div style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div
v-for="(gift, index) in gifts"
:key="index"
style="width: 30%; display: flex; flex-direction: column"
>
<itemCenter style="min-height: 25.91vw" :imgUrl="imageUrl('gift')">
<itemCenter style="min-height: 25.91vw" :imgUrl="webpUrl('gift')">
<img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 2px">
@ -185,10 +185,10 @@
v-show="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around"
>
<img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
<img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
<img
v-smart-img
:src="imageUrl('queenBt')"
:src="webpUrl('queenBt')"
alt=""
style="width: 40%"
@click="visibleKingList = false"
@ -201,12 +201,12 @@
>
<img
v-smart-img
:src="imageUrl('kingBt')"
:src="webpUrl('kingBt')"
alt=""
style="width: 40%"
@click="visibleKingList = true"
/>
<img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
<img v-smart-img :src="webpUrl('queenBtActive')" alt="" style="width: 40%" />
</div>
</div>
@ -214,7 +214,7 @@
<div style="width: 100%; width: 108vw; position: relative; left: -4vw">
<borderImg title="Ranking">
<itemCenter
:imgUrl="imageUrl('border-item-user')"
:imgUrl="webpUrl('border-item-user')"
style="min-height: 27.66vw; margin: -2px 0"
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
v-for="(listItem, index) in topList"
@ -352,7 +352,7 @@
>
<img
v-smart-img
:src="imageUrl(getImgName('helpInfo'))"
:src="webpUrl(getImgName('helpInfo'))"
alt=""
style="width: 108vw; position: relative; left: -4vw; display: block"
/>
@ -369,7 +369,7 @@
margin: -10px 0;
padding: 10px 10%;
"
:style="{ backgroundImage: toCssBackgroundImage(imageUrl('border-item')) }"
:style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
>
<!-- 国王皇后榜首 -->
<div
@ -466,7 +466,7 @@
>
<img
v-smart-img
:src="imageUrl('timeBack')"
:src="webpUrl('timeBack')"
alt=""
width="18px"
height="18px"
@ -492,7 +492,7 @@
</div>
<img
v-smart-img
:src="imageUrl('timeNext')"
:src="webpUrl('timeNext')"
alt=""
width="18px"
height="18px"
@ -514,7 +514,7 @@
<!-- 取消按钮 -->
<img
v-smart-img
:src="imageUrl('cancel')"
:src="webpUrl('cancel')"
alt=""
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
@click="closedPopup"
@ -528,7 +528,7 @@
margin: -20px 0;
padding: 20px 10%;
"
:style="{ backgroundImage: toCssBackgroundImage(imageUrl('border-item')) }"
:style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
>
<!-- 奖励榜切换按钮 -->
<div style="width: 100%; min-height: 18.54vw">
@ -536,10 +536,10 @@
v-show="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around"
>
<img v-smart-img :src="imageUrl('kingBtActive')" alt="" style="width: 40%" />
<img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
<img
v-smart-img
:src="imageUrl('queenBt')"
:src="webpUrl('queenBt')"
alt=""
style="width: 40%"
@click="visibleKingRewards = false"
@ -551,12 +551,12 @@
>
<img
v-smart-img
:src="imageUrl('kingBt')"
:src="webpUrl('kingBt')"
alt=""
style="width: 40%"
@click="visibleKingRewards = true"
/>
<img v-smart-img :src="imageUrl('queenBtActive')" alt="" style="width: 40%" />
<img v-smart-img :src="webpUrl('queenBtActive')" alt="" style="width: 40%" />
</div>
</div>
@ -586,7 +586,7 @@
:key="rewardIndex"
style="width: 100%"
>
<itemCenter style="min-height: 27.07vw" :imgUrl="imageUrl('gift')">
<itemCenter style="min-height: 27.07vw" :imgUrl="webpUrl('gift')">
<img
v-smart-img
:src="reward.cover || ''"
@ -634,7 +634,7 @@
>
<img
v-smart-img
:src="imageUrl('myRankingBg')"
:src="webpUrl('myRankingBg')"
alt=""
style="width: calc(100% - 1px); display: block"
/>
@ -780,7 +780,7 @@ import { viewUserInfo } from '@/utils/appBridge.js'
import { useLangStore } from '@/stores/lang'
import { useThrottle } from '@/utils/useDebounce'
import { connectToApp } from '@/utils/appConnector.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
@ -808,7 +808,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true)
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/KingQueenWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -832,13 +832,13 @@ const showTopOne = computed(() => {
if (historyList.value[historyIndex.value]?.wealth)
topNew.push({
type: 'topKing',
Frame: imageUrl('kingFrame'),
Frame: webpUrl('kingFrame'),
userInfo: historyList.value[historyIndex.value].wealth || {},
})
if (historyList.value[historyIndex.value]?.charm) {
topNew.push({
type: 'topQueen',
Frame: imageUrl('queenFrame'),
Frame: webpUrl('queenFrame'),
userInfo: historyList.value[historyIndex.value].charm || {},
})
}
@ -880,12 +880,12 @@ const queenList = ref([]) // 女王榜
const listTop = ref([
{
type: 'topKing',
Frame: imageUrl('kingFrame'),
Frame: webpUrl('kingFrame'),
userInfo: {},
},
{
type: 'topQueen',
Frame: imageUrl('queenFrame'),
Frame: webpUrl('queenFrame'),
userInfo: {},
},
]) //本周的top1国王和女王
@ -898,7 +898,7 @@ const topList = computed(() => {
const showKingLoading = ref(true) //触底加载功能
const showQueenLoading = ref(true) //触底加载功能
const topImg = ref([imageUrl('top1'), imageUrl('top2'), imageUrl('top3')]) // top图片
const topImg = ref([webpUrl('top1'), webpUrl('top2'), webpUrl('top3')]) // top图片
const visibleKingRewards = ref(true) // 展示奖励榜标签
const kingRewards = ref([]) //国王奖励列表
@ -1114,31 +1114,31 @@ const updatePageData = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('border-item'),
imageUrl('border-item-user'),
imageUrl('help'),
imageUrl('history'),
imageUrl('listTitle'),
imageUrl('dayBg'),
imageUrl('timeBg'),
imageUrl('rewards'),
imageUrl('eventGifts'),
imageUrl('gift'),
imageUrl('kingBtActive'),
imageUrl('queenBt'),
imageUrl('kingBt'),
imageUrl('queenBtActive'),
imageUrl(getImgName('helpInfo')),
imageUrl('timeBack'),
imageUrl('timeNext'),
imageUrl('cancel'),
imageUrl('myRankingBg'),
imageUrl('kingFrame'),
imageUrl('queenFrame'),
imageUrl('top1'),
imageUrl('top2'),
imageUrl('top3'),
webpUrl('bg'),
webpUrl('border-item'),
webpUrl('border-item-user'),
webpUrl('help'),
webpUrl('history'),
webpUrl('listTitle'),
webpUrl('dayBg'),
webpUrl('timeBg'),
webpUrl('rewards'),
webpUrl('eventGifts'),
webpUrl('gift'),
webpUrl('kingBtActive'),
webpUrl('queenBt'),
webpUrl('kingBt'),
webpUrl('queenBtActive'),
webpUrl(getImgName('helpInfo')),
webpUrl('timeBack'),
webpUrl('timeNext'),
webpUrl('cancel'),
webpUrl('myRankingBg'),
webpUrl('kingFrame'),
webpUrl('queenFrame'),
webpUrl('top1'),
webpUrl('top2'),
webpUrl('top3'),
]
await preloadImages(criticalImages)

6
src/views/Ranking/KingAndQueen/components/borderImg.vue
View File

@ -43,11 +43,11 @@
</template>
<script setup>
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
// 获取OSS图片URL的函数
const borderTopUrl = getPngUrl('Ranking/KingQueen/', 'border-top')
const borderBottomUrl = getPngUrl('Ranking/KingQueen/', 'border-bottom')
const borderTopUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-top')
const borderBottomUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-bottom')
const props = defineProps({
title: {

30
src/views/Ranking/Overall/Ranking.vue
View File

@ -287,7 +287,7 @@ import { useI18n } from 'vue-i18n'
import { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages } from '@/utils/image/imagePreloader'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import { useThrottle } from '@/utils/useDebounce'
@ -298,7 +298,7 @@ import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue'
const imageUrl = (filename) => getPngUrl('Ranking/Overall/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/OverallWebp/', filename)
const RANKING_CONFIG = {
Wealth: {
@ -307,33 +307,33 @@ const RANKING_CONFIG = {
labelKey: 'ranking_wealth',
activeColor: '#60FF83',
backgroundColor: '#242A2A',
backgroundImage: imageUrl('bgWealth'),
backgroundImage: webpUrl('bgWealth'),
paramsType: 'GIFTS_SEND',
topBorders: [imageUrl('top1-wealth'), imageUrl('top2-wealth'), imageUrl('top3-wealth')],
rankingItemBg: imageUrl('RankingItem-wealth'),
myRankingBg: imageUrl('myRankingBg-wealth'),
topBorders: [webpUrl('top1-wealth'), webpUrl('top2-wealth'), webpUrl('top3-wealth')],
rankingItemBg: webpUrl('RankingItem-wealth'),
myRankingBg: webpUrl('myRankingBg-wealth'),
},
Room: {
timeBackground: 'linear-gradient(97deg, #211532 12.03%, #3C2163 100.37%)',
labelKey: 'ranking_room',
activeColor: '#AA60FF',
backgroundColor: '#2B2022',
backgroundImage: imageUrl('bgRoom'),
backgroundImage: webpUrl('bgRoom'),
paramsType: 'ROOM_GIFTS',
topBorders: [imageUrl('top1-room'), imageUrl('top2-room'), imageUrl('top3-room')],
rankingItemBg: imageUrl('RankingItem-room'),
myRankingBg: imageUrl('myRankingBg-room'),
topBorders: [webpUrl('top1-room'), webpUrl('top2-room'), webpUrl('top3-room')],
rankingItemBg: webpUrl('RankingItem-room'),
myRankingBg: webpUrl('myRankingBg-room'),
},
Charm: {
timeBackground: 'linear-gradient(97deg, #322215 12.03%, #633421 100.37%)',
labelKey: 'ranking_charm',
activeColor: '#FF9A60',
backgroundColor: '#3E1308',
backgroundImage: imageUrl('bgCharm'),
backgroundImage: webpUrl('bgCharm'),
paramsType: 'GIFTS_RECEIVED',
topBorders: [imageUrl('top1-charm'), imageUrl('top2-charm'), imageUrl('top3-charm')],
rankingItemBg: imageUrl('RankingItem-charm'),
myRankingBg: imageUrl('myRankingBg-charm'),
topBorders: [webpUrl('top1-charm'), webpUrl('top2-charm'), webpUrl('top3-charm')],
rankingItemBg: webpUrl('RankingItem-charm'),
myRankingBg: webpUrl('myRankingBg-charm'),
},
}
@ -390,7 +390,7 @@ const rankingTabs = Object.entries(RANKING_CONFIG).map(([value, config]) => ({
}))
const timeTabs = TIME_TABS
const tabSelectedBg = imageUrl('tabSelectedBg')
const tabSelectedBg = webpUrl('tabSelectedBg')
const currentRankingConfig = computed(() => {
return RANKING_CONFIG[rankingType.value]

137
src/views/Ranking/WeeklyStar/WeeklyStar.vue
View File

@ -9,7 +9,7 @@
<!-- 主要内容 -->
<div v-else style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative">
<!-- 页面背景 -->
<BackgroundLayer :useCanvas="true" :backgroundImages="[imageUrl('bg')]" />
<BackgroundLayer :useCanvas="true" :backgroundImages="[webpUrl('bg')]" />
<div style="width: 100vw; position: relative">
<!-- 状态栏占位区域 -->
@ -27,7 +27,7 @@
<!-- history按钮 -->
<img
v-smart-img
:src="imageUrl('history')"
:src="webpUrl('history')"
alt=""
style="min-height: 20.66vw; width: 20%; margin-top: 20px"
@click="historyShow = true"
@ -42,7 +42,7 @@
>
<img
v-smart-img
:src="imageUrl('gifts')"
:src="webpUrl('gifts')"
alt=""
style="width: 20%"
@click="giftsShow = true"
@ -52,25 +52,25 @@
<!-- 倒计时 -->
<div style="min-height: 20.37vw; display: flex; justify-content: center; margin-top: 0%">
<div style="width: 20%">
<itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('dayBg')">
<itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('dayBg')">
<div class="timeText">{{ Days }}D</div>
</itemCenter>
</div>
<div class="timeText timeGap" style="width: 6px"></div>
<div style="width: 20%">
<itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('hourAndMinBg')">
<itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('hourAndMinBg')">
<div class="timeText">{{ Hours }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('hourAndMinBg')">
<itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('hourAndMinBg')">
<div class="timeText">{{ Minutes }}</div>
</itemCenter>
</div>
<div class="timeText timeGap">:</div>
<div style="width: 20%">
<itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('secBg')">
<itemCenter style="min-height: 20.37vw" :imgUrl="webpUrl('secBg')">
<div class="timeText">{{ Second }}</div>
</itemCenter>
</div>
@ -86,17 +86,17 @@
"
>
<div style="width: 30%" @click="handleBt('Ranking')">
<itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<itemCenter :imgUrl="rankingShow ? webpUrl('btActive') : webpUrl('btNoActive')">
<div class="btTitle">Ranking</div>
</itemCenter>
</div>
<div style="width: 30%" @click="handleBt('Rewards')">
<itemCenter :imgUrl="rewardShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<itemCenter :imgUrl="rewardShow ? webpUrl('btActive') : webpUrl('btNoActive')">
<div class="btTitle">Rewards</div>
</itemCenter>
</div>
<div style="width: 30%" @click="handleBt('Exchange')">
<itemCenter :imgUrl="exchargeShow ? imageUrl('btActive') : imageUrl('btNoActive')">
<itemCenter :imgUrl="exchargeShow ? webpUrl('btActive') : webpUrl('btNoActive')">
<div class="btTitle">Exchange</div>
</itemCenter>
</div>
@ -114,7 +114,7 @@
<!-- 头部背景 -->
<img
v-smart-img
:src="imageUrl('RankingMain')"
:src="webpUrl('RankingMain')"
alt=""
width="100%"
style="min-height: 149.66vw; display: block"
@ -122,7 +122,7 @@
<!-- 用户项 -->
<img
v-smart-img
:src="imageUrl('RankingItem')"
:src="webpUrl('RankingItem')"
alt=""
width="100%"
style="min-height: 25.33vw; display: block; margin-top: -2px"
@ -132,7 +132,7 @@
<!-- 底框 -->
<img
v-smart-img
:src="imageUrl('RankingBottomBorder')"
:src="webpUrl('RankingBottomBorder')"
alt=""
width="100%"
style="min-height: 20.66vw; display: block; margin-top: -9%"
@ -148,7 +148,7 @@
<!-- 第一 -->
<div style="display: flex; justify-content: center">
<TopUser
:BorderImgUrl="imageUrl('topOne')"
:BorderImgUrl="webpUrl('topOne')"
:avatarUrl="RankingHasTop3[0].userAvatar"
:name="RankingHasTop3[0].userNickname"
:distributionValue="RankingHasTop3[0].quantity"
@ -174,7 +174,7 @@
>
<TopUser
:isTopOne="false"
:BorderImgUrl="imageUrl('topTwo')"
:BorderImgUrl="webpUrl('topTwo')"
:avatarUrl="RankingHasTop3[1].userAvatar"
:name="RankingHasTop3[1].userNickname"
:distributionValue="RankingHasTop3[1].quantity"
@ -188,7 +188,7 @@
>
<TopUser
:isTopOne="false"
:BorderImgUrl="imageUrl('topThree')"
:BorderImgUrl="webpUrl('topThree')"
:avatarUrl="RankingHasTop3[2].userAvatar"
:name="RankingHasTop3[2].userNickname"
:distributionValue="RankingHasTop3[2].quantity"
@ -203,7 +203,7 @@
v-for="listItem in showRanking"
style="min-height: 21.41vw; margin-top: 3.3vw; position: relative"
@click="viewUserInfo(listItem.userId)"
:imgUrl="imageUrl('itemUser')"
:imgUrl="webpUrl('itemUser')"
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
>
<!-- 基本信息 -->
@ -316,12 +316,7 @@
style="min-height: 158.66vw; position: relative; width: 100%"
>
<!-- top背景图 -->
<img
v-smart-img
:src="imageUrl('topBg')"
alt=""
style="width: 100%; display: block"
/>
<img v-smart-img :src="webpUrl('topBg')" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -355,7 +350,7 @@
style="display: flex; flex-direction: column; align-items: center"
>
<itemCenter
:imgUrl="imageUrl('giftItemBg')"
:imgUrl="webpUrl('giftItemBg')"
style="min-height: 39.6vw; width: 90%; margin-bottom: 3px"
>
<!-- gift图 -->
@ -367,7 +362,7 @@
/>
</itemCenter>
<itemCenter :imgUrl="imageUrl('btBg')" style="min-height: 12.58vw; width: 75%">
<itemCenter :imgUrl="webpUrl('btBg')" style="min-height: 12.58vw; width: 75%">
<div style="font-weight: 700">
{{ showDetail(gift.type, gift.quantity) }}
</div>
@ -383,7 +378,7 @@
<!-- 背景图 -->
<img
v-smart-img
:src="imageUrl('longBg')"
:src="webpUrl('longBg')"
alt=""
style="width: 100%; display: block"
/>
@ -425,7 +420,7 @@
<div style="min-height: 12.89vw; display: flex; align-items: center">
<img
v-smart-img
:src="imageUrl('debris')"
:src="webpUrl('debris')"
alt=""
style="width: 15%; display: block; margin-right: 5px"
/>
@ -441,7 +436,7 @@
:key="goodsIndex"
style="display: flex; flex-direction: column; align-items: center"
>
<itemCenter style="min-height: 26.44vw" :imgUrl="imageUrl('giftItemBg')">
<itemCenter style="min-height: 26.44vw" :imgUrl="webpUrl('giftItemBg')">
<!-- gift图 -->
<img
:src="goods.propsGroup.activityRewardProps[0].cover"
@ -456,7 +451,7 @@
<itemCenter
style="min-height: 7.55vw; width: 75%"
@click="selectGood(goods)"
:imgUrl="imageUrl('btBg')"
:imgUrl="webpUrl('btBg')"
>
<div style="font-weight: 700" class="needDebris">Redeem</div>
</itemCenter>
@ -482,7 +477,7 @@
bottom: 0;
z-index: 999;
"
:imgUrl="imageUrl('myRankingBg')"
:imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 4vw;gap: 8px;`"
>
<!-- 基本信息 -->
@ -576,7 +571,7 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 -->
<div v-show="helpInfoShow" style="margin: 20% 0" @click.stop>
<img v-smart-img :src="imageUrl(getImgName('helpInfo'))" alt="" style="width: 100%" />
<img v-smart-img :src="webpUrl(getImgName('helpInfo'))" alt="" style="width: 100%" />
</div>
<!-- history弹窗 -->
@ -588,7 +583,7 @@
<!-- 背景图 -->
<img
v-smart-img
:src="imageUrl('mediumBg')"
:src="webpUrl('mediumBg')"
alt=""
style="width: 100%; display: block"
/>
@ -630,7 +625,7 @@
<!-- 头像框 -->
<img
v-smart-img
:src="imageUrl('topOneHistory')"
:src="webpUrl('topOneHistory')"
alt=""
style="width: 100%; display: block; position: relative; z-index: 1"
/>
@ -664,7 +659,7 @@
<!-- 背景图 -->
<img
v-smart-img
:src="imageUrl('nameBg')"
:src="webpUrl('nameBg')"
alt=""
style="width: 100%; display: block"
/>
@ -707,7 +702,7 @@
>
<img
v-smart-img
:src="imageUrl('timeBack')"
:src="webpUrl('timeBack')"
alt=""
width="13%"
@click="changeHistoryIndex(1)"
@ -732,7 +727,7 @@
</div>
<img
v-smart-img
:src="imageUrl('timeNext')"
:src="webpUrl('timeNext')"
alt=""
width="13%"
@click="changeHistoryIndex(-1)"
@ -746,13 +741,13 @@
v-show="giftsShow"
style="min-height: 76.66vw; margin: 20% 0"
@click.stop
:imgUrl="imageUrl('giftsBg')"
:imgUrl="webpUrl('giftsBg')"
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
>
<!-- 礼物单元 -->
<div style="width: 30%" v-for="gift in gifts" :key="gift.id">
<!-- 礼物背景 -->
<itemCenter style="min-height: 27vw" :imgUrl="imageUrl('giftItemBg')">
<itemCenter style="min-height: 27vw" :imgUrl="webpUrl('giftItemBg')">
<!-- 礼物 -->
<img
:src="gift.giftPhoto"
@ -785,7 +780,7 @@
<!-- 背景图 -->
<img
v-smart-img
:src="imageUrl('mediumBg')"
:src="webpUrl('mediumBg')"
alt=""
style="width: 100%; display: block"
/>
@ -830,7 +825,7 @@
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
<img
v-smart-img
:src="imageUrl('ConfirmBt')"
:src="webpUrl('ConfirmBt')"
alt=""
style="width: 30%; display: block"
@click="exchangeSelectedGood(selectedGood.rule.id)"
@ -850,7 +845,7 @@ import { useLangStore } from '@/stores/lang'
import { connectToApp } from '@/utils/appConnector.js'
import { useThrottle } from '@/utils/useDebounce'
import { showWarning } from '@/utils/toast.js'
import { getPngUrl } from '@/config/imagePaths.js'
import { getWebpUrl } from '@/config/imagePaths.js'
import { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
@ -881,7 +876,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true)
// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStarWebp/', filename)
// 根据语言获取图片名
const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -1210,35 +1205,35 @@ const updatePageData = async () => {
// 预加载关键图片
const preloadCriticalImages = async () => {
const criticalImages = [
imageUrl('bg'),
imageUrl('history'),
imageUrl('gifts'),
imageUrl('dayBg'),
imageUrl('hourAndMinBg'),
imageUrl('secBg'),
imageUrl('btActive'),
imageUrl('btNoActive'),
imageUrl('RankingMain'),
imageUrl('RankingItem'),
imageUrl('RankingBottomBorder'),
imageUrl('topOne'),
imageUrl('topTwo'),
imageUrl('topThree'),
imageUrl('itemUser'),
imageUrl('topBg'),
imageUrl('giftItemBg'),
imageUrl('btBg'),
imageUrl('longBg'),
imageUrl('debris'),
imageUrl('myRankingBg'),
imageUrl(getImgName('helpInfo')),
imageUrl('mediumBg'),
imageUrl('topOneHistory'),
imageUrl('nameBg'),
imageUrl('giftsBg'),
imageUrl('ConfirmBt'),
imageUrl('timeBack'),
imageUrl('timeNext'),
webpUrl('bg'),
webpUrl('history'),
webpUrl('gifts'),
webpUrl('dayBg'),
webpUrl('hourAndMinBg'),
webpUrl('secBg'),
webpUrl('btActive'),
webpUrl('btNoActive'),
webpUrl('RankingMain'),
webpUrl('RankingItem'),
webpUrl('RankingBottomBorder'),
webpUrl('topOne'),
webpUrl('topTwo'),
webpUrl('topThree'),
webpUrl('itemUser'),
webpUrl('topBg'),
webpUrl('giftItemBg'),
webpUrl('btBg'),
webpUrl('longBg'),
webpUrl('debris'),
webpUrl('myRankingBg'),
webpUrl(getImgName('helpInfo')),
webpUrl('mediumBg'),
webpUrl('topOneHistory'),
webpUrl('nameBg'),
webpUrl('giftsBg'),
webpUrl('ConfirmBt'),
webpUrl('timeBack'),
webpUrl('timeNext'),
]
await preloadImages(criticalImages)