crowd-test-service-frontend/src/pages/Homepage/TestCard.vue

<template>
  <div class="card-waterfull">
    <el-row :gutter="20">
      <waterfall
                        :line-gap="400"
                        :min-line-gap="150"
                        :max-line-gap="200"
                        :single-max-width="400"
        :watch="applicationTypeList">
        <!-- each component is wrapped by a waterfall slot -->

        <waterfall-slot
          v-for="(item, index) in applicationTypeList"
          width="310"
          :height="200"
          :order="index"
          :key="item.code"
        >
          <el-card class="test-card" :body-style="{width:'300'}" >
            <div slot="header" class="clearfix test-card-header">
              <span>{{item.name}}</span>
            </div>
            <div>
              <span>{{item.introduction}}</span>
            </div>
          </el-card>
        </waterfall-slot>
      </waterfall>
    </el-row>
  </div>
</template>

<script>
  import Waterfall from 'vue-waterfall/lib/waterfall'
  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'

  export default {
    name: "TestCard",
    props:['applicationTypeList'],
    data(){
      return{
      }
    },
    components:{
      Waterfall,
      WaterfallSlot
    },
    methods:{
    },
    mounted() {
      console.log(this.applicationTypeList)
    }
  }


</script>

<style lang="less">
.test-card {
  border: none;
  .el-card__header{
    height:48px !important;
    background:rgba(233,240,250,1) !important;
    padding: 12px 15px !important;
  }
  .test-card-header {
    border-left: 5px solid #0076cb;
    padding-left: 5px;
  }
}

  .card-waterfull {
    .el-card {
      width: 98% !important;
    }
    .el-row {
      margin:  0 !important;
    }
  }
</style>