dreamworks-mobile/src/components/Awards.vue

<template>
  <div class="awards_container">
    <HeadLine themeTitle="奖项" title="荣获" :flip="true" line1="AWARDED" />
    <div class="award_cards">
      <div class="card bg1">
        <img class="icon" :src="A1" />
        <p class="title">荣获奖项</p>
      </div>
      <div class="card">
        <img class="icon" :src="A2" />
        <p class="title">荣获奖项</p>
      </div>
      <div class="card bg1">
        <img class="icon" :src="A3" />
        <p class="title">荣获奖项</p>
      </div>
      <div class="card">
        <img class="icon" :src="A4" />
        <p class="title">荣获奖项</p>
      </div>
      <div class="card bg1">
        <img class="icon" :src="A5" />
        <p class="title">荣获奖项</p>
      </div>
      <div class="card">
        <img class="icon" :src="A6" />
        <p class="title">荣获奖项</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeadLine from 'cpns/HeadLine'
import A1 from '@/static/img/awards/Awards1.png'
import A2 from '@/static/img/awards/Awards2.png'
import A3 from '@/static/img/awards/Awards3.png'
import A4 from '@/static/img/awards/Awards4.png'
import A5 from '@/static/img/awards/Awards5.png'
import A6 from '@/static/img/awards/Awards6.png'
</script>

<style lang="scss" scoped>
.awards_container {
  .award_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    .card {
      flex: 1;
      background: #fff;
      padding: 29px 40px 26px 40px;
      .icon {
        width: 44px;
        height: 44px;
        margin-bottom: 19px;
      }
      .title {
        font-size: 18px;
        transform: scale(0.5) translateX(-10px);
        max-width: 39px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #636363;
        white-space: nowrap;
      }
    }
    .bg1 {
      background: #f8f8f8;
    }
  }
}
</style>