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 class="img"></div>
        <div class="btn_wrap">
          <p>工业设计</p>
          <div class="btn">查看详情</div>
        </div>
      </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;
      border-radius: 3px;
      background: #fff;
      .img {
        width: 100%;
        height: 88px;
        background: #000;
      }
      .btn_wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 12px 10px 16px;
        box-sizing: border-box;
        font-size: 7px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #020208;
        .btn {
          background: #f94622;
          border-radius: 8px;
          padding: 5px 9px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 7px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
</style>