diff --git a/src/api/AiEmotionApi.js b/src/api/AiEmotionApi.js
index 31bcc38..6d640d0 100644
--- a/src/api/AiEmotionApi.js
+++ b/src/api/AiEmotionApi.js
@@ -15,7 +15,7 @@ export const getReplyAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
+        "Bearer pat_D6vYu7FNXfkSJn8GpmA9oC4DY8LkcbhzrSZuJwuTHT0aYn2uqZ6P5cBfRD0kwZYR",
     },
   });
 };
@@ -31,7 +31,7 @@ export const getConclusionAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
+        "Bearer pat_D6vYu7FNXfkSJn8GpmA9oC4DY8LkcbhzrSZuJwuTHT0aYn2uqZ6P5cBfRD0kwZYR",
     },
   });
 };
diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index 4e02cdf..005387b 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -35,77 +35,75 @@
 
 
   <!-- 渲染整个页面 -->
-  <div v-if="isPageLoaded" class="class01">
-    <div class="class00">
+  <div v-if="isPageLoaded" class="main">
+    <div class="main-content-wrapper">
       <!-- 四维矩阵图 -->
-      <div class="class02">
-        <div class="container">
-          <!-- <img class="item" :src="item" alt="思维矩阵图片" /> -->
-          <div class="span01">
-            {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
-          </div>
+      <div class="matrix-header">
+        <!-- <img class="item" :src="item" alt="思维矩阵图片" /> -->
+        <div class="market-temperature-label">
+          {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
         </div>
-        <span class="span02">{{ displayDate }}</span>
+        <div class="market-temperature-value">{{ displayDate }}</div>
       </div>
-      <div class="class0201" v-if="chartVisibility.marketTemperature">
+      <div class="market-temperature-icon" v-if="chartVisibility.marketTemperature">
         <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
       </div>
       <!-- 温度计图表 -->
-      <div class="class03" v-if="chartVisibility.marketTemperature">
-        <div class="class003">
+      <div class="market-temperature-section" v-if="chartVisibility.marketTemperature">
+        <div class="temperature-content">
           <div class="content1">
-            <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
-            <span class="title1">股市温度计</span>
+            <img src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
+            <span class="matrix-main-title">股市温度计</span>
           </div>
-          <div class="div00">
-            <div class="div01">股票温度：{{ data2 ?? "NA" }}</div>
-            <div class="div02">市场温度：{{ data1 }}</div>
+          <div class="temperature-display">
+            <div class="temperature-cold">股票温度：{{ data2 ?? "NA" }}</div>
+            <div class="temperature-hot">市场温度：{{ data1 }}</div>
           </div>
         </div>
         <marketTemperature ref="marketTemperatureRef" :companyName="stockName" :stockCode="stockCode" />
       </div>
     </div>
-    <div class="class0301" v-if="chartVisibility.emotionDecod">
+    <div class="emotion-decoder-icon" v-if="chartVisibility.emotionDecod">
       <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
     </div>
     <!-- 情绪解码器图表 -->
-    <div class="class04" v-if="chartVisibility.emotionDecod">
-      <div class="class0401">
-        <img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
-        <span class="title2">情绪解码器</span>
+    <div class="emotion-decoder-section" v-if="chartVisibility.emotionDecod">
+      <div class="emotion-decoder-header">
+        <img src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
+        <span class="emotion-decoder-text">情绪解码器</span>
       </div>
-      <div class="class0402">
+      <div class="emotion-decoder-content">
         <emotionDecod ref="emotionDecodRef"></emotionDecod>
       </div>
     </div>
-    <div class="class0403" v-if="chartVisibility.emotionalBottomRadar">
+    <div class="bottom-radar-icon" v-if="chartVisibility.emotionalBottomRadar">
       <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
     </div>
     <!-- 情绪探底雷达图表 -->
-    <div class="class05" v-if="chartVisibility.emotionalBottomRadar">
-      <div class="class0502">
-        <img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
-        <span class="title3">情绪探底雷达</span>
+    <div class="bottom-radar-section" v-if="chartVisibility.emotionalBottomRadar">
+      <div class="bottom-radar-header">
+        <img src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
+        <span class="bottom-radar-text">情绪探底雷达</span>
       </div>
-      <div class="class0503">
+      <div class="bottom-radar-content">
         <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
       </div>
     </div>
-    <div class="class0501" v-if="chartVisibility.emoEnergyConverter">
+    <div class="energy-converter-icon" v-if="chartVisibility.emoEnergyConverter">
       <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
     </div>
     <!-- 情绪能量转化器图表 -->
-    <div class="class06" v-if="chartVisibility.emoEnergyConverter">
-      <div class="class0601">
-        <img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
-        <span class="title4">情绪能量转化器</span>
+    <div class="energy-converter-section" v-if="chartVisibility.emoEnergyConverter">
+      <div class="energy-converter-header">
+        <img src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
+        <span class="energy-converter-text">情绪能量转化器</span>
       </div>
-      <div class="class0603">
+      <div class="energy-converter-content">
         <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
       </div>
     </div>
     <!-- 核心看点 -->
-    <div class="class0702">
+    <div class="core-highlights-header">
       <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
     </div>
     <div class="bk-image">
@@ -125,10 +123,10 @@
       </div>
     </div>
     <!-- 核心逻辑 -->
-    <div class="class0700">
+    <div class="core-logic-header">
       <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
     </div>
-    <div class="class08">
+    <div class="decision-tree-section">
       <div class="lz-img">
         <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
       </div>
@@ -137,7 +135,7 @@
       </div>
     </div>
     <!-- 场景应用 -->
-    <div class="class09" ref="scenarioApplicationRef">
+    <div class="scenario-application-section" ref="scenarioApplicationRef">
       <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
       <div class="bk-image">
         <div class="conclusion-container" v-if="parsedConclusion">
@@ -1420,10 +1418,10 @@ function renderCharts(data) {
 
         // 检查DOM元素是否存在
         console.log('DOM元素检查:', {
-          marketTemperatureDOM: !!document.querySelector('.class03'),
-          emotionDecodDOM: !!document.querySelector('.class04'),
-          emotionalBottomRadarDOM: !!document.querySelector('.class05'),
-          emoEnergyConverterDOM: !!document.querySelector('.class06')
+          marketTemperatureDOM: !!document.querySelector('.market-temperature-section'),
+          emotionDecodDOM: !!document.querySelector('.emotion-decoder-section'),
+          emotionalBottomRadarDOM: !!document.querySelector('.bottom-radar-section'),
+          emoEnergyConverterDOM: !!document.querySelector('.energy-converter-section')
         });
 
         // 检查具体的组件元素
@@ -1722,7 +1720,7 @@ onMounted(async () => {
     console.log('AiEmotion页面：窗口大小变化，触发容器和图表resize');
 
     // 强制重新计算容器布局
-    const mainContainer = document.querySelector('.class01');
+    const mainContainer = document.querySelector('.main');
     if (mainContainer) {
       // 触发重排，确保容器尺寸正确更新
       mainContainer.style.display = 'none';
@@ -1894,34 +1892,37 @@ defineExpose({
 </script>
 
 <style scoped>
+.matrix-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
 .disclaimer-item p {
   color: #ffffff !important;
   font-size: 24px;
   font-weight: bold;
 }
 
-.container {
-  padding-top: 2%;
-}
-
-.class003 {
+.temperature-content {
   padding-top: 8%;
-  /* padding-left: 10%; */
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 25%;
-  /* flex-direction: column; */
-  /* gap: 1rem; */
+  gap: 10rem;
 }
 
+.temperature-content .content1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
-.img01 {
-  width: 11vw;
-  /* height: auto; */
+.temperature-content .content1 img {
+  scale: 0.5;
 }
 
-.div00 {
+.temperature-display {
   display: flex;
   flex-direction: column;
   /* 竖向排列元素 */
@@ -1932,21 +1933,20 @@ defineExpose({
   /* height: auto; */
 }
 
-.div00::after {
+.temperature-display::after {
   content: "";
   display: table;
   clear: both;
 }
 
-.class003 .div02 {
+.temperature-content .temperature-hot {
   background-image: url('@/assets/img/AiEmotion/redBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   /* width: 50%; */
-  width: 30vw;
+  width: 22vw;
   max-width: 400px;
   min-width: 200px;
-  min-height: 40px;
   text-align: center;
   font-size: 24px;
   color: white;
@@ -1956,15 +1956,14 @@ defineExpose({
   flex-shrink: 0;
 }
 
-.class003 .div01 {
+.temperature-content .temperature-cold {
   background-image: url('@/assets/img/AiEmotion/blueBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
   /* width: 35%; */
-  width: 30vw;
+  width: 22vw;
   max-width: 400px;
   min-width: 200px;
-  min-height: 40px;
   text-align: center;
   font-size: 24px;
   color: white;
@@ -2011,7 +2010,7 @@ defineExpose({
   background-image: url("@/assets/img/AiEmotion/bk00000.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  width: 100%;
+  width: 50vw;
   height: auto;
   margin: 0 auto;
   margin-top: 20px;
@@ -2021,31 +2020,14 @@ defineExpose({
   padding: 20px;
   border-radius: 15px;
   margin: 20px;
-  /* background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%); */
-  border: 2px solid rgba(0, 212, 255, 0.4);
 }
 
 .bk-image .conclusion-container .conclusion-item {
-  margin-bottom: 20px;
-  padding: 20px;
   border-radius: 12px;
-  border: 1px solid rgba(0, 212, 255, 0.5);
   transition: all 0.3s ease;
-  position: relative;
   overflow: hidden;
 }
 
-.bk-image .conclusion-container .conclusion-item::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
-  opacity: 0.8;
-}
-
 .bk-image .conclusion-container .conclusion-item:last-child {
   margin-bottom: 0;
 }
@@ -2057,17 +2039,7 @@ defineExpose({
   margin: 0 0 15px 0;
   text-align: center;
   letter-spacing: 2px;
-}
-
-.bk-image .conclusion-container .conclusion-item .conclusion-title::after {
-  content: '';
-  position: absolute;
-  bottom: -5px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60px;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #00d4ff, transparent);
+  margin-top: 22px;
 }
 
 .bk-image .conclusion-container .conclusion-item .conclusion-text {
@@ -2075,9 +2047,8 @@ defineExpose({
   font-size: 20px;
   line-height: 1.8;
   margin: 0 0 12px 0;
-  text-align: left;
+  text-align: center;
   word-wrap: break-word;
-  padding-left: 15px;
   position: relative;
 }
 
@@ -2107,34 +2078,17 @@ defineExpose({
   text-align: left;
   padding: 20px;
   border-radius: 15px;
-  margin: 20px;
-  /* background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%); */
-  border: 2px solid rgba(0, 212, 255, 0.4);
 }
 
-.text-container p {
+/* .text-container p {
   margin: 0 auto;
   font-size: 40px;
   margin-left: 0%;
-  padding: 20px;
   border-radius: 12px;
   transition: all 0.3s ease;
-  position: relative;
   overflow: hidden;
   letter-spacing: 2px;
-  border: 1px solid rgba(0, 212, 255, 0.5);
-}
-
-.text-container p::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
-  opacity: 0.8;
-}
+} */
 
 .text-container .title {
   display: block;
@@ -2143,163 +2097,187 @@ defineExpose({
   margin-top: 0px;
   margin-bottom: 20px;
   font-size: 22px;
+  text-align: center;
 }
 
 .text-container .content {
   display: block;
   color: white;
-  font-size: 20px;
   text-align: center;
+  font-size: 22px;
 }
 
 
 
-.class07 {
+.core-logic-section {
   background-image: url("@/assets/img/AiEmotion/bk00000.png");
-  /* 使用导入的背景图片 */
   background-size: cover;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
   width: 95%;
-  /* 设置容器宽度 */
   height: auto;
-  /* 高度根据内容动态变化 */
   min-height: 70rem;
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
 }
 
-.class0700 {
+.core-logic-header {
   margin: 0 auto;
   width: fit-content;
   margin-top: 2%;
   margin-bottom: 1%;
 }
 
-.class0702 {
+.core-highlights-header {
   margin: 0 auto;
-  width: fit-content;
+  /* width: fit-content; */
   margin-top: 2%;
   margin-bottom: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.class0402 {
+.emotion-decoder-content {
   /* width: 80vw; */
   margin: 0 auto;
 }
 
 
-.class0603 {
+.energy-converter-content {
   min-width: 100%;
   margin-top: 3%;
 }
 
-.class0502 {
-  padding-top: 7%;
+.bottom-radar-header {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  /* 竖向排列元素 */
-  gap: 1rem;
-  /* margin-left: 2rem; */
 }
 
-.class0601 {
-  padding-top: 5rem;
+.bottom-radar-header img {
+  scale: 0.5;
+}
+
+.energy-converter-header {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  /* 竖向排列元素 */
-  gap: 1rem;
-  /* margin-left: 2rem; */
 }
 
-.img03 {
-  width: 10%;
+.energy-converter-header img {
+  scale: 0.5;
+}
+
+.bottom-radar-icon {
+  width: fit-content;
   height: auto;
-  /* margin-left: 43%; */
+  margin: 0 auto;
+  margin-top: 2%;
+  margin-bottom: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.img04 {
-  width: 10%;
+.energy-converter-icon {
+  width: fit-content;
   height: auto;
-  /* margin-left: 43%; */
+  margin: 0 auto;
+  margin-top: 2%;
+  margin-bottom: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.class0701 {
+.core-logic-content {
   margin: 0 auto;
   width: fit-content;
 }
 
-.class0501 {
+.market-temperature-icon {
+  width: fit-content;
+  height: auto;
+  margin: 0 auto;
+  margin-top: 2%;
+  margin-bottom: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bottom-radar-title {
   margin: 0 auto;
   width: fit-content;
   margin-top: 2%;
   margin-bottom: 1%;
 }
 
-.class0403 {
+.emotion-decoder-title {
   margin: 0 auto;
   width: fit-content;
   margin-top: 2%;
   margin-bottom: 1%;
 }
 
-.class0301 {
+.temperature-title {
   margin: 0 auto;
   width: fit-content;
   margin-top: 2%;
   margin-bottom: 1%;
 }
 
-.class0201 {
+.matrix-title {
   margin: 0 auto;
   width: fit-content;
   margin-bottom: 1%;
 }
 
-.class0401 {
-  padding-top: 5rem;
+.emotion-decoder-header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  /* 竖向排列元素 */
-  gap: 1rem;
-  /* margin-left: 2rem; */
 }
 
-.img02 {
-  width: 10%;
+.emotion-decoder-header img {
+  scale: 0.5;
+}
+
+.emotion-decoder-icon {
+  width: fit-content;
   height: auto;
-  /* margin-left: 43%; */
+  margin: 0 auto;
+  margin-top: 2%;
+  margin-bottom: 1%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.title2 {
+.emotion-decoder-text {
   color: white;
   font-size: 20px;
   font-weight: bold;
   /* margin-left: 45%; */
 }
 
-.title3 {
+.bottom-radar-text {
   color: white;
   font-size: 20px;
   font-weight: bold;
   /* margin-left: 44.6%; */
 }
 
-.title4 {
+.energy-converter-text {
   color: white;
   font-size: 20px;
   font-weight: bold;
   /* margin-left: 44%; */
 }
 
-.class09 {
+.scenario-application-section {
   text-align: center;
   margin-top: 2%;
   margin-bottom: 1%;
@@ -2311,139 +2289,90 @@ defineExpose({
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
-  width: 70%;
-  height: 400px;
-  min-height: 35rem;
-  text-align: center;
+  width: 80%;
+  height: 350px;
   margin: 0 auto;
-  margin-top: 3%;
+  margin-top: 2%;
+  margin-bottom: 3%;
 }
 
 .lz-img {
   text-align: center;
-  padding-top: 70px;
+  padding-top: 30px;
 }
 
-.class08 {
+.decision-tree-section {
   background-image: url("@/assets/img/AiEmotion/bk00000.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  width: 100%;
+  width: 50vw;
   height: auto;
-  min-height: 50rem;
+  min-height: 30rem;
   margin: 0 auto;
 }
 
-.class06 {
+.energy-converter-section {
   background-image: url('@/assets/img/AiEmotion/bk00000.png');
-  /* 使用导入的背景图片 */
   background-size: 100% 100%;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
-  width: 100%;
-  /* 响应式容器宽度 */
-  max-width: 100%;
-  /* 确保不超出父容器 */
+  width: 50vw;
   height: auto;
-  /* 高度根据内容动态变化 */
-  min-height: 69rem;
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
-  /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
-  /* 添加平滑过渡效果 */
+  min-height: 85vh;
 }
 
-.class05 {
+.bottom-radar-section {
   background-image: url("@/assets/img/AiEmotion/bk00000.png");
-  /* 使用导入的背景图片 */
   background-size: 100% 100%;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
-  width: 100%;
-  /* 响应式容器宽度 */
+  width: 50vw;
   max-width: 100%;
-  /* 确保不超出父容器 */
   height: auto;
-  /* 高度根据内容动态变化 */
-  /* min-height: 90rem; */
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
-  /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
-  /* 添加平滑过渡效果 */
 }
 
-.class04 {
+.emotion-decoder-section {
   background-image: url('@/assets/img/AiEmotion/bk00000.png');
-  /* 使用导入的背景图片 */
   background-size: 100% 100%;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
-  width: 100%;
-  /* 响应式容器宽度 */
+  width: 50vw;
   max-width: 100%;
-  /* 确保不超出父容器 */
   height: auto;
-  /* 高度根据内容动态变化 */
-  /* min-height: 75rem; */
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
-  /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
-  /* 添加平滑过渡效果 */
   padding-bottom: 1rem;
 }
 
-.class03 {
+.market-temperature-section {
   background-image: url('@/assets/img/AiEmotion/bk00000.png');
-  /* 使用导入的背景图片 */
   background-size: 100% 100%;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
-  width: 100%;
-  /* 响应式容器宽度 */
+  width: 50vw;
   max-width: 100%;
-  /* 确保不超出父容器 */
   height: auto;
-  /* 高度根据内容动态变化 */
   min-height: 70rem;
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
-  /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
-  /* 添加平滑过渡效果 */
 }
 
-.class00 {
+.main-content-wrapper {
   background-size: 100% 100%;
-  /* 确保背景图片完整显示 */
   background-repeat: no-repeat;
-  /* 防止背景图片重复 */
-  width: 100%;
-  /* 响应式容器宽度 */
+  width: 77vw;
   max-width: 100%;
-  /* 确保不超出父容器 */
   height: auto;
-  /* 高度根据内容动态变化 */
-  /* min-height: 55rem; */
-  /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
-  /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
-  /* 添加平滑过渡效果 */
 }
 
-.content1 {
+.matrix-content {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -2452,26 +2381,22 @@ defineExpose({
   /* margin-left: 10%; */
 }
 
-.title1 {
+.matrix-main-title {
   color: white;
-  font-size: 30px;
+  font-size: 20px;
   font-weight: bold;
   margin-left: 0%;
 
 }
 
-
-
-
-.span02 {
+.market-temperature-value {
   font-size: 1.5rem;
   font-weight: bold;
   color: white;
-  float: right;
-  margin-top: -2%;
+  margin-left: auto;
 }
 
-.span01 {
+.market-temperature-label {
   background-image: url('@/assets/img/AiEmotion/bk01.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -2491,26 +2416,17 @@ defineExpose({
   box-sizing: border-box;
 }
 
-.class01 {
-  width: 90%;
-  /* 响应式容器宽度 */
+.main {
+  width: 83%;
   max-width: 1400px;
-  /* 设置最大宽度，避免在大屏幕上过度拉伸 */
   min-width: 320px;
-  /* 设置最小宽度，确保在小屏幕上可用 */
   min-height: 100px;
-  /* 设置最小高度，确保初始显示 */
   height: auto;
-  /* 高度根据内容动态变化 */
   padding: 1rem;
-  /* 添加内边距，确保内容与边界有间距 */
   box-sizing: border-box;
-  /* 包括内边距在宽度和高度计算中 */
   background-color: #2b378d;
   margin: 0 auto;
-  /* 居中容器 */
   transition: width 0.3s ease;
-  /* 添加平滑过渡效果 */
   margin-bottom: 10rem;
 }
 
@@ -2604,14 +2520,14 @@ defineExpose({
 
 /* 响应式布局媒体查询 */
 @media only screen and (max-width: 1200px) {
-  .class01 {
+  .main {
     width: 95%;
     padding: 0.8rem;
   }
 
-  .span01 {
+  .market-temperature-label {
     width: 40%;
-    min-width: 180px;
+    min-width: 170px;
     max-width: 60%;
     font-size: 1.3rem;
     overflow: hidden;
@@ -2619,7 +2535,7 @@ defineExpose({
     white-space: nowrap;
   }
 
-  .span02 {
+  .market-temperature-value {
     font-size: 1.3rem;
   }
 
@@ -2628,15 +2544,11 @@ defineExpose({
     min-height: 45rem;
   } */
 
-  .class03 {
+  .market-temperature-section {
     min-height: 60rem;
   }
 
-  .class06 {
-    min-height: 58rem;
-  }
-
-  .class08 {
+  .decision-tree-section {
     min-height: 42rem;
   }
 
@@ -2647,7 +2559,7 @@ defineExpose({
 }
 
 @media only screen and (max-width: 992px) {
-  .class01 {
+  .main {
     width: 98%;
     padding: 0.6rem;
   }
@@ -2657,15 +2569,11 @@ defineExpose({
     min-height: 40rem;
   } */
 
-  .class03 {
+  .market-temperature-section {
     min-height: 55rem;
   }
 
-  .class06 {
-    min-height: 50rem;
-  }
-
-  .class08 {
+  .decision-tree-section {
     min-height: 35rem;
   }
 
@@ -2678,24 +2586,42 @@ defineExpose({
 
 /* 手机端适配样式 */
 @media only screen and (max-width: 768px) {
-  .class01 {
+
+  .text-container .content {
+    display: block;
+    color: white;
+    text-align: center;
+    font-size: 16px;
+  }
+
+  .market-temperature-icon {
+    width: auto;
+    height: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    scale: 0.5;
+  }
+
+  .matrix-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .main {
     width: 100%;
     padding: 0.5rem;
     margin-bottom: 5rem;
   }
 
-  .container {
-    padding-top: 2%;
-  }
-
-  .title4 {
+  .energy-converter-text {
     color: white;
     font-size: 20px;
     font-weight: bold;
     margin-left: 28%;
   }
 
-  .class0603 {
+  .energy-converter-content {
     min-width: 100%;
     /* margin-top: 25%; */
   }
@@ -2707,20 +2633,20 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: contain;
     text-align: center;
-    width: 100%;
+    width: 90%;
     margin-top: 4%;
     height: 200px;
     min-height: 200px;
   }
 
-  .title3 {
+  .bottom-radar-text {
     color: white;
     font-size: 20px;
     font-weight: bold;
     margin-left: 30%;
   }
 
-  .title2 {
+  .emotion-decoder-text {
     color: white;
     font-size: 20px;
     font-weight: bold;
@@ -2729,34 +2655,33 @@ defineExpose({
 
   /* 图片样式 */
   .golden-wheel img {
-    width: 100%;
+    width: 50%;
   }
 
-  .class0201 img {
+  .matrix-title img {
     width: 100%;
   }
 
-  .class0301 img {
+  .temperature-title img {
     width: 100%;
     margin: 10px 10px;
   }
 
-  .class0403 img {
+  .emotion-decoder-title img {
     width: 100%;
     margin: 10px 10px;
   }
 
-  .class0501 img {
+  .bottom-radar-title img {
     width: 100%;
     margin: 10px 10px;
   }
 
-  .class0702 img {
-    width: 100%;
-    margin: 10px 10px;
+  .core-highlights-header img {
+    scale: 0.5;
   }
 
-  .class0700 img {
+  .core-logic-header img {
     width: 100%;
     margin: 10px 10px;
   }
@@ -2766,19 +2691,12 @@ defineExpose({
     height: auto;
   }
 
-  .class09 img {
+  .scenario-application-section img {
     width: 100%;
     margin: 10px 10px;
   }
 
-  .img01 {
-    height: auto;
-    /* margin-left: 7%; */
-    width: 15vw;
-    /* margin-top: 10px; */
-  }
-
-  .title1 {
+  .matrix-main-title {
     font-size: 20px;
     margin-left: 5%;
   }
@@ -2794,14 +2712,13 @@ defineExpose({
     padding: 8px;
   } */
 
-  .class02 .span02 {
+  .matrix-header .market-temperature-value {
     font-size: 14px;
     color: white;
     float: right;
-    margin-top: -6%;
   }
 
-  .class03 {
+  .market-temperature-section {
     background-image: url('@/assets/img/AiEmotion/bk00000.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -2811,7 +2728,7 @@ defineExpose({
   }
 
 
-  .class01 {
+  .main {
     min-height: 100px;
     height: auto;
     box-sizing: border-box;
@@ -2819,8 +2736,8 @@ defineExpose({
     margin-bottom: 10rem;
   }
 
-  .class04 {
-    width: 100%;
+  .emotion-decoder-section {
+    width: 80%;
     height: auto;
     margin: 0 auto;
     /* min-height: 38rem; */
@@ -2834,40 +2751,28 @@ defineExpose({
     min-height: 35rem;
   } */
 
-  .class03 {
+  .market-temperature-section {
     min-height: 45rem;
   }
 
-  .class06 {
-    min-height: 35rem;
-  }
-
-  .class02 .container img {
+  .matrix-header img {
     width: 68%;
     height: auto;
     /* margin-top: 5%; */
     margin-left: 0%;
   }
 
-  .img02 {
+  .emotion-decoder-icon {
     width: 25%;
     height: auto;
-    /* margin-left: 32%; */
-  }
-
-  .class0401 {
-    padding-top: 3rem;
+    scale: 0.5;
   }
 
-  .img03,
-  .img04 {
+  .bottom-radar-icon,
+  .energy-converter-icon {
     width: 25%;
     height: auto;
-    /* margin-left: 33%; */
-  }
-
-  .text-container p {
-    font-size: 16px;
+    scale: 0.5;
   }
 
   .lz-img {
@@ -2881,10 +2786,10 @@ defineExpose({
     }
   }
 
-  .class08 {
+  .decision-tree-section {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 100%;
+    width: 80vw;
     height: auto;
     min-height: 20rem;
     margin: 0 auto;
@@ -2941,44 +2846,21 @@ defineExpose({
   .bk-image {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 100%;
+    width: 80vw;
     height: auto;
     margin: 0 auto;
-    margin-top: 0px;
-    margin-left: 0;
 
     .conclusion-container {
       padding: 20px;
       border-radius: 15px;
       margin: 20px;
-      /* background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%); */
-      border: 2px solid rgba(0, 212, 255, 0.4);
-      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
 
       .conclusion-item {
-        margin-bottom: 20px;
-        padding: 20px;
         border-radius: 12px;
-        /* background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%); */
-        /* border: 1px solid rgba(0, 212, 255, 0.5); */
-        /* border-left: 5px solid #00d4ff; */
-        /* box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); */
         transition: all 0.3s ease;
-        position: relative;
         overflow: hidden;
       }
 
-      .conclusion-item::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
-        opacity: 0.8;
-      }
-
       .conclusion-item:last-child {
         margin-bottom: 0;
       }
@@ -2987,43 +2869,22 @@ defineExpose({
         color: #FFD700;
         font-size: 22px;
         font-weight: bold;
-        margin: 0 0 15px 0;
         text-align: center;
         letter-spacing: 2px;
-        margin-top: 10px;
-      }
-
-      .conclusion-item .conclusion-title::after {
-        content: '';
-        position: absolute;
-        bottom: -5px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 60px;
-        height: 2px;
-        background: linear-gradient(90deg, transparent, #00d4ff, transparent);
+        margin-top: 22px;
       }
 
       .conclusion-item .conclusion-text {
         color: #ffffff;
-        font-size: 20px;
+        font-size: 16px;
         line-height: 1.8;
         margin: 0 0 12px 0;
-        text-align: left;
+        text-align: center;
         word-wrap: break-word;
-        padding-left: 15px;
         position: relative;
       }
 
-      .conclusion-item .conclusion-text::before {
-        content: '▶';
-        position: absolute;
-        left: 0;
-        top: 0;
-        color: #00d4ff;
-        font-size: 12px;
-        opacity: 0.7;
-      }
+
 
       .conclusion-item .conclusion-text:last-child {
         margin-bottom: 0;
@@ -3048,7 +2909,6 @@ defineExpose({
     .disclaimer-item {
       /* margin-top: 30px; */
       padding-bottom: 15%;
-      border-top: 1px solid rgba(153, 153, 153, 0.2);
       text-align: center;
     }
 
@@ -3060,38 +2920,24 @@ defineExpose({
     }
   }
 
-  .class05 {
+  .bottom-radar-section {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 100%;
+    width: 80%;
     height: auto;
     /* min-height: 48rem; */
   }
 
-  .class06 {
+  .energy-converter-section {
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    width: 100%;
+    width: 80%;
     height: auto;
-    min-height: 35rem;
     margin: 0 auto;
+    min-height: 55vh;
   }
 
-  .text-container {
-    position: relative;
-    top: 0;
-    left: 0;
-    color: white;
-    text-align: left;
-    padding: 5%;
-  }
-
-  .class003 {
-    padding-top: 12%;
-    gap: 20vw;
-  }
-
-  .div00 {
+  .temperature-display {
     display: flex;
     flex-direction: column;
     /* margin-left: 5rem; */
@@ -3102,16 +2948,22 @@ defineExpose({
   }
 
 
-  .class003 .div01,
-  .class003 .div02 {
-    /* width: 80%; */
-    min-width: 250px;
+  .temperature-content .temperature-cold,
+  .temperature-content .temperature-hot {
+    min-width: 200px;
     font-size: 16px;
-    min-height: 35px;
+  }
+
+  .temperature-content {
+    padding-top: 8%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0rem;
   }
 
 
-  .span01 {
+  .market-temperature-label {
     background-image: url('@/assets/img/AiEmotion/bk01.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
@@ -3123,12 +2975,7 @@ defineExpose({
     width: 50%;
   }
 
-  .class0502,
-  .class0601 {
-    padding-top: 10%;
-  }
-
-  .div00 {
+  .temperature-display {
     flex-direction: column;
     gap: 1rem;
     align-items: center;
@@ -3140,15 +2987,14 @@ defineExpose({
     padding: 8px;
   } */
 
-  .span02 {
+  .market-temperature-value {
     font-size: 1.2rem;
-    margin-top: -3%;
   }
 
-  .title1,
-  .title2,
-  .title3,
-  .title4 {
+  .matrix-main-title,
+  .emotion-decoder-text,
+  .bottom-radar-text,
+  .energy-converter-text {
     font-size: 18px;
     margin-left: 0;
   }
@@ -3156,30 +3002,24 @@ defineExpose({
 
 /* 超小屏幕设备 */
 @media only screen and (max-width: 480px) {
-  .class01 {
+  .main {
     width: 100%;
     padding: 0.3rem;
     margin-bottom: 3rem;
   }
 
-  .div00 {
+  .temperature-display {
     flex-direction: column;
     gap: 0.8rem;
     align-items: center;
   }
 
-  .class003 {
-    padding-top: 14%;
-    gap: 30px;
-  }
-
-  .class003 .div01,
-  .class003 .div02 {
+  .temperature-content .temperature-cold,
+  .temperature-content .temperature-hot {
     /* width: 90%; */
     width: 10vw;
-    min-width: 200px;
+    min-width: 120px;
     font-size: 14px;
-    min-height: 30px;
   }
 
   /* .span01 {
@@ -3188,7 +3028,7 @@ defineExpose({
     padding: 6px;
   } */
 
-  .span02 {
+  .market-temperature-value {
     font-size: 1rem;
   }
 
@@ -3201,15 +3041,11 @@ defineExpose({
     min-height: 25rem;
   } */
 
-  .class03 {
+  .market-temperature-section {
     min-height: 35rem;
   }
 
-  .class06 {
-    min-height: 32rem;
-  }
-
-  .class08 {
+  .decision-tree-section {
     min-height: 15rem;
   }
 
@@ -3312,7 +3148,7 @@ defineExpose({
 }
 
 /* class01容器样式 */
-.class01 {
+.main {
   position: relative;
 }
 
diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue
index 06e985b..63feff8 100644
--- a/src/views/components/emoEnergyConverter.vue
+++ b/src/views/components/emoEnergyConverter.vue
@@ -109,40 +109,50 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       min: qxnlzhqData.dd,
       max: qxnlzhqData.zc,
       name: "【情绪冰点区】",
-      color: "#FF9F9F",
-      fontColor: '#2D2D89',
+      color: "#F5D6FF",
+      fontColor: '#A7691C',
       NumberColor: 'white',
     },
     {
       min: qxnlzhqData.zc,
       max: qxnlzhqData.ht,
       name: "【认知潜伏区】",
-      color: "#FFCB75",
-      fontColor: '#2D2D89',
+      color: "#FFF6C4",
+      fontColor: '#A7691C',
       NumberColor: 'white',
     },
     {
       min: qxnlzhqData.ht,
       max: qxnlzhqData.qs,
       name: "【多空消化区】",
-      color: "#D7E95D",
-      fontColor: '#2D2D89',
+      color: {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 1,
+        y2: 0,
+        colorStops: [
+          { offset: 0, color: '#D7FF9B' },
+          { offset: 1, color: '#CEFF85' }
+        ]
+      },
+      fontColor: '#A7691C',
       NumberColor: 'white',
     },
     {
       min: qxnlzhqData.qs,
       max: qxnlzhqData.tp,
       name: "【共识加速区】",
-      color: "#A0F56F",
-      fontColor: '#2D2D89',
+      color: "#FFDC8F",
+      fontColor: '#A7691C',
       NumberColor: 'white',
     },
     {
       min: qxnlzhqData.tp,
       max: qxnlzhqData.js,
       name: "【情绪临界区】",
-      color: "#87F3CD",
-      fontColor: '#2D2D89',
+      color: "#FFC0AA",
+      fontColor: 'white',
       NumberColor: 'white',
     },
   ];
@@ -176,9 +186,43 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   const priceValues = kline.flatMap(item => [item[1], item[2], item[3], item[4]]);
   const dataMin = Math.min(...priceValues);
   const dataMax = Math.max(...priceValues);
+
+  // 找到最高价的最大值及其对应的索引
+  let maxHighPrice = -Infinity;
+  let maxHighPriceIndex = -1;
+  kline.forEach((item, index) => {
+    const highPrice = item[4]; // 最高价在数组的第5个位置（索引4）
+    if (highPrice > maxHighPrice) {
+      maxHighPrice = highPrice;
+      maxHighPriceIndex = index;
+    }
+  });
   // 计算止盈止损价格
   const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价
   const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价
+
+  // 计算最后一根K线的收盘价
+  const lastClosePrice = mixData[mixData.length - 1].value[2];
+
+  // 动态调整标记位置以避免与止盈止损线重叠
+  const priceBuffer = (dataMax - dataMin) * 0.02; // 2%的缓冲区间
+
+  // 最高价标记位置调整
+  let maxPricePosition = 'top';
+  let maxPriceOffset = [0, -5];
+  if (Math.abs(maxHighPrice - stopProfitPrice) < priceBuffer) {
+    maxPriceOffset = [0, -25]; // 增加偏移避免重叠
+  }
+
+  // 收盘价标记位置调整
+  let closePricePosition = 'bottom';
+  let closePriceOffset = [0, 15];
+  if (Math.abs(lastClosePrice - stopLossPrice) < priceBuffer) {
+    closePriceOffset = [0, 25]; // 增加偏移避免重叠
+  }
+  if (Math.abs(lastClosePrice - stopProfitPrice) < priceBuffer) {
+    closePriceOffset = [0, 25]; // 增加偏移避免重叠
+  }
   // 确定起始和结束位置
   const startIndex = Math.max(0, mixData.length - 17);
   // 创建完整数据数组
@@ -274,10 +318,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         const chartHeight = size.viewSize[1];
         const tooltipWidth = size.contentSize[0];
         const tooltipHeight = size.contentSize[1];
-        
+
         // 检测是否为移动设备
         const isMobile = window.innerWidth <= 768;
-        
+
         if (isMobile) {
           // 移动端：固定在顶部中央
           return {
@@ -288,17 +332,17 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           // 桌面端：智能定位
           let x = point[0];
           let y = point[1];
-          
+
           // 防止tooltip超出右边界
           if (x + tooltipWidth > chartWidth) {
             x = chartWidth - tooltipWidth - 10;
           }
-          
+
           // 防止tooltip超出下边界
           if (y + tooltipHeight > chartHeight) {
             y = chartHeight - tooltipHeight - 10;
           }
-          
+
           return [Math.max(10, x), Math.max(10, y)];
         }
       },
@@ -316,16 +360,16 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           borderWidth: 1
         }
       },
-      backgroundColor: '#646E71',
+      backgroundColor: '#E8E8F2',
       borderColor: '#fff',
       borderWidth: 1,
       padding: [8, 12],
       textStyle: {
-        color: '#fff',
+        color: '#000',
         fontSize: window.innerWidth <= 768 ? 10 : 12 // 移动端使用更小字体
       },
-      extraCssText: window.innerWidth <= 768 ? 
-        'max-width: 280px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);' : 
+      extraCssText: window.innerWidth <= 768 ?
+        'max-width: 280px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);' :
         'max-width: 350px; word-wrap: break-word; white-space: normal; box-shadow: 0 2px 8px rgba(0,0,0,0.3);',
       formatter: function (params) {
         if (!params || params.length === 0) return ''
@@ -335,7 +379,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         const lineHeight = isMobile ? '1.3' : '1.5';
         const marginBottom = isMobile ? '4px' : '6px';
 
-        let result = `<div style="font-weight: bold; color: #fff; margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">${params[0].name}</div>`
+        let result = `<div style="font-weight: bold; color: #000; margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">${params[0].name}</div>`
 
         params.forEach(param => {
           let value = param.value
@@ -353,33 +397,48 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
               return ''
             }
 
-            let priceChange = closePrice - openPrice
-            let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
-            let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a'
+            // 获取前一日收盘价用于计算涨跌幅
+            let previousClosePrice = null;
+            const currentIndex = param.dataIndex;
+            if (currentIndex > 0 && mixData[currentIndex - 1]) {
+              previousClosePrice = mixData[currentIndex - 1].value[2]; // 前一日收盘价
+            }
+
+            let priceChange, changePercent;
+            if (previousClosePrice !== null && typeof previousClosePrice === 'number') {
+              // 使用前一日收盘价计算涨跌幅
+              priceChange = closePrice - previousClosePrice;
+              changePercent = ((priceChange / previousClosePrice) * 100).toFixed(2);
+            } else {
+              // 如果没有前一日数据，使用开盘价计算（兜底方案）
+              priceChange = closePrice - openPrice;
+              changePercent = ((priceChange / openPrice) * 100).toFixed(2);
+            }
+            let changeColor = priceChange >= 0 ? '#32B520' : '#D8001B'
 
             if (isMobile) {
               // 移动端简化显示
               result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`
-              result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${openPrice.toFixed(2)}</span></div>`
-              result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${closePrice.toFixed(2)}</span></div>`
-              result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最低价:</span><span>${lowPrice.toFixed(2)}</span></div>`
-              result += `<div style="color: #fff; display: flex; justify-content: space-between;"><span>最高价:</span><span>${highPrice.toFixed(2)}</span></div>`
+              result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>开盘价:</span><span>${openPrice.toFixed(2)}</span></div>`
+              result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>收盘价:</span><span>${closePrice.toFixed(2)}</span></div>`
+              result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>最低价:</span><span>${lowPrice.toFixed(2)}</span></div>`
+              result += `<div style="color: #000; display: flex; justify-content: space-between;"><span>最高价:</span><span>${highPrice.toFixed(2)}</span></div>`
               result += `<div style="color: ${changeColor}; display: flex; justify-content: space-between;"><span>涨跌:</span><span>${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</span></div>`
               result += `</div>`
             } else {
               // 桌面端完整显示
               result += `<div style="margin-bottom: ${marginBottom}; font-size: ${fontSize}; line-height: ${lineHeight};">`
-              result += `<div style="color: #fff;">开盘价: ${openPrice.toFixed(2)}</div>`
-              result += `<div style="color: #fff;">收盘价: ${closePrice.toFixed(2)}</div>`
-              result += `<div style="color: #fff;">最低价: ${lowPrice.toFixed(2)}</div>`
-              result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(2)}</div>`
+              result += `<div style="color: #000;">开盘价: ${openPrice.toFixed(2)}</div>`
+              result += `<div style="color: #000;">收盘价: ${closePrice.toFixed(2)}</div>`
+              result += `<div style="color: #000;">最低价: ${lowPrice.toFixed(2)}</div>`
+              result += `<div style="color: #000;">最高价: ${highPrice.toFixed(2)}</div>`
               result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
               result += `</div>`
             }
           } else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #FF0000; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止盈' : param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #FC0000; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止盈' : param.seriesName}: ${value.toFixed(2)}</div>`
           } else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #001EFF; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #002DFF; margin-bottom: 2px; font-size: ${fontSize}; line-height: ${lineHeight};">${isMobile ? '止损' : param.seriesName}: ${value.toFixed(2)}</div>`
           }
         })
 
@@ -417,7 +476,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
     ],
     xAxis: {
       type: "category",
-      data: mixData.map((item) => item.date),
+      data: [...mixData.map((item) => item.date), '', '', ''], // 在末尾添加三个空占位符，留出三根K线的距离
       axisLabel: {
         rotate: 0, // 取消倾斜角度
         color: "white",
@@ -429,6 +488,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           color: 'white', // x轴线颜色
         }
       },
+      axisTick: {
+        show: true,
+        alignWithLabel: true, // 刻度线与标签对齐
+        lineStyle: {
+          color: "white", // 与十字线颜色保持一致
+          width: 1,
+          type: "dashed" // 与十字线样式保持一致
+        }
+      },
     },
     yAxis: {
       scale: true,
@@ -469,17 +537,73 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         markPoint: {
           symbol: 'circle',
           symbolSize: 10,
-          data: markPointData,
+          data: [
+            ...markPointData,
+            // 添加最高价标记
+            {
+              name: '最高价',
+              coord: [maxHighPriceIndex, maxHighPrice],
+              itemStyle: {
+                normal: {
+                  color: 'transparent', // 透明标记点
+                  borderColor: 'transparent',
+                  borderWidth: 0
+                }
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: maxPricePosition,
+                  formatter: `${maxHighPrice.toFixed(2)}`,
+                  textStyle: {
+                    color: 'rgb(0,170,255)',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    // textBorderColor: '#000000',
+                    textBorderWidth: 1
+                  },
+                  offset: maxPriceOffset
+                }
+              }
+            },
+            // 添加最后一根K线收盘价标记
+            {
+              name: '收盘价',
+              coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
+              itemStyle: {
+                normal: {
+                  color: 'transparent', // 透明标记点
+                  borderColor: 'transparent',
+                  borderWidth: 0
+                }
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: closePricePosition,
+                  formatter: `${lastClosePrice.toFixed(2)}`,
+                  textStyle: {
+                    color: 'rgb(59,143,8)',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    // textBorderColor: '#000000',
+                    textBorderWidth: 1
+                  },
+                  offset: closePriceOffset
+                }
+              }
+            }
+          ],
           z: 5 // 确保标记显示在最上层
         },
         itemStyle: {
           normal: {
             // 阳线样式（收盘 > 开盘）
             // color: '#14b143',     // 开盘价 < 收盘价时为绿色
-            color: 'rgba(0,0,0,0)',
-            color0: '#ef232a',    // 开盘价 > 收盘价时为红色
-            borderColor: '#14b143',   // 阳线边框色（绿）
-            borderColor0: '#ef232a',  // 阴线边框色（红）
+            color: '#00AAFF',
+            color0: '#FF007F',    // 开盘价 > 收盘价时为红色
+            borderColor: '#00AAFF',   // 阳线边框色（绿）
+            borderColor0: '#FF007F',  // 阴线边框色（红）
             borderWidth: 1.5
           }
         },
@@ -536,7 +660,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             type: 'solid'
           }
         },
-        z: 1,
+        z: 10,
         silent: true,
         showInLegend: false
       },
@@ -552,31 +676,29 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             type: 'solid'
           }
         },
-        z: 2,
+        z: 10,
         markPoint: {
           symbol: 'circle',
           symbolSize: 1,
           data: [
             {
-              coord: [mixData.map((item) => item.value).length - 1, stopProfitPrice],
+              coord: [startIndex, stopProfitPrice],
               itemStyle: {
-                color: '#ff80ff'
+                color: 'transparent'
               },
               label: {
                 normal: {
                   show: true,
-                  position: 'top',
-                  formatter: `{text|止盈}`,
-                  rich: {
-                    text: {
-                      color: '#FF0000',
-                      fontSize: 14,
-                      fontWeight: 'bold',
-                      textBorderColor: '#ffffff',
-                      textBorderWidth: 2
-                    }
+                  position: 'left',
+                  formatter: `止盈${stopProfitPrice.toFixed(2)}`,
+                  textStyle: {
+                    color: '#FF0000',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    textBorderColor: '#ffffff',
+                    textBorderWidth: 2
                   },
-                  offset: [-20, 0]
+                  offset: [-10, 0]
                 }
               }
             }
@@ -595,7 +717,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             type: 'solid'
           }
         },
-        z: 1,
+        z: 10,
         silent: true,
         showInLegend: false
       },
@@ -611,117 +733,115 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             type: 'solid'
           }
         },
-        z: 2,
-        markPoint: {
-          symbol: 'circle',
-          symbolSize: 1,
-          data: [
-            {
-              coord: [mixData.map((item) => item.value).length - 1, stopLossPrice],
-              itemStyle: {
-                color: '#080bfd'
-              },
-              label: {
-                normal: {
-                  show: true,
-                  position: 'bottom',
-                  formatter: `{text|止损}`,
-                  rich: {
-                    text: {
-                      color: '#001EFF',
-                      fontSize: 14,
-                      fontWeight: 'bold',
-                      textBorderColor: '#ffffff',
-                      textBorderWidth: 2
-                    }
-                  },
-                  offset: [-20, 0]
-                }
-              }
-            }
-          ]
-        }
-      },
-      {
-        name: '最低价',
-        type: 'line',
-        symbol: 'none',
-        lineStyle: {
-          normal: {
-            color: 'transparent',
-            width: 0
-          }
-        },
+        z: 10,
         markPoint: {
           symbol: 'circle',
           symbolSize: 1,
           data: [
             {
-              coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
+              coord: [startIndex, stopLossPrice],
               itemStyle: {
                 color: 'transparent'
               },
               label: {
                 normal: {
                   show: true,
-                  position: 'bottom',
-                  formatter: `{text| ${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
-                  rich: {
-                    text: {
-                      color: '#001EFF',
-                      fontSize: 12,
-                      fontWeight: 'bold',
-                      textBorderColor: '#ffffff',
-                      textBorderWidth: 2,
-                    }
+                  position: 'left',
+                  formatter: `止损${stopLossPrice.toFixed(2)}`,
+                  textStyle: {
+                    color: '#001EFF',
+                    fontSize: 12,
+                    fontWeight: 'bold',
+                    textBorderColor: '#ffffff',
+                    textBorderWidth: 2
                   },
-                  offset: [-25, -40]
+                  offset: [-10, 0]
                 }
               }
             }
           ]
         }
       },
-      {
-        name: '最高价',
-        type: 'line',
-        symbol: 'none',
-        lineStyle: {
-          normal: {
-            color: 'transparent',
-            width: 0
-          }
-        },
-        markPoint: {
-          symbol: 'circle',
-          symbolSize: 1,
-          data: [
-            {
-              coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
-              itemStyle: {
-                color: 'transparent'
-              },
-              label: {
-                normal: {
-                  show: true,
-                  position: 'top',
-                  formatter: `{text| ${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
-                  rich: {
-                    text: {
-                      color: '#FF0000',
-                      fontSize: 12,
-                      fontWeight: 'bold',
-                      textBorderColor: '#ffffff',
-                      textBorderWidth: 2,
-                    }
-                  },
-                  offset: [-25, 40]
-                }
-              }
-            }
-          ]
-        }
-      }
+      // {
+      //   name: '最低价',
+      //   type: 'line',
+      //   symbol: 'none',
+      //   lineStyle: {
+      //     normal: {
+      //       color: 'transparent',
+      //       width: 0
+      //     }
+      //   },
+      //   markPoint: {
+      //     symbol: 'circle',
+      //     symbolSize: 1,
+      //     data: [
+      //       {
+      //         coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
+      //         itemStyle: {
+      //           color: 'transparent'
+      //         },
+      //         label: {
+      //           normal: {
+      //             show: true,
+      //             position: 'bottom',
+      //             formatter: `{text| ${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
+      //             rich: {
+      //               text: {
+      //                 color: '#001EFF',
+      //                 fontSize: 12,
+      //                 fontWeight: 'bold',
+      //                 textBorderColor: '#ffffff',
+      //                 textBorderWidth: 2,
+      //               }
+      //             },
+      //             offset: [-25, -40]
+      //           }
+      //         }
+      //       }
+      //     ]
+      //   }
+      // },
+      // {
+      //   name: '最高价',
+      //   type: 'line',
+      //   symbol: 'none',
+      //   lineStyle: {
+      //     normal: {
+      //       color: 'transparent',
+      //       width: 0
+      //     }
+      //   },
+      //   markPoint: {
+      //     symbol: 'circle',
+      //     symbolSize: 1,
+      //     data: [
+      //       {
+      //         coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
+      //         itemStyle: {
+      //           color: 'transparent'
+      //         },
+      //         label: {
+      //           normal: {
+      //             show: true,
+      //             position: 'top',
+      //             formatter: `{text| ${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
+      //             rich: {
+      //               text: {
+      //                 color: '#FF0000',
+      //                 fontSize: 12,
+      //                 fontWeight: 'bold',
+      //                 textBorderColor: '#ffffff',
+      //                 textBorderWidth: 2,
+      //               }
+      //             },
+      //             offset: [-25, 40]
+      //           }
+      //         }
+      //       }
+      //     ]
+      //   }
+      // }
     ],
     grid: {
       left: "13%",
@@ -814,7 +934,7 @@ onBeforeUnmount(() => {
 <style scoped>
 #qxnlzhqEcharts {
   width: 100%;
-  height: 700px;
+  height: 542px;
   margin: 0;
   box-sizing: border-box;
   overflow: hidden;
diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue
index c7c3c2e..ddbc56f 100644
--- a/src/views/components/emotionDecod.vue
+++ b/src/views/components/emotionDecod.vue
@@ -89,7 +89,10 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
 
     //控制坐标轴
     grid: [
-      { top: "5%", height: "40%" },
+      {
+        top: "5%",
+        height: window.innerWidth <= 768 ? "30%" : "40%"
+      },
       { top: "45%", height: "35%" },
       { top: "80%", height: "2%" },
     ],
@@ -161,6 +164,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           },
           type: "line",
         },
+        axisTick: {
+          show: true,
+          alignWithLabel: true, // 刻度线与标签对齐
+          lineStyle: {
+            color: "white", // 与十字线颜色保持一致
+            width: 1,
+            type: "dashed" // 与十字线样式保持一致
+          }
+        },
       },
     ],
     yAxis: [
@@ -266,7 +278,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           shadowOffsetX: 2,
           shadowOffsetY: 2,
         },
-        bottom: window.innerWidth > 768 ? "10%" : "5%", // 下移数据缩放滑块
+        bottom: window.innerWidth > 768 ? "8%" : "5%", // 下移数据缩放滑块
       },
       {
         show: !1,
@@ -471,7 +483,7 @@ onBeforeUnmount(() => {
 
 #qxjmqEcharts {
   width: 100%;
-  height: 800px;
+  height: 542px;
   margin: 0;
   /* top: 5rem; */
   box-sizing: border-box;
diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue
index e8da8f4..a677dec 100644
--- a/src/views/components/emotionalBottomRadar.vue
+++ b/src/views/components/emotionalBottomRadar.vue
@@ -137,14 +137,14 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
       axisPointer: {
         type: 'cross',
         crossStyle: {
-          color: '#fff',
+          color: 'grey',
           width: 1,
-          type: 'solid'
+          type: 'dashed'
         },
         lineStyle: {
-          color: '#fff',
+          color: 'grey',
           width: 1,
-          type: 'solid'
+          type: 'dashed'
         },
         label: {
           backgroundColor: 'rgba(0, 0, 0, 0.8)',
@@ -154,14 +154,15 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         }
       },
       // backgroundColor: 'rgba(0, 0, 0, 0.8)',
-      backgroundColor: '#646E71',
-      borderColor: '#fff',
-      borderWidth: 1,
-      padding: 10,
-      textStyle: {
-        color: '#fff',
-        fontSize: 12
-      },
+      backgroundColor: 'rgba(232, 232, 242, 0.87)',
+			borderColor: '#fff',
+			borderWidth: 1,
+			borderRadius: 8,
+			padding: 10,
+			textStyle: {
+				color: '#fff',
+				fontSize: 12
+			},
       formatter: function (params) {
         if (!params || params.length === 0) return ''
 
@@ -203,9 +204,16 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
               return ''
             }
 
-            let priceChange = closePrice - openPrice
-            let changePercent = ((priceChange / openPrice) * 100).toFixed(2)
-            let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a' // 互换颜色：上涨红色，下跌绿色
+            // 获取前一日收盘价
+            let previousClosePrice = null;
+            const currentIndex = param.dataIndex;
+            if (currentIndex > 0 && kLineDataArray && kLineDataArray[currentIndex - 1]) {
+              // 从原始K线数据中获取前一日收盘价
+              const previousData = kLineDataArray[currentIndex - 1];
+              if (previousData && Array.isArray(previousData) && previousData.length >= 2) {
+                previousClosePrice = previousData[1]; // 前一日收盘价（ECharts格式：[开盘, 收盘, 最低, 最高]）
+              }
+            }
 
             result += `<div style="margin-bottom: 6px;">`
             result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
@@ -213,7 +221,15 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
             result += `<div style="color: #fff;">收盘价: ${closePrice.toFixed(1)}</div>`
             result += `<div style="color: #fff;">最低价: ${lowPrice.toFixed(1)}</div>`
             result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(1)}</div>`
-            result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
+
+            // 只有当存在前一日收盘价时才显示涨跌幅
+            if (previousClosePrice !== null && typeof previousClosePrice === 'number') {
+              let priceChange = closePrice - previousClosePrice;
+              let changePercent = ((priceChange / previousClosePrice) * 100).toFixed(2);
+              let changeColor = priceChange >= 0 ? '#14b143' : '#ef232a'; // 互换颜色：上涨红色，下跌绿色
+              result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`;
+            }
+
             result += `</div>`
           } else if (param.seriesName === '红线') {
             result += `<div style="color: #ef232a; margin-bottom: 4px;">${param.seriesName}: ${value}</div>`
@@ -239,16 +255,16 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         right: '3%',
         top: '20px',
         bottom: '50%',
-        height: '300px',
+        height: '150px',
         width: '85%'
         // containLabel: true
       },
       {
         left: '10%',
         right: '3%',
-        top: '320px',
+        top: '170px',
         bottom: '25%',
-        height: '300px',
+        height: '150px',
         width: '85%'
 
         // containLabel: true
@@ -256,9 +272,9 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
       {
         left: '10%',
         right: '3%',
-        top: '620px',
+        top: '320px',
         bottom: '50px',
-        height: '300px',
+        height: '150px',
         width: '85%'
 
         // containLabel: true
@@ -277,7 +293,13 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           }
         },
         axisTick: {
-          show: false
+          show: true,
+          alignWithLabel: true, // 刻度线与标签对齐
+          lineStyle: {
+            color: "#999", // 与十字线颜色保持一致
+            width: 1,
+            type: "dashed" // 与十字线样式保持一致
+          }
         },
         axisLabel: {
           show: false
@@ -462,7 +484,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         start: 0,
         end: 100,
         show: true,
-        bottom: window.innerWidth > 768 ? 80 : 50,
+        bottom: window.innerWidth > 768 ? 30 : 50,
         height: 20,
         borderColor: '#CFD6E3',
         fillerColor: 'rgba(135, 175, 274, 0.2)',
@@ -699,7 +721,7 @@ onBeforeUnmount(() => {
 <style>
 #bottomRadarChart {
   width: 100%;
-  height: 1040px;
+  height: 542px;
   box-sizing: border-box;
   overflow: hidden;
   margin: 0px auto !important;
diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue
index 2ac0caf..62b42ee 100644
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@@ -490,14 +490,16 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
     },
     legend: {
       data: ["K线", "股票温度", "市场温度"],
-      textStyle: { color: "white", fontSize: 18 },
+      textStyle: { color: "white", fontSize: window.innerWidth <= 768 ? 14 : 18 },
     },
     grid: {
-      left: window.innerWidth <= 768 ? '40px' : '100px', // 移动端使用较小边距，桌面端为四位数预留足够空间
+      left: window.innerWidth <= 768 ? '50px' : '100px', // 移动端使用较小边距，桌面端为四位数预留足够空间
       right: window.innerWidth <= 768 ? '40px' : '100px', // 为右侧y轴预留空间
       top: window.innerWidth <= 768 ? '40px' : '60px',
       bottom: window.innerWidth <= 768 ? '60px' : '80px', // 为dataZoom预留空间
-      containLabel: false // 不自动包含标签，使用固定边距
+      containLabel: false, // 不自动包含标签，使用固定边距
+      height: window.innerWidth <= 768 ? '200px' : '300px',
+      width: window.innerWidth <= 768 ? '70%' : '80%',
     },
     xAxis: {
       type: "category",
@@ -509,7 +511,15 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
         fontWeight: "bold",
       },
 
-      axisTick: { lineStyle: { color: "#00BFFF" } },
+      axisTick: { 
+        show: true,
+        alignWithLabel: true, // 刻度线与标签对齐
+        lineStyle: { 
+          color: "white", // 与十字线颜色保持一致
+          width: 1,
+          type: "dashed" // 与十字线样式保持一致
+        } 
+      },
       axisPointer: {
         show: true,
         type: "line",
@@ -523,6 +533,15 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
           color: "black",
         },
       },
+      splitLine: {
+        show: false, // 显示网格线
+        lineStyle: {
+          color: "#999",
+          width: 1,
+          type: "dashed",
+          opacity: 0.3 // 设置透明度使网格线不太突出
+        }
+      },
     },
     yAxis: [
       {
@@ -790,7 +809,7 @@ defineExpose({ initChart });
 
 .KlineClass {
   width: 100%;
-  height: 600px;
+  height: 420px;
 }
 
 .market-temperature {
@@ -810,23 +829,23 @@ defineExpose({ initChart });
 }
 
 .border3 {
-  margin-top: 40px;
+  /* margin-top: 40px; */
   border-radius: 8px;
   padding: 20px;
   /* margin-left: 0; */
   width: 100%;
-  height: 100%;
+  height: auto;
   box-sizing: border-box;
   overflow: hidden;
 }
 
 .border4 {
-  margin-top: 40px;
+  /* margin-top: 40px; */
   border-radius: 8px;
   padding: 20px;
   width: 80%;
   /* margin-left: 8%; */
-  height: 48vw;
+  height: 35vw;
   overflow: visible;
 }
 
@@ -861,7 +880,7 @@ defineExpose({ initChart });
     margin-top: 0px;
     border-radius: 8px;
     padding: 0px;
-    width: 100%;
+    width: 80%;
     margin-left: 0%;
     height: 80vw;
     overflow: visible;
@@ -1048,6 +1067,9 @@ defineExpose({ initChart });
   display: flex;
   justify-content: center;
   align-items: center;
+  @media only screen and (max-width: 768px) {
+    font-size: 12px;
+  }
 }
 
 .calendar {
@@ -1101,7 +1123,7 @@ defineExpose({ initChart });
 }
 
 .monthContent {
-  margin-top: 1.2vw;
+  margin-top: 0.5vw;
   font-weight: bold;
   font-size: 1.2vw;
 }