LiveBroadcast.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <div class="container">
  3. <div class="review-main">
  4. <div class="condition-wrap">
  5. <div class="condition-wrap-left">
  6. <Button type="primary">新媒体新技术</Button>
  7. <Button type="success">创新实验室</Button>
  8. </div>
  9. <div class="condition-wrap-right">
  10. <Select v-model="yearDefault" size="large" style="width:100px">
  11. <Option v-for="item in years" :value="item" :key="item">{{ item }}</Option>
  12. </Select>
  13. <Select v-model="monthDefault" size="large" style="width:100px">
  14. <Option v-for="item in monthes" :value="item" :key="item">{{ item }}</Option>
  15. </Select>
  16. <Button size="large">返回今天</Button>
  17. </div>
  18. </div>
  19. <full-calendar :events="fcEvents" lang="zh" @dayClick ="getDay"></full-calendar>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import FullCalendar from 'vue-fullcalendar'
  25. export default {
  26. components: {
  27. FullCalendar
  28. },
  29. data() {
  30. return {
  31. yearDefault:'2019年',
  32. years: [
  33. "2012年",
  34. "2013年",
  35. "2014年",
  36. "2015年",
  37. "2016年",
  38. "2017年",
  39. "2018年",
  40. "2019年",
  41. "2020年",
  42. "2021年",
  43. "2022年",
  44. "2023年",
  45. "2024年",
  46. ],
  47. monthDefault: '1月',
  48. monthes: [
  49. '1月',
  50. '2月',
  51. '3月',
  52. '4月',
  53. '5月',
  54. '6月',
  55. '7月',
  56. '8月',
  57. '9月',
  58. '11月',
  59. '12月',
  60. ],
  61. fcEvents: [
  62. {
  63. title: 'Sunny Out of Office',
  64. start: '2019-05-5',
  65. end: '2019-05-5'
  66. }
  67. ]
  68. }
  69. },
  70. methods: {
  71. getDay(day, jsEvent) {
  72. console.log(day);
  73. console.log(jsEvent);
  74. }
  75. },
  76. mounted() {
  77. }
  78. }
  79. </script>
  80. <style scoped>
  81. html, body, #app {
  82. height: 100% !important;
  83. user-select: none;
  84. }
  85. .main-content {
  86. background:rgb(248,248,248) !important;
  87. }
  88. .container {
  89. width: 1200px;
  90. margin: 100px auto;
  91. display:flex;
  92. flex-direction:row;
  93. justify-content:space-between;
  94. }
  95. .review-main {
  96. background:#fff;
  97. width:100%;
  98. padding:10px 25px;
  99. }
  100. .review-main /deep/ .full-calendar-header {
  101. display:none;
  102. }
  103. .review-main /deep/ .comp-full-calendar {
  104. padding:0px;
  105. max-width:1200px;
  106. }
  107. .review-main /deep/ .weeks {
  108. background: -webkit-linear-gradient(#E1E7EC, #B9C6D1); /* Safari 5.1 - 6.0 */
  109. background: -o-linear-gradient(#E1E7EC, #B9C6D1); /* Opera 11.1 - 12.0 */
  110. background: -moz-linear-gradient(#E1E7EC, #B9C6D1); /* Firefox 3.6 - 15 */
  111. background: linear-gradient(#E1E7EC, #B9C6D1); /* 标准的语法 */
  112. height: 40px;
  113. line-height: 40px;
  114. }
  115. .review-main /deep/ .full-calendar-body .dates .week-row .day-cell.today {
  116. background:#dfe6ec;
  117. }
  118. .review-main /deep/ .week-row > .not-cur-month {
  119. background: linear-gradient( -45deg, #ecf0f4 25%, #ffffff 0, #ffffff 50%, #ecf0f4 0, #ecf0f4 75%, #ffffff 0 ); /* 标准的语法(必须放在最后) */
  120. background-size: 20px 20px;
  121. }
  122. .review-main /deep/ .week-row {
  123. height:140px;
  124. }
  125. .review-main /deep/ .events-week {
  126. height:140px;
  127. }
  128. .condition-wrap {
  129. display:flex;
  130. flex-direction:row;
  131. justify-content : space-between;
  132. }
  133. </style>