From f6d9cd77ac89d738f345486da400b17f33fd17f4 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Thu, 3 Mar 2022 13:41:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E5=B8=82=E5=9C=BA=E4=B8=A4=E4=B8=AAhe?=
 =?UTF-8?q?ader=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                      |  25 +--
 package.json                           |   1 -
 src/components/index/DesktopHeader.vue |   2 +-
 src/components/market/FilterItem.vue   |  17 +-
 src/components/market/MoileTop.vue     | 246 -------------------------
 src/components/market/SearchPanel.vue  |   2 +-
 src/components/market/TopMenu.vue      | 213 ++++++++++++++++++++-
 src/views/desktop/Item.vue             |  10 +-
 src/views/desktop/Market.vue           |   9 -
 src/views/desktop/MyNft.vue            |   9 -
 src/views/desktop/Official.vue         |   7 -
 11 files changed, 225 insertions(+), 316 deletions(-)
 delete mode 100644 src/components/market/MoileTop.vue

diff --git a/package-lock.json b/package-lock.json
index ff7498a..04166c5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8651,7 +8651,9 @@
     "deepmerge": {
       "version": "4.2.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/download/deepmerge-4.2.2.tgz",
-      "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU="
+      "integrity": "sha1-RNLqNnm49NT/ujPwPYZfwee/SVU=",
+      "dev": true,
+      "optional": true
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -11347,11 +11349,6 @@
         "rimraf": "2"
       }
     },
-    "fullpage.js": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmmirror.com/fullpage.js/download/fullpage.js-3.1.2.tgz",
-      "integrity": "sha1-7mKJ9S7bKp+cJdCcQCIEO3AdPMA="
-    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "http://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
@@ -19033,14 +19030,6 @@
         }
       }
     },
-    "vue-fullpage.js": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmmirror.com/vue-fullpage.js/download/vue-fullpage.js-0.1.7.tgz",
-      "integrity": "sha1-YrxTlI8iF/sU6lVQIbE/uZe04UE=",
-      "requires": {
-        "fullpage.js": "^3.1.0"
-      }
-    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
@@ -19149,14 +19138,6 @@
         }
       }
     },
-    "vue-meta": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmmirror.com/vue-meta/-/vue-meta-2.4.0.tgz",
-      "integrity": "sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==",
-      "requires": {
-        "deepmerge": "^4.2.2"
-      }
-    },
     "vue-property-decorator": {
       "version": "9.1.2",
       "resolved": "https://registry.npm.taobao.org/vue-property-decorator/download/vue-property-decorator-9.1.2.tgz",
diff --git a/package.json b/package.json
index d469c15..1d8c080 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,6 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
     "vue-clipboard2": "^0.3.3",
-    "vue-fullpage.js": "^0.1.7",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
     "vue-youtube-embed": "^2.2.2",
diff --git a/src/components/index/DesktopHeader.vue b/src/components/index/DesktopHeader.vue
index f38183d..646fbdb 100644
--- a/src/components/index/DesktopHeader.vue
+++ b/src/components/index/DesktopHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <header class="header fixed">
     <div class="logo">
-      <img src="@/assets/main/p1/icon_logo_t.png">
+      <img src="@/assets/main/p1/icon_logo_t.png" alt="logo">
     </div>
     <ul class="menu-list">
       <li :class="{'active': currentSection === 'home'}"><a href="/">Home</a></li>
diff --git a/src/components/market/FilterItem.vue b/src/components/market/FilterItem.vue
index 2ff8b09..92232e8 100644
--- a/src/components/market/FilterItem.vue
+++ b/src/components/market/FilterItem.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="filter-item">
-    <div class="check-box hide">
+    <div class="check-box" :class="{'hide': !checked}" @click="onClick">
       <img
-        class="check hide"
-        src="data:image/svg+xml,%3csvg width='14' height='10' viewBox='0 0 14 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.3332 1L4.99984 8.33333L1.6665 5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e %3c/svg%3e"
+        class="check"
+        :class="{'hide': !checked}"
+        :src="img"
       />
     </div>
     <span class="label">{{name}}</span>
@@ -17,8 +18,16 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
   components: {
   }
 })
