From b8aec9fbce3414f2e4cf02643f4b64b8a15877bf Mon Sep 17 00:00:00 2001
From: s1xu <s1xu@foxmail.com>
Date: Tue, 3 Feb 2026 01:16:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E5=A5=96=E5=93=81=E5=90=8D?=
 =?UTF-8?q?=E7=A7=B0=E8=B6=85=E9=95=BF=E6=97=B6=E6=B7=BB=E5=8A=A0=E6=9D=A5?=
 =?UTF-8?q?=E5=9B=9E=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../parts/OfficialPrizeList/index.scss        | 15 ++++++++++
 .../parts/OfficialPrizeList/index.vue         | 13 +++++++--
 .../PrizeList/parts/TemporaryList.vue         | 29 +++++++++++++++++--
 3 files changed, 52 insertions(+), 5 deletions(-)

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) => {
                 >
               </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 }}/{{
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 @@
 <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>