crowd-test-service-frontend/src/pages/Homepage/InstitutionCard.vue

<template>
  <div class="insititution-card">
    <div class="insititution-card-header">平台合作机构（项目组）</div>
    <div class="insititution-card-content">
      <el-row style="height: 80px;margin-bottom: 20px">
      <el-col :span="9">
        <div class="iscas-block insititution-block">
          <img src="../../assets/img/ISCAS.png"
               alt="logo-institution"
               class="iscas-logo">
          <div class="iscas-info">
            <div class="iscas-title">
              中国科学院软件研究所
            </div>
            <div class="iscas-title-english">
              Institute of Software Chinese Academy of Sciences
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="insititution-block">
          <div class="single-title">
            北京计算机技术及应用研究所
          </div>

        </div>
      </el-col>
      <el-col :span="7">
        <div class="insititution-block">
          <img src="../../assets/img/SJTU.png"
               alt="logo-institution"
               style="height: 60px;width: 100%"

          >
        </div>
      </el-col>
    </el-row>
      <el-row style="height: 80px;margin-bottom: 20px">
        <el-col :span="9">
          <div class="iscas-block insititution-block">
            <img src="../../assets/img/解放军工程.png"
                 alt="logo-institution"
                 class="insititution-logo">
            <div class="iscas-info">
              <div class="iscas-title">
                中国人民解放军陆军工程大学
              </div>
              <div class="iscas-title-english">
                ARMY ENGINEERING UNIVERSITY OF PLA
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="insititution-block">
            <div class="single-title">
              上海计算机软件技术开发中心
            </div>

          </div>
        </el-col>
        <el-col :span="7">
          <div class="insititution-block">
            <img src="../../assets/img/NJU.png"
                 alt="logo-institution"
                 style="height: 60px;width: 100%"

            >
          </div>
        </el-col>
      </el-row>
      <el-row style="height: 80px;margin-bottom: 20px">
        <el-col :span="9">
          <div class="iscas-block insititution-block">
            <img src="../../assets/img/拓思.png"
                 alt="logo-institution"
                 class="insititution-logo">
            <div class="iscas-info">
              <div class="iscas-title">
                广东拓思软件科学园有限公司
              </div>
              <div class="iscas-title-english">
                GUANGDONG TOPS SOFT-PARK CO,.LTD
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="iscas-block insititution-block">
            <img src="../../assets/img/logo-blue.png"
                 alt="logo-institution"
                 class="insititution-logo">
            <div class="iscas-info">
              <div class="iscas-title single-title" >
                南京慕测信息科技有限公司
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="insititution-block">
            <img src="../../assets/img/SQA.png"
                 alt="logo-institution"
                 style="height: 60px;width: 100%"

            >
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "InstitutionCard"
  }
</script>

<style scoped lang="less">
  .insititution-card {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 30px 0px rgba(8, 6, 6, 0.08);
    margin: 15px 0;
    padding: 15px 0 15px 15px;

    .insititution-card-header {
      font-size: 24px;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: rgba(0, 118, 203, 1);
      text-align: center;
      height: 60px;
      line-height: 60px;
      margin:25px auto;
    }

    .insititution-card-content {
      .insititution-block {
        padding: 10px;
        border: 1px solid #ccc;
        margin: 0 10px 20px 0;
        height: 60px;
        .single-title{
          line-height: 60px;text-align: center;font-size:22px;
          font-family:Source Han Sans CN;
          font-weight:400;
        }
        .insititution-logo {
          height: 60px;
          width: 65px;
          margin-right: 15px;
        }
      }
      .iscas-block {
        display: flex;
        .iscas-logo {
          width: 100px;
          height: 60px;
          display: inline-block;
        }

        .iscas-info {
          display: inline-block;
          height: 60px;
          .iscas-title {
            font-size: 17px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }

          .iscas-title-english {
            font-size: 10px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }
        }
      }
    }
  }
  @media screen and (max-width: 1450px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .single-title {
      font-size: 16px !important;
    }
  }

</style>