125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<template>
|
|
<div class="containers">
|
|
<div
|
|
class="axis"
|
|
:style="{ transform: `translateX(${-currentStep * 348}px)` }"
|
|
>
|
|
<div
|
|
v-for="(point, index) in points"
|
|
:key="index"
|
|
class="point"
|
|
:class="{ selected: index === currentStep }"
|
|
@click="selectPoint(index)"
|
|
v-html="point"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="axios"><img src="../../assets/img/about/axios.png" alt="" /></div>
|
|
|
|
<div class="teme-card">
|
|
<XyzTransition xyz="fade down-100% back-5">
|
|
<div class="card-item" v-if="currentStep == 0">
|
|
<div class="text">
|
|
Co-Founder of Giant Interactive(NASDAQ:GA)<br />Ops Manager in Shanda
|
|
Group
|
|
</div>
|
|
</div>
|
|
<div class="card-item" v-else-if="currentStep == 1">
|
|
<div class="text">
|
|
Core data officer of Foxconn GroupGaming data expert in Giant Interactive
|
|
</div>
|
|
</div>
|
|
<div class="card-item" v-else-if="currentStep == 2">
|
|
<div class="text">
|
|
Worked in Shanda Group with 4 million-player games
|
|
</div>
|
|
</div>
|
|
<div class="card-item" v-else="currentStep == 3">
|
|
<div class="text">
|
|
In charge of Legend, Legends of the world, The Romance of Legends, etc
|
|
</div>
|
|
</div>
|
|
</XyzTransition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue";
|
|
|
|
|
|
const points = [
|
|
"FOUNDER </br> MICHEAL YUE",
|
|
"GAMING ECONOMIST</br> YODA",
|
|
"PRODUCER</br> SUPER G",
|
|
"CTO </br> XIN",
|
|
];
|
|
const currentStep = ref(0);
|
|
|
|
const selectPoint = (index) => {
|
|
currentStep.value = index;
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.containers {
|
|
position: relative;
|
|
margin-top: 50px;
|
|
/* overflow: hidden; */
|
|
margin-left: 548px;
|
|
width: 1392px;
|
|
// height: 50px;
|
|
}
|
|
|
|
.axis {
|
|
display: flex;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.point {
|
|
width: 348px;
|
|
height: 150px;
|
|
display: flex;
|
|
text-align: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* border: 1px solid #000; */
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
font-family: "Big John";
|
|
font-weight: 400;
|
|
color: #070707;
|
|
line-height: 30px;
|
|
}
|
|
.axios {
|
|
// margin-top: 100px;
|
|
}
|
|
.selected {
|
|
/* background-color: #f0f0f0; */
|
|
}
|
|
.teme-card {
|
|
width: 1440px;
|
|
margin: 0 auto;
|
|
padding-top: 100px;
|
|
display: flex;
|
|
// justify-content: center;
|
|
position: relative;
|
|
.card-item {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
width: 210px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
height: 290px;
|
|
color: #ffffff;
|
|
background: url("../../assets/img/about/item-card.png") no-repeat;
|
|
background-size: contain;
|
|
.text{
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|