夺宝奇兵大模型logo背景加个光圈

src/views/AIchat.vue

@@ -30,7 +30,7 @@ import title3 from "@/assets/img/AIchat/攻防三维.png";
 import title4 from "@/assets/img/AIchat/综合作战.png";
 import logo1 from "@/assets/img/AIchat/夺宝奇兵logo.png";
 import logo2 from "@/assets/img/AIchat/开启无限财富.png";
-
+import bgc from "@/assets/img/AIchat/圈.png";
 const chatStore = useChatStore();
 const audioStore = useAudioStore();
 const dataStore = useDataStore();
@@ -139,7 +139,7 @@ const pauseAudio = () => {
 
 // 音频轮流播放方法
 const playAudioSequence = (audioUrls) => {
-  console.log('playAudioSequence被调用，参数:', audioUrls);
+  console.log("playAudioSequence被调用，参数:", audioUrls);
   if (!audioUrls || audioUrls.length === 0) {
     console.warn("音频URL列表为空，跳过播放");
     return;
@@ -164,7 +164,12 @@ const playAudioSequence = (audioUrls) => {
 
     const currentUrl = audioSequence[currentIndex];
     console.log(`正在播放第${currentIndex + 1}个音频:`, currentUrl);
-    console.log('音频URL有效性检查:', !!currentUrl, '长度:', currentUrl?.length);
+    console.log(
+      "音频URL有效性检查:",
+      !!currentUrl,
+      "长度:",
+      currentUrl?.length
+    );
 
     // 设置当前音频URL
     audioStore.setCurrentAudioUrl(currentUrl);
@@ -1163,44 +1168,55 @@ watch(
                 // });
               }
             }
-            
+
             // 检查是否所有API都已完成并执行
-            if (apiStatus.one.completed && apiStatus.two.completed && apiStatus.three.completed && apiStatus.four.completed && apiStatus.four.executed) {
-              console.log('所有API已完成，开始收集音频URL');
+            if (
+              apiStatus.one.completed &&
+              apiStatus.two.completed &&
+              apiStatus.three.completed &&
+              apiStatus.four.completed &&
+              apiStatus.four.executed
+            ) {
+              console.log("所有API已完成，开始收集音频URL");
               // 收集所有音频URL
               const audioUrls = [];
-              console.log('API返回结果检查:');
-              console.log('result21:', result21);
-              console.log('result22:', result22);
-              console.log('result23:', result23);
-              console.log('result24:', result24);
-              
+              console.log("API返回结果检查:");
+              console.log("result21:", result21);
+              console.log("result22:", result22);
+              console.log("result23:", result23);
+              console.log("result24:", result24);
+
               if (result21?.data?.url) {
-                console.log('添加result21音频URL:', result21.data.url);
+                console.log("添加result21音频URL:", result21.data.url);
                 audioUrls.push(result21.data.url.trim());
               }
               if (result22?.data?.url) {
-                console.log('添加result22音频URL:', result22.data.url);
+                console.log("添加result22音频URL:", result22.data.url);
                 audioUrls.push(result22.data.url.trim());
               }
               if (result23?.data?.url) {
-                console.log('添加result23音频URL:', result23.data.url);
+                console.log("添加result23音频URL:", result23.data.url);
                 audioUrls.push(result23.data.url.trim());
               }
               if (result24?.data?.url) {
-                console.log('添加result24音频URL:', result24.data.url);
+                console.log("添加result24音频URL:", result24.data.url);
                 audioUrls.push(result24.data.url.trim());
               }
 
-              console.log('收集到的音频URLs:', audioUrls);
-              console.log('语音是否启用:', audioStore.isVoiceEnabled);
+              console.log("收集到的音频URLs:", audioUrls);
+              console.log("语音是否启用:", audioStore.isVoiceEnabled);
 
               // 开始轮流播放音频
               if (audioUrls.length > 0 && audioStore.isVoiceEnabled) {
-                console.log('开始播放音频序列');
+                console.log("开始播放音频序列");
                 playAudioSequence(audioUrls);
               } else {
-                console.log('跳过音频播放 - audioUrls长度:', audioUrls.length, '语音启用状态:', audioStore.isVoiceEnabled);
+                console.log(
+                  "跳过音频播放 - audioUrls长度:",
+                  audioUrls.length,
+                  "语音启用状态:",
+                  audioStore.isVoiceEnabled
+                );
               }
             }
           };
@@ -3016,7 +3032,7 @@ onMounted(() => {
   console.log("组件挂载完成");
 
   // 添加页面可见性变化监听器
-  document.addEventListener('visibilitychange', handleVisibilityChange);
+  document.addEventListener("visibilitychange", handleVisibilityChange);
 
   // 添加DOM变化监听器
   const observer = new MutationObserver((mutations) => {
@@ -3046,7 +3062,7 @@ const handleVisibilityChange = () => {
     if (audioStore.isPlaying) {
       wasPlayingBeforeHidden = true;
       audioStore.pause();
-      console.log('页面切换离开，音频已暂停');
+      console.log("页面切换离开，音频已暂停");
     } else {
       wasPlayingBeforeHidden = false;
     }
@@ -3054,25 +3070,23 @@ const handleVisibilityChange = () => {
     // 页面重新可见时，如果之前在播放，则恢复播放
     if (wasPlayingBeforeHidden && !audioStore.isPlaying) {
       audioStore.play();
-      console.log('页面切换回来，音频已恢复播放');
+      console.log("页面切换回来，音频已恢复播放");
       wasPlayingBeforeHidden = false;
     }
   }
 };
 
-
-
 // 组件卸载时清理所有图表实例和事件监听器
 onUnmounted(() => {
   // 移除页面可见性变化监听器
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-  
+  document.removeEventListener("visibilitychange", handleVisibilityChange);
+
   // 停止音频播放
   if (audioStore.isPlaying) {
     audioStore.stop();
-    console.log('组件卸载，音频已停止');
+    console.log("组件卸载，音频已停止");
   }
-  
+
   // 清理所有图表实例
   Object.keys(chartInstancesMap).forEach((key) => {
     if (chartInstancesMap[key]) {
@@ -3094,7 +3108,8 @@ onUnmounted(() => {
   <div class="chat-container">
     <!-- GIF区域 -->
     <div class="gif-area">
-      <img :src="logo1" alt="夺宝奇兵大模型logo" />
+      <img :src="bgc" alt="夺宝奇兵大模型logo" class="bgc" />
+      <img :src="logo1" alt="夺宝奇兵大模型logo" class="logo1" />
       <img :src="logo2" alt="夺宝奇兵大模型logo" class="logo2" />
     </div>
 
@@ -3177,8 +3192,29 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+.bgc {
+  position: absolute;
+  z-index: -1;
+  max-width: 530px;
+  min-width: 340px;
+  width: 40%;
+  height: auto;
+  /* right: 30px; */
+  /* top: -30px; */
+}
+.logo1 {
+  position: relative;
+  max-width: 350px;
+  min-width: 200px;
+  width: 25%;
+}
+
 .logo2 {
   margin-top: 20px;
+  max-width: 350px;
+  min-width: 200px;
+  width: 30%;
+  /* position: relative; */
 }
 
 .chat-container {
@@ -3188,6 +3224,7 @@ onUnmounted(() => {
 }
 
 .gif-area {
+  padding: 70px 0px;
   /* position: relative; */
   /* height: 30vh; */
   display: flex;
@@ -3195,19 +3232,20 @@ onUnmounted(() => {
   justify-content: center;
   align-items: center;
   flex-shrink: 0;
+
   /* 防止GIF区域被压缩 */
 }
 
 .gif-area img {
-  width: 30%;
+  /* width: 30%; */
   /* 改为百分比单位 */
-  min-width: 200px;
+  /* min-width: 200px; */
   /* 最小尺寸 */
-  max-width: 400px;
+  /* max-width: 400px; */
   /* 最大尺寸 */
-  height: auto;
-  left: 50%;
-  transition: all 0.3s;
+  /* height: auto; */
+  /* left: 50%; */
+  /* transition: all 0.3s; */
   /* 添加过渡效果 */
 }