From 24b5354569681e24f09c8d01267bca5fd54079c6 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 22 Jan 2026 14:33:59 +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=B1=85=E4=B8=AD=E6=94=BE?=
 =?UTF-8?q?=E5=A4=A7=E3=80=81=E7=82=B9=E5=87=BB=E5=88=87=E6=8D=A2=E6=A6=9C?=
 =?UTF-8?q?=E9=A6=96=E7=9A=84=E5=8A=9F=E8=83=BD=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 | 146 ++++++++++++++++++++---------
 1 file changed, 100 insertions(+), 46 deletions(-)

diff --git a/src/views/Ranking/Couple/index.vue b/src/views/Ranking/Couple/index.vue
index 89d1e39..0e89717 100644
--- a/src/views/Ranking/Couple/index.vue
+++ b/src/views/Ranking/Couple/index.vue
@@ -39,58 +39,77 @@
           :contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
         >
           <div
-            style="width: 100%; display: flex; justify-content: space-between; align-items: center"
+            style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
+            class="scrollX"
           >
-            <!-- 上一个季度 -->
-            <div
-              style="
-                width: 8vw;
-                align-self: stretch;
+            <div class="topList" :style="{ left: listLeftPosition }">
+              <!-- 右占位 -->
+              <div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
 
-                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>
-            <!-- top1 -->
-            <itemCenter
-              style="width: 75%"
-              :imgUrl="imageUrl('topCoupleFrame')"
-              :contentStyle="``"
-            ></itemCenter>
-            <!-- 下一个季度 -->
-            <div
-              style="
-                width: 8vw;
-                align-self: stretch;
+              <!-- top1情侣头像 -->
+              <itemCenter
+                v-for="(item, index) in 1"
+                style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
+                :style="{ width: index === centerIndex ? '60vw' : '40vw' }"
+                :imgUrl="imageUrl('topCoupleFrame')"
+                :contentStyle="``"
+                @click="moveToCenter(index)"
+              >
+                <!-- 头像 -->
+                <div style="position: relative; width: 100%; height: 100%">
+                  <div
+                    style="
+                      position: relative;
+                      z-index: -1;
+                      top: 26%;
+                      left: 0;
+                      width: 100%;
+                      height: 50%;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      gap: 16%;
+                    "
+                  >
+                    <!-- 情侣1头像 -->
+                    <img
+                      :src="''"
+                      alt=""
+                      style="
+                        display: block;
+                        height: 100%;
+                        object-fit: cover;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                      "
+                      @error="handleAvatarImageError"
+                      @click="viewUserInfo(rankingItem.userId)"
+                    />
+                    <!-- 情侣2头像 -->
+                    <img
+                      :src="''"
+                      alt=""
+                      style="
+                        display: block;
+                        height: 100%;
+                        object-fit: cover;
+                        aspect-ratio: 1/1;
+                        border-radius: 50%;
+                      "
+                      @error="handleAvatarImageError"
+                      @click="viewUserInfo(rankingItem.cpUserId)"
+                    />
+                  </div>
+                </div>
+              </itemCenter>
 
-                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 style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
             </div>
           </div>
 
           <!-- 奖品说明 -->
-          <div style="display: flex; justify-content: center; align-items: center">
+          <div style="min-width: 0; display: flex; justify-content: center; align-items: center">
             <div
               style="
                 border-radius: 12px;
@@ -1388,6 +1407,26 @@ const seasonTop1List = ref([]) // 赛季榜Top1列表
 
 const resultShowIndex = ref(0) // 抽奖结果索引
 
+const listLeftPosition = ref('0') //top历史榜单
+const centerIndex = ref(0) // 默认中间项的索引为1
+
+// 计算移动到中心位置的函数
+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
+}
+
 // 选中伴侣
 const selectCouple = (couple) => {
   if (selectedCouple.value.account === couple.account) {
@@ -1817,6 +1856,21 @@ onUnmounted(() => {
   margin-bottom: 12px;
 }
 
+.scrollX::-webkit-scrollbar {
+  display: none;
+}
+
+.topList {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  gap: 2vw;
+  width: 100%;
+  position: relative;
+  transition: all 0.8s ease; // 添加平滑过渡效果
+  left: 0;
+}
+
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -1868,7 +1922,7 @@ textarea::placeholder {
 
 @media screen and (min-width: 360px) {
   * {
-    font-size: 14px;
+    font-size: 12px;
   }
 }