[edit] style

src/assets/svg/icon-tab-message-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.8203C13.8506 24.8203 12.7405 24.6728 11.6932 24.3981C11.0133 24.2198 9.14472 24.8397 6.0875 26.2578C6.90527 23.6109 7.09915 22.0898 6.66917 21.6945C4.70537 19.8894 3.5 17.4468 3.5 14.7578C3.5 9.20044 8.64872 4.69531 15 4.69531C21.3513 4.69531 26.5 9.20044 26.5 14.7578C26.5 20.3152 21.3513 24.8203 15 24.8203ZM10.4288 16.0803C11.1432 16.0803 11.7225 15.5011 11.7225 14.7866C11.7225 14.0721 11.1432 13.4928 10.4288 13.4928C9.71426 13.4928 9.135 14.0721 9.135 14.7866C9.135 15.5011 9.71426 16.0803 10.4288 16.0803ZM15.0288 16.0803C15.7432 16.0803 16.3225 15.5011 16.3225 14.7866C16.3225 14.0721 15.7432 13.4928 15.0288 13.4928C14.3143 13.4928 13.735 14.0721 13.735 14.7866C13.735 15.5011 14.3143 16.0803 15.0288 16.0803ZM19.6287 16.0803C20.3432 16.0803 20.9225 15.5011 20.9225 14.7866C20.9225 14.0721 20.3432 13.4928 19.6287 13.4928C18.9143 13.4928 18.335 14.0721 18.335 14.7866C18.335 15.5011 18.9143 16.0803 19.6287 16.0803Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-message.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 24.8203C13.8506 24.8203 12.7405 24.6728 11.6932 24.3981C11.0133 24.2198 9.14472 24.8397 6.0875 26.2578C6.90527 23.6109 7.09915 22.0898 6.66917 21.6945C4.70537 19.8894 3.5 17.4468 3.5 14.7578C3.5 9.20044 8.64872 4.69531 15 4.69531C21.3513 4.69531 26.5 9.20044 26.5 14.7578C26.5 20.3152 21.3513 24.8203 15 24.8203ZM10.4288 16.0803C11.1432 16.0803 11.7225 15.5011 11.7225 14.7866C11.7225 14.0721 11.1432 13.4928 10.4288 13.4928C9.71426 13.4928 9.135 14.0721 9.135 14.7866C9.135 15.5011 9.71426 16.0803 10.4288 16.0803ZM15.0288 16.0803C15.7432 16.0803 16.3225 15.5011 16.3225 14.7866C16.3225 14.0721 15.7432 13.4928 15.0288 13.4928C14.3143 13.4928 13.735 14.0721 13.735 14.7866C13.735 15.5011 14.3143 16.0803 15.0288 16.0803ZM19.6287 16.0803C20.3432 16.0803 20.9225 15.5011 20.9225 14.7866C20.9225 14.0721 20.3432 13.4928 19.6287 13.4928C18.9143 13.4928 18.335 14.0721 18.335 14.7866C18.335 15.5011 18.9143 16.0803 19.6287 16.0803Z" fill="#C0C0C0"/>
+</svg>

