修改顶部菜单

src/components/market/MoileTop.vue

@@ -4,13 +4,13 @@
       <a href="/"
       ><img
         class="logo"
-        src="@/assets/main/p1/icon_logo_b.png"
+        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" :class="{'show': menuShow}">
-      <label class="navItem">Thetan Boxes</label>
+      <label class="navItem">Official Store</label>
       <label class="navItem dash">Marketplace</label>
       <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">
         <span>Connect Wallet</span>
@@ -91,7 +91,7 @@ export default class extends Vue {
     align-items: center;
   }
   .logo {
-    width: 40vw;
+    height: 58px;
   }
   .mobile-menu-icon {
 

src/components/market/TopMenu.vue

@@ -1,26 +1,31 @@
 <template>
   <div>
     <div class="top-header" style="">
-      <div class="header-menu">
-        <a class="menu-item" href="/">
-          <div class="item">Home</div>
-        </a>
-        <a class="menu-item" href="/">
-          <div class="item active">
-            Marketplace
-            <div class="active-bottom"></div>
-          </div
-          >
-        </a>
-      </div>
       <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" :class="{'active': currentTab==='presell'}">
+            Official Store
+            <div class="active-bottom" v-if="currentTab==='presell'"></div>
+          </div
+          >
+        </a>
+        <a class="menu-item" href="/">
+          <div class="item " :class="{'active': currentTab==='market'}">
+            Marketplace
+            <div class="active-bottom" v-if="currentTab==='market'"></div>
+          </div
+          >
+        </a>
+      </div>
+
       <div class="rightContainer">
         <div class="contact">
           <span class="span">Contact Us</span>
@@ -48,9 +53,16 @@ import TopUserInfo from '@/components/market/TopUserInfo.vue'
 import { BlockChain } from '@/utils/blockchain'
 import { AppModule } from '@/store/modules/app'
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    currentTab?: string
+  }
+}
+
 @Component({
   name: 'Navbar',
-  components: { TopUserInfo }
+  components: { TopUserInfo },
+  props: ['currentTab']
 })
 export default class extends Vue {
   infoPanelShow = false
@@ -91,6 +103,7 @@ export default class extends Vue {
   height: 100%;
   position: relative;
   z-index: 1;
+  width: 60vw;
 }
 
 .top-header .header-menu .menu-item {
@@ -108,7 +121,6 @@ export default class extends Vue {
   align-items: center;
   justify-content: center;
   display: flex;
-  background: #14103b;
   width: 13.438em;
   box-sizing: border-box;
 }
@@ -131,12 +143,9 @@ export default class extends Vue {
 }
 
 .top-header .viewLogo {
-  position: absolute;
-  align-self: center;
-  left: 0;
-  right: 0;
   display: flex;
   justify-content: center;
+  width: 20vw;
 }
 
 .logo {

src/views/Market.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
   <mobile-top class="mobile-top"></mobile-top>
-  <top-menu class="desk-top"></top-menu>
+  <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
   <section class="root">
     <div class="container">
       <search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
@@ -28,6 +28,7 @@ import MobileTop from '@/components/market/MoileTop.vue'
 })
 export default class Market extends Vue {
   mobileFilterShow = false
+  currentTab = 'market'
   showFilter(val: boolean) {
     this.mobileFilterShow = val
   }