diff --git a/src/assets/fonts/方正新综艺简体.ttf b/src/assets/fonts/方正新综艺简体.ttf
new file mode 100644
index 0000000..9fa8006
Binary files /dev/null and b/src/assets/fonts/方正新综艺简体.ttf differ
diff --git a/src/assets/img/AiEmotion/标题.png b/src/assets/img/AiEmotion/标题.png
new file mode 100644
index 0000000..01a4aa8
Binary files /dev/null and b/src/assets/img/AiEmotion/标题.png differ
diff --git a/src/assets/img/AiEmotion/角标.png b/src/assets/img/AiEmotion/角标.png
new file mode 100644
index 0000000..0588e89
Binary files /dev/null and b/src/assets/img/AiEmotion/角标.png differ
diff --git a/src/assets/img/AiEmotion/锁定.png b/src/assets/img/AiEmotion/锁定.png
new file mode 100644
index 0000000..8523f8a
Binary files /dev/null and b/src/assets/img/AiEmotion/锁定.png differ
diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue
index f83f0ed..07e5878 100644
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@@ -14,7 +14,56 @@
       </div>
 
       <div class="border4">
-        <el-table :data="groupedWDRL" border :row-style="tableRowStyle" header-cell-class-name="table_header"
+        <div class="border1">
+          <div class="title">
+            <img :src="biaoti" alt="标题" class="titleImg" />
+            <div class="titleContent">
+              {{ calendarDate }}
+            </div>
+          </div>
+          <div class="secondTitle">
+            <div v-for="item in week" :key="item" class="secondTitleItems">
+              <div class="secondTitleItem">{{ item }}</div>
+            </div>
+          </div>
+          <div class="calendar">
+            <div v-for="row in 5" :key="row" class="calendarCol">
+              <div
+                v-for="item in currentData.slice((row - 1) * 7, row * 7)"
+                :key="item"
+                class="calendarRow"
+              >
+                <div
+                  class="calendarItem"
+                  :style="{ backgroundColor: item.color }"
+                >
+                  <div v-if="item.month" class="month">
+                    <div class="monthContent">
+                      {{ months[item.month - 1] }}
+                    </div>
+                  </div>
+                  <div class="calendarItemTitle">{{ item.day }}</div>
+                  <div
+                    class="calendarItemContent"
+                    v-if="item.stock_temperature == ''"
+                  >
+                    <img :src="suoding" alt="锁定" class="ciImg" />
+                  </div>
+                  <div
+                    class="calendarItemContent"
+                    v-else-if="item.stock_temperature == '休市'"
+                  >
+                    休市
+                  </div>
+                  <div class="calendarItemContent" v-else>
+                    {{ item.market_temperature }} | {{ item.stock_temperature }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <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 }">
@@ -48,333 +97,449 @@
               </div>
             </template>
           </el-table-column>
