发现删除，飘屏删除，标签页样式修改，禁止横屏滚动，金色轮盘样式适配

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)">

src/views/AiEmotion.vue

@@ -1,14 +1,26 @@
 <template>
-    <div class="ai-emotion-container">
+  <div class="ai-emotion-container" ref="userInputDisplayRef">
     <!-- 金轮 -->
     <div class="golden-wheel">
-            <img src="@/assets/img/AiEmotion/金轮.png" alt="金轮图标" :class="{ 'rotating-image': isRotating }">
+      <img
+        src="@/assets/img/AiEmotion/金轮.png"
+        class="golden-wheel-img"
+        alt="金轮图标"
+        :class="{ 'rotating-image': isRotating }"
+      />
     </div>
     <!-- 消息显示区域 -->
-        <div class="user-input-display" ref="userInputDisplayRef">
-            <div v-for="(message, index) in messages" :key="index" class="message-container">
+    <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">
+        <div
+          v-if="message.sender === 'user'"
+          class="message-bubble user-message"
+        >
           {{ message.text }}
         </div>
         <!-- AI返回结果 -->
@@ -28,24 +40,27 @@
         </div> -->
   </div>
 
-
   <!-- 渲染整个页面 -->
   <div v-if="isPageLoaded" class="class01">
     <div class="class00">
       <!-- 四维矩阵图 -->
       <div class="class02">
         <div class="span01">
-                    {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
+          {{ stockName }}{{ stockName ? "量子四维矩阵图" : "" }}
         </div>
         <span class="span02">{{ displayDate }}</span>
       </div>
       <div class="class0201">
-                <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
+        <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="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>
@@ -55,66 +70,77 @@
       </div>
     </div>
     <div class="class0301">
-                <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
+      <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标" />
     </div>
     <!-- 情绪解码器图表 -->
     <div class="class04">
       <div class="class0401">
-                <img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
+        <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="情绪推演图标">
+      <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标" />
     </div>
     <!-- 情绪探底雷达图表 -->
     <div class="class05">
       <div class="class0502">
-                <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
+        <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表" />
       </div>
       <div class="class0503">
-                <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
+        <emotionalBottomRadar
+          ref="emotionalBottomRadarRef"
+        ></emotionalBottomRadar>
       </div>
     </div>
     <div class="class0501">
-            <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
+      <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利" />
     </div>
     <!-- 情绪能量转化器图表 -->
     <div class="class06">
       <div class="class0601">
-                <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
+        <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标" />
       </div>
       <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
     </div>
     <!-- 核心看点 -->
     <div class="class0702">
-            <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
+      <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样" />
     </div>
     <div class="bk-image">
       <div class="text-container">
-                <p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
-                <p>情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码</p>
+        <p>
+          情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达
+        </p>
+        <p>
+          情绪解码-主力思维的【神经破译矩阵】核心任务:解构资金行为的量子密码
+        </p>
         <p>情绪推演-未来战争的【时空推演舱】核心任务:情绪推演</p>
-                <p>情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流</p>
+        <p>
+          情绪套利-财富裂变的【粒子对撞机】核心任务:将情绪差转化为a收益粒子流
+        </p>
       </div>
     </div>
     <!-- 核心逻辑 -->
     <div class="class0700">
-            <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
+      <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样" />
     </div>
     <div class="class08">
       <div class="lz-img">
-                <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
+        <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题" />
       </div>
       <div class="scaled-img">
-                <img src="@/assets/img/AiEmotion/tree02.png" alt="树图片">
+        <img src="@/assets/img/AiEmotion/tree02.png" alt="树图片" />
       </div>
     </div>
     <!-- 场景应用 -->
     <div class="class09">
-            <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
+      <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题" />
       <div class="bk-image">
         <!-- <div class="text-container">
                     <p>情绪监控-金融宇宙的【量子检测网络】核心任务:构建全市场情绪引力场雷达</p>
@@ -131,33 +157,33 @@
 </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); //消息区域的引用
 
 //导出方法供外部使用
