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

feat(3个排行榜): 加上图片缓存功能

Browse Source
This commit is contained in:
hzj 2025-11-20 18:44:16 +08:00
parent 64b4b2531e
commit 165ecf05d7
6 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@
<!-- 帮助按钮 -->
<img
v-smart-img
:src="images.help"
alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@ -14,6 +15,7 @@
<!-- history按钮 -->
<img
v-smart-img
:src="images.history"
alt=""
style="width: 20%; margin-top: 20px"
@ -23,7 +25,7 @@
<!-- 每周榜首 -->
<div style="display: flex; flex-direction: column; align-items: center">
<!-- 主标题 -->
<img :src="images.listTitle" alt="" style="width: 90%" />
<img v-smart-img :src="images.listTitle" alt="" style="width: 90%" />
<!-- 榜首 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px">
<div
@ -43,7 +45,7 @@
"
>
<!-- 头像框 -->
<img :src="topUser.Frame" alt="" style="width: 100%; z-index: 1" />
<img v-smart-img :src="topUser.Frame" alt="" style="width: 100%; z-index: 1" />
<!-- 头像 -->
<div
style="
@ -59,6 +61,7 @@
"
>
<img
v-smart-img
v-if="topUser.userInfo.userAvatar"
:src="topUser.userInfo.userAvatar || ''"
alt=""
@ -112,7 +115,13 @@
<!-- rewards -->
<div style="display: flex; justify-content: flex-end; margin-top: -8%">
<img :src="images.rewards" alt="" style="width: 20%" @click="rewardsShow = true" />
<img
v-smart-img
:src="images.rewards"
alt=""
style="width: 20%"
@click="rewardsShow = true"
/>
</div>
<!-- 每周礼物 -->
@ -128,7 +137,12 @@
<img :src="gift.giftPhoto" alt="" width="50%" />
</itemCenter>
<div style="display: flex; justify-content: center; align-items: center; gap: 5px">
<img src="/src/assets/icon/coin.png" alt="" style="width: 18%; aspect-ratio: 1/1" />
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="width: 18%; aspect-ratio: 1/1"
/>
<div style="color: rgba(255, 255, 255, 1); font-weight: 590">
{{ gift.giftCandy }}
</div>
@ -146,16 +160,28 @@
v-if="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around"
>
<img :src="images.kingBtActive" alt="" style="width: 40%" />
<img :src="images.queenBt" alt="" style="width: 40%" @click="visibleKingList = false" />
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
<img
v-smart-img
:src="images.queenBt"
alt=""
style="width: 40%"
@click="visibleKingList = false"
/>
</div>
<div
v-if="!visibleKingList"
style="width: 100%; display: flex; justify-content: space-around"
>
<img :src="images.kingBt" alt="" style="width: 40%" @click="visibleKingList = true" />
<img :src="images.queenBtActive" alt="" style="width: 40%" />
<img
v-smart-img
:src="images.kingBt"
alt=""
style="width: 40%"
@click="visibleKingList = true"
/>
<img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" />
</div>
</div>
@ -274,7 +300,7 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 -->
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
<img :src="images.helpInfo" alt="" style="width: 100%" />
<img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" />
</div>
<!-- history弹窗 -->
@ -310,7 +336,7 @@
"
>
<!-- 头像框 -->
<img :src="topOne.Frame" alt="" style="width: 100%; z-index: 1" />
<img v-smart-img :src="topOne.Frame" alt="" style="width: 100%; z-index: 1" />
<!-- 头像 -->
<div
style="
@ -326,6 +352,7 @@
"
>
<img
v-smart-img
:src="topOne.userInfo.userAvatar"
alt=""
width="70%"
@ -377,6 +404,7 @@
"
>
<img
v-smart-img
:src="images.timeBack"
alt=""
width="18px"
@ -402,6 +430,7 @@
{{ showTopOne.group }}
</div>
<img
v-smart-img
:src="images.timeNext"
alt=""
width="18px"
@ -419,6 +448,7 @@
<div style="position: relative">
<!-- 取消按钮 -->
<img
v-smart-img
:src="images.cancel"
alt=""
style="width: 7%; position: absolute; top: 0; right: 6%; z-index: 99"
@ -441,8 +471,9 @@
v-if="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around"
>
<img :src="images.kingBtActive" alt="" style="width: 40%" />
<img v-smart-img :src="images.kingBtActive" alt="" style="width: 40%" />
<img
v-smart-img
:src="images.queenBt"
alt=""
style="width: 40%"
@ -454,12 +485,13 @@
style="width: 100%; display: flex; justify-content: space-around"
>
<img
v-smart-img
:src="images.kingBt"
alt=""
style="width: 40%"
@click="visibleKingRewards = true"
/>
<img :src="images.queenBtActive" alt="" style="width: 40%" />
<img v-smart-img :src="images.queenBtActive" alt="" style="width: 40%" />
</div>
</div>
@ -470,6 +502,7 @@
v-if="rewardsTop.rewards.length > 0"
>
<img
v-smart-img
:src="topImg[Number(rewardsTop.rankRange) - 1]"
alt=""
style="width: 40%; margin: 24px 0"
@ -490,6 +523,7 @@
>
<itemCenter :imgUrl="images.gift">
<img
v-smart-img
:src="reward.cover || ''"
alt=""
width="50%"
@ -531,7 +565,12 @@
margin-top: 10px;
"
>
<img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
<img
v-smart-img
:src="images.myRankingBg"
alt=""
style="width: calc(100% - 1px); display: block"
/>
<div
style="
@ -612,6 +651,7 @@
<div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px">
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="display: block; width: 35%; aspect-ratio: 1/1"

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