src/assets/svg/icon-tab-more-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.465 12.034C14.465 13.3735 13.379 14.4595 12.0396 14.4595H7.43108C6.09162 14.4595 5.00559 13.3734 5.00559 12.034V7.4255C5.00559 6.08604 6.09162 5 7.43108 5H12.0395C13.379 5 14.465 6.08604 14.465 7.4255V12.034ZM25.0056 22.5744C25.0056 23.914 23.9196 25 22.58 25H17.9717C16.6322 25 15.5461 23.914 15.5461 22.5744V17.9661C15.5461 16.6266 16.6322 15.5405 17.9717 15.5405H22.58C23.9196 15.5405 25.0056 16.6266 25.0056 17.9661V22.5744ZM14.4595 22.5744C14.4595 23.914 13.3734 25 12.034 25H7.4255C6.08595 25 5 23.914 5 22.5744V17.9661C5 16.6266 6.08604 15.5405 7.4255 15.5405H12.0339C13.3734 15.5405 14.4594 16.6266 14.4594 17.9661V22.5744H14.4595ZM22.3336 7.10775C22.4817 7.10791 22.6237 7.16681 22.7284 7.27152C22.8331 7.37624 22.8921 7.51821 22.8923 7.66631V11.7932C22.8923 12.1011 22.6416 12.3517 22.3336 12.3517H18.2068C18.0588 12.3515 17.9168 12.2926 17.812 12.1879C17.7073 12.0832 17.6484 11.9412 17.6482 11.7932V7.66631C17.6482 7.35838 17.8988 7.10775 18.2068 7.10775H22.3336ZM22.5744 5H17.9661C16.6266 5 15.5405 6.08604 15.5405 7.42559V12.0339C15.5405 13.3734 16.6266 14.4595 17.9661 14.4595H22.5744C23.914 14.4595 25 13.3734 25 12.0339V7.42559C25 6.08604 23.914 5 22.5744 5Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-more.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.465 12.034C14.465 13.3735 13.379 14.4595 12.0396 14.4595H7.43108C6.09162 14.4595 5.00559 13.3734 5.00559 12.034V7.4255C5.00559 6.08604 6.09162 5 7.43108 5H12.0395C13.379 5 14.465 6.08604 14.465 7.4255V12.034ZM25.0056 22.5744C25.0056 23.914 23.9196 25 22.58 25H17.9717C16.6322 25 15.5461 23.914 15.5461 22.5744V17.9661C15.5461 16.6266 16.6322 15.5405 17.9717 15.5405H22.58C23.9196 15.5405 25.0056 16.6266 25.0056 17.9661V22.5744ZM14.4595 22.5744C14.4595 23.914 13.3734 25 12.034 25H7.4255C6.08595 25 5 23.914 5 22.5744V17.9661C5 16.6266 6.08604 15.5405 7.4255 15.5405H12.0339C13.3734 15.5405 14.4594 16.6266 14.4594 17.9661V22.5744H14.4595ZM22.3336 7.10775C22.4817 7.10791 22.6237 7.16681 22.7284 7.27152C22.8331 7.37624 22.8921 7.51821 22.8923 7.66631V11.7932C22.8923 12.1011 22.6416 12.3517 22.3336 12.3517H18.2068C18.0588 12.3515 17.9168 12.2926 17.812 12.1879C17.7073 12.0832 17.6484 11.9412 17.6482 11.7932V7.66631C17.6482 7.35838 17.8988 7.10775 18.2068 7.10775H22.3336ZM22.5744 5H17.9661C16.6266 5 15.5405 6.08604 15.5405 7.42559V12.0339C15.5405 13.3734 16.6266 14.4595 17.9661 14.4595H22.5744C23.914 14.4595 25 13.3734 25 12.0339V7.42559C25 6.08604 23.914 5 22.5744 5Z" fill="#C0C0C0"/>
+</svg>

src/assets/svg/icon-tab-wallet-active.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.9981 6H23.0044C24.6547 6 26 7.34533 26 8.9981V11.738H18.3117C16.4179 11.738 14.8684 13.2874 14.8684 15.1812V16.0617C14.8684 17.9555 16.4179 19.505 18.3117 19.505H26V22.2448C26 23.9 24.6547 25.2429 23.0019 25.2429H6.9981C5.34287 25.2429 4 23.8976 4 22.2448V8.9981C4 7.34287 5.34533 6 6.9981 6ZM16.0967 15.1806C16.0967 14.5928 16.3279 14.0394 16.7485 13.6188C17.1666 13.1983 17.7224 12.9671 18.3103 12.9671H25.9986V18.2746H18.3103C17.7224 18.2746 17.1691 18.0434 16.7485 17.6229C16.3279 17.2023 16.0967 16.6489 16.0967 16.0611V15.1806ZM20.1991 15.6208C20.1991 15.0773 19.7589 14.6371 19.2153 14.6371C18.6718 14.6371 18.2316 15.0773 18.2316 15.6208C18.2316 16.1644 18.6718 16.6046 19.2153 16.6046C19.7589 16.6046 20.1991 16.1644 20.1991 15.6208Z" fill="#1D9BF0"/>
+</svg>

