AIxiaocaishen/src/views/AiEmotion.vue

<template>
  <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>
        <!-- AI返回结果 -->
        <div v-if="message.sender === 'ai'" class="message-bubble ai-message">
          {{ message.text }}
        </div>
      </div>
    </div>
  </div>

  <!-- 股票标签页 -->
  <StockTabs />

  <!-- 渲染整个页面 -->
  <div v-if="isPageLoaded" class="class01">
    <div class="class00">
      <!-- 四维矩阵图 -->
      <div class="class02">
        <div class="container">
          <img class="item" :src="item" alt="思维矩阵图片" />
          <div class="span01">
            {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
          </div>
        </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">
          <div class="content1">
            <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
            <span class="title1">股票温度计</span>
          </div>
          <div class="div00">
            <div class="div01">个股温度：{{ data1 ?? "NA" }}</div>
            <div class="div02">大盘温度：{{ data2 }}</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 class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
        <span class="title2">情绪解码器</span>
      </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 class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
        <span class="title3">情绪探底雷达</span>
      </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 class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
        <span class="title4">情绪能量转化器</span>
      </div>
      <div class="class0603">
        <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
      </div>
    </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>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, nextTick, onMounted } from 'vue';
import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
import axios from 'axios';
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
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 StockTabs from '@/views/components/StockTabs.vue'; // 导入股票标签页组件
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
import { ElMessage } from 'element-plus';
import { useEmotionStore } from '@/store/emotion'; // 导入Pinia store

// 使用Pinia store
const emotionStore = useEmotionStore();

// 组件引用
const marketTemperatureRef = ref(null); // 引用市场温度计组件
const emoEnergyConverterRef = ref(null)
const emotionDecodRef = ref(null)
const emotionalBottomRadarRef = ref(null)
const userInputDisplayRef = ref(null);//消息区域的引用

// 响应式数据
const messages = ref([]);
const isPageLoaded = ref(false); // 控制页面是否显示
const isRotating = ref(false);//控制旋转
const version1 = ref(2); // 版本号

// 计算属性 - 从store获取当前股票数据
const currentStock = computed(() => emotionStore.activeStock);
const stockName = computed(() => currentStock.value?.stockInfo.name || "");
const displayDate = computed(() => {
  if (!currentStock.value?.apiData) return "";
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? lastData[0] : "";
});
const data1 = computed(() => {
  if (!currentStock.value?.apiData) return null;
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? Math.round(lastData[1]) : null;
});
const data2 = computed(() => {
  if (!currentStock.value?.apiData) return null;
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? Math.round(lastData[2]) : null;
});

// 监听当前股票变化，重新渲染图表
watch(currentStock, (newStock) => {
  if (newStock && newStock.apiData) {
    isPageLoaded.value = true;
    nextTick(() => {
      renderCharts(newStock.apiData);
    });
  } else {
    isPageLoaded.value = false;
  }
}, { immediate: true });
//导出方法供外部使用
defineExpose({ handleSendMessage })
// 触发图片旋转的方法
function startImageRotation() {
  isRotating.value = true;
  // 如果你想在一段时间后停止旋转，可以添加以下代码
  setTimeout(() => {
    isRotating.value = false;
  }, 5000); // 5 秒后停止旋转
}


// 发送消息方法
async function handleSendMessage(input) {
  console.log("发送内容:", input);

  // 检查用户输入内容是否为空
  if (input.trim()) {
    const userMessage = reactive({ sender: 'user', text: input });
    messages.value.push(userMessage);
    // 触发图片旋转
    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);

        // 请求数据接口
        fetchData(parsedData.code, parsedData.market, parsedData.name || "未知股票", input.trim());

        // 更新 span01 的内容
        // updateSpan01();
      } else {
        ElMessage.error('工作流接口未返回非股票信息');
      }
    } catch (error) {
      ElMessage.error('请求工作流接口失败，请检查网络连接');
    } finally {
      // 停止图片旋转
      isRotating.value = false;
    }
  } else {
    ElMessage.error('消息发送失败，请检查网络连接');
  }
}

