添加一些手机页面专用组件

2022-01-20 13:48:06 +08:00 · 2022-01-20 13:48:06 +08:00 · 0362a15d4a
commit 0362a15d4a
parent 8819cac637
8 changed files with 665 additions and 48 deletions
--- a/src/components/market/ItemDetail.vue
+++ b/src/components/market/ItemDetail.vue
@ -174,9 +174,6 @@ export default class extends Vue {
    align-self: flex-end;
  }

-  .backButton {
-    height: 3.75em;
-  }
  .top {
    display: flex;
    flex-direction: row;
@ -206,12 +203,12 @@ export default class extends Vue {
 // Phone
@include media('<tablet') {
  .item-detail {
-    margin-top: 58px;
+    margin-top: 76px;
    width: 375px;
    height: auto;
  }
  .backButton {
-    display: none;
+    display: none!important;
  }
 }

@ -809,7 +806,7 @@ export default class extends Vue {
          margin-top: 12px;
          .rarityRow {
            justify-content: flex-start;
-            .skinRarity {
+            .skin-rarity-card {
              margin-left: 12px;
            }
          }
--- a/src/components/market/MoileTop.vue
+++ b/src/components/market/MoileTop.vue
@ -0,0 +1,216 @@
+<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}">
+      <label class="navItem">Thetan Boxes</label>
+      <label class="navItem dash">Marketplace</label>
+      <button class="general-btn connectButton mobile">
+        <span>Connect Wallet</span>
+      </button>
+      <label class="navItem contact">Contact us</label>
+      <label class="navItem profile" @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">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'
+
+@Component({
+  name: 'MobileTop',
+  components: {
+
+  }
+})
+export default class extends Vue {
+  menuShow = false
+  subShow = false
+  toggleMenu() {
+    this.menuShow = !this.menuShow
+    if (!this.menuShow) {
+      this.subShow = false
+    }
+  }
+}
+</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: 8;
+    height: 4.75em;
+    position: fixed;
+    padding: 0 5%;
+    top: 0;
+    left: 0;
+    right: 0;
+    font-size: 16px;
+    align-items: center;
+  }
+  .logo {
+    width: 40vw;
+  }
+  .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: 7;
+    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;
+
+      &: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>
--- a/src/components/market/SearchPanel.vue
+++ b/src/components/market/SearchPanel.vue
@ -1,5 +1,10 @@
 <template>
  <div class="searchPanel">
+    <div class="filter-header">
+      <img class="icon"
+           @click = "hideFilter"
+           src="data:image/svg+xml,%3csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M10.5 19L1.5 10L10.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
+    </div>
    <div class="root">
      <div class="header">
                <span class="label">FILTERS</span
@ -151,6 +156,9 @@
        </div>
      </div>
    </div>
+    <div class="filter-btn">
+      <button class="general-btn btnApply"><span>Apply Filter</span></button>
+    </div>
  </div>
 </template>

@ -179,6 +187,9 @@ export default class extends Vue {
  battleShow = true
  priceShow = true
  levelShow = true
+  hideFilter() {
+    this.$emit('filter-show', false)
+  }
 }
 </script>
 <style lang="scss" scoped>
@ -336,4 +347,75 @@ export default class extends Vue {
    border-color: #9a77ff;
  }
 }
+.filter-btn {
+  display: none;
+}
+.filter-header {
+  display: none;
+}
+@media (max-width: 767px) {
+  .searchPanel{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100vh;
+    z-index: 16;
+    background-color: black;
+    overflow-y: scroll;
+    display: none;
+  }
+  .searchPanel .root {
+    margin-bottom: 140px;
+    margin-top: 76px;
+  }
+  .filter-btn{
+    width: 100vw;
+    max-width: 100%;
+    background: #130933;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    font-size: 16px;
+    display: flex;
+    z-index: 10;
+    transition: transform linear .2s,opacity linear .2s;
+    box-sizing: border-box;
+    flex-direction: column;
+  }
+  .btnApply {
+    line-height: inherit;
+    padding: 20px 0;
+    margin-top: 40px;
+    margin-bottom: 45px;
+    margin-left: 24px;
+    margin-right: 24px;
+    height: 55px;
+    span {
+      font-size: 1.125em;
+    }
+  }
+
+  .filter-header {
+    width: 100vw;
+    max-width: 100%;
+    background: #130933;
+    position: fixed;
+    top: 0;
+    right: 0;
+    display: flex;
+    z-index: 10;
+    transition: transform linear .2s,opacity linear .2s;
+    box-sizing: border-box;
+    flex-direction: column;
+    font-size: 20px;
+    font-weight: bold;
+    color: white;
+    padding: 22.5px 24px 33px 24px;
+    .icon {
+      margin-right: 25px;
+      width: 12px;
+    }
+  }
+}
 </style>
--- a/src/components/market/SearchResult.vue
+++ b/src/components/market/SearchResult.vue
@ -2,9 +2,9 @@
  <div class="searchResult">
    <div class="wrapper">
      <sort-select></sort-select>
-<!--      <button class="general-btn btnFilter">-->
-<!--        <span>FILTERS</span>-->
-<!--      </button>-->
+      <button class="general-btn btnFilter" @click="showFilter">
+        <span>FILTERS</span>
+      </button>
    </div>
    <result-no v-if="false"></result-no>
    <card-list></card-list>
@ -24,7 +24,11 @@ import ResultNo from '@/components/market/ResultNo.vue'
    SortSelect
  }
 })
