diff --git a/src/views/Ranking/Couple/GamePlay/Gameplay.vue b/src/views/Ranking/Couple/GamePlay/Gameplay.vue
index 698fe50..13ffa69 100644
--- a/src/views/Ranking/Couple/GamePlay/Gameplay.vue
+++ b/src/views/Ranking/Couple/GamePlay/Gameplay.vue
@@ -158,7 +158,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/GamePlay/components/exchange.vue b/src/views/Ranking/Couple/GamePlay/components/exchange.vue
index be2de53..3278e3c 100644
--- a/src/views/Ranking/Couple/GamePlay/components/exchange.vue
+++ b/src/views/Ranking/Couple/GamePlay/components/exchange.vue
@@ -101,7 +101,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/GamePlay/components/lottery.vue b/src/views/Ranking/Couple/GamePlay/components/lottery.vue
index 08a4ef7..482b79b 100644
--- a/src/views/Ranking/Couple/GamePlay/components/lottery.vue
+++ b/src/views/Ranking/Couple/GamePlay/components/lottery.vue
@@ -242,7 +242,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/GamePlay/components/signIn.vue b/src/views/Ranking/Couple/GamePlay/components/signIn.vue
index 17677d0..b761365 100644
--- a/src/views/Ranking/Couple/GamePlay/components/signIn.vue
+++ b/src/views/Ranking/Couple/GamePlay/components/signIn.vue
@@ -104,7 +104,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/GamePlay/components/signInItem.vue b/src/views/Ranking/Couple/GamePlay/components/signInItem.vue
index 25cb402..5c8ac01 100644
--- a/src/views/Ranking/Couple/GamePlay/components/signInItem.vue
+++ b/src/views/Ranking/Couple/GamePlay/components/signInItem.vue
@@ -168,7 +168,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/Ranking.vue b/src/views/Ranking/Couple/Ranking.vue
index d9049ac..2597f2b 100644
--- a/src/views/Ranking/Couple/Ranking.vue
+++ b/src/views/Ranking/Couple/Ranking.vue
@@ -269,7 +269,7 @@ const currentLangType = computed(() => {
 })
 
 const isLoading = ref(true) // 预加载状态
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 const getImgName = (filename) => {
   return currentLangType.value === 'ar' ? `${filename}_ar` : filename
diff --git a/src/views/Ranking/Couple/components/Barrage.vue b/src/views/Ranking/Couple/components/Barrage.vue
index beacad7..57510a2 100644
--- a/src/views/Ranking/Couple/components/Barrage.vue
+++ b/src/views/Ranking/Couple/components/Barrage.vue
@@ -104,7 +104,7 @@ import { shouldUseLiteAnimations } from '@/utils/performanceMode.js'
 
 const { locale } = useI18n()
 
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 const props = defineProps({
   barrageList: {
diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue
index 5ab849d..708380d 100644
--- a/src/views/Ranking/Couple/components/topUser.vue
+++ b/src/views/Ranking/Couple/components/topUser.vue
@@ -323,7 +323,7 @@ const currentLangType = computed(() => {
 })
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index bfafd1f..e6ee073 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -395,936 +395,965 @@
       <!-- 弹窗遮罩层 -->
       <maskLayer class="couple-popup-mask" :maskLayerShow="maskLayerShow" :lockScroll="false">
         <div class="couple-popup-content" @click.self="closedPopup">
-        <!-- 我的伴侣弹窗 -->
-        <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
-          <div
-            style="
-              border-radius: 16px 16px 0 0;
-              background:
-                radial-gradient(
-                  171.8% 117.34% at 34.23% 104.78%,
-                  rgba(255, 188, 221, 0) 0%,
-                  #ffbcdd 100%
-                ),
-                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
-                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
-              max-height: 80vh;
-              overflow: hidden;
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 10px;
-              padding: 20px;
-            "
-            @click.stop
-          >
+          <!-- 我的伴侣弹窗 -->
+          <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
             <div
-              style="margin: 0; font-size: 1.2em; font-weight: 600; color: #fff; margin-bottom: 4vw"
+              style="
+                border-radius: 16px 16px 0 0;
+                background:
+                  radial-gradient(
+                    171.8% 117.34% at 34.23% 104.78%,
+                    rgba(255, 188, 221, 0) 0%,
+                    #ffbcdd 100%
+                  ),
+                  linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
+                  linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
+                max-height: 80vh;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 10px;
+                padding: 20px;
+              "
+              @click.stop
             >
-              {{ t('my_couple') }}
-            </div>
-
-            <!-- 有伴侣 -->
-            <div
-              v-if="myCouples.length > 0"
-              style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
-            >
-              <!-- 伴侣列表 -->
               <div
-                v-for="(couple, index) in myCouples"
-                :key="index"
-                style="position: relative"
-                @click="selectCouple(couple.cpUserProfile)"
+                style="
+                  margin: 0;
+                  font-size: 1.2em;
+                  font-weight: 600;
+                  color: #fff;
+                  margin-bottom: 4vw;
+                "
               >
-                <itemCenter
-                  :imgUrl="webpUrl('coupleItem')"
-                  :flip="true"
-                  :contentStyle="`justify-content: space-between;`"
+                {{ t('my_couple') }}
+              </div>
+
+              <!-- 有伴侣 -->
+              <div
+                v-if="myCouples.length > 0"
+                style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
+              >
+                <!-- 伴侣列表 -->
+                <div
+                  v-for="(couple, index) in myCouples"
+                  :key="index"
+                  style="position: relative"
+                  @click="selectCouple(couple.cpUserProfile)"
                 >
-                  <div class="cpl-x2">
-                    <img
-                      :src="couple?.cpUserProfile.userAvatar || ''"
-                      alt=""
-                      style="width: 3em; aspect-ratio: 1/1; border-radius: 50%"
-                      @error="handleAvatarImageError"
-                    />
-                    <div style="flex: 1; min-width: 0">
-                      <div
-                        style="
-                          font-size: 0.9em;
-                          text-overflow: ellipsis;
-                          overflow: hidden;
-                          white-space: nowrap;
-                        "
-                      >
-                        {{ couple?.cpUserProfile.userNickname }}
-                      </div>
-                      <div style="font-size: 0.8em; color: rgba(255, 255, 255, 0.6)">
-                        ID：{{ couple?.cpUserProfile.account }}
+                  <itemCenter
+                    :imgUrl="webpUrl('coupleItem')"
+                    :flip="true"
+                    :contentStyle="`justify-content: space-between;`"
+                  >
+                    <div class="cpl-x2">
+                      <img
+                        :src="couple?.cpUserProfile.userAvatar || ''"
+                        alt=""
+                        style="width: 3em; aspect-ratio: 1/1; border-radius: 50%"
+                        @error="handleAvatarImageError"
+                      />
+                      <div style="flex: 1; min-width: 0">
+                        <div
+                          style="
+                            font-size: 0.9em;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                            white-space: nowrap;
+                          "
+                        >
+                          {{ couple?.cpUserProfile.userNickname }}
+                        </div>
+                        <div style="font-size: 0.8em; color: rgba(255, 255, 255, 0.6)">
+                          ID：{{ couple?.cpUserProfile.account }}
+                        </div>
                       </div>
                     </div>
-                  </div>
+                    <div
+                      style="
+                        width: 10.8%;
+                        min-width: 0;
+                        align-self: stretch;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                      "
+                    >
+                      <div
+                        v-if="selectedCouple.account === couple?.cpUserProfile.account"
+                        style="
+                          width: 30%;
+                          aspect-ratio: 1/1;
+                          border-radius: 50%;
+                          background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
+                        "
+                      ></div>
+                    </div>
+                  </itemCenter>
+                </div>
+
+                <!-- 发送按钮 -->
+                <button
+                  style="
+                    width: 80%;
+                    padding: 12px 16px;
+                    border: none;
+                    color: #fff;
+                    font-weight: 600;
+                  "
+                  :style="
+                    selectedCouple.account
+                      ? 'border-radius: 200px;background: linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768;box-shadow: 0 1px 4.5px 0 rgba(0, 0, 0, 0.10), -1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset, 1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, 3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset;'
+                      : 'border-radius: 32px;background: linear-gradient(135deg, rgba(162, 162, 162, 0.50) 2.82%, rgba(100, 100, 100, 0.50) 99.15%);'
+                  "
+                  :disabled="!selectedCouple.account"
+                  @click="showPopup('writeLetter')"
+                >
+                  {{ t('send_love_letter') }}
+                </button>
+              </div>
+
+              <!-- 无伴侣 -->
+              <div
+                v-else
+                style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
+              >
+                <img :src="webpUrl('noCoupleSign')" alt="" style="width: 50%; display: block" />
+                <p style="color: rgba(0, 0, 0, 0.4); font-size: 1em; font-weight: 700">
+                  {{ t('no_couples') }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <!-- 居中弹窗 -->
+          <div
+            v-show="centerPopupShow"
+            style="
+              width: 100vw;
+              height: 100vh;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            @click.self="closedPopup"
+          >
+            <!-- 发送情书二次确认弹窗 -->
+            <div
+              v-show="confirmShow"
+              style="
+                width: 90%;
+                border-radius: 12px;
+                background:
+                  radial-gradient(
+                    171.8% 117.34% at 34.23% 104.78%,
+                    rgba(255, 188, 221, 0) 0%,
+                    #ffbcdd 100%
+                  ),
+                  linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
+                  linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
+                padding: 20px;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 2vw;
+              "
+              @click.stop
+            >
+              <!-- 标题 -->
+              <h3 style="font-size: 1.1em; font-weight: 700">
+                {{ t('love_letter_title') }}
+              </h3>
+
+              <!-- 内容 -->
+              <div style="font-size: 0.8em; font-weight: 500">
+                {{ t('spend_5000_coins_confess') }}
+              </div>
+
+              <!-- 按钮 -->
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-around;
+                  align-items: center;
+                "
+              >
+                <!-- 取消按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 200px;
+                    background:
+                      linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff879c;
+
+                    box-shadow:
+                      -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+                      1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+                    backdrop-filter: blur(5000px);
+                    font-weight: 800;
+                  "
+                  @click="cancelSend"
+                >
+                  {{ t('cancel') }}
+                </div>
+
+                <!-- 发送按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 200px;
+                    background:
+                      linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
+                    box-shadow:
+                      0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
+                      -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+                      1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+                    font-weight: 800;
+                  "
+                  @click="sendLoveLetter"
+                >
+                  {{ t('confirm') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 金币不足提示 -->
+            <div
+              v-show="TipsShow"
+              style="display: flex; justify-content: center; width: 100vw"
+              @click.stop
+            >
+              <div
+                style="
+                  width: 60vw;
+                  padding: 2vw;
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+
+                  border-radius: 8px;
+                  background: rgba(255, 255, 255, 0.4);
+                  backdrop-filter: blur(32px);
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                  {{ t('insufficient_wallet_balance') }}
+                </div>
+                <div
+                  style="
+                    font-size: 0.8em;
+                    color: #e14f69;
+                    font-weight: 700;
+                    box-sizing: border-box;
+                    border-bottom: 1px solid #e14f69;
+                  "
+                  @click="gotoRecharge"
+                >
+                  {{ t('recharge_now') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 需要补签提示 -->
+            <div
+              v-show="needCheckInTipsShow"
+              style="display: flex; justify-content: center; width: 100vw"
+              @click.stop
+            >
+              <div
+                style="
+                  width: 60vw;
+                  padding: 2vw;
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+
+                  border-radius: 8px;
+                  background: rgba(255, 255, 255, 0.4);
+                  backdrop-filter: blur(32px);
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                  {{ t('consecutive_check_in_reward') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 签到成功提示 -->
+            <div
+              v-show="signInSuccessShow"
+              style="display: flex; justify-content: center; width: 100vw"
+              @click.stop
+            >
+              <div
+                style="
+                  width: 60vw;
+                  padding: 2vw;
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+
+                  border-radius: 8px;
+                  background: rgba(255, 255, 255, 0.4);
+                  backdrop-filter: blur(32px);
+                "
+              >
+                <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                  {{ t('check_in_successful') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 我的最新情书 -->
+            <itemCenter
+              v-if="lastLetterShow"
+              :imgUrl="webpUrl(getImgName('lastLetterBg'))"
+              :contentStyle="`inset: 30vw 17vw 27vw;
+                flex-direction: column;
+                justify-content: flex-start;
+                align-items: center;
+                gap:2vw`"
+              @click.stop
+            >
+              <!-- 发送者 -->
+              <div style="width: 100%; display: flex; align-items: center; gap: 2vw">
+                <img
+                  :src="latestLoveLetter.senderAvatar"
+                  alt=""
+                  style="
+                    display: block;
+                    min-width: 0;
+                    width: 4em;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+                  "
+                />
+                <div
+                  style="
+                    flex: 1;
+                    min-width: 0;
+                    align-self: stretch;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    gap: 1vw;
+                  "
+                >
                   <div
                     style="
-                      width: 10.8%;
                       min-width: 0;
+                      color: #ff79a1;
+                      font-size: 0.9em;
+                      font-weight: 700;
+
+                      text-overflow: ellipsis;
+                      overflow: hidden;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ latestLoveLetter.senderNickname }}
+                  </div>
+                  <div style="font-size: 0.8em; font-weight: 500; color: #ff79a1">
+                    ID：{{ latestLoveLetter.senderAccount }}
+                  </div>
+                </div>
+              </div>
+
+              <!-- 情书内容(保留换行) -->
+              <div
+                class="scrollY"
+                style="
+                  flex: 1;
+                  width: 100%;
+                  color: #ff79a1;
+                  font-weight: 600;
+                  white-space: pre-wrap;
+
+                  overflow-y: auto;
+                "
+              >
+                {{ latestLoveLetter.content }}
+              </div>
+            </itemCenter>
+
+            <!-- 抽奖结果 -->
+            <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
+              <itemCenter
+                :imgUrl="webpUrl('resultBg')"
+                :contentStyle="`inset: 37vw 15vw 16vw;
+                flex-direction: column;
+                justify-content: space-between;
+                gap:2vw`"
+              >
+                <div
+                  style="
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
+                  <!-- 上一个奖品 -->
+                  <div
+                    style="
+                      width: 8vw;
                       align-self: stretch;
+
                       display: flex;
                       justify-content: center;
                       align-items: center;
                     "
                   >
-                    <div
-                      v-if="selectedCouple.account === couple?.cpUserProfile.account"
-                      style="
-                        width: 30%;
-                        aspect-ratio: 1/1;
-                        border-radius: 50%;
-                        background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
-                      "
-                    ></div>
-                  </div>
-                </itemCenter>
-              </div>
-
-              <!-- 发送按钮 -->
-              <button
-                style="width: 80%; padding: 12px 16px; border: none; color: #fff; font-weight: 600"
-                :style="
-                  selectedCouple.account
-                    ? 'border-radius: 200px;background: linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768;box-shadow: 0 1px 4.5px 0 rgba(0, 0, 0, 0.10), -1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset, 1px 0 5px 0 rgba(255, 255, 255, 0.70) inset, 3.5px 0 7.5px 0 rgba(255, 255, 255, 0.20) inset;'
-                    : 'border-radius: 32px;background: linear-gradient(135deg, rgba(162, 162, 162, 0.50) 2.82%, rgba(100, 100, 100, 0.50) 99.15%);'
-                "
-                :disabled="!selectedCouple.account"
-                @click="showPopup('writeLetter')"
-              >
-                {{ t('send_love_letter') }}
-              </button>
-            </div>
-
-            <!-- 无伴侣 -->
-            <div
-              v-else
-              style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
-            >
-              <img :src="webpUrl('noCoupleSign')" alt="" style="width: 50%; display: block" />
-              <p style="color: rgba(0, 0, 0, 0.4); font-size: 1em; font-weight: 700">
-                {{ t('no_couples') }}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <!-- 居中弹窗 -->
-        <div
-          v-show="centerPopupShow"
-          style="
-            width: 100vw;
-            height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-          "
-          @click.self="closedPopup"
-        >
-          <!-- 发送情书二次确认弹窗 -->
-          <div
-            v-show="confirmShow"
-            style="
-              width: 90%;
-              border-radius: 12px;
-              background:
-                radial-gradient(
-                  171.8% 117.34% at 34.23% 104.78%,
-                  rgba(255, 188, 221, 0) 0%,
-                  #ffbcdd 100%
-                ),
-                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
-                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
-              padding: 20px;
-
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 2vw;
-            "
-            @click.stop
-          >
-            <!-- 标题 -->
-            <h3 style="font-size: 1.1em; font-weight: 700">
-              {{ t('love_letter_title') }}
-            </h3>
-
-            <!-- 内容 -->
-            <div style="font-size: 0.8em; font-weight: 500">
-              {{ t('spend_5000_coins_confess') }}
-            </div>
-
-            <!-- 按钮 -->
-            <div
-              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
-            >
-              <!-- 取消按钮 -->
-              <div
-                style="
-                  padding: 12px 20px;
-                  border-radius: 200px;
-                  background:
-                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff879c;
-
-                  box-shadow:
-                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
-                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
-                  backdrop-filter: blur(5000px);
-                  font-weight: 800;
-                "
-                @click="cancelSend"
-              >
-                {{ t('cancel') }}
-              </div>
-
-              <!-- 发送按钮 -->
-              <div
-                style="
-                  padding: 12px 20px;
-                  border-radius: 200px;
-                  background:
-                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
-                  box-shadow:
-                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
-                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
-                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
-                  font-weight: 800;
-                "
-                @click="sendLoveLetter"
-              >
-                {{ t('confirm') }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 金币不足提示 -->
-          <div
-            v-show="TipsShow"
-            style="display: flex; justify-content: center; width: 100vw"
-            @click.stop
-          >
-            <div
-              style="
-                width: 60vw;
-                padding: 2vw;
-
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.4);
-                backdrop-filter: blur(32px);
-              "
-            >
-              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
-                {{ t('insufficient_wallet_balance') }}
-              </div>
-              <div
-                style="
-                  font-size: 0.8em;
-                  color: #e14f69;
-                  font-weight: 700;
-                  box-sizing: border-box;
-                  border-bottom: 1px solid #e14f69;
-                "
-                @click="gotoRecharge"
-              >
-                {{ t('recharge_now') }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 需要补签提示 -->
-          <div
-            v-show="needCheckInTipsShow"
-            style="display: flex; justify-content: center; width: 100vw"
-            @click.stop
-          >
-            <div
-              style="
-                width: 60vw;
-                padding: 2vw;
-
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.4);
-                backdrop-filter: blur(32px);
-              "
-            >
-              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
-                {{ t('consecutive_check_in_reward') }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 签到成功提示 -->
-          <div
-            v-show="signInSuccessShow"
-            style="display: flex; justify-content: center; width: 100vw"
-            @click.stop
-          >
-            <div
-              style="
-                width: 60vw;
-                padding: 2vw;
-
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.4);
-                backdrop-filter: blur(32px);
-              "
-            >
-              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
-                {{ t('check_in_successful') }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 我的最新情书 -->
-          <itemCenter
-            v-if="lastLetterShow"
-            :imgUrl="webpUrl(getImgName('lastLetterBg'))"
-            :contentStyle="`inset: 30vw 17vw 27vw;
-                flex-direction: column;
-                justify-content: flex-start;
-                align-items: center;
-                gap:2vw`"
-            @click.stop
-          >
-            <!-- 发送者 -->
-            <div style="width: 100%; display: flex; align-items: center; gap: 2vw">
-              <img
-                :src="latestLoveLetter.senderAvatar"
-                alt=""
-                style="
-                  display: block;
-                  min-width: 0;
-                  width: 4em;
-                  aspect-ratio: 1/1;
-                  border-radius: 50%;
-                "
-              />
-              <div
-                style="
-                  flex: 1;
-                  min-width: 0;
-                  align-self: stretch;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  gap: 1vw;
-                "
-              >
-                <div
-                  style="
-                    min-width: 0;
-                    color: #ff79a1;
-                    font-size: 0.9em;
-                    font-weight: 700;
-
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                  "
-                >
-                  {{ latestLoveLetter.senderNickname }}
-                </div>
-                <div style="font-size: 0.8em; font-weight: 500; color: #ff79a1">
-                  ID：{{ latestLoveLetter.senderAccount }}
-                </div>
-              </div>
-            </div>
-
-            <!-- 情书内容(保留换行) -->
-            <div
-              class="scrollY"
-              style="
-                flex: 1;
-                width: 100%;
-                color: #ff79a1;
-                font-weight: 600;
-                white-space: pre-wrap;
-
-                overflow-y: auto;
-              "
-            >
-              {{ latestLoveLetter.content }}
-            </div>
-          </itemCenter>
-
-          <!-- 抽奖结果 -->
-          <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
-            <itemCenter
-              :imgUrl="webpUrl('resultBg')"
-              :contentStyle="`inset: 37vw 15vw 16vw;
-                flex-direction: column;
-                justify-content: space-between;
-                gap:2vw`"
-            >
-              <div
-                style="
-                  width: 100%;
-                  display: flex;
-                  justify-content: space-between;
-                  align-items: center;
-                "
-              >
-                <!-- 上一个奖品 -->
-                <div
-                  style="
-                    width: 8vw;
-                    align-self: stretch;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img
-                    class="flipImg"
-                    v-show="result.length > 1 && resultShowIndex > 0"
-                    :src="webpUrl('resultBack')"
-                    alt=""
-                    style="display: block; width: 80%; object-fit: cover"
-                    @click="resultShowIndex--"
-                  />
-                </div>
-                <!-- 奖品 -->
-                <img
-                  :src="result[resultShowIndex]?.prize?.prizeImage"
-                  alt=""
-                  width="45%"
-                  style="display: block"
-                />
-                <!-- 下一个奖品 -->
-                <div
-                  style="
-                    width: 8vw;
-                    align-self: stretch;
-
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  <img
-                    v-smart-img
-                    class="flipImg"
-                    v-show="result.length > 1 && resultShowIndex + 1 < result.length"
-                    :src="webpUrl('resultNext')"
-                    alt=""
-                    style="display: block; width: 80%; object-fit: cover"
-                    @click="resultShowIndex++"
-                  />
-                </div>
-              </div>
-
-              <!-- 奖品说明 -->
-              <div
-                style="
-                  width: 100%;
-                  height: 5vw;
-                  text-align: center;
-                  font-size: 0.9em;
-                  font-weight: 590;
-
-                  position: relative;
-                  color: #ff79a1;
-                "
-              >
-                {{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
-                <div v-if="result.length > 1" class="resultNum">
-                  {{ resultShowIndex + 1 }} / {{ result.length }}
-                </div>
-              </div>
-
-              <!-- 关闭弹窗按钮 -->
-              <div
-                style="width: 30vw; height: 10vw"
-                @click.stop.prevent="closedPopup"
-                @touchend.stop.prevent="closedPopup"
-              ></div>
-            </itemCenter>
-          </div>
-
-          <!-- 中奖历史 -->
-          <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
-            <itemCenter
-              :imgUrl="webpUrl(getImgName('recordBg'))"
-              :contentStyle="`padding: 28vw 12vw 25vw;`"
-            >
-              <div
-                style="
-                  width: 100%;
-                  height: 100%;
-                  overflow-y: auto;
-                  display: flex;
-                  flex-direction: column;
-                  gap: 8px;
-                "
-                class="scrollY"
-              >
-                <div
-                  v-for="(record, index) in myRecords"
-                  style="
-                    border-radius: 12px;
-                    border: 2px solid #fff;
-                    background: linear-gradient(
-                      264deg,
-                      rgba(255, 220, 220, 0.4) 10.17%,
-                      rgba(255, 151, 151, 0.4) 60.22%,
-                      rgba(255, 220, 220, 0.4) 103.12%
-                    );
-                    box-shadow:
-                      0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
-                      0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
-                      0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
-                      0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
-                    backdrop-filter: blur(4.5px);
-
-                    display: flex;
-                    padding: 12px;
-                    justify-content: space-between;
-                    align-items: center;
-                  "
-                >
-                  <div style="display: flex; align-items: center; gap: 4px">
                     <img
-                      :src="record?.prize?.prizeImage || ''"
+                      class="flipImg"
+                      v-show="result.length > 1 && resultShowIndex > 0"
+                      :src="webpUrl('resultBack')"
                       alt=""
-                      style="width: 10vw; min-width: 0; object-fit: cover; display: block"
+                      style="display: block; width: 80%; object-fit: cover"
+                      @click="resultShowIndex--"
                     />
+                  </div>
+                  <!-- 奖品 -->
+                  <img
+                    :src="result[resultShowIndex]?.prize?.prizeImage"
+                    alt=""
+                    width="45%"
+                    style="display: block"
+                  />
+                  <!-- 下一个奖品 -->
+                  <div
+                    style="
+                      width: 8vw;
+                      align-self: stretch;
+
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                    "
+                  >
+                    <img
+                      v-smart-img
+                      class="flipImg"
+                      v-show="result.length > 1 && resultShowIndex + 1 < result.length"
+                      :src="webpUrl('resultNext')"
+                      alt=""
+                      style="display: block; width: 80%; object-fit: cover"
+                      @click="resultShowIndex++"
+                    />
+                  </div>
+                </div>
+
+                <!-- 奖品说明 -->
+                <div
+                  style="
+                    width: 100%;
+                    height: 5vw;
+                    text-align: center;
+                    font-size: 0.9em;
+                    font-weight: 590;
+
+                    position: relative;
+                    color: #ff79a1;
+                  "
+                >
+                  {{ t('you_get') }} {{ result[resultShowIndex]?.prize?.prizeName }}
+                  <div v-if="result.length > 1" class="resultNum">
+                    {{ resultShowIndex + 1 }} / {{ result.length }}
+                  </div>
+                </div>
+
+                <!-- 关闭弹窗按钮 -->
+                <div
+                  style="width: 30vw; height: 10vw"
+                  @click.stop.prevent="closedPopup"
+                  @touchend.stop.prevent="closedPopup"
+                ></div>
+              </itemCenter>
+            </div>
+
+            <!-- 中奖历史 -->
+            <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
+              <itemCenter
+                :imgUrl="webpUrl(getImgName('recordBg'))"
+                :contentStyle="`padding: 28vw 12vw 25vw;`"
+              >
+                <div
+                  style="
+                    width: 100%;
+                    height: 100%;
+                    overflow-y: auto;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                  "
+                  class="scrollY"
+                >
+                  <div
+                    v-for="(record, index) in myRecords"
+                    style="
+                      border-radius: 12px;
+                      border: 2px solid #fff;
+                      background: linear-gradient(
+                        264deg,
+                        rgba(255, 220, 220, 0.4) 10.17%,
+                        rgba(255, 151, 151, 0.4) 60.22%,
+                        rgba(255, 220, 220, 0.4) 103.12%
+                      );
+                      box-shadow:
+                        0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
+                        0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
+                        0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
+                        0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
+                      backdrop-filter: blur(4.5px);
+
+                      display: flex;
+                      padding: 12px;
+                      justify-content: space-between;
+                      align-items: center;
+                    "
+                  >
+                    <div style="display: flex; align-items: center; gap: 4px">
+                      <img
+                        :src="record?.prize?.prizeImage || ''"
+                        alt=""
+                        style="width: 10vw; min-width: 0; object-fit: cover; display: block"
+                      />
+                      <div
+                        style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left"
+                      >
+                        {{ record?.prize?.prizeName }}
+                      </div>
+                    </div>
                     <div
-                      style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left"
+                      style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left"
                     >
-                      {{ record?.prize?.prizeName }}
+                      {{ formatUTCCustom(record.drawTime) }}
                     </div>
                   </div>
-                  <div style="font-weight: 510; font-size: 0.8em; direction: ltr; text-align: left">
-                    {{ formatUTCCustom(record.drawTime) }}
-                  </div>
                 </div>
-              </div>
-            </itemCenter>
-          </div>
+              </itemCenter>
+            </div>
 
-          <!-- 领取历史(水晶&碎片) -->
-          <div v-show="receiveRecordShow" style="position: relative; width: 95%" @click.stop>
-            <itemCenter
-              :imgUrl="webpUrl('myPropsLogBg')"
-              :contentStyle="`padding: 28vw 12vw 25vw;`"
-            >
-              <div
-                style="
-                  width: 100%;
-                  height: 100%;
-                  overflow-y: auto;
-                  display: flex;
-                  flex-direction: column;
-                  gap: 8px;
-                "
-                class="scrollY"
+            <!-- 领取历史(水晶&碎片) -->
+            <div v-show="receiveRecordShow" style="position: relative; width: 95%" @click.stop>
+              <itemCenter
+                :imgUrl="webpUrl('myPropsLogBg')"
+                :contentStyle="`padding: 28vw 12vw 25vw;`"
               >
                 <div
-                  v-for="(record, index) in receiveRecord"
                   style="
-                    border-radius: 12px;
-                    border: 2px solid #fff;
-                    background: linear-gradient(
-                      264deg,
-                      rgba(255, 220, 220, 0.4) 10.17%,
-                      rgba(255, 151, 151, 0.4) 60.22%,
-                      rgba(255, 220, 220, 0.4) 103.12%
-                    );
-                    box-shadow:
-                      0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
-                      0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
-                      0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
-                      0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
-                    backdrop-filter: blur(4.5px);
-
+                    width: 100%;
+                    height: 100%;
+                    overflow-y: auto;
                     display: flex;
-                    padding: 12px;
-                    justify-content: space-between;
-                    align-items: center;
+                    flex-direction: column;
+                    gap: 8px;
                   "
+                  class="scrollY"
                 >
-                  <div style="min-width: 0; display: flex; align-items: center; gap: 4px">
-                    <img
-                      v-if="record.itemType == 'cp_fragment'"
-                      :src="webpUrl('debris')"
-                      alt=""
-                      style="
-                        width: 10vw;
-                        min-width: 0;
+                  <div
+                    v-for="(record, index) in receiveRecord"
+                    style="
+                      border-radius: 12px;
+                      border: 2px solid #fff;
+                      background: linear-gradient(
+                        264deg,
+                        rgba(255, 220, 220, 0.4) 10.17%,
+                        rgba(255, 151, 151, 0.4) 60.22%,
+                        rgba(255, 220, 220, 0.4) 103.12%
+                      );
+                      box-shadow:
+                        0 36.858px 13.981px 0 rgba(255, 106, 106, 0.02),
+                        0 20.335px 12.71px 0 rgba(255, 106, 106, 0.08),
+                        0 8.897px 8.897px 0 rgba(255, 106, 106, 0.13),
+                        0 2.542px 5.084px 0 rgba(255, 106, 106, 0.15);
+                      backdrop-filter: blur(4.5px);
 
-                        object-fit: cover;
-                        display: block;
-                      "
-                    />
-                    <img
-                      v-else-if="record.itemType == 'lottery_ticket'"
-                      :src="webpUrl('crystal')"
-                      alt=""
-                      style="
-                        width: 10vw;
-                        min-width: 0;
+                      display: flex;
+                      padding: 12px;
+                      justify-content: space-between;
+                      align-items: center;
+                    "
+                  >
+                    <div style="min-width: 0; display: flex; align-items: center; gap: 4px">
+                      <img
+                        v-if="record.itemType == 'cp_fragment'"
+                        :src="webpUrl('debris')"
+                        alt=""
+                        style="
+                          width: 10vw;
+                          min-width: 0;
 
-                        object-fit: cover;
-                        display: block;
-                      "
-                    />
+                          object-fit: cover;
+                          display: block;
+                        "
+                      />
+                      <img
+                        v-else-if="record.itemType == 'lottery_ticket'"
+                        :src="webpUrl('crystal')"
+                        alt=""
+                        style="
+                          width: 10vw;
+                          min-width: 0;
+
+                          object-fit: cover;
+                          display: block;
+                        "
+                      />
+                      <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: 590;
-                        font-size: 0.9em;
+                        font-weight: 510;
+                        font-size: 0.8em;
                         direction: ltr;
                         text-align: left;
                       "
                     >
-                      {{ record.changeType == 2 ? '-' : '+' }}{{ record.changeAmount }}
+                      {{ formatUTCCustom(record.createdAt) }}
                     </div>
                   </div>
-                  <div
-                    style="
-                      min-width: 0;
-                      font-weight: 510;
-                      font-size: 0.8em;
-                      direction: ltr;
-                      text-align: left;
-                    "
-                  >
-                    {{ formatUTCCustom(record.createdAt) }}
-                  </div>
                 </div>
-              </div>
-            </itemCenter>
-          </div>
-
-          <!-- 兑换奖品确认弹窗 -->
-          <div
-            v-show="exchangeConfirmShow"
-            style="
-              border-radius: 12px;
-              background: #fff;
-              padding: 20px;
-
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 2vw;
-            "
-            @click.stop
-          >
-            <!-- 内容 -->
-            <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
-              {{ t('confirm_item_exchange') }}
+              </itemCenter>
             </div>
 
-            <!-- 按钮 -->
-            <div
-              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
-            >
-              <!-- 取消按钮 -->
-              <div
-                style="
-                  padding: 12px 20px;
-                  border-radius: 24px;
-                  border: 1px solid #e6e6e6;
-                  color: rgba(0, 0, 0, 0.4);
-                  font-weight: 800;
-                "
-                @click="cancelSend"
-              >
-                {{ t('cancel') }}
-              </div>
-
-              <!-- 发送按钮 -->
-              <div
-                style="
-                  padding: 12px 20px;
-                  border-radius: 24px;
-                  background:
-                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
-                  box-shadow:
-                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
-                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
-                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
-                  color: rgba(255, 255, 255, 0.8);
-                  font-weight: 800;
-                "
-                @click="exchangeGoods"
-              >
-                {{ t('confirm') }}
-              </div>
-            </div>
-          </div>
-
-          <!-- 前三名奖励展示 -->
-          <div
-            v-show="topRewardShow"
-            style="
-              width: 90%;
-              position: relative;
-
-              border-radius: 12px;
-              background:
-                radial-gradient(
-                  171.8% 117.34% at 34.23% 104.78%,
-                  rgba(255, 188, 221, 0) 0%,
-                  #ffbcdd 100%
-                ),
-                linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
-                linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
-              padding: 20px;
-
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 2vw;
-            "
-            @click.stop
-          >
-            <!-- 关闭按钮 -->
-            <div
-              style="position: absolute; top: 2vw; right: 5vw; color: #ff4668; font-size: 3em"
-              @click.stop.prevent="closedPopup"
-              @touchend.stop.prevent="closedPopup"
-            >
-              x
-            </div>
-
-            <!-- 奖品展示 -->
-            <img
-              v-smart-img
-              :src="topReward.cover"
-              alt=""
-              style="width: 60%; display: block; object-fit: cover"
-            />
-
-            <!-- 时长或数量 -->
+            <!-- 兑换奖品确认弹窗 -->
             <div
+              v-show="exchangeConfirmShow"
               style="
-                font-size: 2em;
-                font-weight: 700;
-                background: linear-gradient(
-                  180deg,
-                  #ffdf6b 31.61%,
-                  #ffe562 36.73%,
-                  #fff 52.37%,
-                  #ffe562 58.67%,
-                  #ffa615 72.2%
-                );
-                background-clip: text;
-                -webkit-background-clip: text;
-                -webkit-text-fill-color: transparent;
-              "
-            >
-              {{ formatRewardDisplay(topReward.type, topReward) }}
-            </div>
-          </div>
-
-          <!-- help弹窗 -->
-          <div v-show="helpShow" @click.stop>
-            <itemCenter
-              :imgUrl="webpUrl(getImgName('helpBg'))"
-              :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
-            >
-              <img
-                v-smart-img
-                :src="webpUrl(getImgName('helpInfoNew'))"
-                alt=""
-                style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
-              />
-            </itemCenter>
-          </div>
-
-          <!-- 碎片不足提示 -->
-          <div
-            v-show="fragmentNotEnoughShow"
-            style="display: flex; justify-content: center; width: 100vw"
-            @click.stop
-          >
-            <div
-              style="
-                width: 60vw;
-                padding: 2vw;
+                border-radius: 12px;
+                background: #fff;
+                padding: 20px;
 
                 display: flex;
-                justify-content: center;
+                flex-direction: column;
                 align-items: center;
-
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.4);
-                backdrop-filter: blur(32px);
+                gap: 2vw;
               "
+              @click.stop
             >
-              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
-                {{ t('not_enough_pieces') }}
+              <!-- 内容 -->
+              <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+                {{ t('confirm_item_exchange') }}
               </div>
-            </div>
-          </div>
 
-          <!-- 编写情书弹窗 -->
-          <div
-            v-show="writeLetterShow"
-            style="
-              width: 90%;
-
-              border-radius: 12px;
-              background: #fff;
-              padding: 20px;
-
-              display: flex;
-              flex-direction: column;
-              align-items: center;
-              gap: 2vw;
-            "
-            @click.stop
-          >
-            <!-- 标题 -->
-            <h3 style="color: rgba(0, 0, 0, 0.8); font-size: 1.1em; font-weight: 700">Tips</h3>
-
-            <!-- 情书输入框 -->
-            <div style="position: relative; width: 100%">
-              <textarea
-                v-model="writeLetterText"
-                @input="updateLetterText"
-                :placeholder="t('love_letter_placeholder')"
-                maxlength="80"
-                style="
-                  width: 100%;
-                  min-height: 10vh;
-                  border-radius: 8px;
-                  border: 1px solid #e6e6e6;
-                  padding: 2vw 2vw 18px;
-
-                  color: black;
-
-                  outline: none;
-                  resize: vertical;
-                "
-              ></textarea>
-              <div
-                style="
-                  position: absolute;
-                  bottom: 8px;
-                  right: 12px;
-                  font-size: 0.8em;
-                  color: rgba(0, 0, 0, 0.4);
-                  font-weight: 500;
-                  background: transparent;
-                  z-index: 1;
-                "
-              >
-                {{ letterTextLength }}/80
-              </div>
-            </div>
-
-            <!-- 是否公开 -->
-            <div style="width: 100%; display: flex; align-items: center; gap: 1vw">
               <!-- 按钮 -->
               <div
                 style="
-                  width: 1.5em;
-                  aspect-ratio: 1/1;
-                  border-radius: 50%;
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-around;
+                  align-items: center;
+                "
+              >
+                <!-- 取消按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 24px;
+                    border: 1px solid #e6e6e6;
+                    color: rgba(0, 0, 0, 0.4);
+                    font-weight: 800;
+                  "
+                  @click="cancelSend"
+                >
+                  {{ t('cancel') }}
+                </div>
 
-                  border: 2px solid rgba(0, 0, 0, 0.4);
+                <!-- 发送按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 24px;
+                    background:
+                      linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
+                    box-shadow:
+                      0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
+                      -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+                      1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+                    color: rgba(255, 255, 255, 0.8);
+                    font-weight: 800;
+                  "
+                  @click="exchangeGoods"
+                >
+                  {{ t('confirm') }}
+                </div>
+              </div>
+            </div>
+
+            <!-- 前三名奖励展示 -->
+            <div
+              v-show="topRewardShow"
+              style="
+                width: 90%;
+                position: relative;
+
+                border-radius: 12px;
+                background:
+                  radial-gradient(
+                    171.8% 117.34% at 34.23% 104.78%,
+                    rgba(255, 188, 221, 0) 0%,
+                    #ffbcdd 100%
+                  ),
+                  linear-gradient(303deg, rgba(255, 255, 255, 0) 0%, #ff4656 91.85%),
+                  linear-gradient(292deg, #ff3bc4 0%, rgba(255, 255, 255, 0) 100.5%), #fff;
+                padding: 20px;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 2vw;
+              "
+              @click.stop
+            >
+              <!-- 关闭按钮 -->
+              <div
+                style="position: absolute; top: 2vw; right: 5vw; color: #ff4668; font-size: 3em"
+                @click.stop.prevent="closedPopup"
+                @touchend.stop.prevent="closedPopup"
+              >
+                x
+              </div>
+
+              <!-- 奖品展示 -->
+              <img
+                v-smart-img
+                :src="topReward.cover"
+                alt=""
+                style="width: 60%; display: block; object-fit: cover"
+              />
+
+              <!-- 时长或数量 -->
+              <div
+                style="
+                  font-size: 2em;
+                  font-weight: 700;
+                  background: linear-gradient(
+                    180deg,
+                    #ffdf6b 31.61%,
+                    #ffe562 36.73%,
+                    #fff 52.37%,
+                    #ffe562 58.67%,
+                    #ffa615 72.2%
+                  );
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+              >
+                {{ formatRewardDisplay(topReward.type, topReward) }}
+              </div>
+            </div>
+
+            <!-- help弹窗 -->
+            <div v-show="helpShow" @click.stop>
+              <itemCenter
+                :imgUrl="webpUrl(getImgName('helpBg'))"
+                :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
+              >
+                <img
+                  v-smart-img
+                  :src="webpUrl(getImgName('helpInfoNew'))"
+                  alt=""
+                  style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
+                />
+              </itemCenter>
+            </div>
+
+            <!-- 碎片不足提示 -->
+            <div
+              v-show="fragmentNotEnoughShow"
+              style="display: flex; justify-content: center; width: 100vw"
+              @click.stop
+            >
+              <div
+                style="
+                  width: 60vw;
+                  padding: 2vw;
 
                   display: flex;
                   justify-content: center;
                   align-items: center;
-                "
-                @click="isPublic = !isPublic"
-              >
-                <div
-                  v-if="isPublic"
-                  style="
-                    width: 0.8em;
-                    aspect-ratio: 1/1;
-                    border-radius: 50%;
-                    background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
-                  "
-                ></div>
-              </div>
 
-              <!-- 说明文本 -->
-              <div
-                style="
-                  flex: 1;
-                  min-width: 0;
-                  color: rgba(0, 0, 0, 0.4);
-                  font-size: 0.8em;
-                  font-weight: 500;
+                  border-radius: 8px;
+                  background: rgba(255, 255, 255, 0.4);
+                  backdrop-filter: blur(32px);
                 "
               >
-                {{ t('publish_love_letter') }}
+                <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                  {{ t('not_enough_pieces') }}
+                </div>
               </div>
             </div>
 
-            <!-- 按钮 -->
+            <!-- 编写情书弹窗 -->
             <div
-              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
+              v-show="writeLetterShow"
+              style="
+                width: 90%;
+
+                border-radius: 12px;
+                background: #fff;
+                padding: 20px;
+
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 2vw;
+              "
+              @click.stop
             >
-              <!-- 取消按钮 -->
-              <div
-                style="
-                  padding: 12px 20px;
-                  border-radius: 24px;
-                  border: 1px solid #e6e6e6;
-                  color: rgba(0, 0, 0, 0.4);
-                  font-weight: 800;
-                "
-                @click="cancelSend"
-              >
-                {{ t('cancel') }}
+              <!-- 标题 -->
+              <h3 style="color: rgba(0, 0, 0, 0.8); font-size: 1.1em; font-weight: 700">Tips</h3>
+
+              <!-- 情书输入框 -->
+              <div style="position: relative; width: 100%">
+                <textarea
+                  v-model="writeLetterText"
+                  @input="updateLetterText"
+                  :placeholder="t('love_letter_placeholder')"
+                  maxlength="80"
+                  style="
+                    width: 100%;
+                    min-height: 10vh;
+                    border-radius: 8px;
+                    border: 1px solid #e6e6e6;
+                    padding: 2vw 2vw 18px;
+
+                    color: black;
+
+                    outline: none;
+                    resize: vertical;
+                  "
+                ></textarea>
+                <div
+                  style="
+                    position: absolute;
+                    bottom: 8px;
+                    right: 12px;
+                    font-size: 0.8em;
+                    color: rgba(0, 0, 0, 0.4);
+                    font-weight: 500;
+                    background: transparent;
+                    z-index: 1;
+                  "
+                >
+                  {{ letterTextLength }}/80
+                </div>
               </div>
 
-              <!-- 发送按钮 -->
+              <!-- 是否公开 -->
+              <div style="width: 100%; display: flex; align-items: center; gap: 1vw">
+                <!-- 按钮 -->
+                <div
+                  style="
+                    width: 1.5em;
+                    aspect-ratio: 1/1;
+                    border-radius: 50%;
+
+                    border: 2px solid rgba(0, 0, 0, 0.4);
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                  @click="isPublic = !isPublic"
+                >
+                  <div
+                    v-if="isPublic"
+                    style="
+                      width: 0.8em;
+                      aspect-ratio: 1/1;
+                      border-radius: 50%;
+                      background: linear-gradient(152deg, #f5a8b7 7.01%, #d61f3f 92.99%);
+                    "
+                  ></div>
+                </div>
+
+                <!-- 说明文本 -->
+                <div
+                  style="
+                    flex: 1;
+                    min-width: 0;
+                    color: rgba(0, 0, 0, 0.4);
+                    font-size: 0.8em;
+                    font-weight: 500;
+                  "
+                >
+                  {{ t('publish_love_letter') }}
+                </div>
+              </div>
+
+              <!-- 按钮 -->
               <div
                 style="
-                  padding: 12px 20px;
-                  border-radius: 24px;
-                  background:
-                    linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
-                  box-shadow:
-                    0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
-                    -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
-                    1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
-                    3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
-                  color: rgba(255, 255, 255, 0.8);
-                  font-weight: 800;
+                  width: 100%;
+                  display: flex;
+                  justify-content: space-around;
+                  align-items: center;
                 "
-                @click="showPopup('confirm')"
               >
-                {{ t('confirm') }}
+                <!-- 取消按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 24px;
+                    border: 1px solid #e6e6e6;
+                    color: rgba(0, 0, 0, 0.4);
+                    font-weight: 800;
+                  "
+                  @click="cancelSend"
+                >
+                  {{ t('cancel') }}
+                </div>
+
+                <!-- 发送按钮 -->
+                <div
+                  style="
+                    padding: 12px 20px;
+                    border-radius: 24px;
+                    background:
+                      linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff4768;
+                    box-shadow:
+                      0 1px 4.5px 0 rgba(0, 0, 0, 0.1),
+                      -1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      -3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset,
+                      1px 0 5px 0 rgba(255, 255, 255, 0.7) inset,
+                      3.5px 0 7.5px 0 rgba(255, 255, 255, 0.2) inset;
+                    color: rgba(255, 255, 255, 0.8);
+                    font-weight: 800;
+                  "
+                  @click="showPopup('confirm')"
+                >
+                  {{ t('confirm') }}
+                </div>
               </div>
             </div>
           </div>
         </div>
-        </div>
       </maskLayer>
     </div>
   </div>
@@ -1412,7 +1441,7 @@ const currentLangType = computed(() => {
 const isLoading = ref(true) // 预加载状态
 
 // 获取OSS图片URL的函数
-const webpUrl = (filename) => getWebpUrl('Ranking/CoupleWebp/', filename)
+const webpUrl = (filename) => getWebpUrl('Ranking/Couple/webp/', filename)
 
 // 根据语言获取图片名
 const getImgName = (filename) => {