feat(游戏王): 添加图片最小高度

src/views/Ranking/GamesKing/components/topUser.vue

@@ -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) {

src/views/Ranking/GamesKing/index.vue

@@ -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;