TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/LiveBroadcast.vue

<template>
  <div class="container">
    <div class="review-main">
      <div class="condition-wrap">
        <div class="condition-wrap-left">
          <Button type="primary">新媒体新技术</Button>
          <Button type="success">创新实验室</Button>
        </div>
        <div class="condition-wrap-right">
          <Select v-model="yearDefault" size="large" style="width:100px">
            <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
          </Select>
          <Select v-model="monthDefault" size="large" style="width:100px">
            <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
          </Select>
          <Button size="large">返回今天</Button>
        </div>
      </div>
      <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay"></full-calendar>
    </div>
  </div>
</template>
<script>
  import FullCalendar from 'vue-fullcalendar'
  export default {
    components: {
      FullCalendar
    },
    data() {
      return {
        yearDefault:'2019年',
        years: [
          "2012年",
          "2013年",
          "2014年",
          "2015年",
          "2016年",
          "2017年",
          "2018年",
          "2019年",
          "2020年",
          "2021年",
          "2022年",
          "2023年",
          "2024年",
        ],
        monthDefault: '1月',
        monthes: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '11月',
          '12月',
        ],
        fcEvents: [
          {
            title: 'Sunny Out of Office',
            start: '2019-05-5',
            end: '2019-05-5'
          }
        ]
      }
    },
    methods: {
      getDay(day, jsEvent) {
        console.log(day);
        console.log(jsEvent);
      }


    },
    mounted() {
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }
  
  .main-content {
    background:rgb(248,248,248) !important;
  }
  .container {
    width: 1200px;
    margin: 100px auto;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
  }
  .review-main {
    background:#fff;
    width:100%;
    padding:10px 25px;
  }
    .review-main /deep/ .full-calendar-header {
      display:none;
    }
    .review-main /deep/ .comp-full-calendar {
      padding:0px;
      max-width:1200px;
    }
    .review-main /deep/ .weeks {
      background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
      background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
      height: 40px;
      line-height: 40px;
    }
    .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
      background:#dfe6ec;
    }
    .review-main /deep/ .week-row > .not-cur-month {
      background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法（必须放在最后） */
      background-size: 20px 20px;
    }
    .review-main /deep/ .week-row {
      height:140px;
    }
    .review-main /deep/ .events-week {
      height:140px;
    }
    
   .condition-wrap {
    display:flex;
    flex-direction:row;
    justify-content : space-between;
  }

</style>