From 98899d1e0db2f58bf43a7a54b3d0678d14c535a0 Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Sat, 14 Jun 2025 16:21:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E7=8E=B0=E5=88=A0=E9=99=A4=EF=BC=8C?=
 =?UTF-8?q?=E9=A3=98=E5=B1=8F=E5=88=A0=E9=99=A4=EF=BC=8C=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9=EF=BC=8C=E7=A6=81?=
 =?UTF-8?q?=E6=AD=A2=E6=A8=AA=E5=B1=8F=E6=BB=9A=E5=8A=A8=EF=BC=8C=E9=87=91?=
 =?UTF-8?q?=E8=89=B2=E8=BD=AE=E7=9B=98=E6=A0=B7=E5=BC=8F=E9=80=82=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/AIchat.vue        |    2 +-
 src/views/AiEmotion.vue     | 1247 ++++++++++++++++++++++---------------------
 src/views/DBQBmodel.vue     |    4 +-
 src/views/Emotionsmodel.vue |    4 +-
 src/views/Selectmodel.vue   |    6 +-
 src/views/homePage.vue      |   30 +-
 6 files changed, 678 insertions(+), 615 deletions(-)

diff --git a/src/views/AIchat.vue b/src/views/AIchat.vue
index 5267a20..676d2fa 100644
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@@ -4566,7 +4566,7 @@ onUnmounted(() => {
     <div class="gif-area">
       <img :src="currentGif" alt="AI动画" />
 
-      <div class="marquee-container">
+      <div class="marquee-container" v-if="false">
         <div id="top" class="marquee-row top" @mouseenter="floatingTopMouseEnter" @mouseleave="floatingTopMouseLeave">
           <div v-for="(questions, index) in questionsList.slice(0, 5)" :key="'top' + index" class="marquee-item"
             @click="showQuestions(questions)">
diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index 5034b92..6a343ce 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -1,789 +1,842 @@
 <template>
-    <div class="ai-emotion-container">
-        <!-- 金轮 -->
-        <div class="golden-wheel">
-            <img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" :class="{ 'rotating-image': isRotating }">
+  <div class="ai-emotion-container" ref="userInputDisplayRef">
+    <!-- 金轮 -->
+    <div class="golden-wheel">
+      <img
+        src="@/assets/img/AiEmotion/金轮.png"
+        class="golden-wheel-img"
+        alt="金轮图标"
+        :class="{ 'rotating-image': isRotating }"
+      />
+    </div>
+    <!-- 消息显示区域 -->
+    <div class="user-input-display">
+      <div
+        v-for="(message, index) in messages"
+        :key="index"
+        class="message-container"
+      >
+        <!-- 用户输入内容 -->
+        <div
+          v-if="message.sender === 'user'"
+          class="message-bubble user-message"
+        >
+          {{ message.text }}
         </div>
-        <!-- 消息显示区域 -->
-        <div class="user-input-display" ref="userInputDisplayRef">
-            <div v-for="(message, index) in messages" :key="index" class="message-container">
-                <!-- 用户输入内容 -->
-                <div v-if="message.sender === 'user'" class="message-bubble user-message">
-                    {{ message.text }}
-                </div>
-                <!-- AI返回结果 -->
-                <div v-if="message.sender === 'ai'" class="message-bubble ai-message">
-                    {{ message.text }}
-                </div>
-            </div>
+        <!-- AI返回结果 -->
+        <div v-if="message.sender === 'ai'" class="message-bubble ai-message">
+          {{ message.text }}
         </div>
-        <!-- 输入框和发送按钮 -->
-        <!-- <footer class="input-container fixed-bottom">
+      </div>
+    </div>
+    <!-- 输入框和发送按钮 -->
+    <!-- <footer class="input-container fixed-bottom">
             <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
             <button @click="handleSendMessage(userInput)" class="send-button">发送</button>
         </footer> -->
-        <!-- <div class="input-container fixed-bottom">
+    <!-- <div class="input-container fixed-bottom">
             <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
             <button @click="sendMessage" class="send-button">发送</button>
         </div> -->
-    </div>
-
-
-    <!-- 渲染整个页面 -->
-    <div v-if="isPageLoaded" class="class01">
-        <div class="class00">
-            <!-- 四维矩阵图 -->
-            <div class="class02">
-                <div class="span01">
-                    {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
-                </div>
-                <span class="span02">{{ displayDate }}</span>
-            </div>
-            <div class="class0201">
-                <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
-            </div>
-            <!-- 温度计图表 -->
-            <div class="class03">
-                <div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
-                    <img src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标" style="float: left;padding-left: 5rem;">
-                    <div class="div00">
-                        <div class="div01">galg</div>
-                        <div class="div02">hkjkl</div>
-                    </div>
-                </div>
-                <marketTemperature ref="marketTemperatureRef" />
-            </div>
-        </div>
-            <div class="class0301">
-                <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
-            </div>
-        <!-- 情绪解码器图表 -->
-        <div class="class04">
-            <div class="class0401">
-                <img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
-            </div>
-            <div class="class0402">
-                <emotionDecod ref="emotionDecodRef"></emotionDecod>
-            </div>
-        </div>
-        <div class="class0403">
-            <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
-        </div>
-        <!-- 情绪探底雷达图表 -->
-        <div class="class05">
-            <div class="class0502">
-                <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
-            </div>
-            <div class="class0503">
-                <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
-            </div>
-        </div>
-        <div class="class0501">
-            <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
-        </div>
-        <!-- 情绪能量转化器图表 -->
-        <div class="class06">
-            <div class="class0601">
-                <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
-            </div>
-            <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
+  </div>
+
+  <!-- 渲染整个页面 -->
+  <div v-if="isPageLoaded" class="class01">
+    <div class="class00">
+      <!-- 四维矩阵图 -->
+      <div class="class02">
+        <div class="span01">
+          {{ stockName }}{{ stockName ? "量子四维矩阵图" : "" }}
         </div>
-        <!-- 核心看点 -->
-        <div class="class0702">
-            <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
+        <span class="span02">{{ displayDate }}</span>
+      </div>
+      <div class="class0201">
+        <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标" />
+      </div>
+      <!-- 温度计图表 -->
+      <div class="class03">
+        <div class="class003" style="padding-top: 7rem; padding-left: 12rem">
+          <img
+            src="@/assets/img/AiEmotion/温度计.png"
+            alt="温度计图标"
+            style="float: left; padding-left: 5rem"
+          />
+          <div class="div00">
+            <div class="div01">galg</div>
+            <div class="div02">hkjkl</div>
+          </div>
         </div>
-        <div class="bk-image">
-            <div class="text-container">
-                <p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
-                <p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p>
-                <p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p>
-                <p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p>
-            </div>
-        </div>
-        <!-- 核心逻辑 -->
-        <div class="class0700">
-            <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
-        </div>
-        <div class="class08">
-            <div class="lz-img">
-                <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
-            </div>
-            <div class="scaled-img">
-                <img src="@/assets/img/AiEmotion/tree02.png" alt="树图片">
-            </div>
-        </div>
-        <!-- 场景应用 -->
-        <div class="class09">
-            <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
-            <div class="bk-image">
-                <!-- <div class="text-container">
+        <marketTemperature ref="marketTemperatureRef" />
+      </div>
+    </div>
+    <div class="class0301">
+      <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标" />
+    </div>
+    <!-- 情绪解码器图表 -->
+    <div class="class04">
+      <div class="class0401">
+        <img
+          src="@/assets/img/AiEmotion/emotionDecod.png"
+          alt="情绪解码器图标"
+        />
+      </div>
+      <div class="class0402">
+        <emotionDecod ref="emotionDecodRef"></emotionDecod>
+      </div>
+    </div>
+    <div class="class0403">
+      <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标" />
+    </div>
+    <!-- 情绪探底雷达图表 -->
+    <div class="class05">
+      <div class="class0502">
+        <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表" />
+      </div>
+      <div class="class0503">
+        <emotionalBottomRadar
+          ref="emotionalBottomRadarRef"
+        ></emotionalBottomRadar>
+      </div>
+    </div>
+    <div class="class0501">
+      <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利" />
+    </div>
+    <!-- 情绪能量转化器图表 -->
+    <div class="class06">
+      <div class="class0601">
+        <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标" />
+      </div>
+      <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
+    </div>
+    <!-- 核心看点 -->
+    <div class="class0702">
+      <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样" />
+    </div>
+    <div class="bk-image">
+      <div class="text-container">
+        <p>
+          情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达
+        </p>
+        <p>
+          情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码
+        </p>
+        <p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p>
+        <p>
+          情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流
+        </p>
+      </div>
+    </div>
+    <!-- 核心逻辑 -->
+    <div class="class0700">
+      <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样" />
+    </div>
+    <div class="class08">
+      <div class="lz-img">
+        <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题" />
+      </div>
+      <div class="scaled-img">
+        <img src="@/assets/img/AiEmotion/tree02.png" alt="树图片" />
+      </div>
+    </div>
+    <!-- 场景应用 -->
+    <div class="class09">
+      <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题" />
+      <div class="bk-image">
+        <!-- <div class="text-container">
                     <p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
                     <p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p>
                     <p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p>
                     <p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p>
                 </div> -->
-            </div>
-        </div>
+      </div>
     </div>
-    <!-- <div v-else class="loading">
+  </div>
+  <!-- <div v-else class="loading">
         <p>数据加载中，请稍候...</p>
     </div> -->
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
-import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
-import axios from 'axios';
-import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
-import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
-import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
-import marketTemperature from '@/views/components/marketTemperature.vue';
-import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
-
-const stockName = ref(''); // 存储股票名称
+import { ref, reactive } from "vue";
+import { getReplyAPI } from "@/api/AiEmotionApi.js"; // 导入工作流接口方法
+import axios from "axios";
+import emotionDecod from "@/views/components/emotionDecod.vue"; // 导入情绪解码组件
+import emotionalBottomRadar from "@/views/components/emotionalBottomRadar.vue"; // 导入情绪探底雷达图组件
+import emoEnergyConverter from "@/views/components/emoEnergyConverter.vue"; // 导入情绪能量转化器组件
+import marketTemperature from "@/views/components/marketTemperature.vue";
+import blueBorderImg from "@/assets/img/AiEmotion/blueBorder.png"; //导入蓝色背景框图片
+
+const stockName = ref(""); // 存储股票名称
 const marketTemperatureRef = ref(null); // 引用市场温度计组件
-const emoEnergyConverterRef = ref(null)
-const emotionDecodRef = ref(null)
-const emotionalBottomRadarRef = ref(null)
-const userInput = ref('');
+const emoEnergyConverterRef = ref(null);
+const emotionDecodRef = ref(null);
+const emotionalBottomRadarRef = ref(null);
+const userInput = ref("");
 const messages = ref([]);
-const displayDate = ref(''); // 用于存储显示的日期
+const displayDate = ref(""); // 用于存储显示的日期
 const isPageLoaded = ref(false); // 控制页面是否显示
-const isRotating = ref(false);//控制旋转
-const userInputDisplayRef = ref(null);//消息区域的引用
+const isRotating = ref(false); //控制旋转
+const userInputDisplayRef = ref(null); //消息区域的引用
 
 //导出方法供外部使用
-defineExpose({handleSendMessage})
+defineExpose({ handleSendMessage });
 
 // 从本地存储中加载对话历史的方法
 const loadMessagesFromLocalStorage = () => {
-    const storedMessages = localStorage.getItem('chatMessages');
-    if (storedMessages) {
-        messages.value = JSON.parse(storedMessages);
-    }
+  const storedMessages = localStorage.getItem("chatMessages");
+  if (storedMessages) {
+    messages.value = JSON.parse(storedMessages);
+  }
 };
 
 // 将对话历史保存到本地存储的方法
 const saveMessagesToLocalStorage = () => {
-    localStorage.setItem('chatMessages', JSON.stringify(messages.value));
+  localStorage.setItem("chatMessages", JSON.stringify(messages.value));
 };
 
 // 触发图片旋转的方法
 function startImageRotation() {
-    isRotating.value = true;
-    // 如果你想在一段时间后停止旋转，可以添加以下代码
-    setTimeout(() => {
-        isRotating.value = false;
-    }, 5000); // 5 秒后停止旋转
+  isRotating.value = true;
+  // 如果你想在一段时间后停止旋转，可以添加以下代码
+  setTimeout(() => {
+    isRotating.value = false;
+  }, 5000); // 5 秒后停止旋转
 }
 // 更新 span01 中股票名字的方法
 function updateSpan01() {
-    nextTick(() => {
-        const span01 = document.querySelector('.span01');
-        if (span01) {
-            span01.textContent = `${stockName.value}量子四维矩阵图`;
-        }
-    });
+  nextTick(() => {
+    const span01 = document.querySelector(".span01");
+    if (span01) {
+      span01.textContent = `${stockName.value}量子四维矩阵图`;
+    }
+  });
 }
 
-
 // 发送消息方法
 async function handleSendMessage(input) {
-    console.log('发送内容:', input);
-
-    // 检查用户输入内容是否为空
-    if (input.trim()) {
-        const userMessage = reactive({ sender: 'user', text: input });
-        messages.value.push(userMessage);
-        userInput.value = ''; // 清空输入框
+  console.log("发送内容:", input);
+
+  // 检查用户输入内容是否为空
+  if (input.trim()) {
+    const userMessage = reactive({ sender: "user", text: input });
+    messages.value.push(userMessage);
+    userInput.value = ""; // 清空输入框
+
+    // 添加等待提示信息
+    messages.value.push({
+      sender: "ai",
+      text: "数据加载中，请稍候...",
+    });
 
-        // 添加等待提示信息
-        messages.value.push({
-            sender: 'ai',
-            text: '数据加载中，请稍候...'
-        });
+    // 滚动到最新消息
+    nextTick(() => {
+      if (userInputDisplayRef.value) {
+        userInputDisplayRef.value.scrollTop =
+          userInputDisplayRef.value.scrollHeight;
+      }
+    });
 
-        // 滚动到最新消息
-        nextTick(() => {
-            if (userInputDisplayRef.value) {
-                userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
-            }
-        });
+    // 触发图片旋转
+    isRotating.value = true;
 
-        // 触发图片旋转
-        isRotating.value = true;
-
-        try {
-            // 用来调用工作流接口的参数
-            const params = {
-                content: userMessage.text,
-                userData: {
-                    token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-                    language: 'cn',
-                    brainPrivilegeState: '1',
-                    swordPrivilegeState: '1',
-                    stockForecastPrivile: '1',
-                    spaceForecastPrivile: '1',
-                    aibullPrivilegeState: '1',
-                    aigoldBullPrivilegeS: '1',
-                    airadarPrivilegeStat: '1',
-                    marketList: 'hk,cn,usa,my,sg,vi,in,gb',
-                },
-            };
-
-            const result = await getReplyAPI(params);
-            const response = await result.json(); // 解析返回的 JSON 数据
-            console.log('工作流接口返回数据:', response);
-
-            // 解析 data 字段
-            const parsedData = JSON.parse(response.data); // 将字符串形式的 JSON 转换为对象
-            console.log('解析后的数据:', parsedData);
-
-            if (parsedData && parsedData.market && parsedData.code) {
-                console.log('工作流接口返回股票信息:', parsedData);
-
-                // 更新股票名称
-                stockName.value = parsedData.name || '未知股票';
-                // 请求数据接口
-                fetchData(parsedData.code, parsedData.market);
-
-                // 更新 span01 的内容
-                updateSpan01();
-            } else {
-                console.error('工作流接口返回非股票信息:', parsedData.refuse);
-                messages.value.push({
-                    sender: 'ai',
-                    text: `工作流接口返回信息: ${parsedData.refuse || '未知错误'}`,
-                });
-            }
-        } catch (error) {
-            console.error('请求工作流接口失败:', error);
-            messages.value.push({
-                sender: 'ai',
-                text: '工作流接口请求失败，请稍后再试。',
-            });
-        } finally {
-            // 停止图片旋转
-            isRotating.value = false;
-
-            // 保存对话历史到本地存储
-            saveMessagesToLocalStorage();
-        }
-    } else {
+    try {
+      // 用来调用工作流接口的参数
+      const params = {
+        content: userMessage.text,
+        userData: {
+          token:
+            "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
+          language: "cn",
+          brainPrivilegeState: "1",
+          swordPrivilegeState: "1",
+          stockForecastPrivile: "1",
+          spaceForecastPrivile: "1",
+          aibullPrivilegeState: "1",
+          aigoldBullPrivilegeS: "1",
+          airadarPrivilegeStat: "1",
+          marketList: "hk,cn,usa,my,sg,vi,in,gb",
+        },
+      };
+
+      const result = await getReplyAPI(params);
+      const response = await result.json(); // 解析返回的 JSON 数据
+      console.log("工作流接口返回数据:", response);
+
+      // 解析 data 字段
+      const parsedData = JSON.parse(response.data); // 将字符串形式的 JSON 转换为对象
+      console.log("解析后的数据:", parsedData);
+
+      if (parsedData && parsedData.market && parsedData.code) {
+        console.log("工作流接口返回股票信息:", parsedData);
+
+        // 更新股票名称
+        stockName.value = parsedData.name || "未知股票";
+        // 请求数据接口
+        fetchData(parsedData.code, parsedData.market);
+
+        // 更新 span01 的内容
+        updateSpan01();
+      } else {
+        console.error("工作流接口返回非股票信息:", parsedData.refuse);
         messages.value.push({
-            sender: 'ai',
-            text: '请输入内容后再发送。',
-        });
-
-        // 滚动到最新消息
-        nextTick(() => {
-            if (userInputDisplayRef.value) {
-                userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
-            }
+          sender: "ai",
+          text: `工作流接口返回信息: ${parsedData.refuse || "未知错误"}`,
         });
+      }
+    } catch (error) {
+      console.error("请求工作流接口失败:", error);
+      messages.value.push({
+        sender: "ai",
+        text: "工作流接口请求失败，请稍后再试。",
+      });
+    } finally {
+      // 停止图片旋转
+      isRotating.value = false;
+
+      // 保存对话历史到本地存储
+      saveMessagesToLocalStorage();
     }
+  } else {
+    messages.value.push({
+      sender: "ai",
+      text: "请输入内容后再发送。",
+    });
+
+    // 滚动到最新消息
+    nextTick(() => {
+      if (userInputDisplayRef.value) {
+        userInputDisplayRef.value.scrollTop =
+          userInputDisplayRef.value.scrollHeight;
+      }
+    });
+  }
 }
 const version1 = ref(2); // 版本号
 // 请求数据接口
 async function fetchData(code, market) {
-    try {
-        const stockDataParams = {
-            // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
-            token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-            market: 'usa',
-            code: 'TSLA',
-            language: 'cn',
-            version: version1.value
-        };
-
-        const stockDataResult = await axios.post(
-            'http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData',
-            // 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
-            stockDataParams,
-            {
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-            }
-        );
-
-        const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
-        console.log('图表数据接口返回数据:', stockDataResponse.data);
-
-
-        if (stockDataResponse.code === 200 && stockDataResponse.data) {
-            messages.value.push({
-                sender: 'ai',
-                text: `股票数据已成功获取`,
-            });
-
-            // 滚动到最新消息
-            nextTick(() => {
-                if (userInputDisplayRef.value) {
-                    userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
-                }
-            });
-            console.log('1111111111111111111111')
-            // 调用渲染图表的方法
-            renderCharts(stockDataResponse.data);
-            console.log('2222222222222222222222')
-            // 设置当天日期
-            const today = new Date();
-            const year = today.getFullYear();
-            const month = String(today.getMonth() + 1).padStart(2, '0');
-            const day = String(today.getDate()).padStart(2, '0');
-            displayDate.value = `${year}/${month}/${day}`;
-
-            // 数据和图表加载完成，显示页面
-            isPageLoaded.value = true;
-        } else {
-            messages.value.push({
-                sender: 'ai',
-                text: '图表数据接口返回数据不完整，请稍后再试。',
-            });
-            // 滚动到最新消息
-            nextTick(() => {
-                if (userInputDisplayRef.value) {
-                    userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
-                }
-            });
+  try {
+    const stockDataParams = {
+      // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
+      token:
+        "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
+      market: "usa",
+      code: "TSLA",
+      language: "cn",
+      version: version1.value,
+    };
+
+    const stockDataResult = await axios.post(
+      "http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData",
+      // 'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
+      stockDataParams,
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    );
+
+    const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
+    console.log("图表数据接口返回数据:", stockDataResponse.data);
+
+    if (stockDataResponse.code === 200 && stockDataResponse.data) {
+      messages.value.push({
+        sender: "ai",
+        text: `股票数据已成功获取`,
+      });
+
+      // 滚动到最新消息
+      nextTick(() => {
+        if (userInputDisplayRef.value) {
+          userInputDisplayRef.value.scrollTop =
+            userInputDisplayRef.value.scrollHeight;
         }
-    } catch (error) {
-        messages.value.push({
-            sender: 'ai',
-            text: '图表数据接口请求失败，请稍后再试。',
-        });
+      });
+      console.log("1111111111111111111111");
+      // 调用渲染图表的方法
+      renderCharts(stockDataResponse.data);
+      console.log("2222222222222222222222");
+      // 设置当天日期
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = String(today.getMonth() + 1).padStart(2, "0");
+      const day = String(today.getDate()).padStart(2, "0");
+      displayDate.value = `${year}/${month}/${day}`;
+
+      // 数据和图表加载完成，显示页面
+      isPageLoaded.value = true;
+    } else {
+      messages.value.push({
+        sender: "ai",
+        text: "图表数据接口返回数据不完整，请稍后再试。",
+      });
+      // 滚动到最新消息
+      nextTick(() => {
+        if (userInputDisplayRef.value) {
+          userInputDisplayRef.value.scrollTop =
+            userInputDisplayRef.value.scrollHeight;
+        }
+      });
     }
+  } catch (error) {
+    messages.value.push({
+      sender: "ai",
+      text: "图表数据接口请求失败，请稍后再试。",
+    });
+  }
 }
 
 // 渲染组件图表的方法
 function renderCharts(data) {
-    nextTick(() => {
-        // 渲染股市温度计图表
-        if (marketTemperatureRef.value && data.GSWDJ) {
-            console.log('开始渲染股市温度计图表');
-            console.log('股市温度计数据', data.GSWDJ)
-            marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
-            console.log('股市温度计图表已渲染');
-        }
-        // 渲染情绪解码器图表
-        if (emotionDecodRef.value && data.QXJMQ) {
-            console.log('开始渲染情绪解码器图表');
-            console.log('情绪解码器数据', data.QXJMQ)
-            emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
-            console.log('情绪解码器图表已渲染');
-        }
-        // 渲染情绪探底雷达图表
-        if (emotionalBottomRadarRef.value && data.QXTDLD) {
-            console.log('开始渲染情绪探底雷达图表');
-            console.log('数据', data.QXTDLD)
-            emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
-            console.log('情绪探底雷达图表已渲染');
-        }
-        // 渲染情绪能量转化器图表
-        if (emoEnergyConverterRef.value && data.QXNLZHQ) {
-            console.log('开始渲染情绪能量转化器图表');
-            console.log('KLine20:', data.KLine20);
-            console.log('QXNLZHQ:', data.QXNLZHQ);
-            emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
-            console.log('情绪能量转化器图表已渲染');
-        }
-
-    });
+  nextTick(() => {
+    // 渲染股市温度计图表
+    if (marketTemperatureRef.value && data.GSWDJ) {
+      console.log("开始渲染股市温度计图表");
+      console.log("股市温度计数据", data.GSWDJ);
+      marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
+      console.log("股市温度计图表已渲染");
+    }
+    // 渲染情绪解码器图表
+    if (emotionDecodRef.value && data.QXJMQ) {
+      console.log("开始渲染情绪解码器图表");
+      console.log("情绪解码器数据", data.QXJMQ);
+      emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
+      console.log("情绪解码器图表已渲染");
+    }
+    // 渲染情绪探底雷达图表
+    if (emotionalBottomRadarRef.value && data.QXTDLD) {
+      console.log("开始渲染情绪探底雷达图表");
+      console.log("数据", data.QXTDLD);
+      emotionalBottomRadarRef.value.initEmotionalBottomRadar(
+        data.KLine20,
+        data.QXTDLD
+      );
+      console.log("情绪探底雷达图表已渲染");
+    }
+    // 渲染情绪能量转化器图表
+    if (emoEnergyConverterRef.value && data.QXNLZHQ) {
+      console.log("开始渲染情绪能量转化器图表");
+      console.log("KLine20:", data.KLine20);
+      console.log("QXNLZHQ:", data.QXNLZHQ);
+      emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
+      console.log("情绪能量转化器图表已渲染");
+    }
+  });
 }
 
+const scrollToBottom = async () => {
+  const container = userInputDisplayRef.value;
+  if (!container) return;
+  await nextTick();
+  console.log(container.scrollHeight, "container.scrollHeight");
+  console.log(container.scrollTop, "container.scrollTop");
+  console.log(container.offsetHeight, "container.offsetHeight");
+  container.scrollTop = container.scrollHeight - container.offsetHeight;
+};
+
+// setInterval(() =>{
+//     scrollToBottom();
+// },1000);
+
 // 页面挂载完成后触发图片旋转
 onMounted(() => {
-    startImageRotation();
-    loadMessagesFromLocalStorage();//加载历史对话
+  startImageRotation();
+  loadMessagesFromLocalStorage(); //加载历史对话
 });
-
 </script>
 
 <style scoped>
-
-.class003 .div02{
-    background-image: url('@/assets/img/AiEmotion/redBorder.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 35%;
-    min-height: 40px;
-    float: left;
-    margin-left: 100px;
-    margin-top: 30px;
-    text-align: center;
-    font-size: 24px;
-    color: white;
-}
-.class003 .div01{
-    background-image: url('@/assets/img/AiEmotion/blueBorder.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    width: 35%;
-    min-height: 40px;
-    float: left;
-    margin-left: 100px;
-    text-align: center;
-    margin-top: 10px;
-    font-size: 24px;
-    color: white;
+.class003 .div02 {
+  background-image: url("@/assets/img/AiEmotion/redBorder.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 35%;
+  min-height: 40px;
+  float: left;
+  margin-left: 100px;
+  margin-top: 30px;
+  text-align: center;
+  font-size: 24px;
+  color: white;
+}
+.class003 .div01 {
+  background-image: url("@/assets/img/AiEmotion/blueBorder.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 35%;
+  min-height: 40px;
+  float: left;
+  margin-left: 100px;
+  text-align: center;
+  margin-top: 10px;
+  font-size: 24px;
+  color: white;
+}
+
+.golden-wheel {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.golden-wheel-img {
+  width: 60%;
+  max-width: 500px;
+  height: auto;
 }
 /* 定义旋转动画 */
 @keyframes rotate {
-    from {
-        transform: rotate(0deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
 
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 /* 应用动画到图片 */
 .rotating-image {
-    animation: rotate 5s linear;
-    /* 5 秒完成一次旋转，线性速度*/
+  animation: rotate 5s linear;
+  /* 5 秒完成一次旋转，线性速度*/
 }
 
 .bk-image {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    background-size: 100% 100%;
-    /* background-position: center; */
-    background-repeat: no-repeat;
-    width: 95%;
-    height: 30rem;
-    margin: 0 auto;
-    margin-top: 20px;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  background-size: 100% 100%;
+  /* background-position: center; */
+  background-repeat: no-repeat;
+  width: 95%;
+  height: 30rem;
+  margin: 0 auto;
+  margin-top: 20px;
 }
 
 /* 最后文字的颜色 */
 .text-container {
-    position: relative;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    color: white;
-    /* 设置文字颜色 */
-    text-align: left;
-    /* 文字居中对齐 */
-    padding: 20px;
+  position: relative;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  /* 设置文字颜色 */
+  text-align: left;
+  /* 文字居中对齐 */
+  padding: 20px;
 }
 
 .text-container p {
-    margin: 10px 0;
-    /* 设置段落间距 */
-    font-size: 40px;
-    /* 设置字体大小 */
-    margin-left: 50px;
+  margin: 10px 0;
+  /* 设置段落间距 */
+  font-size: 40px;
+  /* 设置字体大小 */
+  margin-left: 50px;
 }
 
 .class07 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    /* 使用导入的背景图片 */
-    background-size: cover;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 70rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* 使用导入的背景图片 */
+  background-size: cover;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 70rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
 }
 
 .class0700 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0702 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0503 {
-    width: 80%;
-    margin: 0 auto;
-
+  width: 80%;
+  margin: 0 auto;
 }
 
 .class0402 {
-    width: 80%;
-    margin: 0 auto;
+  width: 80%;
+  margin: 0 auto;
 }
 
 .class0601 {
-    padding-top: 10rem;
-    text-align: center;
+  padding-top: 10rem;
+  text-align: center;
 }
 
 .class0502 {
-    padding-top: 5rem;
-    text-align: center;
-    padding-bottom: 6rem;
+  padding-top: 5rem;
+  text-align: center;
+  padding-bottom: 6rem;
 }
 
 .class0701 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0501 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0403 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0301 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0201 {
-    margin: 0 auto;
-    width: fit-content;
+  margin: 0 auto;
+  width: fit-content;
 }
 
 .class0401 {
-    padding-top: 5rem;
-    text-align: center;
+  padding-top: 5rem;
+  text-align: center;
 }
 
 .class09 {
-    text-align: center;
+  text-align: center;
 }
 
 /* 为需要放大的图片添加样式 */
 .scaled-img {
-    transform: scale(2.5);
-    text-align: center;
+  transform: scale(2.5);
+  text-align: center;
 }
 
 .lz-img {
-    margin-bottom: 10rem;
-    text-align: center;
-    padding-top: 70px;
+  margin-bottom: 10rem;
+  text-align: center;
+  padding-top: 70px;
 }
 
 .class08 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    background-size: 100% 100%;
-    background-repeat: no-repeat;
-    width: 95%;
-    height: auto;
-    min-height: 40rem;
-    margin: 0 auto;
-
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 95%;
+  height: auto;
+  min-height: 40rem;
+  margin: 0 auto;
 }
 
 .class06 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    /* 使用导入的背景图片 */
-    background-size: 100% 100%;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 70rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* 使用导入的背景图片 */
+  background-size: 100% 100%;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 70rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
 }
 
 .class05 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    /* 使用导入的背景图片 */
-    background-size: 100% 100%;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 70rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* 使用导入的背景图片 */
+  background-size: 100% 100%;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 70rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
 }
 
 .class04 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    /* 使用导入的背景图片 */
-    background-size: 100% 100%;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 55rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* 使用导入的背景图片 */
+  background-size: 100% 100%;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 55rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
 }
 
 .class03 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
-    /* 使用导入的背景图片 */
-    background-size: 100% 100%;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 70rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
-}
-.class00{
-    background-size: 100% 100%;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 55rem;
-    /* 设置最小高度，确保图片显示 */
-    margin: 0 auto;
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
+  /* 使用导入的背景图片 */
+  background-size: 100% 100%;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 70rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
+}
+.class00 {
+  background-size: 100% 100%;
+  /* 确保背景图片完整显示 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  width: 95%;
+  /* 设置容器宽度 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  min-height: 55rem;
+  /* 设置最小高度，确保图片显示 */
+  margin: 0 auto;
 }
 
 .span02 {
-    font-size: 1.5rem;
-    color: white;
-    float: right;
+  font-size: 1.5rem;
+  color: white;
+  float: right;
 }
 
 .span01 {
-    background-image: url('@/assets/img/AiEmotion/bk01.png');
-    /* 使用导入的背景图片 */
-    background-size: cover;
-    /* 背景图片覆盖整个容器 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    display: inline-block;
-    /* 确保容器是块级元素 */
-    padding: 10px;
-    /* 添加内边距以显示内容 */
-    color: #fff;
-    /* 设置文字颜色以确保可读性 */
-    border-radius: 5px;
-    /* 添加圆角 */
-    min-height: 3rem;
-    min-width: 30rem;
-    font-size: 1.5rem;
-    /* 增加字体大小以便更清晰显示股票名称 */
-    text-align: center;
-    /* 文字居中 */
+  background-image: url("@/assets/img/AiEmotion/bk01.png");
+  /* 使用导入的背景图片 */
+  background-size: cover;
+  /* 背景图片覆盖整个容器 */
+  background-repeat: no-repeat;
+  /* 防止背景图片重复 */
+  display: inline-block;
+  /* 确保容器是块级元素 */
+  padding: 10px;
+  /* 添加内边距以显示内容 */
+  color: #fff;
+  /* 设置文字颜色以确保可读性 */
+  border-radius: 5px;
+  /* 添加圆角 */
+  min-height: 3rem;
+  min-width: 30rem;
+  font-size: 1.5rem;
+  /* 增加字体大小以便更清晰显示股票名称 */
+  text-align: center;
+  /* 文字居中 */
 }
 
 .class01 {
-    width: 90%;
-    /* 固定容器宽度 */
-    min-height: 100px;
-    /* 设置最小高度，确保初始显示 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    padding: 40px;
-    /* 添加内边距，确保内容与边界有间距 */
-    box-sizing: border-box;
-    /* 包括内边距在宽度和高度计算中 */
-    background-color: #5e81a7;
-    margin: 0 auto;
-    /* 居中容器 */
-    margin-bottom: 10rem;
-
+  width: 90%;
+  /* 固定容器宽度 */
+  min-height: 100px;
+  /* 设置最小高度，确保初始显示 */
+  height: auto;
+  /* 高度根据内容动态变化 */
+  padding: 40px;
+  /* 添加内边距，确保内容与边界有间距 */
+  box-sizing: border-box;
+  /* 包括内边距在宽度和高度计算中 */
+  background-color: #5e81a7;
+  margin: 0 auto;
+  /* 居中容器 */
+  margin-bottom: 10rem;
 }
 
 .ai-emotion-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  position: relative;
 }
 
 .user-input-display {
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
 }
 
 .message-container {
-    display: flex;
-    margin-bottom: 10px;
+  display: flex;
+  margin-bottom: 10px;
 }
 
 .user-message {
-    background-color: #007bff;
-    color: #fff;
-    padding: 10px 15px;
-    border-radius: 15px;
-    max-width: 60%;
-    text-align: left;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    align-self: flex-end;
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 15px;
+  border-radius: 15px;
+  max-width: 60%;
+  text-align: left;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  align-self: flex-end;
 }
 
 .ai-message {
-    background-color: #f1f1f1;
-    color: #333;
-    padding: 10px 15px;
-    border-radius: 15px;
-    max-width: 60%;
-    text-align: left;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    align-self: flex-start;
+  background-color: #f1f1f1;
+  color: #333;
+  padding: 10px 15px;
+  border-radius: 15px;
+  max-width: 60%;
+  text-align: left;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  align-self: flex-start;
 }
 
 .input-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .fixed-bottom {
-    position: fixed;
-    bottom: 100px;
-    left: 0;
-    width: 100%;
-    background-color: #f8f9fa;
-    padding: 10px 20px;
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  bottom: 100px;
+  left: 0;
+  width: 100%;
+  background-color: #f8f9fa;
+  padding: 10px 20px;
+  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
 }
 
 .input-box {
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    width: calc(100% - 120px);
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: calc(100% - 120px);
 }
 
 .send-button {
-    padding: 10px 20px;
-    font-size: 16px;
-    color: #fff;
-    background-color: #007bff;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
+  padding: 10px 20px;
+  font-size: 16px;
+  color: #fff;
+  background-color: #007bff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
 }
 
 .send-button:hover {
-    background-color: #0056b3;
+  background-color: #0056b3;
 }
 </style>
diff --git a/src/views/DBQBmodel.vue b/src/views/DBQBmodel.vue
index dc52241..0c850c7 100644
--- a/src/views/DBQBmodel.vue
+++ b/src/views/DBQBmodel.vue
@@ -50,8 +50,8 @@ const goToHomePage = () => {
 
 <style scoped>
 .homepage {
-  width: 100vw;
-  min-height: 100vh;
+  /* width: 100vw; */
+  /* min-height: 100vh; */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/src/views/Emotionsmodel.vue b/src/views/Emotionsmodel.vue
index 03c46aa..9285bd0 100644
--- a/src/views/Emotionsmodel.vue
+++ b/src/views/Emotionsmodel.vue
@@ -51,8 +51,8 @@ const goToAiEmotion = () => {
 
 <style scoped>
 .homepage {
-  width: 100vw;
-  min-height: 100vh;
+  /* width: 100vw; */
+  /* min-height: 100vh; */
   background-image: url('@/assets/img/Emotionsmodel/-s-bg.png');
   background-size: cover;
   background-position: center;
diff --git a/src/views/Selectmodel.vue b/src/views/Selectmodel.vue
index 064e9bb..699361c 100644
--- a/src/views/Selectmodel.vue
+++ b/src/views/Selectmodel.vue
@@ -52,14 +52,14 @@ const goToEmotionsmodel = () => {
 
 <style scoped>
 .homepage {
-  width: 100vw;
-  min-height: 100vh;
+  /* width: 100vw; */
+  /* min-height: 100vh; */
   background-color: #000cfc;
   background-image: url('@/assets/img/Selectmodel/-s-bg.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-
+  overflow-x: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 72d5c49..581e83a 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -55,10 +55,10 @@ const tabs = computed(() => [
     name: "AIchat",
     label: "夺宝奇兵大模型",
   },
-  {
-    name: "AIfind",
-    label: "发现",
-  },
+  // {
+  //   name: "AIfind",
+  //   label: "发现",
+  // },
   {
     name: "AiEmotion",
     label: "AI情绪大模型"
@@ -214,7 +214,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')
@@ -623,9 +623,12 @@ onMounted(async () => {
 .tab-container {
   display: flex;
   gap: 30px;
+  margin-right: 40px;
+  margin-left: 40px;
   margin-bottom: 10px;
   padding: 0 20px;
-  justify-content: flex-end;
+  justify-content: space-between;
+  height: 100%;
   /* 新增右对齐 */
 }
 
@@ -633,19 +636,26 @@ onMounted(async () => {
   cursor: pointer;
   padding: 8px 12px;
   font-size: clamp(18px, 3vw, 20px);
-  color: #999;
+  /* color: #999; */
+  color: #fff;
   transition: all 0.3s;
   border-bottom: 2px solid transparent;
   font-weight: bold;
 }
 
 .tab-item.active {
-  color: #000;
-  border-color: #000;
+  /* color: #000;
+  border-color: #000; */
+  background: linear-gradient(0deg,  #ffffff, #fec13e);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  border-color: #fec13e;
 }
 
 .tab-item:not(.active):hover {
-  color: #666;
+  color: #999999;
 }
 
 .tab-content {