diff --git a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss index 833331c6a..d4b673e4e 100644 --- a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss +++ b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.scss @@ -137,4 +137,19 @@ to { transform: translateX(-25%); } +} + +.scroll-text { + display: inline-block; + animation: scroll-left 3s ease-in-out infinite alternate; + will-change: transform; +} + +@keyframes scroll-left { + from { + transform: translateX(0); + } + to { + transform: translateX(calc(-100% + 6rem)); + } } \ No newline at end of file diff --git a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue index e1d1f6312..438588294 100644 --- a/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue +++ b/src/views/Home/components/PrizeList/parts/OfficialPrizeList/index.vue @@ -24,6 +24,11 @@ const { handleScroll, } = useGsap(scrollContainerRef, liRefs, isScroll, prizeShow, props.temporaryPrizeShow) +// 超过 6 个字符就滚动 +function shouldScroll(name: string) { + return (name || '').length > 6 +} + // 获取ulContainerRef的高度 function getUlContainerHeight() { if (ulContainerRef.value) { @@ -90,12 +95,16 @@ watch ([prizeShow, () => props.temporaryPrizeShow], (val) => { >
{{ item.isUsedCount }}/{{
diff --git a/src/views/Home/components/PrizeList/parts/TemporaryList.vue b/src/views/Home/components/PrizeList/parts/TemporaryList.vue
index 107006afd..9a2334bb2 100644
--- a/src/views/Home/components/PrizeList/parts/TemporaryList.vue
+++ b/src/views/Home/components/PrizeList/parts/TemporaryList.vue
@@ -1,16 +1,23 @@
@@ -25,8 +32,11 @@ const { t } = useI18n()
+
{{ temporaryPrize.name }}