From d2af07a65578a952eeafe99c6d21c56ab104a917 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Wed, 31 Jul 2024 15:28:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E8=B7=91?=
 =?UTF-8?q?=E9=A9=AC=E7=81=AF=E5=88=9D=E5=A7=8B=E5=87=BA=E7=8E=B0=E7=9A=84?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scroll-text/Component.vue                 | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/core/core-frontend/src/custom-component/scroll-text/Component.vue b/core/core-frontend/src/custom-component/scroll-text/Component.vue
index 3f8fda8bf2..41f3db96f2 100644
--- a/core/core-frontend/src/custom-component/scroll-text/Component.vue
+++ b/core/core-frontend/src/custom-component/scroll-text/Component.vue
@@ -13,7 +13,8 @@ const isCtrlDown = ref(false)
 const emit = defineEmits(['input'])
 const text = ref(null)
 const textOut = ref(null)
-const scrollScale = ref('100%')
+const scrollScale0 = ref('100%')
+const scrollScale100 = ref('100%')
 let timeId = null
 
 const props = defineProps({
@@ -132,17 +133,27 @@ const varStyle = computed(() => [
           canvasStyleData.value.scale /
           element.value.style.scrollSpeed
     }s`,
-    '--scroll-scale': `${scrollScale.value}`
+    '--scroll-scale0': `${scrollScale0.value}`,
+    '--scroll-scale100': `${scrollScale100.value}`
   }
 ])
 
 const init = () => {
   timeId = setInterval(() => {
     if (textOut.value && text.value) {
-      scrollScale.value =
-        (element.value.style.width * canvasStyleData.value.scale) / text.value.clientWidth + '%'
+      const textValue = text.value.clientWidth * 100
+      const fontLength = document.getElementsByClassName('marquee-txt')[0]?.innerText?.length
+      const fontSizeLength = fontLength * element.value.style.fontSize * canvasStyleData.value.scale
+      if (textValue < fontSizeLength) {
+        scrollScale0.value = (textValue * 100) / textValue + '%'
+        scrollScale100.value = '100%'
+      } else {
+        scrollScale0.value = '100%'
+        scrollScale100.value = (-(fontSizeLength + 5000) * 100) / textValue + '%'
+      }
     } else {
-      scrollScale.value = '100%'
+      scrollScale0.value = '100%'
+      scrollScale100.value = '-100%'
     }
   }, 1000)
 }
@@ -224,10 +235,10 @@ onMounted(() => {
 }
 @keyframes marqueeAnimation {
   0% {
-    transform: translate(var(--scroll-scale), 0);
+    transform: translate(var(--scroll-scale0), 0);
   }
   100% {
-    transform: translate(-100%, 0);
+    transform: translate(var(--scroll-scale100), 0);
   }
 }
 </style>