增加team页面
This commit is contained in:
cebgcontract
parent
86ac410808
commit
bf98cf166e
BIN
src/assets/202202/multiverse_play.png
Normal file
BIN
src/assets/202202/multiverse_play.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/202202/team/founder_team.png
Normal file
BIN
src/assets/202202/team/founder_team.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/202202/team/info-bg.png
Normal file
BIN
src/assets/202202/team/info-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/202202/team/jesse_lynch.png
Normal file
BIN
src/assets/202202/team/jesse_lynch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/202202/team/luca_ganzedda.png
Normal file
BIN
src/assets/202202/team/luca_ganzedda.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/202202/team/partners.png
Normal file
BIN
src/assets/202202/team/partners.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
93
src/components/team/Member.vue
Normal file
93
src/components/team/Member.vue
Normal file
@ -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>
|
||||
@ -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',
|
||||
|
||||
@ -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>
|
||||
|
||||
115
src/views/mobile/Team.vue
Normal file
115
src/views/mobile/Team.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user