feat(周星): 添加图片最小高度

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -17,8 +17,8 @@
       <BackgroundLayer :backgroundImages="[imageUrl('bg')]" />
 
       <div style="width: 100vw; position: relative">
-        <!-- 状态栏占位区域（仅在APP中显示） -->
-        <div v-if="isInAppEnvironment" style="height: 30px"></div>
+        <!-- 状态栏占位区域 -->
+        <div style="height: 30px"></div>
 
         <!-- 帮助按钮 -->
         <img
@@ -34,13 +34,13 @@
           v-smart-img
           :src="imageUrl('history')"
           alt=""
-          style="width: 20%; margin-top: 20px"
+          style="min-height: 20.66vw; width: 20%; margin-top: 20px"
           @click="historyShow = true"
         />
 
         <!-- gifts -->
         <div
-          style="display: flex; justify-content: flex-end; width: 100%"
+          style="min-height: 20.66vw; display: flex; justify-content: flex-end; width: 100%"
           :style="{
             marginTop: isInAppEnvironment
               ? 'calc(65vw - 30px - 10vw - 10vw - 20px)'
@@ -57,34 +57,41 @@
         </div>
 
         <!-- 倒计时 -->
-        <div style="display: flex; justify-content: center; margin-top: 0%">
+        <div style="min-height: 20.37vw; display: flex; justify-content: center; margin-top: 0%">
           <div style="width: 20%">
-            <itemCenter :imgUrl="imageUrl('dayBg')">
+            <itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('dayBg')">
               <div class="timeText">{{ Days }}D</div>
             </itemCenter>
           </div>
           <div class="timeText timeGap" style="width: 6px"></div>
           <div style="width: 20%">
-            <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+            <itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('hourAndMinBg')">
               <div class="timeText">{{ Hours }}</div>
             </itemCenter>
           </div>
           <div class="timeText timeGap">:</div>
           <div style="width: 20%">
-            <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
+            <itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('hourAndMinBg')">
               <div class="timeText">{{ Minutes }}</div>
             </itemCenter>
           </div>
           <div class="timeText timeGap">:</div>
           <div style="width: 20%">
-            <itemCenter :imgUrl="imageUrl('secBg')">
+            <itemCenter style="min-height: 20.37vw" :imgUrl="imageUrl('secBg')">
               <div class="timeText">{{ Second }}</div>
             </itemCenter>
           </div>
         </div>
 
         <!-- 切换按钮 -->
-        <div style="margin: 10% 0 8% 0; display: flex; justify-content: space-around">
+        <div
+          style="
+            min-height: 15.96vw;
+            margin: 10% 0 8% 0;
+            display: flex;
+            justify-content: space-around;
+          "
+        >
           <div style="width: 30%" @click="handleBt('Ranking')">
             <itemCenter :imgUrl="rankingShow ? imageUrl('btActive') : imageUrl('btNoActive')">
               <div class="btTitle">Ranking</div>
@@ -117,7 +124,7 @@
                 :src="imageUrl('RankingMain')"
                 alt=""
                 width="100%"
-                style="display: block"
+                style="min-height: 149.66vw; display: block"
               />
               <!-- 用户项 -->
               <img
@@ -125,7 +132,7 @@
                 :src="imageUrl('RankingItem')"
                 alt=""
                 width="100%"
-                style="display: block; margin-top: -2px"
+                style="min-height: 25.33vw; display: block; margin-top: -2px"
                 v-for="value in showRanking.length - 1"
                 v-if="showRanking.length > 1"
               />
@@ -135,7 +142,7 @@
                 :src="imageUrl('RankingBottomBorder')"
                 alt=""
                 width="100%"
-                style="display: block; margin-top: -9%"
+                style="min-height: 20.66vw; display: block; margin-top: -9%"
               />
             </div>
 
@@ -201,7 +208,7 @@
               <!-- 第四名开始 -->
               <itemCenter
                 v-for="listItem in showRanking"
-                style="margin-top: 3.3vw; position: relative"
+                style="min-height: 21.41vw; margin-top: 3.3vw; position: relative"
                 @click="viewUserInfo(listItem.userId)"
                 :imgUrl="imageUrl('itemUser')"
                 :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
@@ -311,7 +318,10 @@
             style="display: flex; flex-direction: column; align-items: center; gap: 20px"
           >
             <!-- top模块 -->
-            <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
+            <div
+              v-for="(topItem, topIndex) in rewardsList"
+              style="min-height: 158.66vw; position: relative; width: 100%"
+            >
               <!-- top背景图 -->
               <img
                 v-smart-img
@@ -353,7 +363,7 @@
                 >
                   <itemCenter
                     :imgUrl="imageUrl('giftItemBg')"
