web-center/src/layout/index/calendar.vue

<template>
  <div id="self-calendar">
    <el-row style="background:#598bed;height:476px;">
      <el-col :span="24" class="info">
        <el-col :span="24" class="calendar">
          <el-calendar>
            <template #dateCell="{date, data}">
              <el-row>
                <el-col :span="24" @click.native="search(data)">{{ date | getDay }}</el-col>
              </el-row>
            </template>
          </el-calendar>
        </el-col>
        <el-col :span="24" class="list">
          <span class="jiantou"></span>
          <el-col :span="24" class="listInfo" v-if="info.id">
            <el-col :span="24" class="title">
              <p class="textOver">{{ info.title }}</p>
            </el-col>
            <el-col :span="24" class="organizer">
              <p class="textOver">主办方：{{ info.organizer }}</p>
            </el-col>
            <el-col :span="12" class="address">
              <p class="textOver">地点：{{ info.address }}</p>
            </el-col>
            <el-col :span="12" class="date">
              <p>时间：{{ info.date }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" class="listInfo" v-else>
            <el-col :span="24" class="none">
              2020年毕业季大型招聘会 7月敬请关注
            </el-col>
          </el-col>
        </el-col>
      </el-col>
      <el-col :span="24" class="loginBtn">
        <el-button type="primary">学生登录</el-button>
        <el-button type="success">企业登录</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'self-calendar',
  props: {},
  components: {},
  data: () => ({
    calendar: new Date(),
    list: [],
    loading: false,
    infoList: [],
    info: {
      id: 1,
      title: '应届毕业生大型招聘会',
      organizer: '一汽大众大型招聘会',
      date: '2019-11-7',
      address: '长春会展中心',
    },
  }),
  created() {
    this.search();
  },
  computed: {},
  methods: {
    ...mapActions(['jobfairOperation']),
    async search(date) {
      let options = { date: date ? date.day : undefined };
      // 1直接拿着参数发送请求
      let result = await this.jobfairOperation({ type: 'list', data: { ...options } });
      if (`${result.errcode}` === '0') {
        //给this=>vue的实例下在中的list属性，赋予result。data的值
        this.$set(this, `infoList`, result.data);
        if (result.data.length > 0) this.$set(this, `info`, result.data[0]);
        else this.$set(this, `info`, {});
      } else {
        this.$set(this, `info`, {});
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
  },
  filters: {
    getDay(data) {
      return data.getDate();
    },
    getTime(date) {
      if (date) {
        let arr = date.split(' ');
        return arr[1];
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info {
  height: 396px;
}
.calendar {
  height: 280px;
}
.list {
  position: relative;
  height: 116px;
}
.loginBtn {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/deep/.el-calendar {
  background-color: #598bed;
}
/deep/.el-calendar__title {
  color: yellow;
  font-weight: 微软雅黑;
  font-size: 20px;
}
/deep/.el-calendar__body {
  padding: 0 40px;
}
/deep/.el-calendar-table thead th {
  padding: 0;
  color: #ffff;
  font-weight: bold;
}
/deep/.el-calendar-table .el-calendar-day {
  line-height: 35px;
  height: 35px;
  text-align: center;
  padding: 0;
  color: #fff;
}
/deep/.el-calendar-table tr td:first-child {
  border-left: none;
}
/deep/.el-calendar-table tr:first-child td {
  border-top: none;
}
/deep/.el-calendar-table td {
  border-bottom: none;
  border-right: none;
}
/deep/.el-calendar__header {
  border-bottom: none;
  padding: 12px 50px;
}
/deep/.el-calendar__button-group {
  display: none;
}
/deep/.el-calendar-table td.is-today {
  color: #0066ff;
  background: #f8ab55;
  border-radius: 90px;
}
/deep/.el-calendar-table td.is-selected {
  background-color: #54f77f;
  color: yellow;
  border-radius: 50px;
}
.listInfo {
  height: 100px;
  width: 89%;
  background: #fff;
  margin: 13px 20px;
  border-radius: 10px;
}
.jiantou {
  display: inline-block;
  position: absolute;
  top: -7px;
  left: 45%;
  width: 0px;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: #598bed #598bed #fff #598bed;
}
.listInfo .title p {
  text-align: center;
  padding: 5px 0;
  font-size: 20px;
}
.listInfo .organizer {
  padding: 5px 15px;
}
.listInfo .address {
  padding: 5px 0 0 12px;
}
.listInfo .date {
  padding: 5px 0;
}
.none {
  font-size: 24px;
  color: #676767;
  text-align: center;
  padding: 19px 28px;
}
</style>