<template>
  <div class="signUp">
    <el-tabs @tab-click="handleClick" v-model="activeName">
      <el-tab-pane label="正在报名" name="1">
        111
      </el-tab-pane>
      <el-tab-pane label="即将开营" name="2">

        <div :key="index" class="campList" v-for="(item,index) in List">
          <el-card class="box-card">
            <div class="flex list_item">
              <div class="item_img">
                <img :src="item.url"/>
              </div>
              <div>
                <div class="item_title">{{item.name}}</div>
                <div class="item_tag">{{item.tag}}</div>
                <div class="item_time">活动时间：{{item.time}}</div>
              </div>
            </div>
          </el-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开营中" name="3">开营中</el-tab-pane>
      <el-tab-pane label="已结营" name="4">已结营</el-tab-pane>
      <el-tab-pane label="已退营" name="5">已退营</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import img from "../../../assets/img/recruit.png";

  export default {
    name: "signUpList",
    data() {
      return {
        activeName: '2',
        List: [{
          url: img,
          name: 'XX大学暑期营',
          tag: '线下活动',
          time: '2023-07-23至2023-07-27',
        }, {
          url: img,
          name: 'XX大学暑期营',
          tag: '线下活动',
          time: '2023-07-23至2023-07-27',
        }]
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }

  }
</script>

<style lang="scss" scoped>
  .flex {
    display: flex;
  }

  .signUp {
    margin: 10px 80px 10px 31px;

    .campList {
      margin: 10px 0;

      .list_item {
        .item_img {
          width: 30%;
          margin-right: 10%;

          img {
            width: 100%;
          }
        }

        .item_title {

        }
      }
    }
  }
</style>
