From 4810aa7e335dff80fbf887f05fe73437279197ee Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Wed, 9 Apr 2025 11:47:40 +0800
Subject: [PATCH] =?UTF-8?q?Fix(AI):[#3595]=E7=83=AD=E9=97=A8=E8=AF=8D?=
 =?UTF-8?q?=E6=9D=A1=E8=BD=AE=E6=92=AD=E6=96=B9=E5=BC=8F=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 aiChat/views/index.vue |  20 ++++--
 assets/css/aiChat.less | 147 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 163 insertions(+), 4 deletions(-)

diff --git a/aiChat/views/index.vue b/aiChat/views/index.vue
index 9d49efe..958c3b5 100644
--- a/aiChat/views/index.vue
+++ b/aiChat/views/index.vue
@@ -54,7 +54,13 @@
             />
           </view>
           <view class="list-wrap">
-            <view class="list-cont">
+            <view
+              :style="{
+                'width': animationWidth,
+                'animation': animationStr
+              }"
+              class="list-cont"
+            >
               <view
                 v-for="(item, index) in topicList"
                 :key="index"
@@ -245,6 +251,8 @@ export default {
   mixins: [chatMixins],
   data() {
     return {
+      animationWidth: '150%',
+      animationStr: '',
       settingInfo: {},
       topicList: []
     }
@@ -257,6 +265,8 @@ export default {
           const { success, data } = res
           if (success) {
             this.settingInfo = data
+            this.animationWidth = `${data.systemTopicDivMaxWidth * 750}rpx`
+            this.animationStr = `TranslateXSwiper-${data.systemTopicDivMaxWidth * 10} ${data.systemTopicDivScrollDuration}s infinite linear alternate`
           }
         })
         getAiSystemInfoTopic().then(res => {
@@ -388,18 +398,20 @@ export default {
     .icon {
       display: flex;
       width: 40rpx;
+      height: 32rpx;
     }
   }
   .list-wrap {
     width: 100%;
-    padding: 0 0 0 20rpx;
     margin: 60rpx 0 0 0;
     overflow-x: hidden;
     .list-cont {
       display: flex;
       flex-wrap: wrap;
-      width: 150%;
-      animation: translateXSwiper 10s infinite linear alternate;
+      width: 750 * 1.5rpx;
+      padding: 0 0 0 24rpx;
+      box-sizing: border-box;
+      // animation: translateXSwiper 10s infinite linear alternate;
       .list-item {
         display: flex;
         align-items: center;
diff --git a/assets/css/aiChat.less b/assets/css/aiChat.less
index 3f9ef8b..7e084d9 100644
--- a/assets/css/aiChat.less
+++ b/assets/css/aiChat.less
@@ -672,6 +672,153 @@ page {
 		opacity: 0.0;
 	}
 }
+/*==================首页跑马灯效果动画====================*/
+// todo:用循环函数生成存在语法报错At-rule options not recognised，后期再仔细阅读官方文档，解决@keyframes关键字问题
+@keyframes TranslateXSwiper-15 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 0.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-20 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 1rpx);
+	}
+}
+@keyframes TranslateXSwiper-25 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 1.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-30 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 2rpx);
+	}
+}
+@keyframes TranslateXSwiper-35 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 2.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-40 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 3rpx);
+	}
+}
+@keyframes TranslateXSwiper-45 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 3.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-50 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 4rpx);
+	}
+}
+@keyframes TranslateXSwiper-55 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 4.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-60 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 5rpx);
+	}
+}
+@keyframes TranslateXSwiper-65 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 5.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-70 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 6rpx);
+	}
+}
+@keyframes TranslateXSwiper-75 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 6.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-80 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 7rpx);
+	}
+}
+@keyframes TranslateXSwiper-85 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 7.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-90 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 8rpx);
+	}
+}
+@keyframes TranslateXSwiper-95 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 8.5rpx);
+	}
+}
+@keyframes TranslateXSwiper-100 {
+	0% {
+		transform: translateX(0);
+	}
+	100% {
+		transform: translateX(-750 * 9rpx);
+	}
+}
+
 .loader-wrap {
 	transform: scale(1);
 }