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

<template>
  <div class="container">
    <div class="review-page">
      <div class="reviews-header">
        <p class="title">
          往届回顾
          <span class="sub">
            <span>18</span>
            个活动已结束
          </span>
        </p>
        <div class="selections">
          <span class="name">年份：</span>
          <ul>
            <li class="active"><span class="item">不限</span></li>
            <li class=""><span class="item">2015</span></li>
            <li class=""><span class="item">2016</span></li>
            <li class=""><span class="item">2017</span></li>
            <li class=""><span class="item">2018</span></li>
            <li class=""><span class="item">2019</span></li>
          </ul>
        </div>
        <div class="selections">
          <span class="name">排序：</span>
          <ul>
            <li class="active"><span class="item">最新</span></li>
            <li class=""><span class="item">最热</span></li>
          </ul>
        </div>
        <div style="clear:both;"></div>
        <div class="activities">
          <div class="activity" v-for="(item,index) in activities" @click="activityClick">
            <div>
              <div class="img-box"><span class="state" style="background: rgb(19, 206, 102); visibility: visible; display:none;">{{item.status}}</span> <img :src="item.img" alt=""></div> <div class="infos">
                <p class="actName">{{item.name}}</p>
                <p class="actOrganizer">
                  <span class="organizer">
                    {{item.time}}
                  </span>
                  <span style="display:none;">主办</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        activities: [
          {
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },
          {
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          },{
            status: "筹备阶段",
            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
            organizer: "柯桥区教师发展中心",
            time:"2019.03.01-04.06"
          }
        ]
      }
    },
    methods: {
      activityClick() {
        this.$router.push('/rewardDetails');
      }


    },
    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: row;
    justify-content: space-between;
  }

  .review-page {
    background-color: #fff;
    width: 1120px;
    padding: 30px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

  .reviews-header .title {
    height: 20px;
    line-height: 20px;
    color: #444;
    font-size: 16px;
    padding-left: 10px;
    border-left: 3px solid #20a1f8;
    margin-bottom: 30px;
  }
  .sub {
    color: #cbb;
    font-size: 16px;
    margin-left: 10px;
  }

  .selections .name {
    color: #999;
    font-size: 14px;
    float: left;
    clear: left;
  }

  .selections ul li {
    float: left;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
    padding: 0 0 0 40px;
  }

    .selections ul li.active {
      color: #33aeff;
    }
  .activities {
    min-height: 300px;
    overflow: hidden;
    margin-top: 30px;
  }

    .activities .activity {
      margin-right: 25px;
      margin-bottom: 40px;
      width: 335px;
      height:292px;
      float: left;
      cursor: pointer;
      border: 1px solid #ddd;
      box-sizing: border-box
    }

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

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

.img-box {
    width: 335px;
}

.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: 333px;
    height: 210px;
    position: relative;
    left: 0;
    top:-21px;
    padding-top: 1px
}

.infos {
  position:relative;
  top:-21px;
    background-color: #fff
}

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

.view-more {
    text-decoration: none;
    float: right
}
</style>