<template>
  <div>
    <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 class="right">
            <div>
              <div class="item_title">{{item.name}}</div>
              <div class="item_tag">{{item.tag}}</div>
              <div class="item_time">活动时间：{{item.time}}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>

</template>

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

  export default {
    name: "campList",
    data() {
      return {
        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',
        }]
      }
    },
  }
</script>

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

  .campList {
    margin: 10px 0;

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

        img {
          width: 100%;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .item_title {
          font-size: 15px;
        }

        .item_tag {
          font-size: 10px;
          background-color: #F2F2F2;
          width: fit-content;
          padding: 3px;
          border-radius: 7px;
          margin: 20px 0;
        }

        .item_time {
          font-size: 13px;
          color: gray;
        }
      }
    }
  }
</style>
