Merge branch 'dongqian/feature-20250702094358-小财神适配' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into dongqian/feature-20250702094358-小财神适配

src/api/AiEmotionApi.js

@@ -15,7 +15,7 @@ export const getReplyAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_lK1fvhLn9LnWCRETP7yFeR6xQ0niwQdcHJ5ZqpnUk8BdiUWCraPLSzWhiQNp2zOl",
+        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
     },
   });
 };
@@ -31,7 +31,7 @@ export const getConclusionAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_lK1fvhLn9LnWCRETP7yFeR6xQ0niwQdcHJ5ZqpnUk8BdiUWCraPLSzWhiQNp2zOl",
+        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
     },
   });
 };

src/views/AIchat.vue

@@ -174,6 +174,28 @@ const playAudioSequence = (audioUrls) => {
       currentUrl?.length
     );
     
+    // 增强URL验证
+    if (!currentUrl || typeof currentUrl !== 'string' || currentUrl.trim() === '') {
+      console.error(`音频 ${currentIndex + 1} URL无效，跳过该音频`);
+      currentIndex++;
+      setTimeout(() => {
+        playNext();
+      }, 100);
+      return;
+    }
+    
+    // 检查URL格式
+    try {
+      new URL(currentUrl);
+    } catch (e) {
+      console.error(`音频 ${currentIndex + 1} URL格式错误:`, currentUrl);
+      currentIndex++;
+      setTimeout(() => {
+        playNext();
+      }, 100);
+      return;
+    }
+
     // 设置当前音频URL
     audioStore.setCurrentAudioUrl(currentUrl);
 
