<template>
    <div class="sales-team">
      <div class="left-content">
        <h2>Sales Team</h2>
        <p>You can count on us.<br> Our committed salesteam is ready to assistyou in discovering theperfect solution foryour needs.</p>
      </div>
      <div class="right-content">
        <div class="team-member" v-for="member in teamMembers" :key="member.id">
          <el-avatar :src="member.avatar" shape="circle" class="avatar-container"></el-avatar>
          <div class="member-info">
            <h3>{{ member.name }}</h3>
            <p>Mobile: {{ member.mobile }}</p>
            <p>E: {{ member.email }}</p>
            <p>Language: {{ member.language }}</p>
            <p>Location: {{ member.location }}</p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        teamMembers: [
          {
            id: 1,
            name: 'Chris Cardassis',
            mobile: '+0400 556 420',
            email: 'Chris@trustypay.com.au',
            language: 'English/Ελληνικά',
            location: 'Sydney NSW',
            avatar: require('@/assets/index/Chris.jpg')
          },
          {
            id: 2,
            name: 'Stuart McGregor',
            mobile: '+0417 619 757',
            email: 'Stuart.mcgregor@trustypay.com',
            language: 'English',
            location: 'Sydney NSW',
            avatar: require('@/assets/index/Stuart.png')
          },
          {
            id: 3,
            name: 'Ahmed Khurram',
            mobile: '+0411 722 271',
            email: 'Ahmed.khurram@trustypay.com.au',
            language: 'English/हिंदी',
            location: 'Sydney NSW',
            avatar: require('@/assets/index/Ahmed.png')
          },
          {
            id: 4,
            name: 'Hyein Lee',
            mobile: '+0450 215 338',
            email: 'Hyein.lee@trustypay.com.au',
            language: 'English/한국',
            location: 'Melbourne VIC',
            avatar: require('@/assets/index/Hyein.jpg')
          },
          {
            id: 5,
            name: 'Jenny Wu',
            mobile: '+0452 489 321',
            email: 'Jenny.wu@trustypay.com.au',
            language: 'English/中文',
            location: 'Melbourne VIC',
            avatar: require('@/assets/index/Jenny.jpg')
          },
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .sales-team {
    display: flex;
    justify-content: space-around;
    margin: 80px 40px;

  }
  
  .left-content { 
      padding: 0 66px;
    p{
        text-align: left;      
        font-size: 20px;
        color: #1a5271;
    }
  }
  h2{
    color: #1a5271;
    font-size: 44px;
  }
  
  .right-content { 
    display: flex;
    p{
      font-size: 14px;
    }
  }
  

  
  .member-info {
    margin-top: 10px;
  }
  .avatar-container {
  width: 8vw; /* 相对于视口宽度的 10% */
  height: 8vw;
}

.team-member{
    width: 265px;
    text-align: center;
    padding: 0 10px;
}
/* 小屏幕 */
/* @media (max-width: 767px) {
  .sales-team {
    flex-direction: column;
  }
} */
</style>