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 @@
@@ -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)" /> -
+
{{ formatRewardDisplay(item.type, item) }}
, @@ -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; }