-        </el-table>
+        </el-table> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, defineExpose, defineProps, onUnmounted, onBeforeUnmount } from 'vue'
-import * as echarts from 'echarts'
+import {
+  ref,
+  computed,
+  onMounted,
+  defineExpose,
+  defineProps,
+  onUnmounted,
+  onBeforeUnmount,
+} from "vue";
+import * as echarts from "echarts";
+import biaoti from "../../assets/img/AiEmotion/标题.png";
+import jiaobiao from "../../assets/img/AiEmotion/角标.png";
+import suoding from "../../assets/img/AiEmotion/锁定.png";
+import moment from "moment";
 
 const props = defineProps({
   companyName: {
     type: String,
-    default: ''
+    default: "",
   },
   stockCode: {
     type: String,
-    default: ''
+    default: "",
+  },
+});
+
+const color = ref([
+  "#32A3FF",
+  "#2BD977",
+  "#A239FF",
+  "#FF7945",
+  "#FF5289",
+  "#5791CB",
+]);
+
+const months = ref([
+  "1月",
+  "2月",
+  "3月",
+  "4月",
+  "5月",
+  "6月",
+  "7月",
+  "8月",
+  "9月",
+  "10月",
+  "11月",
+  "12月",
+]);
+
+const calendarDate = ref(moment().format("YYYY年M月"));
+const week = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
+
+const KlineCanvs = ref();
+const WDRL = ref([]);
+const klineDataRaw = ref([]); // 用于存储 K 线图数据
+let chartInstance = null; // 存储图表实例
+const indexCodes = [
+  "NDX",
+  "DJIA",
+  "SPX",
+  "STI",
+  "KLSE",
+  "TSX",
+  "N225",
+  "KS11",
+  "JKSE",
+  "1A0001",
+  "HSI",
+  "I63",
+  "VNINDE",
+];
+const isIndexCode = computed(() => indexCodes.includes(props.code));
+
+const currentData = ref([]);
+const fetchCalendarData = () => {
+  currentData.value = JSON.parse(JSON.stringify(WDRL.value));
+  for (let i = 0; i < currentData.value.length; i++) {
+    const day = moment(currentData.value[i].date).date();
+    currentData.value[i].day = day;
+    if (i == 0 || day == 1) {
+      currentData.value[i].month =
+        moment(currentData.value[i].date).month() + 1;
+    }
+    const tp = currentData.value[i].stock_temperature;
+    if (tp == "" || tp == null || tp == "休市") {
+      currentData.value[i].color = color.value[5];
+    } else {
+      if (tp <= "20") {
+        currentData.value[i].color = color.value[0];
+      } else if (parseInt(tp) <= "50") {
+        currentData.value[i].color = color.value[1];
+      } else if (parseInt(tp) <= "70") {
+        currentData.value[i].color = color.value[2];
+      } else if (parseInt(tp) <= "90") {
+        currentData.value[i].color = color.value[3];
+      } else {
+        currentData.value[i].color = color.value[4];
+      }
+    }
   }
-})
-
-const KlineCanvs = ref()
-const WDRL = ref([])
-const klineDataRaw = ref([]) // 用于存储 K 线图数据
-let chartInstance = null // 存储图表实例
-const indexCodes = ['NDX', 'DJIA', 'SPX', 'STI', 'KLSE', 'TSX', 'N225', 'KS11', 'JKSE', '1A0001', 'HSI', 'I63', 'VNINDE']
-const isIndexCode = computed(() => indexCodes.includes(props.code))
+  console.log(currentData.value);
+};
 
 // 分组 WDRL 数据
-const groupedWDRL = computed(() => {
-  const result = []
-  for (let i = 0; i < WDRL.value.length; i += 7) {
-    result.push(WDRL.value.slice(i, i + 7))
-  }
-  return result
-})
+// const groupedWDRL = computed(() => {
+//   const result = [];
+//   for (let i = 0; i < WDRL.value.length; i += 7) {
+//     result.push(WDRL.value.slice(i, i + 7));
+//   }
+//   return result;
+// });
 
 // 获取指定日期的数据
-function getDayData(rowIndex, dayIndex) {
-  const weekData = groupedWDRL.value[rowIndex]
-  if (weekData && weekData.length >= dayIndex) {
-    return weekData[dayIndex - 1] || {}
-  }
-  return {}
-}
+// function getDayData(rowIndex, dayIndex) {
+//   const weekData = groupedWDRL.value[rowIndex];
+//   if (weekData && weekData.length >= dayIndex) {
+//     return weekData[dayIndex - 1] || {};
+//   }
+//   return {};
+// }
 
 // 判断是否显示分隔符
-function shouldShowDivider(rowIndex, dayIndex) {
-  const data = getDayData(rowIndex, dayIndex)
-  return data?.market_temperature && data?.stock_temperature
-}
+// function shouldShowDivider(rowIndex, dayIndex) {
+//   const data = getDayData(rowIndex, dayIndex);
+//   return data?.market_temperature && data?.stock_temperature;
+// }
 
 // 判断是否都休市
-function isBothRest(rowIndex, colIndex) {
-  const data = getDayData(rowIndex, colIndex)
-  return data && data.stock_temperature === '休市' && data.market_temperature === '休市'
-}
+// function isBothRest(rowIndex, colIndex) {
+//   const data = getDayData(rowIndex, colIndex);
+//   return (
+//     data &&
+//     data.stock_temperature === "休市" &&
+//     data.market_temperature === "休市"
+//   );
+// }
 
 // 判断是否显示休市信息