src/assets/svg/icon-tab-wallet.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.9981 6H23.0044C24.6547 6 26 7.34533 26 8.9981V11.738H18.3117C16.4179 11.738 14.8684 13.2874 14.8684 15.1812V16.0617C14.8684 17.9555 16.4179 19.505 18.3117 19.505H26V22.2448C26 23.9 24.6547 25.2429 23.0019 25.2429H6.9981C5.34287 25.2429 4 23.8976 4 22.2448V8.9981C4 7.34287 5.34533 6 6.9981 6ZM16.0967 15.1806C16.0967 14.5928 16.3279 14.0394 16.7485 13.6188C17.1666 13.1983 17.7224 12.9671 18.3103 12.9671H25.9986V18.2746H18.3103C17.7224 18.2746 17.1691 18.0434 16.7485 17.6229C16.3279 17.2023 16.0967 16.6489 16.0967 16.0611V15.1806ZM20.1991 15.6208C20.1991 15.0773 19.7589 14.6371 19.2153 14.6371C18.6718 14.6371 18.2316 15.0773 18.2316 15.6208C18.2316 16.1644 18.6718 16.6046 19.2153 16.6046C19.7589 16.6046 20.1991 16.1644 20.1991 15.6208Z" fill="#C0C0C0"/>
+</svg>

src/router/popup.js

@@ -2,10 +2,12 @@
 import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
 import Tabcontent from '@/view/popup/tabbar-page/index.vue'
 import Home from '@/view/popup/tabbar-page/wallter/popup.vue'
-import Nft  from '@/view/popup/tabbar-page/nft/index.vue'
+import NFT  from '@/view/popup/tabbar-page/NFT/index.vue'
 import Message from '@/view/popup/tabbar-page/message/index.vue'
 import More from '@/view/popup/tabbar-page/more/index.vue'
 
+import NFTDetail  from '@/view/popup/tabbar-page/NFT/detail.vue'
+
 import Withdraw from '@/view/popup/withdraw/index.vue'
 import WithdrawInfo from '@/view/popup/withdraw/info.vue'
 import WithdrawConfirm from '@/view/popup/withdraw/confirm.vue'
@@ -32,9 +34,9 @@ const routes = [
                 component: Home
             },
             {
-                path: "nft",
-                name: 'nft',
-                component: Nft
+                path: "NFT",
+                name: 'NFT',
+                component: NFT
             },
             {
                 path: "message",
@@ -108,6 +110,11 @@ const routes = [
         path: '/transactions',
         name: 'Transactions',
         component: Transactions
+    },
+    {
+        path: '/NFTDetail',
+        name: 'NFTDetail',
+        component: NFTDetail
     }
 ]
 

src/view/popup/components/tabbar.vue

@@ -4,7 +4,7 @@
             v-for="(item,index) in tabbarData" 
             :key="index"
             @click="tabbarHandler(item, index)">
-            <img src="" alt="">
+            <img :src="index == currentTab.index ? item.iconActive : item.iconInActive">
             <div class="text"  :class="{'active-tab': index == currentTab.index}">
                 {{item.name}}
             </div>
@@ -25,26 +25,26 @@ let tabbarData = ref([
     {
         name:  'Wallet',
         path: '/',
-        iconActive: '',
-        iconInActive: ''
+        iconActive: require('@/assets/svg/icon-tab-wallet-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-wallet.svg')
     },
     {
         name:  'NFTs',
-        path: '/nft',
-        iconActive: '',
-        iconInActive: ''
+        path: '/NFT',
+        iconActive: require('@/assets/svg/icon-tab-NFT-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-NFT.svg')
     },
     {
         name:  'Message',
         path: '/message',
-        iconActive: '',
-        iconInActive: ''
+        iconActive: require('@/assets/svg/icon-tab-message-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-message.svg')
     },
     {
         name:  'More',
         path: '/more',
-        iconActive: '',
-        iconInActive: ''
+        iconActive: require('@/assets/svg/icon-tab-more-active.svg'),
+        iconInActive: require('@/assets/svg/icon-tab-more.svg')
     }
 ])
 

