<template>
  <div
    class="introduction-card"
    v-for="item in COMPANY_INTRODUCTION_CARD_LIST"
    :key="item.title"
    :style="{ backgroundImage: `url(${item.backgroundImg})` }"
  >
    <div class="introduction-card__title">{{ item.title }}</div>
    <div class="introduction-card__content">
      <div class="introduction-card__content-item" v-for="content in item.content" :key="content">
        {{ content }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { COMPANY_INTRODUCTION_CARD_LIST } from '../constant';
</script>

<style lang="scss" scoped>
  .introduction-card {
    width: 100%;
    height: 100%;
    padding: 35cpx 55cpx;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    &__title {
      font-size: 32cpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 20cpx;
    }
    &__content {
      display: flex;
      flex-direction: column;
      gap: 10cpx;
      font-size: 18cpx;
      color: #666;
    }
  }
</style>
