删除一些无用的组件
This commit is contained in:
cebgcontract
parent
db5d48f67a
commit
968c7f1b06
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<section id="chip_section" data-anchor="chip">
|
||||
<div class="title">
|
||||
<img src="@/assets/main/p4/txt_title.png">
|
||||
<span class="text">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
|
||||
</div>
|
||||
<img class="main-img" src="@/assets/main/p4/main.png">
|
||||
<img class="main-img_2" src="@/assets/main/p4_m/main.png">
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'ChipSection',
|
||||
components: {
|
||||
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#chip_section {
|
||||
background-image: url('../../assets/main/p4/bg_p4.png');
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.title img {
|
||||
width: 562px;
|
||||
height: auto;
|
||||
}
|
||||
.title .text{
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
margin: 10px 15px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
|
||||
}
|
||||
.main-img{
|
||||
width: 80vw;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 60px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.main-img_2 {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.main-img{
|
||||
display: none;
|
||||
}
|
||||
.title img {
|
||||
width: 281px;
|
||||
}
|
||||
.title .text{
|
||||
font-size: 14px;
|
||||
}
|
||||
.main-img_2{
|
||||
display: block;
|
||||
width: 90vw;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 20vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,304 +0,0 @@
|
||||
<template>
|
||||
<section id="gameplay_section" data-anchor="gameplay">
|
||||
<div class="title">
|
||||
<img src="@/assets/main/p2/txt_gameplay.png">
|
||||
<span class="tips">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
|
||||
</div>
|
||||
<div class="color-view">'
|
||||
<div class="color-content">
|
||||
<img class="logo_t" src="@/assets/main/p1/icon_logo_t.png">
|
||||
<img class="logo_b" src="@/assets/main/p2/txt_battle.png">
|
||||
<span class="text">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
|
||||
<img class="watch_btn" src="@/assets/main/p2/btn_watch.png" @click="showVideo">
|
||||
</div>
|
||||
</div>
|
||||
<spine-view v-if="!safari" class="hero-anim" :data="hero" :key="hero.id"></spine-view>
|
||||
<img v-if="safari" class="hero-anim-img" src="@/assets/main/card/n_kurosawa.png" alt="kurosawa">
|
||||
<div class="bottom-cover"></div>
|
||||
<div class="video-bg" v-show="videoShow" @click="hideVideo"></div>
|
||||
<div class="video-div" ref="videoDiv" v-show="videoShow" >
|
||||
<!-- <youtube-->
|
||||
<!-- class="video-youtube"-->
|
||||
<!-- video-id="_SZ5pVCxmro"-->
|
||||
<!-- :player-vars="playerVars"-->
|
||||
<!-- :player-width="videoWidth"-->
|
||||
<!-- :player-height="videoHeight"-->
|
||||
<!-- @ready="videoReady"-->
|
||||
<!-- @ended="videoEnded"-->
|
||||
<!-- ></youtube>-->
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { ISpineData } from '@/utils/SpineRender'
|
||||
import SpineView from '@/components/main/SpineView.vue'
|
||||
import { getBrowser } from '@/utils/browser.util'
|
||||
|
||||
@Component({
|
||||
name: 'GamePlaySection',
|
||||
components: {
|
||||
SpineView
|
||||
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
$refs!: {
|
||||
videoDiv: HTMLFormElement
|
||||
}
|
||||
|
||||
private hero: ISpineData = { id: 'hero10', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.2 }
|
||||
private videoShow = false
|
||||
private videoPlayer: any
|
||||
private videoWidth:number|string = 640
|
||||
private videoHeight:number|string = 360
|
||||
|
||||
private playerVars = {
|
||||
mute: 1,
|
||||
loop: 1,
|
||||
controls: 0
|
||||
}
|
||||
|
||||
videoReady(event: any) {
|
||||
console.log('video ready')
|
||||
event.target.mute()
|
||||
this.videoPlayer = event.target
|
||||
}
|
||||
|
||||
videoEnded(event: any) {
|
||||
console.log('video end')
|
||||
event.target.mute()
|
||||
event.target.playVideo()
|
||||
}
|
||||
|
||||
showVideo() {
|
||||
this.videoShow = true
|
||||
this.videoPlayer.playVideo()
|
||||
this.resizeHandler()
|
||||
}
|
||||
|
||||
get safari() {
|
||||
return getBrowser()[0] === 'safari'
|
||||
}
|
||||
|
||||
private resizeHandler() {
|
||||
const width = window.getComputedStyle(this.$refs.videoDiv).width
|
||||
this.videoWidth = parseInt(width.replace('px', ''))
|
||||
this.videoHeight = this.videoWidth / 1.7777777
|
||||
}
|
||||
|
||||
hideVideo() {
|
||||
this.videoShow = false
|
||||
this.videoPlayer.pauseVideo()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#gameplay_section {
|
||||
background-image: url('../../assets/main/p2/bg_p2.png');
|
||||
position: relative;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: 50vw;
|
||||
height: 200px;
|
||||
}
|
||||
.title img{
|
||||
width: 545px;
|
||||
height: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.title .tips {
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
}
|
||||
.color-view {
|
||||
background-image: url('../../assets/main/p2/bg_watch.png');
|
||||
background-repeat: no-repeat;
|
||||
width: 78vw;
|
||||
height: 30vw;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
padding-bottom: 77px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.color-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
}
|
||||
.logo_t {
|
||||
width: 151px;
|
||||
height: 112px;
|
||||
}
|
||||
.logo_b{
|
||||
width: 392px;
|
||||
height: 36px;
|
||||
}
|
||||
.color-view .text{
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
z-index: 11;
|
||||
}
|
||||
.watch_btn {
|
||||
width: 300px;
|
||||
height: 104px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.hero-anim {
|
||||
width: 600px;
|
||||
height: 800px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.hero-anim-img {
|
||||
width: 600px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.bottom-cover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50vh;
|
||||
bottom: 0;
|
||||
background-image: url('../../assets/main/p2/bg_bottom.png');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.video-bg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 14;
|
||||
}
|
||||
.video-div {
|
||||
width: 70vw;
|
||||
height: 40vw;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
z-index: 15;
|
||||
}
|
||||
.video-div .video-js {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.title {
|
||||
top: 60px;
|
||||
width: 90vw;
|
||||
}
|
||||
.title img {
|
||||
width: 100%;
|
||||
}
|
||||
.hero-anim{
|
||||
width: 450px;
|
||||
height: 600px;
|
||||
left: 1px;
|
||||
}
|
||||
.hero-anim-img{
|
||||
width: 50vw;
|
||||
left: 1px;
|
||||
height: auto;
|
||||
bottom: 20vh;
|
||||
}
|
||||
.color-view{
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
bottom: 8vh;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.color-content {
|
||||
width: 50%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.logo_t{
|
||||
width: 90px;
|
||||
height: 70px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.logo_b {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.watch_btn{
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
.title .tips {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
|
||||
}
|
||||
.color-view .text{
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
z-index: 11;
|
||||
text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
|
||||
}
|
||||
.video-div {
|
||||
width: 100vw;
|
||||
height: 56vw;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
z-index: 15;
|
||||
}
|
||||
.video-js {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
@media (max-width: 415px) {
|
||||
.hero-anim{
|
||||
width: 200px;
|
||||
height: 500px;
|
||||
left: 1px;
|
||||
}
|
||||
.hero-anim-img{
|
||||
width: 50vw;
|
||||
left: 1px;
|
||||
height: auto;
|
||||
bottom: 20vh;
|
||||
}
|
||||
.color-content {
|
||||
width: 70%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<div class="home_hero">
|
||||
<spine-view class="hero-anim" :data="data" ></spine-view>
|
||||
<spine-view class="effect-anim" :data="effectData" ></spine-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import SpineView from '@/components/main/SpineView.vue'
|
||||
import { ISpineData } from '@/utils/SpineRender'
|
||||
declare module 'vue/types/vue' {
|
||||
interface Vue {
|
||||
data: ISpineData
|
||||
}
|
||||
}
|
||||
@Component({
|
||||
name: 'HomeHero',
|
||||
props: ['data'],
|
||||
components: {
|
||||
SpineView
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
get effectData() {
|
||||
return {
|
||||
id: `effect_${this.data.id}`,
|
||||
skelName: 'guang_texiao',
|
||||
animName: 'animation',
|
||||
repeat: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@mixin resize($scale) {
|
||||
.hero-anim {
|
||||
width: 400px/$scale;
|
||||
height: 700px/$scale;
|
||||
}
|
||||
.effect-anim {
|
||||
left:0;
|
||||
top: 0;
|
||||
margin-left: -10px/$scale;
|
||||
margin-top: 50px/$scale;
|
||||
width: 400px/$scale;
|
||||
height: 700px/$scale;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.home_hero{
|
||||
position: relative;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
@include resize($scale: 1)
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
@include resize($scale: 1.4);
|
||||
.hero-anim {
|
||||
width: 33vw;
|
||||
height: 44vw;
|
||||
}
|
||||
.effect-anim {
|
||||
left:0;
|
||||
top: 0;
|
||||
margin-left: -25vw;
|
||||
width: 33vw;
|
||||
}
|
||||
}
|
||||
@media (max-width: 415px) {
|
||||
@include resize($scale: 3)
|
||||
}
|
||||
</style>
|
||||
@ -1,184 +0,0 @@
|
||||
<template>
|
||||
<section id="home_section" data-anchor="home">
|
||||
<div class="home_left_panel">
|
||||
<div class="one_row"><img src="@/assets/main/p1/icon_logo_b.png"></div>
|
||||
<div class="one_row main-txt">
|
||||
CEBG is a 2D overhead angle casual shooting game based on blockchain technology.
|
||||
You can invite friends to form a team, collect various resources in the battlefield, fight with others, let yourself survive to the end and play to earn.
|
||||
</div>
|
||||
<div class="one_row"><img src="@/assets/main/p1/icon_version.png"></div>
|
||||
<div class="one_row version_list_panel">
|
||||
<img src="@/assets/main/p1/icon_android.png" alt="android">
|
||||
<img src="@/assets/main/p1/icon_ios.png" alt="ios">
|
||||
<img src="@/assets/main/p1/icon_pc.png" alt="pc">
|
||||
</div>
|
||||
</div>
|
||||
<div class="home_right_panel">
|
||||
<div v-if="!safari" class="spine-list" :style="'transform:scale('+mainScale+')'">
|
||||
<home-hero class="hero-von" v-for="hero in heroDatas" :data="hero" :key="hero.id"></home-hero>
|
||||
</div>
|
||||
<div v-if="safari" class="hero-list">
|
||||
<img class="main_hero" src="@/assets/main/p1/heros.png" alt="heros">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import SpineView from '@/components/main/SpineView.vue'
|
||||
import { ISpineData } from '@/utils/SpineRender'
|
||||
import HomeHero from '@/components/main/HomeHero.vue'
|
||||
import { getBrowser } from '@/utils/browser.util'
|
||||
|
||||
@Component({
|
||||
name: 'HomeSection',
|
||||
components: {
|
||||
HomeHero,
|
||||
SpineView
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private mainScale = 1
|
||||
private widthDesign = 1920
|
||||
private widthSmall = 767
|
||||
private heroDatas: ISpineData[] = [
|
||||
{ id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.1 },
|
||||
{ id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.1 },
|
||||
{ id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.1 },
|
||||
{ id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true, scale: 1.1 }
|
||||
]
|
||||
|
||||
pageResize() {
|
||||
const self = this
|
||||
this.$nextTick(() => {
|
||||
const width = document.getElementById('fullpage')!.getBoundingClientRect().width
|
||||
if (width >= this.widthSmall && width <= this.widthDesign) {
|
||||
self.mainScale = (width / this.widthDesign) * 0.9
|
||||
} else {
|
||||
self.mainScale = 1
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
get safari() {
|
||||
console.log(getBrowser()[0], getBrowser()[0] === 'safari')
|
||||
return getBrowser()[0] === 'safari'
|
||||
}
|
||||
|
||||
mounted() {
|
||||
const self = this
|
||||
window.onresize = () => {
|
||||
self.pageResize()
|
||||
}
|
||||
self.pageResize()
|
||||
}
|
||||
|
||||
destroyed() {
|
||||
window.onresize = null
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#home_section {
|
||||
background-image: url('../../assets/main/p1/bg_p1.png');
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.main-txt{
|
||||
color: #8DFFF9;
|
||||
font-family: 'zitic';
|
||||
font-size: 20px;
|
||||
}
|
||||
.home_left_panel{
|
||||
/* position: absolute;
|
||||
left: 20px;
|
||||
top: 60px;*/
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(0.8);
|
||||
|
||||
}
|
||||
.home_left_panel .one_row{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.home_left_panel .one_row:first-child{
|
||||
margin-left: -43px;
|
||||
}
|
||||
.version_list_panel {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-right: 30px;
|
||||
}
|
||||
.version_list_panel img:nth-child(2) {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.home_right_panel {
|
||||
width: 65%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
}
|
||||
.spine-list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.hero-list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 50vw;
|
||||
margin-bottom: 5vh;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.hero-von:not(:first-child){
|
||||
margin-left: -150px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#home_section{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.home_left_panel{
|
||||
width: 100vw;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.home_right_panel {
|
||||
width: 100vw;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.spine-list{
|
||||
width: 100vw;
|
||||
}
|
||||
.hero-list{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.home_left_panel .one_row:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
.one_row img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.version_list_panel img{
|
||||
width: 25vw;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.hero-von:not(:first-child){
|
||||
margin-left: -100px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 415px) {
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -1,114 +0,0 @@
|
||||
<template>
|
||||
<section id="video_section" ref="videoSection" data-anchor="video">
|
||||
<you-tube-player
|
||||
class="video-youtube"
|
||||
video-id="_SZ5pVCxmro"
|
||||
:player-vars="playerVars"
|
||||
:player-width="videoWidth"
|
||||
:player-height="videoHeight"
|
||||
@ready="videoReady"
|
||||
@ended="videoEnded"
|
||||
></you-tube-player>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
|
||||
|
||||
@Component({
|
||||
name: 'VideoSection',
|
||||
components: {
|
||||
YouTubePlayer
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
$refs!: {
|
||||
videoSection: HTMLFormElement
|
||||
}
|
||||
|
||||
private videoWidth:number|string = 640
|
||||
private videoHeight:number|string = 360
|
||||
|
||||
private playerVars = {
|
||||
autoplay: 1,
|
||||
mute: 1,
|
||||
loop: 1,
|
||||
controls: 0
|
||||
}
|
||||
|
||||
beforeMount() {
|
||||
console.log('11')
|
||||
Youtube.install(Vue)
|
||||
window.addEventListener('resize', this.resizeHandler)
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this.resizeHandler()
|
||||
}
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.resizeHandler)
|
||||
}
|
||||
|
||||
private resizeHandler() {
|
||||
const width = window.getComputedStyle(this.$refs.videoSection).width
|
||||
this.videoWidth = parseInt(width.replace('px', ''))
|
||||
this.videoHeight = this.videoWidth / 1.7777777
|
||||
}
|
||||
|
||||
// get vh() {
|
||||
// return this.vw / 1.7777
|
||||
// }
|
||||
|
||||
videoReady(event: any) {
|
||||
console.log('video ready')
|
||||
event.target.mute()
|
||||
event.target.playVideo()
|
||||
}
|
||||
|
||||
videoEnded(event: any) {
|
||||
console.log('video end')
|
||||
event.target.mute()
|
||||
event.target.playVideo()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#video_section {
|
||||
background-image: url('../../assets/main/p2/bg_p2.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-js {
|
||||
width: 100vw;
|
||||
height: 56vw;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
video{
|
||||
//mix-blend-mode: screen;
|
||||
}
|
||||
video.playing {
|
||||
//mix-blend-mode: normal;
|
||||
}
|
||||
.video-youtube{
|
||||
width: 100vw;
|
||||
height: 56vw;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -119,16 +119,12 @@ export default class OneIcon extends Vue {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
@-webkit-keyframes rotation{
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
@keyframes rotation{
|
||||
from {transform: rotate(0deg);}
|
||||
to {transform: rotate(360deg);}
|
||||
}
|
||||
.an{
|
||||
-webkit-transform: rotate(360deg);
|
||||
animation: rotation 3s linear infinite;
|
||||
-moz-animation: rotation 3s linear infinite;
|
||||
-webkit-animation: rotation 3s linear infinite;
|
||||
-o-animation: rotation 3s linear infinite;
|
||||
animation: rotation 6s infinite linear;
|
||||
}
|
||||
}
|
||||
.one-icon.mobile{
|
||||
|
||||
@ -6,7 +6,6 @@ import router from './router'
|
||||
import store from './store'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
|
||||
// Vue.use(ElementUI)
|
||||
Vue.use(Loading.directive)
|
||||
Vue.use(Slider)
|
||||
|
||||
|
||||
@ -1,22 +1,7 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter, { RouteConfig } from 'vue-router'
|
||||
import Market from '../views/desktop/Market.vue'
|
||||
import Official from '@/views/desktop/Official.vue'
|
||||
import Item from '../views/desktop/Item.vue'
|
||||
import MyNft from '@/views/desktop/MyNft.vue'
|
||||
import Index from '@/views/desktop/Index.vue'
|
||||
import Presale from '@/views/desktop/Presale.vue'
|
||||
import Gameplay from '@/views/desktop/Gameplay.vue'
|
||||
import Tokenomic from '@/views/desktop/Tokenomic.vue'
|
||||
import Team from '@/views/desktop/Team.vue'
|
||||
import Roadmap from '@/views/desktop/Roadmap.vue'
|
||||
import MobileIndex from '@/views/mobile/Index.vue'
|
||||
import { AppModule, DeviceType } from '@/store/modules/app'
|
||||
import { isMobile } from '@/utils/resize'
|
||||
import MobileGameplay from '@/views/mobile/Gameplay.vue'
|
||||
import MobileTokennomic from '@/views/mobile/Tokenomic.vue'
|
||||
import MobileTeam from '@/views/mobile/Team.vue'
|
||||
import MobileRoadmap from '@/views/mobile/Roadmap.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
const mobile = isMobile()
|
||||
@ -28,7 +13,7 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Main',
|
||||
component: mobile ? MobileIndex : Index,
|
||||
component: resolve => mobile ? require(['@/views/mobile/Index.vue'], resolve) : require(['@/views/desktop/Index.vue'], resolve),
|
||||
alias: '/index.html',
|
||||
meta: {
|
||||
title: 'CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',
|
||||
@ -47,17 +32,17 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/market',
|
||||
name: 'Market',
|
||||
component: Market
|
||||
component: resolve => require(['@/views/desktop/Market.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/official',
|
||||
name: 'Official',
|
||||
component: Official
|
||||
component: resolve => require(['@/views/desktop/Official.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/presale',
|
||||
name: 'Presale',
|
||||
component: Presale
|
||||
component: resolve => require(['@/views/desktop/Presale.vue'], resolve)
|
||||
// beforeEnter(to, from, next) {
|
||||
// window.location.href = 'https://test.cebg.games/presale'
|
||||
// }
|
||||
@ -65,12 +50,12 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/mynft',
|
||||
name: 'MyNft',
|
||||
component: MyNft
|
||||
component: resolve => require(['@/views/desktop/MyNft.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/item/:id',
|
||||
name: 'Item',
|
||||
component: Item
|
||||
component: resolve => require(['@/views/desktop/Item.vue'], resolve)
|
||||
},
|
||||
{
|
||||
path: '/nft',
|
||||
@ -114,7 +99,7 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/tokenomic',
|
||||
name: 'Tokenomic',
|
||||
component: mobile ? MobileTokennomic : Tokenomic,
|
||||
component: resolve => mobile ? require(['@/views/mobile/Tokenomic.vue'], resolve) : require(['@/views/desktop/Tokenomic.vue'], resolve),
|
||||
alias: '/tokenomic/index.html',
|
||||
meta: {
|
||||
title: 'Tokenomic | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',
|
||||
@ -133,7 +118,7 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/team',
|
||||
name: 'Team',
|
||||
component: mobile ? MobileTeam : Team,
|
||||
component: resolve => mobile ? require(['@/views/mobile/Team.vue'], resolve) : require(['@/views/desktop/Team.vue'], resolve),
|
||||
alias: '/team/index.html',
|
||||
meta: {
|
||||
title: 'Team | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',
|
||||
@ -152,7 +137,7 @@ const routes: Array<RouteConfig> = [
|
||||
{
|
||||
path: '/roadmap',
|
||||
name: 'Roadmap',
|
||||
component: mobile ? MobileRoadmap : Roadmap,
|
||||
component: resolve => mobile ? require(['@/views/mobile/Roadmap.vue'], resolve) : require(['@/views/desktop/Roadmap.vue'], resolve),
|
||||
alias: '/roadmap/index.html',
|
||||
meta: {
|
||||
title: 'Roadmap | CEBG: CRYPTO ELITE‘S BATTLEGROUNDS',
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<main-header
|
||||
:current-section="section"
|
||||
@section-change="topMenuClicked"
|
||||
></main-header>
|
||||
<main id="fullpage">
|
||||
<home-section ></home-section>
|
||||
<video-section></video-section>
|
||||
<game-play-section></game-play-section>
|
||||
<nft-section></nft-section>
|
||||
<main-footer></main-footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import MainHeader from '@/components/main/MainHeader.vue'
|
||||
import HomeSection from '@/components/main/HomeSection.vue'
|
||||
import VideoSection from '@/components/main/VideoSection.vue'
|
||||
import GamePlaySection from '@/components/main/GamePlaySection.vue'
|
||||
import NftSection from '@/components/main/NftSection.vue'
|
||||
import MainFooter from '@/components/main/MainFooter.vue'
|
||||
@Component({
|
||||
name: 'Main',
|
||||
components: {
|
||||
MainFooter,
|
||||
NftSection,
|
||||
GamePlaySection,
|
||||
VideoSection,
|
||||
HomeSection,
|
||||
MainHeader
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private section = 'home'
|
||||
private topMenuClicked(section: string) {
|
||||
this.section = section
|
||||
console.log('topMenuClicked: ', section)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
height: 100vh;
|
||||
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
|
||||
-moz-background-size:100% 100%;
|
||||
background-size:100% 100%;
|
||||
}
|
||||
#fullpage{
|
||||
max-width: 1920px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
section{
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
#fullpage{
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user