chore(cp排行榜): 调整样式，补充翻译

src/locales/ar.json

@@ -463,5 +463,6 @@
   "consecutive_check_in_reward": "مكافأة تسجيل الدخول المتتالية",
   "check_in_successful": "تم تسجيل الدخول بنجاح.",
   "you_get": "لقد حصلت على",
-  "not_enough_pieces": "ليس لديك قطع كافية"
+  "not_enough_pieces": "ليس لديك قطع كافية",
+  "confirm_item_exchange": "هل أنت متأكد أنك تريد تبديل العنصر الحالي؟"
 }

src/locales/en.json

@@ -463,5 +463,6 @@
   "consecutive_check_in_reward": "Consecutive Check-in Reward",
   "check_in_successful": "Check-in successful.",
   "you_get": "You Get",
-  "not_enough_pieces": "You don't have enough pieces"
+  "not_enough_pieces": "You don't have enough pieces",
+  "confirm_item_exchange": "Are you sure you want to exchange the current item?"
 }

src/locales/zh.json

@@ -463,5 +463,6 @@
   "consecutive_check_in_reward": "连续签到奖励",
   "check_in_successful": "签到成功。",
   "you_get": "您获得了",
-  "not_enough_pieces": "您没有足够的碎片"
+  "not_enough_pieces": "您没有足够的碎片",
+  "confirm_item_exchange": "您确定要兑换当前物品吗？"
 }

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

@@ -1,7 +1,10 @@
 <template>
   <div>
     <!-- 规则&倒计时 -->
-    <itemCenter :imgUrl="imageUrl('checkInRule')" :contentStyle="`inset: 8vw 28vw 105vw;`">
+    <itemCenter
+      :imgUrl="imageUrl(getImgName('checkInRule'))"
+      :contentStyle="`inset: 8vw 28vw 105vw;`"
+    >
       <div class="timeBox">
         <div class="timeText" style="">{{ Days }}D</div>
         <div class="timeText timeGap"></div>

src/views/Ranking/Couple/Ranking.vue

@@ -76,16 +76,29 @@
 
     <!-- 排行榜 -->
     <div style="position: relative; display: flex; flex-direction: column; gap: 2vw">
-      <!-- 取消按钮 -->
+      <!-- 帮助按钮 -->
       <img v-smart-img :src="imageUrl('helpBt')" alt="" class="helpBt" @click="helpShow = true" />
 
+      <!-- 第一名排名图片 -->
+      <itemCenter
+        style="width: 9vw"
+        class="rankingBg"
+        :imgUrl="imageUrl(`top1RankingBg`)"
+        :flip="true"
+        :contentStyle="``"
+      >
+        <img :src="imageUrl('num1')" alt="" style="width: 3vw; display: block" />
+      </itemCenter>
+
       <!-- 前三名 -->
-      <TopUser
-        v-for="(value, index) in 3"
-        :ranking="index + 1 + ''"
-        :rankingItem="RankingHasTop3[index] || {}"
-        :rewards="rewardsTop3[index] || {}"
-      />
+      <div style="margin-top: 2vw; display: flex; flex-direction: column; gap: 2vw">
+        <TopUser
+          v-for="(value, index) in 3"
+          :ranking="index + 1 + ''"
+          :rankingItem="RankingHasTop3[index] || {}"
+          :rewards="rewardsTop3[index] || {}"
+        />
+      </div>
 
       <!-- 从第4名开始 -->
       <itemCenter
@@ -95,14 +108,21 @@
         :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
       >
         <!-- 排名 -->
-        <div style="width: 10vw; display: flex; justify-content: center; align-items: center">
-          <img
-            v-smart-img
-            v-for="(digit, index) in getRankDigits(item.rank)"
-            :src="getDigitImageUrl(digit)"
-            style="display: block; width: 3vw; object-fit: cover"
-          />
-        </div>
+        <itemCenter
+          style="width: 9vw"
+          :imgUrl="imageUrl(`top1RankingBg`)"
+          :flip="true"
+          :contentStyle="``"
+        >
+          <div class="rankingText">
+            <img
+              v-smart-img
+              v-for="(digit, index) in getRankDigits(item.rank)"
+              :src="getDigitImageUrl(digit)"
+              style="display: block; width: 3vw; object-fit: cover"
+            />
+          </div>
+        </itemCenter>
 
         <!-- 头像 -->
         <div style="width: 36vw">
@@ -665,4 +685,29 @@ onUnmounted(() => {
   right: unset;
   left: 3vw;
 }
+
+.rankingBg {
+  position: absolute;
+  z-index: 3;
+  top: 6vw;
+  left: 3vw;
+}
+
+.rankingText {
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+[dir='rtl'] .rankingText {
+  flex-direction: row-reverse;
+}
+
+[dir='rtl'] .rankingBg {
+  left: unset;
+  right: 3vw;
+}
 </style>

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

@@ -22,7 +22,7 @@
           style="
             position: absolute;
             z-index: -1;
-            top: 17vw;
+            top: 12vw;
             left: 0;
             width: 100%;
             height: 25vw;
@@ -63,7 +63,7 @@
         </div>
 
         <!-- 顶部距离 -->
-        <div style="height: 27vw"></div>
+        <div style="height: 22vw"></div>
         <!-- 贡献值 -->
         <div style="height: 17vw; display: flex; justify-content: center; align-items: center">
           <div style="color: #fff; font-weight: 700">
@@ -141,7 +141,15 @@
       <!-- 第二三名 -->
       <div v-else style="height: 65%; padding: 0 7%; display: flex; align-items: center">
         <!-- 排名 -->
-        <img :src="imageUrl(`top${ranking}Ranking`)" alt="" style="width: 8vw" />
+        <itemCenter
+          style="width: 9vw"
+          class="rankingBg"
+          :imgUrl="imageUrl(`top${ranking}RankingBg`)"
+          :flip="true"
+          :contentStyle="``"
+        >
+          <img :src="imageUrl(`num${ranking}`)" alt="" style="width: 3vw; display: block" />
+        </itemCenter>
 
         <!-- 头像 -->
         <div style="width: 36vw; position: relative">

src/views/Ranking/Couple/index.vue

@@ -177,6 +177,7 @@
         <!-- 有伴侣和排名 -->
         <itemCenter
           style="width: 100%"
+          :flip="true"
           v-if="myRanking?.cpUserId"
           :imgUrl="imageUrl('myRankingBg')"
           :contentStyle="`padding: 0 5%;justify-content: flex-start;`"
@@ -1092,7 +1093,7 @@
 
           <!-- 内容 -->
           <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-            Are you sure you want to exchange the current item?
+            {{ t('confirm_item_exchange') }}
           </div>
 
           <!-- 按钮 -->