最终版

src/views/IpoCalendar/index.vue

@@ -47,7 +47,7 @@ import i18n from '@/locales'
 import { getCurrentInstance } from 'vue'
 import Event from '@/views/login/components/Event.vue';
 import { getEventData, getSearchListing } from "@/api/reqIpo/ipo";
-
+import { getDataFromId } from "@/api/mock/home"
 const { proxy } = (getCurrentInstance() as any)
 const dayValue = ref(new Date())
 const calendar = ref()
@@ -55,6 +55,11 @@ const Eventdata = ref([])
 const selectDate = (val: string) => {
     calendar.value.selectDate(val)
 }
+watch(dayValue, async (ne, ol) => {
+    const day = moment(ne).format("YYYY-MM-DD")
+    const result = await getEventData(day);
+    setEventdata((result as any).data)
+})
 const showMounth = (date: any) => {
     const arr = date.split(" ")
     if (arr.length == 3) {
@@ -95,12 +100,13 @@ const backRouter = () => {
         background-color: #1f4055;
         z-index: 1;
         border: #1f4055 1px solid;
-        
+
         .right-top {
             display: flex;
             // margin-left: 40px;
             margin-top: 20px;
             transform: translateX(-10px);
+
             .top-title {
                 text-align: center;
                 display: inline-block;
@@ -125,7 +131,7 @@ const backRouter = () => {
         .right-bottom {
             width: 100vw;
             background-color: #ffffff;
-            height: 400px;
+            height: fit-content;
             margin-top: 25px;
 
             // margin-left: 20px;
@@ -143,7 +149,7 @@ const backRouter = () => {
             width: 90vw;
             background-color: #ffffff;
             height: 40vh;
-            margin-top: 20vh;
+            margin-top: 40px;
             // margin-left: 20px;
             // text-align: center;
             // line-height: 500px;
@@ -195,17 +201,22 @@ const backRouter = () => {
 
     :deep(.el-calendar__body) {
         background-color: #e8ebee;
-        height: 50vh;
+        height: fit-content;
+        padding: 12px 20px 18px
     }
-:deep(.el-calendar-table thead th){
-    padding:2px 0;
-    font-weight: 550;
-}
-:deep(.el-calendar-table){
-    margin-top: 20px;
-    width: 100vw;
-    transform: translateX(-19px);
-}
+
+    :deep(.el-calendar-table thead th) {
+       // padding: 2px 0;
+        font-weight: 550;
+    }
+
+    :deep(.el-calendar-table) {
+        //margin-top: 20px;
+        width: 100vw;
+        transform: translateX(-19px);
+        table-layout: fixed;
+    }
+
     :deep(.el-calendar) {
         width: 100vw;
         font-family: "Calibri";
@@ -224,7 +235,7 @@ const backRouter = () => {
         background-color: rgb(255, 255, 255);
         height: 33px;
         border: none;
-        margin-top: 25px;
+        margin-top: 18px;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -263,6 +274,6 @@ const backRouter = () => {
     :deep(.is-selected) {
         color: red;
     }
-    
+
 }
 </style>