-                    style="width: 90%; margin-bottom: 3px"
+                    style="min-height: 39.6vw; width: 90%; margin-bottom: 3px"
                   >
                     <!-- gift图 -->
                     <img
@@ -364,7 +374,7 @@
                     />
                   </itemCenter>
 
-                  <itemCenter :imgUrl="imageUrl('btBg')" style="width: 75%">
+                  <itemCenter :imgUrl="imageUrl('btBg')" style="min-height: 12.58vw; width: 75%">
                     <div style="font-weight: 700">
                       {{ showDetail(gift.type, gift.quantity) }}
                     </div>
@@ -376,7 +386,7 @@
 
           <!-- Exchange -->
           <div v-show="exchargeShow" style="display: flex; justify-content: center">
-            <div style="position: relative; width: 100%">
+            <div style="min-height: 153.66vw; position: relative; width: 100%">
               <!-- 背景图 -->
               <img
                 v-smart-img
@@ -419,7 +429,7 @@
                 "
               >
                 <!-- 碎片 -->
-                <div style="display: flex; align-items: center">
+                <div style="min-height: 12.89vw; display: flex; align-items: center">
                   <img
                     v-smart-img
                     :src="imageUrl('debris')"
@@ -438,7 +448,7 @@
                     :key="goodsIndex"
                     style="display: flex; flex-direction: column; align-items: center"
                   >
-                    <itemCenter :imgUrl="imageUrl('giftItemBg')">
+                    <itemCenter style="min-height: 26.44vw" :imgUrl="imageUrl('giftItemBg')">
                       <!-- gift图 -->
                       <img
                         :src="goods.propsGroup.activityRewardProps[0].cover"
@@ -451,7 +461,7 @@
                     </div>
 
                     <itemCenter
-                      style="width: 75%"
+                      style="min-height: 7.55vw; width: 75%"
                       @click="selectGood(goods)"
                       :imgUrl="imageUrl('btBg')"
                     >
@@ -470,6 +480,7 @@
         <!-- 我的排名 -->
         <itemCenter
           style="
+            min-height: 23.66vw;
             width: 100vw;
             background-color: #311300;
             margin-top: 10px;
@@ -576,7 +587,11 @@
           </div>
 
           <!-- history弹窗 -->
-          <div v-show="historyShow" style="position: relative; margin: 20% 0" @click.stop>
+          <div
+            v-show="historyShow"
+            style="min-height: 107.97vw; position: relative; margin: 20% 0"
+            @click.stop
+          >
             <!-- 背景图 -->
             <img
               v-smart-img
@@ -618,7 +633,7 @@
               "
             >
               <!-- 头像 -->
-              <div style="position: relative; width: 75%">
+              <div style="min-height: 43.93vw; position: relative; width: 75%">
                 <!-- 头像框 -->
                 <img
                   v-smart-img
@@ -652,7 +667,7 @@
               </div>
 
               <!-- 名字 -->
-              <div style="position: relative; width: 25%">
+              <div style="min-height: 7.16vw; position: relative; width: 25%">
                 <!-- 背景图 -->
                 <img
                   v-smart-img
@@ -736,7 +751,7 @@
           <!-- gifts弹窗 -->
           <itemCenter
             v-show="giftsShow"
-            style="margin: 20% 0"
+            style="min-height: 76.66vw; margin: 20% 0"
             @click.stop
             :imgUrl="imageUrl('giftsBg')"
             :contentStyle="`padding: 30% 5% 12%;display: flex;justify-content: space-between;`"
@@ -744,7 +759,7 @@
             <!-- 礼物单元 -->
             <div style="width: 30%" v-for="gift in gifts" :key="gift.id">
               <!-- 礼物背景 -->
-              <itemCenter :imgUrl="imageUrl('giftItemBg')">
+              <itemCenter style="min-height: 27vw" :imgUrl="imageUrl('giftItemBg')">
                 <!-- 礼物 -->
                 <img
                   :src="gift.giftPhoto"
@@ -769,7 +784,11 @@
           </itemCenter>
 
           <!-- 交易商品弹窗 -->
-          <div v-if="exchargeGoodsShow" style="position: relative; margin: 20% 0" @click.stop>
+          <div
+            v-if="exchargeGoodsShow"
+            style="min-height: 108vw; position: relative; margin: 20% 0"
+            @click.stop
+          >
             <!-- 背景图 -->
             <img
               v-smart-img

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

@@ -1,7 +1,7 @@
 <!-- src/views/Ranking/WeeklyStar/components/topUser.vue -->
 <template>
   <div style="width: 100%">
-    <div style="position: relative">
+    <div style="position: relative" :style="{ minHeight: isTopOne ? '62.23vw' : '45.85vw' }">
       <img
         v-smart-img
         :src="BorderImgUrl"