crowd-test-service-frontend/src/pages/UserCenter/QualificationCard.vue

<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="8" v-for="item in qualificationVOList" :key="item.id">
        <div class="qualification-card" @click="showQualificationDetail(item)">
          <div class="qualification-card-title" style="padding: 10px;height:28px">
            <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">{{item.name}}</span>
            <el-button type="primary" plain class="pull-right" size="mini">编辑</el-button>
          </div>
          <div class="qualification-card-detail-wrapper">
            <div class="qualification-card-detail">
              <div class="qualification-card-detail-title">证书编号：</div>
              <div class="qualification-card-detail-info">{{item.number}}</div>
            </div>
            <div class="qualification-card-detail">
              <div class="qualification-card-detail-title">发证机关：</div>
              <div class="qualification-card-detail-info">{{item.licensingAuthority}}</div>
            </div>
            <div class="qualification-card-detail">
              <div class="qualification-card-detail-title">发证时间：</div>
              <div class="qualification-card-detail-info">{{item.time}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "QualifucationCard",
    props:['qualificationVOList'],
    methods:{
      showQualificationDetail(item){
        console.log('item')
        this.$emit('handleEditQualification',item);
      }
    }
  }
</script>

<style scoped lang="less">
.qualification-card {
  /*width:285px;*/
  height:160px;
  background:rgba(255,255,255,1);
  box-shadow:0px 1px 6px 0px rgba(8,6,6,0.13);
  margin-bottom: 10px;
  .qualification-card-detail-wrapper {
    padding: 10px;
    .qualification-card-detail{
      display: flex;
      margin-bottom: 5px;
      .qualification-card-detail-title {
        font-size: 13px;
      }
      .qualification-card-detail-info {
        color: rgba(153, 153, 153, 1);
        font-size: 13px;
      }
    }
  }
}
</style>