AI小程序端样式修复

pages/chat/components/ai-paging.vue

@@ -134,9 +134,16 @@
                     <view class="message">{{ recognizedText }} {{ lastFinalText }}</view>
                 </view>
                 <view v-if="isTyping" class="self">
-                    <text class="message msg-loading">
-                        <span class="ai-loading"></span>
-                    </text>
+                    <view class="message msg-loading">
+                        <div class="loading-content">
+                            <span class="ai-loading">
+                                <span></span>
+                                <span></span>
+                                <span></span>
+                            </span>
+                            <text class="loading-text">AI正在思考中...</text>
+                        </div>
+                    </view>
                 </view>
             </view>
         </scroll-view>
@@ -1005,12 +1012,26 @@ image-margin-top = 40rpx
 .messageNull
     display: none
 .msg-loading{
-    background: transparent;
-    font-size: 24rpx;
-    color: #8f8d8e;
+    background: #F6F6F6;
+    border-radius: 20rpx 0 20rpx 20rpx;
+    padding: 20rpx;
+    width: fit-content;
     display: flex;
-    align-items: flex-end;
-    justify-content: flex-start;
+    align-items: center;
+    justify-content: center;
+    
+    .loading-content{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 16rpx;
+    }
+    
+    .loading-text{
+        font-size: 28rpx;
+        color: #666666;
+        font-weight: 500;
+    }
 }
 .loaded{
     padding-left: 20rpx
@@ -1250,25 +1271,55 @@ image-margin-top = 40rpx
             .file-border
                 width: 160rpx !important;
 
-@keyframes ai-circle {
-    0% {
-        -webkit-transform: rotate(0);
-        transform: rotate(0);
+/* 更美观的loading动画 - 兼容H5和小程序 */
+@keyframes ai-loading-dots {
+    0%, 20%, 80%, 100% {
+        transform: scale(1);
+        opacity: 0.6;
     }
-    100% {
-        -webkit-transform: rotate(360deg);
-        transform: rotate(360deg);
+    40% {
+        transform: scale(1.2);
+        opacity: 1;
     }
 }
-.ai-loading
+
+/* 重置默认样式 */
+.ai-loading {
     display: inline-flex;
-    vertical-align: middle;
-    width: 28rpx;
-    height: 28rpx;
-    background: 0 0;
+    align-items: center;
+    justify-content: center;
+    gap: 8rpx;
+    width: auto;
+    height: auto;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+    margin: 0;
+}
+
+/* 三个点的样式 - 使用标准CSS语法，不使用嵌套 */
+.ai-loading span {
+    display: inline-block;
+    width: 12rpx;
+    height: 12rpx;
     border-radius: 50%;
-    border: 4rpx solid;
-    border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
-    -webkit-animation: ai-circle 1s linear infinite;
-    animation: ai-circle 1s linear infinite;
+    background-color: #256BFA;
+    animation: ai-loading-dots 1.4s ease-in-out infinite both;
+    margin: 0;
+    padding: 0;
+}
+
+/* 为每个点设置不同的动画延迟 */
+.ai-loading span:nth-child(1) {
+    animation-delay: -0.32s;
+}
+
+.ai-loading span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.ai-loading span:nth-child(3) {
+    animation-delay: 0s;
+}
 </style>