-function shouldShowRest(rowIndex, dayIndex) {
-  const data = getDayData(rowIndex, dayIndex)
-  if (data && (data.stock_temperature || data.market_temperature)) return false
-  const flatIndex = rowIndex * 7 + (dayIndex - 1)
-  const targetDay = WDRL.value[flatIndex]
-  if (!targetDay || !targetDay.date) return false
-  const [year, month, day] = targetDay.date.split('/').map(Number)
-  if (!year || !month || !day) return false
-  const dateObj = new Date(year, month - 1, day)
-  const today = new Date()
-  if (dateObj.getMonth() !== today.getMonth() || dateObj.getFullYear() !== today.getFullYear()) return false
-  const weekday = dateObj.getDay()
-  return weekday >= 1 && weekday <= 5
-}
+// function shouldShowRest(rowIndex, dayIndex) {
+//   const data = getDayData(rowIndex, dayIndex);
+//   if (data && (data.stock_temperature || data.market_temperature)) return false;
+//   const flatIndex = rowIndex * 7 + (dayIndex - 1);
+//   const targetDay = WDRL.value[flatIndex];
+//   if (!targetDay || !targetDay.date) return false;
+//   const [year, month, day] = targetDay.date.split("/").map(Number);
+//   if (!year || !month || !day) return false;
+//   const dateObj = new Date(year, month - 1, day);
+//   const today = new Date();
+//   if (
+//     dateObj.getMonth() !== today.getMonth() ||
+//     dateObj.getFullYear() !== today.getFullYear()
+//   )
+//     return false;
+//   const weekday = dateObj.getDay();
+//   return weekday >= 1 && weekday <= 5;
+// }
 
 // 格式化月份
-function formatMonth(dateStr) {
-  if (!dateStr) return ''
-  const month = dateStr.split('/')[1]
-  const map = { '01': '一月', '02': '二月', '03': '三月', '04': '四月', '05': '五月', '06': '六月', '07': '七月', '08': '八月', '09': '九月', 10: '十月', 11: '十一月', 12: '十二月' }
-  return map[month] || ''
-}
+// function formatMonth(dateStr) {
+//   if (!dateStr) return "";
+//   const month = dateStr.split("/")[1];
+//   const map = {
+//     "01": "一月",
+//     "02": "二月",
+//     "03": "三月",
+//     "04": "四月",
+//     "05": "五月",
+//     "06": "六月",
+//     "07": "七月",
+//     "08": "八月",
+//     "09": "九月",
+//     10: "十月",
+//     11: "十一月",
+//     12: "十二月",
+//   };
+//   return map[month] || "";
+// }
 
 // 格式化日期
-function formatDate(dateStr) {
-  if (!dateStr) return ''
-  return dateStr.split('/')[2]
-}
+// function formatDate(dateStr) {
+//   if (!dateStr) return "";
+//   return dateStr.split("/")[2];
+// }
 
 // 设置表格单元格样式
-function tableCellStyle({ row, column, rowIndex, columnIndex }) {
-  const data = getDayData(rowIndex, columnIndex + 1)
-  let value = isIndexCode.value ? Number(data?.market_temperature) : Number(data?.stock_temperature)
-  if (isNaN(value)) return { backgroundColor: '#4b759f', color: 'white' }
-  if (value >= 90) return { backgroundColor: '#BD0000', color: 'white' }
-  else if (value >= 70) return { backgroundColor: '#FF5638', color: 'white' }
-  else if (value >= 50) return { backgroundColor: '#C929E6', color: 'white' }
-  else if (value >= 20) return { backgroundColor: '#00AB00', color: 'white' }
-  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 tableCellStyle({ row, column, rowIndex, columnIndex }) {
+//   const data = getDayData(rowIndex, columnIndex + 1);
+//   let value = isIndexCode.value
+//     ? Number(data?.market_temperature)
+//     : Number(data?.stock_temperature);
+//   if (isNaN(value)) return { backgroundColor: "#4b759f", color: "white" };
+//   if (value >= 90) return { backgroundColor: "#BD0000", color: "white" };
+//   else if (value >= 70) return { backgroundColor: "#FF5638", color: "white" };
+//   else if (value >= 50) return { backgroundColor: "#C929E6", color: "white" };
+//   else if (value >= 20) return { backgroundColor: "#00AB00", color: "white" };
+//   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) {
-    console.error('initChart: raw, klineDataRawValue or WDRLValue is undefined')
-    return
+    console.error(
+      "initChart: raw, klineDataRawValue or WDRLValue is undefined"
+    );
+    return;
   }
 
   // 如果已存在图表实例，先销毁
   if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
+    chartInstance.dispose();
+    chartInstance = null;
   }
 
   // 处理 K 线图数据
