dreamworks-mobile/src/components/DesignConcept.vue

<template>
  <div class="design_concept_container">
    <HeadLine
      title="独有的"
      themeTitle="设计理念"
      :flip="true"
      line1="DESIGN CONCEPT"
    />
    <div class="cards">
      <div class="card">card</div>
      <div class="card">card</div>
      <div class="card">card</div>
      <div class="card">card</div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.design_concept_container {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    .card {
      width: 100%;
      height: 146px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #ddd;
    }
  }
}
</style>