fix
This commit is contained in:
huangjinming
parent
bc19ac46d3
commit
94bef74e15
14
package-lock.json
generated
14
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@animxyz/vue3": "^0.6.7",
|
||||
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
||||
"@metamask/safe-event-emitter": "^2.0.0",
|
||||
"@vue/runtime-dom": "^3.2.47",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
"@walletconnect/web3-provider": "^1.8.0",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
@ -24,7 +25,6 @@
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"process": "^0.11.10",
|
||||
"rollup-plugin-polyfill-node": "^0.12.0",
|
||||
"scrollama": "^3.2.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"swiper": "8",
|
||||
"util": "^0.12.5",
|
||||
@ -32,7 +32,6 @@
|
||||
"videojs-flash": "^2.2.1",
|
||||
"vue": "^3.2.45",
|
||||
"vue-3d-loader": "^2.1.5",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-router": "^4.1.6",
|
||||
"web3": "^1.8.2",
|
||||
"youtube-player": "^5.6.0"
|
||||
@ -1804,7 +1803,6 @@
|
||||
"version": "3.2.47",
|
||||
"resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
|
||||
"integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/runtime-core": "3.2.47",
|
||||
"@vue/shared": "3.2.47",
|
||||
@ -8677,11 +8675,6 @@
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"node_modules/scrollama": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz",
|
||||
"integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
|
||||
},
|
||||
"node_modules/scrypt-js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz",
|
||||
@ -17524,11 +17517,6 @@
|
||||
"compute-scroll-into-view": "^1.0.20"
|
||||
}
|
||||
},
|
||||
"scrollama": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz",
|
||||
"integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
|
||||
},
|
||||
"scrypt-js": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"@animxyz/vue3": "^0.6.7",
|
||||
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
|
||||
"@metamask/safe-event-emitter": "^2.0.0",
|
||||
"@vue/runtime-dom": "^3.2.47",
|
||||
"@vueuse/core": "^9.12.0",
|
||||
"@walletconnect/web3-provider": "^1.8.0",
|
||||
"ant-design-vue": "^3.2.15",
|
||||
@ -26,7 +27,6 @@
|
||||
"postcss-px-to-viewport": "^1.1.1",
|
||||
"process": "^0.11.10",
|
||||
"rollup-plugin-polyfill-node": "^0.12.0",
|
||||
"scrollama": "^3.2.0",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"swiper": "8",
|
||||
"util": "^0.12.5",
|
||||
@ -34,7 +34,6 @@
|
||||
"videojs-flash": "^2.2.1",
|
||||
"vue": "^3.2.45",
|
||||
"vue-3d-loader": "^2.1.5",
|
||||
"vue-demi": "^0.13.11",
|
||||
"vue-router": "^4.1.6",
|
||||
"web3": "^1.8.2",
|
||||
"youtube-player": "^5.6.0"
|
||||
|
||||
@ -13,8 +13,12 @@
|
||||
</div>
|
||||
<div class="slogan">
|
||||
<div>
|
||||
CEBG is the first blockchain-based animation game which consists of
|
||||
Moba, Battleroyal; funded by more than 7 institutional investors.
|
||||
<ScrollAnimatedText>
|
||||
CEBG is the first blockchain-based animation game which consists of
|
||||
Moba, Battleroyal; funded by more than 7 institutional
|
||||
investors.
|
||||
</ScrollAnimatedText
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
@ -27,7 +31,9 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.whitepaper {
|
||||
@ -81,7 +87,7 @@
|
||||
margin-left: 64px;
|
||||
padding-bottom: 52px;
|
||||
font-size: 18px;
|
||||
font-family: 'Poppins';
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
line-height: 26px;
|
||||
|
||||
43
src/components/global/AnimatedTitle.vue
Normal file
43
src/components/global/AnimatedTitle.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div class="animated-title">
|
||||
<transition-group name="bounce" tag="div">
|
||||
<span v-for="(char, index) in titleChars" :key="index">{{ char }}</span>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
const titleChars = computed(() => props.title.split(''));
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bounce-enter-active {
|
||||
animation: bounce-in 0.5s ease;
|
||||
}
|
||||
.bounce-leave-active {
|
||||
animation: bounce-in 0.5s ease reverse;
|
||||
}
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
57
src/components/global/FadeInText.vue
Normal file
57
src/components/global/FadeInText.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<span :style="{ fontSize: fontSize, color: textColor }" ref="text">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, onMounted, ref } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
fontSize: {
|
||||
type: String,
|
||||
default: "16px",
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const text = ref(null);
|
||||
|
||||
const fadeIn = (el) => {
|
||||
el.style.opacity = 0;
|
||||
el.style.transform = "translateY(90px)";
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
el.style.transition = "opacity 2s ease, transform 2s ease";
|
||||
el.style.opacity = 1;
|
||||
el.style.transform = "translateY(0)";
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
}, {});
|
||||
|
||||
observer.observe(el);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fadeIn(text.value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
display: inline-block;
|
||||
font-family: "Poppins";
|
||||
font-weight: bold;
|
||||
line-height: 28px;
|
||||
word-spacing: 2px;
|
||||
background-clip: text;
|
||||
color: black;
|
||||
-webkit-background-clip: text;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,24 +6,48 @@
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-01.png" alt="" /></div>
|
||||
<div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-02.png" alt="" /></div>
|
||||
<div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-03.png" alt="" /></div>
|
||||
<div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-04.png" alt="" /></div>
|
||||
<div class="grid-item-red">
|
||||
<img src="@/assets/img/home/chip/red-chip-01.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-red">
|
||||
<img src="@/assets/img/home/chip/red-chip-02.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-red">
|
||||
<img src="@/assets/img/home/chip/red-chip-03.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-red">
|
||||
<img src="@/assets/img/home/chip/red-chip-04.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-01.png" alt="" /></div>
|
||||
<div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-02.png" alt="" /></div>
|
||||
<div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-03.png" alt="" /></div>
|
||||
<div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-04.png" alt="" /></div>
|
||||
<div class="grid-item-yellow">
|
||||
<img src="@/assets/img/home/chip/yellow-chip-01.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-yellow">
|
||||
<img src="@/assets/img/home/chip/yellow-chip-02.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-yellow">
|
||||
<img src="@/assets/img/home/chip/yellow-chip-03.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-yellow">
|
||||
<img src="@/assets/img/home/chip/yellow-chip-04.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-01.png" alt="" /></div>
|
||||
<div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-02.png" alt="" /></div>
|
||||
<div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-03.png" alt="" /></div>
|
||||
<div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-04.png" alt="" /></div>
|
||||
<div class="grid-item-blue">
|
||||
<img src="@/assets/img/home/chip/blue-chip-01.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-blue">
|
||||
<img src="@/assets/img/home/chip/blue-chip-02.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-blue">
|
||||
<img src="@/assets/img/home/chip/blue-chip-03.png" alt="" />
|
||||
</div>
|
||||
<div class="grid-item-blue">
|
||||
<img src="@/assets/img/home/chip/blue-chip-04.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,9 +63,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chip-container {
|
||||
@ -100,14 +122,20 @@
|
||||
grid-row-gap: 40px;
|
||||
width: 370px;
|
||||
}
|
||||
.grid-item-red {
|
||||
height: 200px;
|
||||
}
|
||||
.grid-item-yellow {
|
||||
height: 200px;
|
||||
}
|
||||
.grid-item-red,
|
||||
.grid-item-yellow,
|
||||
.grid-item-blue {
|
||||
cursor: pointer;
|
||||
height: 200px;
|
||||
transition: transform 0.3s; // 添加过渡效果
|
||||
position: relative; // 使 z-index 生效
|
||||
z-index: 1; // 设置 z-index
|
||||
}
|
||||
|
||||
.grid-item-red:hover,
|
||||
.grid-item-yellow:hover,
|
||||
.grid-item-blue:hover {
|
||||
transform: translateY(-12px) scale(1.05); // 鼠标悬停时上移 10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -22,7 +22,9 @@
|
||||
</div>
|
||||
<div class="slogan">
|
||||
<div class="slogan-text">
|
||||
<ScrollAnimatedText>
|
||||
Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
|
||||
</ScrollAnimatedText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -48,8 +50,10 @@
|
||||
<img src="@/assets/img/home/gameplay-bottom-boder.png" alt="" />
|
||||
</div>
|
||||
<div class="sloagn">
|
||||
<ScrollAnimatedText>
|
||||
Undefinable pattern, incredible gaming experience and excited NFT in
|
||||
CEBG!
|
||||
</ScrollAnimatedText>
|
||||
</div>
|
||||
<DameplaySwiperCard></DameplaySwiperCard>
|
||||
</div>
|
||||
@ -63,6 +67,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from "vue";
|
||||
import DameplaySwiperCard from "./DameplaySwiperCard.vue";
|
||||
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import GalleryBanner from "./GalleryBanner.vue";
|
||||
// 引入swiper样式（按需导入）
|
||||
|
||||
@ -70,19 +70,20 @@
|
||||
</div>
|
||||
<div class="pve-content">
|
||||
<div class="slogan">
|
||||
<span class="title">
|
||||
Each battle contains 40 players by matching </span
|
||||
><br />
|
||||
<span v-if="!isPveTab"
|
||||
>A player should expect to face the majority or entirety of
|
||||
<FadeInText class="slogan-title" font-size="24px">
|
||||
Each battle contains 40 players by matching
|
||||
</FadeInText>
|
||||
<br />
|
||||
<FadeInText v-if="!isPveTab" font-size="16px">
|
||||
A player should expect to face the majority or entirety of
|
||||
their opponents in the form of computer-controlled
|
||||
opponents.
|
||||
</span>
|
||||
<span v-else
|
||||
>Stands for Player versus Player. It’s a game mode that
|
||||
</FadeInText>
|
||||
<FadeInText v-else font-size="16px">
|
||||
Stands for Player versus Player. It’s a game mode that
|
||||
revolves around layer-against-player combat - combat between
|
||||
actual human players.
|
||||
</span>
|
||||
</FadeInText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,6 +110,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
|
||||
import FadeInText from "../global/FadeInText.vue";
|
||||
import Text from "./Text.vue";
|
||||
import Moster from "./Moster.vue";
|
||||
import { gsap } from "gsap";
|
||||
@ -147,17 +150,15 @@ function handleScroll() {
|
||||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||||
}
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll);
|
||||
window.addEventListener("scroll", onScroll);
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
|
||||
Y1.value = bgTest.offsetTop * ratio.value;
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('scroll', onScroll);
|
||||
window.removeEventListener("scroll", onScroll);
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -256,7 +257,7 @@ onBeforeUnmount(() => {
|
||||
// left: -190px;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
|
||||
.content-right {
|
||||
z-index: 2;
|
||||
width: 792px;
|
||||
@ -280,7 +281,7 @@ onBeforeUnmount(() => {
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
letter-spacing: 2px;
|
||||
font-family: 'Poppins';
|
||||
font-family: "Poppins";
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@ -882,7 +882,7 @@
|
||||
"@vue/reactivity" "3.2.47"
|
||||
"@vue/shared" "3.2.47"
|
||||
|
||||
"@vue/runtime-dom@3.2.47":
|
||||
"@vue/runtime-dom@^3.2.47", "@vue/runtime-dom@3.2.47":
|
||||
"integrity" "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA=="
|
||||
"resolved" "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz"
|
||||
"version" "3.2.47"
|
||||
@ -5302,11 +5302,6 @@
|
||||
dependencies:
|
||||
"compute-scroll-into-view" "^1.0.20"
|
||||
|
||||
"scrollama@^3.2.0":
|
||||
"integrity" "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
|
||||
"resolved" "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz"
|
||||
"version" "3.2.0"
|
||||
|
||||
"scrypt-js@^3.0.0", "scrypt-js@^3.0.1":
|
||||
"integrity" "sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA=="
|
||||
"resolved" "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz"
|
||||
@ -6114,7 +6109,7 @@
|
||||
"three" "^0.143.0"
|
||||
"vue" "^3.2.25"
|
||||
|
||||
"vue-demi@*", "vue-demi@^0.13.11":
|
||||
"vue-demi@*":
|
||||
"integrity" "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
|
||||
"resolved" "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"
|
||||
"version" "0.13.11"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user