-defineExpose({handleSendMessage})
+defineExpose({ handleSendMessage });
 
 // 从本地存储中加载对话历史的方法
 const loadMessagesFromLocalStorage = () => {
-    const storedMessages = localStorage.getItem('chatMessages');
+  const storedMessages = localStorage.getItem("chatMessages");
   if (storedMessages) {
     messages.value = JSON.parse(storedMessages);
   }
@@ -165,7 +191,7 @@ const loadMessagesFromLocalStorage = () => {
 
 // 将对话历史保存到本地存储的方法
 const saveMessagesToLocalStorage = () => {
-    localStorage.setItem('chatMessages', JSON.stringify(messages.value));
+  localStorage.setItem("chatMessages", JSON.stringify(messages.value));
 };
 
 // 触发图片旋转的方法
@@ -179,34 +205,34 @@ function startImageRotation() {
 // 更新 span01 中股票名字的方法
 function updateSpan01() {
   nextTick(() => {
-        const span01 = document.querySelector('.span01');
+    const span01 = document.querySelector(".span01");
     if (span01) {
       span01.textContent = `${stockName.value}量子四维矩阵图`;
     }
   });
 }
 
-
 // 发送消息方法
 async function handleSendMessage(input) {
-    console.log('发送内容:', input);
+  console.log("发送内容:", input);
 
   // 检查用户输入内容是否为空
   if (input.trim()) {
-        const userMessage = reactive({ sender: 'user', text: input });
+    const userMessage = reactive({ sender: "user", text: input });
     messages.value.push(userMessage);
-        userInput.value = ''; // 清空输入框
+    userInput.value = ""; // 清空输入框
 
     // 添加等待提示信息
     messages.value.push({
-            sender: 'ai',
-            text: '数据加载中，请稍候...'
+      sender: "ai",
+      text: "数据加载中，请稍候...",
     });
 
     // 滚动到最新消息
     nextTick(() => {
       if (userInputDisplayRef.value) {
-                userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
+        userInputDisplayRef.value.scrollTop =
+          userInputDisplayRef.value.scrollHeight;
       }
     });
 
@@ -218,49 +244,50 @@ async function handleSendMessage(input) {
       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',
+          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);
+      console.log("工作流接口返回数据:", response);
 
       // 解析 data 字段
       const parsedData = JSON.parse(response.data); // 将字符串形式的 JSON 转换为对象
-            console.log('解析后的数据:', parsedData);
+      console.log("解析后的数据:", parsedData);
 
       if (parsedData && parsedData.market && parsedData.code) {
-                console.log('工作流接口返回股票信息:', parsedData);
+        console.log("工作流接口返回股票信息:", parsedData);
 
         // 更新股票名称
-                stockName.value = parsedData.name || '未知股票';
+        stockName.value = parsedData.name || "未知股票";
         // 请求数据接口
         fetchData(parsedData.code, parsedData.market);
 
         // 更新 span01 的内容
         updateSpan01();
       } else {
-                console.error('工作流接口返回非股票信息:', parsedData.refuse);
+        console.error("工作流接口返回非股票信息:", parsedData.refuse);
         messages.value.push({
-                    sender: 'ai',
-                    text: `工作流接口返回信息: ${parsedData.refuse || '未知错误'}`,
+          sender: "ai",
+          text: `工作流接口返回信息: ${parsedData.refuse || "未知错误"}`,
         });
       }
     } catch (error) {
-            console.error('请求工作流接口失败:', error);
+      console.error("请求工作流接口失败:", error);
       messages.value.push({
-                sender: 'ai',
-                text: '工作流接口请求失败，请稍后再试。',
+        sender: "ai",
+        text: "工作流接口请求失败，请稍后再试。",
       });
     } finally {
       // 停止图片旋转
@@ -271,14 +298,15 @@ async function handleSendMessage(input) {
     }
   } else {
     messages.value.push({
-            sender: 'ai',
-            text: '请输入内容后再发送。',
+      sender: "ai",
+      text: "请输入内容后再发送。",
     });
 
     // 滚动到最新消息
     nextTick(() => {
       if (userInputDisplayRef.value) {
-                userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
+        userInputDisplayRef.value.scrollTop =
+          userInputDisplayRef.value.scrollHeight;
       }
     });
   }
@@ -289,69 +317,71 @@ async function fetchData(code, market) {
   try {
     const stockDataParams = {
       // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
-            token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-            market: 'usa',
-            code: 'TSLA',
-            language: 'cn',
-            version: version1.value
+      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',
+      "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',
+          "Content-Type": "application/json",
         },
       }
     );
 
     const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
-        console.log('图表数据接口返回数据:', stockDataResponse.data);
-
+    console.log("图表数据接口返回数据:", stockDataResponse.data);
 
     if (stockDataResponse.code === 200 && stockDataResponse.data) {
       messages.value.push({
-                sender: 'ai',
+        sender: "ai",
         text: `股票数据已成功获取`,
       });
 
       // 滚动到最新消息
       nextTick(() => {
         if (userInputDisplayRef.value) {
-                    userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
+          userInputDisplayRef.value.scrollTop =
+            userInputDisplayRef.value.scrollHeight;
         }
       });
-            console.log('1111111111111111111111')
+      console.log("1111111111111111111111");
       // 调用渲染图表的方法
       renderCharts(stockDataResponse.data);
-            console.log('2222222222222222222222')
+      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');
+      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: '图表数据接口返回数据不完整，请稍后再试。',
+        sender: "ai",
+        text: "图表数据接口返回数据不完整，请稍后再试。",
       });
       // 滚动到最新消息
       nextTick(() => {
         if (userInputDisplayRef.value) {
-                    userInputDisplayRef.value.scrollTop = userInputDisplayRef.value.scrollHeight;
+          userInputDisplayRef.value.scrollTop =
+            userInputDisplayRef.value.scrollHeight;
         }
       });
     }
   } catch (error) {
     messages.value.push({
-            sender: 'ai',
-            text: '图表数据接口请求失败，请稍后再试。',
+      sender: "ai",
+      text: "图表数据接口请求失败，请稍后再试。",
     });
   }
 }
