From 56740a1a044fe88a78cd961944ca62c1c7c0d584 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 20 Jan 2026 17:34:23 +0800
Subject: [PATCH] =?UTF-8?q?chore(cp=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Couple/index.vue | 1410 ++++++++++++++--------------
 1 file changed, 716 insertions(+), 694 deletions(-)

diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 1079ff6..a2ab8e8 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -443,808 +443,812 @@
           </div>
         </div>
 
-        <!-- 编写情书弹窗 -->
+        <!-- 居中弹窗 -->
         <div
-          v-show="writeLetterShow"
+          v-show="centerPopupShow"
           style="
-            margin: 10vh 4vw 5vh;
-            border-radius: 12px;
-            background: #fff;
-            padding: 20px;
-
+            width: 100vw;
+            height: 100vh;
             display: flex;
-            flex-direction: column;
+            justify-content: center;
             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
+            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;
 
-          <!-- 情书输入框 -->
-          <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;
+              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>
 
-                color: black;
+            <!-- 内容 -->
+            <div style="font-size: 0.8em; font-weight: 500">
+              {{ t('spend_5000_coins_confess') }}
+            </div>
 
-                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;
-              "
+              style="width: 100%; display: flex; justify-content: space-around; align-items: center"
             >
-              {{ letterTextLength }}/80
+              <!-- 取消按钮 -->
+              <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 style="width: 100%; display: flex; align-items: center; gap: 1vw">
-            <!-- 按钮 -->
+          <!-- 金币不足提示 -->
+          <div
+            v-show="TipsShow"
+            style="display: flex; justify-content: center; width: 100vw"
+            @click.stop
+          >
             <div
               style="
-                width: 1.5em;
-                aspect-ratio: 1/1;
-                border-radius: 50%;
-
-                border: 2px solid rgba(0, 0, 0, 0.4);
+                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);
               "
-              @click="isPublic = !isPublic"
             >
+              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                {{ t('insufficient_wallet_balance') }}
+              </div>
               <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%);
+                  font-size: 0.8em;
+                  color: #e14f69;
+                  font-weight: 700;
+                  box-sizing: border-box;
+                  border-bottom: 1px solid #e14f69;
                 "
-              ></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') }}
+                @click="gotoRecharge"
+              >
+                {{ t('recharge_now') }}
+              </div>
             </div>
           </div>
 
-          <!-- 按钮 -->
+          <!-- 需要补签提示 -->
           <div
-            style="width: 100%; display: flex; justify-content: space-around; align-items: center"
+            v-show="needCheckInTipsShow"
+            style="display: flex; justify-content: center; width: 100vw"
+            @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') }}
-            </div>
+                width: 60vw;
+                padding: 2vw;
 
-            <!-- 发送按钮 -->
-            <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;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                border-radius: 8px;
+                background: rgba(255, 255, 255, 0.4);
+                backdrop-filter: blur(32px);
               "
-              @click="showPopup('confirm')"
             >
-              {{ t('confirm') }}
+              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
+                {{ t('consecutive_check_in_reward') }}
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 发送情书二次确认弹窗 -->
-        <div
-          v-show="confirmShow"
-          style="
-            margin: 10vh 4vw 5vh;
-            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"
+            v-show="signInSuccessShow"
+            style="display: flex; justify-content: center; width: 100vw"
+            @click.stop
           >
-            <!-- 取消按钮 -->
             <div
               style="
