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

<template>
  <div class="container">
    <div class="activity-item">
      <div class="activity-banner">
        <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
      </div>
      <div class="activity-brief">
        <div class="left">
          <div class="line">
            <span class="tips">活动：</span>
            <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
            <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
          </div>
          <div class="line"><span class="tips">时间：</span> <span class="items2">2019.05.01-06.08</span></div>
          <div class="line"><span class="tips">主办：</span> <span class="items2">柯桥区教师发展中心</span></div>
          <div class="line"><span class="tips">作品：</span> <span class="items2">征集中</span></div>

        </div>
        <div class="right">
          <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
          <Button type="primary" size="large">查看详情</Button>
        </div>
      </div>
    </div>
    <div class="activity-item">
      <div class="activity-banner">
        <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
      </div>
      <div class="activity-brief">
        <div class="left">
          <div class="line">
            <span class="tips">活动：</span>
            <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
            <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
          </div>
          <div class="line"><span class="tips">时间：</span> <span class="items2">2019.05.01-06.08</span></div>
          <div class="line"><span class="tips">主办：</span> <span class="items2">柯桥区教师发展中心</span></div>
          <div class="line"><span class="tips">作品：</span> <span class="items2">征集中</span></div>

        </div>
        <div class="right">
          <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
          <Button type="primary" size="large">查看详情</Button>
        </div>
      </div>
    </div>

    <div class="activity-item">
      <div class="activity-banner">
        <img src="http://ttkt.sxedu.org:70/upload/activity/banner/40/40.jpg?_=1557231709373" />
      </div>
      <div class="activity-brief">
        <div class="left">
          <div class="line">
            <span class="tips">活动：</span>
            <span title="2019年柯桥区天天智慧课堂 5月份 优课评比" class="items">2019年柯桥区天天智慧课堂 5月份 优课评比</span>
            <span class="status" style="background: rgb(19, 206, 102);">筹备阶段</span>
          </div>
          <div class="line"><span class="tips">时间：</span> <span class="items2">2019.05.01-06.08</span></div>
          <div class="line"><span class="tips">主办：</span> <span class="items2">柯桥区教师发展中心</span></div>
          <div class="line"><span class="tips">作品：</span> <span class="items2">征集中</span></div>

        </div>
        <div class="right">
          <p class="time-count">距离报名开始还有<span class="count-down"> 0天 0小时 0分</span></p>
          <Button type="primary" size="large">查看详情</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    components: {
    },
    data() {
      return {
        activeIndex: 0,
        typeName:"",
        newColumns: [
          {
            title: '标题',
            key: 'title'
          },
          {
            title: '日期',
            key: 'startTime'
          }
        ],
        noticeList: []
      }
    },

    created() {

    },
    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);
      }


    },
    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>