试图显示股市温度计图标

src/router/index.js

@@ -61,6 +61,13 @@ const routes = [
         name: 'emotionsEcharts',
         component: () => import('@/views/emotionsEcharts.vue')
 
+    },
+    {
+
+        path: '/marketTemperature',
+        name: 'marketTemperature',
+        component: () => import('@/views/marketTemperature.vue')
+
     }
 
 ]

src/views/AiEmotion.vue

@@ -1,6 +1,10 @@
 <template>
     <div class="ai-emotion-container">
         <!-- 消息显示区域 -->
+          <div class="03">
+      <marketTemperature/>
+        </div>
+               </div>
         <div class="user-input-display">
             <div v-for="(message, index) in messages" :key="index" class="message-container">
                 <!-- 用户输入内容 -->
@@ -13,7 +17,6 @@
                 </div>
             </div>
         </div>
-
         <!-- 输入框和发送按钮 -->
         <div class="input-container fixed-bottom">
             <input type="text" v-model="userInput" placeholder="请输入内容..." class="input-box" />
@@ -31,7 +34,7 @@
         <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控">
         <!-- 温度计图表 -->
         <div class="class03">
-
+      <marketTemperature/>
         </div>
         <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码">
         <!-- 情绪解码器图表 -->
@@ -70,6 +73,7 @@ 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';
 
 
 const emoEnergyConverterRef = ref(null)
@@ -218,6 +222,49 @@ function renderCharts(data) {
 
 <style scoped>
 
+/* 获取报告图按钮样式 */
+
+/* .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 {
     background-image: url('@/assets/img/AiEmotion/解码器.png'); /* 设置背景图片 */
     background-size: contain; /* 背景图片覆盖整个容器 */

src/views/Emotionsmodel.vue

@@ -45,7 +45,7 @@ const goToAiEmotion = () => {
   // 设置 sessionStorage 控制 homepage.vue 激活 AiEmotion tab
   sessionStorage.setItem("activeTabAI", "AiEmotion")
   sessionStorage.setItem("activeIndexAI", "2")
-  router.push("/homePage")
+  router.push("/marketTemperature")
 }
 </script>
 

src/views/smallTitle.vue

@@ -0,0 +1,107 @@
+<template>
+	<header class="title">
+		<div class="title-text" :style="fontSize">
+			<img
+				v-if="props.colorBgc"
+				src="@/assets/img/page/title-jn-left.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<div v-if="props.colorBgc">{{ translate(props.titleKey) }}</div>
+			<img
+				v-if="props.colorBgc"
+				src="@/assets/img/page/title-jn-right.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<img
+				v-if="!props.colorBgc"
+				src="@/assets/img/page/title-left.png"
+				alt=""
+				class="title-text-img"
+			/>
+			<div v-if="!props.colorBgc">{{ translate(props.titleKey) }}</div>
+			<img
+				v-if="!props.colorBgc"
+				src="@/assets/img/page/title-right.png"
+				alt=""
+				class="title-text-img"
+			/>
+		</div>
+		<div class="title-line">
+			<img src="@/assets/img/page/line.png" class="title-line-img" />
+		</div>
+	</header>
+</template>
+
+<script setup>
+import { useLanguage } from '@/utils/languageService'
+import { defineProps, computed } from 'vue'
+
+// 获取翻译函数和语言状态
+const { translate, t } = useLanguage()
+
+// 定义 props 接收传入的标题
+const props = defineProps({
+	titleKey: {
+		type: String,
+		required: true
+	},
+	colorBgc: {
+		type: String,
+		required: true
+	}
+})
+// 定义 fontSize 的类型，并确保 computed 返回正确的类型
+const fontSize = computed(() => {
+	if (t.value?.suoxie === 'en' || t.value?.suoxie === 'th') {
+		// 手机尺寸
+		if (window.innerWidth < 768) {
+			return { fontSize: '3vw' }
+		} else {
+			return { fontSize: '1.5vw' }
+		}
+	} else {
+		// 简体或者繁体
+		if (window.innerWidth < 768) {
+			return { fontSize: '3.5vw' }
+		} else {
+			return { fontSize: '1.5vw' }
+		}
+	}
+})
+</script>
+
+<style scoped lang="less">
+.title {
+	position: relative;
+	.title-text {
+		font-size: 3vw;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		justify-content: center;
+		color: white;
+		.title-text-img {
+			width: 10%;
+		}
+	}
+	.title-line {
+		text-align: center;
+		position: absolute;
+		bottom: -1vw;
+		left: 50%; /* 将左边距设置为 50% */
+		transform: translateX(-50%); /* 使用 transform 来将元素水平居中 */
+		width: 85%;
+		.title-line-img {
+			width: 100%;
+			height: auto;
+		}
+	}
+}
+@media (min-width: 768px) {
+	.title-text-img {
+		width: 6% !important;
+	}
+}
+</style>