From a33ea7eee04cb45fcfdfa8a4d7276c415bb102ac Mon Sep 17 00:00:00 2001
From: fave3722 <372276175@qq.com>
Date: Thu, 8 Sep 2022 17:09:25 +0800
Subject: [PATCH] feat

---
 components.d.ts                               |   6 +-
 src/api/AddressController/index.ts            |  38 ++++
 src/api/TokensController/index.ts             |  39 ++++-
 src/api/TransactionsController/index.ts       |  44 ++++-
 src/components/row-search.vue                 | 163 ++++++++++++++++++
 src/components/search.vue                     |  21 ++-
 src/components/table/constant.ts              |  24 ++-
 src/components/table/dBase/detailsRow.vue     |   9 +-
 src/components/table/dBase/hpRow.vue          |   6 +-
 .../table/dBase/tokensDetailsRow.vue          |   8 +-
 .../table/dBase/transactDetailsRow.vue        |  25 +--
 src/components/table/dBase/transfersRow.vue   |  44 +++++
 src/components/table/desktop/bkTable.vue      |   5 +
 .../table/desktop/tokensDetails.vue           |  58 ++++---
 src/components/table/desktop/tokensTable.vue  |  65 +++++--
 .../table/desktop/transactDetails.vue         |  51 +-----
 .../table/desktop/transactTable.vue           |  45 +++--
 src/components/table/mBase/detailsRow.vue     |   9 +-
 src/components/table/mBase/mobileCard.vue     |   7 +-
 src/components/table/mBase/nowrapRow.vue      |   2 +-
 .../table/mBase/tokensDetailsRow.vue          |  14 +-
 .../table/mBase/transactDetailsRow.vue        |  20 ++-
 src/components/table/mobile/bkTable.vue       |  68 ++++++--
 .../table/mobile/bkTableDetails.vue           |  69 +++++---
 src/components/table/mobile/tokensDetails.vue |  60 +++----
 src/components/table/mobile/tokensTable.vue   |  75 +++++---
 .../table/mobile/transactDetails.vue          |  60 ++-----
 src/components/table/mobile/transactTable.vue |  75 ++++++--
 src/pages/BitcNFt/cards.vue                   |   9 +-
 src/pages/BitcNFt/centerContent.vue           | 138 +++++++++++++--
 src/pages/BitcNFt/holdersRow.vue              |  28 +++
 src/pages/BitcNFt/index.vue                   |   3 +
 src/pages/HomePage/index.vue                  |   3 +-
 src/pages/TableBlock/Block/details.vue        |  47 ++++-
 src/pages/TableBlock/Block/index.vue          |  91 +---------
 src/pages/TableBlock/Tokens/details.vue       | 159 ++++++++++++++++-
 src/pages/TableBlock/Tokens/index.vue         | 103 +----------
 src/pages/TableBlock/Transactions/details.vue | 153 ++++++++++------
 src/pages/TableBlock/Transactions/index.vue   | 126 +-------------
 src/pages/TableBlock/Transactions/logs.vue    |  55 ++++++
 src/pages/TableBlock/index.vue                |  57 +-----
 src/pages/VNFT/centerContent.vue              | 131 ++++++++------
 src/pages/VNFT/mobileRow.vue                  |   4 +-
 src/utils/test.js                             |  48 ++++++
 src/utils/throttle.ts                         |   6 +
 45 files changed, 1441 insertions(+), 830 deletions(-)
 create mode 100644 src/api/AddressController/index.ts
 create mode 100644 src/components/row-search.vue
 create mode 100644 src/components/table/dBase/transfersRow.vue
 create mode 100644 src/pages/BitcNFt/holdersRow.vue
 create mode 100644 src/pages/TableBlock/Transactions/logs.vue
 create mode 100644 src/utils/test.js

