bemarket/src/views/desktop/Team.vue

<template>
  <div class="container" :style="cstyle">
    <desktop-header current-section="team" title="Team"></desktop-header>
    <div class="content">
      <div class="title-bar">
        <img src="@/assets/202202/team/core_team.png" alt="funder team"/>
      </div>
      <div class="advisor-list">
        <advisor-member v-for="(d, i) in teamList" :data="d" :key="i" ></advisor-member>
      </div>
<!--      <div class="title-bar">-->
<!--        <img src="@/assets/202202/team/advisors.png" alt="partners"/>-->
<!--      </div>-->
<!--      <div class="advisor-list">-->
<!--        <advisor-member v-for="(d, i) in advisors" :data="d" :key="i"></advisor-member>-->
<!--      </div>-->
    </div>
    <base-footer></base-footer>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DesktopHeader from '@/components/index/DesktopHeader.vue'
import DesktopFooter from '@/components/index/DesktopFooter.vue'
import TeamMember from '@/components/team/Member.vue'
import AdvisorMember from '@/components/team/AdvisorMember.vue'
import BaseFooter from '@/components/layout/BaseFooter.vue'

@Component({
  name: 'Team',
  components: {
    BaseFooter,
    AdvisorMember,
    TeamMember,
    DesktopFooter,
    DesktopHeader
  }
})
export default class extends Vue {
  private scale = 1.0
  private initWidth = 1920
  private teamList = [
    {
      name: 'Super G.',
      job: 'Producer Expert',
      intro: [
        'An expert in game design with 17-year experience in the game industry. ',
        'Project experience includes <Magic Rings 2> <Journey to the War> <EOS Dynasty> <Battle Royale> etc.'
      ]
    },
    {
      name: 'Yoda',
      job: 'Tokenomic Expert',
      intro: [
        'PhD. in Mathematics. ',
        'Former Data Scientist of Giant Interactive Group.'
      ]
    },
    {
      name: 'Jesse',
      job: 'Branding Leader',
      intro: [
        'Over 5-year experience in gaming, and used to work for NetEast and other famous game companies.'
      ]
    },
    {
      name: 'Michael Yue',
      job: 'Chief Advisor',
      intro: [
        'A well-known originator for the game industry in China. ',
        'Former Co-Founder of Giant Interactive Group.'
      ]
    },
    {
      name: 'Ben',
      job: 'Community Advisor',
      intro: [
        'Head of Operation of Multiverse Play. ',
        'Avid crypto enthusiast, senior investor, and versatile talent'
      ]
    },
    {
      name: 'Ray',
      job: 'Marketing Advisor',
      intro: [
        'Head of Gaming of Multiverse Play. ',
        '18-year experience in game publishing and R&D.'
      ]
    },
    {
      name: 'Alan',
      job: 'Technical Advisor',
      intro: [
        'Head of Technical of Multiverse Play. ',
        '16-year experience in Gaming industry.'
      ]
    }
  ]

  private advisors = [
    {
      name: 'Michael Yue',
      job: '',
      intro: [
        'OG in the game industry',
        'Former Co-Founder of Giant Interactive Group'
      ]
    },
    {
      name: 'Ben',
      job: '',
      intro: [
        'Head of Operation of Multiverse Play',
        'Avid crypto enthusiast, senior investor, and versatile talent',
        'A multi-disciplinary expert'
      ]
    },
    {
      name: 'Ray',
      job: '',
      intro: [
        'Head of Marketing & Content of Multiverse Play',
        '18-year experience in game publishing and R&D',
        'Ray has rich entrepreneurial experience'
      ]
    }
  ]

  get cstyle() {
    return {
      // transform: `scale(${this.scale})`
      zoom: this.scale
    }
  }

  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  }

  mounted() {
    this.resizeHandler()
  }

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  }

  resizeHandler() {
    const documentWidth = document.body.clientWidth
    if (documentWidth < this.initWidth) {
      this.scale = documentWidth / this.initWidth
    } else {
      this.scale = 1
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  width: 1920px;
  margin: 0 auto;
  background-color: #171717;
  transform-origin: top;
  .content{
    width: 1200px;
    margin: 0 auto;
    .title-bar {
      margin-top: 60px;
    }
    .team-list{
      margin-top: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .advisor-list{
      margin-top: 40px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      justify-content: center;
      margin-bottom: 40px;
    }
    .partner-list{
      display: flex;
      width: 927px;
      flex-direction: row;
      margin: 20px auto 50px;
      align-items: center;
      justify-content: space-around;
      .multiverse{
        width: 232px;
      }
      .coso{
        width: 130px;
      }
      .kucoin{
        width: 314px;
      }
    }
  }
}
</style>