-  const klineData = klineDataRawValue.map(item => {
-    const open = item[1]
-    const close = item[2]
-    const low = item[3]
-    const high = item[4]
-    return [open, close, low, high]
-  })
+  const klineData = klineDataRawValue.map((item) => {
+    const open = item[1];
+    const close = item[2];
+    const low = item[3];
+    const high = item[4];
+    return [open, close, low, high];
+  });
 
   // 计算K线数据的最小值和最大值
-  let minPrice = Infinity
-  let maxPrice = -Infinity
-  klineDataRawValue.forEach(item => {
-    const low = item[3]
-    const high = item[4]
-    minPrice = Math.min(minPrice, low)
-    maxPrice = Math.max(maxPrice, high)
-  })
+  let minPrice = Infinity;
+  let maxPrice = -Infinity;
+  klineDataRawValue.forEach((item) => {
+    const low = item[3];
+    const high = item[4];
+    minPrice = Math.min(minPrice, low);
+    maxPrice = Math.max(maxPrice, high);
+  });
 
   // 计算小于最小值的整数作为y轴最小值
-  const yAxisMin = Math.floor(minPrice)
+  const yAxisMin = Math.floor(minPrice);
   // 计算大于最大值的整数作为y轴最大值
-  const yAxisMax = Math.ceil(maxPrice)
+  const yAxisMax = Math.ceil(maxPrice);
 
   // 温度日历
-  WDRL.value = WDRLValue
-  klineDataRaw.value = klineDataRawValue
+  WDRL.value = WDRLValue;
+  klineDataRaw.value = klineDataRawValue;
+
+  fetchCalendarData();
 
-  const dateLabels = raw.map(item => item[0])
-  const marketData = raw.map(item => Math.round(item[1]))
-  const stockData = raw.map(item => Math.round(item[2]))
+  const dateLabels = raw.map((item) => item[0]);
+  const marketData = raw.map((item) => Math.round(item[1]));
+  const stockData = raw.map((item) => Math.round(item[2]));
 
   // 创建新的图表实例
