feat

components.d.ts

@@ -11,11 +11,15 @@ declare module '@vue/runtime-core' {
     BkTable: typeof import('./src/components/table/desktop/bkTable.vue')['default']
     BkTableDetails: typeof import('./src/components/table/desktop/bkTableDetails.vue')['default']
     DetailsRow: typeof import('./src/components/table/dBase/detailsRow.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black w-full max-w-[1440px]">
+  <div class="w-full max-w-[1440px] z-[99]">
     <!-- <router-link to="/">首页</router-link>&nbsp;
     <router-link to="/TableBlock">block</router-link>&nbsp;
     <hr /> -->

src/components/row-search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile:hidden">
+  <div class="mobile:hidden z-10 desktop:pb-[100px]">
     <div class="flex flex-row px-[120px] justify-between items-center">
       <div
         class="flex flex-1 justify-start items-center cursor-pointer"
@@ -46,7 +46,7 @@
       </div>
     </div>
     <div
-      class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]"
+      class="bg-home-page bg-cover absolute left-0 z-[-1] bg-no-repeat w-full h-[535.5px]"
     ></div>
   </div>
   <!-- 移动端显示 -->

src/components/table/dBase/tokensDetailsRow.vue

@@ -10,15 +10,31 @@
       class="flex flex-1 flex-row justify-start items-center tokens-select"
       v-if="title === 'Tokens'"
     >
-      <el-select v-model="active" placeholder="Select">
-        <el-option
-          v-for="(item, index) in value"
-          :key="index + item"
-          :label="item + 'token'"
-          :value="item"
-          class="text-white"
-        />
-      </el-select>
+      <el-popover placement="bottom" :width="250" trigger="click">
+        <template #reference>
+          <!-- <el-button style="margin-right: 16px">{}</el-button> -->
+          <p
+            class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
+          >
+            {{ list?.length || 0 }} token
+          </p>
+        </template>
+        <template #default>
+          <div class="h-[200px] overflow-y-scroll">
+            <div
+              v-for="(item, index) in list"
+              :key="index"
+              class="border-b py-[8px]"
+            >
+              <p class="ml-[24px]">{{ item?.tokenType }}</p>
+              <p class="mt-[12px]">{{ item?.name }} &nbsp;</p>
+              <p class="ml-[24px]">
+                {{ `${item?.availableBalance}${item?.name}` }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </el-popover>
     </div>
     <div
       class="flex flex-1 flex-row justify-start items-center text-white"
@@ -45,7 +61,7 @@
 <script setup lang="ts">
 import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 const props = defineProps({
   title: String,
   value: [Number, String, Array] as any,
@@ -53,16 +69,14 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
+const list = ref<any>([])
 
-onMounted(() => {
-  console.log(props.title)
+watchEffect(() => {
   if (props.title === 'Tokens') {
     list.value = props.value
+    console.log(list.value)
   }
 })
-
-const list = ref<string | number[]>([])
-const active = ref('')
 </script>
 
 <style lang="scss">

src/components/table/dBase/transfersRow.vue

@@ -4,15 +4,28 @@
   >
     <div>
       <p class="text-white text-[16px] font-medium">{{ title }}</p>
-      <p class="text-gray-BBB text-[14px] font-normal mt-[12px]">
+      <p
+        class="text-gray-BBB text-[14px] font-normal mt-[12px] cursor-pointer"
+        @click="handleRouter(`/tx/${value1}`)"
+      >
         {{ value1 }}
       </p>
       <div
         class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]"
       >
-        <p class="mr-[10px]">{{ value2 }}</p>
+        <p
+          class="mr-[10px] cursor-pointer"
+          @click="handleRouter(`/tokens/${value2}`)"
+        >
+          {{ value2 }}
+        </p>
         <Icons url="chevron_right" :size="16" />
-        <p class="ml-[10px]">{{ value3 }}</p>
+        <p
+          class="ml-[10px] cursor-pointer"
+          @click="handleRouter(`/tokens/${value3}`)"
+        >
+          {{ value3 }}
+        </p>
       </div>
     </div>
     <div
@@ -32,13 +45,19 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import { useRouter } from 'vue-router'
 defineProps({
   title: [String, Number],
   value1: String,
   value2: String,
   value3: String,
   state: String,
+  route: Function,
 })
+const router = useRouter()
+const handleRouter = (route: string) => {
+  router.replace(route)
+}
 </script>
 
 <style scoped></style>

src/components/table/desktop/tokensDetails.vue

@@ -48,7 +48,7 @@ const requestDetails = async (address: string) => {
   const { data } = res
   currentData.value = {
     ...data,
-    // tokens: data.tokens,
+    tokens: data?.tokens,
     transactions: data?.transactions + ' Transition',
     transfers: data?.transfers + ' Transfers',
   }
@@ -56,6 +56,9 @@ const requestDetails = async (address: string) => {
 }
 
 watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取address
   let address = route.path.split('/')?.[2]
   requestDetails(address)

src/components/table/desktop/transactDetails.vue

@@ -4,7 +4,7 @@
   >
     <transact-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
       :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
@@ -27,7 +27,16 @@ const invariable = {
 const currentData = ref()
 watchEffect(() => {
   currentData.value = props.data
-  console.log(currentData.value)
+  if (props?.data && props.data?.receiptList.length === 0) {
+    invariable.labels = invariable.labels.filter(
+      (t) => t !== 'Tokens Transferred'
+    )
+    invariable.sequence = invariable.sequence.filter((t) => t !== 'receiptList')
+    invariable.colorSequence = invariable.colorSequence.filter(
+      (t, i) => i !== 5
+    )
+    invariable.isCopys = invariable.isCopys.filter((t, i) => i !== 5)
+  }
 })
 </script>
 

src/components/table/mBase/tokensDetailsRow.vue

@@ -9,22 +9,39 @@
         {{ title }}
       </p>
     </div>
-    <!-- <div
-      class="flex flex-1 flex-row justify-start items-center mt-[15px] tokens-select"
+    <div
+      class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
       v-if="title === 'Tokens'"
     >
-      <el-select v-model="active" placeholder="Select">
-        <el-option
-          v-for="(item, index) in value"
-          :key="index"
-          :label="item + 'token'"
-          :value="item"
-          class="text-white"
-        />
-      </el-select>
-    </div> -->
+      <el-popover placement="bottom" :width="250" trigger="click">
+        <template #reference>
+          <!-- <el-button style="margin-right: 16px">{}</el-button> -->
+          <p
+            class="cursor-pointer text-white border border-white px-[8px] py-[2px]"
+          >
+            {{ list?.length || 0 }} token
+          </p>
+        </template>
+        <template #default>
+          <div class="h-[200px] overflow-y-scroll">
+            <div
+              v-for="(item, index) in list"
+              :key="index"
+              class="border-b py-[8px]"
+            >
+              <p class="ml-[24px]">{{ item?.tokenType }}</p>
+              <p class="mt-[12px]">{{ item?.name }} &nbsp;</p>
+              <p class="ml-[24px]">
+                {{ `${item?.availableBalance}${item?.name}` }}
+              </p>
+            </div>
+          </div>
+        </template>
+      </el-popover>
+    </div>
     <div
       class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
+      v-else
     >
       <p
         :class="
@@ -45,9 +62,8 @@
 </template>
 
 <script setup lang="ts">
-import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 const props = defineProps({
   title: [String, Number] as any,
   value: [Number, String, Array] as any,
@@ -55,15 +71,12 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
-
-onMounted(() => {
-  console.log(props.title)
+const list = ref<any>([])
+watchEffect(() => {
   if (props.title === 'Tokens') {
     list.value = props.value
   }
 })
-
-const list = ref<string | number[]>([])
 </script>
 
 <style lang="scss">

src/components/table/mobile/tokensDetails.vue

@@ -47,7 +47,7 @@ const requestDetails = async (address: string) => {
   const { data } = res
   currentData.value = {
     ...data,
-    // tokens: data.tokens,
+    tokens: data?.tokens,
     transactions: data?.transactions + ' Transition',
     transfers: data?.transfers + ' Transfers',
   }
@@ -55,6 +55,9 @@ const requestDetails = async (address: string) => {
 }
 
 watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取address
   let address = route.path.split('/')?.[2]
   requestDetails(address)

src/components/table/mobile/transactDetails.vue

@@ -4,7 +4,7 @@
   >
     <transact-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
       :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
@@ -27,6 +27,16 @@ const invariable = {
 const currentData = ref()
 watchEffect(() => {
   currentData.value = props.data
+  if (props?.data && props.data?.receiptList.length === 0) {
+    invariable.labels = invariable.labels.filter(
+      (t) => t !== 'Tokens Transferred'
+    )
+    invariable.sequence = invariable.sequence.filter((t) => t !== 'receiptList')
+    invariable.colorSequence = invariable.colorSequence.filter(
+      (t, i) => i !== 5
+    )
+    invariable.isCopys = invariable.isCopys.filter((t, i) => i !== 5)
+  }
 })
 </script>
 

src/pages/BitcNFt/centerContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <Cards
       :title="cardOptions.title"

src/pages/BitcNFt/index.vue

@@ -1,81 +1,13 @@
 <template>
-  <div class="bg-black">
-    <div class="bg-black desktop:pt-[76px] mobile:pt-[39px]">
-      <!-- pc端显示 -->
-      <div class="mobile:hidden">
-        <div class="flex flex-row px-[120px] justify-between items-center">
-          <div class="flex flex-1 justify-start items-center">
-            <img
-              :src="iconList.label"
-              class="w-[60px] h-[33px]"
-              @click="goBack"
-            />
-            <span
-              class="text-[34px] font-semibold text-white ml-[11.5px]"
-              @click="goBack"
-              >MetaForce Scan</span
-            >
-          </div>
-          <div class="flex flex-1 h-[52px] justify-end items-center">
-            <div class="flex flex-1 max-w-[554px]">
-              <el-input
-                v-model="input"
-                class="bg-black h-[52px] pl-[33px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
-                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
-                :prefix-icon="Search"
-                :input-style="{ background: '#262626' }"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]"
-        ></div>
-      </div>
-      <!-- 移动端显示 -->
-      <div class="desktop:hidden">
-        <div
-          class="bg-home-page bg-cover bg-center bg-no-repeat w-full h-[219px] pt-[25px]"
-        >
-          <div class="flex flex-1 justify-center items-center">
-            <img :src="iconList.label" class="w-[40px] h-[24px]" />
-            <span class="text-[24px] font-semibold text-white ml-[16px]"
-              >MetaForce Scan</span
-            >
-          </div>
-          <div
-            class="flex flex-1 h-[40px] justify-center items-center mt-[32px]"
-          >
-            <div class="flex flex-1 px-[20px]">
-              <el-input
-                v-model="input"
-                class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
-                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
-                :prefix-icon="Search"
-                :input-style="{ background: '#262626' }"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="desktop:pt-[76px] mobile:pt-[39px]">
+    <row-search />
     <center-content />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-import { ref } from 'vue'
-import * as iconList from '../../assets/Icons/index'
-import router from '@src/routes'
-
+import RowSearch from '@src/components/row-search.vue'
 import centerContent from './centerContent.vue'
-
-const input = ref()
-
-// 请求代币信息
-// const request
-const goBack = () => router.back()
 </script>
 
 <style scoped></style>

src/pages/HomePage/index.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="bg-black desktop:pt-[122px] mobile:pt-[39px]">
     <div
-      class="bg-home-page bg-cover bg-center bg-no-repeat desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]"
+      class="bg-home-page bg-cover bg-center bg-no-repea w-full desktop:h-[535.5px] mobile:h-[219px] absolute left-0"
+    />
+    <div
+      class="desktop:w-[1440px] desktop:h-[535.5px] desktop:pt-[70px] mobile:w-full mobile:h-[219px] mobile:pt-[25px]"
     >
       <search-input />
     </div>
     <!-- 中间部分 -->
-    <div
-      class="desktop:px-[120px] desktop:mt-[-111.5px] mobile:px-[20px] mobile:mt-[-51px]"
-    >
+    <div class="desktop:px-[120px] mobile:px-[20px]">
       <!-- Network Overview -->
       <div
         class="bg-black-19191A pt-[34px] pb-[38px] mobile:py-[28px] rounded-[10px]"

src/pages/TableBlock/Block/details.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <div class="flex items-center">
       <el-icon

src/pages/TableBlock/Tabs.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <el-tabs v-model="active" class="demo-tabs" @tab-change="handleClick">
       <el-tab-pane label="Block" name="/blocks">

src/pages/TableBlock/Tokens/details.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <div class="flex items-center">
       <el-icon
@@ -26,7 +26,7 @@
       class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
     >
       <div class="details-tabs w-full">
-        <div class="flex flex-1 flex-row mobile:overflow-scroll">
+        <div class="flex flex-1 flex-row mobile:overflow-x-scroll">
           <p
             class="p-[20px] whitespace-normal text-gray-BBB cursor-pointer focus-visible:outline-hidden"
             :class="active === 'transactions' ? 'details-tabs-active' : ''"
@@ -75,6 +75,20 @@
                 :state="item.state"
               />
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
+              v-if="transactionsData.length != 0"
+            >
+              <mobile-row
+                v-for="(item, index) in transactionsData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </div>
           <div :class="active === 'tokenTransfers' ? 'flex' : 'hidden'">
             <div
@@ -99,6 +113,20 @@
                 :state="item.state"
               />
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
+              v-if="tokensData.length != 0"
+            >
+              <mobile-row
+                v-for="(item, index) in tokensData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </div>
           <div :class="active === 'internalTransactions' ? 'flex' : 'hidden'">
             <div
@@ -155,7 +183,7 @@ import TokenDetails from '@src/components/table/desktop/tokensDetails.vue'
 import TokenMobileDetails from '@src/components/table/mobile/tokensDetails.vue'
 import mobileRow from '@src/pages/VNFT/mobileRow.vue'
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
@@ -223,7 +251,10 @@ const rqeuestTokensData = async (address: string) => {
   })
   console.log(res)
 }
-onMounted(() => {
+watchEffect(() => {
+  if (route.path.split('/')?.[1] != 'tokens') {
+    return
+  }
   // 获取地址
   let address = route.path.split('/')?.[2]
   // 根据地址请求tab

src/pages/TableBlock/Transactions/details.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <div class="flex items-center">
       <el-icon
@@ -100,7 +100,7 @@ import Logs from './logs.vue'
 import DesktopTransactDetails from '@src/components/table/desktop/transactDetails.vue'
 import MobileTransactDetails from '@src/components/table/mobile/transactDetails.vue'
 
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { getFindReceiptByTokenPage } from '@src/api/TokensController'
 import { timeConvert } from '@src/utils/string'
@@ -165,8 +165,11 @@ const requestTokens = async (address: string) => {
     }
   })
 }
-onMounted(() => {
+watchEffect(() => {
   let hash = route.path.split('/')?.[2]
+  if (hash == 'undefined') {
+    return
+  }
   requestDetails(hash)
   requestLogs(hash)
 })

src/pages/TableBlock/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black desktop:pt-[76px] mobile:pt-[39px]">
+  <div class="desktop:pt-[76px] mobile:pt-[39px]">
     <row-search />
     <router-view></router-view>
   </div>

src/pages/VNFT/centerContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+    class="tableBlock-tabs mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <Cards
       :title="cardOptions.title"

src/pages/VNFT/index.vue

@@ -1,79 +1,13 @@
 <template>
-  <div class="bg-black">
-    <div class="bg-black desktop:pt-[76px] mobile:pt-[39px]">
-      <!-- pc端显示 -->
-      <div class="mobile:hidden">
-        <div class="flex flex-row px-[120px] justify-between items-center">
-          <div class="flex flex-1 justify-start items-center">
-            <img
-              :src="iconList.label"
-              class="w-[60px] h-[33px]"
-              @click="goBack"
-            />
-            <span
-              class="text-[34px] font-semibold text-white ml-[11.5px]"
-              @click="goBack"
-              >MetaForce Scan</span
-            >
-          </div>
-          <div class="flex flex-1 h-[52px] justify-end items-center">
-            <div class="flex flex-1 max-w-[554px]">
-              <el-input
-                v-model="input"
-                class="bg-black h-[52px] pl-[33px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
-                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
-                :prefix-icon="Search"
-                :input-style="{ background: '#262626' }"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]"
-        ></div>
-      </div>
-      <!-- 移动端显示 -->
-      <div class="desktop:hidden">
-        <div
-          class="bg-home-page bg-cover bg-center bg-no-repeat w-full h-[219px] pt-[25px]"
-        >
-          <div class="flex flex-1 justify-center items-center">
-            <img :src="iconList.label" class="w-[40px] h-[24px]" />
-            <span class="text-[24px] font-semibold text-white ml-[16px]"
-              >MetaForce Scan</span
-            >
-          </div>
-          <div
-            class="flex flex-1 h-[40px] justify-center items-center mt-[32px]"
-          >
-            <div class="flex flex-1 px-[20px]">
-              <el-input
-                v-model="input"
-                class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
-                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
-                :prefix-icon="Search"
-                :input-style="{ background: '#262626' }"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="desktop:pt-[76px] mobile:pt-[39px]">
+    <row-search />
     <center-content />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Search } from '@element-plus/icons-vue'
-import router from '@src/routes'
-import { ref } from 'vue'
-import * as iconList from '../../assets/Icons/index'
-
+import RowSearch from '@src/components/row-search.vue'
 import centerContent from './centerContent.vue'
-
-const input = ref()
-
-const goBack = () => router.back()
 </script>
 
 <style scoped></style>

src/pages/VNFT/mobileRow.vue

@@ -19,21 +19,29 @@
         </div>
       </div>
     </div>
-    <p class="text-gray-BBB text-[14px] font-normal mt-[12px] break-all">
+    <p
+      class="flex flex-1 w-full justify-start text-gray-BBB text-[14px] font-normal mt-[12px] break-all"
+      @click="handleRouter(`/tx/${value1}`)"
+    >
       {{ value1 }}
     </p>
     <div
       class="text-gray-BBB text-[14px] font-normal flex flex-1 w-full flex-col mt-[12px]"
     >
-      <p class="break-all">{{ value2 }}</p>
+      <p class="break-all" @click="handleRouter(`/tokens/${value2}`)">
+        {{ value2 }}
+      </p>
       <Icons url="chevron_right" :size="16" />
-      <p class="break-all">{{ value3 }}</p>
+      <p class="break-all" @click="handleRouter(`/tokens/${value3}`)">
+        {{ value3 }}
+      </p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
+import { useRouter } from 'vue-router'
 defineProps({
   title: String,
   value1: String,
@@ -41,6 +49,10 @@ defineProps({
   value3: String,
   state: String,
 })
+const router = useRouter()
+const handleRouter = (route: string) => {
+  router.replace(route)
+}
 </script>
 
 <style scoped></style>