修改首页各分辨率下的样式

public/index.html

@@ -5,7 +5,8 @@
     <link rel="stylesheet"
           href="https://fonts.googleapis.com/css?family=Oxanium">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
+<!--    <meta name="viewport" content="width=device-width,initial-scale=1.0">-->
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <script src="assets/libs/spine-webgl.js"></script>

src/components/main/Card.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="card">
-    <img class="bg-img" src="@/assets/main/p3/bg_card.png">
+    <img class="bg-img" src="@/assets/main/card/card_border.png">
     <div class="anim-border">
-      <spine-view class="hero-anim"  :data="data" :key="data.id"></spine-view>
-      <img class="corner" src="@/assets/main/p3/bg_card_corner.png">
+      <spine-view class="hero-anim"  :data="data" :key="data.id" v-if="data.type===1"></spine-view>
+      <img class="card-main-img" :src="require('@/assets/main/card/' + data.skelName+'.png')" v-if="data.type===0"/>
+      <img class="name-img" :src="require('@/assets/main/card/'+data.name+'.png')">
       <div class="info-div">
-        <img class="name-img" src="@/assets/main/p3/racoon.png">
-        <span class="index-label">#01</span>
-        <span class="price-label">100 USDT</span>
+        <img class='buy-icon' src="@/assets/main/card/icon_buy.png"/>
+        <div class="price-label"><span>{{data.price}}</span></div>
+      </div>
+      <div class="class-div">
+        <img :src="require('@/assets/main/card/class_'+data.class+'.png')">
       </div>
     </div>
   </div>
