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

<template>
  <div class="container">

    <!--<div class="search">
      <DatePicker type="daterange" placement="bottom-end" placeholder="选择起止时间" style="width: 200px"></DatePicker>
      <Button>搜索</Button>
    </div>-->
    <div class="activities">
      <div class="activity" v-for="(item,index) in lessons" @click="handleLessonClick(item.rowKey)">
        <div>
          <div class="img-box">
            <span class="state" style="background: rgb(130, 147, 166); visibility: visible;">{{item.data.activityStatusTip}}</span>
          <!--<img :src="getThumb(item.rowKey)" alt="">-->
            <div class="lesson-image">
              <p style="font-size:24px">高新区智慧课堂优秀课例</p>
              <p style="font-size:16px;margin:5px 0">{{item.data.parentGradeName}}</p>
              <p style="font-size:28px;">《 {{item.data.parentProjectName}} 》</p>
              <p style="font-size:16px;margin-top:8px;">{{item.data.schoolName}} {{item.data.speaker}}教师 执教</p>
              <p style="font-size:16px;margin-top:8px;">授课平台：{{item.data.parentTeachePlateName}}</p>
            </div>
          </div>
          <div class="infos">
            <p>名称：{{item.data.name}}</p>
            <p>学校：{{item.data.schoolName}}</p>
            <p>主讲：{{item.data.speaker}}</p>
            <p>学科：{{item.data.parentCategoryName}}</p>
            <p>时间：{{item.data.timeRangeTip}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
    import lessons from '@/static/observationList.json'
    import lessonDetails from '@/static/lessonDetails.json'
  export default {
    components: {
    },
    data() {
      return {
        lessons: []
      }
    },

    created() {
      this.lessons = lessonDetails;
    },
    methods: {
      getList(type) {
        let list = noticeList.list;
        var newArray = list.filter(function(item){
            return item.noticeTypeId == type;
        });
        this.noticeList = newArray;
      },

      handleMenuClick(index,typeId,name) {
        this.activeIndex = index;
        this.typeName = name;
        this.getList(typeId);
      },
      handleLessonClick(rowKey) {
        sessionStorage.setItem('_lesson_rowKey', rowKey);
        this.$router.push('lessonDetails')
      },

      goDetails() {
        this.$router.push('activityDetails')
      }


    },
    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: column;
  }

.container .activities {
    min-height: 300px;
    overflow: hidden
}

.container .activity {
    margin-top: 30px;
    margin-right: 25px;
    margin-bottom: 30px;
    width: 383px;
    float: left;
    cursor: pointer;
    border: 1px solid #ddd;
    box-sizing: border-box
}

.container .activities .activity:hover {
    box-shadow: 0 26px 40px -24px rgba(0,36,100,.3);
    transform: translateY(-6px);
    transition: all .3s ease 0s
}

.container .activities .activity:nth-child(3n) {
    margin-right: 0
}

.img-box {
    background:url(../../assets/image/lessonCover.png);
    height: 210px
}

  .img-box .lesson-image {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-weight:bold;
  }

.img-box .state {
    padding: 5px 8px;
    line-height: 20px;
    position: relative;
    left: 0;
    top: 3px;
    z-index: 1;
    background-color: #13ce66;
    color: #fff
}

.img-box img {
    width: 382px;
    height: 210px;
    position: relative;
    left: 0;
    top: -21px;
    padding-top: 1px
}

.infos {
    background-color: #fff;
    padding:10px;
    font-size:14px;
}

  .infos p {
    margin:5px 0;
  }

.infos .actName {
    color: #444;
    font-size: 16px;
    padding: 20px 10px 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 280px
}

.infos .actOrganizer {
    color: #999;
    font-size: 14px;
    padding-left: 20px;
    padding-bottom: 20px
}

.infos .actTime {
    color: #aaa;
    font-size: 14px;
    padding-left: 20px;
    padding-bottom: 10px
}



</style>