-  chartInstance = echarts.init(KlineCanvs.value)
+  chartInstance = echarts.init(KlineCanvs.value);
   chartInstance.setOption({
     tooltip: {
-      trigger: 'axis',
+      trigger: "axis",
       axisPointer: {
-        type: 'cross',
+        type: "cross",
         crossStyle: {
-          color: '#999',
+          color: "#999",
           width: 1,
-          type: 'dashed'
+          type: "dashed",
         },
         lineStyle: {
-          color: '#999',
+          color: "#999",
           width: 1,
-          type: 'dashed'
-        }
+          type: "dashed",
+        },
       },
       formatter: function (params) {
         if (params && params.length > 0) {
-          let result = `日期: ${params[0].name}<br/>`
-          params.forEach(param => {
-            if (param.seriesType === 'candlestick') {
-              const open = param.data[1]
-              const close = param.data[2]
-              const low = param.data[3]
-              const high = param.data[4]
-              result += `${param.seriesName}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}<br/>`
-            } else if (param.seriesType === 'line') {
-              result += `${param.seriesName}: ${param.value}<br/>`
+          let result = `日期: ${params[0].name}<br/>`;
+          params.forEach((param) => {
+            if (param.seriesType === "candlestick") {
+              const open = param.data[1];
+              const close = param.data[2];
+              const low = param.data[3];
+              const high = param.data[4];
+              result += `${param.seriesName}<br/>开: ${open}<br/>收: ${close}<br/>低: ${low}<br/>高: ${high}<br/>`;
+            } else if (param.seriesType === "line") {
+              result += `${param.seriesName}: ${param.value}<br/>`;
             }
-          })
-          return result
+          });
+          return result;
         }
-        return ''
-      }
+        return "";
+      },
+    },
+    legend: {
+      data: ["K线", "市场温度", "股票温度"],
+      textStyle: { color: "white", fontSize: 18 },
     },
-    legend: { data: ['K线', '市场温度', '股票温度'], textStyle: { color: 'white', fontSize: 18 } },
     xAxis: {
-      type: 'category',
+      type: "category",
       data: dateLabels,
-      axisLine: { lineStyle: { color: '#00BFFF' } },
+      axisLine: { lineStyle: { color: "#00BFFF" } },
       axisLabel: {
-        color: '#FFFFFF',
+        color: "#FFFFFF",
         fontSize: 12,
-        fontWeight: 'bold'
+        fontWeight: "bold",
       },
 
-      axisTick: { lineStyle: { color: '#00BFFF' } },
+      axisTick: { lineStyle: { color: "#00BFFF" } },
       axisPointer: {
         show: true,
-        type: 'line',
+        type: "line",
         lineStyle: {
-          color: '#999',
+          color: "#999",
           width: 1,
-          type: 'dashed'
+          type: "dashed",
         },
         label: {
           show: true,
-          color: 'black'
+          color: "black",
         },
-      }
-    },
-    yAxis: [{
-      min: yAxisMin,
-      max: yAxisMax,
-      axisLine: { lineStyle: { color: '#00FF7F' } },
-      axisLabel: {
-        color: '#FFFFFF',
-        fontSize: 12,
-        fontWeight: 'bold'
-      },
-      axisTick: { lineStyle: { color: '#00FF7F' } },
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: '#333333',
-          type: 'solid',
-          opacity: 0.3
-        }
       },
-      axisPointer: {
-        show: true,
-        type: 'line',
-        label: {
+    },
+    yAxis: [
+      {
+        min: yAxisMin,
+        max: yAxisMax,
+        axisLine: { lineStyle: { color: "#00FF7F" } },
+        axisLabel: {
+          color: "#FFFFFF",
+          fontSize: 12,
+          fontWeight: "bold",
+        },
+        axisTick: { lineStyle: { color: "#00FF7F" } },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "#333333",
+            type: "solid",
+            opacity: 0.3,
+          },
+        },
+        axisPointer: {
           show: true,
-          color: 'black'
+          type: "line",
+          label: {
+            show: true,
+            color: "black",
+          },
+          lineStyle: {
+            color: "#999",
+            width: 1,
+            type: "dashed",
+          },
         },
-        lineStyle: {
-          color: '#999',
-          width: 1,
-          type: 'dashed'
-        }
-      }
-    }, {
-      min: 0,
-      max: 100,
-      position: 'right',
-      axisLabel: {
-        color: '#FFFF00',
-        fontSize: 12,
-        fontWeight: 'bold'
       },
-      axisLine: { lineStyle: { color: '#FF1493', width: 2 } },
-      axisTick: { lineStyle: { color: '#FF1493' } },
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: '#444444',
-          type: 'solid',
-          opacity: 0.3
-        }
-      },
-      axisPointer: {
-        show: true,
-        type: 'line',
-        lineStyle: {
-          color: '#999',
-          width: 1,
-          type: 'dashed'
+      {
+        min: 0,
+        max: 100,
+        position: "right",
+        axisLabel: {
+          color: "#FFFF00",
+          fontSize: 12,
+          fontWeight: "bold",
         },
-        label: {
+        axisLine: { lineStyle: { color: "#FF1493", width: 2 } },
+        axisTick: { lineStyle: { color: "#FF1493" } },
+        splitLine: {
+          show: false,
+          lineStyle: {
+            color: "#444444",
+            type: "solid",
+            opacity: 0.3,
+          },
+        },
+        axisPointer: {
           show: true,
-          color: 'black'
+          type: "line",
+          lineStyle: {
+            color: "#999",
+            width: 1,
+            type: "dashed",
+          },
+          label: {
+            show: true,
+            color: "black",
+          },
         },
-      }
-    }],
-    color: ['#f00', 'white'],
+      },
+    ],
+    color: ["#f00", "white"],
     series: [
       {
-        name: 'K线',
-        type: 'candlestick',
+        name: "K线",
+        type: "candlestick",
         data: klineData,
         itemStyle: {
           normal: {
-
-            color: '#00FF00',      // 阳线红色
-            color0: '#FF0000',     // 阴线绿色
-            borderColor: '#00FF00',   // 阳线边框红色
-            borderColor0: '#FF0000'   // 阴线边框绿色
-          }
-        }
+            color: "#00FF00", // 阳线红色
+            color0: "#FF0000", // 阴线绿色
+            borderColor: "#00FF00", // 阳线边框红色
+            borderColor0: "#FF0000", // 阴线边框绿色
+          },
+        },
       },
       {
-        name: '市场温度',
-        type: 'line',
+        name: "市场温度",
+        type: "line",
         yAxisIndex: 1,
-        data: marketData
+        data: marketData,
       },
       {
-        name: '股票温度',
-        type: 'line',
+        name: "股票温度",
+        type: "line",
         yAxisIndex: 1,
-        data: stockData
-      }
+        data: stockData,
+      },
     ],
     // 添加 dataZoom 组件
     dataZoom: [
       {
-        type: 'slider',
+        type: "slider",
         xAxisIndex: 0,
-        filterMode: 'filter',
+        filterMode: "filter",
         textStyle: {
-          color: 'white'
+          color: "white",
         },
         bottom: "0%", // 下移数据缩放滑块
       },
       {
-        type: 'inside',
+        type: "inside",
         xAxisIndex: 0,
-        filterMode: 'filter'
-      }]
-  })
+        filterMode: "filter",
+      },
+    ],
+  });
   // 防抖函数，避免频繁触发resize
   const debounce = (func, wait) => {
     let timeout;
@@ -387,91 +552,93 @@ function initChart(raw, klineDataRawValue, WDRLValue) {
       timeout = setTimeout(later, wait);
     };
   };
