From 968c7f1b06a84254600f5b83284356a41c9574d9 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Thu, 3 Mar 2022 17:42:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=80=E4=BA=9B=E6=97=A0?=
 =?UTF-8?q?=E7=94=A8=E7=9A=84=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/ChipSection.vue     |  85 -------
 src/components/main/GamePlaySection.vue | 304 ------------------------
 src/components/main/HomeHero.vue        |  74 ------
 src/components/main/HomeSection.vue     | 184 --------------
 src/components/main/VideoSection.vue    | 114 ---------
 src/components/roadmap/OneIcon.vue      |  12 +-
 src/main.ts                             |   1 -
 src/router/index.ts                     |  33 +--
 src/views/desktop/Main.vue              |  66 -----
 9 files changed, 13 insertions(+), 860 deletions(-)
 delete mode 100644 src/components/main/ChipSection.vue
 delete mode 100644 src/components/main/GamePlaySection.vue
 delete mode 100644 src/components/main/HomeHero.vue
 delete mode 100644 src/components/main/HomeSection.vue
 delete mode 100644 src/components/main/VideoSection.vue
 delete mode 100644 src/views/desktop/Main.vue

diff --git a/src/components/main/ChipSection.vue b/src/components/main/ChipSection.vue
deleted file mode 100644
index 1e1c1a1..0000000
--- a/src/components/main/ChipSection.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/main/GamePlaySection.vue b/src/components/main/GamePlaySection.vue
deleted file mode 100644
index bef4bae..0000000
--- a/src/components/main/GamePlaySection.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/main/HomeHero.vue b/src/components/main/HomeHero.vue
deleted file mode 100644
index b4c954d..0000000
--- a/src/components/main/HomeHero.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/main/HomeSection.vue b/src/components/main/HomeSection.vue
deleted file mode 100644
index 68eedae..0000000
--- a/src/components/main/HomeSection.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/main/VideoSection.vue b/src/components/main/VideoSection.vue
deleted file mode 100644
index 908510e..0000000
--- a/src/components/main/VideoSection.vue
+++ /dev/null
@@ -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>
diff --git a/src/components/roadmap/OneIcon.vue b/src/components/roadmap/OneIcon.vue
index 6181edf..feddd25 100644
--- a/src/components/roadmap/OneIcon.vue
+++ b/src/components/roadmap/OneIcon.vue
@@ -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{
diff --git a/src/main.ts b/src/main.ts
index aefe4a8..7acb35e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -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)
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 583237f..f9daf7a 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -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',
diff --git a/src/views/desktop/Main.vue b/src/views/desktop/Main.vue
deleted file mode 100644
index 79095d1..0000000
--- a/src/views/desktop/Main.vue
+++ /dev/null
@@ -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>