src/view/popup/tabbar-page/nft/detail.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="nft-detail-wrapper">
+    <div class="back-bar"></div>
+    <div class="content">
+      <div class="nft-img">
+        <img
+          class="img"
+          src="https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
+          alt=""
+        />
+      </div>
+
+      <div class="desc item">
+        <div class="title">Description</div>
+        <div class="desc-content">
+            Created by <span>Azuki</span>
+        </div>
+      </div>
+
+      <div class="prop item">
+        <div class="title">Properties</div>
+        <div class="prop-content">
+            <div class="prop-item">
+
+            </div>
+        </div>
+      </div>
+
+      <div class="about item">
+        <div class="title">About</div>
+      </div>
+
+      <div class="detail item">
+        <div class="title">Details</div>
+      </div>
+
+      <div class="date item">
+        <div class="title">Date of possession</div>
+      </div>
+
+      <div class="price item">
+        <div class="title">Purchase price</div>
+      </div>
+    </div>
+    <div class="bottom-bar"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+let propList = ref([
+    {
+        
+    }
+])
+
+</script>
+
+
+<style scoped lang="scss">
+.nft-detail-wrapper {
+  width: 100%;
+  height: 100%;
+
+  .back-bar {
+    height: 48px;
+    background: #ffffff;
+    box-shadow: 0px 0.5px 0px #d1d9dd;
+    box-sizing: border-box;
+    padding: 14px;
+  }
+
+  .content {
+    width: 100%;
+    height: calc(100% - 120px);
+    padding: 0 16px;
+    box-sizing: border-box;
+    overflow-y: auto;
+
+    .nft-img {
+        margin-top: 23px;
+        margin-bottom: 20px;
+        text-align: center;
+        .img {
+            width: 280px;
+            border-radius: 26px;
+        }
+    }
+
+    .item {
+      border: 1px solid #e3e3e3;
+      border-radius: 10px;
+      padding: 14px;
+      box-sizing: border-box;
+      margin-bottom: 12px;
+
+      .title {
+        font-weight: 600;
+        font-size: 14px;
+      }
+    }
+
+    .desc {
+        margin-top: 10px;
+        .desc-content {
+            font-weight: 500;
+            font-size: 14px;
+            color: #929292;
+
+            span {
+                color: #1D9BF0;
+            }
+        }
+    }
+  }
+
+  .bottom-bar {
+    background: #ffffff;
+    box-shadow: inset 0px 1px 0px #ececec;
+    height: 70px;
+    padding: 15px 16px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/view/popup/tabbar-page/nft/index.vue

@@ -1,15 +1,71 @@
 <template>
-  <div class="more-list">
-    
+  <div class="nft-page-wrapper">
+    <div class="content">
+      <div class="item" v-for="(item, index) in listData" :key="index">
+        <img :src="item.src" class="img">
+        <div class="name">{{item.name}}</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
+let listData = ref([
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+   {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+  {
+    src: 'https://img0.baidu.com/it/u=901606327,1176126707&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
+    name: 'test Name'
+  },
+])
 </script>
 
 
 <style scoped lang="scss">
-    .more-list {
+    .nft-page-wrapper {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+
+      .content {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        padding: 5px 2px 0 16px;
+        box-sizing: border-box;
+
+        .item {
+          width: 33%;
+          box-sizing: border-box;
+          padding-right: 14px;
+          margin-top: 15px;
+          cursor: pointer;
+
+          .img {
+            width: 100%;
+            border-radius: 5px;
+          }
+
+          .name {
+            font-weight: 400;
+            font-size: 12px;
+          }
+        }
+      }
     }
 </style>

src/view/popup/tabbar-page/wallter/popup.vue

@@ -14,10 +14,10 @@
                 <div class="right">
                     <div class="bill" @click="showTransactions">
                         <red-dot class="red-dot" v-if="unReadCountWallet > 0"></red-dot>
-                        <img :src="require('@/assets/svg/icon-home-bill.svg')" />
+                        <img :src="require('@/assets/svg/icon-home-list.svg')" />
                     </div>
 
-                    <img :src="require('@/assets/svg/icon-form-refresh.svg')" 
+                    <img :src="require('@/assets/svg/icon-home-refresh.svg')" 
                         class="icon"
                         >
                 </div>
@@ -299,6 +299,7 @@ body {
                         position: absolute;
                         right: 0px;
                         top: -1px;
+                        z-index: 100;
                     }
                 }