-  
+
   // 监听窗口大小变化
   const resizeHandler = debounce(() => {
     if (chartInstance && !chartInstance.isDisposed()) {
       try {
         chartInstance.resize();
         adjustCellFontSize(); // 同时调整表格字体大小
-        console.log('股市温度计图表已重新调整大小');
+        console.log("股市温度计图表已重新调整大小");
       } catch (error) {
-        console.error('股市温度计图表resize失败:', error);
+        console.error("股市温度计图表resize失败:", error);
       }
     }
   }, 100); // 100ms防抖延迟
-  
+
   // 移除之前的监听器（如果存在）
   if (window.marketTempResizeHandler) {
-    window.removeEventListener('resize', window.marketTempResizeHandler);
+    window.removeEventListener("resize", window.marketTempResizeHandler);
   }
-  
+
   // 添加新的监听器
-  window.addEventListener('resize', resizeHandler);
-  
+  window.addEventListener("resize", resizeHandler);
+
   // 存储resize处理器以便后续清理
   window.marketTempResizeHandler = resizeHandler;
-  
+
   // 添加容器大小监听器
-  const chartContainer = document.querySelector('.KlineClass');
+  const chartContainer = document.querySelector(".KlineClass");
   if (chartContainer && window.ResizeObserver) {
-    const containerObserver = new ResizeObserver(debounce(() => {
-      if (chartInstance && !chartInstance.isDisposed()) {
-        try {
-          chartInstance.resize();
-          console.log('股市温度计容器大小变化，图表已调整');
-        } catch (error) {
-          console.error('股市温度计容器resize失败:', error);
+    const containerObserver = new ResizeObserver(
+      debounce(() => {
+        if (chartInstance && !chartInstance.isDisposed()) {
+          try {
+            chartInstance.resize();
+            console.log("股市温度计容器大小变化，图表已调整");
+          } catch (error) {
+            console.error("股市温度计容器resize失败:", error);
+          }
         }
-      }
-    }, 100));
-    
+      }, 100)
+    );
+
     containerObserver.observe(chartContainer);
     window.marketTempContainerObserver = containerObserver;
   }
-  
+
   // 初始调整字体大小
-  adjustCellFontSize()
+  adjustCellFontSize();
 }
 
 // 调整单元格字体大小
 function adjustCellFontSize() {
-  const table = document.querySelector('.border4 .el-table')
+  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`
-    })
+    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`;
+    });
   }
 }
 // 组件卸载时清理资源
 onBeforeUnmount(() => {
   // 销毁图表实例
   if (chartInstance) {
-    chartInstance.dispose()
-    chartInstance = null
+    chartInstance.dispose();
+    chartInstance = null;
   }
   // 移除窗口resize监听器
   if (window.marketTempResizeHandler) {
-    window.removeEventListener('resize', window.marketTempResizeHandler)
-    window.marketTempResizeHandler = null
+    window.removeEventListener("resize", window.marketTempResizeHandler);
+    window.marketTempResizeHandler = null;
   }
-  
+
   // 清理容器观察器
   if (window.marketTempContainerObserver) {
     window.marketTempContainerObserver.disconnect();
     window.marketTempContainerObserver = null;
   }
-})
+});
 
