crowd-test-service-frontend/src/pages/Technology/TechnologyCard.vue

<template>
  <el-card class="technology-card">
    <div class="card-wrapper">
      <el-row>
        <el-col :span="6">
          <img src="../../assets/img/technology-img.png" alt="technology-img" class="pull-left technology-img">
        </el-col>
        <el-col :span="18" class="technology-detail">
          <div class="technology-title">
            安卓应用自动化测试中台系统
          </div>
          <div class="technology-info">
            <el-row >
              <el-col :span="6">
                原创：慕测科技
              </el-col>
              <el-col :span="6">
                来源：今日头条
              </el-col>
              <el-col :span="4" style="color: rgba(103,103,103,0.7)">
                10天前
              </el-col>
              <el-col :span="8">
                <span style="color: rgba(0,117,203,1)">1000</span>阅读
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>

  export default {
    name: 'TechnologyCard',

  }
</script>

<style scoped lang="less">
  .technology-card {
    margin-bottom: 20px;
    .card-wrapper {
      .technology-img {
        width: 100%;
        height: 130px;
      }
      .technology-detail {
        padding-left: 15px;
        height: 130px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .technology-title{
          font-size:22px;
          font-family:Source Han Sans CN;
          font-weight:500;
          color:rgba(0,0,0,1);
        }
        .technology-info {
          font-size:16px;
          font-family:Source Han Sans CN;
          font-weight:400;
          color:rgba(0,0,0,1);
        }
      }

    }
  }
</style>