diff --git a/components.d.ts b/components.d.ts
index 1364ada..ea66189 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,10 +13,7 @@ declare module '@vue/runtime-core' {
     DetailsRow: typeof import('./src/components/table/dBase/detailsRow.vue')['default']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
@@ -31,8 +28,8 @@ declare module '@vue/runtime-core' {
     NowrapRow: typeof import('./src/components/table/mBase/nowrapRow.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    RowSearch: typeof import('./src/components/row-search.vue')['default']
     Search: typeof import('./src/components/search.vue')['default']
-    Tabs: typeof import('./src/components/tabs.vue')['default']
     THeader: typeof import('./src/components/table/dBase/tHeader.vue')['default']
     TokensCard: typeof import('./src/components/table/mBase/tokensCard.vue')['default']
     TokensDetails: typeof import('./src/components/table/desktop/tokensDetails.vue')['default']
@@ -42,6 +39,7 @@ declare module '@vue/runtime-core' {
     TransactDetails: typeof import('./src/components/table/desktop/transactDetails.vue')['default']
     TransactDetailsRow: typeof import('./src/components/table/dBase/transactDetailsRow.vue')['default']
     TransactTable: typeof import('./src/components/table/desktop/transactTable.vue')['default']
+    TransfersRow: typeof import('./src/components/table/dBase/transfersRow.vue')['default']
     UpperLowerSwitch: typeof import('./src/components/base/UpperLowerSwitch.vue')['default']
   }
 }
diff --git a/src/api/AddressController/index.ts b/src/api/AddressController/index.ts
new file mode 100644
index 0000000..8e34b13
--- /dev/null
+++ b/src/api/AddressController/index.ts
@@ -0,0 +1,38 @@
+import { requestService } from '../requst'
+interface getAddressInfoParams {
+  address: string
+}
+export const getAddressInfo = (params: getAddressInfoParams) => {
+  return requestService({
+    url: '/api/address/getAddressInfo',
+    method: 'get',
+    params,
+  })
+}
+interface getContractAddressParams {
+  contractAddress: string
+}
+export const getContractAddressInfoList = (
+  params: getContractAddressParams
+) => {
+  return requestService({
+    url: '/api/address/getContractAddressInfoList',
+    method: 'get',
+    params,
+  })
+}
+
+interface getContractHoldingParams {
+  pageNum?: number
+  pageSize?: number
+  contractAddress: string
+}
+export const getContractHoldingQuantity = (
+  params: getContractHoldingParams
+) => {
+  return requestService({
+    url: '/api/address/getContractHoldingQuantity',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/api/TokensController/index.ts b/src/api/TokensController/index.ts
index 2e0513e..5af5b66 100644
--- a/src/api/TokensController/index.ts
+++ b/src/api/TokensController/index.ts
@@ -1,8 +1,43 @@
+import { StringChain } from 'lodash'
 import { requestService } from '../requst'
-
-export const getFindTokenList = () => {
+interface TokensListProps {
+  pageNum?: number
+  pageSize?: number
+  search?: string
+}
+export const getFindTokenList = (params: TokensListProps) => {
   return requestService({
     url: '/api/token/findTokenList',
     method: 'get',
+    params,
+  })
+}
+interface FindReceiptByTokenPageProps {
+  pageNum?: number
+  pageSize?: number
+  tokenId?: string
+  contractAddress: string
+}
+export const getFindReceiptByTokenPage = (
+  params: FindReceiptByTokenPageProps
+) => {
+  return requestService({
+    url: '/api/token/findReceiptByTokenPage',
+    method: 'get',
+    params,
+  })
+}
+interface TokenInfoProps {
+  pageNum?: number
+  pageSize?: number
+  tokenId: string
+  contractAddress: string
+}
+///api/token/findTokenInfo
+export const getFindTokenInfo = (params: TokenInfoProps) => {
+  return requestService({
+    url: '/api/token/findTokenInfo',
+    method: 'get',
+    params,
   })
 }
diff --git a/src/api/TransactionsController/index.ts b/src/api/TransactionsController/index.ts
index b99118f..3134f0c 100644
--- a/src/api/TransactionsController/index.ts
+++ b/src/api/TransactionsController/index.ts
@@ -1,12 +1,54 @@
 import { requestService } from '../requst'
 interface TransactionListProps {
+  address?: string
+  isContract?: Number
+  number?: Number
   pageNum?: Number
   pageSize?: Number
 }
+// 分页请求
 export const getFindTransactionListPage = (params: TransactionListProps) => {
   return requestService({
     url: '/api/transactions/findTransactionListPage',
-    params: params,
+    params,
+    method: 'get',
+  })
+}
+interface TransactionsDetailProps {
+  hash: string
+}
+// 请求详情
+export const getFindTransactionsDetail = (params: TransactionsDetailProps) => {
+  return requestService({
+    url: '/api/transactions/findTransactionsDetail',
+    params,
+    method: 'get',
+  })
+}
+interface TransactionsLogsProps {
+  hash: string
+}
+// 请求logs /api/transactions/findTransactionsLogs
+export const getFindTransactionsLogs = (params: TransactionsLogsProps) => {
+  return requestService({
+    url: '/api/transactions/findTransactionsLogs',
+    params,
+    method: 'get',
+  })
+}
+interface FindReceiptByAddressPageProps {
+  pageNum?: Number
+  pageSize?: Number
+  address?: string
+  filterType?: string
+}
+// /api/transactions/findReceiptByAddressPage
+export const getFindReceiptByAddressPage = (
+  params: FindReceiptByAddressPageProps
+) => {
+  return requestService({
+    url: '/api/transactions/findReceiptByAddressPage',
+    params,
     method: 'get',
   })
 }
diff --git a/src/components/row-search.vue b/src/components/row-search.vue
new file mode 100644
index 0000000..54393cc
--- /dev/null
+++ b/src/components/row-search.vue
@@ -0,0 +1,163 @@
+<template>
+  <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]" />
+        <span class="text-[34px] font-semibold text-white ml-[11.5px]"
+          >MetaForce Scan</span
+        >
+      </div>
+      <div class="flex flex-1 flex-col justify-end items-center relative">
+        <div class="flex flex-1 w-full max-w-[554px]">
+          <el-input
+            v-model="input"
+            class="bg-black h-[52px] pl-[33px] text-[12px] rounded-t-[32.5px] overflow-hidden hp-input-wrapper"
+            placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+            :prefix-icon="Search"
+            :input-style="{ background: '#262626' }"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleEnter"
+            @input="handleChangeInput"
+            :class="isActive && data.length > 0 ? '' : 'rounded-b-[32.5px]'"
+          />
+        </div>
+        <div
+          class="w-full max-w-[554px] absolute top-[52px] z-10"
+          :class="isActive && data.length > 0 ? '' : 'hidden'"
+        >
+          <div
+            class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer w-full whitespace-nowrap overflow-hidden text-ellipsis"
+            v-for="(item, index) in data"
+            :key="index + item.hash"
+            :class="
+              index === data.length - 1
+                ? 'rounded-b-[32.5px] border-b-[0px]'
+                : 'border-b-[1px]'
+            "
+            @click="handleClick(item)"
+          >
+            <span class="text-blue-65B5FF">{{ item.hash || '-' }}</span>
+          </div>
+        </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 w-full h-[40px] justify-center items-center mt-[32px] relative"
+      >
+        <div class="flex flex-1 px-[20px]">
+          <el-input
+            v-model="input"
+            class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-t-[20px] overflow-hidden hp-input-wrapper"
+            placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+            :prefix-icon="Search"
+            :input-style="{ background: '#262626' }"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @change="handleEnter"
+            @input="handleChangeInput"
+            :class="isActive && data.length > 0 ? '' : 'rounded-b-[20px]'"
+          />
+        </div>
+        <div
+          class="w-full max-full-is-active absolute top-[40px] z-10"
+          :class="isActive && data.length > 0 ? '' : 'hidden'"
+        >
+          <div
+            class="bg-black-262626 px-[20px] py-[15px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer w-full whitespace-nowrap overflow-hidden text-ellipsis"
+            v-for="(item, index) in data"
+            :key="index + item.hash"
+            :class="
+              index === data.length - 1
+                ? 'rounded-b-[20px] border-b-[0px]'
+                : 'border-b-[1px]'
+            "
+            @click="handleClick(item)"
+          >
+            <span class="text-blue-65B5FF">{{ item.hash || '-' }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import { getSearch } from '@src/api/BlockController'
+import { Throttle } from '@src/utils/throttle'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import * as iconList from '../assets/Icons/index'
+
+const router = useRouter()
+
+let input = ref<string>('')
+let isActive = ref(false)
+const data = ref<any>([])
+
+const handleFocus = () => (isActive.value = true)
+const handleBlur = () =>
+  setTimeout(() => {
+    isActive.value = false
+  }, 150)
+// 按下了enter / 失去焦点
+const handleEnter = (e: string | number) => {
+  // console.log(e)
+}
+// 处理点击
+const handleClick = (item: any) => {
+  console.log('click', item)
+  // 根据type判断需要跳转到哪个页面
+  let route = ''
+  switch (item?.type) {
+    case 1: {
+      route = 'blocks'
+      break
+    }
+    case 2: {
+      route = 'tx'
+      break
+    }
+    case 3: {
+      route = 'tokens'
+      break
+    }
+  }
+  // 跳转
+  router.push(`/${route}/${item.hash}`)
+}
+// 修改input
+const handleChangeInput = () => {
+  Throttle(searchRequest, 1000)()
+}
+// 请求的函数
+const searchRequest = async () => {
+  try {
+    const res = await getSearch(input.value)
+    data.value = res.data
+    console.log(data)
+  } catch (error) {}
+}
+</script>
+
+<style scoped>
+.max-full-is-active {
+  max-width: calc(100% - 40px);
+}
+</style>
diff --git a/src/components/search.vue b/src/components/search.vue
index 19a4031..a9c6df8 100644
--- a/src/components/search.vue
+++ b/src/components/search.vue
@@ -35,7 +35,7 @@
       :class="isActive && data.length > 0 ? '' : 'hidden'"
     >
       <div
-        class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer"
+        class="bg-black-262626 px-[32px] py-[20px] hover:bg-gray-323232 border-t-[1px] border-black-3B3B3C cursor-pointer break-all"
         v-for="(item, index) in data"
         :key="index + item?.hash"
         :class="
@@ -77,7 +77,24 @@ const handleEnter = (e: string | number) => {
 // 点击了
 const handleClick = (item: any) => {
   console.log('click', item)
-  router.push(`/blocks/${item.hash}`)
+  // 根据type判断需要跳转到哪个页面
+  let route = ''
+  switch (item?.type) {
+    case 1: {
+      route = 'blocks'
+      break
+    }
+    case 2: {
+      route = 'tx'
+      break
+    }
+    case 3: {
+      route = 'tokens'
+      break
+    }
+  }
+  // 跳转
+  router.push(`/${route}/${item.hash}`)
 }
 // 修改input
 const handleChangeInput = () => {
diff --git a/src/components/table/constant.ts b/src/components/table/constant.ts
index 944b627..b14d824 100644
--- a/src/components/table/constant.ts
+++ b/src/components/table/constant.ts
@@ -121,17 +121,17 @@ export const transactDetailsCollocate = {
     'Gas Limit',
   ], // 表头
   sequence: [
-    'transactionHash',
+    'hash',
     'result',
     'time',
     'from',
-    'interactedWithTo',
-    'tokensTransferred',
-    'value',
-    'transactionFee',
+    'to',
+    'receiptList',
+    'values',
+    'fee',
     'gasPrice',
-    'transactionType',
-    'gasLimit',
+    'type',
+    'gas',
   ], // 对应数据的变量名称
   colorSequence: [
     '',
@@ -165,14 +165,20 @@ export const transactDetailsCollocate = {
 // tokensTable 表配置
 export const tokensTableCollocate = {
   labels: ['serial number', 'Token', 'Adress', 'Total Supply', 'Holders Count'], // 表头
-  sequence: ['serialNumber', 'token', 'adress', 'totalSupply', 'holdersCount'], // 对应数据的变量名称
+  sequence: [
+    'serialNumber',
+    'symbol',
+    'contractAddress',
+    'totalSupply',
+    'addressesCount',
+  ], // 对应数据的变量名称
   // 数据颜色
   colorSequence: ['', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
 }
 // tokensTable 表配置
 export const tokensMobileCollocate = {
   labels: ['Token', 'Adress', 'Total Supply', 'Holders Count'], // 表头
-  sequence: ['token', 'adress', 'totalSupply', 'holdersCount'], // 对应数据的变量名称
+  sequence: ['symbol', 'contractAddress', 'totalSupply', 'addressesCount'], // 对应数据的变量名称
   // 数据颜色
   colorSequence: ['text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
 }
diff --git a/src/components/table/dBase/detailsRow.vue b/src/components/table/dBase/detailsRow.vue
index 9957b33..01658e6 100644
--- a/src/components/table/dBase/detailsRow.vue
+++ b/src/components/table/dBase/detailsRow.vue
@@ -9,7 +9,10 @@
     <div
       class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px]"
     >
-      <p :class="valueColor || 'text-white'" class="text-[15px] font-normal">
+      <p
+        :class="valueColor || 'text-white'"
+        class="text-[15px] font-normal break-all"
+      >
         {{ value }}
       </p>
       <Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
@@ -24,8 +27,8 @@
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
 const props = defineProps({
-  title: String,
-  value: String as any,
+  title: [String, Number],
+  value: [String, Number] as any,
   valueColor: String,
   isCopy: Boolean,
   isLast: Boolean,
diff --git a/src/components/table/dBase/hpRow.vue b/src/components/table/dBase/hpRow.vue
index 9e555bf..3f98429 100644
--- a/src/components/table/dBase/hpRow.vue
+++ b/src/components/table/dBase/hpRow.vue
@@ -8,7 +8,7 @@
       v-for="(item, index) in sequence"
       :key="index"
     >
-      <div v-if="isTooltips.includes(sequence?.[index])">
+      <div v-if="isTooltips.includes(sequence[index])">
         <el-tooltip effect="dark" :content="tooltipsData[item]" placement="top">
           <span
             :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
@@ -19,7 +19,7 @@
       </div>
       <div v-else>
         <span
-          :v-if="!isTooltips.includes(sequence?.[index])"
+          :v-if="!isTooltips.includes(sequence[index])"
           :class="[item === 'time' ? 'text-gray-7D7D7E' : 'text-white']"
           class="text-white text-[14px] font-medium"
           >{{ values?.[item] }}
@@ -39,7 +39,7 @@ import { defineProps, ref, watchEffect } from 'vue'
 import type { PropType } from 'vue'
 import TableTypes from '../table'
 const props = defineProps({
-  sequence: Array as PropType<TableTypes.tRow['sequence']>,
+  sequence: Array as any,
   values: Object as PropType<TableTypes.tRow['values']>,
   last: Boolean,
 })
diff --git a/src/components/table/dBase/tokensDetailsRow.vue b/src/components/table/dBase/tokensDetailsRow.vue
index 1b57302..a6785ca 100644
--- a/src/components/table/dBase/tokensDetailsRow.vue
+++ b/src/components/table/dBase/tokensDetailsRow.vue
@@ -12,8 +12,8 @@
     >
       <el-select v-model="active" placeholder="Select">
         <el-option
-          v-for="(item, index) in [1, 2, 3, 4]"
-          :key="index"
+          v-for="(item, index) in value"
+          :key="index + item"
           :label="item + 'token'"
           :value="item"
           class="text-white"
@@ -48,7 +48,7 @@ import Icons from '@src/components/icons/index.vue'
 import { onMounted, ref } from 'vue'
 const props = defineProps({
   title: String,
-  value: [String, Array] as any,
+  value: [Number, String, Array] as any,
   valueColor: String,
   isCopy: Boolean,
   isLast: Boolean,
@@ -62,7 +62,7 @@ onMounted(() => {
 })
 
 const list = ref<string | number[]>([])
-const active = ref('1token')
+const active = ref('')
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/dBase/transactDetailsRow.vue b/src/components/table/dBase/transactDetailsRow.vue
index 84d8c0e..4062596 100644
--- a/src/components/table/dBase/transactDetailsRow.vue
+++ b/src/components/table/dBase/transactDetailsRow.vue
@@ -59,7 +59,8 @@
           class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px]"
         >
           <p class="text-[15px] font-normal text-blue-65B5FF">
-            {{ value[item] }}
+            {{ listData[item] }}
+            <span>{{ index === list.length - 1 ? listData.symbol : '' }}</span>
           </p>
           <Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
         </div>
@@ -86,7 +87,7 @@
 
 <script setup lang="ts">
 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: [String, Object] as any,
@@ -94,18 +95,20 @@ const props = defineProps({
   isCopy: Boolean,
   isLast: Boolean,
 })
-
-onMounted(() => {
-  console.log(props.title)
-  if (props.title === 'Tokens Transferred') {
-    console.log(1)
-  }
+const list = ref<string[]>([])
+const listData = ref<any>({})
+watchEffect(() => {
   if (typeof props.value === 'object') {
-    list.value = Object.keys(props.value)
+    list.value = ['Form', 'To', 'For']
+    // 赋值
+    listData.value = {
+      Form: props.value[0]?.from,
+      To: props.value[0]?.to,
+      For: props.value[0]?.tokenId,
+      symbol: props.value[0]?.symbol,
+    }
   }
 })
-
-const list = ref<string[]>([])
 </script>
 
 <style scoped></style>
diff --git a/src/components/table/dBase/transfersRow.vue b/src/components/table/dBase/transfersRow.vue
new file mode 100644
index 0000000..b7dbe80
--- /dev/null
+++ b/src/components/table/dBase/transfersRow.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="flex flex-1 flex-row justify-between items-center py-[16px] pl-[18px] border-b border-b-black-3B3B3C"
+  >
+    <div>
+      <p class="text-white text-[16px] font-medium">{{ title }}</p>
+      <p class="text-gray-BBB text-[14px] font-normal mt-[12px]">
+        {{ value1 }}
+      </p>
+      <div
+        class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]"
+      >
+        <p class="mr-[10px]">{{ value2 }}</p>
+        <Icons url="chevron_right" :size="16" />
+        <p class="ml-[10px]">{{ value3 }}</p>
+      </div>
+    </div>
+    <div
+      class="flex flex-row items-center w-[87px] rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D"
+      :class="state === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
+    >
+      <Icons
+        :url="state === 'Success' ? 'check_circle' : 'cancel'"
+        :size="12"
+      />
+      <p class="text-[12px] font-normal align-middle text-white ml-[2px]">
+        {{ state }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icons from '@src/components/icons/index.vue'
+defineProps({
+  title: [String, Number],
+  value1: String,
+  value2: String,
+  value3: String,
+  state: String,
+})
+</script>
+
+<style scoped></style>
diff --git a/src/components/table/desktop/bkTable.vue b/src/components/table/desktop/bkTable.vue
index 4b1c395..c6aca88 100644
--- a/src/components/table/desktop/bkTable.vue
+++ b/src/components/table/desktop/bkTable.vue
@@ -79,12 +79,17 @@ const initBlock = async (page: number) => {
   currentData.value = res.data.rows.map((item: any) => ({
     ...item,
     timestamp: timeConvert(item?.timestamp),
+    // number: item?.number?.toString(),
   }))
   // 骨架屏隐藏
   loading.value = false
 }
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
+  // 如果屏幕尺寸小于1440px 则不执行
+  if (window.screen.width < 1440) {
+    return
+  }
   loading.value = true
   initBlock(currentPage.value)
 })
diff --git a/src/components/table/desktop/tokensDetails.vue b/src/components/table/desktop/tokensDetails.vue
index 36854c4..efaf843 100644
--- a/src/components/table/desktop/tokensDetails.vue
+++ b/src/components/table/desktop/tokensDetails.vue
@@ -5,7 +5,7 @@
     <div
       class="flex flex-row justify-between pt-[22px] pb-[32px] border-b-[1px] border-black-3B3B3C"
     >
-      <p class="underline text-blue-65B5FF">{{ data?.tokens }}</p>
+      <p class="underline text-blue-65B5FF">{{ currentData?.address }}</p>
       <div class="flex flex-row">
         <Icons :url="'copyAddress'" :size="32" />
         <div @click="open">
@@ -15,9 +15,9 @@
     </div>
     <tokens-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
-      :value="data[invariable.sequence[index]]"
+      :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
       :is-last="index === invariable.labels.length - 1"
     />
@@ -25,39 +25,41 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import Qrcode from 'qrcode'
 import tokensDetailsRow from '../dBase/tokensDetailsRow.vue'
 import { tokensDetailsCollocate } from '../constant'
 import Icons from '@src/components/icons/index.vue'
-
-const props = defineProps({
-  id: Array as any,
-})
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      balance: '123321',
-      tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
-      transactions: '123321',
-      transfers: '123321',
-      gasUsed: '123321',
-      lastBalanceUpdate: '123321',
-    }
-  }, 0)
-})
-const data = ref<any>({
-  balance: '123321',
-  tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
-  transactions: '123321',
-  transfers: '123321',
-  gasUsed: '123321',
-  lastBalanceUpdate: '123321',
-})
+import { useRoute } from 'vue-router'
+import { getAddressInfo } from '@src/api/AddressController'
 const invariable = {
   ...tokensDetailsCollocate,
 }
+const route = useRoute()
+const currentData = ref<any>()
+
+// 通过address请求详情数据
+const requestDetails = async (address: string) => {
+  const params = {
+    address,
+  }
+  const res = await getAddressInfo(params)
+  const { data } = res
+  currentData.value = {
+    ...data,
+    // tokens: data.tokens,
+    transactions: data?.transactions + ' Transition',
+    transfers: data?.transfers + ' Transfers',
+  }
+  console.log(res)
+}
+
+watchEffect(() => {
+  // 获取address
+  let address = route.path.split('/')?.[2]
+  requestDetails(address)
+})
 
 let open = async () => {
   const res = await Qrcode.toDataURL('https://baidu.com' as string)
diff --git a/src/components/table/desktop/tokensTable.vue b/src/components/table/desktop/tokensTable.vue
index d3a3227..e2204ed 100644
--- a/src/components/table/desktop/tokensTable.vue
+++ b/src/components/table/desktop/tokensTable.vue
@@ -8,6 +8,7 @@
           placeholder="Token name or symbol"
           :prefix-icon="Search"
           :input-style="{ background: '#262626' }"
+          @input="handleChangeInput"
         />
       </div>
     </div>
@@ -19,8 +20,8 @@
     />
     <div
       v-for="(item, index) in currentData"
-      :key="item?.token + index"
-      @click="routerLink(item.token)"
+      :key="item?.txnContractAddress + index"
+      @click="routerLink(item.txnContractAddress)"
     >
       <!-- :values="{ ...item, serialNumber: index + 1 }" -->
       <bk-row
@@ -38,7 +39,6 @@
         layout="prev, pager, next, jumper"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
       <span class="text-white text-[14px] font-normal">Page</span>
     </div>
@@ -46,17 +46,15 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { defineProps, reactive, ref, watchEffect } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import THeader from '../dBase/tHeader.vue'
 import BkRow from '../dBase/bkRow.vue'
-import { dimensionalUpgrade } from '../tool'
 import { tokensTableCollocate } from '../constant'
 import { useRouter } from 'vue-router'
+import { getFindTokenList } from '@src/api/TokensController'
+import { middleDecimal } from '@src/utils/string'
 
-const props = defineProps({
-  data: Array as any,
-})
 const invariable = {
   ...tokensTableCollocate,
   pageSize: 10, // 每一页的数量
@@ -65,21 +63,52 @@ const invariable = {
 const router = useRouter()
 
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0,
 })
 
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
-let input = ref('')
-
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+let currentData = ref() // 当前页的数据
+let input = ref('') // 搜索框内容
+let loading = ref(true) // 骨架屏加载
+const handleChangeInput = () => {}
+// 请求数据
+const initBlock = async (page: number, search?: string) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+    search: search || '',
+  }
+  const res = await getFindTokenList(params)
+  console.log(res)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any, index: number) => ({
+    ...item,
+    txnContractAddress: item.contractAddress,
+    contractAddress: middleDecimal(item.contractAddress),
+    serialNumber: index + 1,
+    // 如果要给所有的排序
+    // serialNumber: (currentPage.value - 1) * 10 + index + 1,
+  }))
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  // 如果屏幕尺寸小于1440px 则不执行
+  if (window.screen.width < 1440) {
+    return
+  }
+  loading.value = true
+  initBlock(currentPage.value, input.value)
+})
 // 路由跳转
-const routerLink = (id: string | number) => router.push(`/tokens/${id}`)
+const routerLink = (id: string | number) => {
+  console.log(id)
+  id && router.push(`/tokens/${id}`)
+}
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/desktop/transactDetails.vue b/src/components/table/desktop/transactDetails.vue
index 15de096..450f88f 100644
--- a/src/components/table/desktop/transactDetails.vue
+++ b/src/components/table/desktop/transactDetails.vue
@@ -6,64 +6,29 @@
       v-for="(item, index) in invariable.labels"
       :key="index + item"
       :title="item"
-      :value="data[invariable.sequence[index]]"
+      :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
       :is-copy="invariable.isCopys[index]"
     />
-    <upper-lower-switch :current="'Transaction Details'" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
+import { defineProps, ref, watchEffect } from 'vue'
 import transactDetailsRow from '../dBase/transactDetailsRow.vue'
-import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
 import { transactDetailsCollocate } from '../constant'
 
 const props = defineProps({
-  id: Array as any,
-})
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      transactionHash: '1323',
-      result: '1323',
-      time: '1323',
-      from: '1323',
-      interactedWithTo: '1323',
-      tokensTransferred: {
-        from: '123',
-        to: '234',
-        for: '345',
-      },
-      value: '1323',
-      transactionFee: '1323',
-      gasPrice: '1323',
-      transactionType: '1323',
-      gasLimit: '1323',
-    }
-  }, 0)
-})
-const data = ref<any>({
-  transactionHash: '1323',
-  result: '1323',
-  time: '1323',
-  from: '1323',
-  interactedWithTo: '1323',
-  tokensTransferred: {
-    from: '123',
-    to: '234',
-    for: '345',
-  },
-  value: '1323',
-  transactionFee: '1323',
-  gasPrice: '1323',
-  transactionType: '1323',
-  gasLimit: '1323',
+  data: Object as any,
 })
 const invariable = {
   ...transactDetailsCollocate,
 }