@@ -191,6 +213,11 @@ const playAudioSequence = (audioUrls) => {
         audioStore.isPlaying = true;
         audioStore.isPaused = false;
         console.log(`开始播放音频 ${currentIndex + 1}`);
+        console.log('音频播放状态:', {
+          duration: sound.duration(),
+          state: sound.state(),
+          playing: sound.playing()
+        });
       },
       onpause: () => {
         audioStore.isPlaying = false;
@@ -204,6 +231,13 @@ const playAudioSequence = (audioUrls) => {
         audioStore.playbackPosition = 0;
         console.log(`音频 ${currentIndex + 1} 播放完成`);
         currentIndex++;
+        // 如果是最后一个音频播放完成，立即清除实例
+        if (currentIndex >= audioSequence.length) {
+          console.log('最后一个音频播放完成，清除音频实例');
+          audioStore.soundInstance = null;
+          audioStore.nowSound = null;
+          currentIndex = 0; // 立即重置索引
+        }
         // 播放下一个音频
         setTimeout(() => {
           playNext();
@@ -217,16 +251,50 @@ const playAudioSequence = (audioUrls) => {
       },
       onloaderror: (id, err) => {
         console.error(`音频 ${currentIndex + 1} 加载失败:`, err);
+        console.error('失败的音频URL:', currentUrl);
+        console.error('错误详情:', { id, err });
+        
+        // 增加重试机制
+        if (!sound.retryCount) {
+          sound.retryCount = 0;
+        }
+        
+        if (sound.retryCount < 2) {
+          sound.retryCount++;
+          console.log(`音频 ${currentIndex + 1} 第${sound.retryCount}次重试加载`);
+          setTimeout(() => {
+            sound.load();
+          }, 1000 * sound.retryCount); // 递增延时重试
+        } else {
+          console.warn(`音频 ${currentIndex + 1} 重试失败，跳过该音频`);
           currentIndex++;
           // 跳过失败的音频，播放下一个
           setTimeout(() => {
             playNext();
           }, 100);
+        }
       },
     });
 
     audioStore.nowSound = sound;
     audioStore.setAudioInstance(sound);
+    
+    // 添加播放超时检测
+    const playTimeout = setTimeout(() => {
+      if (!audioStore.isPlaying && sound.state() === 'loading') {
+        console.warn(`音频 ${currentIndex + 1} 播放超时，可能网络问题`);
+        sound.stop();
+        currentIndex++;
+        playNext();
+      }
+    }, 10000); // 10秒超时
+    
+    // 播放成功后清除超时
+    sound.once('play', () => {
+      clearTimeout(playTimeout);
+    });
+    
+    console.log(`尝试播放音频 ${currentIndex + 1}，URL: ${currentUrl}`);
     sound.play();
   };
 
@@ -647,17 +715,43 @@ watch(
           const isPlayingAudio = ref(false);
 
           // 播放音频队列
+          // 防止重复调用的标志
+          let isCallingPlayNext = false;
+          // 当前播放索引
+          let currentPlayIndex = 0;
+          
           const playNextAudio = () => {
-            if (audioQueue.value.length === 0 || isPlayingAudio.value) {
+            console.log('=== playNextAudio 被调用 ===');
+            console.log('当前队列状态:', {
+              queueLength: audioQueue.value.length,
+              queueItems: audioQueue.value.map(item => item.name),
+              currentPlayIndex: currentPlayIndex,
+              isPlayingAudio: isPlayingAudio.value,
+              isCallingPlayNext: isCallingPlayNext,
+              audioStoreIsPlaying: audioStore.isPlaying
+            });
+            
+            if (audioQueue.value.length === 0 || isPlayingAudio.value || isCallingPlayNext) {
+              console.log('❌ 播放条件不满足 - 队列长度:', audioQueue.value.length, '正在播放:', isPlayingAudio.value, '正在调用:', isCallingPlayNext);
               return;
             }
 
+            // 检查是否已播放完所有音频（仅在队列不为空时重置）
+            if (currentPlayIndex >= audioQueue.value.length && audioQueue.value.length > 0) {
+              console.log('🔄 所有音频播放完成，重置索引从第一个开始');
+              currentPlayIndex = 0;
+            }
+
+            isCallingPlayNext = true;
             isPlayingAudio.value = true;
-            const audioInfo = audioQueue.value.shift();
+            const audioInfo = audioQueue.value[currentPlayIndex];
             
-            console.log(`开始播放${audioInfo.name}音频`);
+            console.log(`✅ 开始播放${audioInfo.name}音频 (索引:${currentPlayIndex})，队列总长度:`, audioQueue.value.length);
+            console.log('完整队列内容:', audioQueue.value.map((item, index) => `${index === currentPlayIndex ? '▶️' : '⏸️'} ${item.name}`));
             
-            if (audioStore.nowSound) {
+            // 只有在确实需要停止时才停止之前的音频
+            if (audioStore.nowSound && (audioStore.nowSound.playing() || audioStore.nowSound.state() === 'loading')) {
+              console.log('停止之前的音频实例');
               audioStore.nowSound.stop();
             }
 
@@ -669,7 +763,10 @@ watch(
               onplay: () => {
                 audioStore.isPlaying = true;
                 audioStore.isPaused = false;
-                console.log(`${audioInfo.name}音频开始播放`);
+                isPlayingAudio.value = true; // 确保状态同步
+                isCallingPlayNext = false; // 重置调用标志
+                console.log(`${audioInfo.name}音频开始播放，时长:`, audio.duration());
+                console.log('音频播放状态确认 - isPlayingAudio:', isPlayingAudio.value, 'audioStore.isPlaying:', audioStore.isPlaying);
               },
               onpause: () => {
                 audioStore.isPlaying = false;
@@ -683,26 +780,42 @@ watch(
                 console.log(`${audioInfo.name}音频继续播放`);
               },
               onend: () => {
+                console.log(`${audioInfo.name}音频播放完成，准备播放下一个`);
+                console.log('播放完成时的状态 - 当前索引:', currentPlayIndex, '队列长度:', audioQueue.value.length, 'isPlayingAudio:', isPlayingAudio.value);
                 audioStore.isPlaying = false;
                 audioStore.isPaused = false;
                 audioStore.playbackPosition = 0;
                 isPlayingAudio.value = false;
-                console.log(`${audioInfo.name}音频播放完成`);
-                // 播放下一个音频
+                
+                // 移动到下一个音频索引
+                currentPlayIndex++;
+                
+                // 确保只有在音频真正播放完成时才播放下一个
+                if (currentPlayIndex < audioQueue.value.length) {
+                  console.log(`队列中还有音频，500ms后播放下一个 (索引:${currentPlayIndex})，当前队列:`, audioQueue.value.map((item, index) => `${index === currentPlayIndex ? '▶️' : '⏸️'} ${item.name}`));
                   setTimeout(() => {
+                    isCallingPlayNext = false; // 在调用前重置标志
                     playNextAudio();
-                }, 100);
+                  }, 500);
+                } else {
+                  console.log('🎉 所有音频播放完成，清除音频实例，队列保持完整，下次播放将从第一个开始');
+                  // 清除音频实例，确保重新播放时不会使用旧实例
+                  audioStore.nowSound = null;
+                  audioStore.soundInstance = null;
+                  isCallingPlayNext = false; // 重置调用标志
+                }
               },
               onstop: () => {
+                console.log(`${audioInfo.name}音频被停止`);
                 audioStore.isPlaying = false;
                 audioStore.isPaused = false;
                 audioStore.playbackPosition = 0;
-                isPlayingAudio.value = false;
-                console.log(`${audioInfo.name}音频已停止`);
+                // 注意：不要在onstop中设置isPlayingAudio.value = false，因为这可能是正常的音频切换
               },
               onloaderror: (id, err) => {
                 console.error(`${audioInfo.name}音频播放失败:`, err);
                 isPlayingAudio.value = false;
+                isCallingPlayNext = false; // 重置调用标志
                 // 播放下一个音频
                 setTimeout(() => {
                   playNextAudio();
@@ -714,19 +827,61 @@ watch(
             audioStore.setCurrentAudioUrl(audioInfo.url);
             audioStore.nowSound = audio;
             audioStore.setAudioInstance(audio);
+            
+            console.log(`尝试播放${audioInfo.name}音频`);
             audio.play();
           };
 
-          // 添加音频到播放队列
+          // 音频队列顺序管理
+          const audioQueueOrder = {
+            'API1-第一个': 1,
+            'API2-第二个': 2,
+            'API3-第三个': 3,
+            'API4-第四个': 4
+          };
+          
+          // 添加音频到播放队列（确保顺序）
           const addToAudioQueue = (url, name) => {
+            console.log(`=== 添加音频到队列 ===`);
+            console.log('URL:', url);
+            console.log('Name:', name);
+            console.log('音频启用状态:', audioStore.isVoiceEnabled);
+            
             if (url && audioStore.isVoiceEnabled) {
-              audioQueue.value.push({ url, name });
-              console.log(`音频${name}已添加到播放队列`);
-              // 如果当前没有播放音频，立即开始播放
-              if (!isPlayingAudio.value) {
+              const audioItem = { url, name, order: audioQueueOrder[name] || 999 };
+              audioQueue.value.push(audioItem);
+              
+              // 按顺序排序队列
+              audioQueue.value.sort((a, b) => a.order - b.order);
+              
+              console.log(`音频${name}已添加到播放队列，顺序:${audioItem.order}`);
+              console.log('当前队列顺序:', audioQueue.value.map(item => `${item.name}(${item.order})`));
+              console.log('当前播放状态详情:');
+              console.log('  - isPlayingAudio:', isPlayingAudio.value);
+              console.log('  - audioStore.isPlaying:', audioStore.isPlaying);
+              console.log('  - audioStore.nowSound:', audioStore.nowSound);
+              console.log('  - isCallingPlayNext:', isCallingPlayNext);
+              console.log('  - 队列长度:', audioQueue.value.length);
+              
+              // 只有在确实没有音频在播放且这是第一个音频时才开始播放
+              if (!isPlayingAudio.value && !audioStore.isPlaying && audioQueue.value.length === 1) {
+                console.log('✅ 条件满足：没有音频在播放且这是第一个音频，立即开始播放');
                 playNextAudio();
+              } else {
+                console.log('⏳ 等待条件：', {
+                  isPlayingAudio: isPlayingAudio.value,
+                  audioStoreIsPlaying: audioStore.isPlaying,
+                  queueLength: audioQueue.value.length,
+                  reason: audioQueue.value.length > 1 ? '队列中已有其他音频' : '有音频正在播放'
+                });
               }
+            } else {
+              console.log('❌ 跳过添加音频：', {
+                hasUrl: !!url,
+                voiceEnabled: audioStore.isVoiceEnabled
+              });
             }
+            console.log(`=== 添加音频完成 ===`);
           };
 
           // 重写audioStore的togglePlayPause方法以支持队列播放控制
@@ -735,8 +890,11 @@ watch(
             console.log('主页音频控制按钮被点击');
             console.log('当前音频状态 - isPlaying:', audioStore.isPlaying, 'isPaused:', audioStore.isPaused);
             console.log('当前音频实例:', audioStore.soundInstance);
+            console.log('队列播放状态 - isPlayingAudio:', isPlayingAudio.value, '队列长度:', audioQueue.value.length);
+            console.log('当前播放索引:', currentPlayIndex, '是否所有音频播放完成:', currentPlayIndex >= audioQueue.value.length);
             
-            if (audioStore.soundInstance) {
+            // 检查是否所有音频都播放完成，如果是则重新开始
+            if (audioStore.soundInstance && currentPlayIndex < audioQueue.value.length && isPlayingAudio.value) {
               if (audioStore.isPlaying) {
                 // 暂停当前音频
                 console.log('暂停当前音频');
@@ -752,10 +910,83 @@ watch(
                 audioStore.soundInstance.play();
               }
             } else {
-              console.log('没有音频实例，尝试播放队列中的音频');
-              // 没有音频实例时，尝试播放队列中的音频
-              if (!isPlayingAudio.value && audioQueue.value.length > 0) {
+              console.log('没有音频实例，检查是否需要重新播放队列');
+              console.log('重新播放条件检查:', {
+                isPlayingAudio: isPlayingAudio.value,
+                queueLength: audioQueue.value.length,
+                currentPlayIndex: currentPlayIndex,
+                condition1: audioQueue.value.length === 0,
+                condition2: currentPlayIndex >= audioQueue.value.length,
+                finalCondition: !isPlayingAudio.value && (audioQueue.value.length === 0 || currentPlayIndex >= audioQueue.value.length)
+              });
+              // 没有音频实例时，检查是否所有音频都播放完成
+              if (!isPlayingAudio.value && (audioQueue.value.length === 0 || currentPlayIndex >= audioQueue.value.length)) {
+                console.log('所有音频播放完成，重新构建队列从第一个开始播放');
+                // 重新构建音频队列，按顺序添加所有音频（不自动播放）
+                const audioItems = [];
+                if (audioPreloadStatus.one.url) {
+                  audioItems.push({ url: audioPreloadStatus.one.url, name: "API1-第一个", order: 1 });
+                }
+                if (audioPreloadStatus.two.url) {
+                  audioItems.push({ url: audioPreloadStatus.two.url, name: "API2-第二个", order: 2 });
+                }
+                if (audioPreloadStatus.three.url) {
+                  audioItems.push({ url: audioPreloadStatus.three.url, name: "API3-第三个", order: 3 });
+                }
+                if (audioPreloadStatus.four.url) {
+                  audioItems.push({ url: audioPreloadStatus.four.url, name: "API4-第四个", order: 4 });
+                }
+                
+                // 按顺序排序并添加到队列
+                audioItems.sort((a, b) => a.order - b.order);
+                audioQueue.value = audioItems;
+                
+                console.log('队列重建完成，队列内容:', audioQueue.value.map(item => item.name));
+                console.log('开始从第一个音频播放');
+                
+                // 重置播放状态并开始播放第一个音频
+                if (audioQueue.value.length > 0) {
+                  // 完全重置所有播放相关状态
+                  isPlayingAudio.value = false;
+                  isCallingPlayNext = false;
+                  currentPlayIndex = 0; // 重置播放索引到第一个音频
+                  audioStore.isPlaying = false;
+                  audioStore.isPaused = false;
+                  audioStore.playbackPosition = 0;
+                  audioStore.nowSound = null;
+                  audioStore.soundInstance = null;
+                  
+                  console.log('🔄 状态完全重置完成，准备从第一个音频开始播放');
+                  
+                  console.log('✅ 完全重置播放状态，准备播放第一个音频');
+                  console.log('重置后状态检查:', {
+                    isPlayingAudio: isPlayingAudio.value,
+                    isCallingPlayNext: isCallingPlayNext,
+                    currentPlayIndex: currentPlayIndex,
+                    audioStoreIsPlaying: audioStore.isPlaying,
+                    queueLength: audioQueue.value.length
+                  });
+                  
+                  setTimeout(() => {
+                    console.log('🚀 延迟后开始播放第一个音频');
+                    console.log('播放前最终状态检查:', {
+                      currentPlayIndex: currentPlayIndex,
+                      queueLength: audioQueue.value.length,
+                      queueItems: audioQueue.value.map((item, index) => `${index}: ${item.name}`),
+                      isPlayingAudio: isPlayingAudio.value,
+                      isCallingPlayNext: isCallingPlayNext,
+                      audioStoreIsPlaying: audioStore.isPlaying,
+                      audioStoreInstance: !!audioStore.soundInstance
+                    });
+                    console.log('🎯 即将调用 playNextAudio，期望播放:', audioQueue.value[currentPlayIndex]?.name || '无音频');
                     playNextAudio();
+                  }, 200);
+                }
+              } else if (!isPlayingAudio.value && audioQueue.value.length > 0) {
+                console.log('队列中还有音频，继续播放');
+                playNextAudio();
+              } else {
+                console.log('无法播放 - isPlayingAudio:', isPlayingAudio.value, '队列长度:', audioQueue.value.length);
               }
             }
           };
@@ -767,6 +998,10 @@ watch(
               return Promise.resolve();
             }
 
+            // 立即设置URL，确保即使预加载失败也能使用
+            audioPreloadStatus[apiKey].url = url;
+            console.log(`设置音频${apiKey}的URL:`, url);
+
             return new Promise((resolve) => {
               const audio = new Howl({
                 src: [url],
@@ -777,12 +1012,12 @@ watch(
                 onload: () => {
                   console.log(`音频${apiKey}预加载完成:`, url);
                   audioPreloadStatus[apiKey].loaded = true;
-                  audioPreloadStatus[apiKey].url = url;
                   resolve();
                 },
                 onloaderror: (id, err) => {
                   console.error(`音频${apiKey}预加载失败:`, err);
                   audioPreloadStatus[apiKey].loaded = true; // 标记为已处理，避免阻塞
+                  // URL已经在上面设置了，即使预加载失败也保留URL
                   resolve();
                 }
               });
@@ -802,9 +1037,10 @@ watch(
                if (apiStatus.one.result) {
                  console.log("执行OneAPI代码（文本和音频同步开始）:", apiStatus.one.result);
                  
-                 // 将第一个音频添加到播放队列
+                 // 将第一个音频添加到播放队列（确保顺序：API1）
                  if (audioPreloadStatus.one.url) {
-                   addToAudioQueue(audioPreloadStatus.one.url, "第一个");
+                   addToAudioQueue(audioPreloadStatus.one.url, "API1-第一个");
+                   console.log("音频队列：添加API1音频，当前队列长度:", audioQueue.value.length);
                  }
                  
                  // 在这里添加OneAPI成功后需要执行的代码
@@ -817,7 +1053,7 @@ watch(
                      class: "title1",
                      type: "title1",
                      content: codeData.value.name + "全景作战报告",
-                     date: moment().format("DD/MM/YYYY"),
+                     date: result21.data.date,
                    },
                    "",
                    50
@@ -1047,9 +1283,10 @@ watch(
               if (apiStatus.two.result) {
                 console.log("执行TwoAPI代码:", apiStatus.two.result);
                 
-                // 将第二个音频添加到播放队列
+                // 将第二个音频添加到播放队列（确保顺序：API2）
                 if (audioPreloadStatus.two.url) {
-                  addToAudioQueue(audioPreloadStatus.two.url, "第二个");
+                  addToAudioQueue(audioPreloadStatus.two.url, "API2-第二个");
+                  console.log("音频队列：添加API2音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加TwoAPI成功后需要执行的代码
@@ -1125,9 +1362,10 @@ watch(
               if (apiStatus.three.result) {
                 console.log("执行ThreeAPI代码:", apiStatus.three.result);
                 
-                // 将第三个音频添加到播放队列
+                // 将第三个音频添加到播放队列（确保顺序：API3）
                 if (audioPreloadStatus.three.url) {
-                  addToAudioQueue(audioPreloadStatus.three.url, "第三个");
+                  addToAudioQueue(audioPreloadStatus.three.url, "API3-第三个");
+                  console.log("音频队列：添加API3音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加ThreeAPI成功后需要执行的代码
@@ -1186,7 +1424,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage3, [ac31, ac32], 180);
+                addTypingTask(aiMessage3, [ac31, ac32], 200);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1267,7 +1505,7 @@ watch(
                 addTypingTask(
                   aiMessage4,
                   [ac41, ac42, ac43, ac44, ac45, ac46, ac47, ac48],
-                  180
+                  200
                 );
 
                 // chatStore.messages.push({
@@ -1289,9 +1527,10 @@ watch(
               if (apiStatus.four.result) {
                 console.log("执行FourAPI代码:", apiStatus.four.result);
                 
-                // 将第四个音频添加到播放队列
+                // 将第四个音频添加到播放队列（确保顺序：API4）
                 if (audioPreloadStatus.four.url) {
-                  addToAudioQueue(audioPreloadStatus.four.url, "第四个");
+                  addToAudioQueue(audioPreloadStatus.four.url, "API4-第四个");
+                  console.log("音频队列：添加API4音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加FourAPI成功后需要执行的代码
@@ -1351,7 +1590,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 180);
+                addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 240);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1382,7 +1621,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage6, ["", ac6], 180);
+                addTypingTask(aiMessage6, ["", ac6], 210);
 
                 // chatStore.messages.push({
                 //   sender: "ai",

src/views/AiEmotion.vue

@@ -24,7 +24,7 @@
   <div v-if="isLoading" class="loading-container">
     <div class="loading-content">
       <div class="loading-spinner"></div>
-      <div class="loading-text">AI小财神正在加载图表数据和音频内容，请稍候...</div>
+      <div class="loading-text">AI情绪大模型正在努力为您加载，请稍候...</div>
     </div>
   </div>
   <!-- 股票标签页 -->
@@ -248,6 +248,8 @@ const hasTriggeredAudio = ref(false); // 是否已触发音频播放
 const hasTriggeredTypewriter = ref(false); // 是否已触发打字机效果
 const intersectionObserver = ref(null); // 存储observer实例
 const isUserInitiated = ref(false); // 标记是否为用户主动搜索
+const isUserScrolling = ref(false); // 标记用户是否正在手动滚动
+const scrollTimeout = ref(null); // 滚动超时定时器
 
 // 显示的文本内容（用于打字机效果）
 const displayedTexts = ref({
@@ -291,7 +293,19 @@ const stockName = computed(() => currentStock.value?.stockInfo.name || "");
 const displayDate = computed(() => {
   if (!currentStock.value?.apiData) return "";
   const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
-  return lastData ? lastData[0] : "";
+  if (!lastData || !lastData[0]) return "";
+  
+  const dateStr = lastData[0];
+  // 假设原格式为 YYYY-MM-DD 或 YYYY/MM/DD
+  const dateMatch = dateStr.match(/(\d{4})[\-\/](\d{1,2})[\-\/](\d{1,2})/);
+  if (dateMatch) {
+    const [, year, month, day] = dateMatch;
+    // 转换为 DD/MM/YYYY 格式
+    return `更新时间：${day.padStart(2, '0')}/${month.padStart(2, '0')}/${year}`;
+  }
+  
+  // 如果不匹配预期格式，返回原始值
+  return dateStr;
 });
 const data1 = computed(() => {
   if (!currentStock.value?.apiData) return null;
@@ -744,6 +758,12 @@ function startTypewriterEffect(conclusion) {
   for (let i = 0; i <= disclaimerText.length; i++) {
     const timer = setTimeout(() => {
       displayedTexts.value.disclaimer = disclaimerText.substring(0, i);
+      // 在打字机效果的最后一个字符显示完成后，滚动到底部
+      if (i === disclaimerText.length) {
+        setTimeout(() => {
+          scrollToBottom();
+        }, 100);
+      }
     }, totalDelay + i * typeSpeed);
     typewriterTimers.value.push(timer);
   }
@@ -792,6 +812,10 @@ function playAudio(url) {
         isAudioPlaying.value = true;
         emotionAudioStore.isPlaying = true;
         console.log('开始播放场景应用语音');
+        // 音频开始播放时，滚动到底部
+        setTimeout(() => {
+          scrollToBottom();
+        }, 100);
       },
       onend: () => {
         isAudioPlaying.value = false;
@@ -1143,6 +1167,12 @@ function renderCharts(data) {
 }
 
 const scrollToBottom = async () => {
+  // 如果用户正在手动滚动，则不执行自动滚动
+  if (isUserScrolling.value) {
+    console.log('用户正在手动滚动，跳过自动滚动');
+    return;
+  }
+  
   const container = userInputDisplayRef.value;
   if (!container) return;
   await nextTick();
@@ -1152,6 +1182,32 @@ const scrollToBottom = async () => {
   container.scrollTop = container.scrollHeight - container.offsetHeight;
 };
 
+// 处理用户滚动事件
+const handleUserScroll = () => {
+  isUserScrolling.value = true;
+  
+  // 清除之前的定时器
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value);
+  }
+  
+  // 设置定时器，2秒后重新允许自动滚动
+  scrollTimeout.value = setTimeout(() => {
+    isUserScrolling.value = false;
+    console.log('用户滚动结束，重新允许自动滚动');
+  }, 2000);
+};
+
+// 处理滚轮事件
+const handleWheel = (event) => {
+  handleUserScroll();
+};
+
+// 处理触摸滚动事件
+const handleTouchMove = (event) => {
+  handleUserScroll();
+};
+
 
 // 检查数据是否已加载完成
 function isDataLoaded() {
@@ -1353,6 +1409,14 @@ onMounted(async () => {
   window.addEventListener('resize', globalResizeHandler);
   window.aiEmotionGlobalResizeHandler = globalResizeHandler;
   
+  // 添加滚动事件监听器
+  const container = userInputDisplayRef.value;
+  if (container) {
+    container.addEventListener('wheel', handleWheel, { passive: true });
+    container.addEventListener('touchmove', handleTouchMove, { passive: true });
+    container.addEventListener('scroll', handleUserScroll, { passive: true });
+  }
+
   // 防抖函数定义
   function debounce(func, wait) {
     let timeout;
@@ -1424,6 +1488,20 @@ onUnmounted(() => {
     window.removeEventListener('resize', window.aiEmotionGlobalResizeHandler);
     window.aiEmotionGlobalResizeHandler = null;
   }
+  
+  // 清理滚动事件监听器
+  const container = userInputDisplayRef.value;
+  if (container) {
+    container.removeEventListener('wheel', handleWheel);
+    container.removeEventListener('touchmove', handleTouchMove);
+    container.removeEventListener('scroll', handleUserScroll);
+  }
+  
+  // 清理滚动定时器
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value);
+    scrollTimeout.value = null;
+  }
 });
 
 // 声明组件可以触发的事件
@@ -1449,21 +1527,30 @@ defineExpose({
 
 .class003 {
   padding-top: 8%;
-  padding-left: 10%;
+  /* padding-left: 10%; */
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  gap: 25%;
+  /* flex-direction: column; */
+  /* gap: 1rem; */
+}
+
+
+.img01 {
+  width: 11vw;
+  /* height: auto; */
 }
 
 .div00 {
   display: flex;
-  flex-direction: row;
-  gap: 2%;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  box-sizing: border-box;
+  flex-direction: column;
+  /* 竖向排列元素 */
+  /* margin-left: 15%; */
+  gap: 30px;
+  /* margin-top: -12%; */
+  /* width: 100%; */
+  /* height: auto; */
 }
 
 .div00::after {
@@ -1476,7 +1563,9 @@ defineExpose({
   background-image: url('@/assets/img/AiEmotion/redBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  width: 35%;
+  /* width: 50%; */
+  width: 30vw;
+  max-width: 400px;
   min-width: 200px;
   min-height: 40px;
   text-align: center;
@@ -1492,7 +1581,9 @@ defineExpose({
   background-image: url('@/assets/img/AiEmotion/blueBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  width: 35%;
+  /* width: 35%; */
+  width: 30vw;
+  max-width: 400px;
   min-width: 200px;
   min-height: 40px;
   text-align: center;
@@ -1719,7 +1810,7 @@ defineExpose({
 }
 
 .class0402 {
-  width: 80%;
+  /* width: 80vw; */
   margin: 0 auto;
 }
 
@@ -1732,31 +1823,35 @@ defineExpose({
 .class0502 {
   padding-top: 7%;
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: column;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .class0601 {
   padding-top: 5rem;
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: column;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .img03 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .img04 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .class0701 {
@@ -1795,36 +1890,38 @@ defineExpose({
   padding-top: 5rem;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .img02 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .title2 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 45%;
+  /* margin-left: 45%; */
 }
 
 .title3 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 44.6%;
+  /* margin-left: 44.6%; */
 }
 
 .title4 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 44%;
+  /* margin-left: 44%; */
 }
 
 .class09 {
@@ -1897,7 +1994,7 @@ defineExpose({
   /* 确保不超出父容器 */
   height: auto;
   /* 高度根据内容动态变化 */
-  min-height: 90rem;
+  /* min-height: 90rem; */
   /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
@@ -1905,7 +2002,6 @@ defineExpose({
   transition: all 0.3s ease;
   /* 添加平滑过渡效果 */
 }
-
 .class04 {
   background-image: url('@/assets/img/AiEmotion/bk00000.png');
   /* 使用导入的背景图片 */
@@ -1919,13 +2015,14 @@ defineExpose({
   /* 确保不超出父容器 */
   height: auto;
   /* 高度根据内容动态变化 */
-  min-height: 75rem;
+  /* min-height: 75rem; */
   /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
   /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
   /* 添加平滑过渡效果 */
+  padding-bottom: 1rem;
 }
 
 .class03 {
@@ -1973,9 +2070,10 @@ defineExpose({
 .content1 {
   display: flex;
   flex-direction: column;
+  align-items: center;
   /* 竖向排列元素 */
-  gap: 1rem;
-  margin-left: 10%;
+  /* gap: 1rem; */
+  /* margin-left: 10%; */
 }
 
 .title1 {
@@ -1986,24 +2084,12 @@ defineExpose({
 
 }
 
-.img01 {
-  width: 10%;
-  height: auto;
-}
 
-.div00 {
-  display: flex;
-  flex-direction: column;
-  /* 竖向排列元素 */
-  margin-left: 15%;
-  gap: 1rem;
-  margin-top: -12%;
-  width: 100%;
-  height: auto;
-}
+
 
 .span02 {
   font-size: 1.5rem;
+  font-weight: bold;
   color: white;
   float: right;
   margin-top: -2%;
@@ -2167,14 +2253,6 @@ defineExpose({
     min-height: 60rem;
   }
 
-  .class04 {
-    min-height: 65rem;
-  }
-
-  .class05 {
-    min-height: 75rem;
-  }
-
   .class06 {
     min-height: 58rem;
   }
@@ -2195,23 +2273,6 @@ defineExpose({
     padding: 0.6rem;
   }
 
-  .class003 {
-    padding-top: 6%;
-    padding-left: 5%;
-  }
-
-  .div00 {
-    gap: 1%;
-    justify-content: center;
-  }
-
-  .class003 .div01,
-  .class003 .div02 {
-    width: 45%;
-    min-width: 180px;
-    font-size: 20px;
-  }
-
   /* 调整图表容器高度 */
   .class00 {
     min-height: 40rem;
@@ -2221,14 +2282,6 @@ defineExpose({
     min-height: 55rem;
   }
 
-  .class04 {
-    min-height: 55rem;
-  }
-
-  .class05 {
-    min-height: 65rem;
-  }
-
   .class06 {
     min-height: 50rem;
   }
@@ -2275,7 +2328,7 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: contain;
     text-align: center;
-    width:100%;
+    width: 100%;
     margin-top: 4%;
     height: 200px;
     min-height: 200px;
@@ -2341,9 +2394,9 @@ defineExpose({
 
   .img01 {
     height: auto;
-    margin-left: 7%;
-    width: 25%;
-    margin-top: 10px;
+    /* margin-left: 7%; */
+    width: 15vw;
+    /* margin-top: 10px; */
   }
 
   .title1 {
@@ -2367,10 +2420,6 @@ defineExpose({
     height: auto;
   }
 
-  .class03 .class003 {
-    padding-top: 3rem;
-    padding-left: 0rem;
-  }
 
   .class01 {
     min-height: 100px;
@@ -2383,7 +2432,8 @@ defineExpose({
   .class04 {
     width: 100%;
     height: auto;
-    min-height: 38rem;
+    margin: 0 auto;
+    /* min-height: 38rem; */
     /* min-height: 51rem; */
     /* margin-left: -39px; */
     /* min-height: 38rem; */
@@ -2398,10 +2448,6 @@ defineExpose({
     min-height: 45rem;
   }
 
-  .class05 {
-    min-height: 48rem;
-  }
-
   .class06 {
     min-height: 35rem;
   }
@@ -2416,7 +2462,7 @@ defineExpose({
   .img02 {
     width: 25%;
     height: auto;
-    margin-left: 32%;
+    /* margin-left: 32%; */
   }
 
   .class0401 {
@@ -2427,7 +2473,7 @@ defineExpose({
   .img04 {
     width: 25%;
     height: auto;
-    margin-left: 33%;
+    /* margin-left: 33%; */
   }
 
   .text-container p {
@@ -2632,7 +2678,7 @@ defineExpose({
     background-repeat: no-repeat;
     width: 100%;
     height: auto;
-    min-height: 48rem;
+    /* min-height: 48rem; */
   }
 
   .class06 {
@@ -2653,42 +2699,31 @@ defineExpose({
     padding: 5%;
   }
 
+  .class003 {
+    padding-top: 12%;
+    gap: 20vw;
+  }
+
   .div00 {
     display: flex;
     flex-direction: column;
-    margin-left: 5rem;
+    /* margin-left: 5rem; */
     gap: 0;
-    margin-top: -6rem;
-    width: 100%;
+    /* margin-top: -6rem; */
+    /* width: 100%; */
     height: auto;
   }
 
-  .class003 .div01 {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 35%;
-    min-height: 25px;
-    float: left;
-    margin-left: 100px;
-    text-align: center;
-    margin-top: 10px;
-    font-size: 10px;
-    color: white;
-  }
 
+  .class003 .div01,
   .class003 .div02 {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 35%;
-    min-height: 25px;
-    float: left;
-    margin-left: 100px;
-    text-align: center;
-    margin-top: 10px;
-    font-size: 10px;
-    color: white;
+    /* width: 80%; */
+    min-width: 250px;
+    font-size: 16px;
+    min-height: 35px;
   }
 
+
   .span01 {
     /* 使用导入的背景图片 */
     background-image: url('@/assets/img/AiEmotion/bk01.png');
@@ -2713,25 +2748,12 @@ defineExpose({
     padding-top: 10%;
   }
 
-  .class003 {
-    padding-top: 4%;
-    padding-left: 2%;
-  }
-
   .div00 {
     flex-direction: column;
     gap: 1rem;
     align-items: center;
   }
 
-  .class003 .div01,
-  .class003 .div02 {
-    width: 80%;
-    min-width: 250px;
-    font-size: 16px;
-    min-height: 35px;
-  }
-
   .span01 {
     width: 60%;
     font-size: 1.2rem;
@@ -2766,16 +2788,22 @@ defineExpose({
     align-items: center;
   }
 
+  .class003 {
+    padding-top: 14%;
+    gap: 30px;
+  }
+
   .class003 .div01,
   .class003 .div02 {
-    width: 90%;
+    /* width: 90%; */
+    width: 10vw;
     min-width: 200px;
     font-size: 14px;
     min-height: 30px;
   }
 
   .span01 {
-    width: 70%;
+    width: 50%;
     font-size: 1rem;
     padding: 6px;
   }
@@ -2797,14 +2825,6 @@ defineExpose({
     min-height: 35rem;
   }
 
-  .class04 {
-    min-height: 30rem;
-  }
-
-  .class05 {
-    min-height: 35rem;
-  }
-
   .class06 {
     min-height: 25rem;
   }
@@ -2824,8 +2844,8 @@ defineExpose({
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 60vh;
-  padding: 40px 20px;
+  min-height: 20vh;
+  padding: 20px 10px;
 }
 
 .loading-content {

src/views/DBQBmodel.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImage from '@/assets/img/DBQBmodel/-s-bg.png'
+import bgImageSmall from '@/assets/img/DBQBmodel/-s-bg.png'
+import bgImageLarge from '@/assets/img/DBQBmodel/bg.png'
 import topIcon from '@/assets/img/DBQBmodel/大标题.png'
 import subtitle from '@/assets/img/DBQBmodel/-s-构建场景.png'
 import text1 from '@/assets/img/DBQBmodel/-s-数据可计算.png'
@@ -12,9 +13,25 @@ import { setHeight } from '@/utils/setHeight'
 
 const router = useRouter()
 const pageRef = ref(null)
+const windowWidth = ref(window.innerWidth)
+
+// 响应式计算背景图片
+const bgImage = computed(() => {
+  return windowWidth.value > 1024 ? bgImageLarge : bgImageSmall
+})
+
+// 监听窗口大小变化
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
 
 onMounted(() => {
     setHeight(pageRef.value)
+    window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize)
 })
 
 const goToHomePage = () => {
@@ -50,6 +67,7 @@ const goToHomePage = () => {
 
 <style scoped>
 .homepage {
+  /* background-image: url("@/assets/img/DBQBmodel/bg.png"); */
   /* width: 100vw; */
   min-height: 100vh;
   background-size: cover;
@@ -68,6 +86,7 @@ const goToHomePage = () => {
   max-width: 500px;
   height: auto;
   margin-top: 20px;
+ 
 }
 
 /* 副标题 */
@@ -83,15 +102,19 @@ const goToHomePage = () => {
 .content-text {
     padding-top: 30px;
     display: flex;
-  flex-direction: column;
+    flex-direction: row; /* 改为横向排列 */
     align-items: center;
+    justify-content: center; /* 添加水平居中 */
     gap: 23px;
     margin-bottom: 10px;
+    flex-wrap: wrap; /* 添加换行支持，防止小屏幕溢出 */
 }
 .content-text img {
     width: 80%;
     max-width: 300px;
     height: auto;
+    flex: 1; /* 让图片平均分配空间 */
+    min-width: 200px; /* 设置最小宽度 */
 }
 
 /* 按钮区 */
@@ -114,7 +137,7 @@ const goToHomePage = () => {
   height: 120px;
 }
 
-/* 手机适配 */
+/* 手机适配 - 小屏幕时保持纵向排列 */
 @media screen and (max-width: 600px) {
   .homepage {
     padding: 20px 10px;
@@ -130,8 +153,13 @@ const goToHomePage = () => {
     margin: 20px 0;
   }
 
+  .content-text {
+    flex-direction: column; /* 小屏幕时恢复纵向排列 */
+  }
+
   .content-text img {
     width: 70%;
+    flex: none; /* 取消flex布局 */
   }
 
   .btn-item img {
@@ -147,19 +175,51 @@ const goToHomePage = () => {
     .top-icon {
         margin-top: 190px;
         width: 100%;
+  
     }
 
     .sub-title {
         width: 85%;
     }
 
+    .content-text {
+        flex-direction: row; /* 平板及以上保持横向排列 */
+    }
+
     .content-text img {
-    width: 80%;
+        width: 30%; /* 调整宽度适应横向布局 */
+        max-width: 250px;
     }
 
     .btn-item img {
         width: 300px;
     }
 }
+
+/* 桌面端适配 */
+@media screen and (min-width: 1025px) {
+    .content-text img {
+        width: 25%; /* 桌面端进一步调整宽度 */
+        max-width: 280px;
+    }
+    /* 顶部标题图 */
+.top-icon {
+     width: 35vw;
+    max-width: 500vw;
+    height: auto;
+    margin-top: 8vw;
+ 
+}
+}
+@media screen and (min-width: 1024px) and (max-width: 2000px){
+    /* 顶部标题图 */
+.top-icon {
+     width: 50vw;
+    max-width: 500vw;
+    height: auto;
+    margin-top: 15vw;
+ 
+}
+}
 </style>
 

src/views/Emotionsmodel.vue

@@ -2,16 +2,16 @@
   <div
     ref="pageRef"
     class="homepage"
-    :style="{ backgroundImage: `url(${bgImage})` }"
   >
     <!-- 顶部图标 -->
     <img class="top-icon" :src="topIcon" alt="顶部图标" />
 
     <!-- 中间图示及说明 -->
-      <!-- 副标题 -->
-     <div class="content-container" >
-    <img class="sub-title" :src="subtitle" alt="四维作战体系" />
-    <img class="content-icon" :src="contenicon" alt="四维情绪" />
+    <div class="content-container">
+      <!-- 副标题 - 只在屏幕宽度小于等于1024px时显示 -->
+      <img v-if="screenWidth <= 1024" class="sub-title" :src="subtitle" alt="四维作战体系" />
+      <!-- 内容图 - 根据屏幕宽度动态切换 -->
+      <img class="content-icon" :src="currentContentIcon" alt="四维情绪" />
     </div>
 
     <!-- 按钮区域 -->
@@ -24,22 +24,37 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, computed, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
-import bgImage from '@/assets/img/Emotionsmodel/-s-bg.png'
+// 移除背景图片的导入，改用CSS设置
 import topIcon from '@/assets/img/Emotionsmodel/大标题.png'
 import subtitle from '@/assets/img/Emotionsmodel/-s-标题 拷贝.png'
-import contenicon from '@/assets/img/Emotionsmodel/-s-四维.png'
+import conteniconLarge from '@/assets/img/Emotionsmodel/_s_四维 拷贝.png'
+import conteniconSmall from '@/assets/img/Emotionsmodel/-s-四维.png'
 import btnIcon from '@/assets/img/Emotionsmodel/-s-开启财运.png'
 import { setHeight } from '@/utils/setHeight'
 
 const router = useRouter()
 const pageRef = ref(null)
+const screenWidth = ref(window.innerWidth)
+
+// 根据屏幕宽度选择内容图片
+const currentContentIcon = computed(() => {
+  return screenWidth.value > 1024 ? conteniconLarge : conteniconSmall
+})
+
+const handleResize = () => {
+  screenWidth.value = window.innerWidth
+}
 
 onMounted(() => {
   setHeight(pageRef.value)
+  window.addEventListener('resize', handleResize)
 })
 
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
 
 const goToAiEmotion = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
@@ -53,7 +68,8 @@ const goToAiEmotion = () => {
 .homepage {
   /* width: 100vw; */
   min-height: 100vh;
-  background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
+  /* 默认使用小屏背景 */
+  background-image: url('@/assets/img/DBQBmodel/-s-bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -68,13 +84,44 @@ const goToAiEmotion = () => {
   text-align: center;
   font-family: 'Microsoft YaHei', sans-serif;
 }
+@media (min-width: 1025px) and (max-width: 1900px){
   
 /* 顶部图标 */
 .top-icon {
-  width: 40vw;
-  max-width: 300px;
+    width: 20vw;
+    min-width: 300px;
     height: auto;
-  margin-top: 5vh;
+    margin-top: 10vw !important;
+    margin-bottom: 2vw;
+}
+  .content-icon {
+width: 80% !important;
+    min-width: 300px;
+    height: auto;
+    margin-top: 50px !important;
+    margin-bottom: 20px !important;
+}
+.btn-item img {
+  width: 220px;
+    min-width: 40vw !important;
+  height: auto;
+  margin-top: 10px !important;
+}
+}
+/* 大屏幕使用大背景图 */
+@media screen and (min-width: 1025px) {
+  .homepage {
+    background-image: url('@/assets/img/DBQBmodel/bg.png');
+  }
+}
+
+/* 顶部图标 */
+.top-icon {
+    width: 20vw;
+    min-width: 300px;
+    height: auto;
+    margin-top: 2vw;
+    margin-bottom: 2vw;
 }
 
 /* 四维体系整体容器修复 */
@@ -96,8 +143,8 @@ const goToAiEmotion = () => {
 
 /* 内容图 */
 .content-icon {
-  width: 90%;
-  max-width: 520px;
+width: 100%;
+    min-width: 400px;
     height: auto;
     margin-top: 10px;
 }
@@ -125,7 +172,7 @@ const goToAiEmotion = () => {
 
 .btn-item img {
   width: 220px;
-  max-width: 80vw;
+    min-width: 20vw;
   height: auto;
   padding-top: 30px;
 }

src/views/Selectmodel.vue

@@ -67,7 +67,7 @@ const goToEmotionsmodel = () => {
   /* width: 100vw; */
   /* min-height: 100vw; */
   /* background-color: #000cfc; */
-  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/49a45ea0e9ff44e9a965cc1de8059a77.png");
+  background-image: url("@/assets/img/Selectmodel/bg.png");
   background-size: 100%;
   background-position: center;
   background-repeat: no-repeat;
@@ -170,7 +170,7 @@ const goToEmotionsmodel = () => {
   width: 200vw;
   max-width: 200vw;
   height: 6vw;
-  background-image: url("https://d31zlh4on95l9h.cloudfront.net/images/3e36a5a3d676f86e022f7cd41a2fa0a6.png");
+  background-image: url("@/assets/img/Selectmodel/智能体 拷贝.png");
   background-size: 100% 100%;
   background-size: contain;
   background-repeat: no-repeat;
@@ -308,13 +308,26 @@ const goToEmotionsmodel = () => {
   .homepage {
     background-size: cover;
     min-height: 100vh;
+    width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  .main-icon {
+    margin-top:46rem;
+    width: calc(20vw + 100px);
+    max-width: 300px;
+    min-width: 300px;
+  }
+  
+  /* 隐藏滚动条 */
+  body {
+    overflow-x: hidden;
+  }
+  
+  html, body {
+    width: 100%;
+    max-width: 100vw;
   }
-  /* .main-icon {
-  max-width: 350px;
-  width: 28vw;
-  height: auto;
-  margin-top:48vw;
-} */
 }
 @media screen and (min-width: 1025px) and (max-width: 1700px){
   .main-icon {

src/views/components/emoEnergyConverter.vue

@@ -12,7 +12,7 @@ let qxnlzhqEchartsRef = ref(null);
 let qxnlzhqEchartsInstance = null;
 
 let regions = reactive([]);
-
+const dataMax=ref(null)
 // 设置区域名称 位置
 function getNameTop(min, max, regionMiidle) {
   // 获取整个图表的高度
@@ -30,14 +30,30 @@ function getNumberTop(min, max, regionMax) {
 
 // 生成图形标注（核心逻辑）
 const generateGraphics = (min, max) => {
+  let hasPartialVisible = false; // 标记是否已经遇到第一个部分可见的区域
   return regions.flatMap((region) => {
+    if(!region.min || !region.max) return [];
     const middleY = (Number(region.min) + Number(region.max)) / 2;
-    return [
+    const safeY = Math.max(min, Math.min(middleY, max*0.99));
+    // 检查区域是否完全可见
+    const isFullyVisible = region.min >= min && region.max <= max;
+    // 检查区域是否部分可见
+    const isPartiallyVisible = (region.min < max && region.max > min) && !isFullyVisible;
+    // 如果已经有一个部分可见的区域名称显示了，就不再显示其他部分可见的区域名称
+    if (isPartiallyVisible && hasPartialVisible) {
+      return [];
+    }
+    // 如果是第一个部分可见的区域，设置标记
+    if (isPartiallyVisible) {
+      hasPartialVisible = true;
+    }
+    const graphics = [];
     // 区域名称（中间位置）
-      {
+    if (isFullyVisible || isPartiallyVisible) {
+      graphics.push({
         type: "text",
-        left: '60', // 向右调整位置
-        top: getNameTop(min, max, middleY),
+        left: '10%',
+        top: getNameTop(min, max, safeY),
         style: {
           text: region.name,
           fill: region.fontColor,
@@ -45,11 +61,13 @@ const generateGraphics = (min, max) => {
           fontWeight: "bold",
         },
         z: 3,
-      },
+      });
+    }
     // y轴数值（顶部位置）
-      {
+    if (isFullyVisible) {
+      graphics.push({
         type: "text",
-        left: '60', // 向右调整位置
+        left: '5%', // 向右调整位置
         top: getNumberTop(min, max, region.max),
         // top: 100,
         style: {
@@ -58,8 +76,9 @@ const generateGraphics = (min, max) => {
           fontSize: 12,
         },
         z: 3,
-      },
-    ];
+      });
+    }
+    return graphics;
   });
 };
 
@@ -89,41 +108,41 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       min: qxnlzhqData.dd,
       max: qxnlzhqData.zc,
       name: "【情绪冰点区】",
-      color: "#e7a5d6",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#FF9F9F",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.zc,
       max: qxnlzhqData.ht,
       name: "【认知潜伏区】",
-      color: "#f36587",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#FFCB75",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.ht,
       max: qxnlzhqData.qs,
       name: "【多空消化区】",
-      color: "#e99883",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#D7E95D",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.qs,
       max: qxnlzhqData.tp,
       name: "【共识加速区】",
-      color: "#f0db84",
-      fontColor: 'white',
-      NumberColor: 'red',
+      color: "#A0F56F",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.tp,
       max: qxnlzhqData.js,
       name: "【情绪临界区】",
-      color: "#dbeee3",
-      fontColor: 'red',
-      NumberColor: 'red',
+      color: "#87F3CD",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
   ];
   // gg yl为-1  不绘制部分图表
@@ -133,9 +152,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         min: qxnlzhqData.js,
         max: qxnlzhqData.yl,
         name: "【杠杆失衡区】",
-        color: "#9ac2d8",
-        fontColor: 'red',
-        NumberColor: 'red',
+        color: "#51C3F9",
+        fontColor: '#666666',
+        NumberColor: 'white',
       },
     )
   }
@@ -145,13 +164,21 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         min: qxnlzhqData.yl,
         max: qxnlzhqData.gg,
         name: "【情绪熔断区】",
-        color: "#bce283",
-        fontColor: 'red',
-        NumberColor: 'red',
+        color: "#D0A7FF",
+        fontColor: '#666666',
+        NumberColor: 'white',
       },
     )
   }
 
+  // 计算动态的y轴范围
+  const priceValues = kline.flatMap(item => [item[1], item[2], item[3], item[4]]);
+  const dataMin = Math.min(...priceValues);
+  const dataMax = Math.max(...priceValues);
+  // 获取最后一根K线数据
+const lastKLine = mixData[mixData.length - 1];
+const lastHigh = lastKLine.value[2]; // 最高价
+const lastLow = lastKLine.value[3];  // 最低价
   // 计算止盈止损价格
   const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价
   const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价
@@ -257,7 +284,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           borderWidth: 1
         }
       },
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backgroundColor: '#646E71',
       borderColor: '#fff',
       borderWidth: 1,
       padding: 10,
@@ -299,9 +326,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
             result += `</div>`
           } else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #ff80ff; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #FF0000; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
           } else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #080bfd; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #001EFF; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
           }
         })
 
@@ -373,17 +400,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         qxnlzhqData.dd < stopLossPrice * 0.98
           ? Math.floor(qxnlzhqData.dd)
           : Math.floor(stopLossPrice * 0.98),
-      max:
-        qxnlzhqData.yl > stopProfitPrice * 1.02
-          ? Math.ceil(qxnlzhqData.yl)
-          : Math.ceil(stopProfitPrice * 1.02),
+      max: Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02),
     },
     // 自定义区域名称和区域范围值 位置
     graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98
       ? Math.floor(qxnlzhqData.dd)
-      : Math.floor(stopLossPrice * 0.98), qxnlzhqData.yl > stopProfitPrice * 1.02
-      ? Math.ceil(qxnlzhqData.yl)
-      : Math.ceil(stopProfitPrice * 1.02)),
+      : Math.floor(stopLossPrice * 0.98), Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02),),
     series: [
       {
         type: "candlestick",
@@ -399,10 +421,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         itemStyle: {
           normal: {
             // 阳线样式（收盘 > 开盘）
-            color: '#14b143',     // 开盘价 < 收盘价时为绿色
+            // color: '#14b143',     // 开盘价 < 收盘价时为绿色
+            color: 'rgba(0,0,0,0)',
             color0: '#ef232a',    // 开盘价 > 收盘价时为红色
             borderColor: '#14b143',   // 阳线边框色（绿）
             borderColor0: '#ef232a',  // 阴线边框色（红）
+            borderWidth: 1.5
           }
         },
         // 实现 分区域背景色
@@ -453,7 +477,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         symbol: 'none',
         lineStyle: {
           normal: {
-            color: '#ff80ff', // 蓝色
+            color: '#FF0000', // 蓝色
             width: 2,
             type: 'solid'
           }
@@ -470,15 +494,16 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
               label: {
                 normal: {
                   show: true,
-                  position: 'bottom',
-                  formatter: `{text|止盈: ${stopProfitPrice}}`,
+                  position: 'top',
+                  formatter: `{text|止盈}`,
                   rich: {
                     text: {
-                      color: '#820a06',
+                      color: '#FF0000',
                       fontSize: 14,
                       fontWeight: 'bold'
                     }
-                  }
+                  },
+                  offset: [-20, 0]
                 }
               }
             }
@@ -492,7 +517,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         symbol: 'none',
         lineStyle: {
           normal: {
-            color: '#080bfd', // 红色
+            color: '#001EFF',
             width: 2,
             type: 'solid'
           }
@@ -510,20 +535,101 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
                 normal: {
                   show: true,
                   position: 'bottom',
-                  formatter: `{text|止损: ${stopLossPrice}}`,
+                  formatter: `{text|止损}`,
                   rich: {
                     text: {
-                      color: '#080bfd',
+                      color: '#001EFF',
                       fontSize: 14,
                       fontWeight: 'bold'
                     }
+                  },
+                  offset: [-20, 0]
+                }
               }
             }
+          ]
+        }
+      },
+      {
+        name: '最低价',
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'transparent',
+            width: 0
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
+              itemStyle: {
+                color: 'transparent'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'top',
+                  formatter: `{text|${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
+                  rich: {
+                    text: {
+                      color: '#001EFF',
+                      fontSize: 12,
+                      fontWeight: 'bold',
+                      textBorderColor: '#ffffff',
+                textBorderWidth: 2,
+                    }
+                  },
+                  offset: [20, 10]
+                }
               }
             }
           ]
         }
       },
+      {
+        name: '最高价',
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'transparent',
+            width: 0
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
+              itemStyle: {
+                color: 'transparent'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'bottom',
+                  formatter: `{text|${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
+                  rich: {
+                    text: {
+                      color: '#FF0000',
+                      fontSize: 12,
+                      fontWeight: 'bold',
+                      textBorderColor: '#ffffff',
+                textBorderWidth: 2,
+                    }
+                  },
+                  offset: [20, -10]
+                }
+              }
+            }
+          ]
+        }
+      }
     ],
     grid: {
       left: "7%",

src/views/components/emotionDecod.vue

@@ -251,7 +251,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           shadowOffsetX: 2,
           shadowOffsetY: 2,
         },
-        bottom: "10%", // 下移数据缩放滑块
+        bottom: window.innerWidth > 768 ? "10%" : "5%", // 下移数据缩放滑块
       },
       {
         show: !1,
@@ -451,13 +451,14 @@ onBeforeUnmount(() => {
 .qxjmqbox {
   height: auto;
   width: 100%;
+  margin:0 auto;
 }
 
 #qxjmqEcharts {
   width: 100%;
   height: 800px;
   margin: 0;
-  top: 5rem;
+  /* top: 5rem; */
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -468,13 +469,12 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 400px;
     margin: 0;
-    top: 5rem;
+    /* top: 5rem; */
   }
 
   .qxjmqbox {
     height: auto;
-    width: 100%;
-    margin: 0;
+    width: 90%;
   }
 
 }

src/views/components/emotionalBottomRadar.vue

@@ -461,7 +461,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         start: 0,
         end: 100,
         show: true,
-        bottom: 10,
+        bottom: window.innerWidth > 768 ? 80 : 50,
         height: 20,
         borderColor: '#CFD6E3',
         fillerColor: 'rgba(135, 175, 274, 0.2)',
@@ -701,16 +701,15 @@ onBeforeUnmount(() => {
   height: 1040px;
   box-sizing: border-box;
   overflow: hidden;
-  margin: 0;
+  margin: 0px auto !important;
   padding: 0;
 }
 
 /* 手机端适配样式 */
 @media only screen and (max-width: 768px) {
   #bottomRadarChart {
-    width: 100%;
+    width: 90% !important;
     height: 560px;
-    margin: 0;
     padding: 0;
   }
 }

src/views/components/marketTemperature.vue

@@ -698,7 +698,7 @@ defineExpose({ initChart });
 }
 
 .market-temperature {
-  min-height: 100vh;
+  /* min-height: 100vh; */
   /* background-color: rgb(0, 22, 65); */
 }
 
@@ -707,13 +707,17 @@ defineExpose({ initChart });
   /* padding: 20px; */
   max-width: 80vw;
   padding-bottom: 10%;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
 }
 
 .border3 {
   margin-top: 40px;
   border-radius: 8px;
   padding: 20px;
-  margin-left: 0;
+  /* margin-left: 0; */
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -725,7 +729,7 @@ defineExpose({ initChart });
   border-radius: 8px;
   padding: 20px;
   width: 80%;
-  margin-left: 8%;
+  /* margin-left: 8%; */
   height: 48vw;
   overflow: visible;
 }
@@ -747,6 +751,11 @@ defineExpose({ initChart });
 
 /* 手机端适配样式 */
 @media only screen and (max-width: 768px) {
+
+  .container{
+    padding-bottom:16%
+  }
+
   .KlineClass {
     width: 100%;
     height: 300px;
@@ -786,8 +795,8 @@ defineExpose({ initChart });
   .border3 {
     margin-top: 25px;
     border-radius: 8px;
-    padding: 20px;
-    margin-left: -13px;
+    padding: 10px 0px;
+    /* margin-left: -13px; */
     width: 100%;
     height: 100%;
   }

src/views/homePage.vue

@@ -251,7 +251,7 @@ const tabContent = ref(null);
 const isScrolling = ref(false); //判断用户是否在滚动
 
 const smoothScrollToBottom = async () => {
-  console.log("调用滚动到底部的方法");
+  // console.log("调用滚动到底部的方法");
   // await nextTick();
   const container = tabContent.value;
   // console.log(container, 'container')