fix
This commit is contained in:
huangjinming
parent
3f57fc684e
commit
2af0cd4344
BIN
mobile/src/assets/img/about/Introduction网格 (1).png
Normal file
BIN
mobile/src/assets/img/about/Introduction网格 (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 5.4 KiB After Width: | Height: | Size: 5.4 KiB |
BIN
mobile/src/assets/img/about/roadmap-bg.png
Normal file
BIN
mobile/src/assets/img/about/roadmap-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 795 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 485 B After Width: | Height: | Size: 485 B |
@ -3,14 +3,14 @@
|
||||
<div class="bg-up"></div>
|
||||
<div class="bg-middle"></div>
|
||||
<div class="bg-down"></div>
|
||||
<!-- <div class="copy-writing">
|
||||
<div class="name">{{ (teamItem.name) }}</div>
|
||||
<div class="title">{{teamItem.title}}</div>
|
||||
<div class="copy-writing">
|
||||
<div class="name">{{ teamItem.name }}</div>
|
||||
<div class="title">{{ teamItem.title }}</div>
|
||||
<div class="team-boder">
|
||||
<img src="@/assets/img/about/team-card-boder.png" alt="" />
|
||||
</div>
|
||||
<div class="slogan" v-html="teamItem.slogan "></div>
|
||||
</div> -->
|
||||
<div class="slogan" v-html="teamItem.slogan"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -20,7 +20,7 @@ defineProps(["teamItem"]);
|
||||
.bg {
|
||||
width: 100%;
|
||||
// padding-left: 15px;
|
||||
margin-left: 45px;
|
||||
margin-left: 45px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 38px;
|
||||
@ -29,24 +29,26 @@ defineProps(["teamItem"]);
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
min-height: 210px;
|
||||
max-height: 865px;
|
||||
min-height: 180px;
|
||||
max-height: 835px;
|
||||
}
|
||||
|
||||
.copy-writing {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
// overflow: hidden;
|
||||
// position: absolute;
|
||||
width: 400px;
|
||||
height: 800px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
.name {
|
||||
padding-top: 20px;
|
||||
width: 270px;
|
||||
padding-top: 80px;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
font-size: 36px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 42px;
|
||||
}
|
||||
.title {
|
||||
margin: 0 auto;
|
||||
@ -56,19 +58,19 @@ defineProps(["teamItem"]);
|
||||
color: #ffffff;
|
||||
}
|
||||
.slogan {
|
||||
// margin: 0 auto;
|
||||
width: 66%;
|
||||
margin-left: 47px;
|
||||
margin: 0 auto;
|
||||
width: 400px;
|
||||
// margin-left: 47px;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-size: 30px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
// line-height: 32px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
.copy-writing:hover .name {
|
||||
padding-top: 50px;
|
||||
padding-top: 180px;
|
||||
width: 270px;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
@ -77,11 +79,11 @@ defineProps(["teamItem"]);
|
||||
color: #ffffff;
|
||||
}
|
||||
.team-boder {
|
||||
width: 191px;
|
||||
height: 4px;
|
||||
width: 400px;
|
||||
height: 8px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin-left: 60px;
|
||||
// margin-left: 60px;
|
||||
}
|
||||
.bg-up {
|
||||
position: absolute;
|
||||
|
||||
@ -3,9 +3,6 @@
|
||||
<div class="roadmap-bg">
|
||||
<img src="@/assets/img/about/roadmap-bg.png" alt="" />
|
||||
</div>
|
||||
<div class="blue-monster">
|
||||
<img src="@/assets/img/about/blue-monster.png" alt="" />
|
||||
</div>
|
||||
<div class="history-bottom-boder">
|
||||
<img src="@/assets/img/about/history-bottom-boder.png" alt="" />
|
||||
</div>
|
||||
@ -23,69 +20,32 @@
|
||||
<div class="title-boder">
|
||||
<img src="@/assets/img/about/roadmap-title-boder.png" alt="" />
|
||||
</div>
|
||||
<div class="history">
|
||||
<div
|
||||
class="history-content"
|
||||
v-for="(item, index) in history"
|
||||
:key="index"
|
||||
<div class="roadmap-home">
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:loop="true"
|
||||
:slides-per-view="1"
|
||||
:autoplay="{ delay: 4000, disableOnInteraction: false }"
|
||||
:pagination="{ clickable: true }"
|
||||
>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="time">{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="history-bottom">
|
||||
<img src="@/assets/img/about/roadmap-time.png" alt="" />
|
||||
</div>
|
||||
|
||||
<div class="history-card">
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">PVE Model</div>
|
||||
<div class="text">2D TPS Version Dev</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">Genesis NFT IGO</div>
|
||||
<div class="text">Official Website V1</div>
|
||||
<div class="text">PVP Released</div>
|
||||
<div class="text">Alpha Test</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">3D TPS-Hero Version <br> upgrade</div>
|
||||
<div class="text">CEBG in-app wallet</div>
|
||||
<div class="text">Social System</div>
|
||||
<div class="text">Free-to-Play NFT<br> mode</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">Completing 3D <br>Upgrade</div>
|
||||
<div class="text">10K+ Participation<br> in Test II</div>
|
||||
<div class="text">NFT New Collection<br> Mint</div>
|
||||
<div class="text">In-Game Marketplace</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">Million Player in 3 <br>month</div>
|
||||
<div class="text">Off-line E-sport Event</div>
|
||||
<div class="text">KOL<br> Engine completed</div>
|
||||
<div class="text">City Warfare testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<div class="item">
|
||||
<div class="text">Million Player</div>
|
||||
<div class="text">Off-line E-sport Event</div>
|
||||
<div class="text">KOL Engine <br>completed</div>
|
||||
<div class="text">City Warfare testing</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- loop可循环轮播，autoplay可自动播放 -->
|
||||
<swiper-slide v-for="(item, index) in HistoryList" :key="index">
|
||||
<div class="time-content">
|
||||
<div class="title-and-time">
|
||||
<div class="time-content-title">{{ item.title }}</div>
|
||||
<div class="time-content-time">{{ item.time }}</div>
|
||||
</div>
|
||||
<div class="title-boder">
|
||||
<img src="../../assets/img/about/roadmap-time-top.png" alt="" />
|
||||
</div>
|
||||
<div class="time-content-content">
|
||||
<div v-for="(content, i) in item.content" :key="i">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -93,17 +53,75 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from "vue";
|
||||
// 引入swiper组件
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
// 引入swiper样式（按需导入）
|
||||
import "swiper/css";
|
||||
// import "swiper/css/pagination"; // 轮播图底面的小圆点
|
||||
|
||||
// 引入swiper核心和所需模块
|
||||
import { Autoplay, Pagination } from "swiper";
|
||||
const modules = [Autoplay];
|
||||
const Y1 = ref(0);
|
||||
const ratio = ref(0.2); //视差偏移率
|
||||
|
||||
const positionY1 = ref(0); //背景Y轴偏移量
|
||||
const history = reactive([
|
||||
{ title: "Seed Round", time: "2021.11" },
|
||||
{ title: "NFT IGO", time: "2022.4" },
|
||||
{ title: "B Round", time: "2022.11" },
|
||||
{ title: "Beta Test II", time: "2023.4" },
|
||||
{ title: "Official Launch", time: "2023.06+" },
|
||||
{ title: "Million-Player Game", time: "2023.9" },
|
||||
const HistoryList = reactive([
|
||||
{
|
||||
title: "Seed Round",
|
||||
time: "2021.11",
|
||||
content: ["PVE Model", "2D TPS Version Dev"],
|
||||
},
|
||||
{
|
||||
title: "NFT IGO",
|
||||
time: "2022.4",
|
||||
content: [
|
||||
"Genesis NFT IGO",
|
||||
"Official Website V1",
|
||||
"PVP Released",
|
||||
"Alpha Test",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "BRound",
|
||||
time: "2022.11",
|
||||
content: [
|
||||
"3D TPS-Hero Version <br> upgrade",
|
||||
"CEBG in-app wallet",
|
||||
"Social System",
|
||||
"Free-to-Play NFT<br> mode",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Beta Test II",
|
||||
time: "2023.4",
|
||||
content: [
|
||||
"Completing 3D <br>Upgrade",
|
||||
"10K+ Participation<br> in Test II",
|
||||
"NFT New Collection<br> Mint",
|
||||
"In-Game Marketplace",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Official Launch",
|
||||
time: "2023.06+",
|
||||
content: [
|
||||
"Million Player in 3 <br>month",
|
||||
"Off-line E-sport Event",
|
||||
"KOL<br> Engine completed",
|
||||
"City Warfare testing",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Million-Player Game",
|
||||
time: "2023.9",
|
||||
content: [
|
||||
"Million Player",
|
||||
"Off-line E-sport Event",
|
||||
"KOL Engine <br>completed",
|
||||
"City Warfare testing",
|
||||
],
|
||||
},
|
||||
]);
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
@ -123,6 +141,8 @@ function handleScroll() {
|
||||
<style lang="scss" scoped>
|
||||
.roadmap {
|
||||
position: relative;
|
||||
// background: #1e393d;
|
||||
padding-bottom: 256px;
|
||||
.roadmap-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -143,7 +163,6 @@ function handleScroll() {
|
||||
bottom: 108px;
|
||||
width: 820px;
|
||||
height: 667px;
|
||||
// z-index: ;
|
||||
img {
|
||||
width: 820px;
|
||||
height: 667px;
|
||||
@ -174,17 +193,64 @@ function handleScroll() {
|
||||
z-index: -1;
|
||||
}
|
||||
.content {
|
||||
width: 1440px;
|
||||
margin: 0 auto;
|
||||
.title {
|
||||
padding-top: 110px;
|
||||
padding-top: 85px;
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.title-boder {
|
||||
width: 695px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 64px;
|
||||
}
|
||||
.roadmap-home {
|
||||
width: 710px;
|
||||
margin: 0 auto;
|
||||
.swiper-slide {
|
||||
// background-color: #bfc;
|
||||
// height: 200px;
|
||||
}
|
||||
|
||||
.time-content {
|
||||
.title-and-time {
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.time-content-title {
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.time-content-time {
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
font-family: " Big John";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.time-content-content {
|
||||
width: 630px;
|
||||
margin: 0 auto;
|
||||
height: 410px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: url("@/assets/img/about/roadmap-time-bg.png") no-repeat;
|
||||
background-size: contain;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history {
|
||||
display: flex;
|
||||
@ -219,24 +285,25 @@ function handleScroll() {
|
||||
height: 290px;
|
||||
background: #1e293b;
|
||||
border-radius: 12px;
|
||||
background: url("../../assets/img/about/history-bg.png")no-repeat;
|
||||
background: url("../../assets/img/about/history-bg.png") no-repeat;
|
||||
background-size: contain;
|
||||
font-size: 16px;
|
||||
font-family: Arial;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
display: flex;flex-direction: column;
|
||||
justify-content:center ;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item{
|
||||
padding-left: 10px;
|
||||
.text{
|
||||
position: relative;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.text::after{
|
||||
content: ' ';
|
||||
.item {
|
||||
padding-left: 10px;
|
||||
.text {
|
||||
position: relative;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
.text::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 8px;
|
||||
@ -244,7 +311,7 @@ function handleScroll() {
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -41,9 +41,9 @@
|
||||
</div>
|
||||
<div class="card-list">
|
||||
<div class="card-item" v-for="team in cardText">
|
||||
<!-- <div class="cardbg">
|
||||
<div class="cardbg">
|
||||
<img src="@/assets/img/about/card-bg.png" alt="" />
|
||||
</div> -->
|
||||
</div>
|
||||
<Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,7 +216,7 @@ function handleScroll() {
|
||||
}
|
||||
.card-list {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 251px;
|
||||
// padding-bottom: 251px;
|
||||
width: 710px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
@ -228,13 +228,13 @@ function handleScroll() {
|
||||
border-radius: 12px;
|
||||
width: 710px;
|
||||
height: 930px;
|
||||
margin-bottom: 65px;
|
||||
margin-bottom: 39px;
|
||||
.cardbg {
|
||||
position: absolute;
|
||||
// left: 30px;
|
||||
// top: 40px;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: myfirstcard2 0.5s 1 alternate forwards;
|
||||
animation: myfirstcard2 1s 1 alternate forwards;
|
||||
border-radius: 12px;
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
@ -267,7 +267,7 @@ function handleScroll() {
|
||||
max-height: 865px;
|
||||
cursor: pointer;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation: myfirstnone 0.5s alternate 1 forwards;
|
||||
animation: myfirstnone 1.5s alternate 1 forwards;
|
||||
}
|
||||
|
||||
.card-item:hover {
|
||||
@ -296,10 +296,10 @@ function handleScroll() {
|
||||
}
|
||||
@keyframes myfirstcard1 {
|
||||
0% {
|
||||
left: 30px;
|
||||
top: 40px;
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
left: 50px;
|
||||
top: 30px;
|
||||
width: 308px;
|
||||
height: 308px;
|
||||
}
|
||||
100% {
|
||||
left: 0px;
|
||||
@ -311,9 +311,9 @@ function handleScroll() {
|
||||
@keyframes myfirstcard2 {
|
||||
100% {
|
||||
left: 30px;
|
||||
top: 40px;
|
||||
width: 270px;
|
||||
height: 270px;
|
||||
top: 30px;
|
||||
width: 308px;
|
||||
height: 308px;
|
||||
}
|
||||
0% {
|
||||
left: 0px;
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<div>
|
||||
<IntroductionBanner></IntroductionBanner>
|
||||
<VisionMission></VisionMission>
|
||||
<Roadmap></Roadmap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user