dreamworks-mobile/src/components/Track.vue

<template>
  <div>
    <HeadLine themeTitle="赛道" title="九大" line1="TRACK" :flip="true" />
    <div class="track_container">
      <div class="card">
        <div class="icon"></div>
        <p class="title">医疗健康</p>
        <div class="btn">点击查看更多</div>
      </div>
      <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 class="card"></div>
      <div class="card"></div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.track_container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 0 7px;
  padding-top: 7px;
  box-sizing: border-box;
  .card {
    flex: 1;
    background: #fafafa;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      width: 20px;
      height: 20px;
      background: #000;
      margin-bottom: 11px;
    }
    .title {
      font-size: 8px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #262626;
      margin-bottom: 9px;
    }
    .btn {
      border: 1px solid #262626;
      padding: 3px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 6px;
      font-family: Alibaba PuHuiTi;
      font-weight: 300;
      color: #262626;
      white-space: nowrap;
    }
  }
}
</style>