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

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

@ -3,7 +3,12 @@
<div style="width: 100%">
<!-- 头部 -->
<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
style="
position: absolute;
@ -28,7 +33,12 @@
<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>
</template>