crowd-test-service-frontend/src/pages/Square/SquareCard.vue

<template>
  <el-card class="square-card">
    <div class="card-title" >
      XXXXXX卡片标题
    </div>
    <div class="card-content">
      卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容
    </div>
    <div class="card-detail">
      <el-row>
        <el-col :span="6">
          <span class="card-detail-money">￥10000</span>
        </el-col>
        <el-col :span="18">
          <span class="card-detail-info pull-right">14分钟前发布/5人参与</span>
        </el-col>
      </el-row>
    </div>
    <div class="card-footer">
      <el-row class="card-footer-row">
        <el-col :span="12" class="pull-left">
          性能测试项目
        </el-col>
        <el-col :span="12" class=" test-btn">
          <el-button type="primary" round size="mini" class="pull-right">我要众测</el-button>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
  export default {
    name: 'SquareCard'
  }
</script>

<style lang="less">
  .square-card .el-card__body{
    padding: 0 !important;
  }

  .square-card {
    .card-title {
      font-size:16px;
      font-family:Source Han Sans CN;
      font-weight:500;
      color:rgba(0,0,0,1);
      line-height:30px;
      margin: 10px 0;
    }

    .card-content {
      font-size:14px;
      font-family:Source Han Sans CN;
      font-weight:400;
      color:rgba(0,0,0,1);
      height: 70px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:3; //显示的行
    }

    .card-detail {
      margin: 10px 0;
      .card-detail-money{
        font-size:14px;
        font-family:Source Han Sans CN;
        font-weight:bold;
        color:rgba(0,117,203,1);
      }
      .card-detail-info {
        font-size:14px;
        font-family:Roboto;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
    }
  }

  .card-title,.card-content,.card-detail{
    padding: 0 10px !important;
  }

  .card-footer {
    background:rgba(233,239,249,1);
    /*height: 40px;*/

    .card-footer-row {
      padding: 15px 10px;
      font-size:14px;
      font-family:Source Han Sans CN;
      font-weight:bold;
    }
  }

</style>