chore(周星活动页): 样式调整

src/views/Ranking/WeeklyStar/WeeklyStar.vue

@@ -41,26 +41,26 @@
     </div>
 
     <!-- 倒计时 -->
-    <div style="display: flex; justify-content: center; margin-top: -10%">
+    <div style="display: flex; justify-content: center; margin-top: 0%">
-      <div style="width: 15%">
+      <div style="width: 20%">
         <itemCenter :imgUrl="imageUrl('dayBg')">
           <div class="timeText">{{ Days }}D</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap" style="width: 6px"></div>
-      <div style="width: 15%">
+      <div style="width: 20%">
         <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
           <div class="timeText">{{ Hours }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
-      <div style="width: 15%">
+      <div style="width: 20%">
         <itemCenter :imgUrl="imageUrl('hourAndMinBg')">
           <div class="timeText">{{ Minutes }}</div>
         </itemCenter>
       </div>
       <div class="timeText timeGap">:</div>
-      <div style="width: 15%">
+      <div style="width: 20%">
         <itemCenter :imgUrl="imageUrl('secBg')">
           <div class="timeText">{{ Second }}</div>
         </itemCenter>
@@ -68,7 +68,7 @@
     </div>
 
     <!-- 切换按钮 -->
-    <div style="margin: 22% 0 8% 0; display: flex; justify-content: space-around">
+    <div style="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>
@@ -91,10 +91,11 @@
       <!-- Ranking -->
       <div
         v-show="rankingShow"
-        style="position: relative; width: 90%; left: 50%; transform: translateX(-50%)"
+        style="position: relative; width: 100%; left: 50%; transform: translateX(-50%)"
       >
         <!-- 背景板 -->
         <div>
+          <!-- 头部背景 -->
           <img
             v-smart-img
             :src="imageUrl('RankingMain')"
@@ -102,6 +103,7 @@
             width="100%"
             style="display: block"
           />
+          <!-- 用户项 -->
           <img
             v-smart-img
             :src="imageUrl('RankingItem')"
@@ -111,12 +113,13 @@
             v-for="value in showRanking.length - 1"
             v-if="showRanking.length > 1"
           />
+          <!-- 底框 -->
           <img
             v-smart-img
             :src="imageUrl('RankingBottomBorder')"
             alt=""
             width="100%"
-            style="display: block; margin-top: -12%"
+            style="display: block; margin-top: -9%"
           />
         </div>
 
@@ -180,7 +183,7 @@
           <!-- 第四名开始 -->
           <itemCenter
             v-for="listItem in showRanking"
-            style="margin-top: 3%; position: relative"
+            style="margin-top: 3.3vw; position: relative"
             @click="viewUserInfo(listItem.userId)"
             :imgUrl="imageUrl('itemUser')"
             :contentStyle="`justify-content: flex-start;padding: 0 3%;gap: 8px;`"
@@ -291,17 +294,17 @@
         style="display: flex; flex-direction: column; align-items: center; gap: 20px"
       >
         <!-- top模块 -->
-        <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 90%">
+        <div v-for="(topItem, topIndex) in rewardsList" style="position: relative; width: 100%">
           <!-- top背景图 -->
           <img v-smart-img :src="imageUrl('topBg')" alt="" style="width: 100%; display: block" />
           <!-- 标题 -->
           <div
             style="
               position: absolute;
-              top: 6%;
+              top: 7%;
               left: 25%;
               right: 25%;
-              height: 11%;
+              height: 8.5%;
               display: flex;
               justify-content: center;
               align-items: center;
@@ -349,9 +352,10 @@
 
       <!-- Exchange -->
       <div v-show="exchargeShow" style="display: flex; justify-content: center">
-        <div style="position: relative; width: 90%">
+        <div style="position: relative; width: 100%">
           <!-- 背景图 -->
           <img v-smart-img :src="imageUrl('longBg')" alt="" style="width: 100%; display: block" />
+
           <!-- 标题 -->
           <div
             style="
@@ -370,6 +374,8 @@
           >
             Props
           </div>
+
+          <!-- 内容 -->
           <div
             style="
               position: absolute;
@@ -888,6 +894,7 @@ const RankingHasTop3 = computed(() => {
 // 展示用的榜单
 const showRanking = computed(() => {
   return Ranking.value.filter((_, index) => index >= 3)
+  // return []
 })
 
 // 选中要兑换的商品
@@ -1188,6 +1195,7 @@ onUnmounted(() => {
 
 .timeText {
   color: #fff;
+  font-size: 1.3em;
   font-weight: 860;
 }