hjyd-mobile/src/components/Cooperation.vue

<template>
  <div class="cooperation_container">
    <HeadLine
      themeTitle="客户"
      title="合作"
      :flip="true"
      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
    />
    <div class="client_wrap">
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
      <div class="card"></div>
      <div class="card bg1"></div>
    </div>
  </div>
</template>

<script setup>
import HeadLine from 'cpns/HeadLine'
</script>

<style lang="scss" scoped>
.cooperation_container {
  .client_wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    .card {
      flex: 1;
      height: 94px;
      background: #fcfcfd;
    }
    .bg1 {
      background: #dedede;
    }
  }
}
</style>