-export default class extends Vue {}
+export default class extends Vue {
+  showFilter() {
+    this.$emit('filter-show', true)
+  }
+}
 </script>
 <style lang="scss" scoped>
 .searchResult {
@ -66,5 +70,14 @@ export default class extends Vue {}
  font-size: 1.125em;
  line-height: 1.33;
 }
+@media (max-width: 767px) {
+  .searchResult {
+    margin-top: 76px;
+  }
+  .searchResult .wrapper .btnFilter {
+    clip-path: none;
+    display: block;
+  }
+}

 </style>
--- a/src/components/market/TopMenu.vue
+++ b/src/components/market/TopMenu.vue
@ -1,49 +1,58 @@
 <template>
-  <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"
-        src="@/assets/main/p1/icon_logo_b.png"
-      /></a>
-    </div>
-    <div class="rightContainer">
-      <div class="contact">
-        <span class="span">Contact Us</span>
+  <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" />
+        </a>
+      </div>
+      <div class="rightContainer">
+        <div class="contact">
+          <span class="span">Contact Us</span>
+        </div>
+        <button v-if="!walletCollected" class="general-btn connectButton">
+          <span>Connect Wallet</span>
+        </button>
+        <img
+          draggable="false"
+          v-if="walletCollected"
+          class="avatar"
+          src="https://assets.thetanarena.com/cosmetic/avatar/3.png"
+          alt="avatar"
+          @click="infoPanelShow=!infoPanelShow"
+        >
      </div>
-      <button v-if="!walletCollected" class="general-btn connectButton">
-        <span>Connect Wallet</span>
-      </button>
-      <img
-        draggable="false"
-        v-if="walletCollected"
-        class="avatar"
-        src="https://assets.thetanarena.com/cosmetic/avatar/3.png"
-        alt="avatar">
    </div>
+    <top-user-info v-if="infoPanelShow"></top-user-info>
  </div>
 </template>

 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import TopUserInfo from '@/components/market/TopUserInfo.vue'

@Component({
  name: 'Navbar',
-  components: {
-
-  }
+  components: { TopUserInfo }
 })
 export default class extends Vue {
-  walletCollected = false
+  walletCollected = true;
+  infoPanelShow = false
 }
 </script>

@ -62,18 +71,21 @@ export default class extends Vue {
  --tooltip-margin: 1.875em;
  --tooltip-arrow-size: 0.75em;
 }
+
 .top-header .header-menu {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
 }
+
 .top-header .header-menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
 }
