fashion-ssr-vue3/components/business/about/team.vue

<script lang='ts' setup>
import member01 from '@/assets/images/team/team_member01.png'
import member02 from '@/assets/images/team/team_member02.png'
import member03 from '@/assets/images/team/team_member03.png'
import member04 from '@/assets/images/team/team_member04.png'
import member05 from '@/assets/images/team/team_member05.png'
import member06 from '@/assets/images/team/team_member06.png'
import member07 from '@/assets/images/team/team_member07.png'
import member08 from '@/assets/images/team/team_member08.png'

const teamList = [
  {
    name: 'James Wilson',
    avatar: member01,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member02,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member03,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member04,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member05,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member06,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member07,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
  {
    name: 'James Wilson',
    avatar: member08,
    post: 'Chief Executive Officer',
    experience: '20+ years in technology leadership',
  },
]
</script>

<template>
  <div class="py-120px bg-#fff">
    <div class="w-1200-auto">
      <h2 class="text-36px !mb-80px text-center fw-800 ls-2 text-#333 custom-title-font">
        Meet the Team Behind  <span class="custom-title-bg">EJET Spark</span>
      </h2>
      <div class="grid grid-cols-4 gap-x-24px gap-y-40px text-center">
        <div v-for="item, index in teamList" :key="index">
          <img :src="item.avatar" class="w-280px h-280px object-cover">
          <div class="mt-30px mb-20px text-24px text-#333 font-800">
            {{ item.name }}
          </div>
          <div class="mb-10px text-#999999">
            {{ item.post }}
          </div>
          <div class="mb-10px text-#999999">
            {{ item.experience }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
</style>