-                padding: 12px 20px;
-                border-radius: 200px;
-                background:
-                  linear-gradient(180deg, #ffacbb 0%, rgba(255, 172, 187, 0) 58.38%), #ff879c;
+                width: 60vw;
+                padding: 2vw;
 
-                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;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                border-radius: 8px;
+                background: rgba(255, 255, 255, 0.4);
+                backdrop-filter: blur(32px);
               "
-              @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 style="font-size: 0.8em; font-weight: 700; color: #fff">
+                {{ t('check_in_successful') }}
+              </div>
             </div>
           </div>
-        </div>
 
-        <!-- 金币不足提示 -->
-        <div
-          v-show="TipsShow"
-          style="position: fixed; top: 50vh; 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="position: fixed; top: 50vh; 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="position: fixed; top: 50vh; 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
-          style="margin: 10vh 0 5vh"
-          v-if="lastLetterShow"
-          :imgUrl="imageUrl(getImgName('lastLetterBg'))"
-          :contentStyle="`inset: 30vw 17vw 27vw;
+          <!-- 我的最新情书 -->
+          <itemCenter
+            v-if="lastLetterShow"
+            :imgUrl="imageUrl(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
-              v-smart-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;
-              "
-            >
+            @click.stop
+          >
+            <!-- 发送者 -->
+            <div style="width: 100%; display: flex; align-items: center; gap: 2vw">
+              <img
+                v-smart-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;
-                  color: #ff79a1;
-                  font-size: 0.9em;
-                  font-weight: 700;
-
-                  text-overflow: ellipsis;
-                  overflow: hidden;
-                  white-space: nowrap;
+                  align-self: stretch;
+                  display: flex;
+                  flex-direction: column;
+                  justify-content: center;
+                  gap: 1vw;
                 "
               >
-                {{ latestLoveLetter.senderNickname }}
-              </div>
-              <div style="font-size: 0.8em; font-weight: 500; color: #ff79a1">
-                ID：{{ latestLoveLetter.senderAccount }}
+                <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>
 
-          <!-- 情书内容(保留换行) -->
-          <div
-            class="scrollY"
-            style="
-              flex: 1;
-              width: 100%;
-              color: #ff79a1;
-              font-weight: 600;
-              white-space: pre-wrap;
+            <!-- 情书内容(保留换行) -->
+            <div
+              class="scrollY"
+              style="
+                flex: 1;
+                width: 100%;
+                color: #ff79a1;
+                font-weight: 600;
+                white-space: pre-wrap;
 
-              overflow-y: auto;
-            "
-          >
-            {{ latestLoveLetter.content }}
-          </div>
-        </itemCenter>
+                overflow-y: auto;
+              "
+            >
+              {{ latestLoveLetter.content }}
+            </div>
+          </itemCenter>
 
-        <!-- 抽奖结果 -->
-        <div
-          v-show="resultShow"
-          style="margin: 10vh 4vw 5vh; position: relative; width: 90%"
-          @click.stop
-        >
-          <itemCenter
-            :imgUrl="imageUrl('resultBg')"
-            :contentStyle="`inset: 37vw 15vw 16vw;
+          <!-- 抽奖结果 -->
+          <div v-show="resultShow" style="position: relative; width: 90%" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl('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
-                  v-smart-img
-                  class="flipImg"
-                  v-show="result.length > 1 && resultShowIndex > 0"
-                  :src="imageUrl('resultBack')"
-                  alt=""
-                  style="display: block; width: 80%; object-fit: cover"
-                  @click="resultShowIndex--"
-                />
-              </div>
-              <!-- 奖品 -->
-              <img
-                v-smart-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="imageUrl('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="closedPopup"></div>
-          </itemCenter>
-        </div>
-
-        <!-- 中奖历史 -->
-        <div
-          v-show="drawRecordShow"
-          style="margin: 10vh 0 5vh; position: relative; width: 95%"
-          @click.stop
-        >
-          <itemCenter
-            :imgUrl="imageUrl(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);
-
+                  width: 100%;
                   display: flex;
-                  padding: 12px;
                   justify-content: space-between;
                   align-items: center;
                 "
               >
-                <div style="display: flex; align-items: center; gap: 4px">
+                <!-- 上一个奖品 -->
+                <div
+                  style="
+                    width: 8vw;
+                    align-self: stretch;
+
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  "
+                >
                   <img
                     v-smart-img
-                    :src="record?.prize?.prizeImage || ''"
+                    class="flipImg"
+                    v-show="result.length > 1 && resultShowIndex > 0"
+                    :src="imageUrl('resultBack')"
                     alt=""
-                    style="width: 10vw; min-width: 0; object-fit: cover; display: block"
+                    style="display: block; width: 80%; object-fit: cover"
+                    @click="resultShowIndex--"
                   />
-                  <div style="font-weight: 590; font-size: 0.9em; direction: ltr; text-align: left">
-                    {{ record?.prize?.prizeName }}
+                </div>
+                <!-- 奖品 -->
+                <img
+                  v-smart-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="imageUrl('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="closedPopup"></div>
+            </itemCenter>
+          </div>
+
+          <!-- 中奖历史 -->
+          <div v-show="drawRecordShow" style="position: relative; width: 95%" @click.stop>
+            <itemCenter
+              :imgUrl="imageUrl(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
+                      v-smart-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: 510; font-size: 0.8em; direction: ltr; text-align: left">
+                    {{ 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="margin: 10vh 0 5vh; position: relative; width: 95%"
-          @click.stop
-        >
-          <itemCenter :imgUrl="imageUrl('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="imageUrl('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-smart-img
-                    v-if="record.itemType == 'cp_fragment'"
-                    :src="imageUrl('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-smart-img
-                    v-else-if="record.itemType == 'lottery_ticket'"
-                    :src="imageUrl('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-smart-img
+                      v-if="record.itemType == 'cp_fragment'"
+                      :src="imageUrl('debris')"
+                      alt=""
+                      style="
+                        width: 10vw;
+                        min-width: 0;
 
-                      object-fit: cover;
-                      display: block;
-                    "
-                  />
+                        object-fit: cover;
+                        display: block;
+                      "
+                    />
+                    <img
+                      v-smart-img
+                      v-else-if="record.itemType == 'lottery_ticket'"
+                      :src="imageUrl('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="
-            margin: 10vh 4vw 5vh;
-            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="
-            position: relative;
-
-            margin: 10vh 4vw 5vh;
-            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="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" style="margin: 10vh 0 5vh" @click.stop>
-          <itemCenter
-            :imgUrl="imageUrl(getImgName('helpBg'))"
-            :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
-          >
-            <img
-              v-smart-img
-              :src="imageUrl(getImgName('helpInfo'))"
-              alt=""
-              style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
-            />
-          </itemCenter>
-        </div>
-
-        <!-- 碎片不足提示 -->
-        <div
-          v-show="fragmentNotEnoughShow"
-          style="position: fixed; top: 50vh; 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
+              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="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="imageUrl(getImgName('helpBg'))"
+              :contentStyle="`inset: 30vw 18vw 28vw;overflow-y: auto;display:block;`"
+            >
+              <img
+                v-smart-img
+                :src="imageUrl(getImgName('helpInfo'))"
+                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;
+
+                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('not_enough_pieces') }}
+              </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%;
+
+                  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="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="showPopup('confirm')"
+              >
+                {{ t('confirm') }}
+              </div>
             </div>
           </div>
         </div>
@@ -1432,6 +1436,24 @@ const maskLayerShow = computed(() => {
     exchangeConfirmShow.value
   )
 })
+const centerPopupShow = computed(() => {
+  return (
+    fragmentNotEnoughShow.value ||
+    helpShow.value ||
+    topRewardShow.value ||
+    lastLetterShow.value ||
+    writeLetterShow.value ||
+    TipsShow.value ||
+    confirmShow.value ||
+    needCheckInTipsShow.value ||
+    signInSuccessShow.value ||
+    rewardShow.value ||
+    resultShow.value ||
+    drawRecordShow.value ||
+    receiveRecordShow.value ||
+    exchangeConfirmShow.value
+  )
+})
 
 // 打开遮罩层
 const showPopup = (type) => {