-export default class extends Vue {
+export default class FilterItem extends Vue {
   @Prop() private name!: string;
+  @Prop() private checked?: boolean
+  get img() {
+    return 'data:image/svg+xml,%3csvg width=\'14\' height=\'10\' viewBox=\'0 0 14 10\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'%3e %3cpath d=\'M12.3332 1L4.99984 8.33333L1.6665 5\' stroke=\'white\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/%3e %3c/svg%3e'
+  }
+
+  private onClick() {
+    this.$emit('check-state-change', !this.checked)
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/market/MoileTop.vue b/src/components/market/MoileTop.vue
deleted file mode 100644
index 38744d7..0000000
--- a/src/components/market/MoileTop.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<template>
-  <div>
-    <div class="mobile-header" style="">
-      <a href="/"
-      ><img
-        class="logo"
-        src="@/assets/main/p1/icon_logo_b.png"
-      /></a>
-      <label class="mobile-menu-icon" @click="toggleMenu">
-        <img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
-    </div>
-    <div class="nav overflow" :class="{'show': menuShow}">
-      <a class="navItem" href="/">Home</a>
-      <a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
-      <a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
-      <label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
-<!--      <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">-->
-<!--        <span>Connect Wallet</span>-->
-<!--      </button>-->
-<!--      <label class="navItem contact">Contact us</label>-->
-<!--      <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">-->
-<!--        <div>My Profile</div>-->
-<!--        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">-->
-<!--      </label>-->
-      <label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
-      <div class="navChild" :class="{'show': subShow}">
-        <label class="navItem profile" @click="subShow=!subShow">
-          <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
-          <div class="lbl">My Profile</div>
-        </label>
-        <label class="navItem">Inventory</label>
-        <label class="navItem">Account Setting</label>
-        <label class="navItem">Wallet</label>
-        <label class="navItem contact">Contact us</label>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
-import ChainManager from '@/utils/ChainManager'
-
-@Component({
-  name: 'MobileTop',
-  components: {
-
-  }
-})
-export default class extends Vue {
-  menuShow = false
-  subShow = false
-  chainManager = new ChainManager()
-
-  get walletCollected() {
-    return AppModule.walletConnected
-  }
-
-  async created() {
-    await this.chainManager.init()
-  }
-
-  get logined() {
-    return !!UserModule.token && !!AppModule.step
-  }
-
-  toggleMenu() {
-    this.menuShow = !this.menuShow
-    if (!this.menuShow) {
-      this.subShow = false
-    }
-  }
-
-  async collectToWallet() {
-    this.menuShow = false
-    return this.chainManager.login()
-  }
-
-  async disconnectWallet() {
-    this.menuShow = false
-    return this.chainManager.logout()
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@media (max-width: 767px) {
-  .mobile-header {
-    display: flex;
-    justify-content: space-between;
-    background: rgba(20,16,59,.8);
-    box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
-    backdrop-filter: blur(5em);
-    z-index: 18;
-    height: 4.75em;
-    position: fixed;
-    padding: 0 5%;
-    top: 0;
-    left: 0;
-    right: 0;
-    font-size: 16px;
-    align-items: center;
-  }
-  .logo {
-    max-width: 50vw;
-  }
-  .mobile-menu-icon {
-
-  }
-  .nav {
-    width: 292px;
-    font-size: 16px;
-    max-width: 100%;
-    background: #261858;
-    position: fixed;
-    bottom: 0;
-    top: 0;
-    right: 0;
-
-    transform: translateX(100%);
-    display: flex;
-    z-index: 17;
-    opacity: 0;
-    transition: transform linear 0.2s, opacity linear 0.2s;
-    padding: 1.5em 1.5em;
-    padding-top: 4.75em;
-
-    box-sizing: border-box;
-    flex-direction: column;
-
-    &.overflow {
-      overflow: auto;
-    }
-    &.show{
-      transform: translateX(0%);
-      opacity: 1;
-    }
-
-    .connectButton {
-      width: 100%;
-      border-radius: 0.25em;
-      background: radial-gradient(
-          123.41% 70.85% at 47.63% 49.99%,
-          #558ada 0%,
-          #1b68db 100%
-      ) !important;
-      cursor: pointer;
-      height: 2.75em !important;
-      padding: 0 1.688em;
-      font-size: 1.125em !important;
-      &.mobile {
-        margin-top: 1.5em;
-      }
-    }
-
-    .navItem {
-      font-weight: bold;
-      font-size: 1.125em;
-      line-height: 1.5em;
-      color: #ffffff;
-      padding: 1.5em 0;
-      text-decoration: none;
-
-      &:not(:first-child) {
-        border-top: 1px solid #3d2a84;
-      }
-
-      &.contact {
-        border-top: none;
-        color: #a796e1;
-        font-weight: normal;
-      }
-      &.profile {
-        flex-direction: row;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding-right: 0.75em;
-      }
-      &.dash {
-        border-bottom: 1px solid #3d2a84;
-      }
-    }
-
-    .navChild {
-      transform: translateX(100%);
-      position: absolute;
-      overflow: auto;
-      top: 0;
-      width: 100%;
-      bottom: 0;
-      padding-top: 4.75em;
-
-      display: flex;
-      flex-direction: column;
-      background: #261858;
-      // transition: transform linear 0.15s;
-      &.show {
-        transform: translateX(0%);
-      }
-      .navItem {
-        font-weight: bold;
-        font-size: 1.125em;
-        line-height: 1.5em;
-        color: #ffffff;
-        padding: 1.5em 0;
-
-        &:not(:first-child) {
-          border-top: 1px solid #3d2a84;
-        }
-
-        &.contact {
-          border-top: none;
-          color: #a796e1;
-          font-weight: normal;
-        }
-
-        &.profile {
-          flex-direction: row;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .arrowIcon {
-            transform: rotate(180deg);
-            margin-right: 1.188em;
-          }
-          .lbl {
-            flex: 1;
-          }
-        }
-      }
-    }
-
-    .ipCkProfile {
-      display: none;
-      &:checked {
-        ~ .navChild {
-          transform: translateX(0%);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/market/SearchPanel.vue b/src/components/market/SearchPanel.vue
index b5cb79e..b29b9a9 100644
--- a/src/components/market/SearchPanel.vue
+++ b/src/components/market/SearchPanel.vue
@@ -28,7 +28,7 @@
             </div>
             <div class="content" :class="{'collapsed': !rarityShow}">
               <div class="row">
-                <filter-item name="Common"></filter-item>
+                <filter-item name="Common" :checked="true"></filter-item>
                 <filter-item name="Epic"></filter-item>
                 <filter-item name="Legendary"></filter-item>
               </div>
diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index e7088f9..474a6a7 100644
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@@ -1,19 +1,17 @@
 <template>
   <div>
-    <div class="top-header" style="">
+    <div class="top-header" v-if="!mobile" style="">
       <div class="viewLogo">
         <a href="/">
           <img
             class="logo"
             alt="logo"
-            src="@/assets/main/p1/icon_logo_b.png" />
+            src="@/assets/main/p1/icon_logo_t.png" />
         </a>
       </div>
       <div class="header-menu">
         <a class="menu-item" href="/">
-          <div class="item" >
-            Home
-          </div>
+          <div class="item" >Home</div>
         </a>
         <a class="menu-item" href="" @click.stop="comingSoon">
           <div class="item" :class="{'active': currentTab==='official'}">
@@ -54,13 +52,47 @@
       v-show="infoPanelShow && logined"
       v-on:close-self="onClose"
     ></top-user-info>
+    <div class="mobile-header" v-if="mobile" style="">
+      <a href="/"
+      ><img
+        class="logo"
+        src="@/assets/main/p1/icon_logo_t.png"
+      /></a>
+      <label class="mobile-menu-icon" @click="toggleMenu">
+        <img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
+    </div>
+    <div class="nav overflow" v-if="mobile" :class="{'show': menuShow}">
+      <a class="navItem" href="/">Home</a>
+      <a class="navItem" href="javascript:void(0);" @click.stop="comingSoon">Official Shop</a>
+      <a class="navItem dash" href="javascript:void(0);" @click.stop="comingSoon">Marketplace</a>
+      <label v-if="!logined" class="navItem" @click="collectToWallet">Connect Wallet</label>
+      <!--      <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">-->
+      <!--        <span>Connect Wallet</span>-->
+      <!--      </button>-->
+      <!--      <label class="navItem contact">Contact us</label>-->
+      <!--      <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">-->
+      <!--        <div>My Profile</div>-->
+      <!--        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">-->
+      <!--      </label>-->
+      <label class="navItem" v-if="logined" @click="disconnectWallet">Log Out</label>
+      <div class="navChild" :class="{'show': subShow}">
+        <label class="navItem profile" @click="subShow=!subShow">
+          <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
+          <div class="lbl">My Profile</div>
+        </label>
+        <label class="navItem">Inventory</label>
+        <label class="navItem">Account Setting</label>
+        <label class="navItem">Wallet</label>
+        <label class="navItem contact">Contact us</label>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import TopUserInfo from '@/components/market/TopUserInfo.vue'
-import { AppModule } from '@/store/modules/app'
+import { AppModule, DeviceType } from '@/store/modules/app'
 import ChainManager from '@/utils/ChainManager'
 import { UserModule } from '@/store/modules/user'
 
@@ -77,7 +109,12 @@ declare module 'vue/types/vue' {
 })
 export default class extends Vue {
   infoPanelShow = false
+  menuShow = false
+  subShow = false
   chainManager = new ChainManager()
+  get mobile() {
+    return AppModule.device === DeviceType.Mobile
+  }
 
   async created() {
     await this.chainManager.init()
@@ -95,6 +132,13 @@ export default class extends Vue {
     return this.chainManager.logout()
   }
 
+  toggleMenu() {
+    this.menuShow = !this.menuShow
+    if (!this.menuShow) {
+      this.subShow = false
+    }
+  }
+
   onClose() {
     this.infoPanelShow = false
   }
@@ -235,7 +279,162 @@ export default class extends Vue {
   background-position: 0 17px;
   padding: 0 20px;
 }
-@media (max-width: 767px) {
 
+@media (max-width: 767px) {
+  .mobile-header {
+    display: flex;
+    justify-content: space-between;
+    background: rgba(20,16,59,.8);
+    box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
+    backdrop-filter: blur(5em);
+    z-index: 18;
+    height: 4.75em;
+    position: fixed;
+    padding: 0 5%;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 16px;
+    align-items: center;
+  }
+  .logo {
+    max-width: 15vw;
+  }
+  .mobile-menu-icon {
+
+  }
+  .nav {
+    width: 292px;
+    font-size: 16px;
+    max-width: 100%;
+    background: #261858;
+    position: fixed;
+    bottom: 0;
+    top: 0;
+    right: 0;
+
+    transform: translateX(100%);
+    display: flex;
+    z-index: 17;
+    opacity: 0;
+    transition: transform linear 0.2s, opacity linear 0.2s;
+    padding: 1.5em 1.5em;
+    padding-top: 4.75em;
+
+    box-sizing: border-box;
+    flex-direction: column;
+
+    &.overflow {
+      overflow: auto;
+    }
+    &.show{
+      transform: translateX(0%);
+      opacity: 1;
+    }
+
+    .connectButton {
+      width: 100%;
+      border-radius: 0.25em;
+      background: radial-gradient(
+          123.41% 70.85% at 47.63% 49.99%,
+          #558ada 0%,
+          #1b68db 100%
+      ) !important;
+      cursor: pointer;
+      height: 2.75em !important;
+      padding: 0 1.688em;
+      font-size: 1.125em !important;
+      &.mobile {
+        margin-top: 1.5em;
+      }
+    }
+
+    .navItem {
+      font-weight: bold;
+      font-size: 1.125em;
+      line-height: 1.5em;
+      color: #ffffff;
+      padding: 1.5em 0;
+      text-decoration: none;
+
+      &:not(:first-child) {
+        border-top: 1px solid #3d2a84;
+      }
+
+      &.contact {
+        border-top: none;
+        color: #a796e1;
+        font-weight: normal;
+      }
+      &.profile {
+        flex-direction: row;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-right: 0.75em;
+      }
+      &.dash {
+        border-bottom: 1px solid #3d2a84;
+      }
+    }
+
+    .navChild {
+      transform: translateX(100%);
+      position: absolute;
+      overflow: auto;
+      top: 0;
+      width: 100%;
+      bottom: 0;
+      padding-top: 4.75em;
+
+      display: flex;
+      flex-direction: column;
+      background: #261858;
+      // transition: transform linear 0.15s;
+      &.show {
+        transform: translateX(0%);
+      }
+      .navItem {
+        font-weight: bold;
+        font-size: 1.125em;
+        line-height: 1.5em;
+        color: #ffffff;
+        padding: 1.5em 0;
+
+        &:not(:first-child) {
+          border-top: 1px solid #3d2a84;
+        }
+
+        &.contact {
+          border-top: none;
+          color: #a796e1;
+          font-weight: normal;
+        }
+
+        &.profile {
+          flex-direction: row;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .arrowIcon {
+            transform: rotate(180deg);
+            margin-right: 1.188em;
+          }
+          .lbl {
+            flex: 1;
+          }
+        }
+      }
+    }
+
+    .ipCkProfile {
+      display: none;
+      &:checked {
+        ~ .navChild {
+          transform: translateX(0%);
+        }
+      }
+    }
+  }
 }
 </style>
diff --git a/src/views/desktop/Item.vue b/src/views/desktop/Item.vue
index 3fd981b..0b1549f 100644
--- a/src/views/desktop/Item.vue
+++ b/src/views/desktop/Item.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-    <mobile-top class="mobile-top"></mobile-top>
     <top-menu class="desk-top"></top-menu>
     <div class="root">
       <nft-detail :data="nftData"></nft-detail>
@@ -12,7 +11,6 @@
 import { Component, Vue, Watch } from 'vue-property-decorator'
 import ItemDetail from '@/components/market/ItemDetail.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
-import MobileTop from '@/components/market/MoileTop.vue'
 import NftDetail from '@/components/market/NftDetail.vue'
 import { INftAttr, ISpineData } from '@/utils/SpineRender'
 import { defaultINftAttr, getNftDetail } from '@/api/Mall'
@@ -21,7 +19,6 @@ import { AppModule } from '@/store/modules/app'
 @Component({
   components: {
     NftDetail,
-    MobileTop,
     ItemDetail,
     TopMenu
   }
@@ -108,9 +105,7 @@ export default class Item extends Vue {
   .mobile-top {
     display: block;
   }
-  .desk-top {
-    display: none;
-  }
+
 }
 @include media('>=desktop', '<wide'){
   .root {
@@ -153,9 +148,6 @@ export default class Item extends Vue {
   .mobile-top {
     display: block;
   }
-  .desk-top {
-    display: none;
-  }
 
   .show{
     display: flex!important;
diff --git a/src/views/desktop/Market.vue b/src/views/desktop/Market.vue
index 9baf908..664f8a1 100644
--- a/src/views/desktop/Market.vue
+++ b/src/views/desktop/Market.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-  <mobile-top class="mobile-top"></mobile-top>
   <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
   <section class="root">
     <div class="container">
@@ -16,11 +15,9 @@ import { Component, Vue } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
-import MobileTop from '@/components/market/MoileTop.vue'
 
 @Component({
   components: {
-    MobileTop,
     SearchResult,
     SearchPanel,
     TopMenu
@@ -125,12 +122,6 @@ export default class Market extends Vue {
   .searchResult {
     padding: 26px 20px;
   }
-  .mobile-top {
-    display: block;
-  }
-  .desk-top {
-    display: none;
-  }
 
   .show{
     display: flex!important;
diff --git a/src/views/desktop/MyNft.vue b/src/views/desktop/MyNft.vue
index 567369f..f324516 100644
--- a/src/views/desktop/MyNft.vue
+++ b/src/views/desktop/MyNft.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-  <mobile-top class="mobile-top"></mobile-top>
   <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
   <section class="root">
     <div class="container">
@@ -15,7 +14,6 @@ import { Component, Vue, Watch } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
-import MobileTop from '@/components/market/MoileTop.vue'
 import NftList from '@/components/market/NftList.vue'
 import { INftAttr, ISpineData } from '@/utils/SpineRender'
 import { getNftList } from '@/api/Mall'
@@ -24,7 +22,6 @@ import { AppModule } from '@/store/modules/app'
 @Component({
   components: {
     NftList,
-    MobileTop,
     SearchResult,
     SearchPanel,
     TopMenu
@@ -187,12 +184,6 @@ export default class MyNft extends Vue {
   .searchResult {
     padding: 26px 20px;
   }
-  .mobile-top {
-    display: block;
-  }
-  .desk-top {
-    display: none;
-  }
 
   .show{
     display: flex!important;
diff --git a/src/views/desktop/Official.vue b/src/views/desktop/Official.vue
index 0ec3e2b..c607f31 100644
--- a/src/views/desktop/Official.vue
+++ b/src/views/desktop/Official.vue
@@ -1,6 +1,5 @@
 <template>
   <div>
-  <mobile-top class="mobile-top"></mobile-top>
   <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
   <section class="root">
     <div class="container">
@@ -15,13 +14,11 @@ import { Component, Vue } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
-import MobileTop from '@/components/market/MoileTop.vue'
 import NftList from '@/components/market/NftList.vue'
 
 @Component({
   components: {
     NftList,
-    MobileTop,
     SearchResult,
     SearchPanel,
     TopMenu
@@ -129,10 +126,6 @@ export default class Official extends Vue {
   .mobile-top {
     display: block;
   }
-  .desk-top {
-    display: none;
-  }
-
   .show{
     display: flex!important;
   }