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 11:37:22 +08:00
parent 591057b331
commit c55aefc24c
2 changed files with 38 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/views/Ranking/GamesKing/components/topUser.vue
View File

@ -1,6 +1,6 @@
<template>
<div style="width: 100%">
<div style="position: relative">
<div style="position: relative" :style="{ minHeight: minHeight }">
<img
v-smart-img
:src="BorderImgUrl"
@ -125,6 +125,25 @@ const props = defineProps({
},
})
// 最小容器高度
const minHeight = computed(() => {
switch (props.ranking) {
case '1':
return '55vw'
case '2':
return '57.09vw'
case '3':
case '4':
return '52.43vw'
case '5-7':
return '45.09vw'
case '8-10':
return '40.23vw'
default:
return '59.36vw'
}
})
// 头像容器高度
const avatarContainerHeight = computed(() => {
switch (props.ranking) {

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

@ -29,12 +29,15 @@
/>
<div class="bg">
<itemCenter :imgUrl="imageUrl('bg')" style="position: absolute; z-index: 0">
<itemCenter
:imgUrl="imageUrl('bg')"
style="min-height: 100vw; position: absolute; z-index: 0"
>
<img
v-smart-img
:src="webpUrl('bg')"
alt=""
style="display: block; width: 100%; object-fit: cover"
style="min-height: 100vw; display: block; width: 100%; object-fit: cover"
/>
</itemCenter>
@ -161,6 +164,7 @@
>
<!-- 历史榜首 -->
<itemCenter
style="min-height: 110.3vw"
:imgUrl="imageUrl(getImgName('historyTopBg'))"
:contentStyle="`inset: 25vw 5vw 4vw;
flex-direction: column;
@ -267,6 +271,7 @@
<div style="position: relative; z-index: 1">
<!-- 第2-4名 -->
<itemCenter
style="min-height: 132.2vw"
:imgUrl="imageUrl(getImgName('RankingMain'))"
:contentStyle="`padding: 25% 4% 0;flex-direction: column;`"
>
@ -309,6 +314,7 @@
<!-- 第5-10名 -->
<itemCenter
style="min-height: 90.13vw"
:imgUrl="imageUrl('RankingCenterBg')"
:contentStyle="`padding: 0 5%;flex-direction: column;justify-content: space-around;`"
>
@ -346,6 +352,7 @@
<!-- 第11名开始 -->
<div v-if="showRanking.length > 0" style="position: relative; z-index: 2">
<itemCenter
style="min-height: 26.4vw"
v-for="(listItem, index) in showRanking"
:key="listItem.userId"
:imgUrl="imageUrl('RankingItem')"
@ -462,6 +469,7 @@
>
<!-- 第一名奖励 -->
<itemCenter
style="min-height: 110.3vw"
v-if="top == 0"
:imgUrl="topImg[0]"
:contentStyle="`display: grid;grid-template-columns: repeat(2, 1fr);gap: 2vw;padding: 28vw 4vw 8vw 37vw;`"
@ -547,6 +555,7 @@
<!-- 第2-4、5-7、8-10名奖励 -->
<itemCenter
v-else
style="min-height: 110.3vw"
:imgUrl="topImg[Number(rewardsTop.rankRange) - 1]"
:contentStyle="`display: grid;grid-template-columns: repeat(3, 1fr);gap: 4vw;padding: 28vw 3vw 10vw;`"
>
@ -609,7 +618,7 @@
<!-- 我的排名 -->
<itemCenter
v-if="rankingShow"
style="position: fixed; bottom: 0; z-index: 3"
style="min-height: 24.33vw; position: fixed; bottom: 0; z-index: 3"
:imgUrl="imageUrl('myRankingBg')"
:contentStyle="`padding: 0 8%`"
>
@ -700,6 +709,7 @@
<!-- help弹窗 -->
<div v-show="helpShow" @click.stop>
<itemCenter
style="min-height: 156.33vw"
:imgUrl="imageUrl(getImgName('helpBg'))"
:contentStyle="`inset: 15% 8% 3%;overflow-y: auto;display:block;`"
>
@ -714,7 +724,10 @@
<!-- 每日弹窗 -->
<div v-show="dailyPopUpShow" @click.stop>
<itemCenter :imgUrl="imageUrl(getImgName('dailyPopUpNew'))">
<itemCenter
style="min-height: 147.2vw"
:imgUrl="imageUrl(getImgName('dailyPopUpNew'))"
>
<!-- 关闭按钮 -->
<img
v-smart-img
@ -1158,6 +1171,7 @@ onUnmounted(() => {
}
.timeBox {
min-height: 20.27vw;
display: flex;
justify-content: center;
margin-top: 10vw;