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

feat(国王皇后): 添加图片最小高度

Browse Source
This commit is contained in:
hzj 2026-02-27 12:04:05 +08:00
parent c55aefc24c
commit 2cdbbc4641
2 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,16 +34,29 @@
v-smart-img v-smart-img
:src="imageUrl('history')" :src="imageUrl('history')"
alt="" alt=""
style="width: 20%; margin-top: 20px" style="min-height: 17.22vw; width: 20%; margin-top: 20px"
@click="historyShow = true" @click="historyShow = true"
/> />
<!-- 每周榜首 --> <!-- 每周榜首 -->
<div style="display: flex; flex-direction: column; align-items: center"> <div style="display: flex; flex-direction: column; align-items: center">
<!-- 主标题 --> <!-- 主标题 -->
<img v-smart-img :src="imageUrl('listTitle')" alt="" style="width: 90%" /> <img
v-smart-img
:src="imageUrl('listTitle')"
alt=""
style="min-height: 11.55vw; width: 90%"
/>
<!-- 榜首 --> <!-- 榜首 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin-top: 16px"> <div
style="
min-height: 40vw;
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 16px;
"
>
<div <div
style="width: 40%" style="width: 40%"
v-for="(topUser, index) in listTop" v-for="(topUser, index) in listTop"
@ -116,7 +129,7 @@
</div> </div>
<!-- 刷新倒计时 --> <!-- 刷新倒计时 -->
<div style="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="imageUrl('dayBg')" style="width: 12vw; margin-right: 10px">
<div class="time">{{ Days }}D</div> <div class="time">{{ Days }}D</div>
@ -129,7 +142,7 @@
</div> </div>
<!-- rewards按钮 --> <!-- rewards按钮 -->
<div style="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="imageUrl('rewards')"
@ -149,14 +162,14 @@
left: -4vw; left: -4vw;
" "
> >
<itemCenter :imgUrl="imageUrl('eventGifts')"> <itemCenter style="min-height: 74.91vw" :imgUrl="imageUrl('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 :imgUrl="imageUrl('gift')"> <itemCenter style="min-height: 25.91vw" :imgUrl="imageUrl('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">
@ -178,7 +191,7 @@
<!-- 排行榜模块 --> <!-- 排行榜模块 -->
<div style="width: 100vw"> <div style="width: 100vw">
<!-- 排行榜切换按钮 --> <!-- 排行榜切换按钮 -->
<div style="width: 100%"> <div style="min-height: 21.46vw; width: 100%">
<div <div
v-show="visibleKingList" v-show="visibleKingList"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
@ -213,7 +226,7 @@
<borderImg title="Ranking"> <borderImg title="Ranking">
<itemCenter <itemCenter
:imgUrl="imageUrl('border-item-user')" :imgUrl="imageUrl('border-item-user')"
style="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"
:key="index" :key="index"
@ -385,6 +398,7 @@
> >
<div <div
style=" style="
min-height: 34.56vw;
position: relative; position: relative;
width: 100%; width: 100%;
min-height: max-content; min-height: max-content;
@ -529,7 +543,7 @@
:style="{ backgroundImage: `url(${imageUrl('border-item')})` }" :style="{ backgroundImage: `url(${imageUrl('border-item')})` }"
> >
<!-- 奖励榜切换按钮 --> <!-- 奖励榜切换按钮 -->
<div style="width: 100%"> <div style="width: 100%; min-height: 18.54vw">
<div <div
v-show="visibleKingRewards" v-show="visibleKingRewards"
style="width: 100%; display: flex; justify-content: space-around" style="width: 100%; display: flex; justify-content: space-around"
@ -568,7 +582,7 @@
v-smart-img v-smart-img
:src="topImg[Number(rewardsTop.rankRange) - 1]" :src="topImg[Number(rewardsTop.rankRange) - 1]"
alt="" alt=""
style="width: 40%; margin: 24px 0" style="min-height: 19.13vw; width: 40%; margin: 24px 0"
/> />
<div <div
style=" style="
@ -584,7 +598,7 @@
:key="rewardIndex" :key="rewardIndex"
style="width: 100%" style="width: 100%"
> >
<itemCenter :imgUrl="imageUrl('gift')"> <itemCenter style="min-height: 27.07vw" :imgUrl="imageUrl('gift')">
<img <img
v-smart-img v-smart-img
:src="reward.cover || ''" :src="reward.cover || ''"

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

@ -3,7 +3,12 @@
<div style="width: 100%"> <div style="width: 100%">
<!-- 头部 --> <!-- 头部 -->
<div style="position: relative; margin-bottom: -2px"> <div style="position: relative; margin-bottom: -2px">
<img v-smart-img :src="borderTopUrl" alt="" style="width: 100%; display: block" /> <img
v-smart-img
:src="borderTopUrl"
alt=""
style="min-height: 25.15vw; width: 100%; display: block"
/>
<div <div
style=" style="
position: absolute; position: absolute;
@ -28,7 +33,12 @@
<slot></slot> <slot></slot>
<!-- 尾部 --> <!-- 尾部 -->
<img v-smart-img :src="borderBottomUrl" alt="" style="width: 100%; display: block" /> <img
v-smart-img
:src="borderBottomUrl"
alt=""
style="min-height: 18.59vw; width: 100%; display: block"
/>
</div> </div>
</template> </template>