Fix(AI):[#3595]热门词条轮播方式使用配置

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%;
+      width: 750 * 1.5rpx;
-      animation: translateXSwiper 10s infinite linear alternate;
+      padding: 0 0 0 24rpx;
+      box-sizing: border-box;
+      // animation: translateXSwiper 10s infinite linear alternate;
       .list-item {
         display: flex;
         align-items: center;

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