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

<template>
  <div class="container">

    <div class="search">
      <Input v-model="value" placeholder="请输入优课主题 （如：小学语文）" style="width: 200px" />
      <Button>搜索</Button>
    </div>
    <div class="activity-item" v-for="(item,index) in lessons" :key="index">
      <div class="activity-banner">
        <img :src="'http://ttkt.sxedu.org:70'+item.bannerUri" />
      </div>
      <div class="activity-brief">
        <div class="left">
          <div class="line">
            <span class="tips">优课主题：</span>
            <span class="items">{{item.name}}</span>
            <span class="status" style="background: #999;">已结束</span>
          </div>
          <div class="line"><span class="tips">起止时间：</span> <span class="items2">{{item.timeTip}}</span></div>
          <div class="line"><span class="tips">优课数：</span> <span class="items2">{{item.viewActivityCount}}</span></div>

        </div>
        <div class="right">
          <Button type="primary" size="large" @click="goDetails">查看详情</Button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
    import lessons from '@/static/lessons.json'
  export default {
    components: {
    },
    data() {
      return {
        lessons: []
      }
    },

    created() {
      this.lessons = this.$staticTools.lessons;
    },
    methods: {
      goDetails() {
        this.$router.push('lessonList')
      }
    },
    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 .activity-item {
      width:100%;
      padding-bottom:50px;
      background:#fff;
      margin-top:40px;
    }

    .container .activity-item .activity-banner img {
      width:100%;
    }

    .container .activity-brief {
      width:100%;
      padding:15px 40px;
      display:flex;
      flex-direction:row;
      justify-content:space-between;
      align-items:center;
    }

      .container .activity-brief .line {
        font-size:16px;
        margin-top:10px;
      }

      .container .activity-brief .status {
        font-size:14px;
        padding:2px 8px;
        margin-left:8px;
        border-radius:5px;
        color:#fff;
       }

      .container .activity-brief .line .tips{
        font-weight:bold;
        color:#999;
      }

    .container .time-count {
      font-size:16px;
      margin-bottom:20px;
    }

      .container .time-count .count-down {
        color:orange;
      }

    .container .right .ivu-btn {
      width:180px;
      height:48px;
      font-size:16px;
    }


</style>