人机回答样式修改

3 weeks ago · 8e32a92d68
5 changed files with 94 additions and 73 deletions
--- a/src/assets/img/AiEmotion/场景应用.png
+++ b/src/assets/img/AiEmotion/场景应用.png
--- a/src/assets/img/AiEmotion/核心看点.png
+++ b/src/assets/img/AiEmotion/核心看点.png
--- a/src/assets/img/AiEmotion/核心逻辑.png
+++ b/src/assets/img/AiEmotion/核心逻辑.png
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@ -1,7 +1,7 @@
 <template>
    <div class="ai-emotion-container">
        <!-- 消息显示区域 -->
-         
+
        <div class="user-input-display">
            <div v-for="(message, index) in messages" :key="index" class="message-container">
                <!-- 用户输入内容 -->
@ -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">
@ -33,7 +35,7 @@
        </div>
        <!-- 温度计图表 -->
        <div class="class03">
-      <marketTemperature/>
+            <marketTemperature />
        </div>
        <div class="class0301">
            <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
@ -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;
    /* 包括内边距在宽度和高度计算中 */
--- a/src/views/components/emotionDecod.vue
+++ b/src/views/components/emotionDecod.vue
@ -345,7 +345,7 @@ onBeforeUnmount(() => {
 </script>
 <style scoped>
 .qxjmqbox {
-  background-color: #131a2a;
+  background-color: black;
 }
 #qxjmqEcharts {
  width: 90%;