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

<template>
  <el-card class="square-card">
    <div class="card-title" >
      {{card.name ? card.name :card.title}}
    </div>
    <div class="card-content">
      {{card.description}}
    </div>
    <div class="card-detail">
      <el-row>
        <el-col :span="6">
          <span class="card-detail-money">￥{{card.quotedPrice ? card.quotedPrice : card.quotePrice}}</span>
        </el-col>
        <el-col :span="18">
          <span class="card-detail-info pull-right">{{card.time_interval}}/{{card.joinCount}}人参与</span>
        </el-col>
      </el-row>
    </div>
    <div class="card-footer">
      <el-row class="card-footer-row">
        <el-col :span="12" class="pull-left">
          {{card.platform}}
        </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',
    props: ['card'],
    mounted() {

    }
  }
</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>