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

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

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

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

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

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

@ -3,7 +3,7 @@
<!-- 规则&倒计时 --> <!-- 规则&倒计时 -->
<itemCenter <itemCenter
style="min-height: 126.7vw" style="min-height: 126.7vw"
:imgUrl="imageUrl(getImgName('checkInRule'))" :imgUrl="webpUrl(getImgName('checkInRule'))"
:contentStyle="`inset: 8vw 28vw 105vw;`" :contentStyle="`inset: 8vw 28vw 105vw;`"
> >
<div class="timeBox"> <div class="timeBox">
@ -52,7 +52,7 @@
v-smart-img v-smart-img
v-for="(arrow, arrowIndex) in arrows" v-for="(arrow, arrowIndex) in arrows"
:key="'arrow-' + arrowIndex" :key="'arrow-' + arrowIndex"
:src="imageUrl('arrowRight')" :src="webpUrl('arrowRight')"
:style="arrow.style" :style="arrow.style"
alt="arrow" alt="arrow"
style="position: absolute; width: 8vw; object-fit: contain" 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 { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang' import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js' import { getWebpUrl } from '@/config/imagePaths.js'
import { setUserInfo } from '@/utils/userStore.js' import { setUserInfo } from '@/utils/userStore.js'
import { viewUserInfo } from '@/utils/appBridge.js' import { viewUserInfo } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
@ -104,7 +104,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态 const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (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"> <div style="width: 100%; position: relative">
<itemCenter <itemCenter
style="min-height: 50.6vw" style="min-height: 50.6vw"
:imgUrl="imageUrl('rewardBg')" :imgUrl="webpUrl('rewardBg')"
:flip="true" :flip="true"
:contentStyle="`inset: 4vw 6vw 10vw;`" :contentStyle="`inset: 4vw 6vw 10vw;`"
:class="{ :class="{
@ -17,7 +17,7 @@
<itemCenter <itemCenter
style="min-height: 19.3vw" style="min-height: 19.3vw"
v-for="(goods, index) in dailyConfigs" v-for="(goods, index) in dailyConfigs"
:imgUrl="imageUrl('rewardGoodsBg')" :imgUrl="webpUrl('rewardGoodsBg')"
:flip="true" :flip="true"
:contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`" :contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
:style="getGridPosition(index)" :style="getGridPosition(index)"
@ -104,7 +104,7 @@
> >
<itemCenter <itemCenter
style="width: 80%; min-height: 28vw" style="width: 80%; min-height: 28vw"
:imgUrl="imageUrl('makeUpBtBg')" :imgUrl="webpUrl('makeUpBtBg')"
:contentStyle="`inset: 0;flex-direction: column;`" :contentStyle="`inset: 0;flex-direction: column;`"
> >
<div style="color: #ff79a1; font-weight: 600">{{ t('sign_in_make_up') }}</div> <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 { useRoute, useRouter } from 'vue-router'
import { useLangStore } from '@/stores/lang' import { useLangStore } from '@/stores/lang'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { getPngUrl } from '@/config/imagePaths.js' import { getWebpUrl } from '@/config/imagePaths.js'
import { useCoupleStore } from '@/stores/couple' import { useCoupleStore } from '@/stores/couple'
import { showError, showSuccess } from '@/utils/toast.js' import { showError, showSuccess } from '@/utils/toast.js'
import { storeToRefs } from 'pinia' import { storeToRefs } from 'pinia'
@ -168,7 +168,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) // 预加载状态 const isLoading = ref(true) // 预加载状态
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (filename) => { const getImgName = (filename) => {
@ -198,7 +198,7 @@ const dailyConfigs = computed(() => {
...configs, ...configs,
{ {
type: 'TICKET', type: 'TICKET',
cover: imageUrl('crystal'), cover: webpUrl('crystal'),
content: props.rewards.lotteryTicketCount, content: props.rewards.lotteryTicketCount,
}, },
] ]

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

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

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

@ -33,12 +33,7 @@
> >
<div <div
class="avatar-pair" class="avatar-pair"
style=" style="position: relative; display: flex; align-items: center; gap: 2vw"
position: relative;
display: flex;
align-items: center;
gap: 2vw;
"
> >
<div <div
v-if="!liteAnimations" v-if="!liteAnimations"
@ -53,7 +48,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('TaurusCoupleSign')" :src="webpUrl('TaurusCoupleSign')"
alt="" alt=""
class="couple-sign-img" class="couple-sign-img"
style="width: 5vw; display: block; object-fit: cover" style="width: 5vw; display: block; object-fit: cover"
@ -103,13 +98,13 @@
<script setup> <script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue' import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n' 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 { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import { shouldUseLiteAnimations } from '@/utils/performanceMode.js' import { shouldUseLiteAnimations } from '@/utils/performanceMode.js'
const { locale } = useI18n() const { locale } = useI18n()
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
const props = defineProps({ const props = defineProps({
barrageList: { barrageList: {
@ -135,7 +130,9 @@ const isBarragePaused = ref(false)
const liteAnimations = shouldUseLiteAnimations() const liteAnimations = shouldUseLiteAnimations()
const visibleTracks = computed(() => tracks.value) 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(() => const effectiveLoopInterval = computed(() =>
liteAnimations ? Math.max(props.loopInterval, 6000) : props.loopInterval, liteAnimations ? Math.max(props.loopInterval, 6000) : props.loopInterval,
) )

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

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

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

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

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

@ -11,19 +11,19 @@
<!-- 新增的背景图层 --> <!-- 新增的背景图层 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('bg2')" :src="webpUrl('bg2')"
alt="" alt=""
style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0" style="display: block; width: 100%; position: absolute; inset: 80vw 0 0; z-index: 0"
/> />
<div class="bg"> <div class="bg">
<itemCenter <itemCenter
:imgUrl="imageUrl('bg')" :imgUrl="webpUrl('bg')"
style="min-height: 100vw; position: absolute; z-index: 0" style="min-height: 100vw; position: absolute; z-index: 0"
> >
<img <img
v-smart-img v-smart-img
:src="webpUrl('bg')" :src="webpUrl('bgVideo')"
alt="" alt=""
style="min-height: 100vw; display: block; width: 100%; object-fit: cover" 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"> <div style="display: flex; justify-content: center; margin-top: 11vw">
<TopUser <TopUser
ranking="1" ranking="1"
:BorderImgUrl="imageUrl('top1')" :BorderImgUrl="webpUrl('top1')"
:avatarUrl="RankingHasTop10[0].avatar" :avatarUrl="RankingHasTop10[0].avatar"
:name="RankingHasTop10[0].nickname" :name="RankingHasTop10[0].nickname"
:distributionValue="RankingHasTop10[0].quantity || ''" :distributionValue="RankingHasTop10[0].quantity || ''"
@ -50,7 +50,7 @@
<!-- 帮助按钮 --> <!-- 帮助按钮 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('helpBt')" :src="webpUrl('helpBt')"
alt="" alt=""
style="display: block; position: relative; width: 8vw; margin-right: 4vw" style="display: block; position: relative; width: 8vw; margin-right: 4vw"
@click="openPopup('help')" @click="openPopup('help')"
@ -60,25 +60,25 @@
<!-- 倒计时 --> <!-- 倒计时 -->
<div class="timeBox"> <div class="timeBox">
<div style="width: 20%"> <div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Days }}D</div> <div class="timeText" style="">{{ Days }}D</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap"></div> <div class="timeText timeGap"></div>
<div style="width: 20%"> <div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Hours }}</div> <div class="timeText" style="">{{ Hours }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 20%"> <div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Minutes }}</div> <div class="timeText" style="">{{ Minutes }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 20%"> <div style="width: 20%">
<itemCenter :imgUrl="imageUrl('timeBg')"> <itemCenter :imgUrl="webpUrl('timeBg')">
<div class="timeText" style="">{{ Second }}</div> <div class="timeText" style="">{{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -91,7 +91,7 @@
<div style="width: 30%; position: relative" @click="changeModule('history')"> <div style="width: 30%; position: relative" @click="changeModule('history')">
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('historyBtActive'))" :src="webpUrl(getImgName('historyBtActive'))"
alt="" alt=""
:class="{ :class="{
'grayscale-container': !historyShow, 'grayscale-container': !historyShow,
@ -104,7 +104,7 @@
<div style="width: 30%; position: relative" @click="changeModule('ranking')"> <div style="width: 30%; position: relative" @click="changeModule('ranking')">
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('rankingBtActive'))" :src="webpUrl(getImgName('rankingBtActive'))"
alt="" alt=""
:class="{ :class="{
'grayscale-container': !rankingShow, 'grayscale-container': !rankingShow,
@ -117,7 +117,7 @@
<div style="width: 30%; position: relative" @click="changeModule('rewards')"> <div style="width: 30%; position: relative" @click="changeModule('rewards')">
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('rewardBtActive'))" :src="webpUrl(getImgName('rewardBtActive'))"
alt="" alt=""
:class="{ :class="{
'grayscale-container': !rewardsShow, 'grayscale-container': !rewardsShow,
@ -138,7 +138,7 @@
<!-- 历史榜首 --> <!-- 历史榜首 -->
<itemCenter <itemCenter
style="min-height: 110.3vw" style="min-height: 110.3vw"
:imgUrl="imageUrl(getImgName('historyTopBg'))" :imgUrl="webpUrl(getImgName('historyTopBg'))"
:contentStyle="`inset: 25vw 5vw 4vw; :contentStyle="`inset: 25vw 5vw 4vw;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -169,7 +169,7 @@
<img <img
v-smart-img v-smart-img
v-show="historyTopList.length > 1 && historyTopIndex > 0" v-show="historyTopList.length > 1 && historyTopIndex > 0"
:src="imageUrl('topBackBt')" :src="webpUrl('topBackBt')"
alt="" alt=""
class="flipImg" class="flipImg"
style="display: block; width: 100%; object-fit: cover" style="display: block; width: 100%; object-fit: cover"
@ -179,7 +179,7 @@
<!-- 榜首 --> <!-- 榜首 -->
<TopUser <TopUser
:BorderImgUrl="imageUrl('historyTopFrame')" :BorderImgUrl="webpUrl('historyTopFrame')"
:avatarUrl="historyTopList[historyTopIndex].topUser.avatar" :avatarUrl="historyTopList[historyTopIndex].topUser.avatar"
:name="historyTopList[historyTopIndex].topUser.nickname" :name="historyTopList[historyTopIndex].topUser.nickname"
:distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''" :distributionValue="historyTopList[historyTopIndex].topUser.quantity || ''"
@ -203,7 +203,7 @@
v-show=" v-show="
historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length historyTopList.length > 1 && historyTopIndex + 1 < historyTopList.length
" "
:src="imageUrl('topNextBt')" :src="webpUrl('topNextBt')"
alt="" alt=""
class="flipImg" class="flipImg"
style="display: block; width: 100%; object-fit: cover" style="display: block; width: 100%; object-fit: cover"
@ -233,7 +233,7 @@
<!-- 特殊奖励 --> <!-- 特殊奖励 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('specialRewards_20260518'))" :src="webpUrl(getImgName('specialRewards_20260518'))"
alt="" alt=""
style="display: block; width: 100%; object-fit: cover" style="display: block; width: 100%; object-fit: cover"
/> />
@ -247,7 +247,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('week')"> <div style="width: 40%; position: relative" @click="changeRanking('week')">
<itemCenter <itemCenter
style="min-height: 8vw" style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')" :imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`" :contentStyle="`padding-top: 1vw;`"
:class="{ :class="{
'grayscale-container': !weekShow, 'grayscale-container': !weekShow,
@ -261,7 +261,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('daily')"> <div style="width: 40%; position: relative" @click="changeRanking('daily')">
<itemCenter <itemCenter
style="min-height: 8vw" style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')" :imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`" :contentStyle="`padding-top: 1vw;`"
:class="{ :class="{
'grayscale-container': !dailyShow, 'grayscale-container': !dailyShow,
@ -278,7 +278,7 @@
<!-- 第2-4名 --> <!-- 第2-4名 -->
<itemCenter <itemCenter
style="min-height: 132.2vw" style="min-height: 132.2vw"
:imgUrl="imageUrl(getImgName('RankingMain'))" :imgUrl="webpUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`" :contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
> >
<div> <div>
@ -286,7 +286,7 @@
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<TopUser <TopUser
ranking="2" ranking="2"
:BorderImgUrl="imageUrl('top2')" :BorderImgUrl="webpUrl('top2')"
:avatarUrl="RankingHasTop10[1].avatar" :avatarUrl="RankingHasTop10[1].avatar"
:name="RankingHasTop10[1].nickname" :name="RankingHasTop10[1].nickname"
:distributionValue="RankingHasTop10[1].quantity || ''" :distributionValue="RankingHasTop10[1].quantity || ''"
@ -298,7 +298,7 @@
<div style="display: flex; justify-content: space-between; margin-top: -5vw"> <div style="display: flex; justify-content: space-between; margin-top: -5vw">
<TopUser <TopUser
ranking="3" ranking="3"
:BorderImgUrl="imageUrl('top3')" :BorderImgUrl="webpUrl('top3')"
:avatarUrl="RankingHasTop10[2].avatar" :avatarUrl="RankingHasTop10[2].avatar"
:name="RankingHasTop10[2].nickname" :name="RankingHasTop10[2].nickname"
:distributionValue="RankingHasTop10[2].quantity || ''" :distributionValue="RankingHasTop10[2].quantity || ''"
@ -307,7 +307,7 @@
/> />
<TopUser <TopUser
ranking="4" ranking="4"
:BorderImgUrl="imageUrl('top4')" :BorderImgUrl="webpUrl('top4')"
:avatarUrl="RankingHasTop10[3].avatar" :avatarUrl="RankingHasTop10[3].avatar"
:name="RankingHasTop10[3].nickname" :name="RankingHasTop10[3].nickname"
:distributionValue="RankingHasTop10[3].quantity || ''" :distributionValue="RankingHasTop10[3].quantity || ''"
@ -321,7 +321,7 @@
<!-- 第5-10名 --> <!-- 第5-10名 -->
<itemCenter <itemCenter
style="min-height: 90.13vw" style="min-height: 90.13vw"
:imgUrl="imageUrl('RankingCenterBg')" :imgUrl="webpUrl('RankingCenterBg')"
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`" :contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
> >
<!-- 5-7 --> <!-- 5-7 -->
@ -330,7 +330,7 @@
v-for="topUser in RankingHasTop10.slice(4, 7)" v-for="topUser in RankingHasTop10.slice(4, 7)"
:key="topUser.userId" :key="topUser.userId"
ranking="5-7" ranking="5-7"
:BorderImgUrl="imageUrl('top5_7')" :BorderImgUrl="webpUrl('top5_7')"
:avatarUrl="topUser.avatar" :avatarUrl="topUser.avatar"
:name="topUser.nickname" :name="topUser.nickname"
:distributionValue="topUser.quantity || ''" :distributionValue="topUser.quantity || ''"
@ -345,7 +345,7 @@
v-for="topUser in RankingHasTop10.slice(7, 10)" v-for="topUser in RankingHasTop10.slice(7, 10)"
:key="topUser.userId" :key="topUser.userId"
ranking="8-10" ranking="8-10"
:BorderImgUrl="imageUrl('top8_10')" :BorderImgUrl="webpUrl('top8_10')"
:avatarUrl="topUser.avatar" :avatarUrl="topUser.avatar"
:name="topUser.nickname" :name="topUser.nickname"
:distributionValue="topUser.quantity || ''" :distributionValue="topUser.quantity || ''"
@ -361,7 +361,7 @@
style="min-height: 26.4vw" style="min-height: 26.4vw"
v-for="(listItem, index) in showRanking" v-for="(listItem, index) in showRanking"
:key="listItem.userId" :key="listItem.userId"
:imgUrl="imageUrl('RankingItem')" :imgUrl="webpUrl('RankingItem')"
:contentStyle="`padding: 0 10%`" :contentStyle="`padding: 0 10%`"
:lazy="true" :lazy="true"
:immediate="index < 2" :immediate="index < 2"
@ -455,7 +455,7 @@
<!-- 底框 --> <!-- 底框 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('RankingBottomBorder')" :src="webpUrl('RankingBottomBorder')"
alt="" alt=""
width="100%" width="100%"
style="display: block; margin-top: -6vw; position: relative; z-index: 2" style="display: block; margin-top: -6vw; position: relative; z-index: 2"
@ -469,13 +469,13 @@
<!-- 头部 --> <!-- 头部 -->
<itemCenter <itemCenter
style="min-height: 132.2vw" style="min-height: 132.2vw"
:imgUrl="imageUrl(getImgName('RankingMain'))" :imgUrl="webpUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 0 0;flex-direction: column;`" :contentStyle="`padding: 25% 0 0;flex-direction: column;`"
> >
<!-- 前3名 --> <!-- 前3名 -->
<itemCenter <itemCenter
style="z-index: 0" 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;`" :contentStyle="`flex-direction: column;padding: 17vw 9.5vw 7vw 10.2vw;justify-content: space-between;`"
> >
<!-- 第1名 --> <!-- 第1名 -->
@ -520,7 +520,7 @@
style="min-height: 26.4vw" style="min-height: 26.4vw"
v-for="(listItem, index) in showRankingDaily" v-for="(listItem, index) in showRankingDaily"
:key="listItem.userId" :key="listItem.userId"
:imgUrl="imageUrl('RankingItem')" :imgUrl="webpUrl('RankingItem')"
:contentStyle="`padding: 0 10%`" :contentStyle="`padding: 0 10%`"
:lazy="true" :lazy="true"
:immediate="index < 2" :immediate="index < 2"
@ -614,7 +614,7 @@
<!-- 底框 --> <!-- 底框 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('RankingBottomBorder')" :src="webpUrl('RankingBottomBorder')"
alt="" alt=""
width="100%" width="100%"
style="display: block; margin-top: -6vw; position: relative; z-index: 2" style="display: block; margin-top: -6vw; position: relative; z-index: 2"
@ -634,7 +634,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('week')"> <div style="width: 40%; position: relative" @click="changeRanking('week')">
<itemCenter <itemCenter
style="min-height: 8vw" style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')" :imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`" :contentStyle="`padding-top: 1vw;`"
:class="{ :class="{
'grayscale-container': !weekShow, 'grayscale-container': !weekShow,
@ -648,7 +648,7 @@
<div style="width: 40%; position: relative" @click="changeRanking('daily')"> <div style="width: 40%; position: relative" @click="changeRanking('daily')">
<itemCenter <itemCenter
style="min-height: 8vw" style="min-height: 8vw"
:imgUrl="imageUrl('BtBg')" :imgUrl="webpUrl('BtBg')"
:contentStyle="`padding-top: 1vw;`" :contentStyle="`padding-top: 1vw;`"
:class="{ :class="{
'grayscale-container': !dailyShow, 'grayscale-container': !dailyShow,
@ -813,7 +813,7 @@
<img <img
v-show="dailyShow" v-show="dailyShow"
v-for="(value, index) in 3" v-for="(value, index) in 3"
:src="imageUrl(`top${index + 1}RewardDaily`)" :src="webpUrl(`top${index + 1}RewardDaily`)"
alt="" alt=""
style="width: 100%; margin: 4px 0 10px" style="width: 100%; margin: 4px 0 10px"
/> />
@ -827,7 +827,7 @@
<itemCenter <itemCenter
v-if="rankingShow" v-if="rankingShow"
style="min-height: 24.33vw; position: fixed; bottom: 0; z-index: 3" style="min-height: 24.33vw; position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('myRankingBg')" :imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 0 8%`" :contentStyle="`padding: 0 8%`"
> >
<!-- 基本信息 --> <!-- 基本信息 -->
@ -918,12 +918,12 @@
<div v-show="helpShow" @click.stop> <div v-show="helpShow" @click.stop>
<itemCenter <itemCenter
style="min-height: 156.33vw" style="min-height: 156.33vw"
:imgUrl="imageUrl(getImgName('helpBg'))" :imgUrl="webpUrl(getImgName('helpBg'))"
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`" :contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('helpInfo'))" :src="webpUrl(getImgName('helpInfo'))"
alt="" alt=""
style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw" style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
/> />
@ -934,7 +934,7 @@
<div v-show="dailyPopUpShow" @click.stop> <div v-show="dailyPopUpShow" @click.stop>
<itemCenter <itemCenter
style="min-height: 147.2vw" style="min-height: 147.2vw"
:imgUrl="imageUrl(getImgName('dailyPopUpNew'))" :imgUrl="webpUrl(getImgName('dailyPopUpNew'))"
:contentStyle="`z-index: 0;`" :contentStyle="`z-index: 0;`"
> >
<!-- 关闭按钮 --> <!-- 关闭按钮 -->
@ -958,7 +958,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('closeBt')" :src="webpUrl('closeBt')"
alt="" alt=""
style="display: block; width: 100%; pointer-events: none" style="display: block; width: 100%; pointer-events: none"
/> />
@ -1009,8 +1009,8 @@ const currentLangType = computed(() => {
}) })
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/GamesKing/', filename) const imageUrl = (filename) => getPngUrl('Ranking/GamesKingWebp/', filename)
const webpUrl = (filename) => getWebpUrl('Ranking/GamesKing/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/GamesKingWebp/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (filename) => { const getImgName = (filename) => {
@ -1133,10 +1133,10 @@ const changeRanking = (type) => {
} }
const topImg = ref([ const topImg = ref([
imageUrl('top1RewardBg_20260515'), webpUrl('top1RewardBg_20260515'),
imageUrl('top2_4RewardBg'), webpUrl('top2_4RewardBg'),
imageUrl('top5_7RewardBg'), webpUrl('top5_7RewardBg'),
imageUrl('top8_10RewardBg'), webpUrl('top8_10RewardBg'),
]) // top奖励背景 ]) // top奖励背景
// 处理周榜小于10人时的情况 // 处理周榜小于10人时的情况
@ -1308,36 +1308,36 @@ const initData = async () => {
// 预加载关键图片 // 预加载关键图片
const preloadCriticalImages = async () => { const preloadCriticalImages = async () => {
const criticalImages = [ const criticalImages = [
imageUrl('bg'), webpUrl('bg'),
imageUrl('bg2'), webpUrl('bg2'),
imageUrl('closeBt'), webpUrl('closeBt'),
imageUrl(getImgName('dailyPopUpNew')), webpUrl(getImgName('dailyPopUpNew')),
imageUrl('helpBt'), webpUrl('helpBt'),
imageUrl(getImgName('helpInfo')), webpUrl(getImgName('helpInfo')),
imageUrl(getImgName('historyBtActive')), webpUrl(getImgName('historyBtActive')),
imageUrl('myRankingBg'), webpUrl('myRankingBg'),
imageUrl(getImgName('rankingBtActive')), webpUrl(getImgName('rankingBtActive')),
imageUrl(getImgName('rewardBtActive')), webpUrl(getImgName('rewardBtActive')),
imageUrl('RankingBottomBorder'), webpUrl('RankingBottomBorder'),
imageUrl('RankingCenterBg'), webpUrl('RankingCenterBg'),
imageUrl('RankingItem'), webpUrl('RankingItem'),
imageUrl(getImgName('RankingMain')), webpUrl(getImgName('RankingMain')),
imageUrl('BtBg'), webpUrl('BtBg'),
imageUrl('top1RewardDaily'), webpUrl('top1RewardDaily'),
imageUrl('top2RewardDaily'), webpUrl('top2RewardDaily'),
imageUrl('top3RewardDaily'), webpUrl('top3RewardDaily'),
imageUrl('timeBg'), webpUrl('timeBg'),
imageUrl('topBackBt'), webpUrl('topBackBt'),
imageUrl('topNextBt'), webpUrl('topNextBt'),
imageUrl('top1'), webpUrl('top1'),
imageUrl('top2'), webpUrl('top2'),
imageUrl('top3'), webpUrl('top3'),
imageUrl('top4'), webpUrl('top4'),
imageUrl('top5_7'), webpUrl('top5_7'),
imageUrl('top8_10'), webpUrl('top8_10'),
imageUrl('top1-3FrameDaily'), webpUrl('top1-3FrameDaily'),
] ]
await preloadImages(criticalImages) await preloadImages(criticalImages)
@ -1359,13 +1359,13 @@ const completePreloading = async () => {
// 预加载其他图片 // 预加载其他图片
const preloadOtherImages = async () => { const preloadOtherImages = async () => {
const criticalImages = [ const criticalImages = [
imageUrl(getImgName('historyTopBg')), webpUrl(getImgName('historyTopBg')),
imageUrl('historyTopFrame'), webpUrl('historyTopFrame'),
imageUrl(getImgName('specialRewardsNew')), webpUrl(getImgName('specialRewards_20260518')),
imageUrl('top1RewardBg_20260515'), webpUrl('top1RewardBg_20260515'),
imageUrl('top2_4RewardBg'), webpUrl('top2_4RewardBg'),
imageUrl('top5_7RewardBg'), webpUrl('top5_7RewardBg'),
imageUrl('top8_10RewardBg'), webpUrl('top8_10RewardBg'),
] ]
await preloadImagesIdle(criticalImages) 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"> <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"> <div class="bg">
<!-- 状态栏占位区域（仅在APP中显示） --> <!-- 状态栏占位区域（仅在APP中显示） -->
@ -18,7 +18,7 @@
<!-- 帮助按钮 --> <!-- 帮助按钮 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('help')" :src="webpUrl('help')"
alt="" alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4" style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@click="helpInfoShow = true" @click="helpInfoShow = true"
@ -27,7 +27,7 @@
<!-- history按钮 --> <!-- history按钮 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('history')" :src="webpUrl('history')"
alt="" alt=""
style="min-height: 17.22vw; width: 20%; margin-top: 20px" style="min-height: 17.22vw; width: 20%; margin-top: 20px"
@click="historyShow = true" @click="historyShow = true"
@ -38,7 +38,7 @@
<!-- 主标题 --> <!-- 主标题 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('listTitle')" :src="webpUrl('listTitle')"
alt="" alt=""
style="min-height: 11.55vw; width: 90%" style="min-height: 11.55vw; width: 90%"
/> />
@ -120,12 +120,12 @@
<!-- 刷新倒计时 --> <!-- 刷新倒计时 -->
<div style="min-height: 9vw; display: flex; justify-content: center; margin-top: 20px"> <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> <div class="time">{{ Days }}D</div>
</itemCenter> </itemCenter>
<!-- 当天时间倒计时 --> <!-- 当天时间倒计时 -->
<itemCenter :imgUrl="imageUrl('timeBg')" style="width: 28.5%"> <itemCenter :imgUrl="webpUrl('timeBg')" style="width: 28.5%">
<div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div> <div class="time">{{ Hours }} : {{ Minutes }} : {{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -134,7 +134,7 @@
<div style="min-height: 17.46vw; display: flex; justify-content: flex-end; margin-top: -8%"> <div style="min-height: 17.46vw; display: flex; justify-content: flex-end; margin-top: -8%">
<img <img
v-smart-img v-smart-img
:src="imageUrl('rewards')" :src="webpUrl('rewards')"
alt="" alt=""
style="width: 20%" style="width: 20%"
@click="rewardsShow = true" @click="rewardsShow = true"
@ -151,14 +151,14 @@
left: -4vw; 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 style="width: 80%; display: flex; justify-content: space-around; margin-top: 10%">
<div <div
v-for="(gift, index) in gifts" v-for="(gift, index) in gifts"
:key="index" :key="index"
style="width: 30%; display: flex; flex-direction: column" 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%" /> <img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter> </itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 2px"> <div style="display: flex; justify-content: center; align-items: center; gap: 2px">
@ -185,10 +185,10 @@
v-show="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="imageUrl('kingBtActive')" alt="" style="width: 40%" /> <img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
<img <img
v-smart-img v-smart-img
:src="imageUrl('queenBt')" :src="webpUrl('queenBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingList = false" @click="visibleKingList = false"
@ -201,12 +201,12 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('kingBt')" :src="webpUrl('kingBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingList = true" @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>
</div> </div>
@ -214,7 +214,7 @@
<div style="width: 100%; width: 108vw; position: relative; left: -4vw"> <div style="width: 100%; width: 108vw; position: relative; left: -4vw">
<borderImg title="Ranking"> <borderImg title="Ranking">
<itemCenter <itemCenter
:imgUrl="imageUrl('border-item-user')" :imgUrl="webpUrl('border-item-user')"
style="min-height: 27.66vw; margin: -2px 0" style="min-height: 27.66vw; margin: -2px 0"
:contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`" :contentStyle="`justify-content: flex-start;padding: 0 15%;gap: 8px;`"
v-for="(listItem, index) in topList" v-for="(listItem, index) in topList"
@ -352,7 +352,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl(getImgName('helpInfo'))" :src="webpUrl(getImgName('helpInfo'))"
alt="" alt=""
style="width: 108vw; position: relative; left: -4vw; display: block" style="width: 108vw; position: relative; left: -4vw; display: block"
/> />
@ -369,7 +369,7 @@
margin: -10px 0; margin: -10px 0;
padding: 10px 10%; padding: 10px 10%;
" "
:style="{ backgroundImage: toCssBackgroundImage(imageUrl('border-item')) }" :style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
> >
<!-- 国王皇后榜首 --> <!-- 国王皇后榜首 -->
<div <div
@ -466,7 +466,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('timeBack')" :src="webpUrl('timeBack')"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -492,7 +492,7 @@
</div> </div>
<img <img
v-smart-img v-smart-img
:src="imageUrl('timeNext')" :src="webpUrl('timeNext')"
alt="" alt=""
width="18px" width="18px"
height="18px" height="18px"
@ -514,7 +514,7 @@
<!-- 取消按钮 --> <!-- 取消按钮 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('cancel')" :src="webpUrl('cancel')"
alt="" alt=""
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99" style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
@click="closedPopup" @click="closedPopup"
@ -528,7 +528,7 @@
margin: -20px 0; margin: -20px 0;
padding: 20px 10%; padding: 20px 10%;
" "
:style="{ backgroundImage: toCssBackgroundImage(imageUrl('border-item')) }" :style="{ backgroundImage: toCssBackgroundImage(webpUrl('border-item')) }"
> >
<!-- 奖励榜切换按钮 --> <!-- 奖励榜切换按钮 -->
<div style="width: 100%; min-height: 18.54vw"> <div style="width: 100%; min-height: 18.54vw">
@ -536,10 +536,10 @@
v-show="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="imageUrl('kingBtActive')" alt="" style="width: 40%" /> <img v-smart-img :src="webpUrl('kingBtActive')" alt="" style="width: 40%" />
<img <img
v-smart-img v-smart-img
:src="imageUrl('queenBt')" :src="webpUrl('queenBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = false" @click="visibleKingRewards = false"
@ -551,12 +551,12 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('kingBt')" :src="webpUrl('kingBt')"
alt="" alt=""
style="width: 40%" style="width: 40%"
@click="visibleKingRewards = true" @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>
</div> </div>
@ -586,7 +586,7 @@
:key="rewardIndex" :key="rewardIndex"
style="width: 100%" style="width: 100%"
> >
<itemCenter style="min-height: 27.07vw" :imgUrl="imageUrl('gift')"> <itemCenter style="min-height: 27.07vw" :imgUrl="webpUrl('gift')">
<img <img
v-smart-img v-smart-img
:src="reward.cover || ''" :src="reward.cover || ''"
@ -634,7 +634,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('myRankingBg')" :src="webpUrl('myRankingBg')"
alt="" alt=""
style="width: calc(100% - 1px); display: block" style="width: calc(100% - 1px); display: block"
/> />
@ -780,7 +780,7 @@ import { viewUserInfo } from '@/utils/appBridge.js'
import { useLangStore } from '@/stores/lang' import { useLangStore } from '@/stores/lang'
import { useThrottle } from '@/utils/useDebounce' import { useThrottle } from '@/utils/useDebounce'
import { connectToApp } from '@/utils/appConnector.js' 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 { preloadImages } from '@/utils/image/imagePreloader.js'
import { toCssBackgroundImage } from '@/utils/protectedAssets.js' import { toCssBackgroundImage } from '@/utils/protectedAssets.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js' import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
@ -808,7 +808,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) const isLoading = ref(true)
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/KingQueen/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/KingQueenWebp/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (filename) => { const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -832,13 +832,13 @@ const showTopOne = computed(() => {
if (historyList.value[historyIndex.value]?.wealth) if (historyList.value[historyIndex.value]?.wealth)
topNew.push({ topNew.push({
type: 'topKing', type: 'topKing',
Frame: imageUrl('kingFrame'), Frame: webpUrl('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: imageUrl('queenFrame'), Frame: webpUrl('queenFrame'),
userInfo: historyList.value[historyIndex.value].charm || {}, userInfo: historyList.value[historyIndex.value].charm || {},
}) })
} }
@ -880,12 +880,12 @@ const queenList = ref([]) // 女王榜
const listTop = ref([ const listTop = ref([
{ {
type: 'topKing', type: 'topKing',
Frame: imageUrl('kingFrame'), Frame: webpUrl('kingFrame'),
userInfo: {}, userInfo: {},
}, },
{ {
type: 'topQueen', type: 'topQueen',
Frame: imageUrl('queenFrame'), Frame: webpUrl('queenFrame'),
userInfo: {}, userInfo: {},
}, },
]) //本周的top1国王和女王 ]) //本周的top1国王和女王
@ -898,7 +898,7 @@ const topList = computed(() => {
const showKingLoading = ref(true) //触底加载功能 const showKingLoading = ref(true) //触底加载功能
const showQueenLoading = 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 visibleKingRewards = ref(true) // 展示奖励榜标签
const kingRewards = ref([]) //国王奖励列表 const kingRewards = ref([]) //国王奖励列表
@ -1114,31 +1114,31 @@ const updatePageData = async () => {
// 预加载关键图片 // 预加载关键图片
const preloadCriticalImages = async () => { const preloadCriticalImages = async () => {
const criticalImages = [ const criticalImages = [
imageUrl('bg'), webpUrl('bg'),
imageUrl('border-item'), webpUrl('border-item'),
imageUrl('border-item-user'), webpUrl('border-item-user'),
imageUrl('help'), webpUrl('help'),
imageUrl('history'), webpUrl('history'),
imageUrl('listTitle'), webpUrl('listTitle'),
imageUrl('dayBg'), webpUrl('dayBg'),
imageUrl('timeBg'), webpUrl('timeBg'),
imageUrl('rewards'), webpUrl('rewards'),
imageUrl('eventGifts'), webpUrl('eventGifts'),
imageUrl('gift'), webpUrl('gift'),
imageUrl('kingBtActive'), webpUrl('kingBtActive'),
imageUrl('queenBt'), webpUrl('queenBt'),
imageUrl('kingBt'), webpUrl('kingBt'),
imageUrl('queenBtActive'), webpUrl('queenBtActive'),
imageUrl(getImgName('helpInfo')), webpUrl(getImgName('helpInfo')),
imageUrl('timeBack'), webpUrl('timeBack'),
imageUrl('timeNext'), webpUrl('timeNext'),
imageUrl('cancel'), webpUrl('cancel'),
imageUrl('myRankingBg'), webpUrl('myRankingBg'),
imageUrl('kingFrame'), webpUrl('kingFrame'),
imageUrl('queenFrame'), webpUrl('queenFrame'),
imageUrl('top1'), webpUrl('top1'),
imageUrl('top2'), webpUrl('top2'),
imageUrl('top3'), webpUrl('top3'),
] ]
await preloadImages(criticalImages) await preloadImages(criticalImages)

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

@ -43,11 +43,11 @@
</template> </template>
<script setup> <script setup>
import { getPngUrl } from '@/config/imagePaths.js' import { getWebpUrl } from '@/config/imagePaths.js'
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const borderTopUrl = getPngUrl('Ranking/KingQueen/', 'border-top') const borderTopUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-top')
const borderBottomUrl = getPngUrl('Ranking/KingQueen/', 'border-bottom') const borderBottomUrl = getWebpUrl('Ranking/KingQueenWebp/', 'border-bottom')
const props = defineProps({ const props = defineProps({
title: { 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 { isInApp, closePage, viewUserInfo, gotoRoom } from '@/utils/appBridge.js'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
import { preloadImages } from '@/utils/image/imagePreloader' 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 { toCssBackgroundImage } from '@/utils/protectedAssets.js'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js' import { handleAvatarImageError } from '@/utils/image/imageHandler.js'
import { useThrottle } from '@/utils/useDebounce' import { useThrottle } from '@/utils/useDebounce'
@ -298,7 +298,7 @@ import BackgroundLayer from '@/components/BackgroundLayer.vue'
import itemCenter from '@/components/itemCenter.vue' import itemCenter from '@/components/itemCenter.vue'
import TopUser from './components/topUser.vue' import TopUser from './components/topUser.vue'
const imageUrl = (filename) => getPngUrl('Ranking/Overall/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/OverallWebp/', filename)
const RANKING_CONFIG = { const RANKING_CONFIG = {
Wealth: { Wealth: {
@ -307,33 +307,33 @@ const RANKING_CONFIG = {
labelKey: 'ranking_wealth', labelKey: 'ranking_wealth',
activeColor: '#60FF83', activeColor: '#60FF83',
backgroundColor: '#242A2A', backgroundColor: '#242A2A',
backgroundImage: imageUrl('bgWealth'), backgroundImage: webpUrl('bgWealth'),
paramsType: 'GIFTS_SEND', paramsType: 'GIFTS_SEND',
topBorders: [imageUrl('top1-wealth'), imageUrl('top2-wealth'), imageUrl('top3-wealth')], topBorders: [webpUrl('top1-wealth'), webpUrl('top2-wealth'), webpUrl('top3-wealth')],
rankingItemBg: imageUrl('RankingItem-wealth'), rankingItemBg: webpUrl('RankingItem-wealth'),
myRankingBg: imageUrl('myRankingBg-wealth'), myRankingBg: webpUrl('myRankingBg-wealth'),
}, },
Room: { Room: {
timeBackground: 'linear-gradient(97deg, #211532 12.03%, #3C2163 100.37%)', timeBackground: 'linear-gradient(97deg, #211532 12.03%, #3C2163 100.37%)',
labelKey: 'ranking_room', labelKey: 'ranking_room',
activeColor: '#AA60FF', activeColor: '#AA60FF',
backgroundColor: '#2B2022', backgroundColor: '#2B2022',
backgroundImage: imageUrl('bgRoom'), backgroundImage: webpUrl('bgRoom'),
paramsType: 'ROOM_GIFTS', paramsType: 'ROOM_GIFTS',
topBorders: [imageUrl('top1-room'), imageUrl('top2-room'), imageUrl('top3-room')], topBorders: [webpUrl('top1-room'), webpUrl('top2-room'), webpUrl('top3-room')],
rankingItemBg: imageUrl('RankingItem-room'), rankingItemBg: webpUrl('RankingItem-room'),
myRankingBg: imageUrl('myRankingBg-room'), myRankingBg: webpUrl('myRankingBg-room'),
}, },
Charm: { Charm: {
timeBackground: 'linear-gradient(97deg, #322215 12.03%, #633421 100.37%)', timeBackground: 'linear-gradient(97deg, #322215 12.03%, #633421 100.37%)',
labelKey: 'ranking_charm', labelKey: 'ranking_charm',
activeColor: '#FF9A60', activeColor: '#FF9A60',
backgroundColor: '#3E1308', backgroundColor: '#3E1308',
backgroundImage: imageUrl('bgCharm'), backgroundImage: webpUrl('bgCharm'),
paramsType: 'GIFTS_RECEIVED', paramsType: 'GIFTS_RECEIVED',
topBorders: [imageUrl('top1-charm'), imageUrl('top2-charm'), imageUrl('top3-charm')], topBorders: [webpUrl('top1-charm'), webpUrl('top2-charm'), webpUrl('top3-charm')],
rankingItemBg: imageUrl('RankingItem-charm'), rankingItemBg: webpUrl('RankingItem-charm'),
myRankingBg: imageUrl('myRankingBg-charm'), myRankingBg: webpUrl('myRankingBg-charm'),
}, },
} }
@ -390,7 +390,7 @@ const rankingTabs = Object.entries(RANKING_CONFIG).map(([value, config]) => ({
})) }))
const timeTabs = TIME_TABS const timeTabs = TIME_TABS
const tabSelectedBg = imageUrl('tabSelectedBg') const tabSelectedBg = webpUrl('tabSelectedBg')
const currentRankingConfig = computed(() => { const currentRankingConfig = computed(() => {
return RANKING_CONFIG[rankingType.value] 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"> <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"> <div style="width: 100vw; position: relative">
<!-- 状态栏占位区域 --> <!-- 状态栏占位区域 -->
@ -27,7 +27,7 @@
<!-- history按钮 --> <!-- history按钮 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('history')" :src="webpUrl('history')"
alt="" alt=""
style="min-height: 20.66vw; width: 20%; margin-top: 20px" style="min-height: 20.66vw; width: 20%; margin-top: 20px"
@click="historyShow = true" @click="historyShow = true"
@ -42,7 +42,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('gifts')" :src="webpUrl('gifts')"
alt="" alt=""
style="width: 20%" style="width: 20%"
@click="giftsShow = true" @click="giftsShow = true"
@ -52,25 +52,25 @@
<!-- 倒计时 --> <!-- 倒计时 -->
<div style="min-height: 20.37vw; display: flex; justify-content: center; margin-top: 0%"> <div style="min-height: 20.37vw; display: flex; justify-content: center; margin-top: 0%">
<div style="width: 20%"> <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> <div class="timeText">{{ Days }}D</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap" style="width: 6px"></div> <div class="timeText timeGap" style="width: 6px"></div>
<div style="width: 20%"> <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> <div class="timeText">{{ Hours }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 20%"> <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> <div class="timeText">{{ Minutes }}</div>
</itemCenter> </itemCenter>
</div> </div>
<div class="timeText timeGap">:</div> <div class="timeText timeGap">:</div>
<div style="width: 20%"> <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> <div class="timeText">{{ Second }}</div>
</itemCenter> </itemCenter>
</div> </div>
@ -86,17 +86,17 @@
" "
> >
<div style="width: 30%" @click="handleBt('Ranking')"> <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> <div class="btTitle">Ranking</div>
</itemCenter> </itemCenter>
</div> </div>
<div style="width: 30%" @click="handleBt('Rewards')"> <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> <div class="btTitle">Rewards</div>
</itemCenter> </itemCenter>
</div> </div>
<div style="width: 30%" @click="handleBt('Exchange')"> <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> <div class="btTitle">Exchange</div>
</itemCenter> </itemCenter>
</div> </div>
@ -114,7 +114,7 @@
<!-- 头部背景 --> <!-- 头部背景 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('RankingMain')" :src="webpUrl('RankingMain')"
alt="" alt=""
width="100%" width="100%"
style="min-height: 149.66vw; display: block" style="min-height: 149.66vw; display: block"
@ -122,7 +122,7 @@
<!-- 用户项 --> <!-- 用户项 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('RankingItem')" :src="webpUrl('RankingItem')"
alt="" alt=""
width="100%" width="100%"
style="min-height: 25.33vw; display: block; margin-top: -2px" style="min-height: 25.33vw; display: block; margin-top: -2px"
@ -132,7 +132,7 @@
<!-- 底框 --> <!-- 底框 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('RankingBottomBorder')" :src="webpUrl('RankingBottomBorder')"
alt="" alt=""
width="100%" width="100%"
style="min-height: 20.66vw; display: block; margin-top: -9%" style="min-height: 20.66vw; display: block; margin-top: -9%"
@ -148,7 +148,7 @@
<!-- 第一 --> <!-- 第一 -->
<div style="display: flex; justify-content: center"> <div style="display: flex; justify-content: center">
<TopUser <TopUser
:BorderImgUrl="imageUrl('topOne')" :BorderImgUrl="webpUrl('topOne')"
:avatarUrl="RankingHasTop3[0].userAvatar" :avatarUrl="RankingHasTop3[0].userAvatar"
:name="RankingHasTop3[0].userNickname" :name="RankingHasTop3[0].userNickname"
:distributionValue="RankingHasTop3[0].quantity" :distributionValue="RankingHasTop3[0].quantity"
@ -174,7 +174,7 @@
> >
<TopUser <TopUser
:isTopOne="false" :isTopOne="false"
:BorderImgUrl="imageUrl('topTwo')" :BorderImgUrl="webpUrl('topTwo')"
:avatarUrl="RankingHasTop3[1].userAvatar" :avatarUrl="RankingHasTop3[1].userAvatar"
:name="RankingHasTop3[1].userNickname" :name="RankingHasTop3[1].userNickname"
:distributionValue="RankingHasTop3[1].quantity" :distributionValue="RankingHasTop3[1].quantity"
@ -188,7 +188,7 @@
> >
<TopUser <TopUser
:isTopOne="false" :isTopOne="false"
:BorderImgUrl="imageUrl('topThree')" :BorderImgUrl="webpUrl('topThree')"
:avatarUrl="RankingHasTop3[2].userAvatar" :avatarUrl="RankingHasTop3[2].userAvatar"
:name="RankingHasTop3[2].userNickname" :name="RankingHasTop3[2].userNickname"
:distributionValue="RankingHasTop3[2].quantity" :distributionValue="RankingHasTop3[2].quantity"
@ -203,7 +203,7 @@
v-for="listItem in showRanking" v-for="listItem in showRanking"
style="min-height: 21.41vw; margin-top: 3.3vw; position: relative" style="min-height: 21.41vw; margin-top: 3.3vw; position: relative"
@click="viewUserInfo(listItem.userId)" @click="viewUserInfo(listItem.userId)"
:imgUrl="imageUrl('itemUser')" :imgUrl="webpUrl('itemUser')"
:contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`" :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
> >
<!-- 基本信息 --> <!-- 基本信息 -->
@ -316,12 +316,7 @@
style="min-height: 158.66vw; position: relative; width: 100%" style="min-height: 158.66vw; position: relative; width: 100%"
> >
<!-- top背景图 --> <!-- top背景图 -->
<img <img v-smart-img :src="webpUrl('topBg')" alt="" style="width: 100%; display: block" />
v-smart-img
:src="imageUrl('topBg')"
alt=""
style="width: 100%; display: block"
/>
<!-- 标题 --> <!-- 标题 -->
<div <div
style=" style="
@ -355,7 +350,7 @@
style="display: flex; flex-direction: column; align-items: center" style="display: flex; flex-direction: column; align-items: center"
> >
<itemCenter <itemCenter
:imgUrl="imageUrl('giftItemBg')" :imgUrl="webpUrl('giftItemBg')"
style="min-height: 39.6vw; width: 90%; margin-bottom: 3px" style="min-height: 39.6vw; width: 90%; margin-bottom: 3px"
> >
<!-- gift图 --> <!-- gift图 -->
@ -367,7 +362,7 @@
/> />
</itemCenter> </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"> <div style="font-weight: 700">
{{ showDetail(gift.type, gift.quantity) }} {{ showDetail(gift.type, gift.quantity) }}
</div> </div>
@ -383,7 +378,7 @@
<!-- 背景图 --> <!-- 背景图 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('longBg')" :src="webpUrl('longBg')"
alt="" alt=""
style="width: 100%; display: block" style="width: 100%; display: block"
/> />
@ -425,7 +420,7 @@
<div style="min-height: 12.89vw; display: flex; align-items: center"> <div style="min-height: 12.89vw; display: flex; align-items: center">
<img <img
v-smart-img v-smart-img
:src="imageUrl('debris')" :src="webpUrl('debris')"
alt="" alt=""
style="width: 15%; display: block; margin-right: 5px" style="width: 15%; display: block; margin-right: 5px"
/> />
@ -441,7 +436,7 @@
:key="goodsIndex" :key="goodsIndex"
style="display: flex; flex-direction: column; align-items: center" 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图 --> <!-- gift图 -->
<img <img
:src="goods.propsGroup.activityRewardProps[0].cover" :src="goods.propsGroup.activityRewardProps[0].cover"
@ -456,7 +451,7 @@
<itemCenter <itemCenter
style="min-height: 7.55vw; width: 75%" style="min-height: 7.55vw; width: 75%"
@click="selectGood(goods)" @click="selectGood(goods)"
:imgUrl="imageUrl('btBg')" :imgUrl="webpUrl('btBg')"
> >
<div style="font-weight: 700" class="needDebris">Redeem</div> <div style="font-weight: 700" class="needDebris">Redeem</div>
</itemCenter> </itemCenter>
@ -482,7 +477,7 @@
bottom: 0; bottom: 0;
z-index: 999; z-index: 999;
" "
:imgUrl="imageUrl('myRankingBg')" :imgUrl="webpUrl('myRankingBg')"
:contentStyle="`padding: 4vw;gap: 8px;`" :contentStyle="`padding: 4vw;gap: 8px;`"
> >
<!-- 基本信息 --> <!-- 基本信息 -->
@ -576,7 +571,7 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup"> <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 --> <!-- help弹窗 -->
<div v-show="helpInfoShow" style="margin: 20% 0" @click.stop> <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> </div>
<!-- history弹窗 --> <!-- history弹窗 -->
@ -588,7 +583,7 @@
<!-- 背景图 --> <!-- 背景图 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('mediumBg')" :src="webpUrl('mediumBg')"
alt="" alt=""
style="width: 100%; display: block" style="width: 100%; display: block"
/> />
@ -630,7 +625,7 @@
<!-- 头像框 --> <!-- 头像框 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('topOneHistory')" :src="webpUrl('topOneHistory')"
alt="" alt=""
style="width: 100%; display: block; position: relative; z-index: 1" style="width: 100%; display: block; position: relative; z-index: 1"
/> />
@ -664,7 +659,7 @@
<!-- 背景图 --> <!-- 背景图 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('nameBg')" :src="webpUrl('nameBg')"
alt="" alt=""
style="width: 100%; display: block" style="width: 100%; display: block"
/> />
@ -707,7 +702,7 @@
> >
<img <img
v-smart-img v-smart-img
:src="imageUrl('timeBack')" :src="webpUrl('timeBack')"
alt="" alt=""
width="13%" width="13%"
@click="changeHistoryIndex(1)" @click="changeHistoryIndex(1)"
@ -732,7 +727,7 @@
</div> </div>
<img <img
v-smart-img v-smart-img
:src="imageUrl('timeNext')" :src="webpUrl('timeNext')"
alt="" alt=""
width="13%" width="13%"
@click="changeHistoryIndex(-1)" @click="changeHistoryIndex(-1)"
@ -746,13 +741,13 @@
v-show="giftsShow" v-show="giftsShow"
style="min-height: 76.66vw; margin: 20% 0" style="min-height: 76.66vw; margin: 20% 0"
@click.stop @click.stop
:imgUrl="imageUrl('giftsBg')" :imgUrl="webpUrl('giftsBg')"
:contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`" :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
> >
<!-- 礼物单元 --> <!-- 礼物单元 -->
<div style="width: 30%" v-for="gift in gifts" :key="gift.id"> <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 <img
:src="gift.giftPhoto" :src="gift.giftPhoto"
@ -785,7 +780,7 @@
<!-- 背景图 --> <!-- 背景图 -->
<img <img
v-smart-img v-smart-img
:src="imageUrl('mediumBg')" :src="webpUrl('mediumBg')"
alt="" alt=""
style="width: 100%; display: block" style="width: 100%; display: block"
/> />
@ -830,7 +825,7 @@
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div> <div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
<img <img
v-smart-img v-smart-img
:src="imageUrl('ConfirmBt')" :src="webpUrl('ConfirmBt')"
alt="" alt=""
style="width: 30%; display: block" style="width: 30%; display: block"
@click="exchangeSelectedGood(selectedGood.rule.id)" @click="exchangeSelectedGood(selectedGood.rule.id)"
@ -850,7 +845,7 @@ import { useLangStore } from '@/stores/lang'
import { connectToApp } from '@/utils/appConnector.js' import { connectToApp } from '@/utils/appConnector.js'
import { useThrottle } from '@/utils/useDebounce' import { useThrottle } from '@/utils/useDebounce'
import { showWarning } from '@/utils/toast.js' 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 { preloadImages } from '@/utils/image/imagePreloader.js'
import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js' import { handleAvatarImageError, handleRewardImageError } from '@/utils/image/imageHandler.js'
@ -881,7 +876,7 @@ const currentLangType = computed(() => {
const isLoading = ref(true) const isLoading = ref(true)
// 获取OSS图片URL的函数 // 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/WeeklyStar/', filename) const webpUrl = (filename) => getWebpUrl('Ranking/WeeklyStarWebp/', filename)
// 根据语言获取图片名 // 根据语言获取图片名
const getImgName = (filename) => { const getImgName = (filename) => {
return currentLangType.value === 'ar' ? `${filename}_ar` : filename return currentLangType.value === 'ar' ? `${filename}_ar` : filename
@ -1210,35 +1205,35 @@ const updatePageData = async () => {
// 预加载关键图片 // 预加载关键图片
const preloadCriticalImages = async () => { const preloadCriticalImages = async () => {
const criticalImages = [ const criticalImages = [
imageUrl('bg'), webpUrl('bg'),
imageUrl('history'), webpUrl('history'),
imageUrl('gifts'), webpUrl('gifts'),
imageUrl('dayBg'), webpUrl('dayBg'),
imageUrl('hourAndMinBg'), webpUrl('hourAndMinBg'),
imageUrl('secBg'), webpUrl('secBg'),
imageUrl('btActive'), webpUrl('btActive'),
imageUrl('btNoActive'), webpUrl('btNoActive'),
imageUrl('RankingMain'), webpUrl('RankingMain'),
imageUrl('RankingItem'), webpUrl('RankingItem'),
imageUrl('RankingBottomBorder'), webpUrl('RankingBottomBorder'),
imageUrl('topOne'), webpUrl('topOne'),
imageUrl('topTwo'), webpUrl('topTwo'),
imageUrl('topThree'), webpUrl('topThree'),
imageUrl('itemUser'), webpUrl('itemUser'),
imageUrl('topBg'), webpUrl('topBg'),
imageUrl('giftItemBg'), webpUrl('giftItemBg'),
imageUrl('btBg'), webpUrl('btBg'),
imageUrl('longBg'), webpUrl('longBg'),
imageUrl('debris'), webpUrl('debris'),
imageUrl('myRankingBg'), webpUrl('myRankingBg'),
imageUrl(getImgName('helpInfo')), webpUrl(getImgName('helpInfo')),
imageUrl('mediumBg'), webpUrl('mediumBg'),
imageUrl('topOneHistory'), webpUrl('topOneHistory'),
imageUrl('nameBg'), webpUrl('nameBg'),
imageUrl('giftsBg'), webpUrl('giftsBg'),
imageUrl('ConfirmBt'), webpUrl('ConfirmBt'),
imageUrl('timeBack'), webpUrl('timeBack'),
imageUrl('timeNext'), webpUrl('timeNext'),
] ]
await preloadImages(criticalImages) await preloadImages(criticalImages)