增加team页面

src/components/team/Member.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="root" :class="{'mobile': mobile}">
+    <img class="avatar" :src="data.avatar" :alt="data.name">
+    <div class="name">{{data.name}}</div>
+    <div class="job">{{data.job}}</div>
+    <div class="intro">
+      <p v-for="(s, i) in data.intro" :key="i">{{s}}</p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { AppModule, DeviceType } from '@/store/modules/app'
+
+@Component({
+  name: 'TeamMember',
+  components: {
+  },
+  props: ['data']
+})
+export default class TeamMember extends Vue {
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
+}
+</script>
+<style lang="scss" scoped>
+.root{
+  background-image: url('../../assets/202202/team/info-bg.png');
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 58px;
+  .avatar{
+    width: 200px;
+    height: 200px;
+    margin-top: -58px;
+  }
+  .name{
+    height: 32px;
+    font-size: 32px;
+    font-weight: bold;
+    color: #FFFFFF;
+    line-height: 48px;
+    margin-top: 20px;
+  }
+  .job{
+    font-size: 16px;
+    font-weight: 400;
+    color: #FFE42F;
+    line-height: 24px;
+    margin-top: 15px;
+  }
+  .intro{
+    margin-top: 34px;
+    width: 300px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 25px;
+  }
+}
+.root.mobile{
+  width: 81.6vw;
+  background-size: contain;
+  background-position: top center;
+  padding-top: 1vw;
+  margin-top: 20vw;
+  .avatar{
+    width: 37vw;
+    height: 37vw;
+    margin-top: -13vw;
+  }
+  .name{
+    font-size: 6.4vw;
+    line-height: 6.4vw;
+  }
+  .job{
+    font-size: 3.7vw;
+    line-height: 3.7vw;
+    margin-top: 2vw;
+  }
+  .intro{
+    margin-top: 0;
+    font-size: 3.7vw;
+    width: 64vw;
+    line-height: 6.7vw;
+  }
+}
+</style>

src/router/index.ts

@@ -17,6 +17,7 @@ import { isMobile } from '@/utils/resize'
 import MobileGameplay from '@/views/mobile/Gameplay.vue'
 import MobileNft from '@/views/mobile/NFT.vue'
 import MobileTokennomic from '@/views/mobile/Tokennomic.vue'
+import MobileTeam from '@/views/mobile/Team.vue'
 
 Vue.use(VueRouter)
 const mobile = isMobile()
