From 8c24cda5626631b1f0ec02e67a7ce7d6ed63da71 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Thu, 7 May 2026 18:42:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(cp=E6=B4=BB=E5=8A=A8):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=8B=B9=E6=9E=9C=E7=AB=AF=E5=A5=96=E5=8A=B1=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Ranking/Couple/components/topUser.vue     | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/views/Ranking/Couple/components/topUser.vue b/src/views/Ranking/Couple/components/topUser.vue
index cd2b8e6..2c981c7 100644
--- a/src/views/Ranking/Couple/components/topUser.vue
+++ b/src/views/Ranking/Couple/components/topUser.vue
@@ -267,7 +267,7 @@
               <div
                 v-for="(item, index) in rewardList"
                 :key="index"
-                style="align-self: stretch; display: flex; align-items: center; padding: 0 1vw"
+                class="reward-scroll-item"
                 @click="clickReward(item)"
               >
                 <!-- 预览图 -->
@@ -275,10 +275,10 @@
                   v-if="item.cover != ''"
                   :src="item.cover"
                   alt=""
-                  style="min-width: 0; display: block; width: 10vw; object-fit: cover"
+                  class="reward-scroll-cover"
                   @error="handleRewardImageError($event, item.type)"
                 />
-                <div style="min-width: 0; color: #fff; white-space: nowrap">
+                <div class="reward-scroll-text">
                   {{ formatRewardDisplay(item.type, item) }}
                 </div>
                 ，
@@ -385,6 +385,7 @@ let rewardRestartTimer = null
 let rewardAnimationFrame = null
 let rewardLastFrameTime = 0
 let rewardLoopDistance = 0
+let rewardScrollPosition = 0
 
 const waitForLayoutFrame = () => {
   return new Promise((resolve) => {
@@ -433,6 +434,7 @@ const restartRewardScroll = async () => {
       return
     }
 
+    rewardScrollPosition = 0
     viewport.scrollLeft = 0
     rewardLastFrameTime = performance.now()
 
@@ -440,10 +442,13 @@ const restartRewardScroll = async () => {
       const elapsed = now - rewardLastFrameTime
       rewardLastFrameTime = now
       const distancePerMs = rewardLoopDistance / 8000
-      const nextScrollLeft = viewport.scrollLeft + distancePerMs * elapsed
+      rewardScrollPosition += distancePerMs * elapsed
 
-      viewport.scrollLeft =
-        nextScrollLeft >= rewardLoopDistance ? nextScrollLeft - rewardLoopDistance : nextScrollLeft
+      if (rewardScrollPosition >= rewardLoopDistance) {
+        rewardScrollPosition -= rewardLoopDistance
+      }
+
+      viewport.scrollLeft = rewardScrollPosition
 
       rewardAnimationFrame = requestAnimationFrame(step)
     }
@@ -516,6 +521,8 @@ onUnmounted(() => {
   align-items: center;
   overflow: hidden;
   direction: ltr;
+  scroll-behavior: auto;
+  overflow-anchor: none;
 }
 
 .scroll-wrapper {
@@ -529,6 +536,27 @@ onUnmounted(() => {
   align-items: center;
 }
 
+.reward-scroll-item {
+  flex: 0 0 auto;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 1vw;
+}
+
+.reward-scroll-cover {
+  flex: 0 0 auto;
+  display: block;
+  width: 10vw;
+  object-fit: cover;
+}
+
+.reward-scroll-text {
+  flex: 0 0 auto;
+  color: #fff;
+  white-space: nowrap;
+}
+
 [dir='ltr'] .scroll-content {
   margin-left: 4vw;
 }