+const currentData = ref()
+watchEffect(() => {
+  currentData.value = props.data
+  console.log(currentData.value)
+})
 </script>
 
 <style lang="scss"></style>
diff --git a/src/components/table/desktop/transactTable.vue b/src/components/table/desktop/transactTable.vue
index 7978d23..4665456 100644
--- a/src/components/table/desktop/transactTable.vue
+++ b/src/components/table/desktop/transactTable.vue
@@ -1,21 +1,34 @@
 <template>
-  <div class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]">
+  <div
+    class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px] bk-table"
+  >
     <t-header
       :list="invariable.labels"
       bg-color="bg-black-006"
       textColor="text-white"
     />
-    <div
-      v-for="(item, index) in currentData"
-      :key="item?.hash + index"
-      @click="routerLink(item.block)"
-    >
-      <bk-row
-        :sequence="invariable.sequence"
-        :values="item"
-        :colorSequence="invariable.colorSequence"
-      />
-    </div>
+    <el-skeleton class="w-full px-[34px]" :loading="loading" animated>
+      <template #template>
+        <el-skeleton-item
+          variant="p"
+          class="my-[24px]"
+          v-for="item in invariable.pageSize"
+        />
+      </template>
+      <template #default>
+        <div
+          v-for="(item, index) in currentData"
+          :key="item?.hash + index"
+          @click="routerLink(item?.txnHash)"
+        >
+          <bk-row
+            :sequence="invariable.sequence"
+            :values="item"
+            :colorSequence="invariable.colorSequence"
+          />
+        </div>
+      </template>
+    </el-skeleton>
 
     <div
       class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
