人机回答样式修改

src/views/AiEmotion.vue

@@ -25,7 +25,9 @@
     <div class="class01">
         <!-- 四维矩阵图 -->
         <div class="class02">
-            <span class="span01">房间卡方法啊付了款公交卡阿济格</span>
+            <div class="span01">
+                {{ stockName || '未选择股票' }}
+            </div>
             <span class="span02"> 2025/06/07</span>
         </div>
         <div class="class0201">
@@ -70,17 +72,30 @@
             <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
         </div>
         <!-- 核心看点 -->
+        <div class="class0702">
+            <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心逻辑字样">
+        </div>
         <div class="class07">
 
         </div>
         <!-- 核心逻辑 -->
+        <div class="class0700">
+            <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="">
+        </div>
+        <div class="class07000">
+
+        </div>
         <div class="class0701">
-            <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="">
+            <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
         </div>
         <div class="class08">
-
+            <img src="@/assets/img/AiEmotion/tree.png" alt="树图片">
+        </div>
+        <!-- 场景应用 -->
+        <div class="class09">
+            <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
+            <div class="bk-image"></div>
         </div>
-        <div class="class09"></div>
     </div>
 </template>
 
@@ -93,7 +108,7 @@ import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue';
 import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
 import marketTemperature from '@/views/components/marketTemperature.vue';
 
-
+const stockName = ref(''); // 存储股票名称
 const emoEnergyConverterRef = ref(null)
 const emotionDecodRef = ref(null)
 const emotionalBottomRadarRef = ref(null)
@@ -140,6 +155,8 @@ async function sendMessage() {
             if (parsedData && parsedData.market && parsedData.code) {
                 console.log('工作流接口返回股票信息:', parsedData);
 
+                // 更新股票名称
+                stockName.value = parsedData.name || '未知股票';
                 // 请求数据接口
                 fetchData(parsedData.code, parsedData.market);
             } else {
@@ -171,8 +188,8 @@ async function fetchData(code, market) {
         const stockDataParams = {
             // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
             token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-            market: 'usa',
-            code: 'TSLA',
+            market: 'my',
+            code: '1295',
             language: 'cn',
         };
 
@@ -218,8 +235,6 @@ async function fetchData(code, market) {
 // 渲染组件图表的方法
 function renderCharts(data) {
     nextTick(() => {
-
-
         // 渲染情绪解码器图表
         if (emotionDecodRef.value && data.QXJMQ) {
             console.log('开始渲染情绪解码器图表');
@@ -248,10 +263,63 @@ function renderCharts(data) {
 </script>
 
 <style scoped>
-/* .class0402 {
+.bk-image {
+    background-image: url('@/assets/img/AiEmotion/bk03.png');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 95%;
+    height: 70rem;
+    margin: 0 auto;
+    margin-top: 20px;
+}
+
+.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;
+}
+
+.class07000 {
+    background-image: url(/src/assets/img/AiEmotion/bk03.png);
+    background-size: contain;
+    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 {
+    width: 80%;
     margin: 0 auto;
-} */
+
+}
+
+.class0402 {
+    width: 80%;
+    margin: 0 auto;
+}
 
 .class0601 {
     padding-top: 10rem;
@@ -288,69 +356,18 @@ function renderCharts(data) {
     width: fit-content;
 }
 
-/* 获取报告图按钮样式 */
-
-/* .home { */
-	/* background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/965055c0b964cf80a7b9b18557dbdfc6.png');
-	background-size: cover;
-
-	.top {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	} */
-
-	/* .content-container {
-		margin-top: 30px;
-		background: rgba(0, 0, 0, 0.4);
-		border: 2px solid #00cfff;
-		margin-top: 30px;
-		width: 70vw;
-		max-width: 700px;
-		margin: 0 auto;
-		padding: 20px;
-		background: rgba(0, 0, 0, 0.5);
-		border: 2px solid #00cfff;
-		border-radius: 12px;
-	} */
-	/* .content-container /deep/ .introduction {
-		display: none;
-	}
-	.content-container /deep/ .title-text {
-		display: none;
-	}
-	.content-container /deep/ .title-line {
-		display: none;
-	}
-	.content-container /deep/ .highlight {
-		display: none;
-	}
-	.content-container /deep/ .emotionPic {
-		display: none;
-	}
-} */
-
-
 .class0401 {
     padding-top: 10rem;
     text-align: center;
 }
 
+.class09 {
+    text-align: center;
+}
+
 .class08 {
-    background-image: url('@/assets/img/AiEmotion/tree.png');
-    /* 使用导入的背景图片 */
-    background-size: cover;
-    /* 确保背景图片完整显示 */
-    background-repeat: no-repeat;
-    /* 防止背景图片重复 */
-    width: 95%;
-    /* 设置容器宽度 */
-    height: auto;
-    /* 高度根据内容动态变化 */
-    min-height: 400px;
-    /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
-    /* margin-bottom: 10rem; */
+    width: fit-content;
 }
 
 .class06 {
@@ -380,7 +397,7 @@ function renderCharts(data) {
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 575px;
+    min-height: 70rem;
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
 }
@@ -396,7 +413,7 @@ function renderCharts(data) {
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 69rem;
+    min-height: 55rem;
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
 }
@@ -432,6 +449,10 @@ function renderCharts(data) {
     /* 设置文字颜色以确保可读性 */
     border-radius: 5px;
     /* 添加圆角 */
+    min-height: 3rem;
+    min-width: 30rem;
+    font-size: 1.5rem; /* 增加字体大小以便更清晰显示股票名称 */
+    text-align: center; /* 文字居中 */
 }
 
 .class01 {
@@ -441,7 +462,7 @@ function renderCharts(data) {
     /* 设置最小高度，确保初始显示 */
     height: auto;
     /* 高度根据内容动态变化 */
-    padding: 20px;
+    padding: 40px;
     /* 添加内边距，确保内容与边界有间距 */
     box-sizing: border-box;
     /* 包括内边距在宽度和高度计算中 */

src/views/components/emotionDecod.vue

@@ -345,7 +345,7 @@ onBeforeUnmount(() => {
 </script>
 <style scoped>
 .qxjmqbox {
-  background-color: #131a2a;
+  background-color: black;
 }
 #qxjmqEcharts {
   width: 90%;