no message

src/components/stuMan/eventsCalendar.vue

+<style>
+    .eventsCalendar_Form{
+        padding: 20px 0;
+        background-color: #fff;
+    }
+    .eventsCalendar_Form .calendar-day {
+    text-align: center;
+    /* color: #202535; */
+    line-height: 30px;
+    font-size: 12px;
+  }
+
+  .eventsCalendar_Form .is-selected {
+    color: #F8A535;
+    font-size: 10px;
+    margin-top: 5px;
+  }
+
+  #calendar .el-button-group>.el-button:not(:first-child):not(:last-child):after {
+    content: '';
+  }
+
+  .eventsCalendar_Form .el-calendar-day {
+    position: relative;
+  }
+
+  .eventsCalendar_Form .calendar-day {
+    position: absolute;
+    bottom: -5px;
+    left: 5px;
+  }
+
+  .eventsCalendar_Form .calenderHeader {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+
+  .eventsCalendar_Form .calendarTop {
+    display: flex;
+    justify-content: space-between;
+    font-size: 12px;
+    margin-left: -7px;
+    align-items: center;
+    transform: scale(0.9);
+    height: 24px;
+  }
+
+  .eventsCalendar_Form .calendarInner {
+    font-size: 12px;
+    margin: -4px 0 0 -7px;
+    transform: scale(0.9);
+  }
+
+  .eventsCalendar_Form .el-calendar-table .el-calendar-day {
+    padding: 5px;
+    height: 120px;
+  }
+
+  .eventsCalendar_Form .el-calendar-table:not(.is-range) td.next,
+  .eventsCalendar_Form .el-calendar-table:not(.is-range) td.prev {
+    pointer-events: none;
+  }
+
+  .eventsCalendar_Form .caldendarTeacher {
+    display: flex;
+    font-size: 12px;
+    right: 3px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: -2px;
+    transform: scale(0.9);
+    position: absolute;
+    bottom: 2px;
+  }
+
+  .calenderDialog {
+    width: 450px;
+    height: auto;
+  }
+
+  .calenderClassDate {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+  }
+
+  .delBtnStyle {
+    position: absolute;
+    right: 6px;
+    top: -9px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid red;
+    background-color: red;
+    color: #fff;
+    line-height: 18px;
+    text-align: center;
+    border-radius: 50%;
+  }
+
+  .StudentInfo_List {
+    display: flex;
+    width: 100%;
+    margin: 0 20px;
+    padding: 0 40px 0 20px;
+    justify-content: space-between;
+    border-bottom: 1px solid #d1d1d1;
+  }
+
+  .Show_SignBack {
+    margin: 20px;
+    color: #2961FE;
+  }
+
+  .Lessicon_Edit:hover {
+    color: red;
+  }
+
+  .Less_Close:hover {
+    color: red;
+  }
+
+  .lessStudentList {
+    margin-top: 10px;
+  }
+
+  .lessStuTitle {
+    margin: 20px;
+    padding-left: 20px;
+    font-size: 12px;
+    color: #000;
+  }
+
+  .lessStuInnerList {
+    display: flex;
+    margin: 0 40px;
+    min-height: 130px;
+  }
+
+  .lessList {
+    width: 90px;
+    height: 110px;
+    border: 1px solid #d1d1d1;
+    border-radius: 5px;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+    box-shadow: 4px 4px 5px #d1d1d1;
+  }
+
+  .less_Isout {
+    font-size: 12px;
+    color: #2961FE;
+  }
+
+  .classQue {
+    background-color: rgb(63, 196, 255);
+  }
+
+  .classChu {
+    background-color: #f2f2f2;
+  }
+
+  .classChu .commonLessName {
+    color: #000;
+  }
+
+  .classQue .commonLessName {
+    color: #fff;
+  }
+
+  .el-select-dropdown,
+  .el-picker-panel {
+    z-index: 9999 !important;
+  }
+
+  .eventsCalendar_Form .el-calendar__header {
+    /* display: none; */
+  }
+
+  .eventsCalendar_Form .on-left {
+    margin-right: 5px;
+  }
+
+  .eventsCalendar_Form .lessForm_Class {
+    border-bottom: 1px dashed #EEE;
+  }
+
+  .eventsCalendar_Form .q-btn__wrapper {
+    padding: 4px 5px;
+  }
+  .eventsCalendar_box{
+      
+  }
+  .hover_Suspended{
+      position: relative;
+  }
+  .hover_Suspended:hover{
+      color: #F8A535;
+  }
+  .hover_Suspended:hover .Suspended{
+      display: block;
+  }
+  .Suspended{
+      position: absolute;
+      bottom: 25px;
+      left: 0;
+      right: 0;
+      z-index: 2;
+      display: none;
+      padding: 10px;
+      border-radius: 3px;
+      background-color: #fff;
+      box-shadow: 2px 5px 10px 0px rgba(36, 36, 36, 0.2);
+  }
+  .Suspended div{
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-bottom: 10px solid #FFF;
+        transform:rotate(180deg);
+        -ms-transform:rotate(180deg); /* Internet Explorer */
+        -moz-transform:rotate(180deg); /* Firefox */
+        -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
+        -o-transform:rotate(180deg); /* Opera */
+        bottom: -9px;
+        left: 20px;
+  }
+  .Suspended_text{
+      padding: 0;
+      margin: 0;
+      color: #3f4254;
+  }
+</style>
+<template>
+  <div>
+      <div class="eventsCalendar_Form">
+        <template>
+            <el-calendar v-model="value" id="calendar" style="margin-bottom:40px;">
+            <template slot="dateCell" slot-scope="{date, data}">
+                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
+                <div v-for="(item,index) in calendarData" :key="index">
+                    <div v-if="item.Date==data.day">
+                        <div class="eventsCalendar_box">
+                            <div class="eventsCalendar" v-for="(items,indexs) in item.ActivityList" :key="indexs"
+                            @click="eventName(items.ActivityName)">
+                                <div class="hover_Suspended">
+                                    {{items.ActivityName}}
+                                    <div class="Suspended">
+                                        <div></div>
+                                        <p class="Suspended_text">标题: {{items.ActivityName}}</p>
+                                        <p class="Suspended_text">结束时间: {{items.StartTime}}~{{items.EndTime}}</p>
+                                        <p class="Suspended_text">活动类型: {{items.ActivityTypeName}}</p>
+                                        <p class="Suspended_text" v-show="!items.IsFree">价格: {{items.Price}}</p>
+                                        <p class="Suspended_text">地址: {{items.LocationName}}</p>
+                                        <p class="Suspended_text">状态: {{items.ActivityStatus==1?'进行中':(items.ActivityStatus==2?'已结束':'')}}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-else></div>
+                </div>
+            </template>
+            </el-calendar>
+        </template>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {
+
+  },
+  data() {
+    return {
+        value: new Date(),
+        calendarData:[],
+        msg:{
+            SelectStartTimeStr:'2022-4-1',
+            SelectEndTimeStr:'2022-4-30'
+        }
+      }
+  },
+  created() {
+    
+  },
+  watch: {
+      value: {
+        handler(val) {
+          if (val) {
+            var d = new Date(val);
+            var currentY = d.getFullYear();
+            var currentM = d.getMonth()+1;
+            var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
+            var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
+            this.msg.SelectStartTimeStr = datetime
+            this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
+            this.getList()
+          }
+        },
+        deep: true
+      }
+  },
+  computed: {
+    
+  },
+  mounted() {
+    var d = new Date();
+    var currentY = d.getFullYear();
+    var currentM = d.getMonth()+1;
+    var MonthDayNum = new Date(currentY,currentM,0).getDate();  //计算当月的天数
+    var datetime = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + 1);
+    this.msg.SelectStartTimeStr = datetime
+    this.msg.SelectEndTimeStr = d.getFullYear() + '-' + (d.getMonth() + 1 + '-' + MonthDayNum)
+    this.getList()
+  },
+  methods: {
+    eventName(item){
+        const { href } = this.$router.resolve({path:'/stuMan/activeList',query:{'ActivityName':item}})
+        window.open(href, '_blank');
+    },
+    // 获取活动日历
+    getList() {
+        this.apipostDS("/api/Education/GetEduActivityCalendar", this.msg, (res) => {
+            if (res.data.resultCode=== 1) {
+                this.calendarData = res.data.data
+            }
+        })
+    },
+  }
+};
+</script>