181 lines
4.0 KiB
Vue
181 lines
4.0 KiB
Vue
<template>
|
|
<section id="top-section" data-anchor="top">
|
|
<div class="slide-banner">
|
|
<div class="banner-wrapper">
|
|
<div class="slide-banner-wrapper" ref="slide">
|
|
<div class="slide-banner-content">
|
|
<a v-for="(img, index) in imgs" :key="index" :href="img.href">
|
|
<img class="slide-page" :src="img.img" alt=""/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="dots-wrapper" v-if="imgs.length>1">
|
|
<div class="page-icon"
|
|
v-for="(data, index) in imgs"
|
|
@click="toPage(index)"
|
|
:key="index" :class="index===currentPageIndex? 'selected': ''">
|
|
<div class="ctrl-line"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a class="play-btn" href="https://whitepaper.cebg.games/" v-show="currentPageIndex===0">
|
|
Whitepaper
|
|
</a>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
import RImg from '@/components/core/ResponsiveImage.vue'
|
|
import BetterScroll from 'better-scroll'
|
|
|
|
@Component({
|
|
name: 'TopSection',
|
|
components: {
|
|
RImg
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
private nums = 2
|
|
private currentPageIndex = 0
|
|
private slide: any
|
|
|
|
$refs!: {
|
|
slide: HTMLFormElement
|
|
}
|
|
|
|
get imgs() {
|
|
return [{
|
|
href: 'javascript:void(0)',
|
|
img: require('@/assets/202202/banner-b-0.jpg')
|
|
}, {
|
|
href: 'https://www.kucoin.com/spot-nft/project/6263eed0c94d5b000108c972',
|
|
img: require('@/assets/202202/banner-b-2.jpg')
|
|
}
|
|
]
|
|
}
|
|
|
|
mounted() {
|
|
this.nums = this.imgs.length
|
|
this.initScroll()
|
|
}
|
|
|
|
toPage(index: number) {
|
|
console.log('toPage:', index)
|
|
this.slide.goToPage(index, 0)
|
|
}
|
|
|
|
initScroll() {
|
|
this.slide = new BetterScroll(this.$refs.slide, {
|
|
scrollX: true,
|
|
scrollY: false,
|
|
slide: true,
|
|
momentum: false,
|
|
bounce: false,
|
|
probeType: 3
|
|
})
|
|
this.slide.on('scrollEnd', this._onScrollEnd.bind(this))
|
|
|
|
this.slide.on('slideWillChange', (page: any) => {
|
|
this.currentPageIndex = page.pageX
|
|
})
|
|
|
|
// v2.1.0
|
|
this.slide.on('slidePageChanged', (page: any) => {
|
|
// console.log('CurrentPage changed to => ', page)
|
|
})
|
|
}
|
|
|
|
_onScrollEnd() {
|
|
console.log('CurrentPage => ', this.slide.getCurrentPage())
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#top-section{
|
|
width: 1920px;
|
|
height: 1004px;
|
|
position: relative;
|
|
background-image: url('../../assets/202202/cebg_banner2@2x.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
.play-btn{
|
|
width: 280px;
|
|
height: 68px;
|
|
bottom: 188px;
|
|
left: 0;
|
|
right: 0;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
background-image: url('../../assets/202202/button@2x.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #404040;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
line-height: 68px;
|
|
}
|
|
.slide-banner {
|
|
.banner-wrapper{
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 1004px;
|
|
}
|
|
.slide-banner-wrapper {
|
|
min-height: 1px;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.slide-banner-content{
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
font-size: 0;
|
|
.slide-page{
|
|
display: inline-block;
|
|
height: 1004px;
|
|
width: 1920px;
|
|
}
|
|
}
|
|
.dots-wrapper{
|
|
position: absolute;
|
|
bottom: 100px;
|
|
width: 100%;
|
|
left: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
.page-icon {
|
|
width: 60px;
|
|
margin: 10px 20px;
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.ctrl-line {
|
|
height: 1px;
|
|
width: 60px;
|
|
background-color: black;
|
|
}
|
|
|
|
&.selected {
|
|
.ctrl-line {
|
|
background-color: white;
|
|
height: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|