@@ -81,7 +82,7 @@ const routes: Array<RouteConfig> = [
   {
     path: '/team',
     name: 'Team',
-    component: Team
+    component: mobile ? MobileTeam : Team
   },
   {
     path: '/roadmap',

src/views/desktop/Team.vue

@@ -1,6 +1,28 @@
 <template>
   <div class="container" :style="cstyle">
     <desktop-header current-section="team"></desktop-header>
+    <div class="content">
+      <div class="title-bar">
+        <img src="@/assets/202202/team/founder_team.png" alt="funder team"/>
+      </div>
+      <div class="team-list">
+        <team-member v-for="(d, i) in teamList" :data="d" :key="i" ></team-member>
+      </div>
+      <div class="title-bar">
+        <img src="@/assets/202202/team/partners.png" alt="partners"/>
+      </div>
+      <div class="partner-list">
+        <a href="https://twitter.com/multiverse_play">
+          <img class="multiverse" src="@/assets/202202/multiverse_play.png" alt="multiverse play"/>
+        </a>
+        <a href="https://www.coso.org/">
+          <img class="coso" src="@/assets/202202/coso@2x.png" alt="coso"/>
+        </a>
+        <a href="https://www.kucoin.com/">
+          <img class="kucoin" src="@/assets/202202/kucoin@2x.png" alt="kucoin"/>
+        </a>
+      </div>
+    </div>
     <desktop-footer></desktop-footer>
   </div>
 </template>
@@ -9,10 +31,12 @@
 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'
 
 @Component({
   name: 'Team',
   components: {
+    TeamMember,
     DesktopFooter,
     DesktopHeader
   }
@@ -20,6 +44,26 @@ import DesktopFooter from '@/components/index/DesktopFooter.vue'
 export default class extends Vue {
   private scale = 1.0
   private initWidth = 1920
+  private teamList = [{
+    avatar: require('@/assets/202202/team/luca_ganzedda.png'),
+    name: 'Luca Ganzedda',
+    job: 'Tokennomic Manager',
+    intro: [
+      'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
+      'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'
+    ]
+  },
+  {
+    avatar: require('@/assets/202202/team/jesse_lynch.png'),
+    name: 'Jesse Lynch',
+    job: 'Operation Manager',
+    intro: [
+      'Jesse has over 5-year experience in gaming, and used to work for NetEast and other famous game companies. ',
+      'Jesse has enriched network resource in the global game industry. Dedicated into the analysis of global traditional game market and GameFi industry for a long time, Jesse has in-depth understanding and insights regarding GameFi and Web 3.0.'
+    ]
+  }
+  ]
+
   get cstyle() {
     return {
       // transform: `scale(${this.scale})`
@@ -51,9 +95,39 @@ export default class extends Vue {
 </script>
 <style lang="scss" scoped>
 .container{
-  max-width: 1920px;
+  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;
+    }
+    .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>

src/views/mobile/Team.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="container" >
+    <mobile-header current-section="team"></mobile-header>
+    <div class="content">
+      <div class="title-bar">
+        <img src="@/assets/202202/team/founder_team.png" alt="funder team"/>
+      </div>
+      <div class="team-list">
+        <team-member v-for="(d, i) in teamList" :data="d" :key="i" ></team-member>
+      </div>
+      <div class="title-bar">
+        <img src="@/assets/202202/team/partners.png" alt="partners"/>
+      </div>
+      <div class="partner-list">
+        <a href="https://twitter.com/multiverse_play">
+          <img class="multiverse" src="@/assets/202202/multiverse_play.png" alt="multiverse play"/>
+        </a>
+        <a href="https://www.coso.org/">
+          <img class="coso" src="@/assets/202202/coso@2x.png" alt="coso"/>
+        </a>
+        <a href="https://www.kucoin.com/">
+          <img class="kucoin" src="@/assets/202202/kucoin@2x.png" alt="kucoin"/>
+        </a>
+      </div>
+    </div>
+    <mobile-footer></mobile-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 MobileHeader from '@/components/mobile/main/MobileHeader.vue'
+import MobileFooter from '@/components/mobile/main/MobileFooter.vue'
+
+@Component({
+  name: 'MobileTeam',
+  components: {
+    MobileFooter,
+    MobileHeader,
+    TeamMember,
+    DesktopFooter,
+    DesktopHeader
+  }
+})
+export default class MobileTeam extends Vue {
+  private teamList = [{
+    avatar: require('@/assets/202202/team/luca_ganzedda.png'),
+    name: 'Luca Ganzedda',
+    job: 'Tokennomic Manager',
+    intro: [
+      'Luca has accumulated a lot of project experience in different field, including DAO,NFT, Gamefi and DeFi, and good at token economic model design,digital asset consulting, IDO/IEO guidance.',
+      'Luca has the master degree in economics, and double bachelor’s degree in macroeconomics and Economics.'
+    ]
+  },
+  {
+    avatar: require('@/assets/202202/team/jesse_lynch.png'),
+    name: 'Jesse Lynch',
+    job: 'Operation Manager',
+    intro: [
+      'Jesse has over 5-year experience in gaming, and used to work for NetEast and other famous game companies. ',
+      'Jesse has enriched network resource in the global game industry. Dedicated into the analysis of global traditional game market and GameFi industry for a long time, Jesse has in-depth understanding and insights regarding GameFi and Web 3.0.'
+    ]
+  }
+  ]
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  width: 100vw;
+  margin: 10.4vw auto 0;
+  background-color: #171717;
+  transform-origin: top;
+  .content{
+    width: 100vw;
+    padding-top: 0;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .title-bar {
+      margin-top: 10.6vw;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      img{
+        width: 52vw;
+      }
+    }
+    .team-list{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .partner-list{
+      display: flex;
+      width: 80vw;
+      flex-direction: row;
+      margin: 20px auto 50px;
+      align-items: center;
+      justify-content: space-around;
+      .multiverse{
+        width: 20vw;
+      }
+      .coso{
+        width: 11vw;
+      }
+      .kucoin{
+        width: 27vw;
+      }
+    }
+  }
+}
+</style>