@@ -67,6 +80,7 @@ const initBlock = async (page: number) => {
   currentData.value = res.data.rows.map((item: any) => ({
     ...item,
     hash: middleDecimal(item?.hash),
+    txnHash: item.hash,
     from: middleDecimal(item?.from),
     to: middleDecimal(item?.to),
     gasPrice: middleDecimal(item?.gasPrice),
@@ -75,17 +89,20 @@ const initBlock = async (page: number) => {
     // middleDecimal
     timestamp: timeConvert(item?.timestamp),
   }))
-  console.log(currentData.value)
   // 骨架屏隐藏
   loading.value = false
 }
 // 监听分页更新 -> 请求数据
 watchEffect(() => {
+  // 如果屏幕尺寸小于1440px 则不执行
+  if (window.screen.width < 1440) {
+    return
+  }
   loading.value = true
   initBlock(currentPage.value)
 })
 // 路由跳转
-const routerLink = (id: string | number) => router.push(`/tx/${id}`)
+const routerLink = (id: string | number) => id && router.push(`/tx/${id}`)
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/mBase/detailsRow.vue b/src/components/table/mBase/detailsRow.vue
index 85d3260..b78b1b6 100644
--- a/src/components/table/mBase/detailsRow.vue
+++ b/src/components/table/mBase/detailsRow.vue
@@ -5,7 +5,10 @@
       <p class="ml-[7px] text-gray-BBB text-[14px] font-normal">{{ title }}</p>
     </div>
     <div class="flex flex-1 flex-row justify-start items-center">
-      <p :class="valueColor || 'text-white'" class="text-[15px] font-normal">
+      <p
+        :class="valueColor || 'text-white'"
+        class="text-[15px] font-normal break-all"
+      >
         <span>{{ value }}</span
         ><Icons v-if="isCopy" url="filter_none" :size="24" class="ml-[10px]" />
       </p>
@@ -17,8 +20,8 @@
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
 const props = defineProps({
-  title: String,
-  value: String,
+  title: [String, Number],
+  value: [String, Number],
   valueColor: String,
   isCopy: Boolean,
 })
diff --git a/src/components/table/mBase/mobileCard.vue b/src/components/table/mBase/mobileCard.vue
index d39e634..b64191f 100644
--- a/src/components/table/mBase/mobileCard.vue
+++ b/src/components/table/mBase/mobileCard.vue
@@ -7,7 +7,7 @@
         class="flex flex-half min-w-6/12"
         v-for="(item, index) in invariable.labels"
         :key="index"
-        @click="routerLink(cardData.block)"
+        @click="cardData.link"
       >
         <nowrap-row
           :title="item"
@@ -24,13 +24,10 @@ import { defineProps } from 'vue'
 import { useRouter } from 'vue-router'
 import { bkTableCollocate } from '../constant'
 import nowrapRow from './nowrapRow.vue'
-const props = defineProps({
+defineProps({
   cardData: Object as any,
 })
 const invariable = { ...bkTableCollocate }
-const router = useRouter()
-// 路由跳转
-const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/table/mBase/nowrapRow.vue b/src/components/table/mBase/nowrapRow.vue
index 9860e04..acbb40d 100644
--- a/src/components/table/mBase/nowrapRow.vue
+++ b/src/components/table/mBase/nowrapRow.vue
@@ -32,7 +32,7 @@ import Icons from '@src/components/icons/index.vue'
 
 const props = defineProps({
   title: String,
-  value: String,
+  value: [String, Number],
   valueColor: String,
   isWrap: Boolean,
   isSuccess: Boolean,
diff --git a/src/components/table/mBase/tokensDetailsRow.vue b/src/components/table/mBase/tokensDetailsRow.vue
index a51d6eb..f553de4 100644
--- a/src/components/table/mBase/tokensDetailsRow.vue
+++ b/src/components/table/mBase/tokensDetailsRow.vue
@@ -9,23 +9,22 @@
         {{ title }}
       </p>
     </div>
-    <div
+    <!-- <div
       class="flex flex-1 flex-row justify-start items-center mt-[15px] tokens-select"
       v-if="title === 'Tokens'"
     >
       <el-select v-model="active" placeholder="Select">
         <el-option
-          v-for="(item, index) in [1, 2, 3, 4]"
+          v-for="(item, index) in value"
           :key="index"
           :label="item + 'token'"
           :value="item"
           class="text-white"
         />
       </el-select>
-    </div>
+    </div> -->
     <div
       class="flex flex-1 flex-row justify-start items-center mt-[15px] text-white"
-      v-else
     >
       <p
         :class="
@@ -33,7 +32,7 @@
             ? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
             : ''
         "
-        class="text-[15px] font-normal leading-[24px]"
+        class="text-[15px] font-normal leading-[24px] break-all"
       >
         {{ value }}
       </p>
@@ -50,8 +49,8 @@ import { ElSelect, ElOption } from 'element-plus'
 import Icons from '@src/components/icons/index.vue'
 import { onMounted, ref } from 'vue'
 const props = defineProps({
-  title: String,
-  value: [String, Array] as any,
+  title: [String, Number] as any,
+  value: [Number, String, Array] as any,
   valueColor: String,
   isCopy: Boolean,
   isLast: Boolean,
@@ -65,7 +64,6 @@ onMounted(() => {
 })
 
 const list = ref<string | number[]>([])
-const active = ref('1token')
 </script>
 
 <style lang="scss">
diff --git a/src/components/table/mBase/transactDetailsRow.vue b/src/components/table/mBase/transactDetailsRow.vue
index 0d41852..0f1269a 100644
--- a/src/components/table/mBase/transactDetailsRow.vue
+++ b/src/components/table/mBase/transactDetailsRow.vue
@@ -22,7 +22,7 @@
             </div>
             <p class="text-[15px] font-normal text-blue-65B5FF break-all">
               <span>
-                {{ value[item] }}
+                {{ listData[item] }}
                 <Icons
                   v-if="isCopy"
                   url="filter_none"
@@ -63,17 +63,27 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
-import { onMounted, ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 const props = defineProps({
   title: String,
   value: [String, Object] as any,
   valueColor: String,
   isCopy: Boolean,
 })
-onMounted(() => {
-  list.value = typeof props.value === 'object' ? Object.keys(props.value) : []
-})
 const list = ref<string[]>([])
+const listData = ref<any>({})
+watchEffect(() => {
+  if (typeof props.value === 'object') {
+    list.value = ['Form', 'To', 'For']
+    // 赋值
+    listData.value = {
+      Form: props.value[0]?.from,
+      To: props.value[0]?.to,
+      For: props.value[0]?.tokenId,
+      symbol: props.value[0]?.symbol,
+    }
+  }
+})
 </script>
 
 <style scoped></style>
diff --git a/src/components/table/mobile/bkTable.vue b/src/components/table/mobile/bkTable.vue
index 486cb6a..4b4c0f8 100644
--- a/src/components/table/mobile/bkTable.vue
+++ b/src/components/table/mobile/bkTable.vue
@@ -4,49 +4,80 @@
       v-for="(item, index) in currentData"
       :key="index"
       :card-data="item"
+      @click="routerLink(item?.hash)"
     />
+    <!--       :link="routerLink(item?.hash)" -->
     <div
-      class="bk-pagination flex flex-row items-center justify-center pt-[32px]"
+      class="bk-pagination-m flex flex-row items-center justify-center pt-[32px]"
     >
       <el-pagination
+        small
+        :pager-count="5"
         :page-size="invariable.pageSize"
         layout="prev, pager, next"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 import MobileCard from '@src/components/table/mBase/mobileCard.vue'
-import { dimensionalUpgrade } from '../tool'
+import { getfindBlockList } from '@src/api/BlockController'
+import { timeConvert } from '@src/utils/string'
+import { bkTableCollocate } from '../constant'
+import { useRouter } from 'vue-router'
 
-const props = defineProps({
-  data: Array as any,
-})
 const invariable = {
+  ...bkTableCollocate,
   pageSize: 5, // 每一页的数量
 }
+
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0, // 总页数
 })
 
+const router = useRouter()
+
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
+let currentData = ref() // 当前页的数据
+let loading = ref(true) // 骨架屏加载
 
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+// 请求数据
+const initBlock = async (page: number) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+  }
+  const res = await getfindBlockList(params)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any) => ({
+    ...item,
+    timestamp: timeConvert(item?.timestamp),
+  }))
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  // 如果屏幕尺寸大于1440px 则不执行
+  if (window.screen.width > 1440) {
+    return
+  }
+  loading.value = true
+  initBlock(currentPage.value)
+})
+// 路由跳转
+const routerLink = (id: string | number) => router.push(`/blocks/${id}`)
 </script>
 
 <style lang="scss">
-.bk-pagination {
+.bk-pagination-m {
   .el-pagination {
     .btn-prev,
     .btn-next {
@@ -54,13 +85,14 @@ const handleCurrentChange = (page: number) => {
     }
     .el-pager {
       .number,
+      .btn-quickprev,
       .btn-quicknext {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 30px;
-        width: 30px;
-        margin: 0px 8px;
+        height: 24px;
+        width: auto;
+        margin: 0px 4px;
         box-sizing: border-box;
         background: #19191a;
         border: 1px solid #ffffff;
diff --git a/src/components/table/mobile/bkTableDetails.vue b/src/components/table/mobile/bkTableDetails.vue
index 6782476..f57675d 100644
--- a/src/components/table/mobile/bkTableDetails.vue
+++ b/src/components/table/mobile/bkTableDetails.vue
@@ -3,9 +3,11 @@
     class="rounded-[10px] bg-black-19191A rounded-b-[10px] desktop:px-[34px] mobile:px-[20px] pt-[12px] desktop:pb-[28px]"
   >
     <upper-lower-switch
-      :current="'Block'"
+      :current="`Block${blockId}`"
       :class="'mt-[0px] justify-center'"
       :space-class="''"
+      :prev="handlePrev"
+      :next="handleNext"
     />
     <div
       v-for="(item, index) in invariable.labels"
@@ -14,7 +16,7 @@
     >
       <details-row
         :title="item"
-        :value="data[invariable.sequence[index]]"
+        :value="currentData[invariable.sequence[index]]"
         :value-color="invariable.colorSequence[index]"
         :is-copy="invariable.isCopys[index]"
         :is-last="index === invariable.labels.length - 1 ? true : false"
@@ -24,33 +26,58 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
+import { defineProps, ref, watchEffect } from 'vue'
 import DetailsRow from '../dBase/detailsRow.vue'
 import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
 import { detailsCollocate } from '../constant'
+import { getBlock } from '@src/api/BlockController'
 
 const props = defineProps({
-  id: Array as any,
+  data: Object,
 })
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      blockHeight: '12333',
-      timestamp: '12333',
-      transactions: '12333',
-      miner: '12333',
-      size: '12333',
-      hash: '12333',
-      parentHash: '12333',
-      difficulty: '12333',
-      totalDifficulty: '12333',
-      gasUsed: '12333',
-      gasLimit: '12333',
-      nonce: '12333',
+
+const blockId = ref() // 当前id
+const currentData = ref() // 当前data
+
+// 点击了上一个
+const handlePrev = () => {
+  if (!blockId) {
+    return
+  }
+  // 请求上一页的数据
+  requestByBlockId(Number(blockId.value) - 1)
+}
+// 点击了下一个
+const handleNext = () => {
+  if (!blockId) {
+    return
+  }
+  // 请求上一页的数据
+  requestByBlockId(Number(blockId.value) + 1)
+}
+// 请求函数
+const requestByBlockId = async (id: number) => {
+  const params = {
+    number: id,
+  }
+  try {
+    const res = await getBlock(params)
+    if (res.data) {
+      // 当请求回来的数据不为空才更新data
+      currentData.value = res.data
     }
-  }, 1000)
+  } catch (error) {}
+}
+
+// 当 props.data 改变
+watchEffect(() => {
+  currentData.value = props.data
 })
-const data = ref<any>({})
+// 更新标识
+watchEffect(() => {
+  blockId.value = currentData.value?.number
+})
+
 const invariable = {
   ...detailsCollocate,
 }
diff --git a/src/components/table/mobile/tokensDetails.vue b/src/components/table/mobile/tokensDetails.vue
index f847a3d..19313e7 100644
--- a/src/components/table/mobile/tokensDetails.vue
+++ b/src/components/table/mobile/tokensDetails.vue
@@ -2,11 +2,10 @@
   <div
     class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[20px] pt-[12px] pb-[18px]"
   >
-    <!-- <upper-lower-switch :current="'Transaction Details'" /> -->
     <div
       class="flex flex-col justify-between pt-[20px] pb-[18px] border-b-[1px] border-black-3B3B3C break-all"
     >
-      <p class="underline text-blue-65B5FF">{{ data?.tokens }}</p>
+      <p class="underline text-blue-65B5FF">{{ currentData?.address }}</p>
       <div class="flex flex-row justify-end mt-[12px]">
         <Icons :url="'copyAddress'" :size="32" />
         <div @click="open">
@@ -16,48 +15,51 @@
     </div>
     <tokens-details-row
       v-for="(item, index) in invariable.labels"
-      :key="index + item"
+      :key="index"
       :title="item"
-      :value="data[invariable.sequence[index]]"
+      :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watchEffect } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import Qrcode from 'qrcode'
 import tokensDetailsRow from '../mBase/tokensDetailsRow.vue'
 import { tokensDetailsCollocate } from '../constant'
 import Icons from '@src/components/icons/index.vue'
-
-const props = defineProps({
-  id: Array as any,
-})
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      balance: '123321',
-      tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
-      transactions: '123321',
-      transfers: '123321',
-      gasUsed: '123321',
-      lastBalanceUpdate: '123321',
-    }
-  }, 0)
-})
-const data = ref<any>({
-  balance: '123321',
-  tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
-  transactions: '123321',
-  transfers: '123321',
-  gasUsed: '123321',
-  lastBalanceUpdate: '123321',
-})
+import { getAddressInfo } from '@src/api/AddressController'
+import { useRoute } from 'vue-router'
 const invariable = {
   ...tokensDetailsCollocate,
 }
