修改框

src/views/AiEmotion.vue

@@ -31,23 +31,25 @@
 
     <!-- 渲染整个页面 -->
     <div v-if="isPageLoaded" class="class01">
-        <!-- 四维矩阵图 -->
-        <div class="class02">
-            <div class="span01">
-                {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
+        <div class="class00">
+            <!-- 四维矩阵图 -->
+            <div class="class02">
+                <div class="span01">
+                    {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
+                </div>
+                <span class="span02">{{ displayDate }}</span>
+            </div>
+            <div class="class0201">
+                <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
+            </div>
+            <!-- 温度计图表 -->
+            <div class="class03">
+                <marketTemperature ref="marketTemperatureRef" />
             </div>
-            <span class="span02">{{ displayDate }}</span>
-        </div>
-        <div class="class0201">
-            <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
-        </div>
-        <!-- 温度计图表 -->
-        <div class="class03">
-            <marketTemperature ref="marketTemperatureRef" />
-        </div>
-        <div class="class0301">
-            <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
         </div>
+            <div class="class0301">
+                <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
+            </div>
         <!-- 情绪解码器图表 -->
         <div class="class04">
             <div class="class0401">
@@ -270,7 +272,7 @@ async function sendMessage() {
         });
     }
 }
-
+const version1 = ref(2); // 版本号
 // 请求数据接口
 async function fetchData(code, market) {
     try {
@@ -280,6 +282,7 @@ async function fetchData(code, market) {
             market: 'usa',
             code: 'TSLA',
             language: 'cn',
+            version: version1.value
         };
 
         const stockDataResult = await axios.post(
@@ -441,7 +444,7 @@ onMounted(() => {
 
 .bk-image {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
-    background-size: cover;
+    background-size: 100% 100%;
     /* background-position: center; */
     background-repeat: no-repeat;
     width: 95%;
@@ -566,7 +569,7 @@ onMounted(() => {
 
 .class08 {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
-    background-size: cover;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
     width: 95%;
     height: auto;
@@ -578,7 +581,7 @@ onMounted(() => {
 .class06 {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
     /* 使用导入的背景图片 */
-    background-size: cover;
+    background-size: 100% 100%;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
@@ -594,7 +597,7 @@ onMounted(() => {
 .class05 {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
     /* 使用导入的背景图片 */
-    background-size: cover;
+    background-size: 100% 100%;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
@@ -610,7 +613,7 @@ onMounted(() => {
 .class04 {
     background-image: url('@/assets/img/AiEmotion/bk03.png');
     /* 使用导入的背景图片 */
-    background-size: cover;
+    background-size: 100% 100%;
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
@@ -638,6 +641,19 @@ onMounted(() => {
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
 }
+.class00{
+    background-size: 100% 100%;
+    /* 确保背景图片完整显示 */
+    background-repeat: no-repeat;
+    /* 防止背景图片重复 */
+    width: 95%;
+    /* 设置容器宽度 */
+    height: auto;
+    /* 高度根据内容动态变化 */
+    min-height: 55rem;
+    /* 设置最小高度，确保图片显示 */
+    margin: 0 auto;
+}
 
 .span02 {
     font-size: 1.5rem;

src/views/components/emotionDecod.vue

@@ -344,9 +344,9 @@ onBeforeUnmount(() => {
 });
 </script>
 <style scoped>
-.qxjmqbox {
+/* .qxjmqbox {
   background-color: black;
-}
+} */
 #qxjmqEcharts {
   width: 90%;
   height: 500px;

src/views/components/marketTemperature.vue

@@ -264,7 +264,7 @@ defineExpose({ initChart })
 
 .market-temperature {
   min-height: 100vh;
-  background-color: rgb(0, 22, 65);
+  /* background-color: rgb(0, 22, 65); */
 }
 
 .container {
@@ -276,7 +276,6 @@ defineExpose({ initChart })
 .border3,
 .border4 {
   margin-top: 40px;
-  background-color: #1a1a1a;
   border-radius: 8px;
   padding: 20px;
 }