chore(cp排行榜): 调整样式

src/views/Ranking/Couple/GamePlay/components/lottery.vue

@@ -49,7 +49,7 @@
             width="50%"
             style="display: block"
           />
-          <div style="font-size: 0.8em; font-weight: 700; color: gray">
+          <div style="font-size: 0.8em; font-weight: 700; color: #ff3b76">
             {{ prize.prizeName }}
           </div>
 

src/views/Ranking/Couple/GamePlay/components/signInItem.vue

@@ -2,6 +2,7 @@
   <div style="width: 100%; position: relative">
     <itemCenter
       :imgUrl="imageUrl('rewardBg')"
+      flip="true"
       :contentStyle="`inset: 4vw 6vw 10vw;`"
       :class="{
         'grayscale-container':
@@ -15,6 +16,7 @@
         <itemCenter
           v-for="(goods, index) in dailyConfigs"
           :imgUrl="imageUrl('rewardGoodsBg')"
+          flip="true"
           :contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
           :style="getGridPosition(index)"
         >

src/views/Ranking/Couple/Ranking.vue

@@ -77,21 +77,7 @@
     <!-- 排行榜 -->
     <div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
       <!-- 取消按钮 -->
-      <img
+      <img v-smart-img :src="imageUrl('helpBt')" alt="" class="helpBt" @click="helpShow = true" />
-        v-smart-img
-        :src="imageUrl('helpBt')"
-        alt=""
-        style="
-          display: block;
-          width: 8vw;
-          object-fit: cover;
-          position: absolute;
-          z-index: 3;
-          top: 0;
-          right: 3vw;
-        "
-        @click="helpShow = true"
-      />
 
       <!-- 前三名 -->
       <TopUser
@@ -105,6 +91,7 @@
       <itemCenter
         v-for="item in showRanking"
         :imgUrl="imageUrl(`rankingItemBg`)"
+        flip="true"
         :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
       >
         <!-- 排名 -->
@@ -127,8 +114,27 @@
               display: flex;
               justify-content: space-between;
               align-items: center;
+
+              position: relative;
             "
           >
+            <!-- 情侣标志 -->
+            <div
+              style="
+                position: absolute;
+                inset: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              "
+            >
+              <img
+                :src="imageUrl(`rankingCoupleSign`)"
+                alt=""
+                style="width: 15vw; display: block; object-fit: cover"
+              />
+            </div>
+
             <!-- 情侣1头像 -->
             <img
               v-smart-img
@@ -644,4 +650,19 @@ onUnmounted(() => {
 [dir='rtl'] .timeBox {
   flex-direction: row-reverse;
 }
+
+.helpBt {
+  display: block;
+  width: 8vw;
+  object-fit: cover;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  right: 3vw;
+}
+
+[dir='rtl'] .helpBt {
+  right: unset;
+  left: 3vw;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%">
-    <itemCenter :imgUrl="BorderImgUrl" :contentStyle="`display:block;`">
+    <itemCenter :imgUrl="BorderImgUrl" flip="true" :contentStyle="`display:block;`">
       <!-- 第一名 -->
       <div v-if="isTopOne" style="width: 98vw; height: 80%; position: relative">
         <!-- 查看个人信息按钮 -->
@@ -239,7 +239,7 @@
       </div>
 
       <!-- 奖励 -->
-      <div style="position: absolute; bottom: 0; left: 15vw; right: 4vw; height: 13.5vw">
+      <div class="reward-wrapper">
         <div style="height: 100%; display: flex; align-items: center; overflow: hidden">
           <!-- 滚动容器 -->
           <div class="scroll-wrapper">
@@ -377,6 +377,19 @@ const clickReward = (item) => {
   font-size: 0.6em;
 }
 
+.reward-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 15vw;
+  right: 4vw;
+  height: 13.5vw;
+}
+
+[dir='rtl'] .reward-wrapper {
+  left: 4vw;
+  right: 15vw;
+}
+
 .scroll-wrapper {
   display: flex;
   width: fit-content;

src/views/Ranking/Couple/index.vue

@@ -969,14 +969,11 @@
                     alt=""
                     style="width: 10vw; min-width: 0; object-fit: cover; display: block"
                   />
-                  <div style="font-weight: 590; font-size: 0.9em">
+                  <div style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left">
                     {{ record?.prize?.prizeName }}
                   </div>
-                  <div v-if="record.prize?.days" style="font-weight: 590; font-size: 0.9em">
-                    *{{ record?.prize?.days }}Days
                 </div>
-                </div>
+                <div style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left">
-                <div style="font-weight: 510; font-size: 0.8em">
                   {{ formatUTCCustom(record.drawTime) }}
                 </div>
               </div>
@@ -1053,11 +1050,27 @@
                       display: block;
                     "
                   />
-                  <div style="min-width: 0; font-weight: 590; font-size: 0.9em">
+                  <div
+                    style="
+                      min-width: 0;
+                      font-weight: 590;
+                      font-size: 0.9em;
+                      direction: ltr;
+                      text-align: left;
+                    "
+                  >
                     {{ record.changeType == 2 ? '-' : '+' }}{{ record.changeAmount }}
                   </div>
                 </div>
-                <div style="min-width: 0; font-weight: 510; font-size: 0.8em">
+                <div
+                  style="
+                    min-width: 0;
+                    font-weight: 510;
+                    font-size: 0.8em;
+                    direction: ltr;
+                    text-align: left;
+                  "
+                >
                   {{ formatUTCCustom(record.createdAt) }}
                 </div>
               </div>
@@ -1673,9 +1686,13 @@ const preloadCriticalImages = async () => {
     // 排行榜
     imageUrl(`timeBg`),
     imageUrl('helpBt'),
-    imageUrl(`top1Ranking`),
+    imageUrl(`top1`),
+    imageUrl(`top2-3`),
     imageUrl(`top2Ranking`),
+    imageUrl(`top2Frame`),
     imageUrl(`top3Ranking`),
+    imageUrl(`top3Frame`),
+    imageUrl(`rankingCoupleSign`),
     imageUrl(`rankingItemBg`),
     imageUrl('distribution'),
     imageUrl(`num0`),