hjyd-mobile/src/components/OneStop.vue

<template>
  <div class="one_stop_container">
    <div class="header_wrap">
      <HeadLine
        themeTitle="一站式设计+制造"
        title="的产业链模式"
        line1="产品梦工厂一家公司全部帮您搞定，减少供应商数量就能有效防止供应商扯皮/推诿"
        line2="不仅帮您省心、省力，还能帮您节约30%的资金投入"
      />
    </div>
    <div class="design_cards">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.one_stop_container {
  .header_wrap {
    padding: 0 10px 0 10px;
  }
  .design_cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 0 7px;
    box-sizing: border-box;
    row-gap: 7px;
    column-gap: 7px;
    .card {
      flex: 1;
      height: 125px;
      border-radius: 3px;
      background: #fff;
    }
  }
}
</style>