+const route = useRoute()
+const currentData = ref<any>()
+
+// 通过address请求详情数据
+const requestDetails = async (address: string) => {
+  const params = {
+    address,
+  }
+  const res = await getAddressInfo(params)
+  const { data } = res
+  currentData.value = {
+    ...data,
+    // tokens: data.tokens,
+    transactions: data?.transactions + ' Transition',
+    transfers: data?.transfers + ' Transfers',
+  }
+  console.log(res)
+}
+
+watchEffect(() => {
+  // 获取address
+  let address = route.path.split('/')?.[2]
+  requestDetails(address)
+})
+
 let open = async () => {
   const res = await Qrcode.toDataURL('https://baidu.com' as string)
   // 二维码生成之后
diff --git a/src/components/table/mobile/tokensTable.vue b/src/components/table/mobile/tokensTable.vue
index c9c314d..cf8c0bf 100644
--- a/src/components/table/mobile/tokensTable.vue
+++ b/src/components/table/mobile/tokensTable.vue
@@ -13,51 +13,83 @@
       v-for="(item, index) in currentData"
       :key="index"
       :card-data="item"
+      @click="routerLink(item.txnContractAddress)"
     />
     <div
-      class="bk-pagination flex flex-row items-center justify-center pt-[32px]"
+      class="bk-pagination-m flex flex-row items-center justify-center pt-[32px]"
     >
       <el-pagination
+        small
+        :pager-count="5"
         :page-size="invariable.pageSize"
         layout="prev, pager, next"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { reactive, ref, watchEffect } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import TokensCard from '../mBase/tokensCard.vue'
-import { dimensionalUpgrade } from '../tool'
-
-const props = defineProps({
-  data: Array as any,
-})
+import { getFindTokenList } from '@src/api/TokensController'
+import { middleDecimal } from '@src/utils/string'
+import { tokensTableCollocate } from '../constant'
+import { useRouter } from 'vue-router'
 const invariable = {
+  ...tokensTableCollocate,
   pageSize: 5, // 每一页的数量
 }
+const router = useRouter()
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0,
 })
 
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
-let input = ref('')
-
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+let currentData = ref() // 当前页的数据
+let input = ref('') // 搜索框内容
+let loading = ref(true) // 骨架屏加载
+// 请求数据
+const initBlock = async (page: number, search?: string) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+    search: search || '',
+  }
+  const res = await getFindTokenList(params)
+  console.log('123', res)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any, index: number) => ({
+    ...item,
+    txnContractAddress: item.contractAddress,
+    contractAddress: middleDecimal(item.contractAddress),
+    // serialNumber: index + 1,
+    // 如果要给所有的排序
+    // serialNumber: (currentPage.value - 1) * 10 + index + 1,
+  }))
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  // 如果屏幕尺寸大于1440px 则不执行
+  if (window.screen.width > 1440) {
+    return
+  }
+  loading.value = true
+  initBlock(currentPage.value, input.value)
+})
+// 路由跳转
+const routerLink = (id: string | number) => router.push(`/tokens/${id}`)
 </script>
 
 <style lang="scss">
