161 lines
3.7 KiB
Vue
161 lines
3.7 KiB
Vue
<template>
|
|
<div>
|
|
<div class="banner">
|
|
<div class="content">
|
|
<div class="sologan">
|
|
<img src="@/assets/img/home/banner-slogan.gif" alt="" />
|
|
<!-- <Slogan></Slogan> -->
|
|
</div>
|
|
<!-- <div class="download-center">
|
|
<div class="download-item">
|
|
<a href="https://play.google.com/store/apps/details?id=io.metamask">
|
|
<img src="@/assets/img/home/google.png" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="download-item">
|
|
<a href="https://www.cebg.games/release/cebg.apk"
|
|
><img src="@/assets/img/home/andriod.png" alt=""
|
|
/></a>
|
|
</div>
|
|
<div class="download-item">
|
|
<a href="https://www.cebg.games/release/cebg.apk">
|
|
<img src="@/assets/img/home/apple.png" alt=""
|
|
/></a>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="posters">
|
|
<div class="poster poster-one"></div>
|
|
<div class="poster poster-tow"></div>
|
|
<div class="poster poster-there"></div>
|
|
</div>
|
|
<div class="banner-bg">
|
|
<img src="@/assets/img/home/banner-out.png" alt="" />
|
|
</div>
|
|
<div class="boder-bottom">
|
|
<img src="@/assets/img/home/banner-boder.png" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Slogan from "./Slogan.vue";
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.banner {
|
|
width: 100%;
|
|
height: 100vh;
|
|
height: 937px;
|
|
// padding-top: 60px;
|
|
// background: url("@/assets/img/home/banner-out.jpg") no-repeat;
|
|
// background-size: 100% 100%;
|
|
// object-fit: cover;
|
|
position: relative;
|
|
.sologan {
|
|
margin: 0 auto;
|
|
width: 1600px;
|
|
height: 162px;
|
|
padding-bottom: 25px;
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
}
|
|
.content {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10%;
|
|
// right: 100px;
|
|
z-index: 8;
|
|
// transform: translate(-50%, -50%);
|
|
|
|
.download-center {
|
|
margin-top: 25px;
|
|
display: flex;
|
|
width: 566px;
|
|
margin: 0 auto;
|
|
justify-content: space-between;
|
|
.download-item {
|
|
width: 172px;
|
|
height: 64px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
.posters {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 60px;
|
|
z-index: 9;
|
|
margin-bottom: 12px;
|
|
margin-top: 74px;
|
|
width: 10%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
.poster {
|
|
width: 100%;
|
|
height: 23px;
|
|
background-image: url("@/assets/img/home/poster.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
background-color: transparent;
|
|
background-size: auto;
|
|
-webkit-animation-name: arrow;
|
|
animation-name: arrow;
|
|
-webkit-animation-duration: 1.5s;
|
|
animation-duration: 1.5s;
|
|
-webkit-animation-timing-function: linear;
|
|
animation-timing-function: linear;
|
|
-webkit-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
.poster-one {
|
|
top: 0;
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s;
|
|
}
|
|
.poster-tow {
|
|
top: 12px;
|
|
-webkit-animation-delay: 0.5s;
|
|
animation-delay: 0.5s;
|
|
}
|
|
.poster-there {
|
|
top: 24px;
|
|
-webkit-animation-delay: 1s;
|
|
animation-delay: 1s;
|
|
}
|
|
@keyframes arrow {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
.banner-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
}
|
|
.boder-bottom {
|
|
width: 100%;
|
|
z-index: 3;
|
|
position: absolute;
|
|
bottom: 0;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|