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

<template>
  <div class="qualification-card">
    <div class="qualification-card-title" style="padding: 10px;height:28px">
      <span class="pull-left" style="font-size: 16px;font-weight: bold;line-height: 28px">信息安全工程师</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">314020191144011401528</div>
      </div>
      <div class="qualification-card-detail">
        <div class="qualification-card-detail-title">发证机关：</div>
        <div class="qualification-card-detail-info">314020191144011401528</div>
      </div>
      <div class="qualification-card-detail">
        <div class="qualification-card-detail-title">发证时间：</div>
        <div class="qualification-card-detail-info">2020-06-30</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "QualifucationCard"
  }
</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);
  .qualification-card-detail-wrapper {
    padding: 10px;
    .qualification-card-detail{
      display: flex;
      margin-bottom: 5px;
      .qualification-card-detail-title {
        font-size: 14px;
      }
      .qualification-card-detail-info {
        color: rgba(153, 153, 153, 1);
        font-size: 14px;
      }
    }
  }
}
</style>