-.bk-pagination {
+.bk-pagination-m {
   .el-pagination {
     .btn-prev,
     .btn-next {
@@ -65,13 +97,14 @@ const handleCurrentChange = (page: number) => {
     }
     .el-pager {
       .number,
+      .btn-quickprev,
       .btn-quicknext {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 30px;
-        width: 30px;
-        margin: 0px 8px;
+        height: 24px;
+        width: auto;
+        margin: 0px 4px;
         box-sizing: border-box;
         background: #19191a;
         border: 1px solid #ffffff;
diff --git a/src/components/table/mobile/transactDetails.vue b/src/components/table/mobile/transactDetails.vue
index 4712462..34ffe5a 100644
--- a/src/components/table/mobile/transactDetails.vue
+++ b/src/components/table/mobile/transactDetails.vue
@@ -2,68 +2,32 @@
   <div
     class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[20px] pt-[12px] pb-[28px]"
   >
-    <upper-lower-switch :current="'Transaction Details'" />
-
-    <tokens-details-row
+    <transact-details-row
       v-for="(item, index) in invariable.labels"
       :key="index + item"
       :title="item"
-      :value="data[invariable.sequence[index]]"
+      :value="currentData?.[invariable.sequence[index]]"
       :value-color="invariable.colorSequence[index]"
+      :is-copy="invariable.isCopys[index]"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, onMounted, ref } from 'vue'
-import TokensDetailsRow from '../mBase/tokensDetailsRow.vue'
-import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
-import { tokensDetailsCollocate } from '../constant'
+import { defineProps, ref, watchEffect } from 'vue'
+import transactDetailsRow from '../mBase/transactDetailsRow.vue'
+import { transactDetailsCollocate } from '../constant'
 
 const props = defineProps({
-  id: Array as any,
-})
-onMounted(() => {
-  setTimeout(() => {
-    data.value = {
-      transactionHash: '1323',
-      result: 'Success',
-      time: '1323',
-      from: '1323',
-      interactedWithTo: '1323',
-      tokensTransferred: {
-        from: '123',
-        to: '234',
-        for: '345',
-      },
-      value: '1323',
-      transactionFee: '1323',
-      gasPrice: '1323',
-      transactionType: '1323',
-      gasLimit: '1323',
-    }
-  }, 0)
-})
-const data = ref<any>({
-  transactionHash: '1323',
-  result: '1323',
-  time: '1323',
-  from: '1323',
-  interactedWithTo: '1323',
-  tokensTransferred: {
-    from: '123',
-    to: '234',
-    for: '345',
-  },
-  value: '1323',
-  transactionFee: '1323',
-  gasPrice: '1323',
-  transactionType: '1323',
-  gasLimit: '1323',
+  data: Object as any,
 })
 const invariable = {
-  ...tokensDetailsCollocate,
+  ...transactDetailsCollocate,
 }
+const currentData = ref()
+watchEffect(() => {
+  currentData.value = props.data
+})
 </script>
 
 <style lang="scss"></style>
diff --git a/src/components/table/mobile/transactTable.vue b/src/components/table/mobile/transactTable.vue
index cc01728..297e31b 100644
--- a/src/components/table/mobile/transactTable.vue
+++ b/src/components/table/mobile/transactTable.vue
@@ -4,49 +4,85 @@
       v-for="(item, index) in currentData"
       :key="index"
       :card-data="item"
+      @click="routerLink(item?.txnHash)"
     />
     <div
-      class="bk-pagination flex flex-row items-center justify-center pt-[32px]"
+      class="bk-pagination-m flex flex-row items-center justify-center pt-[32px]"
     >
       <el-pagination
+        small
+        :pager-count="5"
         :page-size="invariable.pageSize"
         layout="prev, pager, next"
         v-model:current-page="currentPage"
         :total="paginationState.totalPage"
-        @current-change="handleCurrentChange"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, reactive, ref } from 'vue'
+import { getFindTransactionListPage } from '@src/api/TransactionsController'
+import { middleDecimal, timeConvert } from '@src/utils/string'
+import { reactive, ref, watchEffect } from 'vue'
+import { useRouter } from 'vue-router'
+import { transactTableCollocate } from '../constant'
 import TransactCard from '../mBase/transactCard.vue'
-import { dimensionalUpgrade } from '../tool'
 
-const props = defineProps({
-  data: Array as any,
-})
 const invariable = {
+  ...transactTableCollocate,
   pageSize: 5, // 每一页的数量
 }
+
+const router = useRouter()
 const paginationState = reactive({
-  totalPage:
-    Math.floor(props?.data.length / invariable.pageSize + 1) *
-    invariable.pageSize, // 总页数
-  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+  totalPage: 0, // 总页数
 })
 
 let currentPage = ref(1) // 当前页
-let currentData = ref(paginationState.totalData[currentPage.value - 1]) // 当前页的数据
-
-const handleCurrentChange = (page: number) => {
-  currentData.value = paginationState.totalData[page - 1]
+let currentData = ref() // 当前页的数据
+let loading = ref(true) // 骨架屏加载
+// 请求数据
+const initBlock = async (page: number) => {
+  const params = {
+    pageNum: page,
+    pageSize: invariable.pageSize,
+  }
+  const res = await getFindTransactionListPage(params)
+  // 数据请求结束 更新总页数
+  paginationState.totalPage =
+    Math.floor(res.data.total / invariable.pageSize + 1) * invariable.pageSize
+  // 更新当前数据
+  currentData.value = res.data.rows.map((item: any) => ({
+    ...item,
+    hash: middleDecimal(item?.hash),
+    txnHash: item.hash,
+    from: middleDecimal(item?.from),
+    to: middleDecimal(item?.to),
+    gasPrice: middleDecimal(item?.gasPrice),
+    isSuccess: item?.status === '0x1',
+    result: item?.status === '0x1' ? 'Success' : 'Faild',
+    // middleDecimal
+    timestamp: timeConvert(item?.timestamp),
+  }))
+  // 骨架屏隐藏
+  loading.value = false
 }
+// 监听分页更新 -> 请求数据
+watchEffect(() => {
+  // 如果屏幕尺寸大于1440px 则不执行
+  if (window.screen.width > 1440) {
+    return
+  }
+  loading.value = true
+  initBlock(currentPage.value)
+})
+// 路由跳转
+const routerLink = (id: string | number) => router.push(`/tx/${id}`)
 </script>
 
 <style lang="scss">
-.bk-pagination {
+.bk-pagination-m {
   .el-pagination {
     .btn-prev,
     .btn-next {
@@ -54,13 +90,14 @@ const handleCurrentChange = (page: number) => {
     }
     .el-pager {
       .number,
+      .btn-quickprev,
       .btn-quicknext {
         display: flex;
         justify-content: center;
         align-items: center;
-        height: 30px;
-        width: 30px;
-        margin: 0px 8px;
+        height: 24px;
+        width: auto;
+        margin: 0px 4px;
         box-sizing: border-box;
         background: #19191a;
         border: 1px solid #ffffff;
diff --git a/src/pages/BitcNFt/cards.vue b/src/pages/BitcNFt/cards.vue
index 71daafb..13f8629 100644
--- a/src/pages/BitcNFt/cards.vue
+++ b/src/pages/BitcNFt/cards.vue
@@ -22,7 +22,7 @@
       >
         <p
           v-for="(item, index) in options"
-          class="text-white text-[15px]"
+          class="text-white text-[15px] flex justify-center items-center"
           :class="index == 0 ? '' : 'desktop:ml-[72px] mobile:mt-[18px]'"
         >
           {{ `${item?.value} ${item?.key}` }}
@@ -34,7 +34,7 @@
       </div>
     </div>
     <div
-      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] mack-bg desktop:ml-[40px] mobile: mt-[36px]"
+      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] mack-bg desktop:ml-[40px] mobile:mt-[36px]"
       :class="url ? 'hidden' : ''"
     >
       <div
@@ -42,12 +42,12 @@
       >
         <p class="text-white font-semibold text-[18px]">Total Supply</p>
         <p class="text-white font-semibold text-[32px] mt-[36px]">
-          2689 bitcNFT
+          {{ totalSupply }}
         </p>
       </div>
     </div>
     <div
-      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] desktop:py-[42px] desktop:px-[39px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:ml-[40px] mobile: mt-[36px]"
+      class="desktop:w-[462px] desktop:h-[282px] mobile:h-[199px] desktop:py-[42px] desktop:px-[39px] mobile:p-[20px] bg-black-19191A rounded-[10px] desktop:ml-[40px] mobile:mt-[36px]"
       :class="url ? '' : 'hidden'"
     >
       <img class="w-full h-full" :src="url" />
@@ -62,6 +62,7 @@ import Qrcode from 'qrcode'
 const props = defineProps({
   title: String,
   value: String,
+  totalSupply: String,
   options: Array as any,
   url: String,
   qrcodeurl: String,
diff --git a/src/pages/BitcNFt/centerContent.vue b/src/pages/BitcNFt/centerContent.vue
index 40c0b82..3292b03 100644
--- a/src/pages/BitcNFt/centerContent.vue
+++ b/src/pages/BitcNFt/centerContent.vue
@@ -3,9 +3,10 @@
     class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <Cards
-      :title="'BitcNFt'"
+      :title="cardOptions.title"
       :value="value"
-      :options="options"
+      :options="cardOptions.options"
+      :totalSupply="cardOptions.totalSupply"
       :qrcodeurl="'https://baidu.com'"
     />
     <div
@@ -19,14 +20,44 @@
                 There are no transactions for this Token Transfers.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
+              v-if="transfersRows.length != 0"
+            >
+              <transfers-row
+                v-for="(item, index) in transfersRows"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </el-tab-pane>
           <!-- Token Holders -->
           <el-tab-pane label="Token Holders" name="tokenHolders">
-            <div class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="holdrersRows.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
                 There are no transactions for this Token Holders.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
+              v-if="holdrersRows.length != 0"
+            >
+              <holders-row
+                v-for="(item, index) in holdrersRows"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+              />
+            </div>
           </el-tab-pane>
         </el-tabs>
       </div>
@@ -35,24 +66,93 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import {
+  getContractAddressInfoList,
+  getContractHoldingQuantity,
+} from '@src/api/AddressController'
+import { onMounted, reactive, ref } from 'vue'
+import holdersRow from './holdersRow.vue'
+import transfersRow from '../VNFT/transfersRow.vue'
 import Cards from './cards.vue'
+import { getFindReceiptByAddressPage } from '@src/api/TransactionsController'
 const active = ref('tokenTransfers')
-const value = '0x5c63abfad4563327a24741ec85aa0701530444c9'
-const options = [
-  {
-    key: 'ERC721',
-    value: '',
-  },
-  {
-    key: 'Addresses',
-    value: '2',
-  },
-  {
-    key: 'Transfers',
-    value: '0',
-  },
-]
+const value = '0x4f2c168174266781008ba5d722d1bdc9ee52a874'
+
+const cardOptions = reactive({
+  title: '',
+  options: [
+    {
+      key: 'ERC721',
+      value: '',
+    },
+    {
+      key: 'Addresses',
+      value: '',
+    },
+    {
+      key: 'Transfers',
+      value: '',
+    },
+  ],
+  totalSupply: '',
+})
+const holdrersRows = ref<any>([])
+const transfersRows = ref<any>([])
+// 请求代币信息
+const requestInfo = async () => {
+  const params = {
+    contractAddress: value,
+  }
+  const res = await getContractAddressInfoList(params)
+  const { data } = res
+  cardOptions.title = data.name
+  cardOptions.totalSupply = `${data.totalSupply} ${data.name}`
+  cardOptions.options[0].key = data.tokenType
+  cardOptions.options[1].value = data.addressesCount
+  cardOptions.options[2].value = data.transfers
+}
+// 请求Token Holders
+const requestHolders = async () => {
+  const params = {
+    pageNum: 1,
+    pageSize: 10,
+    contractAddress: value,
+  }
+  const res = await getContractHoldingQuantity(params)
+  holdrersRows.value = res.data.rows.map((item: any) => {
+    return {
+      title: item?.holdAddress,
+      value1: item?.holdingQuantity,
+      value2: item?.contractName,
+      value3: item?.percentage,
+    }
+  })
+}
+// 请求Token Transfers
+const requestTransfers = async () => {
+  const params = {
+    address: value,
+    pageNum: 1,
+    pageSize: 10,
+    filterType: 'all',
+  }
+  const res = await getFindReceiptByAddressPage(params)
+  transfersRows.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.blockHash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+  console.log(res)
+}
+onMounted(() => {
+  requestInfo()
+  requestHolders()
+  requestTransfers()
+})
 </script>
 
 <style scoped></style>
diff --git a/src/pages/BitcNFt/holdersRow.vue b/src/pages/BitcNFt/holdersRow.vue
new file mode 100644
index 0000000..1bd3b45
--- /dev/null
+++ b/src/pages/BitcNFt/holdersRow.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="flex flex-1 flex-row justify-start items-center py-[16px] pl-[18px] border-b border-b-black-3B3B3C"
+  >
+    <div>
+      <p class="text-white text-[16px] font-medium">{{ title }}</p>
+      <div
+        class="text-gray-BBB text-[14px] font-normal flex flex-row items-center mt-[12px]"
+      >
+        <p class="mr-[10px]">{{ value1 }}</p>
+        <p>{{ value2 }}</p>
+        <p class="ml-[10px]">{{ value3 }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: String,
+  value1: String,
+  value2: String,
+  value3: String,
+  value4: String,
+})
+</script>
+
+<style scoped></style>
diff --git a/src/pages/BitcNFt/index.vue b/src/pages/BitcNFt/index.vue
index 10a7e89..50d50d6 100644
--- a/src/pages/BitcNFt/index.vue
+++ b/src/pages/BitcNFt/index.vue
@@ -72,6 +72,9 @@ import router from '@src/routes'
 import centerContent from './centerContent.vue'
 
 const input = ref()
+
+// 请求代币信息
+// const request
 const goBack = () => router.back()
 </script>
 
diff --git a/src/pages/HomePage/index.vue b/src/pages/HomePage/index.vue
index c98af6f..f68e65a 100644
--- a/src/pages/HomePage/index.vue
+++ b/src/pages/HomePage/index.vue
@@ -112,7 +112,6 @@ const overview = reactive([
 ])
 
 const router = useRouter()
-const input = ref()
 let ws = ref<WebSocket>()
 // 初始化接口请求
 const initRequist = async () => {
@@ -121,7 +120,7 @@ const initRequist = async () => {
   overview[1].value = res.data.totalTransactions
   overview[2].value = res.data.averageBlockTime
   // 获取tokens接口拿到总数
-  const tokenRes = await getFindTokenList()
+  const tokenRes = await getFindTokenList({})
   overview[3].value = tokenRes.data.total
   // 获取最新的交易 处理数据 加上tooltip
   const TransactionList = await getFindTransactionListPage({
diff --git a/src/pages/TableBlock/Block/details.vue b/src/pages/TableBlock/Block/details.vue
index 2c4b922..9a9f853 100644
--- a/src/pages/TableBlock/Block/details.vue
+++ b/src/pages/TableBlock/Block/details.vue
@@ -19,7 +19,7 @@
       <bk-desktop-details :data="detailsData" />
     </div>
     <div class="desktop:hidden mt-[38px]">
-      <bk-mobile-details />
+      <bk-mobile-details :data="detailsData" />
     </div>
     <!-- 下面的选项 -->
     <div
@@ -28,11 +28,28 @@
       <div class="details-tabs w-full">
         <el-tabs v-model="active" class="w-full">
           <el-tab-pane label="Transactions" name="Block">
-            <div class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="rowsData.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
                 There are no transactions for this block.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
+              v-if="rowsData.length != 0"
+            >
+              <transfers-row
+                v-for="(item, index) in rowsData"
+                :key="index + item.title"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </el-tab-pane>
           <!-- 待扩展 -->
           <!-- <el-tab-pane label="Transactions" name="Transactions">
@@ -50,6 +67,7 @@
 <script setup lang="ts">
 import { ArrowLeftBold } from '@element-plus/icons-vue'
 import { getBlock } from '@src/api/BlockController'
+import { getFindTransactionListPage } from '@src/api/TransactionsController'
 import BkDesktopDetails from '@src/components/table/desktop/bkTableDetails.vue'
 import BkMobileDetails from '@src/components/table/mobile/bkTableDetails.vue'
 
@@ -60,20 +78,43 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 const active = ref('Block')
 let detailsData = ref([])
+let rowsData = ref<any>([])
 
 const initRequest = async (hash: string) => {
+  // 请求获取详情数据
   const res = await getBlock({ hash: hash })
   detailsData.value = res.data
+  // 根据number请求底部的Transactions数据
+  const params = {
+    number: res?.data?.number,
+    pageNum: 1,
+    pageSize: 20,
+  }
+  const rows = await getFindTransactionListPage(params)
+  // rows.data.rows
+  rowsData.value = rows.data.rows.map((item: any) => {
+    return {
+      ...item,
+      title: `Block #${item.blockNumber}`,
+      value1: item?.blockHash || '123321',
+      value2: item?.from || 'hhh',
+      value3: item?.to || 'to',
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
 }
 
 onMounted(() => {
   // 计算hash 通过hash获取数据
   let hash = route.path.split('/')?.[2]
+  if (!hash) {
+    return
+  }
   initRequest(hash)
 })
 
 // 路由回退
-const goBack = () => router.back()
+const goBack = () => router.replace('/blocks')
 </script>
 
 <style lang="scss">
diff --git a/src/pages/TableBlock/Block/index.vue b/src/pages/TableBlock/Block/index.vue
index 1a36add..200bf2e 100644
--- a/src/pages/TableBlock/Block/index.vue
+++ b/src/pages/TableBlock/Block/index.vue
@@ -4,7 +4,7 @@
       <desktop-bk-table />
     </div>
     <div class="desktop:hidden">
-      <mobile-bk-table :data="tableData" />
+      <mobile-bk-table />
     </div>
   </div>
 </template>
@@ -12,93 +12,8 @@
 <script setup lang="ts">
 import DesktopBkTable from '@src/components/table/desktop/bkTable.vue'
 import MobileBkTable from '@src/components/table/mobile/bkTable.vue'
-
-const tableData = [
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh623',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh612312',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh63222',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6sdc',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6csdc',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6csd',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6cs',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6geergeg',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6SWE',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6FWE',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh6VDFV21',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-  {
-    block: '0xdhd.....qwsh1',
-    date: '0xshd......hhhh621DSC',
-    miner: '0xhhh.....77hhhh',
-    gasLimit: '2022-08-10 09:50:17',
-    gasUsed: '0.0000021',
-  },
-]
+// w > d : m
+// window
 </script>
 
 <style scoped></style>
diff --git a/src/pages/TableBlock/Tokens/details.vue b/src/pages/TableBlock/Tokens/details.vue
index 1b21d7f..58df272 100644
--- a/src/pages/TableBlock/Tokens/details.vue
+++ b/src/pages/TableBlock/Tokens/details.vue
@@ -53,25 +53,91 @@
         </div>
         <div>
           <div :class="active === 'transactions' ? 'flex' : 'hidden'">
-            <div class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="transactionsData.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
                 There are no transactions for this Transactions.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
+              v-if="transactionsData.length != 0"
+            >
+              <transfers-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 class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="tokensData.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
-                There are no transactions for this Token Transfers.
+                There are no transactions for this block.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
+              v-if="tokensData.length != 0"
+            >
+              <transfers-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 class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="internalData.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
-                There are no transactions for this block.
+                There are no transactions for this internal.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden w-full"
+              v-if="internalData.length != 0"
+            >
+              <transfers-row
+                v-for="(item, index) in internalData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
+            <!-- 移动端 -->
+            <div
+              class="mt-[10px] rounded-[10px] px-[20px] desktop:hidden pb-[20px] w-full"
+              v-if="internalData.length != 0"
+            >
+              <mobile-row
+                v-for="(item, index) in internalData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -81,16 +147,93 @@
 
 <script setup lang="ts">
 import { ArrowLeftBold } from '@element-plus/icons-vue'
+import {
+  getFindReceiptByAddressPage,
+  getFindTransactionListPage,
+} from '@src/api/TransactionsController'
 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 router from '@src/routes'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 
+const route = useRoute()
+const router = useRouter()
 const active = ref('internalTransactions')
+let internalData = ref<any>([])
+let transactionsData = ref<any>([])
+let tokensData = ref<any>([])
+
+// 请求internal数据
+const requestInternal = async (address: string) => {
+  const params = {
+    address,
+    isContract: 1,
+    pageNum: 1,
+    pageSize: 10,
+  }
+  const res = await getFindTransactionListPage(params)
+  internalData.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.hash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+}
+// 请求transactionsData的数据
+const requestTransactions = async (address: string) => {
+  const params = {
+    address,
+    isContract: 2,
+    pageNum: 1,
+    pageSize: 10,
+  }
+  const res = await getFindTransactionListPage(params)
+  transactionsData.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.hash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+}
+// 请求tokensData的数据
+const rqeuestTokensData = async (address: string) => {
+  const params = {
+    address,
+    pageNum: 1,
+    pageSize: 20,
+    filterType: 'all',
+  }
+  const res = await getFindReceiptByAddressPage(params)
+  tokensData.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.blockHash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+  console.log(res)
+}
+onMounted(() => {
+  // 获取地址
+  let address = route.path.split('/')?.[2]
+  // 根据地址请求tab
+  requestInternal(address)
+  requestTransactions(address)
+  rqeuestTokensData(address)
+})
 
 // 路由回退
-const goBack = () => router.back()
+const goBack = () => router.replace('/tokens')
 // 修改tabs
 const changeTabs = (current: string) => {
   active.value = current
diff --git a/src/pages/TableBlock/Tokens/index.vue b/src/pages/TableBlock/Tokens/index.vue
index b01f89d..2cc5556 100644
--- a/src/pages/TableBlock/Tokens/index.vue
+++ b/src/pages/TableBlock/Tokens/index.vue
@@ -1,114 +1,17 @@
 <template>
   <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
     <div class="mobile:hidden">
-      <desktop-tokens-table :data="tableData" />
+      <desktop-tokens-table />
     </div>
     <div class="desktop:hidden">
-      <mobile-tokens-table :data="tableData" />
+      <mobile-tokens-table />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue'
 import MobileTokensTable from '@src/components/table/mobile/tokensTable.vue'
-import { onMounted, ref } from 'vue'
-
-const tableData = ref<any[]>([
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-  {
-    serialNumber: '0x1956...e1ea6',
-    token: '1017882',
-    adress: '0x3b9aca00',
-    totalSupply: '14 seconds ago',
-    holdersCount: '0x14f1... 4f0ba',
-  },
-])
-// onMounted(() => {
-//   setTimeout(() => {
-//     tableData.value = [{}].map((item, index) => ({
-//       ...item,
-//       serialNumber: index + 1,
-//     }))
-//     console.log(tableData)
-//   }, 1000)
-// })
+import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue'
 </script>
 
 <style scoped></style>
diff --git a/src/pages/TableBlock/Transactions/details.vue b/src/pages/TableBlock/Transactions/details.vue
index 5465602..fda97a0 100644
--- a/src/pages/TableBlock/Transactions/details.vue
+++ b/src/pages/TableBlock/Transactions/details.vue
@@ -16,10 +16,10 @@
       >
     </div>
     <div class="mobile:hidden mt-[38px]">
-      <desktop-transact-details />
+      <desktop-transact-details :data="currentData" />
     </div>
     <div class="desktop:hidden mt-[38px]">
-      <mobile-transact-details />
+      <mobile-transact-details :data="currentData" />
     </div>
     <!-- 下面的选项 -->
     <div
@@ -28,11 +28,28 @@
       <div class="details-tabs w-full">
         <el-tabs v-model="active" class="w-full">
           <el-tab-pane label="Token Transfers" name="tokenTransfers">
-            <div class="flex flex-1 justify-center items-center h-[210px]">
+            <div
+              class="flex flex-1 justify-center items-center h-[210px]"
+              v-if="rowsData.length == 0"
+            >
               <p class="text-white text-[14px] font-normal opacity-80">
                 There are no transactions for this block.
               </p>
             </div>
+            <div
+              class="mt-[10px] rounded-[10px] px-[34px] pb-[30px] mobile:hidden"
+              v-if="rowsData.length != 0"
+            >
+              <transfers-row
+                v-for="(item, index) in rowsData"
+                :key="`${index}${item.title}`"
+                :title="item.title"
+                :value1="item.value1"
+                :value2="item.value2"
+                :value3="item.value3"
+                :state="item.state"
+              />
+            </div>
           </el-tab-pane>
           <!-- logs -->
           <el-tab-pane label="Logs" name="logs">
@@ -45,53 +62,19 @@
                 Logs
               </p>
               <div
-                class="bg-black-2B2B2C text-white desktop:text-[15px] desktop:px-[34px] mobile:text-[14px] mobile:px-[16px] py-[16px] rounded-[10px]"
+                class="flex flex-1 justify-center items-center"
+                v-if="logsData?.logs?.length == 0"
               >
-                <div
-                  class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+                <p
+                  class="text-white text-[14px] font-normal flex opacity-80 h-[210px] justify-center items-center"
                 >
-                  <p class="min-w-[185px] text-gray-BBB">Address</p>
-                  <p class="text-blue-65B5FF">
-                    0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342
-                  </p>
-                </div>
-                <div
-                  class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
-                >
-                  <p class="min-w-[185px] text-gray-BBB">Address</p>
-                  <div>
-                    <p class="break-all">
-                      [1]
-                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
-                    </p>
-                    <p class="mt-[16px] break-all">
-                      [1]
-                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
-                    </p>
-                    <p class="mt-[16px] break-all">
-                      [1]
-                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
-                >
-                  <p class="min-w-[185px] text-gray-BBB">Address</p>
-                  <p class="break-all">
-                    0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342
-                  </p>
-                </div>
-                <div
-                  class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px]"
-                >
-                  <p class="min-w-[185px] text-gray-BBB">Address</p>
-                  <p class="break-all">
-                    0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342
-                  </p>
-                </div>
+                  There are no log for this address.
+                </p>
+              </div>
+              <!-- 如果有数据的话 -->
+              <div v-if="logsData?.logs?.length != 0">
+                <Logs :key="logsData?.blockHash" :data="logsData?.logs" />
               </div>
-              <upper-lower-switch :current="'page'" />
             </div>
           </el-tab-pane>
           <!-- 待扩展 -->
@@ -109,16 +92,86 @@
 
 <script setup lang="ts">
 import { ArrowLeftBold } from '@element-plus/icons-vue'
+import {
+  getFindTransactionsDetail,
+  getFindTransactionsLogs,
+} from '@src/api/TransactionsController'
+import Logs from './logs.vue'
 import DesktopTransactDetails from '@src/components/table/desktop/transactDetails.vue'
 import MobileTransactDetails from '@src/components/table/mobile/transactDetails.vue'
 
-import router from '@src/routes'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getFindReceiptByTokenPage } from '@src/api/TokensController'
+import { timeConvert } from '@src/utils/string'
+
+const router = useRouter()
+const route = useRoute()
 
 const active = ref('logs')
+const currentData = ref<any>()
+let logsData = ref<any>()
+let rowsData = ref<any>([])
+// transactions 当前页
+let page = ref(1)
 
+// 请求详情的数据
+const requestDetails = async (hash: string) => {
+  const params = {
+    hash,
+  }
+  const res = await getFindTransactionsDetail(params)
+  const { data } = res
+  currentData.value = {
+    ...data,
+    isSuccess: data?.status === '0x1',
+    result: data?.status === '0x1' ? 'Success' : 'Faild',
+    time: timeConvert(data?.timestamp),
+    values: `${data?.amount} ${data?.symbol}`,
+  }
+  // 通过to请求地址
+  requestTokens(res.data.to)
+}
+// 请求logs的数据
+const requestLogs = async (hash: string) => {
+  const params = {
+    hash,
+  }
+  // 后续切换
+  const res = await getFindTransactionsLogs(params)
+  logsData.value = res.data.map((item: any) => {
+    return {
+      logs: JSON.parse(item.logs),
+    }
+  })[0]
+}
+// 请求tokens数据
+const requestTokens = async (address: string) => {
+  const params = {
+    pageNum: page.value,
+    pageSize: 20,
+    tokenId: '',
+    contractAddress: address,
+  }
+  const res = await getFindReceiptByTokenPage(params)
+  // 修改rowsData
+  rowsData.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.transactionHash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+}
+onMounted(() => {
+  let hash = route.path.split('/')?.[2]
+  requestDetails(hash)
+  requestLogs(hash)
+})
 // 路由回退
-const goBack = () => router.back()
+const goBack = () => router.replace('/tx')
 </script>
 
 <style lang="scss">
diff --git a/src/pages/TableBlock/Transactions/index.vue b/src/pages/TableBlock/Transactions/index.vue
index ca2b8db..d2d71ff 100644
--- a/src/pages/TableBlock/Transactions/index.vue
+++ b/src/pages/TableBlock/Transactions/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
     <div class="mobile:hidden">
-      <desktop-transact-table :data="tableData" />
+      <desktop-transact-table />
     </div>
     <div class="desktop:hidden">
-      <mobile-transact-table :data="tableData" />
+      <mobile-transact-table />
     </div>
   </div>
 </template>
@@ -12,128 +12,6 @@
 <script setup lang="ts">
 import DesktopTransactTable from '@src/components/table/desktop/transactTable.vue'
 import MobileTransactTable from '@src/components/table/mobile/transactTable.vue'
-const tableData = [
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Faild',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-  {
-    hash: '0x1956...e1ea6',
-    block: '1017882',
-    smartContract: '0x3b9aca00',
-    age: '14 seconds ago',
-    from: '0x14f1... 4f0ba',
-    to: '0x14f1... 4f0ba',
-    result: 'Success',
-    tXFee: '0.000021',
-  },
-]
 </script>
 
 <style scoped></style>
diff --git a/src/pages/TableBlock/Transactions/logs.vue b/src/pages/TableBlock/Transactions/logs.vue
new file mode 100644
index 0000000..1bd189e
--- /dev/null
+++ b/src/pages/TableBlock/Transactions/logs.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="bg-black-2B2B2C text-white desktop:text-[15px] desktop:px-[34px] mobile:text-[14px] mobile:px-[16px] py-[16px] rounded-[10px]"
+  >
+    <div
+      class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+    >
+      <p class="min-w-[185px] text-gray-BBB">Address</p>
+      <p class="text-blue-65B5FF">{{ logsData?.address || '' }}</p>
+    </div>
+    <div
+      class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+    >
+      <p class="min-w-[185px] text-gray-BBB">Topics</p>
+      <div>
+        <p
+          class="break-all"
+          v-for="(item, index) in logsData?.topics"
+          :key="index"
+          :class="index != 0 ? 'mt-[16px]' : ''"
+        >
+          {{ `[${index}] ${item}` }}
+        </p>
+      </div>
+    </div>
+    <div
+      class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+    >
+      <p class="min-w-[185px] text-gray-BBB">Data</p>
+      <p class="break-all">{{ logsData?.data }}</p>
+    </div>
+    <div
+      class="flex flex-1 desktop:flex-row mobile:flex-col desktop:px-[20px] py-[16px]"
+    >
+      <p class="min-w-[185px] text-gray-BBB">Log Index</p>
+      <p class="break-all">{{ logsData?.logIndex }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+
+const props = defineProps({
+  data: Object as any,
+})
+const logsData = ref()
+watchEffect(() => {
+  logsData.value = props.data?.[0]
+})
+
+console.log(props.data)
+</script>
+
+<style scoped></style>
diff --git a/src/pages/TableBlock/index.vue b/src/pages/TableBlock/index.vue
index 4fadbba..cbacc95 100644
--- a/src/pages/TableBlock/index.vue
+++ b/src/pages/TableBlock/index.vue
@@ -1,65 +1,12 @@
 <template>
   <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="url" class="w-[60px] h-[33px]" />
-          <span class="text-[34px] font-semibold text-white ml-[11.5px]"
-            >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="url" 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>
+    <row-search />
     <router-view></router-view>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Search } from '@element-plus/icons-vue'
-import * as iconList from '../../assets/Icons/index'
-
-const url = iconList.label
-let input = ref('')
+import RowSearch from '@src/components/row-search.vue'
 </script>
 
 <style lang="scss">
diff --git a/src/pages/VNFT/centerContent.vue b/src/pages/VNFT/centerContent.vue
index 01bfb0b..08e615e 100644
--- a/src/pages/VNFT/centerContent.vue
+++ b/src/pages/VNFT/centerContent.vue
@@ -3,11 +3,11 @@
     class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
     <Cards
-      :title="'VNFT'"
-      :value="'Token ID:' + value"
-      :options="options"
-      :url="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664699626&t=88f6e0508707a9ea0bec9c5a9f7c9d67'"
-      :qrcodeurl="'https://www.4399.com'"
+      :title="cardOptions.title"
+      :value="'Token ID:' + id"
+      :options="cardOptions.options"
+      :total-supply="cardOptions.totalSupply"
+      :url="cardOptions.url"
     />
     <div
       class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"
@@ -25,20 +25,7 @@
                 class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px] mobile:hidden"
               >
                 <transfers-row
-                  v-for="(item, index) in tokenTransfers"
-                  :key="index + item.title"
-                  :title="item.title"
-                  :value1="item.value1"
-                  :value2="item.value2"
-                  :value3="item.value3"
-                  :state="item.state"
-                />
-              </div>
-              <div
-                class="desktop:hidden px-[20px] mt-[10px] bg-black-2B2B2C rounded-[10px]"
-              >
-                <mobile-row
-                  v-for="(item, index) in tokenTransfers"
+                  v-for="(item, index) in transfersRows"
                   :key="index + item.title"
                   :title="item.title"
                   :value1="item.value1"
@@ -65,47 +52,81 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import Cards from '../BitcNFt/cards.vue'
 import transfersRow from './transfersRow.vue'
 import mobileRow from './mobileRow.vue'
 import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
+import {
+  getContractAddressInfoList,
+  getContractHoldingQuantity,
+} from '@src/api/AddressController'
+import { getFindReceiptByAddressPage } from '@src/api/TransactionsController'
+import {
+  getFindReceiptByTokenPage,
+  getFindTokenInfo,
+} from '@src/api/TokensController'
 const active = ref('tokenTransfers')
-const value = '4'
-const options = [
-  {
-    key: 'ERC721',
-    value: '',
-  },
-  {
-    key: 'Transfers',
-    value: '324',
-  },
-]
-// 底部渲染的数据
-const tokenTransfers = [
-  {
-    title: 'Block #815128',
-    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
-    value2: '0x970d473486cg4f9dfe6b2',
-    value3: '0x970d473486cg4f9dfe6b2',
-    state: 'Success',
-  },
-  {
-    title: 'Block #815128',
-    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
-    value2: '0x970d473486cg4f9dfe6b2',
-    value3: '0x970d473486cg4f9dfe6b2',
-    state: 'Faild',
-  },
-  {
-    title: 'Block #815128',
-    value1: '0x559f0e102863ef1b9798e1d4497a0f4214f05fbf7fbce549a',
-    value2: '0x970d473486cg4f9dfe6b2',
-    value3: '0x970d473486cg4f9dfe6b2',
-    state: 'Success',
-  },
-]
+const value = '0x0d2b4411d55e8684fa51b84bc3d2903a3341c2e9'
+const id = '0x0000000000000000000000000000000000000000000000000000000000000006'
+
+const cardOptions = reactive({
+  title: '',
+  options: [
+    {
+      key: 'ERC721',
+      value: '',
+    },
+    {
+      key: 'Transfers',
+      value: '',
+    },
+  ],
+  totalSupply: '',
+  url: '',
+})
+const holdrersRows = ref<any>([])
+const transfersRows = ref<any>([])
+// 请求代币信息
+const requestInfo = async () => {
+  const params = {
+    tokenId: id,
+    contractAddress: value,
+  }
+  const res = await getFindTokenInfo(params)
+  const { data } = res
+  console.log(data)
+
+  cardOptions.title = data.name
+  cardOptions.url = data.tokenImages
+  cardOptions.options[0].key = data.tokenType
+  cardOptions.options[1].value = data.transfers
+  // cardOptions.options[2].value = data.transfers
+}
+// 请求Token Transfers
+const requestTransfers = async () => {
+  const params = {
+    contractAddress: value,
+    pageNum: 1,
+    pageSize: 10,
+    tokenId: id,
+  }
+  const res = await getFindReceiptByTokenPage(params)
+  transfersRows.value = res.data.rows.map((item: any) => {
+    return {
+      title: `Block #${item.blockNumber}`,
+      value1: item?.blockHash,
+      value2: item?.from,
+      value3: item?.to,
+      state: item?.status === '0x1' ? 'Success' : 'Faild',
+    }
+  })
+  console.log(res)
+}
+onMounted(() => {
+  requestInfo()
+  requestTransfers()
+})
 </script>
 
 <style scoped></style>
diff --git a/src/pages/VNFT/mobileRow.vue b/src/pages/VNFT/mobileRow.vue
index de4906e..de17db5 100644
--- a/src/pages/VNFT/mobileRow.vue
+++ b/src/pages/VNFT/mobileRow.vue
@@ -25,9 +25,9 @@
     <div
       class="text-gray-BBB text-[14px] font-normal flex flex-1 w-full flex-col mt-[12px]"
     >
-      <p>{{ value2 }}</p>
+      <p class="break-all">{{ value2 }}</p>
       <Icons url="chevron_right" :size="16" />
-      <p>{{ value3 }}</p>
+      <p class="break-all">{{ value3 }}</p>
     </div>
   </div>
 </template>
diff --git a/src/utils/test.js b/src/utils/test.js
new file mode 100644
index 0000000..98f590c
--- /dev/null
+++ b/src/utils/test.js
@@ -0,0 +1,48 @@
+let getInfo = (data) => {
+  if (!data) return null
+  let result = []
+  for (let i = 1; i <= 20; i++) {
+    try {
+      let item = {}
+      if (data['temp' + i]) {
+        item['temp'] = data['temp' + i]
+
+        if (JSON.stringify(tilesState.max) !== '{}')
+          if (tilesState.max['temp' + i])
+            item['maxTemp'] = tilesState.max['temp' + i]
+
+        if (JSON.stringify(tilesState.min) !== '{}')
+          if (tilesState.min['temp' + i])
+            item['minTemp'] = tilesState.min['temp' + i]
+
+        if (JSON.stringify(tilesState.avg) !== '{}')
+          if (tilesState.avg['temp' + i])
+            item['avgTemp'] = tilesState.avg['temp' + i]
+      }
+
+      if (data['humidity' + i]) {
+        item['humidity'] = data['humidity' + i]
+        if (JSON.stringify(tilesState.max) !== '{}')
+          if (tilesState.max['humidity' + i])
+            item['maxHumidity'] = tilesState.max['humidity' + i]
+
+        if (JSON.stringify(tilesState.min) !== '{}')
+          if (tilesState.min['humidity' + i])
+            item['minHumidity'] = tilesState.min['humidity' + i]
+
+        if (JSON.stringify(tilesState.avg) !== '{}')
+          if (tilesState.avg['humidity' + i])
+            item['avgHumidity'] = tilesState.avg['humidity' + i]
+      }
+
+      if (JSON.stringify(item) !== '{}') {
+        item['title'] = 'Temperature-Humidity-' + i
+        result.push(item)
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+  console.log(result)
+  return result
+}
diff --git a/src/utils/throttle.ts b/src/utils/throttle.ts
index fbf0970..6eb4ab2 100644
--- a/src/utils/throttle.ts
+++ b/src/utils/throttle.ts
@@ -11,3 +11,9 @@ export const Throttle = (fn: () => void, delay: number | undefined) => {
     }, delay)
   }
 }
+
+
+
+
+
+