fix(cp活动): 修复苹果端奖励滚动动画闪烁问题

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