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

<template>
  <div class="container">

    <div class="activity-item" v-for="(item,index) in reviewAcList" :key="index">
      <div class="activity-banner">
        <img src="../../assets/image/banner_header.png" />
      </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: rgb(19, 206, 102);">{{item.statusTip}}</span>
          </div>
          <div class="line"><span class="tips">时间：</span> <span class="items2">{{item.reviewTimeTip}}</span></div>
          <div class="line"><span class="tips">主办：</span> <span class="items2">{{item.organizer}}</span></div>
          <div class="line"><span class="tips">作品：</span> <span class="items2">{{item.reviewTimeTip}}</span></div>

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

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

    created() {
      this.reviewAcList = acList.data.list;
    },
    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);
      },

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


    },
    mounted() {
    }
  }
</script>
<style scoped>
  html, body, #app {
    height: 100% !important;
    user-select: none;
  }

  .main-content {
    background: rgb(241,242,243) !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;
    }

    .container .ivu-btn-primary {
      background:#41b6ba;
      border-color:#41b6ba;
    }

</style>