LessonList.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <div class="container">
  3. <!--<div class="search">
  4. <DatePicker type="daterange" placement="bottom-end" placeholder="选择起止时间" style="width: 200px"></DatePicker>
  5. <Button>搜索</Button>
  6. </div>-->
  7. <div class="activities">
  8. <div class="activity" v-for="(item,index) in lessons" @click="handleLessonClick(item.rowKey)">
  9. <div>
  10. <div class="img-box"><span class="state" style="background: rgb(130, 147, 166); visibility: visible;">{{item.activityStatusTip}}</span> <img :src="getThumb(item.rowKey)" alt=""></div>
  11. <div class="infos">
  12. <p></p>
  13. <p>名称:{{item.mainActivityName}}</p>
  14. <p>学校:{{item.schoolName}}</p>
  15. <p>主讲:{{item.speaker}}</p>
  16. <p>学科:{{item.categoryName}}</p>
  17. <p>时间:{{item.timeTip}}</p>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </template>
  24. <script>
  25. import lessons from '@/static/observationList.json'
  26. export default {
  27. components: {
  28. },
  29. data() {
  30. return {
  31. lessons: []
  32. }
  33. },
  34. created() {
  35. this.lessons = lessons.list;
  36. },
  37. methods: {
  38. getList(type) {
  39. let list = noticeList.list;
  40. var newArray = list.filter(function(item){
  41. return item.noticeTypeId == type;
  42. });
  43. this.noticeList = newArray;
  44. },
  45. handleMenuClick(index,typeId,name) {
  46. this.activeIndex = index;
  47. this.typeName = name;
  48. this.getList(typeId);
  49. },
  50. getThumb(type) {
  51. let thumb = {
  52. "0": require("../../assets/image/lessonCover.png"),
  53. "1": require("../../assets/image/lessonCover2.png"),
  54. "2": require("../../assets/image/lessonCover3.png"),
  55. };
  56. return thumb[type];
  57. },
  58. handleLessonClick(rowKey) {
  59. sessionStorage.setItem('_lesson_rowKey', rowKey);
  60. this.$router.push('lessonDetails')
  61. },
  62. goDetails() {
  63. this.$router.push('activityDetails')
  64. }
  65. },
  66. mounted() {
  67. }
  68. }
  69. </script>
  70. <style scoped>
  71. html, body, #app {
  72. height: 100% !important;
  73. user-select: none;
  74. }
  75. .main-content {
  76. background: rgb(248,248,248) !important;
  77. }
  78. .container {
  79. width: 1200px;
  80. margin: 100px auto;
  81. display: flex;
  82. flex-direction: column;
  83. }
  84. .container .activities {
  85. min-height: 300px;
  86. overflow: hidden
  87. }
  88. .container .activity {
  89. margin-top: 30px;
  90. margin-right: 25px;
  91. margin-bottom: 30px;
  92. width: 383px;
  93. float: left;
  94. cursor: pointer;
  95. border: 1px solid #ddd;
  96. box-sizing: border-box
  97. }
  98. .container .activities .activity:hover {
  99. box-shadow: 0 26px 40px -24px rgba(0,36,100,.3);
  100. transform: translateY(-6px);
  101. transition: all .3s ease 0s
  102. }
  103. .container .activities .activity:nth-child(3n) {
  104. margin-right: 0
  105. }
  106. .img-box {
  107. height: 210px
  108. }
  109. .img-box .state {
  110. padding: 5px 8px;
  111. line-height: 20px;
  112. position: relative;
  113. left: 0;
  114. top: 3px;
  115. z-index: 1;
  116. background-color: #13ce66;
  117. color: #fff
  118. }
  119. .img-box img {
  120. width: 382px;
  121. height: 210px;
  122. position: relative;
  123. left: 0;
  124. top: -21px;
  125. padding-top: 1px
  126. }
  127. .infos {
  128. background-color: #fff;
  129. padding:10px;
  130. font-size:14px;
  131. }
  132. .infos p {
  133. margin:5px 0;
  134. }
  135. .infos .actName {
  136. color: #444;
  137. font-size: 16px;
  138. padding: 20px 10px 10px 20px;
  139. overflow: hidden;
  140. text-overflow: ellipsis;
  141. white-space: nowrap;
  142. width: 280px
  143. }
  144. .infos .actOrganizer {
  145. color: #999;
  146. font-size: 14px;
  147. padding-left: 20px;
  148. padding-bottom: 20px
  149. }
  150. .infos .actTime {
  151. color: #aaa;
  152. font-size: 14px;
  153. padding-left: 20px;
  154. padding-bottom: 10px
  155. }
  156. </style>