iview-weapp

<template>
  <div class="zuju">
    <div class="timeselect">
      <div>按时间顺序:</div>
      <div>
        <i-icon type="success_fill" class="mine-icon" size="16" color="#bfbfbf"/>
        <div>剔除满人</div>
      </div>
    </div>
    <div>
      <div class="qzj" v-for="(item,index) in qzjList" :key="index" @click="clickHander(item.id)">
        <div class="qzj-left">
          <img :src="item.imgsrc" alt="">
          <div class="qzj-center">
            <div>{{item.title}}</div>
            <div>报名人数: {{item.pnum}}/{{item.tnum}}</div>
            <div>{{item.date}} {{item.session}} {{item.time}} 开局</div>
          </div>
        </div>
        <div class="qzjright" :style="{ backgroundColor: item.status == 2 activeColor : ''}">{{ item.status == 0 '已满员' : item.status == 1 '已结束' : '去组局' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import card from '@/components/card'
  export default {
    components: {
      card
    },

    data() {
      return {
        activeColor: '#9838fe',
        qzjList: [
          {
            id: 1,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 0
          },
          {
            id: 2,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 1
          },
          {
            id: 3,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 2
          },
          {
            id: 4,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 0
          },
          {
            id: 5,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 2
          },
          {
            id: 6,
            imgsrc: 'https://img1.baidu.com/it/u=1297851743,2868082646&fm=15&fmt=auto&gp=0.jpg',
            title: '最后的低语',
            pnum: 7,
            tnum: 7,
            date: '4月08号',
            session: '中场',
            time: '19:18',
            status: 1
          }
        ]
      }
    },

    created() {},
    methods: {
      clickHander(id) {
        console.log(id)
      }
    }
  }
</script>
<style scoped>
  .qzj{
    width: 95%;
    height: 180rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 30rpx;
  }
  .qzj .qzj-left{
    width: 80%;
    height: 180rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .qzj .qzj-left img{
    width: 120rpx;
    height: 150rpx;
    border-radius: 8px;
    margin-left: 10px;
  }
  .qzj .qzj-left .qzj-center{
    width: 60%;
    height: 180rpx;
    display: flex;
    justify-content: flex-start;
    align-content: space-around;
    flex-wrap: wrap;
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
  }
  .qzj .qzj-left .qzj-center div{
    width: 100%;
  }
  .qzj .qzj-left .qzj-center div:nth-child(1){
    font-size: 16px;
    font-weight: 600;
  }
  .qzj .qzj-left .qzj-center div:nth-child(2){
    font-size: 14px;
  }
  .qzj .qzj-left .qzj-center div:nth-child(3){
    font-size: 12px;
    color: darkgray;
  }
  .qzj .qzjright{
    width: 90px;
    height: 60rpx;
    border-radius: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: darkgrey;
    color: #fff;
    font-size: 14px;
    margin-right: 10px;
  }
  .zuju .timeselect{
    width: 100%;
    height: 80rpx;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    position: fixed;
    top: 0;
  }
  .zuju .timeselect div:nth-child(1){
    font-size: 16px;
    font-weight: 600;
  }
  .zuju .timeselect div:nth-child(2){
    width: 20%;
    height: 80rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .zuju .timeselect div:nth-child(2) div{
    width: auto;
    margin-left: 2px;
    font-size: 12px;
  }
  .mine-icon{
    transform: translateY(-6rpx);
  }
</style>