diff --git a/src/api/AIxiaocaishen.js b/src/api/AIxiaocaishen.js
index 2b6ee70..4a27683 100644
--- a/src/api/AIxiaocaishen.js
+++ b/src/api/AIxiaocaishen.js
@@ -208,6 +208,8 @@ export const getMarketAndCodeAPI = function (params) {
     method: "POST",
     data: new URLSearchParams(params),
     headers: {
+      token:
+        "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
       "Content-Type": "application/x-www-form-urlencoded",
     },
   });
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/AIchat.vue b/src/views/AIchat.vue
index 8fda2cc..3127864 100644
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@@ -330,40 +330,45 @@ const isTypingInProgress = ref(false);
 const createTypingEffect = (message, content, speed) => {
   return new Promise((resolve) => {
     chatStore.messages.push(message);
-    if (content != "") {
-      let index = 0;
+    if (Array.isArray(content) && content.length > 0) {
       message.content = "";
       message.isTyping = true;
 
-      const typingInterval = setInterval(() => {
-        if (index < content.length) {
-          message.content += content.charAt(index);
-          index++;
-        } else {
-          clearInterval(typingInterval);
-          message.isTyping = false;
+      let currentIndex = 0;
 
-          // 处理KaTeX渲染（如果需要）
+      const processNextElement = () => {
+        if (currentIndex >= content.length) {
+          message.isTyping = false;
           nextTick(() => {
-            if (message.content.includes("$$")) {
-              message.content = message.content.replace(
-                katexRegex,
-                (match, formula) => {
-                  try {
-                    return katex.renderToString(formula, {
-                      throwOnError: false,
-                    });
-                  } catch (error) {
-                    console.error("KaTeX 渲染错误:", error);
-                    return match;
-                  }
-                }
-              );
-            }
             resolve(); // 完成后resolve
           });
+          return;
         }
-      }, speed);
+
+        if (currentIndex % 2 === 0) {
+          // 偶数下标：直接加入
+          message.content += content[currentIndex];
+          currentIndex++;
+          processNextElement(); // 立即处理下一个元素
+        } else {
+          // 奇数下标：打字机效果
+          const text = content[currentIndex];
+          let charIndex = 0;
+
+          const typingInterval = setInterval(() => {
+            if (charIndex < text.length) {
+              message.content += text.charAt(charIndex);
+              charIndex++;
+            } else {
+              clearInterval(typingInterval);
+              currentIndex++;
+              processNextElement(); // 处理下一个元素
+            }
+          }, speed);
+        }
+      };
+
+      processNextElement(); // 开始处理
     } else {
       if (message.kline) {
         if (message.klineType == 1) {
@@ -572,8 +577,11 @@ watch(
         };
 
         try {
+          const env = import.meta.env.VITE_ENV;
           const result20 = await dataListAPI({
-            token: localStorage.getItem("localToken"),
+            token:
+            '8Csj5VVX1UbIb4C3oxrnbZi0+fEeMx8pywnIlrmTm45Cb/EllzWACLto9J9+fCFsfdgBOvKvyY94FvqlvM0',
+              // "8nkj4QBV1RPIb4CzoRTnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA",
             market: codeData.value.market,
             code: codeData.value.code,
             language: "cn", //t.value.suoxie,
@@ -743,7 +751,7 @@ watch(
                      class: "title1",
                      type: "title1",
                      content: codeData.value.name + "全景作战报告",
-                     date: moment().format("MM/DD/YYYY"),
+                     date: moment().format("DD/MM/YYYY"),
                    },
                    "",
                    50
@@ -796,7 +804,7 @@ watch(
                 //   }
                 // }, 50); // 调整速度为50ms/字符
 
-                addTypingTask(aiMessage1, ac1, 50);
+                addTypingTask(aiMessage1, ["", ac1], 50);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1030,7 +1038,7 @@ watch(
                 //     aiMessage2.isTyping = false;
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage2, ac2, 50);
+                addTypingTask(aiMessage2, ["", ac2], 50);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1087,6 +1095,8 @@ watch(
                 //     }
                 //   }
                 // );
+                const ac31 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【主力行为】</p><p>`;
+                const ac32 = `${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
                 const ac3 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【主力行为】</p><p>${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
 
                 // 先推送初始消息
@@ -1110,7 +1120,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage3, ac3, 50);
+                addTypingTask(aiMessage3, [ac31, ac32], 50);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1142,6 +1152,15 @@ watch(
                 const nengliang = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【能量维度】</p><p>${result23.data.nengliang}</p>`;
                 const ac4 = kongjian + shijian + nengliang;
 
+                const ac41 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【空间维度】</p><p style="display:flex;justify-content:center;">`;
+                const ac42 = `${arr[0]},${arr[1]}`;
+                const ac43 = `</p><p style="display:flex;justify-content:center;">`;
+                const ac44 = `${arr[2]},${arr[3]}</p>`;
+                const ac45 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【时间维度】</p><p style="display:flex;justify-content:center;">`;
+                const ac46 = `${result23.data.shijian}</p>`;
+                const ac47 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【能量维度】</p><p>`;
+                const ac48 = `${result23.data.nengliang}</p>`;
+
                 // const pc4 = marked(
                 //   kongjian +
                 //     "\n" +
@@ -1179,7 +1198,11 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage4, ac4, 50);
+                addTypingTask(
+                  aiMessage4,
+                  [ac41, ac42, ac43, ac44, ac45, ac46, ac47, ac48],
+                  50
+                );
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1227,7 +1250,10 @@ watch(
                 const cftj = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【触发条件】</p><p>${result24.data.cftl}</p>`;
                 const gfzl = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【攻防指令】</p><p>${result24.data.gfzl}</p>`;
                 const ac5 = cftj + gfzl;
-
+                const ac51 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【触发条件】</p><p>`;
+                const ac52 = `${result24.data.cftl}</p>`;
+                const ac53 = `<p style="margin:0;color:#FADC0C;display:flex;justify-content:center;font-size:28px">【攻防指令】</p><p>`;
+                const ac54 = `${result24.data.gfzl}</p>`;
                 // const pc5 = marked(result24.data.cftl + "/n" + result24.data.gfzl);
                 // const ac5 = pc5.replace(katexRegex, (match, formula) => {
                 //   try {
@@ -1259,7 +1285,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage5, ac5, 50);
+                addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 50);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -1268,7 +1294,7 @@ watch(
                 //   content: ac5,
                 // });
 
-                const ac6 = "内容由AI生成,请注意甄别";
+                const ac6 = "该内容由AI生成,请注意甄别";
                 // 先推送初始消息
                 const aiMessage6 = reactive({
                   sender: "ai",
@@ -1290,7 +1316,7 @@ watch(
 
                 //   }
                 // }, 50); // 调整速度为50ms/字符
-                addTypingTask(aiMessage6, ac6, 100);
+                addTypingTask(aiMessage6, ["", ac6], 100);
 
                 // chatStore.messages.push({
                 //   sender: "ai",
@@ -2286,7 +2312,7 @@ function KlineCanvsEcharts(containerId) {
             fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
           },
           orient: "horizontal",
-          top: window.innerWidth > 768 ? "72%" : "64%",
+          top: window.innerWidth > 768 ? "68%" : "64%",
           width: "100%",
           left: "center",
           itemGap: 15,
@@ -2389,23 +2415,53 @@ function KlineCanvsEcharts(containerId) {
       },
       grid: [
         {
-          // left: window.innerWidth > 768 ? '8%' : '15%',
-          // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? "10%" : "5%",
-          height: window.innerWidth > 768 ? "36%" : "34%",
+          left:
+            window.innerWidth > 1024
+              ? "70vw"
+              : window.innerWidth > 768
+              ? "65vw"
+              : "55vw",
+          right:
+            window.innerWidth > 1024
+              ? "40vw"
+              : window.innerWidth > 768
+              ? "30vw"
+              : "40vw",
+          top: window.innerWidth > 768 ? "8%" : "5%",
+          height: window.innerWidth > 768 ? "34%" : "34%",
           containLabel: false,
         },
         {
-          // left: window.innerWidth > 768 ? '8%' : '15%',
-          // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? "50%" : "42%",
-          height: window.innerWidth > 768 ? "20%" : "22%",
+          left:
+            window.innerWidth > 1024
+              ? "70vw"
+              : window.innerWidth > 768
+              ? "65vw"
+              : "55vw",
+          right:
+            window.innerWidth > 1024
+              ? "40vw"
+              : window.innerWidth > 768
+              ? "30vw"
+              : "40vw",
+          top: window.innerWidth > 768 ? "45%" : "42%",
+          height: window.innerWidth > 768 ? "22%" : "22%",
           containLabel: false,
         },
         {
-          // left: window.innerWidth > 768 ? '8%' : '15%',
-          // right: window.innerWidth > 768 ? '4%' : '2.5%',
-          top: window.innerWidth > 768 ? "78%" : "70%",
+          left:
+            window.innerWidth > 1024
+              ? "70vw"
+              : window.innerWidth > 768
+              ? "65vw"
+              : "55vw",
+          right:
+            window.innerWidth > 1024
+              ? "40vw"
+              : window.innerWidth > 768
+              ? "30vw"
+              : "40vw",
+          top: window.innerWidth > 768 ? "73%" : "70%",
           height: window.innerWidth > 768 ? "20%" : "22%",
           containLabel: false,
         },
@@ -2547,7 +2603,8 @@ function KlineCanvsEcharts(containerId) {
           xAxisIndex: [0, 1, 2],
           type: "slider",
           top: window.innerWidth > 768 ? "95%" : "96%",
-          left: window.innerWidth > 768 ? "10%" : "8%",
+          // left: window.innerWidth > 768 ? "10%" : "8%",
+          // right: window.innerWidth > 768 ? "4%" : "8%",
           start: 98,
           end: 100,
         },
@@ -2885,12 +2942,12 @@ function KlineCanvsEcharts(containerId) {
             symbol: "rect",
             symbolSize: (value, params) => {
               const width = window.innerWidth;
-              const baseHeight = 36;
-              if (width <= 375) {
-                return [2, 16];
-              } else if (width <= 768) {
-                return [2, 24];
-              }
+              const baseHeight = 22;
+              // if (width <= 375) {
+              //   return [2, 16];
+              // } else if (width <= 768) {
+              //   return [2, 22];
+              // }
               return [2, baseHeight];
             },
             itemStyle: {
@@ -2906,7 +2963,7 @@ function KlineCanvsEcharts(containerId) {
                   if (item[1] === 0) {
                     return {
                       coord: [item[0], 20],
-                      symbolOffset: window.innerWidth > 768 ? [0, 20] : [0, 12],
+                      symbolOffset: [0, 10],
                       itemStyle: {
                         color: "#00ff00",
                       },
@@ -2938,12 +2995,12 @@ function KlineCanvsEcharts(containerId) {
             symbol: "rect",
             symbolSize: (value, params) => {
               const width = window.innerWidth;
-              const baseHeight = 36;
-              if (width <= 375) {
-                return [2, 16];
-              } else if (width <= 768) {
-                return [2, 24];
-              }
+              const baseHeight = 22;
+              // if (width <= 375) {
+              //   return [2, 16];
+              // } else if (width <= 768) {
+              //   return [2, 24];
+              // }
               return [2, baseHeight];
             },
             itemStyle: {
@@ -2959,8 +3016,7 @@ function KlineCanvsEcharts(containerId) {
                   if (item[1] === 100) {
                     return {
                       coord: [item[0], 80],
-                      symbolOffset:
-                        window.innerWidth > 768 ? [0, -20] : [0, -12],
+                      symbolOffset: [0, -10],
                       itemStyle: {
                         color: "#ff0000",
                       },
@@ -3139,7 +3195,7 @@ watch(
 
         renderAllKlineCharts();
       }
-    }, 300);
+    }, 1000);
   },
   { immediate: true } // 添加immediate属性，确保初始化时执行一次
 );
@@ -3354,7 +3410,6 @@ onUnmounted(() => {
   /* top: -30px; */
 }
 .logo1 {
-  position: relative;
   max-width: 350px;
   min-width: 200px;
   width: 25%;
@@ -3376,7 +3431,7 @@ onUnmounted(() => {
 
 .gif-area {
   padding: 70px 0px;
-  /* position: relative; */
+  position: relative;
   /* height: 30vh; */
   display: flex;
   flex-direction: column;
@@ -3659,6 +3714,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  height: calc(500px + 10vw) !important;
 }
 
 .message-bubble.ai.content3 {
diff --git a/src/views/AiEmotion.vue b/src/views/AiEmotion.vue
index bec32dd..ca207e3 100644
--- a/src/views/AiEmotion.vue
+++ b/src/views/AiEmotion.vue
@@ -53,7 +53,7 @@
         <div class="class003">
           <div class="content1">
             <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
-            <span class="title1">股市温度计</span>
+            <span class="title1">股票温度计</span>
           </div>
           <div class="div00">
             <div class="div01">股票温度：{{ data2 ?? "NA" }}</div>
@@ -2240,6 +2240,7 @@ defineExpose({
   .scaled-img {
     height: 300px;
     min-height: 25rem;
+    background-size: contain;
   }
 }
 
@@ -2272,9 +2273,10 @@ defineExpose({
     background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
+    background-size: contain;
     text-align: center;
-    width: 95%;
-    margin-top: 6%;
+    width:100%;
+    margin-top: 4%;
     height: 200px;
     min-height: 200px;
   }
diff --git a/src/views/Announcement.vue b/src/views/Announcement.vue
index 359cd10..1a93982 100644
--- a/src/views/Announcement.vue
+++ b/src/views/Announcement.vue
@@ -1,72 +1,73 @@
 <script setup>
 import { ref, onMounted } from "vue";
-import { getAnnouncementAPI, qsArpAamClickAPI, getMarketAndCodeAPI } from "../api/AIxiaocaishen";
+import {
+  getAnnouncementAPI,
+  qsArpAamClickAPI,
+  getMarketAndCodeAPI,
+} from "../api/AIxiaocaishen";
 
 const marketList = ref({
-  "usa": "美股",
-  "cn": "A股",
-  "hk": "港股",
-  "sg": "新加坡股",
-  "my": "马股",
-  "th": "泰股",
-  "vi": "越南股",
-  "can": "加拿大股"
-})
+  usa: "美股",
+  cn: "A股",
+  hk: "港股",
+  sg: "新加坡股",
+  my: "马股",
+  th: "泰股",
+  vi: "越南股",
+  can: "加拿大股",
+});
 
 const codeList = ref([
-  { market: '美股', code: [] },
-  { market: 'A股', code: [] },
-  { market: '港股', code: [] },
-  { market: '新加坡股', code: [] },
-  { market: '马股', code: [] },
-  { market: '泰股', code: [] },
-  { market: '越南股', code: [] },
-  { market: '加拿大股', code: [] },
-])
+  { market: "美股", code: [] },
+  { market: "A股", code: [] },
+  { market: "港股", code: [] },
+  { market: "新加坡股", code: [] },
+  { market: "马股", code: [] },
+  { market: "泰股", code: [] },
+  { market: "越南股", code: [] },
+  { market: "加拿大股", code: [] },
+]);
 
 const getMarketAndCode = async () => {
-  const result = await getMarketAndCodeAPI()
+  const result = await getMarketAndCodeAPI();
   // console.log(result.data, "MarketAndCode");
 
   for (let i = 0; i < result.data.length; i++) {
     const item = result.data[i];
     const market = marketList.value[item.market];
-    const codeLists=item.code.split(',')
+    const codeLists = item.code.split(",");
     // console.log(codeLists, "codeLists",market,'market');
 
-    const targetMarket=codeList.value.find(item=>item.market==market)
-    if(targetMarket){
-      targetMarket.code=codeLists
-      // console.log(targetMarket, "targetMarket"); 
-    }else{
-      console.log("未找到对应的市场")
+    const targetMarket = codeList.value.find((item) => item.market == market);
+    if (targetMarket) {
+      targetMarket.code = codeLists;
+      // console.log(targetMarket, "targetMarket");
+    } else {
+      console.log("未找到对应的市场");
     }
-
-
   }
-
-}
+};
 
 const announcementVideo = ref({});
 const getAnnouncement = async () => {
-  const result = await getAnnouncementAPI()
+  const result = await getAnnouncementAPI();
   // console.log(result.data, "result.data");
   announcementVideo.value.url = result.data[0].url;
   announcementVideo.value.img = result.data[0].img;
 
   const click = await qsArpAamClickAPI({
-    token: localStorage.getItem('localToken'),
-    id: result.data[0].id
-  })
+    token: localStorage.getItem("localToken"),
+    id: result.data[0].id,
+  });
   // console.log(click);
 
   // console.log(announcementVideo.value, "announcementVideo");
-}
+};
 
 const handleVideoPlay = () => {
-  console.log('视频开始播放');
+  console.log("视频开始播放");
   // 可以在这里添加播放统计逻辑
-}
+};
 
 // 定义自定义事件
 const emit = defineEmits(["updateMessage", "ensureAIchat"]);
@@ -76,19 +77,25 @@ const clickCode = (code) => {
 
   emit("updateMessage", code);
   emit("ensureAIchat");
-}
+};
 
 onMounted(() => {
-  getAnnouncement()
-  getMarketAndCode()
-})
+  getAnnouncement();
 
+  getMarketAndCode();
+});
 </script>
 <template>
   <div class="main-wrapper">
     <div class="video-container">
-      <video ref="videoPlayer" :poster="announcementVideo.img" :src="announcementVideo.url" controls
-        class="video-player" @play="handleVideoPlay">
+      <video
+        ref="videoPlayer"
+        :poster="announcementVideo.img"
+        :src="announcementVideo.url"
+        controls
+        class="video-player"
+        @play="handleVideoPlay"
+      >
         Your browser does not support the video tag.
       </video>
     </div>
@@ -96,16 +103,25 @@ onMounted(() => {
 
     <div class="announcement">
       <p class="announcementItem">各位AI小财神的用户,大家好!</p>
-      <p class="announcementItem">试运行期间,用户可在AI小财神中查看全市场数据,每个市场可查看20只股票.</p>
+      <p class="announcementItem">
+        试运行期间,用户可在AI小财神中查看全市场数据,每个市场可查看20只股票.
+      </p>
       <p class="announcementItem">以下为各个市场可以查看的股票：</p>
       <!-- <p class="announcementItem">历软件云版静态市场一致!</p>
         <p class="announcementItem">特此公告!</p> -->
-      <div v-for="(item, index) in codeList" :key="index" class="announcementItem">
-        <div class="announcementItem">{{ item.market }}：
-          <span class="codeItem" v-for="(code, index) in item.code" :key="index">
-            <span v-if="index != 0" class="codeItem">
-              、
-            </span>
+      <div
+        v-for="(item, index) in codeList"
+        :key="index"
+        class="announcementItem"
+      >
+        <div class="announcementItem">
+          {{ item.market }}：
+          <span
+            class="codeItem"
+            v-for="(code, index) in item.code"
+            :key="index"
+          >
+            <span v-if="index != 0" class="codeItem"> 、 </span>
             <span @click="clickCode(code)" class="code">
               {{ code }}
             </span>
@@ -171,7 +187,7 @@ p {
 }
 
 .codeItem {
-  color: #4591E7;
+  color: #4591e7;
 }
 
 .code {
diff --git a/src/views/components/marketTemperature.vue b/src/views/components/marketTemperature.vue
index f83f0ed..79e5c13 100644
--- a/src/views/components/marketTemperature.vue
+++ b/src/views/components/marketTemperature.vue
@@ -14,7 +14,62 @@
       </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>
+                    <div v-if="isIndexCode">
+                      {{ item.market_temperature }}
+                    </div>
+                    <div v-else>
+                      {{ item.market_temperature }} |
+                      {{ item.stock_temperature }}
+                    </div>
+                  </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 +103,464 @@
               </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();
+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 = () => {
+  const monthTitle = ref([]);
+  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) {
+      monthTitle.value.push({
+        year: moment(currentData.value[i].date).year(),
+        month: moment(currentData.value[i].date).month() + 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 stDate = monthTitle.value[0];
+  const edDate = monthTitle.value[monthTitle.value.length - 1];
+  calendarDate.value = `${stDate.year}年${stDate.month}月 ~`;
+  if (stDate.year != edDate.year) {
+    calendarDate.value += `${edDate.year}年${edDate.month}月`;
+  } else {
+    calendarDate.value += `${edDate.month}月`;
   }
-})
 
-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 +573,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 +726,7 @@ defineExpose({ initChart })
   padding: 20px;
   width: 80%;
   margin-left: 8%;
-  height: auto;
+  height: 48vw;
   overflow: visible;
 }
 
@@ -570,7 +758,7 @@ defineExpose({ initChart })
     padding: 0px;
     width: 100%;
     margin-left: 0%;
-    height: auto;
+    height: 80vw;
     overflow: visible;
   }
 
@@ -626,5 +814,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