From e9cb1474367fd32c17bcc5e3a99cfc00b80b7fde Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 22 Jan 2026 15:15:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(cp=E6=8E=92=E8=A1=8C=E6=A6=9C):=20?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=A6=9C=E9=A6=96=E5=B7=A6=E5=8F=B3=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E5=88=87=E6=8D=A2=E6=95=88=E6=9E=9C=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Ranking/Couple/index.vue | 70 ++++++++++++++++++++++++------
 1 file changed, 57 insertions(+), 13 deletions(-)

diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 0e89717..8d4090c 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -42,13 +42,19 @@
             style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
             class="scrollX"
           >
-            <div class="topList" :style="{ left: listLeftPosition }">
+            <div
+              class="topList"
+              :style="{ left: listLeftPosition }"
+              @touchstart="handleTouchStart"
+              @touchmove="handleTouchMove"
+              @touchend="handleTouchEnd"
+            >
               <!-- 右占位 -->
               <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
 
               <!-- top1情侣头像 -->
               <itemCenter
-                v-for="(item, index) in 1"
+                v-for="(item, index) in seasonTop1List"
                 style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
                 :style="{ width: index === centerIndex ? '60vw' : '40vw' }"
                 :imgUrl="imageUrl('topCoupleFrame')"
@@ -1403,28 +1409,66 @@ const myCouples = ref([]) // 伴侣列表
 const selectedCouple = ref({}) // 选中的情书对象
 const writeLetterText = ref('') // 情书内容
 const letterTextLength = ref(0) // 情书内容字数
-const seasonTop1List = ref([]) // 赛季榜Top1列表
 
 const resultShowIndex = ref(0) // 抽奖结果索引
 
+const seasonTop1List = ref([{}]) // 赛季榜Top1列表
 const listLeftPosition = ref('0') //top历史榜单
 const centerIndex = ref(0) // 默认中间项的索引为1
+// 添加触摸滑动相关变量
+const touchStartX = ref(0)
+const touchEndX = ref(0)
 
 // 计算移动到中心位置的函数
 const moveToCenter = (targetIndex) => {
   if (centerIndex.value == targetIndex) return // 如果当前索引和目标索引相同，则不需要移动
 
-  // 每个项目的宽度（包括间距）
-  const itemWidth = 40 // vw
-  const itemSpacing = 2 // vw
-
-  // 计算目标元素的偏移量
-  const targetOffset = (itemWidth + itemSpacing) * targetIndex
-
-  // 由于我们使用的是left属性，负值向左移动
-  listLeftPosition.value = targetOffset + 'vw'
-
   centerIndex.value = targetIndex
+  updatePosition() // 更新位置
+}
+
+// 触发触摸开始事件
+const handleTouchStart = (event) => {
+  touchStartX.value = event.touches[0].clientX
+}
+
+// 触发触摸移动事件
+const handleTouchMove = (event) => {
+  touchEndX.value = event.touches[0].clientX
+}
+
+// 触发触摸结束事件
+const handleTouchEnd = () => {
+  if (!touchStartX.value) return
+
+  let minSwipeDistance = 50 //x轴最小滑动距离
+  let distance = touchEndX.value - touchStartX.value // 左滑<0 右滑>0
+  let isLeftSwipe = distance < -minSwipeDistance // 满足左滑
+  let isRightSwipe = distance > minSwipeDistance // 满足右滑
+
+  if (isLeftSwipe) {
+    // 左滑
+    if (centerIndex.value > 0) {
+      moveToCenter(centerIndex.value - 1)
+    }
+  } else if (isRightSwipe) {
+    // 右滑
+    if (centerIndex.value < seasonTop1List.value.length - 1) {
+      moveToCenter(centerIndex.value + 1)
+    }
+  }
+
+  // 重置触摸变量
+  touchStartX.value = 0
+  touchEndX.value = 0
+}
+
+// 更新位置
+const updatePosition = () => {
+  const itemWidth = 40 // vw，根据您的代码中每个项目宽度
+  const itemSpacing = 2 // vw，根据您的代码中项目间距
+  const targetOffset = (itemWidth + itemSpacing) * centerIndex.value
+  listLeftPosition.value = targetOffset + 'vw'
 }
 
 // 选中伴侣