|
|
@@ -82,18 +82,23 @@
|
|
|
<!-- AI生成图片对话框 -->
|
|
|
<div class="ai-message" v-if="item.type !== 'user'">
|
|
|
{{ item.content }}
|
|
|
- <div class="image-list" v-if="item.imageList && item.imageList.length > 0">
|
|
|
- <video
|
|
|
- v-for="(video, index) in item.imageList"
|
|
|
- :key="index"
|
|
|
- style="width: 30%; max-width: 600px; height: auto; margin: 10px;"
|
|
|
- :src="video"
|
|
|
- controls
|
|
|
- playsinline
|
|
|
- >
|
|
|
- 您的浏览器不支持视频播放
|
|
|
- </video>
|
|
|
- </div>
|
|
|
+ <span v-if="item.loading" class="loading-dots">
|
|
|
+ <span class="dot"></span>
|
|
|
+ <span class="dot"></span>
|
|
|
+ <span class="dot"></span>
|
|
|
+ </span>
|
|
|
+ <div class="image-list" v-if="item.imageList && item.imageList.length > 0">
|
|
|
+ <video
|
|
|
+ v-for="(video, index) in item.imageList"
|
|
|
+ :key="index"
|
|
|
+ style="width: 30%; max-width: 600px; height: auto; margin: 10px;"
|
|
|
+ :src="video"
|
|
|
+ controls
|
|
|
+ playsinline
|
|
|
+ >
|
|
|
+ 您的浏览器不支持视频播放
|
|
|
+ </video>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
@@ -144,7 +149,6 @@
|
|
|
import { ref, onMounted,onUnmounted} from 'vue'
|
|
|
import {AiImageStatusEnum, CreatePainting, PaintingGetMys,CreateVideo, VideoGetMys} from '@/api/questions.js'
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
-import NumberPeople00 from '@/assets/images/xiaozhi.png'
|
|
|
import {
|
|
|
Document,
|
|
|
Menu as IconMenu,
|
|
|
@@ -365,7 +369,8 @@ const sendMessage = async() => {
|
|
|
imageAllList.value.push(userMessage);
|
|
|
imageAllList.value.push({
|
|
|
type: 'ai',
|
|
|
- content: "正在为您生成视频,请稍等...",
|
|
|
+ content: "正在为您生成视频,请稍等",
|
|
|
+ loading: true
|
|
|
})
|
|
|
|
|
|
// 递增消息计数器
|
|
|
@@ -718,6 +723,41 @@ const inProgressTimerFun = () => {
|
|
|
border-radius: rpx(5);
|
|
|
text-align: left; // 文字左对齐
|
|
|
}
|
|
|
+
|
|
|
+// 加载动画效果
|
|
|
+.loading-dots {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: rpx(5);
|
|
|
+}
|
|
|
+
|
|
|
+.loading-dots .dot {
|
|
|
+ display: inline-block;
|
|
|
+ width: rpx(3);
|
|
|
+ height: rpx(3);
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #333;
|
|
|
+ margin: 0 rpx(1);
|
|
|
+ animation: loading-dot 1.4s infinite ease-in-out both;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-dots .dot:nth-child(1) {
|
|
|
+ animation-delay: -0.32s;
|
|
|
+}
|
|
|
+
|
|
|
+.loading-dots .dot:nth-child(2) {
|
|
|
+ animation-delay: -0.16s;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes loading-dot {
|
|
|
+ 0%, 80%, 100% {
|
|
|
+ transform: scale(0);
|
|
|
+ }
|
|
|
+ 40% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
.image-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|