@@ -37,70 +40,139 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@mixin resize($scale) {
+  .bg-img {
+    width: 297px/$scale;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+  }
+  .anim-border {
+    width: 287px/$scale;
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 465px/$scale;
+    margin-left: 13px/$scale;
+    overflow: hidden;
+  }
+  .hero-anim{
+    width: 500px/$scale;
+    height: 700px/$scale;
+    position: absolute;
+    left: -100px/$scale;
+    top: -100px/$scale;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .card-main-img {
+    position: absolute;
+    bottom: 0;
+    max-height: 360px/$scale;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
+  .info-div {
+    background-image: url('~@/assets/main/card/name_bg.png');
+    width: 297px/$scale;
+    height: 115px/$scale;
+    position: absolute;
+    bottom: 10px/$scale;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    justify-content: space-between;
+  }
+  .class-div{
+    position: absolute;
+    top: 90px/$scale;
+    right: 0;
+    width: 42px/$scale;
+    height: 42px/$scale;
+  }
+  .class-div img {
+    width: 100%;
+  }
+  .name-img {
+    height: 39px/$scale;
+    width: auto;
+    position: absolute;
+    right: 9px/$scale;
+    bottom: 100px/$scale;
+  }
+  .price-label {
+    color: black;
+    height: 29px/$scale;
+    font-weight: bold;
+    width: 145px/$scale;
+    background-image: url('~@/assets/main/card/price_bg.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 40px/$scale;
+    margin-bottom: 10px/$scale;
+  }
+  .price-label span {
+    font-size: 20px/$scale;
+  }
+  .buy-icon {
+    width: 44px/$scale;
+    height: 52px/$scale;
+    margin-left: 40px/$scale;
+    margin-bottom: 12px/$scale;
+  }
+}
+
+@media (max-width: 767px) {
+  @include resize($scale: 1.4);
+  .price-label {
+    color: black;
+    font-size: 16px;
+    margin-top: 3px;
+    font-weight: bold;
+  }
+  .corner {
+    display: none;
+  }
+}
+@media (min-width: 768px) {
+  @include resize($scale: 1)
+}
+@media (max-width: 415px) {
+  @include resize($scale: 2.0);
+
+  .corner {
+    display: none;
+  }
+}
+
 .card{
   position: relative;
 }
-.bg-img {
-  width: 297px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-}
-.anim-border {
-  width: 287px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 465px;
-  margin-left: 13px;
-  overflow: hidden;
-}
+
 .corner {
   position: absolute;
   right: 0;
   bottom: 0;
 }
-.hero-anim{
-  width: 500px;
-  height: 700px;
-  position: absolute;
-  left: -100px;
-  top: -100px;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
-}
-.info-div {
-  background-image: url('~@/assets/main//p3/btn_name.png');
-  width: 270px;
-  height: 115px;
-  position: absolute;
-  bottom: 10px;
-  left: 0;
-  right: 0;
-  margin-right: auto;
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.name-img {
-  height: 39px;
-  width: auto;
-}
+
 .index-label {
   color: #8FFCEF;
   font-weight: bold;
   text-shadow: 0 0 10px #8FFCEF,0 0 20px #8FFCEF,0 0 30px #8FFCEF,0 0 40px #8FFCEF;
 }
-.price-label {
-  color: black;
-  font-size: 24px;
-  margin-top: 13px;
-  font-weight: bold;
-}
 
 </style>

src/components/main/CardScroller.vue

@@ -2,7 +2,7 @@
   <div class="nft-list">
     <div class="list-container" id="list-container" ref="listContainer">
       <div class="scroll-content"
-        :style="scrollStyle"
+           :style="scrollStyle"
       >
         <div v-for="(datas, index) in cardDatas" :key="index"
              class="card-container"
@@ -38,21 +38,116 @@ import { ISpineData } from '@/utils/SpineRender'
 })
 export default class extends Vue {
   private heros: ISpineData[] = [
-    { id: 'hero_n1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.4 },
-    { id: 'hero_n2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.4 },
-    { id: 'hero_n3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.4 },
-    { id: 'hero_n4', skelName: 'pic_hero1', animName: 'animation', repeat: true, scale: 1.4 },
-    { id: 'hero_n5', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.4 }
-  ]
+    {
+      id: 'card_0',
+      price: '100 USDT',
+      name: 'aoi',
+      skelName: 'pic_hero3',
+      type: 1,
+      class: 0,
+      repeat: true,
+      scale: 2
+    },
+    {
+      id: 'card_1',
+      price: '100 USDT',
+      name: 'yamada',
+      skelName: 'pic_hero2',
+      type: 1,
+      class: 0,
+      repeat: true,
+      scale: 2
+    },
+    {
+      id: 'card_2',
+      price: '100 USDT',
+      name: 'lazar',
+      skelName: 'pic_hero9',
+      type: 1,
+      class: 1,
+      repeat: true,
+      scale: 2
+    },
+    {
+      id: 'card_3',
+      price: '100 USDT',
+      name: 'hill',
+      skelName: 'pic_hero1',
+      type: 1,
+      class: 2,
+      repeat: true,
+      scale: 2
+    },
+    {
+      id: 'card_4',
+      price: '100 USDT',
+      name: 'kurosawa',
+      skelName: 'pic_hero10',
+      type: 1,
+      class: 1,
+      repeat: true,
+      scale: 2
+    },
+    {
+      id: 'card_5',
+      price: '100 USDT',
+      name: 'canoe',
+      skelName: 'n_canoe',
+      type: 0,
+      class: 0,
+      repeat: true,
+      scale: 1.4
+    },
+    {
+      id: 'card_6',
+      price: '100 USDT',
+      name: 'miffy',
+      skelName: 'n_miffy',
+      type: 0,
+      class: 0,
+      repeat: true,
+      scale: 1.4
+    },
+    {
+      id: 'card_7',
+      price: '100 USDT',
+      name: 'dragonscale',
+      skelName: 'n_dragonscale',
+      type: 0,
+      class: 2,
+      repeat: true,
+      scale: 1.4
+    },
+    {
+      id: 'card_8',
+      price: '100 USDT',
+      name: 'astral',
+      skelName: 'n_astral',
+      type: 0,
+      class: 2,
+      repeat: true,
+      scale: 1.4
+    },
+    {
+      id: 'card_9',
+      price: '100 USDT',
+      name: 'mariana',
+      skelName: 'n_mariana',
+      type: 0,
+      class: 2,
+      repeat: true,
+      scale: 1.4
+    }
+  ];
 
-  private cardDatas: ISpineData[][] = []
-  private currentPage = 0
-  private totalPage = 1
-  private pageSize = 4
-  private scrollWidth = 100
-  private scrollLeft = 0
-  private scrolling = false
-  private scrollTime = 1
+  private cardDatas: ISpineData[][] = [];
+  private currentPage = 0;
+  private totalPage = 1;
+  private pageSize = 4;
+  private scrollWidth = 100;
+  private scrollLeft = 0;
+  private scrolling = false;
+  private scrollTime = 1;
 
   created() {
     let count = 0
@@ -63,7 +158,7 @@ export default class extends Vue {
       if (count++ < this.pageSize) {
         datas.push(this.heros[i])
       } else {
-        count = 0
+        count = 1
         this.cardDatas.push(datas)
         datas = []
         datas.push(this.heros[i])
@@ -126,7 +221,7 @@ export default class extends Vue {
     })
   }
 
-  changePos(target: number, step: number, cb: ()=>void) {
+  changePos(target: number, step: number, cb: () => void) {
     this.scrollLeft = target
     setTimeout(function() {
       cb()
@@ -136,58 +231,155 @@ export default class extends Vue {
 </script>
 
 <style lang="scss" scoped>
-.nft-list {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 766px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+@mixin resize($scale) {
+  .nft-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 650px/$scale;
+  }
+
+  .list-container {
+    width: 80vw;
+    height: 570px/$scale;
+    overflow: hidden;
+    position: relative;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .scroll-content {
+    display: flex;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .card-container {
+    display: flex;
+    width: 80vw;
+    justify-content: flex-start;
+  }
+
+  .card {
+    width: 320px/$scale;
+    height: 520px/$scale;
+  }
+
+  .action-bar {
+    display: flex;
+    width: 100vw;
+    justify-content: space-between;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .right-btn {
+    transform: rotateY(180deg);
+  }
+
+  .page-ctrl {
+    display: flex;
+    align-items: center;
+  }
+
+  .page-icon {
+    height: 45px/$scale;
+    width: 221px/$scale;
+    background-image: url('~@/assets/main/p3/icon_deselect.png');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  .page-icon.selected {
+    background-image: url('~@/assets/main/p3/icon_selected.png');
+  }
 }
-.list-container {
-  width: 80vw;
-  height: 570px;
-  overflow: hidden;
-  position: relative;
+@media (min-width: 768px) {
+  @include resize($scale: 1)
 }
-.scroll-content {
-  display: flex;
-  position: absolute;
-  left: 0;
-  top: 0;
+@media (max-width: 767px) {
+  @include resize($scale: 1.4);
+  .card-container {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  .action-bar {
+    bottom: 30vh;
+  }
+  .list-container {
+    height: 100%;
+  }
+  .right-btn {
+    width: 60px;
+    height: 77px;
+  }
+  .left-btn {
+    width: 60px;
+    height: 77px;
+  }
+  .page-ctrl {
+    display: none;
+  }
+
 }
-.card-container{
-  display: flex;
-  width: 80vw;
+@media (max-width: 415px) {
+  @include resize($scale: 2.0);
+  .card-container {
+    flex-wrap: wrap;
+  }
+  .scroll-content {
+    bottom: 0;
+  }
+  .action-bar {
+    bottom: 30vh;
+  }
+  .list-container {
+    height: 100%;
+  }
+  .right-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .left-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .page-ctrl {
+    display: none;
+  }
 }
-.card{
-  width: 320px;
-  height: 550px;
-  flex: 0 0 auto;
-}
-.action-bar {
-  display: flex;
-  width: 90vw;
-  justify-content: space-between;
-}
-.right-btn {
-  transform: rotateY(180deg);
-}
-.page-ctrl {
-  display: flex;
-  align-items: center;
-}
-.page-icon{
-  height: 45px;
-  width: 221px;
-  background-image: url('~@/assets/main/p3/icon_deselect.png');
-  background-repeat: no-repeat;
-  background-position: center;
-}
-.page-icon.selected{
-  background-image: url('~@/assets/main/p3/icon_selected.png');
+
+@media (max-width: 376px) {
+  @include resize($scale: 2.2);
+  .card-container {
+    flex-wrap: wrap;
+  }
+  .scroll-content {
+    bottom: 0;
+  }
+  .action-bar {
+    bottom: 40vh;
+  }
+  .list-container {
+    height: 100%;
+  }
+  .right-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .left-btn {
+    width: 40px;
+    height: 55px;
+  }
+  .page-ctrl {
+    display: none;
+  }
 }
 
 </style>

src/components/main/ChipSection.vue

@@ -2,9 +2,10 @@
   <section id="chip_section" data-anchor="chip">
     <div class="title">
       <img src="@/assets/main/p4/txt_title.png">
-      <span class="text">how old are you</span>
+      <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>
 
@@ -30,7 +31,7 @@ export default class extends Vue {
 }
 .title {
   position: absolute;
-  top: 58px;
+  top: 100px;
   left: 0;
   right: 0;
   display: flex;
@@ -44,6 +45,9 @@ export default class extends Vue {
 .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: 87vw;
@@ -54,4 +58,28 @@ export default class extends Vue {
   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>

src/components/main/GamePlaySection.vue

@@ -2,16 +2,29 @@
   <section id="gameplay_section" data-anchor="gameplay">
     <div class="title">
       <img src="@/assets/main/p2/txt_gameplay.png">
-      <span class="tips">hi you ar</span>
+      <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">
-      <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">some thing error</span>
-      <img class="watch_btn" src="@/assets/main/p2/btn_watch.png">
+    <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 class="hero-anim"  :data="hero" :key="hero.id"></spine-view>
     <div class="bottom-cover"></div>
+    <div class="video-bg" v-if="videoShow" @click="hideVideo"></div>
+    <div class="video-div" v-if="videoShow" >
+      <video
+        loop
+        playsinline
+        crossorigin="anonymous"
+        autoplay
+      >
+        <source :src="videoUrl">
+      </video>
+    </div>
   </section>
 </template>
 
@@ -29,6 +42,16 @@ import SpineView from '@/components/main/SpineView.vue'
 })
 export default class extends Vue {
   private hero: ISpineData = { id: 'hero10', skelName: 'pic_hero10', animName: 'animation', repeat: true, scale: 1.2 }
+  private videoShow = false
+  private videoUrl = 'https://cdn.cebg.games/video/v2.mp4'
+  showVideo() {
+    this.videoShow = true
+  }
+
+  hideVideo() {
+    this.videoShow = false
+    console.log('hide video')
+  }
 }
 </script>
 
@@ -44,7 +67,7 @@ export default class extends Vue {
   flex-direction: column;
   position: absolute;
   left: 0;
-  top: 38px;
+  top: 100px;
   right: 0;
   margin: auto;
   width: 50vw;
@@ -70,12 +93,16 @@ export default class extends Vue {
   right: 0;
   bottom: 18vh;
   position: absolute;
+  padding-bottom: 77px;
+  padding-top: 20px;
+}
+.color-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 77px;
-  padding-top: 20px;
+  width: 100%;
+  height: 80%;
 }
 .logo_t {
   width: 151px;
@@ -111,4 +138,103 @@ export default class extends Vue {
   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 {
+  width: 100%;
+  height: 100%;
+}
+@media (max-width: 767px) {
+  .title {
+    top: 60px;
+  }
+  .title img {
+    width: 100%;
+  }
+  .hero-anim{
+    width: 450px;
+    height: 600px;
+    left: 10px;
+  }
+  .color-view{
+    width: 100vw;
+    height: 50vh;
+    bottom: 8vh;
+    display: flex;
+    justify-content: 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;
+    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;
+  }
+}
+@media (max-width: 415px) {
+  .hero-anim{
+    width: 200px;
+    height: 500px;
+    left: 10px;
+  }
+  .color-content {
+    width: 70%;
+    justify-content: flex-start;
+  }
+}
 </style>

src/components/main/HomeHero.vue

@@ -35,22 +35,41 @@ export default class extends Vue {
 </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;
 }
-.hero-anim {
-  width: 400px;
-  height: 800px;
-  margin-left: -90px;
-  margin-right: -90px;
+@media (min-width: 768px) {
+  @include resize($scale: 1)
 }
-.effect-anim {
-  left:0;
-  top: 0;
-  margin-left: -80px;
-  margin-top: 50px;
-  width: 400px;
-  height: 800px;
-  position: absolute;
+@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>

src/components/main/HomeSection.vue

@@ -12,7 +12,7 @@
     </div>
     <div class="home_right_panel">
       <div class="spine-list">
-        <home-hero class="hero-anim" v-for="hero in heros" :data="hero" :key="hero.id"></home-hero>
+        <home-hero class="hero-von" v-for="hero in heros" :data="hero" :key="hero.id"></home-hero>
       </div>
     </div>
   </section>
@@ -34,10 +34,10 @@ import HomeHero from '@/components/main/HomeHero.vue'
 })
 export default class extends Vue {
   private heros: ISpineData[] = [
-    { id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true },
-    { id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true },
-    { id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true },
-    { id: 'hero4', skelName: 'pic_hero1', animName: 'animation', repeat: true }
+    { 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 }
   ]
 }
 </script>
@@ -77,14 +77,48 @@ export default class extends Vue {
   position: relative;
   display: flex;
   flex-direction: column-reverse;
+  overflow: hidden;
 }
 .spine-list{
   display: flex;
+  justify-content: space-between;
 }
-.hero-anim {
-  width: 400px;
-  height: 800px;
-  margin-left: -90px;
-  margin-right: -90px;
+.hero-von:not(:first-child){
+  margin-left: -120px;
+}
+
+@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;
+    height: 50vh;
+  }
+  .spine-list{
+  }
+
+  .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>

src/components/main/MainFooter.vue

@@ -63,8 +63,8 @@ export default class extends Vue {
   .centerPart{
     width: 50vw;
     display: grid;
-    grid-template-columns: 33% 33% 33%;
-    grid-template-rows: 80px 80px 80px;
+    grid-template-columns: repeat(3, 33.33%);
+    grid-template-rows: repeat(3, 80px);
     padding-top: 50px;
   }
   .link-list a{
@@ -96,4 +96,35 @@ export default class extends Vue {
   .community-list a img{
     width: 50px;
   }
+  @media (max-width: 767px) {
+    .footer{
+      flex-direction: column;
+      align-items: center;
+    }
+    .centerPart{
+      width: 80vw;
+      display: grid;
+      grid-template-rows: repeat(3, 30px);
+      padding-top: 30px;
+    }
+    .community-title {
+      width: 80vw;
+      display: flex;
+      justify-content: center;
+    }
+    .rightPart{
+      width: 80vw;
+      padding: 20px;
+    }
+  }
+  @media (max-width: 415px) {
+    .link-list a{
+      font-size: 14px;
+    }
+  }
+  @media (max-width: 376px) {
+    .link-list a{
+      font-size: 12px;
+    }
+  }
 </style>

src/components/main/MainHeader.vue

@@ -1,7 +1,16 @@
 <template>
   <header class="header fixed">
+    <div class="menu-list">
     <div class="logo_header"><img src="@/assets/main/p1/icon_logo_t.png"></div>
-    <div class="menu_fullpage">
+    <div data-menuanchor="home" class="marked_icon">
+      <a href="/market"><img src="@/assets/main/p1/btn_market.png"></a>
+    </div>
+    <div class="menu-icon" @click="toggleDrop">
+      <img v-if="!dropShow" src="@/assets/main/p1/menu.png">
+      <img v-if="dropShow" src="@/assets/main/p1/close.png">
+    </div>
+    </div>
+    <div class="menu_fullpage" >
       <ul>
         <li data-menuanchor="home" @click="changeSection" :class="{'active': currentSection === 'home'}">
           <a href="#home_section"><img src="@/assets/main/p1/btn_home.png"></a>
@@ -18,8 +27,24 @@
         <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">
           <a href="#chip_section"><img src="@/assets/main/p1/btn_chip.png"></a>
         </li>
-        <li data-menuanchor="home" >
-          <a href="/market"><img src="@/assets/main/p1/btn_market.png"></a>
+      </ul>
+    </div>
+    <div class="menu_drop" v-if="dropShow">
+      <ul>
+        <li data-menuanchor="home" @click="changeSection" :class="{'active': currentSection === 'home'}">
+          <a href="#home_section">HOME</a>
+        </li>
+        <li data-menuanchor="video" @click="changeSection"  :class="{'active': currentSection === 'video'}" >
+          <a href="#video_section">VIDEO</a>
+        </li>
+        <li data-menuanchor="gameplay"  @click="changeSection"  :class="{'active': currentSection === 'gameplay'}">
+          <a href="#gameplay_section">GAMEPLAY</a>
+        </li>
+        <li data-menuanchor="nft"  @click="changeSection"  :class="{'active': currentSection === 'nft'}">
+          <a href="#nft_section">NFT ITEM</a>
+        </li>
+        <li data-menuanchor="chip"  @click="changeSection"  :class="{'active': currentSection === 'chip'}">
+          <a href="#chip_section">CHIP</a>
         </li>
       </ul>
     </div>
@@ -42,12 +67,18 @@ declare module 'vue/types/vue' {
   props: ['currentSection']
 })
 export default class extends Vue {
+  private dropShow = false
   changeSection(e: PointerEvent) {
+    this.dropShow = false
     const target = e.currentTarget as HTMLElement
     if (target) {
-      this.$emit('sectionChange', target.dataset.menuanchor)
+      this.$emit('section-change', target.dataset.menuanchor)
     }
   }
+
+  toggleDrop() {
+    this.dropShow = !this.dropShow
+  }
 }
 </script>
 
@@ -57,22 +88,27 @@ export default class extends Vue {
   left: 0;
   right: 0;
   z-index: 99;
-  align-items: center;
-  justify-content: space-between;
   max-width: 1920px;
   margin: 0 auto;
   background-image: url('~@/assets/main/p1/bg_header.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .fixed.header {
   position: fixed;
   display: flex;
 }
-
+.menu-list {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .logo_header{
   width: 100px;
   height: 80px;
+  margin-left: 8px;
 }
 .logo_header img{
   width: auto;
@@ -81,7 +117,10 @@ export default class extends Vue {
   max-height: 100%;
 }
 .menu_fullpage{
-  width: 100%;
+  width: 50vw;
+  position: absolute;
+  top: 0;
+  right: 280px;
   display: flex;
   -webkit-box-align: center;
   justify-content: flex-end;
@@ -95,7 +134,8 @@ export default class extends Vue {
   lign-items: center;
   list-style: none;
   padding-left: 0;
-  margin-bottom: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
 }
 .menu_fullpage ul li {
   padding: 28px 10px 0;
@@ -103,12 +143,80 @@ export default class extends Vue {
   text-align: -webkit-match-parent;
   margin-left: 30px;
 }
-.menu_fullpage ul li:last-child {
-  padding-top: 8px;
-}
+
 .menu_fullpage ul .active{
   background-image: url('~@/assets/main/p1/btn_bg.png');
   background-repeat: repeat-x;
-  background-position: 0 21px;
+  background-position: 0 17px;
+}
+.marked_icon {
+  margin-top: 8px;
+}
+.menu-icon {
+  display: none;
+}
+@media (max-width: 767px) {
+  .header {
+    font-size: 11px;
+    display: block;
+  }
+  .logo_header{
+    width: 50px;
+    height: 40px;
+  }
+  .menu_fullpage{
+    display: none;
+  }
+  .menu_drop {
+    display: flex;
+    position: absolute;
+    top: 50px;
+    right: 0;
+    width: 50vw;
+    background-image: url('~@/assets/main/p1/bg_header.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    justify-content: flex-start;
+    padding-bottom: 20px;
+  }
+  .menu_drop ul .active{
+    background-image: none;
+  }
+  .menu_drop ul {
+    flex-direction: column;
+    display: flex;
+    -webkit-box-align: center;
+    lign-items: center;
+    list-style: none;
+    padding-left: 0;
+    margin-top: 8px;
+    margin-bottom: 8px;
+  }
+
+  .menu_drop ul li {
+    padding: 28px 10px 0;
+    display: list-item;
+    text-align: -webkit-match-parent;
+    margin-left: 30px;
+    color: white;
+  }
+  .menu_drop ul li a {
+    color: white;
+    text-decoration: none;
+    font-size: 3vw;
+  }
+  .marked_icon{
+    margin-bottom: 8px;
+    width: 80vw;
+  }
+  .marked_icon img {
+    width: 160px;
+    float: right;
+  }
+  .menu-icon{
+    display: inherit;
+    width: 32px;
+    height: 32px;
+  }
 }
 </style>

src/components/main/NftSection.vue

@@ -2,7 +2,7 @@
   <section id="nft_section" data-anchor="nft">
     <div class="title">
       <img src="@/assets/main/p3/txt_title.png">
-      <span class="text">how old are you</span>
+      <span class="text">Earn your NFTs item by playing the game and sell it on the markedplace to make money.</span>
     </div>
     <card-scroller class="card-scroller"></card-scroller>
   </section>
@@ -34,7 +34,7 @@ export default class extends Vue {
 }
 .title {
   position: absolute;
-  top: 0;
+  top: 100px;
   left: 0;
   right: 0;
   display: flex;
@@ -48,13 +48,22 @@ export default class extends Vue {
 .title .text{
   color: white;
   font-size: 28px;
+  margin: 5px 15px;
+  text-align: center;
+  text-shadow: 0 0 0.1em #fbc369, 0 0 0.1em #fbc369;
 }
-.card-scroller {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 766px;
+
+@media (max-width: 767px) {
+  .title img{
+    width: 281px;
+    top: 5vh;
+  }
+  .card-scroller {
+    height: 70vh;
+  }
+  .title .text{
+    font-size: 14px;
+  }
 }
 
 </style>

src/components/main/VideoSection.vue

@@ -1,5 +1,16 @@
 <template>
-  <section id="video_section" data-anchor="video"></section>
+  <section id="video_section" data-anchor="video">
+    <video
+      width="100%"
+      height="100%"
+      loop
+      playsinline
+      crossorigin="anonymous"
+      autoplay
+    >
+      <source :src="videoUrl">
+    </video>
+  </section>
 </template>
 
 <script lang="ts">
@@ -12,12 +23,13 @@ import { Component, Vue } from 'vue-property-decorator'
   }
 })
 export default class extends Vue {
+  private videoUrl = 'https://cdn.cebg.games/video/v2.mp4'
 }
 </script>
 
 <style lang="scss" scoped>
 #video_section {
-  background-image: url('~@/assets/main//p2/bg_p2.png');
+  background-image: url('~@/assets/main/p2/bg_p2.png');
   background-repeat: no-repeat;
   background-size: cover;
 }

src/utils/SpineRender.ts

@@ -1,9 +1,13 @@
 export interface ISpineData {
   id: string
-  skelName: string
-  animName: string
+  skelName?: string
+  animName?: string
+  name?: string
   repeat: boolean
   scale?: number
+  price?: string
+  class?: number
+  type?: number
 }
 
 export class SpineRender {
@@ -45,8 +49,8 @@ export class SpineRender {
   }
 
   init({ skelName, animName, scale, repeat }: ISpineData) {
-    this.skelName = skelName
-    this.animName = animName
+    this.skelName = skelName!
+    this.animName = animName || 'animation'
     this.repeat = repeat
     this.scale = scale || this.scale
     // Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
@@ -95,22 +99,22 @@ export class SpineRender {
     animationState.setAnimation(0, initialAnimation, self.repeat)
     animationState.addListener({
       start: function(track: spine.TrackEntry) {
-        console.log('Animation on track ' + track.trackIndex + ' started')
+        // console.log('Animation on track ' + track.trackIndex + ' started')
       },
       interrupt: function(track: spine.TrackEntry) {
-        console.log('Animation on track ' + track.trackIndex + ' interrupted')
+        // console.log('Animation on track ' + track.trackIndex + ' interrupted')
       },
       end: function(track: spine.TrackEntry) {
-        console.log('Animation on track ' + track.trackIndex + ' ended')
+        // console.log('Animation on track ' + track.trackIndex + ' ended')
       },
       dispose: function(track: spine.TrackEntry) {
-        console.log('Animation on track ' + track.trackIndex + ' disposed')
+        // console.log('Animation on track ' + track.trackIndex + ' disposed')
       },
       complete: function(track: spine.TrackEntry) {
-        console.log('Animation on track ' + track.trackIndex + ' completed')
+        // console.log('Animation on track ' + track.trackIndex + ' completed')
       },
       event: function(track: spine.TrackEntry, event: spine.Event) {
-        console.log('Event on track ' + track.trackIndex + ': ' + JSON.stringify(event))
+        // console.log('Event on track ' + track.trackIndex + ': ' + JSON.stringify(event))
       }
     })
 

src/views/Main.vue

@@ -2,7 +2,7 @@
   <div>
     <main-header
       :current-section="section"
-      @sectionChange="topMenuClicked"
+      @section-change="topMenuClicked"
     ></main-header>
     <main id="fullpage">
       <home-section ></home-section>
@@ -60,5 +60,10 @@ section{
   background-repeat: no-repeat;
   background-size: cover;
 }
+@media (max-width: 767px) {
+  #fullpage{
+    width: 100vw;
+  }
+}
 
 </style>