diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index e99a26b..c8e0dbe 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -27,12 +27,7 @@
             <div class="class02">
                 <div class="container">
                     <img class="item" :src="item" alt="思维矩阵图片" />
-                    <div class="span01" style="
-        position: relative;
-        top: 0.5rem;
-        left: -14rem;
-        transform: translate(-50%, -50%);
-    ">
+                    <div class="span01">
                         {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
                     </div>
                 </div>
@@ -43,7 +38,7 @@
             </div>
             <!-- 温度计图表 -->
             <div class="class03">
-                <div class="class003" style="padding-top: 7rem;padding-left: 12rem;">
+                <div class="class003">
                     <div class="content1">
                         <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
                         <span class="title1">股票温度计</span>
@@ -132,13 +127,13 @@
 import { ref, reactive } from 'vue';
 import { getReplyAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
 import axios from 'axios';
-import { useChatStore } from '@/store/chat.js';
 import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
 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';
 import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
+import { ElMessage } from 'element-plus';
 
 const stockName = ref(''); // 存储股票名称
 const marketTemperatureRef = ref(null); // 引用市场温度计组件
@@ -147,7 +142,7 @@ const emotionDecodRef = ref(null)
 const emotionalBottomRadarRef = ref(null)
 const messages = ref([]);
 const displayDate = ref(''); // 用于存储显示的日期
-const isPageLoaded = ref(true); // 控制页面是否显示
+const isPageLoaded = ref(false); // 控制页面是否显示
 const isRotating = ref(false);//控制旋转
 const userInputDisplayRef = ref(null);//消息区域的引用
 const data1 = ref(null); // 个股温度
@@ -163,15 +158,6 @@ function startImageRotation() {
         isRotating.value = false;
     }, 5000); // 5 秒后停止旋转
 }
-// 更新 span01 中股票名字的方法
-function updateSpan01() {
-    nextTick(() => {
-        const span01 = document.querySelector('.span01');
-        if (span01) {
-            span01.textContent = `${stockName.value}量子四维矩阵图`;
-        }
-    });
-}
 
 
 // 发送消息方法
@@ -220,18 +206,18 @@ async function handleSendMessage(input) {
                 fetchData(parsedData.code, parsedData.market);
 
                 // 更新 span01 的内容
-                updateSpan01();
+                // updateSpan01();
             } else {
-                console.error('工作流接口返回非股票信息:', parsedData.refuse);
+                ElMessage.error('工作流接口未返回非股票信息');
             }
         } catch (error) {
-            console.error('请求工作流接口失败:', error);
+            ElMessage.error('请求工作流接口失败，请检查网络连接');
         } finally {
             // 停止图片旋转
             isRotating.value = false;
         }
     } else {
-
+        ElMessage.error('消息发送失败，请检查网络连接');
     }
 }
 
