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

3 weeks ago · 98899d1e0d
6 changed files with 678 additions and 615 deletions
--- 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)">
--- a/src/views/AiEmotion.vue
+++ b/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 {
--- 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;
--- 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;
--- 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;
--- 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 {