fix
This commit is contained in:
huangjinming
parent
1caba16c3f
commit
bf55aff14c
11
package-lock.json
generated
11
package-lock.json
generated
@ -17,6 +17,7 @@
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.3.3",
|
||||
"buffer": "^6.0.3",
|
||||
"gsap": "^3.11.5",
|
||||
"js-cookie": "^3.0.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.30",
|
||||
@ -5415,6 +5416,11 @@
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.11.5",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.11.5.tgz",
|
||||
"integrity": "sha512-Q89nKCLgoX5xUjznh9LcaIUkz54k1voNucT1Rpf9SJNFIQznBwFqt5qUUQbeVInFyN/n18OUJkpeI6CNEDt74w=="
|
||||
},
|
||||
"node_modules/har-schema": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz",
|
||||
@ -15174,6 +15180,11 @@
|
||||
"dev": true,
|
||||
"peer": true
|
||||
},
|
||||
"gsap": {
|
||||
"version": "3.11.5",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.11.5.tgz",
|
||||
"integrity": "sha512-Q89nKCLgoX5xUjznh9LcaIUkz54k1voNucT1Rpf9SJNFIQznBwFqt5qUUQbeVInFyN/n18OUJkpeI6CNEDt74w=="
|
||||
},
|
||||
"har-schema": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz",
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
"ant-design-vue": "^3.2.15",
|
||||
"axios": "^1.3.3",
|
||||
"buffer": "^6.0.3",
|
||||
"gsap": "^3.11.5",
|
||||
"js-cookie": "^3.0.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"pinia": "^2.0.30",
|
||||
|
||||
BIN
src/assets/img/home/andriod-active.png
Normal file
BIN
src/assets/img/home/andriod-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
BIN
src/assets/img/home/apple-active.png
Normal file
BIN
src/assets/img/home/apple-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
BIN
src/assets/img/home/google-active.png
Normal file
BIN
src/assets/img/home/google-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 979 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 568 KiB After Width: | Height: | Size: 627 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
@ -1,19 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#EC2E5B;}
|
||||
.st1{fill:#DC5C7F;}
|
||||
.st2{fill:#0F6569;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M41,19c-0.25-0.25-1-1-1-1c0-7-4-16-14.41-16.47C18.19,1.19,12,2,7,12s2,17,2,17c0-7,3-9,3-9
|
||||
c1.19,1.03,0.92,0.95,4,3c3,2,4,5,4,5s0-1.67,0-3c0-0.67-1-3-1-3s1,1,2,3c2.08,4.15,1.28,9.52,1.05,10C27.03,34.93,31,25,31,25
|
||||
c1,5-1.78,7-1.78,7L29,35l4.89-1.33C38.78,31.34,40,20,40,20c1,1,3,0,3,0S42,20,41,19z"/>
|
||||
<path class="st0" d="M22.05,35c-0.02,0-0.03,0-0.05,0C22.01,35.06,22.03,35.04,22.05,35z"/>
|
||||
<path class="st0" d="M28,33l-1,1c0,0-0.16,1.53,0,2c0.53,1.59,3,6,3,6l-4,4h-5v-2c0,0,1.74-2.14,2-3c0.07-0.24,0.09-0.77,0-1
|
||||
c-0.24-0.66-1.31-1.86-2-2c-0.78-0.16-3,1-3,1l-4-1l-4-6v-1.04L13,28l-1-5l-1-1v6l-3,3l1,2l4,6l5,1c0,0,2.22-1.16,3-1
|
||||
c0.35,0.07,0.89,0.66,1,1c0.08,0.24,0.07,0.76,0,1c-0.26,0.86-2,3-2,3v3h6l5-5c0,0-2.47-4.41-3-6C27.76,35.29,28,33,28,33z"/>
|
||||
<path class="st0" d="M24,0C15.9,0,9.2,6.6,9.2,14.8c0,8.1,6.6,14.8,14.8,14.8c8.1,0,14.8-6.6,14.8-14.8C38.8,6.6,32.1,0,24,0z"/>
|
||||
<path class="st0" d="M35.4,29.2c-3.1,2.5-7.1,4-11.4,4c-4.3,0-8.2-1.5-11.4-4C6.6,33,2.5,39.7,1.9,47.4C4,47.7,7.7,48,13,48H35
|
||||
c5.3,0,9-0.3,11.1-0.6C45.5,39.7,41.4,33,35.4,29.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 724 B |
@ -1,21 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#EC2E5B;}
|
||||
.st1{fill:#DC5C7F;}
|
||||
.st2{fill:#0F6569;}
|
||||
.st0{fill:#DC5C7F;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st1" d="M40.94,19.13c-0.25-0.25-1-1-1-1c0-7-4-16-14.41-16.47c-7.4-0.34-13.59,0.47-18.59,10.47s2,17,2,17
|
||||
c0-7,3-9,3-9c1.19,1.03,0.92,0.95,4,3c3,2,4,5,4,5s0-1.67,0-3c0-0.67-1-3-1-3s1,1,2,3c2.08,4.15,1.28,9.52,1.05,10
|
||||
c4.98-0.07,8.95-10,8.95-10c1,5-1.78,7-1.78,7l-0.22,3l4.89-1.33c4.89-2.33,6.11-13.67,6.11-13.67c1,1,3,0,3,0
|
||||
S41.94,20.13,40.94,19.13z"/>
|
||||
<path class="st1" d="M21.99,35.12c-0.02,0-0.03,0-0.05,0C21.95,35.19,21.97,35.17,21.99,35.12z"/>
|
||||
<path class="st1" d="M27.94,33.13l-1,1c0,0-0.16,1.53,0,2c0.53,1.59,3,6,3,6l-4,4h-5v-2c0,0,1.74-2.14,2-3c0.07-0.24,0.09-0.77,0-1
|
||||
c-0.24-0.66-1.31-1.86-2-2c-0.78-0.16-3,1-3,1l-4-1l-4-6v-1.04l3-2.96l-1-5l-1-1v6l-3,3l1,2l4,6l5,1c0,0,2.22-1.16,3-1
|
||||
c0.35,0.07,0.89,0.66,1,1c0.08,0.24,0.07,0.76,0,1c-0.26,0.86-2,3-2,3v3h6l5-5c0,0-2.47-4.41-3-6
|
||||
C27.71,35.42,27.94,33.13,27.94,33.13z"/>
|
||||
<path class="st0" d="M24,0C15.9,0,9.2,6.6,9.2,14.8c0,8.1,6.6,14.8,14.8,14.8c8.1,0,14.8-6.6,14.8-14.8C38.8,6.6,32.1,0,24,0z"/>
|
||||
<path class="st0" d="M35.4,29.2c-3.1,2.5-7.1,4-11.4,4c-4.3,0-8.2-1.5-11.4-4C6.6,33,2.5,39.7,1.9,47.4C4,47.7,7.7,48,13,48H35
|
||||
c5.3,0,9-0.3,11.1-0.6C45.5,39.7,41.4,33,35.4,29.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 724 B |
@ -1,21 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#EC2E5B;}
|
||||
.st1{fill:#DC5C7F;}
|
||||
.st2{fill:#0F6569;}
|
||||
.st0{fill:#0F6569;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st2" d="M40.94,19.13c-0.25-0.25-1-1-1-1c0-7-4-16-14.41-16.47c-7.4-0.34-13.59,0.47-18.59,10.47s2,17,2,17
|
||||
c0-7,3-9,3-9c1.19,1.03,0.92,0.95,4,3c3,2,4,5,4,5s0-1.67,0-3c0-0.67-1-3-1-3s1,1,2,3c2.08,4.15,1.28,9.52,1.05,10
|
||||
c4.98-0.07,8.95-10,8.95-10c1,5-1.78,7-1.78,7l-0.22,3l4.89-1.33c4.89-2.33,6.11-13.67,6.11-13.67c1,1,3,0,3,0
|
||||
S41.94,20.13,40.94,19.13z"/>
|
||||
<path class="st2" d="M21.99,35.12c-0.02,0-0.03,0-0.05,0C21.95,35.19,21.97,35.17,21.99,35.12z"/>
|
||||
<path class="st2" d="M27.94,33.13l-1,1c0,0-0.16,1.53,0,2c0.53,1.59,3,6,3,6l-4,4h-5v-2c0,0,1.74-2.14,2-3c0.07-0.24,0.09-0.77,0-1
|
||||
c-0.24-0.66-1.31-1.86-2-2c-0.78-0.16-3,1-3,1l-4-1l-4-6v-1.04l3-2.96l-1-5l-1-1v6l-3,3l1,2l4,6l5,1c0,0,2.22-1.16,3-1
|
||||
c0.35,0.07,0.89,0.66,1,1c0.08,0.24,0.07,0.76,0,1c-0.26,0.86-2,3-2,3v3h6l5-5c0,0-2.47-4.41-3-6
|
||||
C27.71,35.42,27.94,33.13,27.94,33.13z"/>
|
||||
<path class="st0" d="M24,0C15.9,0,9.2,6.6,9.2,14.8c0,8.1,6.6,14.8,14.8,14.8c8.1,0,14.8-6.6,14.8-14.8C38.8,6.6,32.1,0,24,0z"/>
|
||||
<path class="st0" d="M35.4,29.2c-3.1,2.5-7.1,4-11.4,4c-4.3,0-8.2-1.5-11.4-4C6.6,33,2.5,39.7,1.9,47.4C4,47.7,7.7,48,13,48H35
|
||||
c5.3,0,9-0.3,11.1-0.6C45.5,39.7,41.4,33,35.4,29.2z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 724 B |
@ -104,7 +104,8 @@ const initPlayer = () => {
|
||||
height: props.height,
|
||||
videoId: getVideoId(),
|
||||
playsinline: 1,
|
||||
rel: 0
|
||||
rel: 0,
|
||||
mute: 1
|
||||
});
|
||||
|
||||
player.on("ready", () => {
|
||||
@ -116,7 +117,7 @@ const initPlayer = () => {
|
||||
};
|
||||
<template>
|
||||
<div class="youtube-video">
|
||||
<div v-if="videoLoaded" :id="'youtube-' + id"></div>
|
||||
<div v-if="videoLoaded" :id="'youtube-' + id" :muted="true"></div>
|
||||
<div v-else class="placeholder">
|
||||
<!-- 这里可以显示占位符，例如一张图片或者一个 loading 动画 -->
|
||||
</div>
|
||||
|
||||
@ -48,6 +48,7 @@
|
||||
videoId: getVideoId(),
|
||||
playsinline: 1,
|
||||
rel: 0,
|
||||
mute: 1
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -6,22 +6,17 @@
|
||||
<img src="@/assets/img/home/banner-slogan.gif" alt="" />
|
||||
</div>
|
||||
<div class="download-center">
|
||||
<div class="download-item">
|
||||
<!-- <a href="https://play.google.com/store/apps/details?id=io.metamask">
|
||||
<div class="download-item-google">
|
||||
<a href="https://play.google.com/store/apps/details?id=io.metamask">
|
||||
<img src="@/assets/img/home/google.png" alt=""
|
||||
/></a> -->
|
||||
<a class="btn" href="/path/to/file.apk">
|
||||
<img src="/path/to/icon.png" alt="icon" class="icon" />
|
||||
<span class="title">Button Title</span>
|
||||
<span class="subtitle">Button Subtitle</span>
|
||||
</a>
|
||||
/></a>
|
||||
</div>
|
||||
<div class="download-item">
|
||||
<div class="download-item-andriod">
|
||||
<a href="https://www.cebg.games/release/cebg.apk"
|
||||
><img src="@/assets/img/home/andriod.png" alt=""
|
||||
/></a>
|
||||
</div>
|
||||
<div class="download-item">
|
||||
<div class="download-item-apple">
|
||||
<img src="@/assets/img/home/apple.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
@ -76,11 +71,53 @@ import Slogan from "./Slogan.vue";
|
||||
width: 566px;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
.download-item {
|
||||
width: 172px;
|
||||
height: 64px;
|
||||
.download-item-google {
|
||||
width: 181px;
|
||||
height: 56px;
|
||||
background-color: #161515;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: url("../../assets/img/home/google.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: url("../../assets/img/home/google-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.download-item-andriod {
|
||||
width: 181px;
|
||||
height: 56px;
|
||||
background-color: #161515;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: url("../../assets/img/home/andriod.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: url("../../assets/img/home/andriod-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
.download-item-apple {
|
||||
width: 181px;
|
||||
height: 56px;
|
||||
background-color: #161515;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
background: url("../../assets/img/home/apple.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
img {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
background: url("../../assets/img/home/apple-active.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
:grabCursor="false"
|
||||
:centeredSlides="true"
|
||||
slidesPerView="2"
|
||||
:autoplay="{ delay: 3500, disableOnInteraction: false }"
|
||||
:autoplay="{ delay: 2500, disableOnInteraction: false }"
|
||||
:coverflowEffect="{
|
||||
rotate: 0,
|
||||
stretch: 10,
|
||||
|
||||
76
src/components/home/Text.vue
Normal file
76
src/components/home/Text.vue
Normal file
@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<p class="bottom-top" ref="slogan">
|
||||
CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first blockchain-based
|
||||
game consisting of Moba,and Battleroyal. It's funded by more than 7
|
||||
institutional investors.CEBG stands for Crypto Elite's: BATLEGROUNDS,the
|
||||
first blockchain-based game consisting of Moba,and Battleroyal. It's
|
||||
funded by more than 7 institutional investors.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUpdate } from "vue";
|
||||
import { gsap } from "gsap";
|
||||
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const slogan = ref(null);
|
||||
|
||||
const animateElement = () => {
|
||||
gsap.to(slogan.value, {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 1,
|
||||
ease: "power2.out",
|
||||
});
|
||||
slogan.value.classList.add("animate");
|
||||
// console.log(animateElement,'slogan.value');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
ScrollTrigger.create({
|
||||
trigger: slogan.value,
|
||||
start: "top-=240px center",
|
||||
markers: true,
|
||||
onEnter: animateElement,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: grid;
|
||||
}
|
||||
p {
|
||||
box-sizing: border-box;
|
||||
// padding: 1rem;
|
||||
font-size: 18px;
|
||||
font-family: sans-serif;
|
||||
background-image: linear-gradient(#ffffff 100%, #ffffff 100%, #ffffff 100%);
|
||||
background-repeat: repeat-y;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
font-size: 16px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
line-height: 28px;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
// animation: slideup-text 5s 1 forwards;
|
||||
}
|
||||
.bottom-top {
|
||||
background-size: 100% 0%;
|
||||
background-position: bottom right;
|
||||
}
|
||||
.animate {
|
||||
animation: slideup-text 2.4s 1 forwards;
|
||||
}
|
||||
@keyframes slideup-text {
|
||||
100% {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -29,14 +29,15 @@
|
||||
<div class="what-cebg-img">
|
||||
<img src="@/assets/img/home/what-boder.png" alt="" />
|
||||
</div>
|
||||
<div class="slogan">
|
||||
<!-- <div class="slogan">
|
||||
CEBG stands for Crypto Elite's: BATTLEGROUNDS,the first
|
||||
blockchain-based game consisting of Moba,and Battleroyal. It's
|
||||
funded by more than 7 institutional investors.CEBG stands for
|
||||
Crypto Elite's: BATLEGROUNDS,the first blockchain-based game
|
||||
consisting of Moba,and Battleroyal. It's funded by more than 7
|
||||
institutional investors.
|
||||
</div>
|
||||
</div> -->
|
||||
<Text></Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -107,7 +108,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
import Text from './Text.vue';
|
||||
const Y1 = ref(0);
|
||||
const ratio = ref(0.2); //视差偏移率
|
||||
const isPveTab = ref(false);
|
||||
|
||||
@ -314,7 +314,7 @@ watchEffect(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
right: 0;
|
||||
right: -10px;
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 111%;
|
||||
|
||||
@ -3329,6 +3329,11 @@
|
||||
"resolved" "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
|
||||
"version" "1.0.4"
|
||||
|
||||
"gsap@^3.11.5":
|
||||
"integrity" "sha512-Q89nKCLgoX5xUjznh9LcaIUkz54k1voNucT1Rpf9SJNFIQznBwFqt5qUUQbeVInFyN/n18OUJkpeI6CNEDt74w=="
|
||||
"resolved" "https://registry.npmmirror.com/gsap/-/gsap-3.11.5.tgz"
|
||||
"version" "3.11.5"
|
||||
|
||||
"har-schema@^2.0.0":
|
||||
"integrity" "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
|
||||
"resolved" "https://registry.npmmirror.com/har-schema/-/har-schema-2.0.0.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user