@ -3,6 +3,7 @@
<!-- 头部 -->
<div style="position: relative; margin-bottom: -2px">
<img
v-smart-img
src="/src/assets/images/TopList/border-top.png"
alt=""
style="width: 100%; display: block"
@ -40,6 +41,7 @@
<!-- 尾部 -->
<img
v-smart-img
src="/src/assets/images/TopList/border-bottom.png"
alt=""
style="width: 100%; display: block"

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

@ -177,6 +177,7 @@
</div>
<!-- 头像 -->
<img
v-smart-img
:src="userInfo.avatar || ''"
alt=""
style="

1
src/views/Ranking/Overall/components/topUser.vue
View File

@ -24,6 +24,7 @@
>
<div style="width: 70%">
<img
v-smart-img
:src="avatarUrl || ''"
alt=""
width="100%"

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

@ -5,6 +5,7 @@
<!-- 帮助按钮 -->
<img
v-smart-img
:src="images.help"
alt=""
style="width: 10%; position: absolute; top: 48px; right: 8px; z-index: 4"
@ -13,6 +14,7 @@
<!-- history按钮 -->
<img
v-smart-img
:src="images.history"
alt=""
style="width: 20%; margin-top: 20px"
@ -28,7 +30,7 @@
: 'calc(65vw - 10vw - 10vw - 20px)',
}"
>
<img :src="images.gifts" alt="" style="width: 20%" @click="giftsShow = true" />
<img v-smart-img :src="images.gifts" alt="" style="width: 20%" @click="giftsShow = true" />
</div>
<!-- 倒计时 -->
@ -86,8 +88,9 @@
>
<!-- 背景板 -->
<div>
<img :src="images.RankingMain" alt="" width="100%" style="display: block" />
<img v-smart-img :src="images.RankingMain" alt="" width="100%" style="display: block" />
<img
v-smart-img
:src="images.RankingItem"
alt=""
width="100%"
@ -96,6 +99,7 @@
v-if="showRanking.length > 1"
/>
<img
v-smart-img
:src="images.RankingBottomBorder"
alt=""
width="100%"
@ -209,7 +213,7 @@
<!-- 贡献值 -->
<div style="flex: 1; min-width: 0; display: flex; align-items: center">
<img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
<img v-smart-img src="/src/assets/icon/coin.png" alt="" style="width: 30%" />
<div style="color: #edb247; font-weight: 700" class="UserNickname">
{{ listItem.quantity }}
</div>
@ -228,7 +232,7 @@
<!-- top模块 -->
<div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
<!-- top背景图 -->
<img :src="images.topBg" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="images.topBg" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -264,6 +268,7 @@
<itemCenter :imgUrl="images.giftItemBg" style="width: 90%; margin-bottom: 3px">
<!-- gift图 -->
<img
v-smart-img
:src="gift.cover || ''"
alt=""
style="width: 50%; display: block"
@ -285,7 +290,7 @@
<div v-show="exchargeShow" style="display: flex; justify-content: center">
<div style="position: relative; width: 90%">
<!-- 背景图 -->
<img :src="images.longBg" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="images.longBg" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -320,6 +325,7 @@
<!-- 碎片 -->
<div style="display: flex; align-items: center">
<img
v-smart-img
:src="images.debris"
alt=""
style="width: 15%; display: block; margin-right: 5px"
@ -337,6 +343,7 @@
<itemCenter :imgUrl="images.giftItemBg">
<!-- gift图 -->
<img
v-smart-img
:src="goods.propsGroup.activityRewardProps[0].cover"
alt=""
style="width: 68%; display: block; margin-bottom: 7%"
@ -370,7 +377,12 @@
z-index: 999;
"
>
<img :src="images.myRankingBg" alt="" style="width: calc(100% - 1px); display: block" />
<img
v-smart-img
:src="images.myRankingBg"
alt=""
style="width: calc(100% - 1px); display: block"
/>
<div
style="
@ -455,13 +467,13 @@
<maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
<!-- help弹窗 -->
<div v-if="helpInfoShow" style="margin: 20% 0" @click.stop>
<img :src="images.helpInfo" alt="" style="width: 100%" />
<img v-smart-img :src="images.helpInfo" alt="" style="width: 100%" />
</div>
<!-- history弹窗 -->
<div v-if="historyShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 -->
<img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -499,6 +511,7 @@
<div style="position: relative; width: 75%">
<!-- 头像框 -->
<img
v-smart-img
:src="images.topOneHistory"
alt=""
style="width: 100%; display: block; position: relative; z-index: 1"
@ -508,6 +521,7 @@
style="height: 100%; display: flex; justify-content: center; align-items: center"
>
<img
v-smart-img
:src="showTopOne.userAvatar || ''"
alt=""
style="
@ -526,7 +540,7 @@
<!-- 名字 -->
<div style="position: relative; width: 25%">
<!-- 背景图 -->
<img :src="images.nameBg" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="images.nameBg" alt="" style="width: 100%; display: block" />
<div
style="
position: absolute;
@ -560,6 +574,7 @@
style="width: 50%; display: flex; justify-content: space-between; align-items: center"
>
<img
v-smart-img
src="/src/assets/images/TopList/timeBack.png"
alt=""
width="13%"
@ -584,6 +599,7 @@
{{ showTopOne.group }}
</div>
<img
v-smart-img
src="/src/assets/images/TopList/timeNext.png"
alt=""
width="13%"
@ -607,6 +623,7 @@
<itemCenter :imgUrl="images.giftItemBg">
<!-- 礼物 -->
<img
v-smart-img
:src="gift.giftPhoto"
alt=""
style="width: 50%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
@ -616,6 +633,7 @@
<!-- 礼物价值 -->
<div style="display: flex; justify-content: center">
<img
v-smart-img
src="/src/assets/icon/coin.png"
alt=""
style="width: 20%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover"
@ -630,7 +648,7 @@
<!-- 交易商品弹窗 -->
<div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
<!-- 背景图 -->
<img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
<img v-smart-img :src="images.mediumBg" alt="" style="width: 100%; display: block" />
<!-- 标题 -->
<div
style="
@ -665,12 +683,14 @@
"
>
<img
v-smart-img
:src="selectedGood.propsGroup.activityRewardProps[0].cover"
alt=""
style="width: 50%; display: block"
/>
<div>Permanent/{{ JSON.parse(selectedGood.rule.jsonData).need_fragments }} Star</div>
<img
v-smart-img
:src="images.ConfirmBt"
alt=""
style="width: 30%; display: block"

2
src/views/Ranking/WeeklyStar/components/topUser.vue
View File

@ -2,6 +2,7 @@
<div style="width: 100%">
<div style="position: relative">
<img
v-smart-img
:src="BorderImgUrl"
alt=""
width="100%"
@ -23,6 +24,7 @@
>
<div :style="{ width: isTopOne ? '50%' : '80%' }">
<img
v-smart-img
:src="avatarUrl || ''"
alt=""
width="100%"