// 请求数据接口
async function fetchData(code, market, stockName, queryText) {
  try {
    const stockDataParams = {
      // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
      token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
      market: market,
      code: code,
      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) {
      console.log(stockDataResponse.code)

      // 创建股票数据对象
      const stockData = {
        queryText: queryText,
        stockInfo: {
          name: stockName,
          code: code,
          market: market
        },
        apiData: stockDataResponse.data,
        timestamp: new Date().toISOString()
      };

      // 将股票数据添加到store中
      emotionStore.addStock(stockData);

      console.log('股票数据已添加到store');

    } else {
      ElMessage.error('获取接口数据失败');
    }
  } catch (error) {
    ElMessage.error('获取接口数据失败。。。');
  }
}

// 渲染组件图表的方法
function renderCharts(data) {
  nextTick(() => {
    // 添加小延迟确保DOM完全更新
    setTimeout(() => {
      try {
        // 渲染股市温度计图表
        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("情绪能量转化器图表已渲染");
        }
      } catch (error) {
        console.error('图表渲染过程中发生错误:', error);
        ElMessage.error('图表渲染失败，请重试');
      }
    }, 100); // 100ms延迟确保DOM稳定
  });
}

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();
});
</script>

<style scoped>
.class003 {
  padding-top: 7rem;
  padding-left: 12rem;
}

.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);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 应用动画到图片 */
.rotating-image {
  animation: rotate 5s linear;
  /* 5 秒完成一次旋转，线性速度*/
  will-change: transform;
  /* 优化动画性能 */
}

.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;
}

/* 最后文字的颜色 */
.text-container {
  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;
}

.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;
}

.class0700 {
  margin: 0 auto;
  width: fit-content;
}

.class0702 {
  margin: 0 auto;
  width: fit-content;
}

/* .class0503 {
    min-width: 100%;
} */

.class0402 {
  width: 80%;
  margin: 0 auto;
}

.class0601 {
  padding-top: 5rem;
  text-align: center;
  padding-bottom: 6rem;
}

.class0603 {
  min-width: 100%;
  /* margin: 0 auto; */

}

