From f63ac1c666ab17d0c57d3d542309cb0e72cef9d3 Mon Sep 17 00:00:00 2001
From: zhl <zhl010101@gmail.com>
Date: Fri, 21 Jan 2022 19:35:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=AE=98=E6=96=B9=E5=95=86?=
 =?UTF-8?q?=E5=9F=8E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/CardList.vue     |  16 ++-
 src/components/market/MoileTop.vue     |   9 +-
 src/components/market/NftItem.vue      | 121 +++++++++++++++++++++
 src/components/market/NftList.vue      |  98 +++++++++++++++++
 src/components/market/SearchResult.vue |  12 ++-
 src/components/market/TopMenu.vue      |  20 ++--
 src/components/market/TopUserInfo.vue  |  70 ++++++++-----
 src/router/index.ts                    |   6 ++
 src/views/Market.vue                   |   2 +-
 src/views/Official.vue                 | 140 +++++++++++++++++++++++++
 10 files changed, 447 insertions(+), 47 deletions(-)
 create mode 100644 src/components/market/NftItem.vue
 create mode 100644 src/components/market/NftList.vue
 create mode 100644 src/views/Official.vue

diff --git a/src/components/market/CardList.vue b/src/components/market/CardList.vue
index 2fd2bca..43db30d 100644
--- a/src/components/market/CardList.vue
+++ b/src/components/market/CardList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="card-list">
     <div class="grid">
-      <card v-for="c in cardList" :key="c"></card>
+      <nft-item v-for="c in cardList" :key="c.id" :data="c" class="item"></nft-item>
     </div>
     <pagination></pagination>
   </div>
