feat(ui): 奖品名称超长时添加来回滚动效果

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

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) => {
                 >
               </figure>
               <div class="items-center p-0 card-body">
-                <div class="tooltip tooltip-left w-full pl-1" :data-tip="item.name">
+                <div class="w-24 overflow-hidden" :data-tip="item.name">
                   <h2
-                    class="w-24 p-0 m-0 overflow-hidden card-title whitespace-nowrap text-ellipsis"
+                    v-if="shouldScroll(item.name)"
+                    class="p-0 m-0 card-title whitespace-nowrap scroll-text"
                   >
                     {{ item.name }}
                   </h2>
+                  <h2 v-else class="p-0 m-0 card-title whitespace-nowrap text-ellipsis overflow-hidden">
+                    {{ item.name }}
+                  </h2>
                 </div>
                 <p class="absolute z-40 p-0 m-0 text-gray-300/80 mt-9">
                   {{ item.isUsedCount }}/{{

src/views/Home/components/PrizeList/parts/TemporaryList.vue

@@ -1,16 +1,23 @@
 <script setup lang='ts'>
 import type { IPrizeConfig } from '@/types/storeType'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import defaultPrizeImage from '@/assets/images/龙.png'
 
-defineProps<{
+const props = defineProps<{
     temporaryPrize: IPrizeConfig
     addTemporaryPrize: () => void
     deleteTemporaryPrize: () => void
 }>()
 
 const { t } = useI18n()
+
+// 超过 6 个字符就滚动
+const shouldScroll = computed(() => {
+    const name = props.temporaryPrize?.name || ''
+    return name.length > 6
+})
 </script>
 
 <template>
@@ -25,8 +32,11 @@ const { t } = useI18n()
         <img v-else :src="defaultPrizeImage" alt="Prize" class="object-cover h-full rounded-xl">
       </figure>
       <div class="items-center p-0 text-center card-body">
-        <div class="tooltip tooltip-left" :data-tip="temporaryPrize.name">
-          <h2 class="p-0 m-0 overflow-hidden w-28 card-title whitespace-nowrap text-ellipsis">
+        <div class="w-28 overflow-hidden" :data-tip="temporaryPrize.name">
+          <h2
+            class="p-0 m-0 card-title whitespace-nowrap"
+            :class="shouldScroll ? 'scroll-text' : 'text-ellipsis overflow-hidden'"
+          >
             {{ temporaryPrize.name }}
           </h2>
         </div>
@@ -55,5 +65,18 @@ const { t } = useI18n()
 </template>
 
 <style scoped>
+.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% + 7rem));
+    }
+}
 </style>