-defineExpose({ initChart })
+defineExpose({ initChart });
 </script>
 
 <style scoped>
@@ -538,7 +705,7 @@ defineExpose({ initChart })
   padding: 20px;
   width: 80%;
   margin-left: 8%;
-  height: auto;
+  height: 48vw;
   overflow: visible;
 }
 
@@ -570,7 +737,7 @@ defineExpose({ initChart })
     padding: 0px;
     width: 100%;
     margin-left: 0%;
-    height: auto;
+    height: 80vw;
     overflow: visible;
   }
 
@@ -626,5 +793,190 @@ defineExpose({ initChart })
     white-space: normal;
     text-align: center;
   }
+
+  .month {
+    width: 80%;
+    height: 70% !important;
+    top: -4vw !important;
+    right: -0.5vw;
+  }
+
+  .monthContent {
+    margin-top: 1.8vw !important;
+    font-weight: bold;
+    font-size: 1.2vw;
+  }
+
+  .calendarItemTitle {
+    font-size: 2.2vw !important;
+  }
+
+  .calendarItemContent {
+    font-size: 2.2vw !important;
+  }
+}
+
+.border1 {
+  border: 2px solid #14bddb;
+  background-color: #1f669e;
+  width: 100%;
+  height: 100%;
+  border-radius: 1%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 20px;
+  /* margin: 0px; */
+}
+
+.border1::before {
+  content: "";
+  position: absolute;
+  top: -2.5px;
+  left: -2.5px;
+  width: 20px;
+  height: 20px;
+  border-top: 3px solid #00ffff; /* 左上角颜色 */
+  border-left: 3px solid #00ffff;
+  border-top-left-radius: 8px;
+}
+
+.border1::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 20px;
+  height: 20px;
+  border-bottom: 3px solid #00ffff; /* 右下角颜色 */
+  border-right: 3px solid #00ffff;
+  border-bottom-right-radius: 8px;
+}
+
+@font-face {
+  font-family: "方正新综艺简体";
+  src: url("../../assets/fonts/方正新综艺简体.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+.title {
+  width: 100%;
+  margin-bottom: 0px;
+  position: relative;
+}
+
+.titleImg {
+  width: 100%;
+  margin-top: 10px;
+}
+
+.titleContent {
+  font-family: "方正新综艺简体";
+  font-size: calc(10px + 1.5vw);
+  color: #00ffff;
+  position: absolute;
+  bottom: 42%;
+  left: 30px;
+}
+
+.secondTitle {
+  width: 100%;
+  height: 35px;
+  display: flex;
+  justify-content: center;
+}
+
+.secondTitleItems {
+  width: 13.5%;
+  height: 100%;
+  display: flex;
+}
+
+.secondTitleItem {
+  border: 1px solid #03a7ce;
+  background-color: #0b3c73;
+  width: 100%;
+  color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.calendar {
+  margin-top: 30px;
+  width: 100%;
+  height: 70%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.calendarCol {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.calendarRow {
+  width: 13.5%;
+  height: 100%;
+}
+.calendarItem {
+  border: 1px solid #0060af;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 10px;
+  color: #ffffff;
+  position: relative;
+  /* font-size: 1.5vw; */
+}
+
+.month {
+  position: absolute;
+  background-image: url("../../assets/img/AiEmotion/角标.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  width: 80%;
+  height: 80%;
+  display: flex;
+  justify-content: center;
+  /* align-items: center; */
+  top: -2vw;
+  right: -0.5vw;
+
+  z-index: 1;
+}
+
+.monthContent {
+  margin-top: 1.2vw;
+  font-weight: bold;
+  font-size: 1.2vw;
+}
+
+.calendarItemTitle {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.2vw;
+}
+
+.calendarItemContent {
+  width: 100%;
+  /* text-align: center; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 1.2vw;
+}
+
+.ciImg {
+  width: 20%;
 }
 </style>
\ No newline at end of file