.class0502 {
  padding-top: 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.class0601 {
  padding-top: 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.img03 {
  width: 10rem;
  height: 10rem;
  margin-left: 40rem;
}

.img04 {
  width: 10rem;
  height: 10rem;
  margin-left: 40rem;
}

.class0701 {
  margin: 0 auto;
  width: fit-content;
}

.class0501 {
  margin: 0 auto;
  width: fit-content;
}

.class0403 {
  margin: 0 auto;
  width: fit-content;
}

.class0301 {
  margin: 0 auto;
  width: fit-content;
}

.class0201 {
  margin: 0 auto;
  width: fit-content;
}

.class0401 {
  padding-top: 5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.img02 {
  width: 10rem;
  height: 10rem;
  margin-left: 40rem;
}

.title2 {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  margin-left: -4rem;
}

.title3 {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  margin-left: -4rem;
}

.title4 {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  margin-left: -4rem;
}

.class09 {
  text-align: center;
}

/* 为需要放大的图片添加样式 */
.scaled-img {
  transform: scale(2.5);
  text-align: center;
}

.lz-img {
  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;
}

.class06 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 72rem;
  /* 设置最小高度，确保图片显示 */
  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;
}

.class04 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 57rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.class03 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 100%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 70rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
  /* display: flex;
    flex-direction:row;
      align-items: center;  
    padding: 1rem;
    gap: 1rem;    */
}

.class00 {
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 55rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.content1 {
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.title1 {
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  margin-left: -1rem;

}

.img01 {
  width: 10rem;
  height: 10rem;
}

.div00 {
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  margin-left: 30rem;
  gap: 1rem;
  margin-top: -10rem;
  width: 70rem;
  height: 10rem;
}

.span02 {
  font-size: 1.5rem;
  color: white;
  float: right;
  margin-top: -3.5rem;
}

.span01 {
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 背景图片覆盖整个容器 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  display: inline-block;
  /* 确保容器是块级元素 */
  padding: 10px;
  /* 添加内边距以显示内容 */
  color: #fff;
  /* 设置文字颜色以确保可读性 */
  font-size: 1.5rem;
  /* 增加字体大小以便更清晰显示股票名称 */
  text-align: center;
  transform: translate(-50%, -50%);
  margin-left: -13rem;

}

.class01 {
  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;
}

.user-input-display {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.message-container {
  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;
}

.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;
}

.input-container {
  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);
}

.input-box {
  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;
}

.send-button:hover {
  background-color: #0056b3;
}

/* 手机端适配样式 */
@media only screen and (max-width: 768px) {

  /* 图片样式 */
  .golden-wheel img {
    width: 100%;
  }

  .class02 img {
    width: 70%;

  }

  .class0201 img {
    width: 100%;
  }

  .class0301 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0403 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0501 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0702 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0700 img {
    width: 100%;
    margin: 10px 10px;
  }

  .scaled-img img {
    width: 30%;
    height: auto;
  }

  .class09 img {
    width: 100%;
    margin: 10px 10px;
  }

  .img01 {
    height: auto;
    margin-left: 0rem;
    width: 25%;
    margin-top: 10px;
  }

  .title1 {
    font-size: 10px;
    margin-left: 13px;
  }

  .class02 .span02 {
    font-size: 14px;
    color: white;
    float: right;
    margin-top: -45px;
  }

  .class03 {
    background-image: url('@/assets/img/AiEmotion/bk03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 132%;
    margin-left: -45px;
  }

  .class03 .class003 {
    padding-top: 3rem;
    padding-left: 0rem;
  }

  .class01 {
    min-height: 100px;
    height: auto;
    box-sizing: border-box;
    background-color: #5e81a7;
    margin: 0 auto;
    margin-bottom: 10rem;
  }

  .class04 {
    width: 126%;
    /* min-height: 51rem; */
    margin-left: -39px;
    min-height: 38rem;
  }

  .class02 .container img {
    width: 68%;
    height: auto;
    margin-top: -15px;
    margin-left: -2rem;
  }


  .title2,
  .title3,
  .title4 {
    font-size: 10px;
    margin-left: -3rem;
  }

  .img02 {
    width: 25%;
    height: auto;
    margin-left: 6rem;
  }

  .class0401 {
    padding-top: 3rem;
  }

  .img03,
  .img04 {
    width: 25%;
    height: auto;
    margin-left: 6rem;
  }

  .text-container p {
    font-size: 10px;
  }

  .lz-img {
    margin-bottom: 3rem;
    padding-top: 20px;

    img {
      width: 45%;
      height: auto;
    }
  }

  .class08 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 127%;
    height: auto;
    min-height: 13rem;
    margin: 0 auto;
    margin-left: -41px;
  }

  .bk-image {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 126%;
    height: 15rem;
    margin: 0 auto;
    margin-top: 0px;
    margin-left: -40px;
  }

  .class05 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 127%;
    height: auto;
    min-height: 45rem;
    margin-left: -41px;
  }

  .class06 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 127%;
    height: auto;
    min-height: 32rem;
    margin: 0 auto;
    margin-left: -41px;

  }

  .text-container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: left;
    padding: 20px;
  }

  .div00 {
    display: flex;
    flex-direction: column;
    margin-left: 5rem;
    gap: 0;
    margin-top: -6rem;
    width: 100%;
    height: auto;
  }

  .class003 .div01 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 35%;
    min-height: 25px;
    float: left;
    margin-left: 100px;
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
    color: white;
  }

  .class003 .div02 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 35%;
    min-height: 25px;
    float: left;
    margin-left: 100px;
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
    color: white;
  }

  /* 
    .container {
        max-width: 80vw;
        width: 100%;
        height: auto;
    } */

  .span01 {
    /* 使用导入的背景图片 */
    background-size: 100% 100%;
    /* 背景图片覆盖整个容器 */
    background-repeat: no-repeat;
    /* 防止背景图片重复 */
    display: inline-block;
    /* 确保容器是块级元素 */
    padding: 10px;
    /* 添加内边距以显示内容 */
    color: #fff;
    /* 设置文字颜色以确保可读性 */
    font-size: 13px;
    /* 增加字体大小以便更清晰显示股票名称 */
    text-align: center;
    transform: translate(-50%, -50%);
    margin-left: -5rem;
  }

  .class0502,
  .class0601 {
    padding-top: 3rem;
  }
}
</style>