@@ -9,17 +9,24 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import Pagination from '@/components/market/Pagination.vue'
-import Card from '@/components/market/Card.vue'
+import NftItem from '@/components/market/NftItem.vue'
+import { ISpineData } from '@/utils/SpineRender'
 
 @Component({
   name: 'CardList',
   components: {
-    Card,
+    NftItem,
     Pagination
   }
 })
 export default class extends Vue {
-  private cardList: number[] = [1, 2, 3, 4, 5, 6, 7, 8]
+  private cardList: ISpineData[] = []
+
+  created() {
+    for (let i = 0; i < 10; i++) {
+      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: '10', class: 0, repeat: false })
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -47,6 +54,7 @@ export default class extends Vue {
 .card-list .grid .item {
   height: 21em;
   width: 14.375em;
+  position: relative;
 }
 
 .spinner {
diff --git a/src/components/market/MoileTop.vue b/src/components/market/MoileTop.vue
index 64b92a1..4585a92 100644
--- a/src/components/market/MoileTop.vue
+++ b/src/components/market/MoileTop.vue
@@ -10,8 +10,8 @@
         <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}">
-      <label class="navItem">Official Store</label>
-      <label class="navItem dash">Marketplace</label>
+      <a class="navItem" href="/official">Official Shop</a>
+      <a class="navItem dash" href="/market">Marketplace</a>
       <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">
         <span>Connect Wallet</span>
       </button>
@@ -80,7 +80,7 @@ export default class extends Vue {
     background: rgba(20,16,59,.8);
     box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
     backdrop-filter: blur(5em);
-    z-index: 8;
+    z-index: 18;
     height: 4.75em;
     position: fixed;
     padding: 0 5%;
@@ -108,7 +108,7 @@ export default class extends Vue {
 
     transform: translateX(100%);
     display: flex;
-    z-index: 7;
+    z-index: 17;
     opacity: 0;
     transition: transform linear 0.2s, opacity linear 0.2s;
     padding: 1.5em 1.5em;
@@ -148,6 +148,7 @@ export default class extends Vue {
       line-height: 1.5em;
       color: #ffffff;
       padding: 1.5em 0;
+      text-decoration: none;
 
       &:not(:first-child) {
         border-top: 1px solid #3d2a84;
diff --git a/src/components/market/NftItem.vue b/src/components/market/NftItem.vue
new file mode 100644
index 0000000..9de161f
--- /dev/null
+++ b/src/components/market/NftItem.vue
@@ -0,0 +1,121 @@
+<template>
+  <router-link class="card" to="/item">
+    <img class="bg-img" src="@/assets/main/card/card_border.png">
+    <div class="anim-border">
+      <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)" />
+      <img class="name-img" :src="require('@/assets/main/card/'+data.name+'.png')">
+      <div class="info-div">
+        <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>
+  </router-link>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { ISpineData } from '@/utils/SpineRender'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    data: ISpineData
+  }
+}
+
+@Component({
+  name: 'NftItem',
+  components: {
+  },
+  props: ['data']
+})
+export default class extends Vue {
+
+}
+</script>
+
+<style lang="scss" scoped>
+// rect: 297x389
+$width: 14em;
+$height: 18.33em;
+.bg-img {
+  width: $width;
+  height: $height;
+}
+.anim-border {
+  width: $width;
+  height: $height;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+.card-main-img {
+  position: absolute;
+  bottom: 0;
+  max-height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+
+.info-div {
+  background-image: url('~@/assets/main/card/name_bg.png');
+  width: 100%;
+  height: $height * 0.29;
+  position: absolute;
+  bottom: $height * 0.025;
+  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: 8px;
+  right: 8px;
+  width: $width*42/297;
+  height: $height*42/389;
+}
+.class-div img {
+  width: 100%;
+}
+.name-img {
+  height: $height * 39 / 389;
+  width: auto;
+  position: absolute;
+  right: $width * 9 / 297;
+  bottom: $height * 100 / 389;
+}
+.price-label {
+  color: black;
+  height: $height * 29 / 389;
+  font-weight: bold;
+  width: $width * 145 / 297;
+  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: $width * 40 / 297;
+  margin-bottom: $width * 10 / 297;
+}
+.price-label span {
+  font-size: $width * 20 / 297;
+}
+.buy-icon {
+  width: $width * 44 / 297;
+  height: $height * 52 / 389;
+  margin-left: $width * 40 / 297;
+  margin-bottom: $height * 12 / 389;
+}
+
+</style>
diff --git a/src/components/market/NftList.vue b/src/components/market/NftList.vue
new file mode 100644
index 0000000..79bda28
--- /dev/null
+++ b/src/components/market/NftList.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="card-list">
+    <div class="grid">
+      <nft-item v-for="c in cardList" :key="c.id" :data="c"></nft-item>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Pagination from '@/components/market/Pagination.vue'
+import Card from '@/components/market/Card.vue'
+import NftItem from '@/components/market/NftItem.vue'
+import { ISpineData } from '@/utils/SpineRender'
+
+@Component({
+  name: 'NftList',
+  components: {
+    NftItem,
+    Card,
+    Pagination
+  }
+})
+export default class extends Vue {
+  private cardList: ISpineData[] = []
+
+  created() {
+    for (let i = 0; i < 10; i++) {
+      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: '10', class: 0, repeat: false })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.card-list {
+  margin-top: 2.0265em;
+  width: 100%;
+}
+
+.card-list .grid {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  display: -ms-grid;
+  display: grid;
+  -ms-grid-columns: (1fr)[4];
+  grid-template-columns: repeat(4, 1fr);
+  -webkit-column-gap: 1.875em;
+  column-gap: 1.875em;
+  row-gap: 1.3125em;
+}
+
+.card-list .grid .card {
+  height: 18em;
+  width: 14em;
+  position: relative;
+}
+
+.spinner {
+  height: 100vh;
+  -webkit-box-flex: 0;
+  -ms-flex: none;
+  flex: none;
+}
+
+.empty {
+  padding-top: 7.375em;
+}
+
+.empty img {
+  width: 14.625em;
+  height: auto;
+}
+
+@media (max-width: 1023px) {
+  .card-list .grid {
+    -ms-grid-columns: (1fr)[2];
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 767px) {
+  .card-list{
+    margin-top: 76px;
+    padding: 26px 20px;
+  };
+  .card-list .grid {
+    -ms-grid-columns: (1fr)[2];
+    grid-template-columns: repeat(2, 1fr);
+    -webkit-column-gap: 1.79em;
+    column-gap: 1.79em;
+    row-gap: 1.8em;
+  }
+}
+</style>
diff --git a/src/components/market/SearchResult.vue b/src/components/market/SearchResult.vue
index ed7febf..081ff0b 100644
--- a/src/components/market/SearchResult.vue
+++ b/src/components/market/SearchResult.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="searchResult">
     <div class="wrapper">
-      <sort-select></sort-select>
-      <button class="general-btn btnFilter" @click="showFilter">
+      <sort-select v-if="showSort"></sort-select>
+      <button class="general-btn btnFilter" v-if="showSort" @click="showFilter">
         <span>FILTERS</span>
       </button>
     </div>
@@ -16,13 +16,19 @@ import SortSelect from '@/components/market/SortSelect.vue'
 import CardList from '@/components/market/CardList.vue'
 import ResultNo from '@/components/market/ResultNo.vue'
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    showSort?: boolean
+  }
+}
 @Component({
   name: 'SearchResult',
   components: {
     ResultNo,
     CardList,
     SortSelect
-  }
+  },
+  props: ['showSort']
 })
 export default class extends Vue {
   showFilter() {
diff --git a/src/components/market/TopMenu.vue b/src/components/market/TopMenu.vue
index ff57fa5..8e31bb4 100644
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@@ -10,14 +10,14 @@
         </a>
       </div>
       <div class="header-menu">
-        <a class="menu-item" href="/">
-          <div class="item" :class="{'active': currentTab==='presell'}">
-            Official Store
+        <a class="menu-item" href="/official">
+          <div class="item" :class="{'active': currentTab==='official'}">
+            Official Shop
             <div class="active-bottom" v-if="currentTab==='presell'"></div>
           </div
           >
         </a>
-        <a class="menu-item" href="/">
+        <a class="menu-item" href="/market">
           <div class="item " :class="{'active': currentTab==='market'}">
             Marketplace
             <div class="active-bottom" v-if="currentTab==='market'"></div>
@@ -37,13 +37,17 @@
           draggable="false"
           v-if="walletCollected"
           class="avatar"
+          ref="avatar"
           src="https://assets.thetanarena.com/cosmetic/avatar/3.png"
           alt="avatar"
           @click="infoPanelShow=!infoPanelShow"
         >
       </div>
     </div>
-    <top-user-info v-if="infoPanelShow && walletCollected"></top-user-info>
+    <top-user-info
+      v-show="infoPanelShow && walletCollected"
+      v-on:close-self="onClose"
+    ></top-user-info>
   </div>
 </template>
 
@@ -79,6 +83,10 @@ export default class extends Vue {
   async disconnectWallet() {
     return this.bc.disconnect()
   }
+
+  onClose() {
+    this.infoPanelShow = false
+  }
 }
 </script>
 
@@ -103,7 +111,7 @@ export default class extends Vue {
   height: 100%;
   position: relative;
   z-index: 1;
-  width: 60vw;
+  flex: auto;
 }
 
 .top-header .header-menu .menu-item {
diff --git a/src/components/market/TopUserInfo.vue b/src/components/market/TopUserInfo.vue
index 1d20f4c..739b2fd 100644
--- a/src/components/market/TopUserInfo.vue
+++ b/src/components/market/TopUserInfo.vue
@@ -1,33 +1,35 @@
 <template>
-  <div class="position dropdown anim">
-    <span class="name">SEgGQ58HRlLd</span>
-    <div class="divCode">
-      <span class="address">{{showAccount}}</span>
-      <img
-        class="icCopy" width="24" height="24"
-        v-clipboard:copy="account"
-        v-clipboard:success="onCopy"
-        v-clipboard:error="onCopyError"
-        src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
-    </div>
-    <span class="label">Balance</span>
-    <span class="coin">0 WBNB</span>
-    <span class="money">0 USD</span>
-    <div class="menu">
-      <div class="item">
-        <img class="icon" src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M8.39289 16.2647L10.5253 21.7961H0.770458L2.84474 16.2647H8.39289Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M13.474 21.7961L15.6063 16.2647H21.0965L23.2289 21.7961H13.474ZM21.0849 16.2345L21.085 16.2349L21.0849 16.2345Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M7.14497 13.3584L9.21925 7.827H14.6036L16.8507 13.3584H7.14497Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M12.7031 3.56334V2.15706C12.7031 1.76841 12.3887 1.45392 12 1.45392C11.6114 1.45392 11.2969 1.76841 11.2969 2.15706V3.56334C11.2969 3.95199 11.6114 4.26648 12 4.26648C12.3887 4.26648 12.7031 3.95199 12.7031 3.56334Z' fill='white' /%3e %3cpath d='M14.9584 4.85562C15.3156 5.00351 15.7293 4.83508 15.8772 4.47451L16.4141 3.17534C16.5624 2.81622 16.3921 2.40559 16.0337 2.25727C15.6739 2.10825 15.2619 2.27926 15.115 2.63837L14.578 3.93755C14.4296 4.29671 14.5999 4.7073 14.9584 4.85562Z' fill='white' /%3e %3cpath d='M9.03678 4.85562C9.39519 4.7073 9.56549 4.29531 9.41718 3.93685L8.87885 2.63772C8.73054 2.27997 8.32267 2.10901 7.96008 2.25732C7.60166 2.40564 7.43136 2.81763 7.57968 3.1761L8.11801 4.47527C8.2689 4.83762 8.68169 5.00267 9.03678 4.85562Z' fill='white' /%3e %3cpath d='M20.4376 4.26443C20.0489 4.26443 19.7344 4.57893 19.7344 4.96758V5.67072H19.0313C18.6426 5.67072 18.3281 5.98521 18.3281 6.37386C18.3281 6.76251 18.6426 7.077 19.0313 7.077H19.7344V7.78015C19.7344 8.1688 20.0489 8.48329 20.4376 8.48329C20.8262 8.48329 21.1407 8.1688 21.1407 7.78015V7.077H21.8438C22.2325 7.077 22.547 6.76251 22.547 6.37386C22.547 5.98521 22.2325 5.67072 21.8438 5.67072H21.1407V4.96758C21.1407 4.57893 20.8262 4.26443 20.4376 4.26443Z' fill='white' /%3e %3cpath d='M3.56133 7.077C3.17268 7.077 2.85819 7.39149 2.85819 7.78014V8.48328H2.15505C1.7664 8.48328 1.4519 8.79777 1.4519 9.18642C1.4519 9.57507 1.7664 9.88956 2.15505 9.88956H2.85819V10.5927C2.85819 10.9813 3.17268 11.2958 3.56133 11.2958C3.94998 11.2958 4.26447 10.9813 4.26447 10.5927V9.88956H4.96761C5.35626 9.88956 5.67075 9.57507 5.67075 9.18642C5.67075 8.79777 5.35626 8.48328 4.96761 8.48328H4.26447V7.78014C4.26447 7.39149 3.94998 7.077 3.56133 7.077Z' fill='white' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='24' height='24' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
-        <span class="itemName">Inventory</span>
+  <div class="info-bg" @click="close">
+    <div class="position dropdown anim" @click.stop="">
+      <span class="name">SEgGQ58HRlLd</span>
+      <div class="divCode">
+        <span class="address">{{showAccount}}</span>
+        <img
+          class="icCopy" width="24" height="24"
+          v-clipboard:copy="account"
+          v-clipboard:success="onCopy"
+          v-clipboard:error="onCopyError"
+          src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5' stroke='%23BCADF2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
       </div>
-      <div class="item">
-        <img class="icon" src="data:image/svg+xml,%3csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.8067 6.62358L18.1842 5.54349C17.6577 4.62957 16.4907 4.31429 15.5755 4.83869V4.83869C15.1399 5.09531 14.6201 5.16812 14.1307 5.04106C13.6413 4.91399 13.2226 4.59749 12.9668 4.16134C12.8023 3.88412 12.7139 3.56836 12.7105 3.24601V3.24601C12.7254 2.72919 12.5304 2.22837 12.17 1.85764C11.8096 1.48691 11.3145 1.27783 10.7975 1.27805H9.5435C9.03697 1.27804 8.55131 1.47988 8.194 1.83891C7.83669 2.19795 7.63717 2.68456 7.63961 3.19109V3.19109C7.6246 4.23689 6.77248 5.07678 5.72657 5.07667C5.40421 5.07332 5.08846 4.98491 4.81123 4.82038V4.82038C3.89606 4.29598 2.72911 4.61126 2.20254 5.52519L1.53435 6.62358C1.00841 7.53636 1.3194 8.70258 2.23 9.23228V9.23228C2.8219 9.57401 3.18653 10.2056 3.18653 10.889C3.18653 11.5725 2.8219 12.204 2.23 12.5458V12.5458C1.32056 13.0719 1.00923 14.2353 1.53435 15.1453V15.1453L2.16593 16.2346C2.41265 16.6798 2.8266 17.0083 3.31619 17.1474C3.80578 17.2866 4.33064 17.2249 4.77462 16.976V16.976C5.21108 16.7213 5.73119 16.6515 6.21934 16.7822C6.70749 16.9128 7.12324 17.233 7.37416 17.6716C7.5387 17.9489 7.62711 18.2646 7.63046 18.587V18.587C7.63046 19.6435 8.48696 20.5 9.5435 20.5H10.7975C11.8505 20.5 12.7055 19.6491 12.7105 18.5961V18.5961C12.7081 18.088 12.9089 17.6 13.2682 17.2407C13.6275 16.8814 14.1155 16.6806 14.6236 16.6831C14.9452 16.6917 15.2596 16.7797 15.5389 16.9394V16.9394C16.4517 17.4653 17.6179 17.1543 18.1476 16.2437V16.2437L18.8067 15.1453C19.0618 14.7075 19.1318 14.186 19.0012 13.6963C18.8706 13.2067 18.5502 12.7893 18.111 12.5366V12.5366C17.6718 12.2839 17.3514 11.8665 17.2208 11.3769C17.0902 10.8873 17.1603 10.3658 17.4154 9.92793C17.5812 9.63831 17.8214 9.39817 18.111 9.23228V9.23228C19.0161 8.70286 19.3264 7.54346 18.8067 6.63274V6.63274V6.62358Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3ccircle cx='10.175' cy='10.889' r='2.63616' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
-        <span class="itemName">Account Setting</span>
-      </div>
-      <div class="item">
-        <img class="icon" src="data:image/svg+xml,%3csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.6389 12.3958H16.5906C15.1042 12.3949 13.8993 11.1909 13.8984 9.70449C13.8984 8.21804 15.1042 7.01413 16.5906 7.01321H20.6389' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M17.0485 9.64288H16.7369' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.74766 1H15.3911C18.2892 1 20.6388 3.34951 20.6388 6.24766V13.4247C20.6388 16.3229 18.2892 18.6724 15.3911 18.6724H6.74766C3.84951 18.6724 1.5 16.3229 1.5 13.4247V6.24766C1.5 3.34951 3.84951 1 6.74766 1Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M6.03564 5.53816H11.4346' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
-        <span class="itemName">Wallet</span>
-      </div>
-      <div class="item">
-        <span class="itemName" @click="disconnectWallet">Logout</span>
+      <span class="label">Balance</span>
+      <span class="coin">0 WBNB</span>
+      <span class="money">0 USD</span>
+      <div class="menu">
+        <div class="item">
+          <img class="icon" src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0)'%3e %3cpath d='M8.39289 16.2647L10.5253 21.7961H0.770458L2.84474 16.2647H8.39289Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M13.474 21.7961L15.6063 16.2647H21.0965L23.2289 21.7961H13.474ZM21.0849 16.2345L21.085 16.2349L21.0849 16.2345Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M7.14497 13.3584L9.21925 7.827H14.6036L16.8507 13.3584H7.14497Z' stroke='white' stroke-width='1.5' /%3e %3cpath d='M12.7031 3.56334V2.15706C12.7031 1.76841 12.3887 1.45392 12 1.45392C11.6114 1.45392 11.2969 1.76841 11.2969 2.15706V3.56334C11.2969 3.95199 11.6114 4.26648 12 4.26648C12.3887 4.26648 12.7031 3.95199 12.7031 3.56334Z' fill='white' /%3e %3cpath d='M14.9584 4.85562C15.3156 5.00351 15.7293 4.83508 15.8772 4.47451L16.4141 3.17534C16.5624 2.81622 16.3921 2.40559 16.0337 2.25727C15.6739 2.10825 15.2619 2.27926 15.115 2.63837L14.578 3.93755C14.4296 4.29671 14.5999 4.7073 14.9584 4.85562Z' fill='white' /%3e %3cpath d='M9.03678 4.85562C9.39519 4.7073 9.56549 4.29531 9.41718 3.93685L8.87885 2.63772C8.73054 2.27997 8.32267 2.10901 7.96008 2.25732C7.60166 2.40564 7.43136 2.81763 7.57968 3.1761L8.11801 4.47527C8.2689 4.83762 8.68169 5.00267 9.03678 4.85562Z' fill='white' /%3e %3cpath d='M20.4376 4.26443C20.0489 4.26443 19.7344 4.57893 19.7344 4.96758V5.67072H19.0313C18.6426 5.67072 18.3281 5.98521 18.3281 6.37386C18.3281 6.76251 18.6426 7.077 19.0313 7.077H19.7344V7.78015C19.7344 8.1688 20.0489 8.48329 20.4376 8.48329C20.8262 8.48329 21.1407 8.1688 21.1407 7.78015V7.077H21.8438C22.2325 7.077 22.547 6.76251 22.547 6.37386C22.547 5.98521 22.2325 5.67072 21.8438 5.67072H21.1407V4.96758C21.1407 4.57893 20.8262 4.26443 20.4376 4.26443Z' fill='white' /%3e %3cpath d='M3.56133 7.077C3.17268 7.077 2.85819 7.39149 2.85819 7.78014V8.48328H2.15505C1.7664 8.48328 1.4519 8.79777 1.4519 9.18642C1.4519 9.57507 1.7664 9.88956 2.15505 9.88956H2.85819V10.5927C2.85819 10.9813 3.17268 11.2958 3.56133 11.2958C3.94998 11.2958 4.26447 10.9813 4.26447 10.5927V9.88956H4.96761C5.35626 9.88956 5.67075 9.57507 5.67075 9.18642C5.67075 8.79777 5.35626 8.48328 4.96761 8.48328H4.26447V7.78014C4.26447 7.39149 3.94998 7.077 3.56133 7.077Z' fill='white' /%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0'%3e %3crect width='24' height='24' fill='white' /%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e">
+          <span class="itemName">Inventory</span>
+        </div>
+        <div class="item">
+          <img class="icon" src="data:image/svg+xml,%3csvg width='20' height='22' viewBox='0 0 20 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.8067 6.62358L18.1842 5.54349C17.6577 4.62957 16.4907 4.31429 15.5755 4.83869V4.83869C15.1399 5.09531 14.6201 5.16812 14.1307 5.04106C13.6413 4.91399 13.2226 4.59749 12.9668 4.16134C12.8023 3.88412 12.7139 3.56836 12.7105 3.24601V3.24601C12.7254 2.72919 12.5304 2.22837 12.17 1.85764C11.8096 1.48691 11.3145 1.27783 10.7975 1.27805H9.5435C9.03697 1.27804 8.55131 1.47988 8.194 1.83891C7.83669 2.19795 7.63717 2.68456 7.63961 3.19109V3.19109C7.6246 4.23689 6.77248 5.07678 5.72657 5.07667C5.40421 5.07332 5.08846 4.98491 4.81123 4.82038V4.82038C3.89606 4.29598 2.72911 4.61126 2.20254 5.52519L1.53435 6.62358C1.00841 7.53636 1.3194 8.70258 2.23 9.23228V9.23228C2.8219 9.57401 3.18653 10.2056 3.18653 10.889C3.18653 11.5725 2.8219 12.204 2.23 12.5458V12.5458C1.32056 13.0719 1.00923 14.2353 1.53435 15.1453V15.1453L2.16593 16.2346C2.41265 16.6798 2.8266 17.0083 3.31619 17.1474C3.80578 17.2866 4.33064 17.2249 4.77462 16.976V16.976C5.21108 16.7213 5.73119 16.6515 6.21934 16.7822C6.70749 16.9128 7.12324 17.233 7.37416 17.6716C7.5387 17.9489 7.62711 18.2646 7.63046 18.587V18.587C7.63046 19.6435 8.48696 20.5 9.5435 20.5H10.7975C11.8505 20.5 12.7055 19.6491 12.7105 18.5961V18.5961C12.7081 18.088 12.9089 17.6 13.2682 17.2407C13.6275 16.8814 14.1155 16.6806 14.6236 16.6831C14.9452 16.6917 15.2596 16.7797 15.5389 16.9394V16.9394C16.4517 17.4653 17.6179 17.1543 18.1476 16.2437V16.2437L18.8067 15.1453C19.0618 14.7075 19.1318 14.186 19.0012 13.6963C18.8706 13.2067 18.5502 12.7893 18.111 12.5366V12.5366C17.6718 12.2839 17.3514 11.8665 17.2208 11.3769C17.0902 10.8873 17.1603 10.3658 17.4154 9.92793C17.5812 9.63831 17.8214 9.39817 18.111 9.23228V9.23228C19.0161 8.70286 19.3264 7.54346 18.8067 6.63274V6.63274V6.62358Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3ccircle cx='10.175' cy='10.889' r='2.63616' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
+          <span class="itemName">Account Setting</span>
+        </div>
+        <div class="item">
+          <img class="icon" src="data:image/svg+xml,%3csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.6389 12.3958H16.5906C15.1042 12.3949 13.8993 11.1909 13.8984 9.70449C13.8984 8.21804 15.1042 7.01413 16.5906 7.01321H20.6389' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M17.0485 9.64288H16.7369' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.74766 1H15.3911C18.2892 1 20.6388 3.34951 20.6388 6.24766V13.4247C20.6388 16.3229 18.2892 18.6724 15.3911 18.6724H6.74766C3.84951 18.6724 1.5 16.3229 1.5 13.4247V6.24766C1.5 3.34951 3.84951 1 6.74766 1Z' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3cpath d='M6.03564 5.53816H11.4346' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
+          <span class="itemName">Wallet</span>
+        </div>
+        <div class="item">
+          <span class="itemName" @click="disconnectWallet">Logout</span>
+        </div>
       </div>
     </div>
   </div>
@@ -46,6 +48,10 @@ import { Message } from 'element-ui'
 })
 export default class extends Vue {
   bc = new BlockChain();
+  close(e: any) {
+    console.log(e)
+    this.$emit('close-self')
+  }
 
   get walletCollected() {
     return AppModule.walletConnected
@@ -235,7 +241,13 @@ export default class extends Vue {
   animation-name: overlay-anim;
   opacity: 0;
 }
-
+.info-bg {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
 @media (max-width: 767px) {
 
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index 8012cd4..450853e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import Main from '../views/Main.vue'
 import Market from '../views/Market.vue'
+import Official from '@/views/Official.vue'
 import Item from '../views/Item.vue'
 
 Vue.use(VueRouter)
@@ -22,6 +23,11 @@ const routes: Array<RouteConfig> = [
     name: 'Market',
     component: Market
   },
+  {
+    path: '/official',
+    name: 'Official',
+    component: Official
+  },
   {
     path: '/item',
     name: 'Item',
diff --git a/src/views/Market.vue b/src/views/Market.vue
index 11e1059..d6ee9de 100644
--- a/src/views/Market.vue
+++ b/src/views/Market.vue
@@ -5,7 +5,7 @@
   <section class="root">
     <div class="container">
       <search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
-      <search-result @filter-show="showFilter"></search-result>
+      <search-result @filter-show="showFilter" :show-sort="true"></search-result>
     </div>
   </section>
   </div>
diff --git a/src/views/Official.vue b/src/views/Official.vue
new file mode 100644
index 0000000..cf69c9f
--- /dev/null
+++ b/src/views/Official.vue
@@ -0,0 +1,140 @@
+<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">
+      <nft-list></nft-list>
+    </div>
+  </section>
+  </div>
+</template>
+
+<script lang="ts">
+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
+  }
+})
+export default class Official extends Vue {
+  mobileFilterShow = false
+  currentTab = 'official'
+  showFilter(val: boolean) {
+    this.mobileFilterShow = val
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import '../scss/breakpoints.scss';
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  width: 1440px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.mobile-top {
+  display: none;
+}
+
+@include media('<desktop') {
+  .container {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+  .searchPanel {
+    width: 100%;
+  }
+  .filterTablet {
+    padding-top: 40px;
+    width: 100%;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    height: auto;
+  }
+  .filterTablet.collapsed {
+    padding-top: 0;
+    opacity: 0;
+    height: 0;
+    z-index: -1;
+    overflow: hidden;
+  }
+  .searchResult {
+    padding: 2.5em 4em;
+  }
+  .searchResult .wrapper .btnFilter {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    text-transform: uppercase;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1439px) {
+  .root {
+    font-size: 11px;
+  }
+  .root .container {
+    width: 1024px;
+    max-width: 100%;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .root {
+    font-size: 20px;
+  }
+  .container {
+    width: 768px;
+  }
+}
+
+@media (max-width: 767px) {
+  .root {
+    font-size: 11px;
+  }
+}
+
+@media (max-width: 767px) and (max-width: 320px) {
+  .root {
+    font-size: 9px;
+  }
+}
+
+@media (max-width: 767px) {
+  .container {
+    width: 375px;
+  }
+  .searchResult {
+    padding: 26px 20px;
+  }
+  .mobile-top {
+    display: block;
+  }
+  .desk-top {
+    display: none;
+  }
+
+  .show{
+    display: flex!important;
+  }
+}
+</style>