@@ -241,8 +227,8 @@ async function fetchData(code, market) {
         const stockDataParams = {
             // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
             token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
-            market: 'usa',
-            code: 'TSLA',
+            market: market,
+            code: code,
             language: 'cn',
             version: version1.value
         };
@@ -259,13 +245,10 @@ async function fetchData(code, market) {
         );
 
         const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
-
-        const chatStore = useChatStore();
-        chatStore.kLineData.push(stockDataResponse.data);
-
         console.log('图表数据接口返回数据:', stockDataResponse.data);
 
         if (stockDataResponse.code === 200 && stockDataResponse.data) {
+            console.log(stockDataResponse.code)
             // 数据清洗并四舍五入xx
             const lastTwoNumbers = stockDataResponse.data.GSWDJ.map(([date, num1, num2]) => [
                 date,
@@ -278,16 +261,16 @@ async function fetchData(code, market) {
             data2.value = lastTwoNumbers[2] // 市场温度
             console.log('1111111111111111111111')
             // 调用渲染图表的方法
-            renderCharts(chatStore.kLineData[chatStore.kLineData.length - 1]);
-            console.log('2222222222222222222222')
-
+            // renderCharts(stockDataResponse.data);
             // 数据和图表加载完成，显示页面
-            // isPageLoaded.value = true;
-        } else {
+            isPageLoaded.value = true;
+            renderCharts(stockDataResponse.data);
 
+        } else {
+            ElMessage.error('获取接口数据失败');
         }
     } catch (error) {
-
+        ElMessage.error('获取接口数据失败。。。');
     }
 }
 
@@ -335,6 +318,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.class003 {
+    padding-top: 7rem;
+    padding-left: 12rem;
+}
+
 .class003 .div02 {
     background-image: url('@/assets/img/AiEmotion/redBorder.png');
     background-repeat: no-repeat;
@@ -438,11 +426,9 @@ onMounted(() => {
     width: fit-content;
 }
 
-.class0503 {
+/* .class0503 {
     min-width: 100%;
-    /* margin: 0 auto; */
-
-}
+} */
 
 .class0402 {
     width: 80%;
@@ -528,8 +514,6 @@ onMounted(() => {
     margin-left: 2rem;
 }
 
-.class0502 {}
-
 .img02 {
     width: 10rem;
     height: 10rem;
@@ -595,7 +579,7 @@ onMounted(() => {
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 70rem;
+    min-height: 72rem;
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
 }
@@ -627,7 +611,7 @@ onMounted(() => {
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
-    min-height: 55rem;
+    min-height: 57rem;
     /* 设置最小高度，确保图片显示 */
     margin: 0 auto;
 }
@@ -639,7 +623,7 @@ onMounted(() => {
     /* 确保背景图片完整显示 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
-    width: 95%;
+    width: 100%;
     /* 设置容器宽度 */
     height: auto;
     /* 高度根据内容动态变化 */
@@ -703,13 +687,12 @@ onMounted(() => {
     font-size: 1.5rem;
     color: white;
     float: right;
-    margin-top: -90px;
+    margin-top: -3.5rem;
 }
 
 .span01 {
-    /* background-image: url('@/assets/img/AiEmotion/bk01.png'); */
     /* 使用导入的背景图片 */
-    background-size: cover;
+    background-size: 100% 100%;
     /* 背景图片覆盖整个容器 */
     background-repeat: no-repeat;
     /* 防止背景图片重复 */
@@ -719,14 +702,11 @@ onMounted(() => {
     /* 添加内边距以显示内容 */
     color: #fff;
     /* 设置文字颜色以确保可读性 */
-    border-radius: 5px;
-    /* 添加圆角 */
-    min-height: 3rem;
-    min-width: 30rem;
     font-size: 1.5rem;
     /* 增加字体大小以便更清晰显示股票名称 */
     text-align: center;
-    /* 文字居中 */
+    transform: translate(-50%, -50%);
+    margin-left: -13rem;
 
 }
 
@@ -828,4 +808,258 @@ onMounted(() => {
 .send-button:hover {
     background-color: #0056b3;
 }
-</style>
+
+/* 手机端适配样式 */
+@media only screen and (max-width: 768px) {
+
+    /* 图片样式 */
+    .golden-wheel img {
+        width: 100%;
+    }
+
+    .class02 img {
+        width: 70%;
+
+    }
+
+    .class0201 img {
+        width: 100%;
+    }
+
+    .class0301 img {
+        width: 100%;
+    }
+
+    .class0403 img {
+        width: 100%;
+    }
+
+    .class0501 img {
+        width: 100%;
+    }
+
+    .class0702 img {
+        width: 100%;
+    }
+
+    .class0700 img {
+        width: 100%;
+    }
+
+    .scaled-img img {
+        width: 30%;
+        height: auto;
+    }
+
+    .class09 img {
+        width: 100%;
+    }
+
+    .img01 {
+        height: auto;
+        margin-left: 0rem;
+        width: 35%;
+        margin-top: 10px;
+    }
+
+    .title1 {
+        font-size: 10px;
+        margin-left: 30px;
+    }
+
+    .class02 .span02 {
+        font-size: 14px;
+        color: white;
+        float: right;
+        margin-top: -45px;
+    }
+
+    .class03 {
+        background-image: url('@/assets/img/AiEmotion/bk03.png');
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 132%;
+        margin-left: -45px;
+    }
+
+    .class03 .class003 {
+        padding-top: 3rem;
+        padding-left: 0rem;
+    }
+
+    .class01 {
+        min-height: 100px;
+        height: auto;
+        box-sizing: border-box;
+        background-color: #5e81a7;
+        margin: 0 auto;
+        margin-bottom: 10rem;
+    }
+
+    .class04 {
+        width: 126%;
+        /* min-height: 51rem; */
+        margin-left: -39px;
+        min-height: 38rem;
+    }
+
+    .class02 .container img {
+        width: 68%;
+        height: auto;
+        margin-top: -15px;
+        margin-left: -2rem;
+    }
+
+
+    .title2,
+    .title3,
+    .title4 {
+        font-size: 10px;
+        margin-left: -3rem;
+    }
+
+    .img02 {
+        width: 35%;
+        height: auto;
+        margin-left: 5rem;
+    }
+
+    .class0401 {
+        padding-top: 3rem;
+    }
+
+    .img03,
+    .img04 {
+        width: 35%;
+        height: auto;
+        margin-left: 5rem;
+    }
+
+    .text-container p {
+        font-size: 10px;
+    }
+
+    .lz-img {
+        margin-bottom: 3rem;
+        padding-top: 20px;
+
+        img {
+            width: 45%;
+            height: auto;
+        }
+    }
+
+    .class08 {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 127%;
+        height: auto;
+        min-height: 13rem;
+        margin: 0 auto;
+        margin-left: -41px;
+    }
+
+    .bk-image {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 126%;
+        height: 15rem;
+        margin: 0 auto;
+        margin-top: 0px;
+        margin-left: -40px;
+    }
+
+    .class05 {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 127%;
+        height: auto;
+        min-height: 45rem;
+        margin-left: -41px;
+    }
+
+    .class06 {
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        width: 127%;
+        height: auto;
+        min-height: 35rem;
+        margin: 0 auto;
+        margin-left: -41px;
+
+    }
+
+    .text-container {
+        position: relative;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        text-align: left;
+        padding: 20px;
+    }
+
+    .div00 {
+        display: flex;
+        flex-direction: column;
+        margin-left: 3rem;
+        gap: 0;
+        margin-top: -8rem;
+        width: 100%;
+        height: auto;
+    }
+
+    .class003 .div01 {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 35%;
+        min-height: 25px;
+        float: left;
+        margin-left: 100px;
+        text-align: center;
+        margin-top: 10px;
+        font-size: 10px;
+        color: white;
+    }
+
+    .class003 .div02 {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 35%;
+        min-height: 25px;
+        float: left;
+        margin-left: 100px;
+        text-align: center;
+        margin-top: 10px;
+        font-size: 10px;
+        color: white;
+    }
+
+    /* 
+    .container {
+        max-width: 80vw;
+        width: 100%;
+        height: auto;
+    } */
+
+    .span01 {
+        /* 使用导入的背景图片 */
+        background-size: 100% 100%;
+        /* 背景图片覆盖整个容器 */
+        background-repeat: no-repeat;
+        /* 防止背景图片重复 */
+        display: inline-block;
+        /* 确保容器是块级元素 */
+        padding: 10px;
+        /* 添加内边距以显示内容 */
+        color: #fff;
+        /* 设置文字颜色以确保可读性 */
+        font-size: 13px;
+        /* 增加字体大小以便更清晰显示股票名称 */
+        text-align: center;
+        transform: translate(-50%, -50%);
+        margin-left: -5rem;
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/components/emoEnergyConverter.vue b/src/views/components/emoEnergyConverter.vue
index f70930f..061a8fe 100644
--- a/src/views/components/emoEnergyConverter.vue
+++ b/src/views/components/emoEnergyConverter.vue
@@ -16,16 +16,16 @@ let regions = reactive([]);
 // 设置区域名称 位置
 function getNameTop(min, max, regionMiidle) {
   // 获取整个图表的高度
-  const chartHeight = qxnlzhqEchartsInstance.getHeight(); 
+  const chartHeight = qxnlzhqEchartsInstance.getHeight();
   // 60: 为x轴占的高度
-  return (max - Number(regionMiidle))  / (max - min) * (chartHeight - 60)
+  return (max - Number(regionMiidle)) / (max - min) * (chartHeight - 60)
 }
 // 设置区域最大值 位置
 function getNumberTop(min, max, regionMax) {
   // 获取整个图表的高度
-  const chartHeight = qxnlzhqEchartsInstance.getHeight(); 
+  const chartHeight = qxnlzhqEchartsInstance.getHeight();
   // 60: 为x轴占的高度
-  return (max - Number(regionMax))  / (max - min) * (chartHeight - 60)
+  return (max - Number(regionMax)) / (max - min) * (chartHeight - 60)
 }
 
 // 生成图形标注（核心逻辑）
@@ -171,22 +171,22 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   // 创建中间区域数据
   const middleRangeData = [];
   const middleRangeData1 = [];
-  const markPointData  = [];
+  const markPointData = [];
   mixData.forEach((item, index) => {
     const [open, close, low, high] = item.value;
     const rangeHeight = high - low;
     // const middleThirdStart = low + rangeHeight * (1/3);
     // const middleThirdEnd = low + rangeHeight * (2/3);
-    
+
     let color = null;
-    
+
     if (qxnlzhqData.topxh.includes(item.date)) {
       color = '#000000'; // 黑色
     } else if (qxnlzhqData.lowxh.includes(item.date)) {
       color = '#1E90FF'; // 蓝色
     }
-    
-    
+
+
     // 添加中间区域数据
     if (color) {
       middleRangeData.push({
@@ -221,7 +221,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           }
         },
         label: {
-          normal:{
+          normal: {
             show: true,
             position: 'inside',
             formatter: '起',
@@ -246,6 +246,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       data: mixData.map((item) => item.date),
       axisLabel: {
         rotate: 45, // 日期旋转45度防止重叠
+        color: "white"
       },
     },
     yAxis: {
@@ -270,15 +271,15 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
     },
     // 自定义区域名称和区域范围值 位置
     graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98
-          ? Math.floor(qxnlzhqData.dd)
-          : Math.floor(stopLossPrice * 0.98),qxnlzhqData.yl > stopProfitPrice * 1.02
-          ? Math.ceil(qxnlzhqData.yl)
-          : Math.ceil(stopProfitPrice * 1.02)),
+      ? Math.floor(qxnlzhqData.dd)
+      : Math.floor(stopLossPrice * 0.98), qxnlzhqData.yl > stopProfitPrice * 1.02
+      ? Math.ceil(qxnlzhqData.yl)
+      : Math.ceil(stopProfitPrice * 1.02)),
     series: [
       {
         type: "candlestick",
         data: mixData.map((item) => item.value),
-        z: 1, 
+        z: 1,
         markPoint: {
           symbol: 'circle',
           symbolSize: 10,
@@ -318,7 +319,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             color: 'rgba(0,0,0,0)' // 默认透明
           }
         },
-        z:2
+        z: 2
       },
       // 中间区域染色
       {
@@ -333,7 +334,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             color: 'rgba(0,0,0,0)' // 默认透明
           }
         },
-        z:2
+        z: 2
       },
       {
         name: '止盈线',
@@ -415,11 +416,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       },
     ],
     grid: {
-      left: "0",
+      left: "7%",
       right: "10",
       top: '10',
-      bottom: "0", 
+      bottom: "0",
       containLabel: true,
+      width: '85%'
     },
   };
   // 应用配置
@@ -443,4 +445,15 @@ onBeforeUnmount(() => {
   height: 700px;
   margin-left: -1rem;
 }
+
+/* 手机端适配样式 */
+@media only screen and (max-width: 768px) {
+  #qxnlzhqEcharts {
+    min-width: 100%;
+    height: 300px;
+    margin-left: -1rem;
+    margin-top: -5rem;
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/components/emotionDecod.vue b/src/views/components/emotionDecod.vue
index 1eeeae2..3849607 100644
--- a/src/views/components/emotionDecod.vue
+++ b/src/views/components/emotionDecod.vue
@@ -1,11 +1,11 @@
 <template>
   <!-- <div ref="qxnlzhqEchartsRef" id="qxnlzhqEcharts"></div> -->
   <div class="qxjmqbox">
-    <div ref="KlineCanvs" id="qxjmqEcharts" class="qxjmqbox"></div>
+    <div ref="KlineCanvs" id="qxjmqEcharts"></div>
   </div>
 </template>
-    
-    <script setup>
+
+<script setup>
 import { ref, onMounted, onBeforeUnmount, toRef } from "vue";
 import * as echarts from "echarts";
 import { color } from "echarts/lib/export";
@@ -66,27 +66,27 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
   const dealData = spliteDate(data);
   // 给配置项
   const KlineOption = {
-		tooltip: {
-			trigger: 'item', // 触发类型 坐标轴触发
-			axisPointer: {
-				type: 'cross', // 十字准星效果
-				crossStyle: {
-					color: '#999'
-				}
-			},
-			formatter: function (params) {
-				if (params.seriesType === 'candlestick') {
-					const date = params.name
-					// 开收低高分别取参数的第2到第5个数
-					const open = params.data[1]
-					const close = params.data[2]
-					const low = params.data[3]
-					const high = params.data[4]
-					return `日期: ${date}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}`
-				}
-				return params.value[2]
-			}
-		},
+    tooltip: {
+      trigger: 'item', // 触发类型 坐标轴触发
+      axisPointer: {
+        type: 'cross', // 十字准星效果
+        crossStyle: {
+          color: '#999'
+        }
+      },
+      formatter: function (params) {
+        if (params.seriesType === 'candlestick') {
+          const date = params.name
+          // 开收低高分别取参数的第2到第5个数
+          const open = params.data[1]
+          const close = params.data[2]
+          const low = params.data[3]
+          const high = params.data[4]
+          return `日期: ${date}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}`
+        }
+        return params.value[2]
+      }
+    },
 
     //控制坐标轴
     grid: [
@@ -273,13 +273,13 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         yAxisIndex: 1,
         data: processedHeatmap,
         coordinateSystem: "cartesian2d",
-//         tooltip: {
-//     // 覆盖全局 tooltip 配置
-//     formatter: function (params) {
-//         const date = params.axisValue;
-//       return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
-//     }
-//   },
+        //         tooltip: {
+        //     // 覆盖全局 tooltip 配置
+        //     formatter: function (params) {
+        //         const date = params.axisValue;
+        //       return `${date}：${params.data[2]}`; // 直接取数据中的第3个元素（数值）
+        //     }
+        //   },
         label: {
           normal: {
             show: true,
@@ -352,18 +352,37 @@ onBeforeUnmount(() => {
   // 组件卸载时销毁图表
   if (KlineCanvsChart) {
     KlineCanvsChart.dispose();
-    
+
   }
 });
 </script>
 <style scoped>
 .qxjmqbox {
-  height:100%;
+  height: auto;
+  width: 100%;
 }
+
 #qxjmqEcharts {
   width: 100%;
   height: 500px;
-  margin-left:1rem;
-  top:5rem;
+  margin-left: 1rem;
+  top: 5rem;
+}
+
+/* 手机端适配样式 */
+@media only screen and (max-width: 768px) {
+  #qxjmqEcharts {
+    width: 100%;
+    height: 400px;
+    margin-left: 1rem;
+    top: 5rem;
+  }
+  .qxjmqbox {
+  height: auto;
+  width: 110%;
+  margin-top: -5rem;
+  margin-left: -1rem;
+}
+
 }
 </style>
\ No newline at end of file
diff --git a/src/views/components/emotionalBottomRadar.vue b/src/views/components/emotionalBottomRadar.vue
index 5e24f38..e501bd9 100644
--- a/src/views/components/emotionalBottomRadar.vue
+++ b/src/views/components/emotionalBottomRadar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="bottomRadarRef" id="bottomRadarChart" style="heigh: 100%; width: 100%;"></div>
+  <div ref="bottomRadarRef" id="bottomRadarChart"></div>
 </template>
 
 <script setup>
@@ -115,18 +115,18 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
       },
       formatter: function (params) {
         let result = `<div style="font-weight: bold;">${params[0].name}</div>`
-        
+
         params.forEach(param => {
           let value = param.value
           let color = param.color
-          
+
           if (param.seriesType === 'candlestick') {
             result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: 开 ${value[0]}, 收 ${value[1]}, 低 ${value[2]}, 高 ${value[3]}</div>`
           } else {
             result += `<div style="color: ${color}"><i class="fa fa-square mr-1"></i>${param.seriesName}: ${value}</div>`
           }
         })
-        
+
         return result
       }
     },
@@ -141,27 +141,32 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
     },
     grid: [
       {
-        left: '3%',
+        left: '10%',
         right: '3%',
         top: '20px',
         bottom: '50%',
         height: '300px',
+        width: '85%'
         // containLabel: true
       },
       {
-        left: '3%',
+        left: '10%',
         right: '3%',
         top: '320px',
         bottom: '25%',
         height: '300px',
+        width: '85%'
+
         // containLabel: true
       },
       {
-        left: '3%',
+        left: '10%',
         right: '3%',
         top: '620px',
         bottom: '50px',
         height: '300px',
+        width: '85%'
+
         // containLabel: true
       }
     ],
@@ -301,7 +306,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         axisLabel: {
           width: 50, // 宽度限制
           color: '#000000',
-          formatter: function(value, index) {
+          formatter: function (value, index) {
             // 如果没有刻度数量，其他方法获取不到y轴刻度总长
             if (index === 0) {
               return '0'
@@ -335,7 +340,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         axisLabel: {
           width: 50, // 宽度限制
           color: '#000000',
-          formatter: function(value, index) {
+          formatter: function (value, index) {
             if (index === 5) {
               return ''
             }
@@ -350,10 +355,10 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           }
         },
         splitNumber: 5,
-        min: function(value) {
+        min: function (value) {
           return 0 // 最小值
         },
-        max: function(value) {
+        max: function (value) {
           return value.max + 10 // 比最大值高10, 避免最高点和上一个图表x轴重合
         }
       }
@@ -410,7 +415,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
             color0: '#14b143', // 下跌颜色 (绿)
             borderColor: '#ef232a',
             borderColor0: '#14b143',
-            opacity: function(params) {
+            opacity: function (params) {
               // 收盘价 > 开盘价时为阳线，设置边框不透明、填充透明
               return params.data[2] > params.data[1] ? 0 : 1
             }
@@ -532,11 +537,31 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
 
   // 使用配置项显示图表
   bottomRadarChart.setOption(option)
-  
+
   // 监听窗口大小变化，调整图表尺寸
   window.addEventListener('resize', () => {
+    adjustGridHeight()
     bottomRadarChart.resize()
   })
+  function adjustGridHeight() {
+    if (window.innerWidth <= 768) {
+      option.grid[0].height = '150px'
+      option.grid[1].height = '150px'
+      option.grid[2].height = '150px'
+      option.grid[0].left = '15%'
+      option.grid[1].left = '15%'
+      option.grid[2].left = '15%'
+      option.grid[1].top = '170px'
+      option.grid[2].top = '320px'
+      option.grid[0].width = '80%'
+      option.grid[1].width = '80%'
+      option.grid[2].width = '80%'
+    }
+    bottomRadarChart.setOption(option)
+  }
+
+  // 初始化时调整高度
+  adjustGridHeight()
 }
 
 // 暴露给父级
@@ -553,11 +578,24 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-#bottomRadarChart{
-  min-width: 100%; 
+#bottomRadarChart {
+  height: auto;
+  width: 100%;
+  min-width: 100%;
   /* min-height: 100%; */
-  height:1040px;
+  height: 1040px;
 
   /* padding-bottom: 3rem; */
 }
+
+/* 手机端适配样式 */
+@media only screen and (max-width: 768px) {
+  #bottomRadarChart {
+    height: auto;
+    width: 100%;
+    min-width: 100%;
+    height: 560px;
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue
index 30cd7c2..6603916 100644
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@@ -14,8 +14,8 @@
       </div>
 
       <div class="border4">
-        <el-table :data="groupedWDRL" border :row-style="{ height: '8.6vw' }" header-cell-class-name="table_header"
-          :cell-style="tableCellStyle">
+        <el-table :data="groupedWDRL" border :row-style="tableRowStyle" header-cell-class-name="table_header"
+          :cell-style="tableCellStyle" :column-width="cellWidth">
           <el-table-column v-for="(day, colIndex) in ['一', '二', '三', '四', '五', '六', '日']" :key="colIndex" :label="day">
             <template #default="{ $index: rowIndex }">
               <div v-if="getDayData(rowIndex, colIndex + 1)">
@@ -55,7 +55,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, defineExpose, defineProps } from 'vue'
+import { ref, computed, onMounted, defineExpose, defineProps, onUnmounted } from 'vue'
 import * as echarts from 'echarts'
 
 const props = defineProps({
@@ -147,7 +147,15 @@ function tableCellStyle({ row, column, rowIndex, columnIndex }) {
   else if (value > 0) return { backgroundColor: '#87CEEB', color: 'white' }
   else return { backgroundColor: '#4b759f', color: 'white' }
 }
-
+function tableRowStyle() {
+  // 动态调整行高
+  const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
+  const rowHeight = containerWidth * 0.1; // 根据容器宽度的比例调整行高
+  return { height: `${rowHeight}px` };
+}
+// 动态计算单元格宽度
+const containerWidth = document.querySelector('.border4')?.offsetWidth || 0;
+const cellWidth = containerWidth / 7;
 // 初始化图表
 function initChart(raw, klineDataRawValue, WDRLValue) {
   if (!raw || !klineDataRawValue || !WDRLValue) {
@@ -187,7 +195,7 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       axisLabel: { color: '#FFA500' },
       axisLine: { lineStyle: { color: 'purple', width: 2 } }
     }],
-    color: ['#f00', '#9370DB'],
+    color: ['#f00', 'white'],
     series: [
       {
         name: 'K线',
@@ -222,8 +230,39 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       }
     ]
   })
+  // 监听窗口大小变化
+  const resizeHandler = () => {
+    chart.resize()
+  }
+  window.addEventListener('resize', resizeHandler)
+
+  // 组件卸载时移除监听器
+  onUnmounted(() => {
+    window.removeEventListener('resize', resizeHandler)
+  })
+  // 初始调整字体大小
+  adjustCellFontSize()
 }
 
+
+
+// 调整单元格字体大小
+function adjustCellFontSize() {
+  const table = document.querySelector('.border4 .el-table')
+  if (table) {
+    const tableWidth = table.offsetWidth
+    const cellWidth = tableWidth / 7 // 假设一周 7 天
+    const fontSize = Math.min(cellWidth * 0.15, 20) // 根据单元格宽度动态计算字体大小
+    const dateElements = document.querySelectorAll('.WDRL_date')
+    const dataElements = document.querySelectorAll('.WDRL_data')
+    dateElements.forEach(el => {
+      el.style.fontSize = `${fontSize}px`
+    })
+    dataElements.forEach(el => {
+      el.style.fontSize = `${fontSize * 0.8}px`
+    })
+  }
+}
 defineExpose({ initChart })
 </script>
 
@@ -271,22 +310,77 @@ defineExpose({ initChart })
   margin: 0 auto;
   padding: 20px;
   max-width: 80vw;
-  padding-bottom:7rem;
+  padding-bottom: 7rem;
 }
 
 .border3 {
   margin-top: 40px;
   border-radius: 8px;
-  /* padding: 20px; */
-  margin-left: 12rem;
+  padding: 20px;
+  margin-left: -2rem;
   width: 100%;
   height: 100%;
 }
+
 .border4 {
   margin-top: 40px;
   border-radius: 8px;
   padding: 20px;
-  width:80%;
-  margin-left:8rem;
+  width: 80%;
+  margin-left: 7rem;
+}
+
+/* 手机端适配样式 */
+@media only screen and (max-width: 768px) {
+  .KlineClass {
+    width: 100%;
+    height: 300px;
+  }
+
+  .border4 {
+    margin-top: 0px;
+    border-radius: 8px;
+    padding: 0px;
+    width: 108%;
+    margin-left: -8px;
+    height: auto;
+  }
+
+  .el-table .hidden-columns {
+    position: absolute;
+    visibility: hidden;
+    z-index: -1;
+  }
+
+  .border3 {
+    margin-top: 40px;
+    border-radius: 8px;
+    padding: 20px;
+    margin-left: -13px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .WDRL_date {
+    font-size: 4.2vw;
+  }
+
+  .month-display {
+    font-size: 1.8vw;
+  }
+
+  .WDRL_data {
+    font-size: 3vw;
+  }
+  .el-table .cell {
+    box-sizing: border-box;
+    line-height: 23px;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    padding: 0 12px;
+    text-overflow: ellipsis;
+    white-space: normal;
+    text-align: center;
+}
 }
 </style>
\ No newline at end of file