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;
   }
 }