+
 .top-header .header-menu .menu-item .item {
  font-weight: bold;
  font-size: 1.125em;
@ -86,6 +98,7 @@ export default class extends Vue {
  width: 13.438em;
  box-sizing: border-box;
 }
+
 .top-header .header-menu .menu-item .active {
  background: linear-gradient(
      90deg,
@ -95,6 +108,7 @@ export default class extends Vue {
  margin-left: -2em;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
 }
+
 .active-bottom {
  border-bottom: 0.3125em #563cb8 solid;
  width: 120%;
@ -110,6 +124,7 @@ export default class extends Vue {
  display: flex;
  justify-content: center;
 }
+
 .logo {
  height: 3rem;
 }
@ -122,14 +137,17 @@ export default class extends Vue {
  padding-right: 2.5em;
  z-index: 1;
 }
+
 .rightContainer .contact {
  margin-right: 1.875em;
 }
+
 .rightContainer .contact .span {
  cursor: pointer;
  font-size: 1.125em;
  color: #a796e1;
 }
+
 .connectButton {
  border-radius: 0.25em;
  background: radial-gradient(
@ -142,6 +160,7 @@ export default class extends Vue {
  padding: 0 1.688em;
  font-size: 1.125em !important;
 }
+
 .connectButton span {
  text-decoration: none;

@ -150,10 +169,15 @@ export default class extends Vue {
  line-height: 1.33;
  color: white;
 }
+
 .avatar {
  width: 3.125em;
  height: 3.125em;
  border-radius: 1.563em;
  cursor: pointer;
 }
+
+@media (max-width: 767px) {
+
+}
 </style>
--- a/src/components/market/TopUserInfo.vue
+++ b/src/components/market/TopUserInfo.vue
@ -0,0 +1,202 @@
+<template>
+  <div class="position dropdown anim">
+    <span class="name">SEgGQ58HRlLd</span>
+    <div class="divCode">
+      <span class="address">0x42448c...fc2c0231</span>
+      <img
+        class="icCopy" width="24" height="24"
+        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>
+      <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">Logout</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'TopUserInfo',
+  components: {}
+})
+export default class extends Vue {
+}
+</script>
+
+<style lang="scss" scoped>
+.position {
+  top: 116px;
+  right: 59px;
+  z-index: 9;
+}
+.container {
+  display: flex;
+  right: 2.5em;
+  position: fixed;
+}
+
+.dropdown {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  cursor: default;
+  padding: 1.5em;
+  width: 18.875em;
+  box-sizing: border-box;
+  border-radius: 0.5em;
+
+  z-index: 11;
+
+  transition: all 0.5s;
+  opacity: 1;
+  overflow: hidden;
+
+  max-height: 37.5em;
+
+  background-color: #261858;
+  color: white;
+
+  .name {
+    font-size: 1.125em;
+    margin-bottom: 0.5em;
+    font-family: 'Oxanium', monospace;
+  }
+
+  .divCode {
+    align-items: center;
+    display: flex;
+    cursor: pointer;
+    margin-bottom: 1em;
+  }
+
+  .address {
+    color: #bcadf2;
+    font-size: 1.125em;
+    flex: 1;
+    display: inline-block;
+    overflow: hidden !important;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &:active {
+      opacity: 0.6;
+    }
+  }
+  .icCopy {
+    margin-left: 0.625em;
+    margin-right: 1.5em;
+  }
+  .coin {
+    font-weight: bold;
+    font-size: 1.25em;
+    line-height: 1.4;
+    margin-top: 0.5em;
+  }
+  .money {
+    color: #a346ec;
+    font-size: 1em;
+    line-height: 1.5;
+  }
+
+  .label {
+    color: #bcadf2;
+    font-size: 1.125em;
+  }
+
+  .item {
+    display: flex;
+
+    padding: 0.5em 0;
+    margin-bottom: 1em;
+
+    font-size: 1.125em;
+    line-height: 1.33;
+    color: white;
+
+    &:hover {
+      background: #563cb8;
+      border-radius: 0.25em;
+      cursor: pointer;
+    }
+    .icon {
+      padding: 0 0.625em;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+    .itemName {
+      padding: 0 0.5em;
+    }
+  }
+
+  &.hide {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  .menu {
+    border-top: 0.063em solid #382873;
+    margin-top: 1em;
+    padding-bottom: 1em;
+    padding-top: 1em;
+    border-bottom: 0.063em solid #382873;
+  }
+
+  .btnLogout {
+    font-size: 1.125em;
+    padding: 1.375em 1.375em 0.375em 0;
+    cursor: pointer;
+  }
+}
+
+.navItem {
+  font-weight: bolder;
+  font-size: 1.125em;
+}
+
+.avatar {
+  width: 3.125em;
+  height: 3.125em;
+  border-radius: 1.563em;
+  cursor: pointer;
+}
+
+@keyframes overlay-anim {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.anim {
+  animation-duration: 0.25s;
+  animation-fill-mode: forwards;
+  animation-name: overlay-anim;
+  opacity: 0;
+}
+
+@media (max-width: 767px) {
+
+}
+</style>
--- a/src/views/Item.vue
+++ b/src/views/Item.vue
@ -1,6 +1,7 @@
 <template>
  <div>
-    <top-menu></top-menu>
+    <mobile-top class="mobile-top"></mobile-top>
+    <top-menu class="desk-top"></top-menu>
    <div class="root">
      <item-detail></item-detail>
    </div>
@ -11,9 +12,11 @@
 import { Component, Vue } 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'

@Component({
  components: {
+    MobileTop,
    ItemDetail,
    TopMenu
  }
@ -31,11 +34,69 @@ export default class Item extends Vue {}
  position: absolute;
  width: 100%;
 }
+.mobile-top {
+  display: none;
+}

 // Tablet & Phone
@include media('<desktop') {
  .banner {
    position: relative;
  }
+  .mobile-top {
+    display: block;
+  }
+  .desk-top {
+    display: none;
+  }
+}
+@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>
--- a/src/views/Market.vue
+++ b/src/views/Market.vue
@ -1,10 +1,11 @@
 <template>
  <div>
-  <top-menu></top-menu>
+  <mobile-top class="mobile-top"></mobile-top>
+  <top-menu class="desk-top"></top-menu>
  <section class="root">
    <div class="container">
-      <search-panel></search-panel>
-      <search-result></search-result>
+      <search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
+      <search-result @filter-show="showFilter"></search-result>
    </div>
  </section>
  </div>
@ -15,15 +16,22 @@ 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
  }
 })
-export default class Market extends Vue {}
+export default class Market extends Vue {
+  mobileFilterShow = false
+  showFilter(val: boolean) {
+    this.mobileFilterShow = val
+  }
+}
 </script>
 <style lang="scss" scoped>
 .root {
@ -38,6 +46,10 @@ export default class Market extends Vue {}
  max-width: 100%;
  box-sizing: border-box;
 }
+.mobile-top {
+  display: none;
+}
+
@media (max-width: 1023px) {
  .container {
    -webkit-box-orient: vertical;
@ -111,5 +123,15 @@ export default class Market extends Vue {}
  .searchResult {
    padding: 26px 20px;
  }
+  .mobile-top {
+    display: block;
+  }
+  .desk-top {
+    display: none;
+  }
+
+  .show{
+    display: flex!important;
+  }
 }
 </style>