diff --git a/src/api/couple.js b/src/api/couple.js
new file mode 100644
index 0000000..3b4f36f
--- /dev/null
+++ b/src/api/couple.js
@@ -0,0 +1,245 @@
+import { get, post } from '../utils/http.js'
+
+// 获取我的-cp对象.
+export const apiGetMyCpObject = async () => {
+  try {
+    const response = await get(`/user/cp-relationship/pair`)
+    return response
+  } catch (error) {
+    console.error('Failed to get my cp object:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 发送CP告白信封.
+export const apiSendLoveLetter = async (data) => {
+  try {
+    const response = await post(`/user/cp-relationship/send-love-letter`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to send love letter:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询告白墙.
+export const apiGetLoveLetterWall = async () => {
+  try {
+    const response = await get(`/user/cp-relationship/love-letter-wall`)
+    return response
+  } catch (error) {
+    console.error('Failed to get love letter wall:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询我收到的最新告白信封.
+export const apiGetLatestLoveLetter = async () => {
+  try {
+    const response = await get(`/user/cp-relationship/latest-love-letter`)
+    return response
+  } catch (error) {
+    console.error('Failed to get latest love letter:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// cp排行榜(周榜和赛季榜)
+export const apiGetCpRanking = async (type) => {
+  try {
+    const response = await get(`/activity/week-cp-gift/ranking-data?type=${type}`)
+    return response
+  } catch (error) {
+    console.error('Failed to get cp ranking:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 赛季榜Top1列表
+export const apiGetCpSeasonTop1List = async () => {
+  try {
+    const response = await get(`/activity/week-cp-gift/season-top1`)
+    return response
+  } catch (error) {
+    console.error('Failed to get cp season top 1:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 奖励池.
+export const apiGetCpRewardPool = async (type) => {
+  try {
+    const response = await get(`/activity/week-cp-gift/list-reward-pool?type=${type}`)
+    return response
+  } catch (error) {
+    console.error('Failed to get cp reward pool:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取我的剩余抽奖券数量
+export const apiGetMyLotteryTicketCount = async (activityId) => {
+  try {
+    const response = await get(`/activity/lottery/my-ticket-count?activityId=${activityId}`)
+    return response
+  } catch (error) {
+    console.error('Failed to get my lottery ticket count:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 根据用户id与碎片集合查询用户碎片背包，并且数量大于0
+export const apiGetUserFragmentBackpack = async (data) => {
+  try {
+    const response = await post(
+      `/user/backpack/client/list/by/user-id?userId=${data.userId}&fragmentsIds=${data.fragmentsIds}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get user fragment backpack:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取活动详情
+export const activityDetail = async (activityCode) => {
+  try {
+    const response = await get(`/activity/lottery/detail/${activityCode}`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get activity detail:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取我的总抽奖次数
+export const myTotalDrawCount = async () => {
+  try {
+    const response = await get(`/activity/lottery/my-total-draw-count`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my total draw count:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 执行单次抽奖
+export const onceDraw = async (data) => {
+  try {
+    const response = await post('/activity/lottery/draw', data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch once draw:', error)
+    throw error
+  }
+}
+
+// 执行连抽
+export const multiDraw = async (data) => {
+  try {
+    const response = await post('/activity/lottery/multi-draw', data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch multiply draw:', error)
+    throw error
+  }
+}
+
+// 获取我的中奖记录(默认最新100条)
+export const drawRecords = async (activityCode) => {
+  try {
+    const response = await get(
+      `/activity/lottery/my-records?pageSize=100&activityCode=${activityCode}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get draw records:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询抽奖背包流水(水晶&碎片)
+export const apiGetDrawBackpackLogs = async (data) => {
+  try {
+    const response = await post(`/activity/lottery/backpack/logs`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get draw backpack logs:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 获取指定类型活动资源
+export const apiGetActivityResource = async (activityType) => {
+  try {
+    const response = await get(
+      `/props-activity-cnf/client/listActivityResource?sysOrigin=LIKEI&activityType=${activityType}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to get activity resource:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 用碎片兑换资源
+export const exchangeGood = async (data) => {
+  try {
+    const response = await post(`/activity/week-star/exchange`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to exchange goods:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 查询签到状态
+export const apiGetMySignInStatus = async () => {
+  try {
+    const response = await get(`/signin/status`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch get my sign in status:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 执行签到
+export const apiPostMySignIn = async (data) => {
+  try {
+    const response = await post(`/signin/check-in`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to sign in:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 补签
+export const apiPostMySignInSupplement = async (data) => {
+  try {
+    const response = await post(`/signin/supplement`, data)
+    return response
+  } catch (error) {
+    console.error('Failed to sign in:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index cce505b..3802510 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -331,6 +331,12 @@ const router = createRouter({
     },
 
     // 固定排行榜活动
+    {
+      path: '/couple',
+      name: 'couple',
+      component: () => import('../views/Ranking/Couple/index.vue'),
+      meta: { requiresAuth: true },
+    }, //沙特下周一当天早上6点（北京时间3点）刷新
     {
       path: '/top-list',
       name: 'top-list',
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index fb88294..4e61ba7 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -50,6 +50,7 @@ const RANKING_PAGES = [
   '/weekly-star', //每周明星
   '/ranking', //总排行榜
   '/games-king', //游戏排行榜
+  '/couple', //情侣排行榜
 ]
 
 // 活动页面
diff --git a/src/utils/routeGuard.js b/src/utils/routeGuard.js
index e5bd1a6..b20c3ac 100644
--- a/src/utils/routeGuard.js
+++ b/src/utils/routeGuard.js
@@ -401,6 +401,7 @@ class RouteGuard {
       '/weekly-star', //每周明星
       '/ranking', //总排行榜
       '/games-king', //游戏排行榜
+      '/couple', //情侣排行榜
     ]
 
     // 活动页面
diff --git a/src/views/Ranking/Couple/GamePlay/Gameplay.vue b/src/views/Ranking/Couple/GamePlay/Gameplay.vue
new file mode 100644
index 0000000..679dcfb
--- /dev/null
+++ b/src/views/Ranking/Couple/GamePlay/Gameplay.vue
@@ -0,0 +1,223 @@
+<template>
+  <div style="padding: 4vw 0">
+    <!-- 栏目按钮 -->
+    <div
+      style="
+        width: 100vw;
+        padding: 0 4vw;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 2vw;
+      "
+    >
+      <img
+        v-smart-img
+        :src="imageUrl(getImgName('gameLotteryBt'))"
+        alt=""
+        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+        @click="changeTag('lottery')"
+      />
+      <img
+        v-smart-img
+        :src="imageUrl(getImgName('gameSignInBt'))"
+        alt=""
+        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+        @click="changeTag('signIn')"
+      />
+      <img
+        v-smart-img
+        :src="imageUrl(getImgName('gameExchangeBt'))"
+        alt=""
+        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+        @click="changeTag('exchange')"
+      />
+    </div>
+
+    <div style="position: relative">
+      <!-- 中奖历史按钮 -->
+      <img
+        v-smart-img
+        :src="imageUrl('historyBt')"
+        alt=""
+        style="width: 8vw; position: absolute; z-index: 2; top: 0vw; right: 4vw"
+        @click="showDrawRecord"
+      />
+
+      <itemCenter
+        style="position: relative; z-index: 1"
+        :imgUrl="imageUrl(getImgName('myPropsBg'))"
+        :contentStyle="`inset: 28vw 17vw 25vw;justify-content:space-between;`"
+      >
+        <!-- 水晶数量 -->
+        <div style="display: flex; align-items: center">
+          <img
+            v-smart-img
+            :src="imageUrl('crystal')"
+            alt=""
+            style="display: block; width: 15vw; object-fit: cover"
+          />
+          <div style="font-size: 2em; font-weight: 600; color: #ff79a1">:{{ crystal }}</div>
+        </div>
+
+        <!-- 碎片数量 -->
+        <div style="display: flex; align-items: center">
+          <img
+            v-smart-img
+            :src="imageUrl('debris')"
+            alt=""
+            style="display: block; width: 15vw; object-fit: cover"
+          />
+          <div style="font-size: 2em; font-weight: 600; color: #ff79a1">:{{ debris }}</div>
+        </div>
+      </itemCenter>
+    </div>
+
+    <!-- 游戏模块 -->
+    <lottery v-show="lotteryShow" style="margin-top: -35vw" />
+    <signIn v-show="signInShow" />
+    <exchange v-show="exchangeShow" />
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { getUserId, setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+
+import {
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+  apiGetDrawBackpackLogs, // 查询抽奖背包流水(水晶&碎片)
+} from '@/api/couple.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+import lottery from './components/lottery.vue'
+import signIn from './components/signIn.vue'
+import exchange from './components/exchange.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const {
+  crystal, //水晶数量
+  debris, //碎片数量
+
+  receiveRecordShow, // 领取记录弹窗
+  receiveRecord, // 领取记录
+} = storeToRefs(coupleStore)
+
+const lotteryShow = ref(true) //抽奖模块
+const signInShow = ref(false) //签到模块
+const exchangeShow = ref(false) //兑换模块
+
+// 切换栏目
+const changeTag = (module) => {
+  switch (module) {
+    case 'lottery':
+      lotteryShow.value = true
+      signInShow.value = false
+      exchangeShow.value = false
+      break
+    case 'signIn':
+      lotteryShow.value = false
+      signInShow.value = true
+      exchangeShow.value = false
+      break
+    case 'exchange':
+      lotteryShow.value = false
+      signInShow.value = false
+      exchangeShow.value = true
+      break
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      crystal.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 获取用户碎片背包
+const getUserFragmentBackpack = async () => {
+  try {
+    const response = await apiGetUserFragmentBackpack({
+      userId: getUserId(),
+      // userId: '1957345312961527809',
+      fragmentsIds: ['2011710323414081538'],
+    })
+    if (response.status) {
+      debris.value = response.body?.[0]?.quantity || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 获取领取记录
+const getReceiveRecords = async () => {
+  const resReceiveRecords = await apiGetDrawBackpackLogs({
+    pageSize: 100,
+    pageNum: 1,
+  })
+  if (resReceiveRecords.status && resReceiveRecords.body) {
+    receiveRecord.value = resReceiveRecords.body?.records || []
+    receiveRecordShow.value = true
+  }
+}
+
+// 展示中奖记录
+const showDrawRecord = () => {
+  getReceiveRecords() // 获取中奖记录，并让爷爷组件打开弹窗
+}
+
+// 获取数据
+const initData = () => {
+  getMyLotteryTicketCount() // 获取我的剩余抽奖券数量
+  getUserFragmentBackpack() // 获取用户碎片背包
+}
+
+onMounted(() => {
+  initData() // 获取数据
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/Ranking/Couple/GamePlay/components/exchange.vue b/src/views/Ranking/Couple/GamePlay/components/exchange.vue
new file mode 100644
index 0000000..acdf1a5
--- /dev/null
+++ b/src/views/Ranking/Couple/GamePlay/components/exchange.vue
@@ -0,0 +1,123 @@
+<template>
+  <div style="padding: 0 4vw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw">
+    <itemCenter
+      v-for="item in goodsList"
+      :key="item.id"
+      :imgUrl="imageUrl('goodsItem')"
+      :contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
+    >
+      <div
+        style="
+          width: 100%;
+          min-width: 0;
+          aspect-ratio: 1/0.95;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+      >
+        <img
+          :src="item.propsGroup?.activityRewardProps?.[0].cover"
+          alt=""
+          style="width: 70%; display: block; object-fit: cover"
+        />
+      </div>
+
+      <div style="display: flex; justify-content: center; align-items: center">
+        <img
+          v-smart-img
+          :src="imageUrl(getImgName('debris'))"
+          alt=""
+          style="display: block; width: 2em; object-fit: cover"
+        />
+        <div style="font-weight: 600; color: #ff79a1" @click="exchangeGoods(item)">
+          *{{ JSON.parse(item.rule.jsonData).need_fragments }}
+        </div>
+      </div>
+    </itemCenter>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { getUserId, setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
+
+import {
+  apiGetActivityResource, //获取兑换资源
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+  exchangeGood, //用碎片兑换资源
+} from '@/api/couple.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+import { storeToRefs } from 'pinia'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const {
+  exchangeConfirmShow, // 兑换确认弹窗
+  exchangeItem, // 当前兑换的物品
+} = storeToRefs(coupleStore)
+
+const goodsList = ref([]) // 兑换物品列表
+
+// 获取兑换物品列表
+const getActivityResource = async () => {
+  try {
+    const response = await apiGetActivityResource('APRIL_ACTIVITY_FRAGMENT')
+    if (response.status) {
+      goodsList.value = response.body || []
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 用碎片兑换资源
+const exchangeGoods = async (goods) => {
+  exchangeItem.value = {
+    userId: getUserId(),
+    propsGroupId: goods.rule.id,
+    fragmentsId: '2011710323414081538',
+  }
+  // 触发兑换确认弹窗
+  exchangeConfirmShow.value = true
+}
+
+onMounted(() => {
+  getActivityResource() // 获取兑换物品列表
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/Ranking/Couple/GamePlay/components/lottery.vue b/src/views/Ranking/Couple/GamePlay/components/lottery.vue
new file mode 100644
index 0000000..a967a21
--- /dev/null
+++ b/src/views/Ranking/Couple/GamePlay/components/lottery.vue
@@ -0,0 +1,456 @@
+<template>
+  <div>
+    <itemCenter
+      :imgUrl="imageUrl('lotteryBg')"
+      :contentStyle="`flex-direction: column;justify-content: flex-start;gap: 5vw`"
+    >
+      <!-- 中奖历史按钮 -->
+      <img
+        v-smart-img
+        :src="imageUrl('historyBt')"
+        alt=""
+        style="width: 8vw; position: absolute; top: 40vw; right: 4vw"
+        @click="getDrawRecords"
+      />
+
+      <!-- 抽奖转盘 -->
+      <div
+        style="
+          width: 100%;
+          height: 71vw;
+          align-self: stretch;
+
+          margin: 68.5vw 0 0;
+          padding: 0 15vw;
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          grid-template-rows: repeat(3, 1fr);
+          gap: 1vw;
+
+          direction: ltr;
+        "
+      >
+        <div
+          v-for="(prize, index) in activity.prizeList"
+          style="
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            position: relative;
+          "
+          :style="[getGridPosition(index)]"
+        >
+          <img
+            v-smart-img
+            :src="prize.prizeImage || ''"
+            :alt="prize.prizeName || ''"
+            width="50%"
+            style="display: block"
+          />
+          <div
+            style="
+              font-size: 0.8em;
+              font-weight: 700;
+              color: transparent;
+              text-shadow:
+                -0.25px -0.25px 1px #ff37a1,
+                0.25px 0.25px 1px #ff37a1,
+                0 0 3px rgba(255, 55, 161, 0.8),
+                0 0 5px rgba(255, 55, 161, 0.6),
+                0 0 4px rgba(191, 0, 101, 0.3);
+              -webkit-text-stroke-width: 0.8px;
+              -webkit-text-stroke-color: #fff;
+              text-transform: capitalize;
+            "
+          >
+            {{ prize.prizeName }}
+          </div>
+
+          <!-- 转到的奖品项 -->
+          <img
+            v-show="activeIndex === index"
+            v-smart-img
+            :src="imageUrl('prizeActiveFrame')"
+            alt=""
+            style="
+              display: block;
+              width: 100%;
+
+              position: absolute;
+              inset: 0;
+            "
+          />
+        </div>
+
+        <!-- 水晶数量 -->
+        <div
+          style="
+            grid-area: 2 / 2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1vw;
+          "
+        >
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('crystal'))"
+            alt=""
+            style="display: block; width: 8vw; object-fit: cover"
+          />
+          <div style="font-size: 1.5em; font-weight: 600; color: #fff">*{{ crystal }}</div>
+        </div>
+      </div>
+
+      <!-- 抽奖按钮 -->
+      <div
+        style="height: 12vw; display: flex; justify-content: space-between; gap: 14vw"
+        class="drawBts"
+      >
+        <!-- 单抽 -->
+        <div style="width: 25vw; height: 100%" @click="sweepstakes(1)">
+          <div
+            v-if="crystal >= 1"
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('crystal'))"
+              alt=""
+              style="display: block; width: 3em; object-fit: cover"
+            />
+            <div
+              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
+            >
+              *1
+            </div>
+          </div>
+
+          <div
+            v-else
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 3em; object-fit: cover"
+            />
+            <div
+              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
+            >
+              *1000
+            </div>
+          </div>
+        </div>
+
+        <!-- 10连抽 -->
+        <div style="width: 25vw; height: 100%" @click="sweepstakes(10)">
+          <div
+            v-if="crystal >= 10"
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              :src="imageUrl(getImgName('crystal'))"
+              alt=""
+              style="display: block; width: 3em; object-fit: cover"
+            />
+            <div
+              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
+            >
+              *10
+            </div>
+          </div>
+
+          <div
+            v-else
+            style="
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              src="/src/assets/icon/coin.png"
+              alt=""
+              style="display: block; width: 3em; object-fit: cover"
+            />
+            <div
+              style="color: #fff; font-size: 1.2em; font-weight: 600; text-shadow: 0 1px 0 #8b00d1"
+            >
+              *5000
+            </div>
+          </div>
+        </div>
+      </div>
+    </itemCenter>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { getUserId, setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+
+import {
+  activityDetail, // 获取活动详情
+  onceDraw, // 执行单次抽奖
+  multiDraw, // 执行连抽
+  drawRecords, // 获取抽奖记录
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+} from '@/api/couple.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const {
+  crystal, //水晶数量
+  debris, //碎片数量
+  resultShow, // 抽奖结果弹窗显示状态
+  result, // 抽奖结果
+  drawRecordShow, // 中奖历史弹窗显示状态
+  myRecords, // 我的抽奖记录
+} = storeToRefs(coupleStore)
+
+const activity = ref({}) //活动详情和奖池
+
+const isRolling = ref(false) //是否正在抽奖
+const activeIndex = ref(0)
+
+// 打开弹窗
+const openPopup = (type) => {
+  switch (type) {
+    case 'result':
+      resultShow.value = true
+      break
+    case 'history':
+      drawRecordShow.value = true
+      break
+  }
+}
+
+//奖盘布局
+const getGridPosition = (index) => {
+  //顺时针位置
+  const positions = [
+    { gridArea: '1/1' }, //上左
+    { gridArea: '1/2' }, //上中
+    { gridArea: '1/3' }, //上右
+    { gridArea: '2/3' }, //中右
+    { gridArea: '3/3' }, //下右
+    { gridArea: '3/2' }, //下中
+    { gridArea: '3/1' }, //下左
+    { gridArea: '2/1' }, //中左
+  ]
+  return positions[index]
+}
+
+// 抽奖动画
+const startLottery = (resultIndex) => {
+  console.log('开始抽奖动画')
+
+  return new Promise((resolve) => {
+    activeIndex.value = -1
+
+    let speed = 200 // 初始速度
+    let currentCycle = 0 // 当前圈数
+    let constantSpeedCycle = 0 // 当前匀速圈数
+    let totalCycles = 1 // 至少旋转2圈数
+
+    const roll = () => {
+      activeIndex.value = (activeIndex.value + 1) % activity.value.prizeList.length
+      console.log('当前索引:', activeIndex.value)
+
+      if (activeIndex.value === resultIndex && speed > 200) {
+        setTimeout(() => {
+          resolve() // 抽奖结束
+        }, 500)
+      } else {
+        if (activeIndex.value === activity.value.prizeList.length - 1) {
+          currentCycle++
+        }
+        // 加速旋转
+        if (currentCycle < totalCycles) {
+          speed -= 20
+        } else {
+          // 匀速旋转
+          if (activeIndex.value === activity.value.prizeList.length - 1) {
+            constantSpeedCycle++
+          }
+          if (constantSpeedCycle > 2) {
+            // 最后减速效果
+            speed += 20
+          }
+        }
+        setTimeout(roll, speed)
+      }
+    }
+
+    roll()
+  })
+}
+
+// 连抽
+const sweepstakes = async (consecutive = 1) => {
+  if (isRolling.value) return // 防止重复点击
+  isRolling.value = true
+  let data = {
+    activityId: '2004471533988167125',
+    drawCount: consecutive,
+    needCoins: consecutive > crystal.value,
+  }
+  try {
+    // 单抽
+    if (consecutive == 1) {
+      const resOnceDraw = await onceDraw(data)
+      if (resOnceDraw.status && resOnceDraw.body) {
+        result.value = [resOnceDraw.body] // 中奖结果赋值
+
+        const resItem = resOnceDraw.body //接口获取的抽奖结果（单抽为对象）
+        //取抽奖结果的位置
+        const index = activity.value.prizeList.findIndex(
+          (prize) => prize.prizeName == resItem?.prize.prizeName,
+        ) //转盘第几位停下
+        console.log('index:', index)
+        updateNumbers() // 更新水晶&碎片数量
+        await startLottery(index)
+      }
+    }
+    //连抽
+    else {
+      const resMultiDraw = await multiDraw(data)
+      if (resMultiDraw.status && resMultiDraw.body) {
+        result.value = resMultiDraw.body.results // 中奖结果赋值
+
+        //取第一个抽奖结果的位置
+        let index = activity.value.prizeList.findIndex(
+          (prize) => prize.prizeName == result.value[0]?.prize.prizeName,
+        )
+        console.log('index:', index)
+
+        updateNumbers() // 更新水晶&碎片数量
+        await startLottery(index)
+      }
+    }
+    openPopup('result') //打开中奖结果弹窗
+    isRolling.value = false
+  } catch (error) {
+    isRolling.value = false
+  }
+}
+
+// 获取中奖记录，并打开弹窗
+const getDrawRecords = async () => {
+  const resDrawRecords = await drawRecords('67125')
+  if (resDrawRecords.status && resDrawRecords.body) {
+    myRecords.value = resDrawRecords.body?.records || []
+    openPopup('history') // 打开中奖历史弹窗
+  }
+}
+
+//获取奖池
+const getActivityDetail = async () => {
+  const resDetail = await activityDetail('67125')
+  if (resDetail.status && resDetail.body) {
+    activity.value = resDetail.body
+  } else {
+    activity.value = {}
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      crystal.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 获取用户碎片背包
+const getUserFragmentBackpack = async () => {
+  try {
+    const response = await apiGetUserFragmentBackpack({
+      userId: getUserId(),
+      // userId: '1957345312961527809',
+      fragmentsIds: ['2011710323414081538'],
+    })
+    if (response.status) {
+      debris.value = response.body?.[0]?.quantity || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 更新水晶&碎片数量
+const updateNumbers = async () => {
+  await getMyLotteryTicketCount() // 获取抽奖券数量
+  await getUserFragmentBackpack() // 获取碎片数量
+}
+
+onMounted(() => {
+  getActivityDetail() //获取奖池
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/Ranking/Couple/GamePlay/components/signIn.vue b/src/views/Ranking/Couple/GamePlay/components/signIn.vue
new file mode 100644
index 0000000..ffa1dfe
--- /dev/null
+++ b/src/views/Ranking/Couple/GamePlay/components/signIn.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <!-- 规则&倒计时 -->
+    <itemCenter :imgUrl="imageUrl('checkInRule')" :contentStyle="`inset: 8vw 28vw 105vw;`">
+      <div class="timeBox">
+        <div class="timeText" style="">{{ Days }}D</div>
+        <div class="timeText timeGap"></div>
+        <div class="timeText" style="">{{ Hours }}</div>
+        <div class="timeText timeGap">:</div>
+        <div class="timeText" style="">{{ Minutes }}</div>
+        <div class="timeText timeGap">:</div>
+        <div class="timeText" style="">{{ Seconds }}</div>
+      </div>
+    </itemCenter>
+
+    <!-- 签到奖池列表 -->
+    <div
+      style="
+        position: relative;
+        padding: 0 2vw 4vw;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 4vw;
+      "
+    >
+      <signInItem
+        v-for="(rewards, index) in signInInfo.dailyConfigs"
+        :key="index"
+        :rewards="rewards"
+        :currentDayIndex="signInInfo.currentDayIndex"
+        :style="getGridPosition(index)"
+      />
+
+      <!-- 箭头覆盖层 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 1;
+        "
+      >
+        <!-- 根据签到项之间的关系绘制箭头 -->
+        <img
+          v-smart-img
+          v-for="(arrow, arrowIndex) in arrows"
+          :key="'arrow-' + arrowIndex"
+          :src="imageUrl('arrowRight')"
+          :style="arrow.style"
+          alt="arrow"
+          style="position: absolute; width: 8vw; object-fit: contain"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+
+import {
+  apiGetMySignInStatus, // 获取我的签到状态
+  apiPostMySignIn, // 执行签到
+  apiPostMySignInSupplement, // 补签
+} from '@/api/couple.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+import signInItem from './signInItem.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+const {
+  signInInfo, // 签到奖池
+} = storeToRefs(coupleStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+// 倒计时相关数据
+const Days = ref(0)
+const Hours = ref(0)
+const Minutes = ref(0)
+const Seconds = ref(0)
+let countdownTimer = null
+
+// 获取对应的时间戳
+const getNextMondayInBeijing = () => {
+  const now = new Date()
+  const targetDate = new Date(now.getTime()) // 创建一个基于当前时间的新日期对象
+
+  // 转换为北京时间来判断星期几
+  const utcTime = now.getTime() + now.getTimezoneOffset() * 60000
+  const beijingTime = new Date(utcTime + 8 * 3600000) // UTC+8
+
+  const beijingDay = beijingTime.getDay() // 0=周日, 1=周一, ..., 6=周六
+  const beijingHour = beijingTime.getHours()
+
+  // 转换为 0=周一, 1=周二, ..., 6=周日
+  const normalizedDay = beijingDay === 0 ? 6 : beijingDay - 1
+
+  let daysToAdd
+  if (normalizedDay === 0) {
+    // 今天是周一
+    if (beijingHour >= 5) {
+      daysToAdd = 7 // 超过5点，计算到下周一的所需时间
+    } else {
+      daysToAdd = 0 // 今天
+    }
+  } else {
+    daysToAdd = 7 - normalizedDay // 到下周一的天数
+  }
+
+  // 正确地添加天数
+  targetDate.setDate(targetDate.getDate() + daysToAdd) // 添加天数到下周一的当前时间
+  targetDate.setHours(5, 0, 0, 0) // 将时间重新设置为早上5点，作为目标时间戳
+
+  return targetDate.getTime()
+}
+
+const targetTime = ref(getNextMondayInBeijing()) // 闭包保存目标时间 (核心修正)
+
+// 格式化时间
+const formatTime = (value) => {
+  return value < 10 ? `0${value}` : value
+}
+
+// 倒计时
+const getCountdown = () => {
+  const now = Date.now()
+  let diff = targetTime.value - now
+
+  if (diff <= 0) {
+    // 初始化数据
+    initData()
+
+    targetTime.value += 7 * 86400000 // +7天 (更新闭包变量)
+    diff = targetTime.value - now
+  }
+
+  const totalSeconds = Math.floor(diff / 1000)
+  Days.value = Math.floor(totalSeconds / (24 * 3600))
+  Hours.value = formatTime(Math.floor((totalSeconds % (24 * 3600)) / 3600))
+  Minutes.value = formatTime(Math.floor((totalSeconds % 3600) / 60))
+  Seconds.value = formatTime(Math.floor(totalSeconds % 60))
+}
+
+// 启动倒计时
+const startCountdown = () => {
+  getCountdown() // 立即执行一次
+  countdownTimer = setInterval(getCountdown, 1000)
+}
+
+// 签到奖池布局
+const getGridPosition = (index) => {
+  // 一周
+  const positions = [
+    { gridArea: '1/1' }, //1左
+    { gridArea: '1/2' }, //1右
+    { gridArea: '2/2' }, //2右
+    { gridArea: '2/1' }, //2左
+    { gridArea: '3/1' }, //3左
+    { gridArea: '3/2' }, //3右
+    { gridArea: '4/2' }, //4右
+  ]
+  return positions[index]
+}
+
+// 箭头配置数据
+const arrows = computed(() => {
+  const items = signInInfo.value?.dailyConfigs || []
+  const arrowList = []
+
+  // 为相邻的签到项之间添加箭头
+  for (let i = 0; i < items.length - 1; i++) {
+    // 这是一个示例箭头位置配置，需要根据实际布局调整
+    switch (i) {
+      case 0: // 第1天 -> 第2天
+        arrowList.push({
+          style: 'top: 10.6%; left: calc(50%); transform: translateX(-50%);',
+        })
+        break
+      case 1: // 第2天 -> 第3天
+        arrowList.push({
+          style:
+            'top: calc(10.6% * 2 + 4.5vw); left: 75%; transform: translateX(-50%) rotate(90deg);',
+        })
+        break
+      case 2: // 第3天 -> 第4天
+        arrowList.push({
+          style:
+            'top: calc(10.6% * 3 + 4.5vw + 5.5vw); left: 50%; transform: translateX(-50%) rotate(180deg);',
+        })
+        break
+      case 3: // 第4天 -> 第5天
+        arrowList.push({
+          style:
+            'top: calc(10.6% * 4 + 4.5vw * 2 + 4vw); left: 25%; transform: translateX(-50%) rotate(90deg);',
+        })
+        break
+      case 4: // 第5天 -> 第6天
+        arrowList.push({
+          style:
+            'top: calc(10.6% * 5 + 4.5vw * 2 + 4vw * 2); left: 50%; transform: translateX(-50%);',
+        })
+        break
+      case 5: // 第6天 -> 第7天
+        arrowList.push({
+          style:
+            'top: calc(10.6% * 6 + 4.5vw * 3 + 4vw * 2); left: 75%; transform: translateX(-50%) rotate(90deg);',
+        })
+        break
+    }
+  }
+
+  return arrowList
+})
+
+// 获取签到状态
+const getSignInStatus = async () => {
+  try {
+    const response = await apiGetMySignInStatus()
+    if (response.status) {
+      signInInfo.value = response.body || {}
+    }
+  } catch (error) {
+    console.error('Failed to get sign in status:', error)
+    throw error
+  }
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  getSignInStatus() // 获取签到状态
+  startCountdown() //开启倒计时
+})
+
+onUnmounted(() => {
+  // 销毁计时器
+  if (countdownTimer) {
+    clearInterval(countdownTimer)
+    countdownTimer = null
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.timeBox {
+  width: 50vw;
+  display: flex;
+  justify-content: center;
+}
+
+.timeText {
+  color: #fff;
+  font-weight: 590;
+  font-size: 2em;
+  margin-top: 1vw;
+
+  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;
+}
+
+.timeGap {
+  width: 6px;
+  align-self: stretch;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+[dir='rtl'] .timeBox {
+  flex-direction: row-reverse;
+}
+</style>
diff --git a/src/views/Ranking/Couple/GamePlay/components/signInItem.vue b/src/views/Ranking/Couple/GamePlay/components/signInItem.vue
new file mode 100644
index 0000000..15c1dac
--- /dev/null
+++ b/src/views/Ranking/Couple/GamePlay/components/signInItem.vue
@@ -0,0 +1,396 @@
+<template>
+  <div style="width: 100%; position: relative">
+    <itemCenter
+      :imgUrl="imageUrl('rewardBg')"
+      :contentStyle="`inset: 4vw 6vw 10vw;`"
+      :class="{ 'grayscale-container': rewards.dayIndex > currentDayIndex || !rewards.isSigned }"
+    >
+      <!-- 奖品展示 -->
+      <div style="width: 100%; height: 100%" :style="layerStyle">
+        <!-- 奖品项 -->
+        <itemCenter
+          v-for="(goods, index) in dailyConfigs"
+          :imgUrl="imageUrl('rewardGoodsBg')"
+          :contentStyle="`flex-direction: column;justify-content: space-between;align-items: center;`"
+          :style="getGridPosition(index)"
+        >
+          <div
+            style="
+              width: 100%;
+              min-width: 0;
+              aspect-ratio: 1/0.95;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+          >
+            <img
+              v-smart-img
+              :src="goods.cover"
+              alt=""
+              style="width: 50%; display: block; object-fit: cover"
+            />
+          </div>
+
+          <div
+            style="margin-top: -0.5vw; display: flex; justify-content: center; align-items: center"
+          >
+            <div style="font-size: 0.5em; font-weight: 600; color: #ff3b76">
+              {{ formatRewardDisplay(goods.type, goods) }}
+            </div>
+          </div>
+        </itemCenter>
+      </div>
+
+      <!-- 领取条件 -->
+      <div
+        style="position: absolute; bottom: -10vw; width: 60%; height: 10vw"
+        @click="postSignIn(rewards)"
+      >
+        <div
+          v-if="rewards.isSigned"
+          style="
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #ff79a1;
+            font-weight: 600;
+          "
+        >
+          Received
+        </div>
+        <div
+          v-else
+          style="
+            width: 100%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          "
+        >
+          <img
+            v-smart-img
+            v-if="rewards.isPaid"
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="width: 1.3em; min-width: 0; display: block; object-fit: cover"
+          />
+          <div style="color: #ff79a1; font-weight: 600">
+            {{ rewards.isPaid ? rewards.paidCost : 'Free' }}
+          </div>
+        </div>
+      </div>
+    </itemCenter>
+
+    <!-- 补签 -->
+    <div
+      v-if="rewards.dayIndex < currentDayIndex && !rewards.isSigned"
+      style="
+        position: absolute;
+        inset: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      "
+      @click="postSignInSupplement(rewards.dayIndex)"
+    >
+      <itemCenter
+        style="width: 80%"
+        :imgUrl="imageUrl('makeUpBtBg')"
+        :contentStyle="`inset: 0;flex-direction: column;`"
+      >
+        <div style="color: #ff79a1; font-weight: 600">Make-up</div>
+        <div style="display: flex; justify-content: center; align-items: center">
+          <img
+            v-smart-img
+            src="/src/assets/icon/coin.png"
+            alt=""
+            style="width: 1.3em; min-width: 0; display: block; object-fit: cover"
+          />
+          <div style="color: #ff79a1; font-weight: 600">*{{ rewards.paidCost + 500 }}</div>
+        </div>
+      </itemCenter>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+import { formatRewardDisplay } from '@/utils/rewardFormatter.js'
+
+import {
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+  apiGetMySignInStatus, // 获取我的签到状态
+  apiPostMySignIn, // 执行签到
+  apiPostMySignInSupplement, // 补签
+} from '@/api/couple.js'
+
+import itemCenter from '@/components/itemCenter.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+const {
+  crystal, //水晶数量
+  debris, //碎片数量
+
+  TipsShow, // 提示弹窗
+  needCheckInTipsShow, // 需要补签提示
+  signInSuccessShow, // 签到成功提示
+
+  signInInfo, // 签到奖池列表
+} = storeToRefs(coupleStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+// 接收数据
+const props = defineProps({
+  // 奖励配置
+  rewards: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  // 当前签到天数
+  currentDayIndex: {
+    type: Number,
+    default: 0,
+  },
+})
+
+// 补充水晶后的每日奖励配置
+const dailyConfigs = computed(() => {
+  let configs = props.rewards?.addActivityPropsGroup?.activityRewardProps
+  if (props.rewards?.lotteryTicketCount > 0) {
+    return [
+      ...configs,
+      {
+        type: 'TICKET',
+        cover: imageUrl('crystal'),
+        content: props.rewards.lotteryTicketCount,
+      },
+    ]
+  } else {
+    return configs
+  }
+})
+
+// 整体布局
+const layerStyle = computed(() => {
+  let length = dailyConfigs.value.length
+
+  switch (length) {
+    case 1:
+      return `display:flex;justify-content:center;align-items:center;width: 18vw;`
+    case 2:
+      return `display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);`
+    case 3:
+      return `display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);`
+    case 4:
+      return `display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);`
+    default:
+      return `display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);`
+  }
+})
+
+// 每日奖品布局
+const getGridPosition = (index) => {
+  let length = dailyConfigs.value.length
+
+  let gridPosition = []
+  switch (length) {
+    case 1:
+      gridPosition = []
+      break
+    case 2:
+      gridPosition = [
+        { gridArea: '1/1', position: 'relative', top: '2vw' }, //1左
+        { gridArea: '2/2' }, //2右
+      ]
+      break
+    case 3:
+      gridPosition = [
+        { gridArea: '1/1', position: 'relative', left: '2vw' }, //1左
+        { gridArea: '2/1', position: 'relative' }, //2左
+        { gridArea: '2/2', position: 'relative', left: '2vw', bottom: '2vw' }, //2右
+      ]
+      break
+    case 4:
+      gridPosition = [
+        { gridArea: '1/1' }, //1左
+        { gridArea: '1/2' }, //1右
+        { gridArea: '2/1' }, //2左
+        { gridArea: '2/2' }, //2右
+      ]
+      break
+
+    default:
+      gridPosition = []
+      break
+  }
+
+  return gridPosition[index]
+}
+
+// 获取签到状态
+const getSignInStatus = async () => {
+  try {
+    const response = await apiGetMySignInStatus()
+    if (response.status) {
+      signInInfo.value = response.body || {}
+    }
+  } catch (error) {
+    console.error('Failed to get sign in status:', error)
+    throw error
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      crystal.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 获取用户碎片背包
+const getUserFragmentBackpack = async () => {
+  try {
+    const response = await apiGetUserFragmentBackpack({
+      userId: getUserId(),
+      // userId: '1957345312961527809',
+      fragmentsIds: ['2011710323414081538'],
+    })
+    if (response.status) {
+      debris.value = response.body?.[0]?.quantity || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 更新数据
+const updateNumbers = () => {
+  getSignInStatus() // 获取签到状态
+  getMyLotteryTicketCount() // 获取抽奖券数量
+  getUserFragmentBackpack() // 获取碎片数量
+}
+
+// 执行签到
+const postSignIn = async (rewards) => {
+  if (rewards.isSigned) return // 已签到，直接返回
+  try {
+    const response = await apiPostMySignIn({ dayIndex: rewards.dayIndex })
+    if (response.status) {
+      signInSuccessShow.value = true // 签到成功提示
+      updateNumbers() // 更新数据
+    }
+  } catch (error) {
+    if (error.response.errorCode == 5000) {
+      TipsShow.value = true // 余额不足提示
+    } else if (error.response.errorCode == 3283) {
+      needCheckInTipsShow.value = true // 需要补签提示
+    }
+    console.error('签到失败:', error)
+  }
+}
+
+// 补签
+const postSignInSupplement = async (dayIndex) => {
+  try {
+    const response = await apiPostMySignInSupplement({ dayIndex })
+    if (response.status) {
+      signInSuccessShow.value = true // 签到成功提示
+      updateNumbers() // 更新数据
+    }
+  } catch (error) {
+    if (error.response.errorCode == 5000) {
+      TipsShow.value = true // 余额不足提示
+    } else if (error.response.errorCode == 3283) {
+      needCheckInTipsShow.value = true // 需要补签提示
+    }
+    console.error('补签失败:', error)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+}
+
+.grayscale-container {
+  filter: grayscale(100%) brightness(90%);
+  pointer-events: none;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Ranking/Couple/Ranking.vue b/src/views/Ranking/Couple/Ranking.vue
new file mode 100644
index 0000000..f25251e
--- /dev/null
+++ b/src/views/Ranking/Couple/Ranking.vue
@@ -0,0 +1,174 @@
+<template>
+  <div style="padding: 4vw 0">
+    <!-- 栏目按钮 -->
+    <div
+      style="
+        width: 100vw;
+        padding: 0 4vw;
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 10vw;
+      "
+    >
+      <img
+        v-smart-img
+        :src="imageUrl(getImgName('rankingWeeklyBt'))"
+        alt=""
+        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+        @click="changeTag('weekly')"
+      />
+      <img
+        v-smart-img
+        :src="imageUrl(getImgName('rankingSeasonBt'))"
+        alt=""
+        style="flex: 1; min-width: 0; display: block; object-fit: cover"
+        @click="changeTag('season')"
+      />
+    </div>
+
+    <!-- 排行榜 -->
+    <div>
+      <!-- 前三名 -->
+
+      <!-- 从第4名开始 -->
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useThrottle } from '@/utils/useDebounce.js'
+import { storeToRefs } from 'pinia'
+
+import {
+  apiGetCpRanking, // 获取cp排行榜
+} from '@/api/couple.js'
+
+import TopUser from './components/topUser.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const weeklyShow = ref(true) //本周数据
+const seasonShow = ref(false) //季度数据
+
+const changeTag = (module) => {
+  switch (module) {
+    case 'weekly':
+      if (weeklyShow.value) return
+      weeklyShow.value = true
+      seasonShow.value = false
+      apiGetRanking() // 获取排行榜
+      break
+    case 'season':
+      if (seasonShow.value) return
+      weeklyShow.value = false
+      seasonShow.value = true
+      apiGetRanking() // 获取排行榜
+      break
+  }
+}
+
+const RankingLoadmore = ref(null) //触底模块
+const rankingPageNo = ref(1) //分页页码
+const Ranking = ref([]) //原始排行榜
+const rankingAdd = ref([]) //加载排行榜项
+// 完整排行榜
+const rankingTotal = computed(() => {
+  return [...Ranking.value, ...rankingAdd.value]
+})
+const myRanking = ref({}) //我的排名
+
+// 处理排行榜小于3人时的情况
+const RankingHasTop3 = computed(() => {
+  let RankingShow = [...Ranking.value]
+  if (Ranking.value.length < 3) {
+    let addNullUser = Array.from({ length: 3 - Ranking.value.length }, () => ({
+      avatar: '',
+      nickname: '',
+      quantity: '',
+    }))
+    RankingShow.push(...addNullUser)
+  }
+  return RankingShow
+})
+
+// 展示用的榜单
+const showRanking = computed(() => {
+  return Ranking.value.filter((_, index) => index >= 10)
+  // return []
+})
+
+const apiGetRanking = async () => {
+  let type = weeklyShow.value ? 'WEEK' : 'SEASON'
+  try {
+    const response = await apiGetCpRanking(type)
+    if (response.status && response.body) {
+      Ranking.value = response.body.thisWeekUserTop || [] // 原始排行榜
+      myRanking.value = response.body.thisUser || {} // 我的排名
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 触发节流获取排行榜
+const debouceGetRanking = useThrottle(() => {
+  // getRanking() //加载新的排行榜项
+}, 1000)
+
+// IntersectionObserver配置
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.intersectionRatio > 0 && rankingTotal.value.length != 0) {
+      console.log('触发RankingLoadmore加载')
+      debouceGetRanking()
+    }
+  })
+})
+
+// 组件挂载时检测环境
+onMounted(() => {
+  apiGetRanking() // 获取排行榜
+
+  // 监听加载模块
+  if (RankingLoadmore.value) {
+    console.log('监控加载模块')
+    observer.observe(RankingLoadmore.value)
+  }
+})
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/Ranking/Couple/components/Barrage.vue b/src/views/Ranking/Couple/components/Barrage.vue
new file mode 100644
index 0000000..b042025
--- /dev/null
+++ b/src/views/Ranking/Couple/components/Barrage.vue
@@ -0,0 +1,293 @@
+<!-- 告白墙弹幕 -->
+<template>
+  <div
+    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
+  >
+    <!-- 双行弹幕轨道 -->
+    <div
+      v-for="(track, index) in visibleTracks"
+      :key="index"
+      style="position: absolute; width: 100%; height: 50px"
+      :style="{ top: `calc(${index} * 16vw)` }"
+    >
+      <div
+        v-for="item in track"
+        :key="item.id"
+        class="barrage-item"
+        style="
+          position: absolute;
+          border-radius: 26px;
+          padding: 8px;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          backdrop-filter: blur(1px);
+        "
+        :style="getBarrageStyle(item)"
+        @animationend="handleAnimationEnd(item.id)"
+      >
+        <!-- 发送人 -->
+        <img
+          v-smart-img
+          :src="item.senderAvatar || ''"
+          alt=""
+          style="
+            width: 8vw;
+            border-radius: 50%;
+            display: block;
+            aspect-ratio: 1/1;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+        <!-- 接收人 -->
+        <img
+          v-smart-img
+          :src="item.receiverAvatar || ''"
+          alt=""
+          style="
+            width: 8vw;
+            border-radius: 50%;
+            display: block;
+            aspect-ratio: 1/1;
+            object-fit: cover;
+          "
+          @error="handleAvatarImageError"
+        />
+        <div
+          style="
+            white-space: nowrap;
+            font-weight: 700;
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-image: linear-gradient(
+              180deg,
+              #fff9a9 26.92%,
+              #ed7d0a 52.08%,
+              #fffab5 73.08%
+            );
+          "
+        >
+          {{ item.content }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+
+const { locale, t } = useI18n()
+
+const props = defineProps({
+  barrageList: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+
+  speed: {
+    type: Number,
+    default: 80, // 基础速度系数
+  },
+
+  maxItems: {
+    type: Number,
+    default: 4, // 每行最大弹幕数
+  },
+
+  loopInterval: {
+    type: Number,
+    default: 2000, // 弹幕生成间隔(ms)
+  },
+})
+
+const tracks = ref([[], []]) // 弹幕轨道数据
+const idCounter = ref(0) // 弹幕ID计数器
+const currentIndex = ref(0) // 用于取下一项弹幕的索引
+
+// 计算实际显示的轨道（过滤空轨道）
+const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
+
+// 获取弹幕样式
+const getBarrageStyle = (item) => {
+  const isRTL = locale.value === 'ar'
+
+  return {
+    animationDuration: `${item.duration}s`,
+    animationDelay: `${item.delay}s`,
+    '--start-pos': `${item.startPos}px`,
+    borderRadius: '200px',
+    background: 'linear-gradient(180deg, #FFACBB 0%, rgba(255, 172, 187, 0.00) 58.38%), #FF4768',
+    boxShadow:
+      '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',
+    // RTL布局支持
+    ...(isRTL
+      ? {
+          right: '0',
+          left: 'auto',
+          transform: 'translateX(-100vw)',
+        }
+      : {
+          left: '0',
+          right: 'auto',
+          transform: 'translateX(100vw)',
+        }),
+  }
+}
+
+// 生成随机弹幕属性
+const generateBarrageProps = (item) => {
+  const textLength = item.content.length
+  return {
+    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间（每字符减少0.2秒，持续时间不低于5秒）
+    startPos: 0, // 弹幕项起始位置
+  }
+}
+
+// 添加弹幕到轨道
+const addToTrack = (item) => {
+  // 寻找最短的轨道的下标值
+  const trackIndex = tracks.value.reduce(
+    (minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
+    0,
+  )
+
+  if (tracks.value[trackIndex].length < props.maxItems) {
+    tracks.value[trackIndex].push({
+      ...item,
+      id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
+      delay: 0, // 随机延迟（0-4秒）
+      ...generateBarrageProps(item),
+    })
+  }
+}
+
+// 清理完成动画的弹幕（根据动画结束状态遍历）
+const cleanCompleted = () => {
+  tracks.value.forEach((track) => {
+    for (let i = track.length - 1; i >= 0; i--) {
+      if (track[i].completed) {
+        track.splice(i, 1)
+      }
+    }
+  })
+}
+
+// 设置弹幕动画结束状态
+const handleAnimationEnd = (id) => {
+  tracks.value.forEach((track) => {
+    const item = track.find((item) => item.id === id)
+    if (item) item.completed = true
+  })
+}
+
+// 获取下一项弹幕（循环逻辑）
+const getNextBarrage = () => {
+  if (props.barrageList.length === 0) return null
+
+  const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
+  currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0
+
+  return { ...item } // 返回副本避免污染原始数据
+}
+
+// 弹幕循环逻辑
+let barrageInterval = null
+
+// 根据设置的时间间隔自动获取下一项弹幕
+const startBarrage = () => {
+  barrageInterval = setInterval(() => {
+    cleanCompleted() // 清理完成动画的弹幕
+
+    const nextBarrage = getNextBarrage() // 获取下一项弹幕
+    if (nextBarrage) {
+      addToTrack(nextBarrage) // 添加弹幕到轨道
+    }
+  }, props.loopInterval)
+}
+
+onMounted(() => {
+  startBarrage() // 开启弹幕循环
+})
+
+onUnmounted(() => {
+  clearInterval(barrageInterval) // 清空弹幕
+})
+
+// 监听数据源变化
+watch(
+  () => props.barrageList,
+  (newList) => {
+    currentIndex.value = 0 // 重置索引，确保重新开始循环
+    clearInterval(barrageInterval) // 清空弹幕
+
+    // 如果列表为空，停止生成新弹幕
+    if (newList.length !== 0) {
+      startBarrage() // 重启弹幕循环
+    }
+  },
+  { deep: true },
+)
+</script>
+
+<style scoped>
+/* 样式保持不变（同之前版本） */
+.barrage-item {
+  will-change: transform;
+  animation: moveLeft linear forwards;
+}
+
+@keyframes moveLeft {
+  0% {
+    transform: translateX(100vw);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* RTL支持 - 镜像弹幕动画 */
+[dir='rtl'] .barrage-item {
+  animation: moveRight linear forwards;
+}
+
+@keyframes moveRight {
+  0% {
+    transform: translateX(-100vw);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue
new file mode 100644
index 0000000..1bedc8e
--- /dev/null
+++ b/src/views/Ranking/Couple/components/topUser.vue
@@ -0,0 +1,285 @@
+<template>
+  <div style="width: 100%">
+    <div style="position: relative">
+      <img
+        v-smart-img
+        :src="BorderImgUrl"
+        alt=""
+        width="100%"
+        style="display: block; position: relative; z-index: 2"
+      />
+      <!-- 头像 -->
+      <div
+        style="
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        "
+        :style="{ height: avatarContainerHeight }"
+      >
+        <div :style="{ width: avatarWidth }">
+          <img
+            v-smart-img
+            :src="avatarUrl || ''"
+            alt=""
+            width="100%"
+            style="display: block; border-radius: 50%; aspect-ratio: 1/1; object-fit: cover"
+            @error="handleAvatarImageError"
+          />
+        </div>
+      </div>
+
+      <!-- 用户名和贡献值 -->
+      <div
+        style="
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          z-index: 3;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 2px;
+        "
+        :style="{ height: bottomSectionHeight }"
+      >
+        <div
+          style="display: flex; justify-content: center; align-items: center"
+          :style="{
+            width: nameValueWidth,
+            height: nameValueHeight,
+          }"
+        >
+          <div style="font-weight: 700" class="showText" :class="isTopOne ? 'top1Text' : 'text'">
+            {{ name }}
+          </div>
+        </div>
+        <div
+          style="
+            padding: 1px 2px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+          :style="{
+            width: distributionValueWidth,
+            height: distributionValueHeight,
+          }"
+        >
+          <div
+            style="font-weight: 590"
+            class="showText"
+            :class="isTopOne ? 'top1Text' : 'text'"
+            :style="{
+              color: ranking == '1' ? `#FFE601` : '#FFF',
+            }"
+          >
+            ${{ distributionValue }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { handleAvatarImageError } from '@/utils/imageHandler.js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  ranking: {
+    type: String,
+    default: '',
+  },
+
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+
+  BorderImgUrl: {
+    type: String,
+    required: true,
+  },
+
+  name: {
+    type: String,
+    default: '',
+  },
+
+  distributionValue: {
+    type: String,
+    default: '',
+  },
+})
+
+// 是否为第一名
+const isTopOne = computed(() => {
+  return props.ranking === '1'
+})
+
+// 头像容器高度
+const avatarContainerHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '70%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '60%'
+  }
+})
+
+// 头像宽度
+const avatarWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '43%'
+    case '2':
+      return '77%'
+    case '3':
+      return '77%'
+    default:
+      return '77%'
+  }
+})
+
+// 底部信息区域高度
+const bottomSectionHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '35%'
+    case '2':
+      return '39%'
+    case '3':
+      return '40%'
+    default:
+      return '39%'
+  }
+})
+
+// 名称宽度
+const nameValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '30%'
+    case '2':
+      return '60%'
+    case '3':
+      return '60%'
+    default:
+      return '60%'
+  }
+})
+
+// 名称高度
+const nameValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '25%'
+    case '2':
+      return '25%'
+    case '3':
+      return '25%'
+    default:
+      return '25%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '25%'
+    case '2':
+      return '40%'
+    case '3':
+      return '40%'
+    default:
+      return '40%'
+  }
+})
+
+// 贡献值宽度
+const distributionValueHeight = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '35%'
+    case '2':
+      return '20%'
+    case '3':
+      return '20%'
+    default:
+      return '20%'
+  }
+})
+
+// 金币图标宽度
+const coinWidth = computed(() => {
+  switch (props.ranking) {
+    case '1':
+      return '1em'
+    case '2':
+      return '0.9em'
+    case '3':
+      return '0.9em'
+    default:
+      return '0.9em'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: black;
+}
+
+.showText {
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.top1Text {
+  font-size: 0.75em;
+}
+
+.text {
+  font-size: 0.6em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>
diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
new file mode 100644
index 0000000..96c1ee1
--- /dev/null
+++ b/src/views/Ranking/Couple/index.vue
@@ -0,0 +1,1386 @@
+<template>
+  <div class="fullPage">
+    <!-- 预加载状态 -->
+    <div v-show="isLoading" class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>{{ $t('loading') }}...</p>
+    </div>
+
+    <!-- 主要内容 -->
+    <div
+      v-show="!isLoading"
+      style="width: 100vw; min-height: 100vh; overflow: hidden; position: relative"
+    >
+      <!-- 页面背景 -->
+      <BackgroundLayer :backgroundImages="[imageUrl('bg1'), imageUrl('bg2'), imageUrl('bg3')]" />
+
+      <!-- 页面内容 -->
+      <div style="position: relative; z-index: 2; margin-top: 150vw">
+        <!-- 弹幕 -->
+        <Barrage
+          style="display: block; width: 100vw; height: 30vw"
+          :barrageList="barrageList"
+        ></Barrage>
+
+        <!-- 情书模块按钮 -->
+        <div style="display: flex; justify-content: center; align-items: center">
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('letterBg'))"
+            alt=""
+            style="width: 90%"
+            @click="myCoupleShow = true"
+          />
+        </div>
+
+        <!-- 历史榜首 -->
+        <!-- <itemCenter
+          :imgUrl="imageUrl(getImgName('historyTopBg'))"
+          :contentStyle="`inset: 30vw 9vw 27vw;`"
+        >
+          <div style="width: 100%; height: 100%; overflow-x: auto">
+            <div style="padding: 0 16vw; display: flex; gap: 4vw">
+              <div v-for="value in 4">
+                <img
+            v-smart-img :src="imageUrl('topCoupleFrame')" alt="" style="width: 50vw" />
+              </div>
+            </div>
+          </div>
+        </itemCenter> -->
+
+        <!-- 栏目按钮 -->
+        <div
+          style="
+            width: 100vw;
+            padding: 0 10vw;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10vw;
+          "
+        >
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('rankingBt'))"
+            alt=""
+            style="flex: 1; min-width: 0; display: block; object-fit: cover"
+            @click="changeTag('ranking')"
+          />
+          <img
+            v-smart-img
+            :src="imageUrl(getImgName('gamePlayBt'))"
+            alt=""
+            style="flex: 1; min-width: 0; display: block; object-fit: cover"
+            @click="changeTag('gamePlay')"
+          />
+        </div>
+
+        <!-- 排行榜标签页 -->
+        <Ranking v-show="RankingShow" />
+
+        <!-- 游戏玩法标签页 -->
+        <GamePlay v-show="GamePlayShow" />
+      </div>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
+        <!-- 我的伴侣弹窗 -->
+        <div v-show="myCoupleShow" style="position: fixed; bottom: 0; width: 100%">
+          <div
+            style="
+              border-radius: 16px 16px 0 0;
+              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
+              style="margin: 0; font-size: 1.2em; font-weight: 600; color: #fff; margin-bottom: 4vw"
+            >
+              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)"
+              >
+                <itemCenter
+                  :imgUrl="imageUrl('coupleItem')"
+                  :contentStyle="`justify-content: space-between;padding-left: 4vw;`"
+                >
+                  <div style="flex: 1; min-width: 0; display: flex; align-items: center; gap: 4vw">
+                    <img
+                      v-smart-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)">
+                        {{ couple?.cpUserProfile.account }}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    style="
+                      width: 11.4%;
+                      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')"
+              >
+                Send a letter of love
+              </button>
+            </div>
+
+            <!-- 无伴侣 -->
+            <div
+              v-else
+              style="display: flex; flex-direction: column; align-items: center; gap: 4vw"
+            >
+              <img
+                v-smart-img
+                :src="imageUrl('noCoupleSign')"
+                alt=""
+                style="width: 50%; display: block"
+              />
+              <p style="color: rgba(0, 0, 0, 0.4); font-size: 1em; font-weight: 700">
+                There are currently no couples.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <!-- 编写情书弹窗 -->
+        <div
+          v-show="writeLetterShow"
+          style="
+            margin: 10vh 4vw 5vh;
+            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="Please enter what you want to write..."
+              maxlength="80"
+              style="
+                width: 100%;
+                min-height: 10vh;
+                border-radius: 8px;
+                border: 1px solid #e6e6e6;
+                padding: 2vw 2vw 18px;
+
+                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;
+              "
+            >
+              Do you need to publish the contents of your 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
+          v-show="confirmShow"
+          style="
+            margin: 10vh 4vw 5vh;
+            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">Love letter</h3>
+
+          <!-- 内容 -->
+          <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+            Are you sure you want to spend 5000 coins to confess your feelings to her?
+          </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="sendLoveLetter"
+            >
+              {{ t('confirm') }}
+            </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">
+              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"
+            >
+              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">
+              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">Check-in successful.</div>
+          </div>
+        </div>
+
+        <!-- 我的最新情书 -->
+        <itemCenter
+          style="margin: 10vh 0 5vh"
+          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;
+              "
+            >
+              <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="margin: 10vh 4vw 5vh; position: relative; width: 90%"
+          @click.stop
+        >
+          <itemCenter
+            :imgUrl="imageUrl('resultBg')"
+            :contentStyle="`inset: 35vw 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
+                  v-show="result.length > 1 && resultShowIndex > 0"
+                  :src="imageUrl('resultBack')"
+                  alt=""
+                  style="display: block; width: 80%; object-fit: cover"
+                  @click="resultShowIndex--"
+                />
+              </div>
+              <!-- 奖品 -->
+              <img
+                :src="result[resultShowIndex]?.prize?.prizeImage"
+                alt=""
+                width="50%"
+                style="display: block"
+              />
+              <!-- 下一个奖品 -->
+              <div
+                style="
+                  width: 8vw;
+                  align-self: stretch;
+
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                "
+              >
+                <img
+                  v-smart-img
+                  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;
+                background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+                background-clip: text;
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                position: relative;
+              "
+            >
+              You Get {{ result[resultShowIndex]?.prize?.prizeName }}
+              <div
+                v-if="result.length > 1"
+                style="
+                  position: absolute;
+                  z-index: 9999;
+                  inset: 0;
+
+                  padding-right: 8%;
+                  display: flex;
+                  justify-content: flex-end;
+                  align-items: center;
+
+                  font-size: 0.8em;
+                  font-weight: 590;
+                  background: linear-gradient(0deg, #f3b700 0%, #ffeec6 100%);
+                  background-clip: text;
+                  -webkit-background-clip: text;
+                  -webkit-text-fill-color: transparent;
+                "
+              >
+                {{ resultShowIndex + 1 }} / {{ result.length }}
+              </div>
+            </div>
+
+            <!-- 关闭弹窗按钮 -->
+            <div style="width: 30vw; height: 10vw" @click="closedPopup"></div>
+          </itemCenter>
+        </div>
+
+        <!-- 中奖历史 -->
+        <div
+          v-show="drawRecordShow"
+          style="margin: 10vh 4vw 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(220, 228, 255, 0.4) 10.17%,
+                    rgba(151, 176, 255, 0.4) 60.22%,
+                    rgba(220, 228, 255, 0.4) 103.12%
+                  );
+                  box-shadow: 0 2.542px 5.084px 0 rgba(151, 176, 255, 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; object-fit: cover; display: block; aspect-ratio: 1/1"
+                  />
+                  <div style="font-weight: 590; font-size: 0.9em">
+                    {{ record.prize?.prizeName }}
+                  </div>
+                </div>
+                <div style="font-weight: 510; font-size: 0.8em">
+                  {{ formatUTCCustom(record.drawTime) }}
+                </div>
+              </div>
+            </div>
+          </itemCenter>
+        </div>
+
+        <!-- 领取历史(水晶&碎片) -->
+        <div
+          v-show="receiveRecordShow"
+          style="margin: 10vh 4vw 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-for="(record, index) in receiveRecord"
+                style="
+                  border-radius: 12px;
+                  border: 2px solid #fff;
+                  background: linear-gradient(
+                    264deg,
+                    rgba(220, 228, 255, 0.4) 10.17%,
+                    rgba(151, 176, 255, 0.4) 60.22%,
+                    rgba(220, 228, 255, 0.4) 103.12%
+                  );
+                  box-shadow: 0 2.542px 5.084px 0 rgba(151, 176, 255, 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
+                    v-if="record.itemType == 'cp_fragment'"
+                    :src="imageUrl('debris')"
+                    alt=""
+                    style="width: 10vw; object-fit: cover; display: block; aspect-ratio: 1/1"
+                  />
+                  <img
+                    v-smart-img
+                    v-else-if="record.itemType == 'lottery_ticket'"
+                    :src="imageUrl('crystal')"
+                    alt=""
+                    style="width: 10vw; object-fit: cover; display: block; aspect-ratio: 1/1"
+                  />
+                  <div style="font-weight: 590; font-size: 0.9em">
+                    {{ record.changeType == 2 ? '-' : '' }}{{ record.changeAmount }}
+                  </div>
+                </div>
+                <div style="font-weight: 510; font-size: 0.8em">
+                  {{ 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
+        >
+          <!-- 标题 -->
+          <h3 style="color: rgba(0, 0, 0, 0.8); font-size: 1.1em; font-weight: 700">Love letter</h3>
+
+          <!-- 内容 -->
+          <div style="color: rgba(0, 0, 0, 0.4); font-size: 0.8em; font-weight: 500">
+            Are you sure you want to exchange the current item?
+          </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>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useLangStore } from '@/stores/lang'
+import { useI18n } from 'vue-i18n'
+import { getPngUrl } from '@/config/imagePaths.js'
+import { getUserId, setUserInfo } from '@/utils/userStore.js'
+import { viewUserInfo } from '@/utils/appBridge.js'
+import { connectToApp } from '@/utils/appConnector.js'
+import { preloadImages } from '@/utils/imagePreloader.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
+import { showError, showSuccess } from '@/utils/toast.js'
+import { handleAvatarImageError, handleRewardImageError } from '@/utils/imageHandler.js'
+import { useCoupleStore } from '@/stores/couple'
+import { storeToRefs } from 'pinia'
+
+import {
+  apiGetMyLotteryTicketCount, // 获取我的剩余抽奖券数量
+  apiGetUserFragmentBackpack, // 获取用户碎片背包
+  exchangeGood, //用碎片兑换资源
+  apiGetMyCpObject, // 获取我的-cp对象
+  apiSendLoveLetter, // 发送CP告白信封
+  apiGetLoveLetterWall, // 查询告白墙
+  apiGetLatestLoveLetter, // 查询我收到的最新告白信封
+  apiGetCpSeasonTop1List, // 查询赛季榜Top1列表
+} from '@/api/couple.js'
+
+import Ranking from './Ranking.vue'
+import GamePlay from './GamePlay/Gameplay.vue'
+import Barrage from './components/Barrage.vue'
+import BackgroundLayer from '@/components/BackgroundLayer.vue'
+import itemCenter from '@/components/itemCenter.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const coupleStore = useCoupleStore()
+
+const {
+  crystal, // 水晶数量
+  debris, // 碎片数量
+
+  TipsShow, // 提示弹窗
+  needCheckInTipsShow, // 需要补签提示
+  signInSuccessShow, // 签到成功提示
+
+  rewardShow, // 奖励弹窗
+  reward, // 奖励
+  resultShow, // 抽奖结果弹窗
+  result, // 抽奖结果
+  drawRecordShow, // 中奖历史弹窗
+  myRecords, // 我的抽奖记录
+  receiveRecordShow, // 领取水晶&碎片历史弹窗
+  receiveRecord, // 领取水晶&碎片记录
+
+  exchangeConfirmShow, // 兑换确认弹窗
+  exchangeItem, // 当前兑换的物品
+} = storeToRefs(coupleStore)
+
+const langStore = useLangStore()
+// 当前语言类型
+const currentLangType = computed(() => {
+  return langStore.selectedLang?.type || 'en'
+})
+
+const isLoading = ref(true) // 预加载状态
+
+// 获取OSS图片URL的函数
+const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)
+
+// 根据语言获取图片名
+const getImgName = (filename) => {
+  return currentLangType.value === 'ar' ? `${filename}_ar` : filename
+}
+
+const barrageList = ref([]) // 弹幕数据
+
+const RankingShow = ref(true) // 排行榜模块展示
+const GamePlayShow = ref(false) // 游戏玩法模块展示
+
+// 栏目切换
+const changeTag = (module) => {
+  switch (module) {
+    case 'ranking':
+      RankingShow.value = true
+      GamePlayShow.value = false
+      break
+    case 'gamePlay':
+      RankingShow.value = false
+      GamePlayShow.value = true
+      break
+  }
+}
+
+const latestLoveLetter = ref({}) // 最新的一封情书
+const myCouples = ref([]) // 伴侣列表
+const selectedCouple = ref({}) // 选中的情书对象
+const writeLetterText = ref('') // 情书内容
+const letterTextLength = ref(0) // 情书内容字数
+const seasonTop1List = ref([]) // 赛季榜Top1列表
+
+const resultShowIndex = ref(0) // 抽奖结果索引
+
+// 选中伴侣
+const selectCouple = (couple) => {
+  if (selectedCouple.value.account === couple.account) {
+    // 如果已经选中伴侣，则取消选中
+    selectedCouple.value = {}
+  } else {
+    selectedCouple.value = couple
+  }
+}
+
+// 更新情书内容
+const updateLetterText = () => {
+  // 情书内容不能为空
+  if (!writeLetterText.value.trim()) {
+    letterTextLength.value = 0
+    return
+  }
+
+  // 情书内容字数不得高于80字
+  if (writeLetterText.value.length > 80) {
+    writeLetterText.value = writeLetterText.value.slice(0, 80)
+  }
+  letterTextLength.value = writeLetterText.value.length
+}
+
+// 遮罩层
+const lastLetterShow = ref(false) // 最新情书弹窗
+const myCoupleShow = ref(false) // 我的伴侣弹窗
+const writeLetterShow = ref(false) // 写信模块弹窗
+const isPublic = ref(false) // 是否公开
+const confirmShow = ref(false) // 二次确认发送弹窗
+const maskLayerShow = computed(() => {
+  return (
+    lastLetterShow.value ||
+    myCoupleShow.value ||
+    writeLetterShow.value ||
+    TipsShow.value ||
+    confirmShow.value ||
+    needCheckInTipsShow.value ||
+    signInSuccessShow.value ||
+    rewardShow.value ||
+    resultShow.value ||
+    drawRecordShow.value ||
+    receiveRecordShow.value ||
+    exchangeConfirmShow.value
+  )
+})
+
+// 打开遮罩层
+const showPopup = (type) => {
+  switch (type) {
+    case 'myCouple':
+      closedPopup() // 关闭弹窗
+      myCoupleShow.value = true
+      break
+    case 'writeLetter':
+      closedPopup() // 关闭弹窗
+      writeLetterShow.value = true
+      break
+    case 'confirm':
+      if (!writeLetterText.value.trim()) return
+      closedPopup() // 关闭弹窗
+      confirmShow.value = true
+      break
+    case 'tips':
+      cancelSend() // 取消发送
+      TipsShow.value = true
+      break
+
+    default:
+      closedPopup() // 关闭弹窗
+      break
+  }
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  lastLetterShow.value = false
+  myCoupleShow.value = false
+  writeLetterShow.value = false
+  TipsShow.value = false
+  confirmShow.value = false
+  needCheckInTipsShow.value = false
+  signInSuccessShow.value = false
+  resultShow.value = false
+  drawRecordShow.value = false
+  receiveRecordShow.value = false
+  exchangeConfirmShow.value = false
+}
+
+// 创建定时器引用
+const tipsTimer = ref(null)
+const signInSuccessTimer = ref(null)
+
+// 监听 needCheckInTipsShow 的变化
+watch(
+  () => needCheckInTipsShow.value,
+  (newValue) => {
+    if (newValue) {
+      // 如果当前是 true，启动定时器
+      if (tipsTimer.value) {
+        clearTimeout(tipsTimer.value)
+      }
+      tipsTimer.value = setTimeout(() => {
+        needCheckInTipsShow.value = false
+      }, 1500) // 1.5秒后自动隐藏
+    }
+  },
+)
+
+// 监听 signInSuccessShow 的变化
+watch(
+  () => signInSuccessShow.value,
+  (newValue) => {
+    if (newValue) {
+      // 如果当前是 true，启动定时器
+      if (signInSuccessTimer.value) {
+        clearTimeout(signInSuccessTimer.value)
+      }
+      signInSuccessTimer.value = setTimeout(() => {
+        signInSuccessShow.value = false
+      }, 1500) // 1.5秒后自动隐藏
+    }
+  },
+)
+
+// 取消发送
+const cancelSend = () => {
+  closedPopup()
+  selectedCouple.value = {}
+  writeLetterText.value = ''
+  letterTextLength.value = 0
+  isPublic.value = false
+}
+
+// 发送情书
+const sendLoveLetter = async () => {
+  if (!selectedCouple.value.account) return
+  try {
+    await apiSendLoveLetter({
+      receiverId: selectedCouple.value.id,
+      content: writeLetterText.value,
+      isPublic: isPublic.value ? 1 : 0,
+    })
+
+    cancelSend()
+  } catch (error) {
+    // 余额不足
+    if (error.response.errorCode == 5000) {
+      cancelSend()
+      showPopup('tips')
+    }
+  }
+}
+
+// 跳转到充值页面
+const gotoRecharge = () => {
+  router.push('/recharge')
+}
+
+// 查询告白墙信息列表
+const getLoveLetterWall = async () => {
+  const resLoveLetterWall = await apiGetLoveLetterWall()
+  if (resLoveLetterWall.status && resLoveLetterWall.body) {
+    barrageList.value = resLoveLetterWall.body
+  }
+}
+
+// 查询赛季榜Top1列表
+const getCpSeasonTop1List = async () => {
+  const resCpSeasonTop1List = await apiGetCpSeasonTop1List()
+  if (resCpSeasonTop1List.status && resCpSeasonTop1List.body) {
+    seasonTop1List.value = resCpSeasonTop1List.body
+  }
+}
+
+// 查询我收到的最新告白信封
+const getLatestLoveLetter = async () => {
+  const resLatestLoveLetter = await apiGetLatestLoveLetter()
+  if (resLatestLoveLetter.status && resLatestLoveLetter.body) {
+    latestLoveLetter.value = resLatestLoveLetter.body
+    if (latestLoveLetter.value.id) {
+      lastLetterShow.value = true
+    }
+  }
+}
+
+// 查询我的CP对象
+const getMyCpObject = async () => {
+  const resMyCpObject = await apiGetMyCpObject()
+  if (resMyCpObject.status && resMyCpObject.body) {
+    myCouples.value = resMyCpObject.body
+    // myCouples.value = Array.from({ length: 4 }, () => {
+    //   return { ...resMyCpObject.body[0] }
+    // })
+  }
+}
+
+// 获取抽奖券
+const getMyLotteryTicketCount = async () => {
+  try {
+    const response = await apiGetMyLotteryTicketCount('2004471533988167125')
+    if (response.status) {
+      crystal.value = response.body || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 获取用户碎片背包
+const getUserFragmentBackpack = async () => {
+  try {
+    const response = await apiGetUserFragmentBackpack({
+      userId: getUserId(),
+      // userId: '1957345312961527809',
+      fragmentsIds: ['2011710323414081538'],
+    })
+    if (response.status) {
+      debris.value = response.body?.[0]?.quantity || 0
+    }
+  } catch (error) {
+    showError(error.message)
+  }
+}
+
+// 更新数据
+const updateNumbers = () => {
+  getMyLotteryTicketCount() // 获取抽奖券数量
+  getUserFragmentBackpack() // 获取碎片数量
+}
+
+// 用碎片兑换资源
+const exchangeGoods = async () => {
+  try {
+    const resExchangeGood = await exchangeGood(exchangeItem.value)
+    if (resExchangeGood.status) {
+      updateNumbers() // 更新数据
+      exchangeItem.value = null // 清空当前兑换的物品
+      exchangeConfirmShow.value = false // 关闭兑换确认弹窗
+    }
+  } catch (error) {
+    console.log('error:', error)
+    // 信息提示id有误
+    showWarning(error.response.errorMsg)
+  }
+}
+
+// 页面初始化数据
+const initData = async () => {
+  await Promise.all([
+    getLoveLetterWall(), // 查询告白墙信息列表
+    getLatestLoveLetter(), // 查询我收到的最新告白信封
+    getMyCpObject(), // 查询我的CP对象
+    getCpSeasonTop1List(), // 查询赛季榜Top1列表
+  ])
+}
+
+// 预加载关键图片
+const preloadCriticalImages = async () => {
+  const criticalImages = []
+
+  const criticalImages_ar = []
+
+  if (currentLangType.value == 'en') {
+    await preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    await preloadImages(criticalImages_ar)
+  }
+}
+
+// 完成预加载
+const completePreloading = async () => {
+  try {
+    // 执行所有初始化操作
+    await Promise.all([initData(), preloadCriticalImages()])
+    console.log('预加载完成，初始化数据成功')
+  } catch (error) {
+    console.error('预加载过程中发生错误:', error)
+  } finally {
+    // 无论成功或失败都结束加载状态
+    isLoading.value = false
+  }
+}
+
+// 预加载其他图片
+const preloadOtherImages = async () => {
+  const criticalImages = []
+
+  const criticalImages_ar = []
+
+  if (currentLangType.value == 'en') {
+    await preloadImages(criticalImages)
+  } else if (currentLangType.value == 'ar') {
+    await preloadImages(criticalImages_ar)
+  }
+}
+
+// 使用工具函数连接APP
+const connectToAppHandler = async () => {
+  await connectToApp(() => {
+    // 连接成功回调
+    completePreloading() // 完成预加载
+  })
+}
+
+// 组件挂载时检测环境
+onMounted(() => {
+  connectToAppHandler()
+  preloadOtherImages() // 预加载其他图片
+})
+
+onUnmounted(() => {
+  if (tipsTimer.value) {
+    clearTimeout(tipsTimer.value)
+  }
+  if (signInSuccessTimer.value) {
+    clearTimeout(signInSuccessTimer.value)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: #fff;
+}
+
+.fullPage {
+  width: 100vw;
+  min-height: 100vh;
+  background: #ff79a1;
+  position: relative;
+}
+
+/* 添加加载动画样式 */
+.loading-container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #666;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #f59e0b;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+textarea::placeholder {
+  font-size: 0.8em;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.scrollY::-webkit-scrollbar {
+  display: none;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 14px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>