ReviewActivity.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div class="container">
  3. <div class="activity-item">
  4. <div class="activity-banner">
  5. <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
  6. </div>
  7. <div class="activity-brief">
  8. <div class="left">
  9. <div class="line">
  10. <span class="tips">活动:</span>
  11. <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
  12. <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
  13. </div>
  14. <div class="line"><span class="tips">时间:</span> <span class="items2">2019.05.01-06.08</span></div>
  15. <div class="line"><span class="tips">主办:</span> <span class="items2">柯桥区教师发展中心</span></div>
  16. <div class="line"><span class="tips">作品:</span> <span class="items2">征集中</span></div>
  17. </div>
  18. <div class="right">
  19. <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
  20. <Button type="primary" size="large">查看详情</Button>
  21. </div>
  22. </div>
  23. </div>
  24. <div class="activity-item">
  25. <div class="activity-banner">
  26. <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
  27. </div>
  28. <div class="activity-brief">
  29. <div class="left">
  30. <div class="line">
  31. <span class="tips">活动:</span>
  32. <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
  33. <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
  34. </div>
  35. <div class="line"><span class="tips">时间:</span> <span class="items2">2019.05.01-06.08</span></div>
  36. <div class="line"><span class="tips">主办:</span> <span class="items2">柯桥区教师发展中心</span></div>
  37. <div class="line"><span class="tips">作品:</span> <span class="items2">征集中</span></div>
  38. </div>
  39. <div class="right">
  40. <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
  41. <Button type="primary" size="large">查看详情</Button>
  42. </div>
  43. </div>
  44. </div>
  45. <div class="activity-item">
  46. <div class="activity-banner">
  47. <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
  48. </div>
  49. <div class="activity-brief">
  50. <div class="left">
  51. <div class="line">
  52. <span class="tips">活动:</span>
  53. <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
  54. <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
  55. </div>
  56. <div class="line"><span class="tips">时间:</span> <span class="items2">2019.05.01-06.08</span></div>
  57. <div class="line"><span class="tips">主办:</span> <span class="items2">柯桥区教师发展中心</span></div>
  58. <div class="line"><span class="tips">作品:</span> <span class="items2">征集中</span></div>
  59. </div>
  60. <div class="right">
  61. <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
  62. <Button type="primary" size="large">查看详情</Button>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. export default {
  70. components: {
  71. },
  72. data() {
  73. return {
  74. activeIndex: 0,
  75. typeName:"",
  76. newColumns: [
  77. {
  78. title: '标题',
  79. key: 'title'
  80. },
  81. {
  82. title: '日期',
  83. key: 'startTime'
  84. }
  85. ],
  86. noticeList: []
  87. }
  88. },
  89. created() {
  90. },
  91. methods: {
  92. getList(type) {
  93. let list = noticeList.list;
  94. var newArray = list.filter(function(item){
  95. return item.noticeTypeId == type;
  96. });
  97. this.noticeList = newArray;
  98. },
  99. handleMenuClick(index,typeId,name) {
  100. this.activeIndex = index;
  101. this.typeName = name;
  102. this.getList(typeId);
  103. }
  104. },
  105. mounted() {
  106. }
  107. }
  108. </script>
  109. <style scoped>
  110. html, body, #app {
  111. height: 100% !important;
  112. user-select: none;
  113. }
  114. .main-content {
  115. background: rgb(248,248,248) !important;
  116. }
  117. .container {
  118. width: 1200px;
  119. margin: 100px auto;
  120. display: flex;
  121. flex-direction: column;
  122. }
  123. .container .activity-item {
  124. width:100%;
  125. padding-bottom:50px;
  126. background:#fff;
  127. margin-top:40px;
  128. }
  129. .container .activity-item .activity-banner img {
  130. width:100%;
  131. }
  132. .container .activity-brief {
  133. width:100%;
  134. padding:15px 40px;
  135. display:flex;
  136. flex-direction:row;
  137. justify-content:space-between;
  138. align-items:center;
  139. }
  140. .container .activity-brief .line {
  141. font-size:16px;
  142. margin-top:10px;
  143. }
  144. .container .activity-brief .status {
  145. font-size:14px;
  146. padding:2px 8px;
  147. margin-left:8px;
  148. border-radius:5px;
  149. color:#fff;
  150. }
  151. .container .activity-brief .line .tips{
  152. font-weight:bold;
  153. color:#999;
  154. }
  155. .container .time-count {
  156. font-size:16px;
  157. margin-bottom:20px;
  158. }
  159. .container .time-count .count-down {
  160. color:orange;
  161. }
  162. .container .right .ivu-btn {
  163. width:180px;
  164. height:48px;
  165. font-size:16px;
  166. }
  167. </style>