@@ -361,49 +391,63 @@ function renderCharts(data) {
   nextTick(() => {
     // 渲染股市温度计图表
     if (marketTemperatureRef.value && data.GSWDJ) {
-            console.log('开始渲染股市温度计图表');
-            console.log('股市温度计数据', data.GSWDJ)
+      console.log("开始渲染股市温度计图表");
+      console.log("股市温度计数据", data.GSWDJ);
       marketTemperatureRef.value.initChart(data.GSWDJ, data.KLine20, data.WDRL);
-            console.log('股市温度计图表已渲染');
+      console.log("股市温度计图表已渲染");
     }
     // 渲染情绪解码器图表
     if (emotionDecodRef.value && data.QXJMQ) {
-            console.log('开始渲染情绪解码器图表');
-            console.log('情绪解码器数据', data.QXJMQ)
+      console.log("开始渲染情绪解码器图表");
+      console.log("情绪解码器数据", data.QXJMQ);
       emotionDecodRef.value.initQXNLZHEcharts(data.KLine20, data.QXJMQ);
-            console.log('情绪解码器图表已渲染');
+      console.log("情绪解码器图表已渲染");
     }
     // 渲染情绪探底雷达图表
     if (emotionalBottomRadarRef.value && data.QXTDLD) {
-            console.log('开始渲染情绪探底雷达图表');
-            console.log('数据', data.QXTDLD)
-            emotionalBottomRadarRef.value.initEmotionalBottomRadar(data.KLine20, data.QXTDLD);
-            console.log('情绪探底雷达图表已渲染');
+      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);
+      console.log("开始渲染情绪能量转化器图表");
+      console.log("KLine20:", data.KLine20);
+      console.log("QXNLZHQ:", data.QXNLZHQ);
       emoEnergyConverterRef.value.initQXNLZHEcharts(data.KLine20, data.QXNLZHQ);
-            console.log('情绪能量转化器图表已渲染');
+      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(); //加载历史对话
 });
-
 </script>
 
 <style scoped>
-
 .class003 .div02 {
-    background-image: url('@/assets/img/AiEmotion/redBorder.png');
+  background-image: url("@/assets/img/AiEmotion/redBorder.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 35%;
@@ -416,7 +460,7 @@ onMounted(() => {
   color: white;
 }
 .class003 .div01 {
-    background-image: url('@/assets/img/AiEmotion/blueBorder.png');
+  background-image: url("@/assets/img/AiEmotion/blueBorder.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   width: 35%;
@@ -428,6 +472,18 @@ onMounted(() => {
   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 {
@@ -446,7 +502,7 @@ onMounted(() => {
 }
 
 .bk-image {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
   background-size: 100% 100%;
   /* background-position: center; */
   background-repeat: no-repeat;
@@ -478,7 +534,7 @@ onMounted(() => {
 }
 
 .class07 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
   /* 使用导入的背景图片 */
   background-size: cover;
   /* 确保背景图片完整显示 */
@@ -506,7 +562,6 @@ onMounted(() => {
 .class0503 {
   width: 80%;
   margin: 0 auto;
-
 }
 
 .class0402 {
@@ -572,18 +627,17 @@ onMounted(() => {
 }
 
 .class08 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  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-image: url("@/assets/img/AiEmotion/bk03.png");
   /* 使用导入的背景图片 */
   background-size: 100% 100%;
   /* 确保背景图片完整显示 */
@@ -599,7 +653,7 @@ onMounted(() => {
 }
 
 .class05 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
   /* 使用导入的背景图片 */
   background-size: 100% 100%;
   /* 确保背景图片完整显示 */
@@ -615,7 +669,7 @@ onMounted(() => {
 }
 
 .class04 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
   /* 使用导入的背景图片 */
   background-size: 100% 100%;
   /* 确保背景图片完整显示 */
@@ -631,7 +685,7 @@ onMounted(() => {
 }
 
 .class03 {
-    background-image: url('@/assets/img/AiEmotion/bk03.png');
+  background-image: url("@/assets/img/AiEmotion/bk03.png");
   /* 使用导入的背景图片 */
   background-size: 100% 100%;
   /* 确保背景图片完整显示 */
@@ -666,7 +720,7 @@ onMounted(() => {
 }
 
 .span01 {
-    background-image: url('@/assets/img/AiEmotion/bk01.png');
+  background-image: url("@/assets/img/AiEmotion/bk01.png");
   /* 使用导入的背景图片 */
   background-size: cover;
   /* 背景图片覆盖整个容器 */
@@ -703,7 +757,6 @@ onMounted(() => {
   margin: 0 auto;
   /* 居中容器 */
   margin-bottom: 10rem;
-
 }
 
 .ai-emotion-container {

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;

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;

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;

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 {