pc页面

3 years ago · 4077934193
29 changed files with 2898 additions and 1632 deletions
--- a/components.d.ts
+++ b/components.d.ts
@ -15,7 +15,10 @@ 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']
    ElTable: typeof import('element-plus/es')['ElTable']
    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
@ -31,6 +34,9 @@ declare module '@vue/runtime-core' {
    RouterView: typeof import('vue-router')['RouterView']
    Row: typeof import('./src/components/table/row.vue')['default']
    THeader: typeof import('./src/components/table/dBase/tHeader.vue')['default']
+    TokensDetails: typeof import('./src/components/table/desktop/tokensDetails.vue')['default']
+    TokensDetailsRow: typeof import('./src/components/table/dBase/tokensDetailsRow.vue')['default']
+    TokensTable: typeof import('./src/components/table/desktop/tokensTable.vue')['default']
    TransactCard: typeof import('./src/components/table/mBase/transactCard.vue')['default']
    TransactDetails: typeof import('./src/components/table/desktop/transactDetails.vue')['default']
    TransactDetailsRow: typeof import('./src/components/table/dBase/transactDetailsRow.vue')['default']
--- a/package-lock.json
+++ b/package-lock.json
@ -9,11 +9,14 @@
      "version": "0.0.0",
      "dependencies": {
        "element-plus": "^2.2.14",
+        "qrcode": "^1.5.1",
+        "qrcode.vue": "^3.3.3",
        "vue": "^3.2.37",
        "vue-router": "4"
      },
      "devDependencies": {
        "@types/node": "^18.7.13",
+        "@types/qrcode": "^1.5.0",
        "@vitejs/plugin-vue": "^3.0.3",
        "autoprefixer": "^10.4.8",
        "postcss": "^8.4.16",
@ -262,6 +265,15 @@
      "integrity": "sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==",
      "dev": true
    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/web-bluetooth": {
      "version": "0.0.15",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
@ -734,6 +746,25 @@
        "ajv": "^6.9.1"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/anymatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
@ -878,6 +909,14 @@
      "dev": true,
      "peer": true
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
@ -943,11 +982,31 @@
        "node": ">=6.0"
      }
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
    "node_modules/color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/commander": {
@ -1005,6 +1064,14 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/defined": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/defined/-/defined-1.0.0.tgz",
@ -1037,6 +1104,11 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
    "node_modules/dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
@ -1077,6 +1149,11 @@
        "vue": "^3.2.0"
      }
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
    "node_modules/emojis-list": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
@ -1086,6 +1163,11 @@
        "node": ">= 4"
      }
    },
+    "node_modules/encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
    "node_modules/enhanced-resolve": {
      "version": "5.10.0",
      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@ -1301,6 +1383,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz",
@ -1328,6 +1422,14 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
@ -1476,6 +1578,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@ -1597,6 +1707,17 @@
        "node": ">=14"
      }
    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@ -1821,6 +1942,44 @@
        "wrappy": "1"
      }
    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -1883,6 +2042,14 @@
        "pathe": "^0.3.5"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.16",
      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.16.tgz",
@ -2025,6 +2192,31 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/qrcode.vue": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
+      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -2092,6 +2284,19 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "node_modules/resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@ -2279,6 +2484,11 @@
        "randombytes": "^2.1.0"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@ -2314,6 +2524,30 @@
      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
      "license": "MIT"
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/strip-literal": {
      "version": "0.4.0",
      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-0.4.0.tgz",
@ -2986,6 +3220,24 @@
        "node": ">= 10.13.0"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
@ -3002,6 +3254,11 @@
        "node": ">=0.4"
      }
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "node_modules/yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
@ -3018,6 +3275,39 @@
      "engines": {
        "node": ">= 6"
      }
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
    }
  },
  "dependencies": {
@ -3206,6 +3496,15 @@
      "integrity": "sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==",
      "dev": true
    },
+    "@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
    "@types/web-bluetooth": {
      "version": "0.0.15",
      "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
@ -3624,6 +3923,19 @@
      "dev": true,
      "requires": {}
    },
+    "ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+    },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
    "anymatch": {
      "version": "3.1.2",
      "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
@ -3714,6 +4026,11 @@
      "dev": true,
      "peer": true
    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
    "camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/camelcase-css/-/camelcase-css-2.0.1.tgz",
@ -3749,11 +4066,28 @@
      "dev": true,
      "peer": true
    },
+    "cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
    "color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
    },
    "commander": {
      "version": "2.20.3",
@ -3793,6 +4127,11 @@
        "ms": "2.1.2"
      }
    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
+    },
    "defined": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/defined/-/defined-1.0.0.tgz",
@ -3816,6 +4155,11 @@
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
      "dev": true
    },
+    "dijkstrajs": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.2.tgz",
+      "integrity": "sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg=="
+    },
    "dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmmirror.com/dlv/-/dlv-1.1.3.tgz",
@ -3850,12 +4194,22 @@
        "normalize-wheel-es": "^1.2.0"
      }
    },
+    "emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
    "emojis-list": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
      "dev": true
    },
+    "encode-utf8": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/encode-utf8/-/encode-utf8-1.0.3.tgz",
+      "integrity": "sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw=="
+    },
    "enhanced-resolve": {
      "version": "5.10.0",
      "resolved": "https://registry.npmmirror.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz",
@ -4019,6 +4373,15 @@
        "to-regex-range": "^5.0.1"
      }
    },
+    "find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "requires": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      }
+    },
    "fraction.js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmmirror.com/fraction.js/-/fraction.js-4.2.0.tgz",
@ -4037,6 +4400,11 @@
      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
      "dev": true
    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmmirror.com/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
@ -4157,6 +4525,11 @@
      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
      "dev": true
    },
+    "is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+    },
    "is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@ -4245,6 +4618,14 @@
      "integrity": "sha512-mlERgSPrbxU3BP4qBqAvvwlgW4MTg78iwJdGGnv7kibKjWcJksrG3t6LB5lXI93wXRDvG4NpUgJFmTG4T6rdrg==",
      "dev": true
    },
+    "locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "requires": {
+        "p-locate": "^4.1.0"
+      }
+    },
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@ -4413,6 +4794,32 @@
        "wrappy": "1"
      }
    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "requires": {
+        "p-limit": "^2.2.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
+    "path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+    },
    "path-is-absolute": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -4459,6 +4866,11 @@
        "pathe": "^0.3.5"
      }
    },
+    "pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw=="
+    },
    "postcss": {
      "version": "8.4.16",
      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.16.tgz",
@ -4530,6 +4942,23 @@
      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
      "dev": true
    },
+    "qrcode": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/qrcode/-/qrcode-1.5.1.tgz",
+      "integrity": "sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==",
+      "requires": {
+        "dijkstrajs": "^1.0.1",
+        "encode-utf8": "^1.0.3",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      }
+    },
+    "qrcode.vue": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmmirror.com/qrcode.vue/-/qrcode.vue-3.3.3.tgz",
+      "integrity": "sha512-OsD4tQjIbxg/K6D5ZkWjBdYI9eg9K2i8qeYILdEAX5mdAydSAxV7xKmmZSP/hA12olLqEMZ9ryqDQrwa9jEMgw==",
+      "requires": {}
+    },
    "queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@ -4570,6 +4999,16 @@
        "picomatch": "^2.2.1"
      }
    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
+    },
    "resolve": {
      "version": "1.22.1",
      "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@ -4685,6 +5124,11 @@
        "randombytes": "^2.1.0"
      }
    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw=="
+    },
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
@ -4711,6 +5155,24 @@
      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
    },
+    "string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "requires": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "requires": {
+        "ansi-regex": "^5.0.1"
+      }
+    },
    "strip-literal": {
      "version": "0.4.0",
      "resolved": "https://registry.npmmirror.com/strip-literal/-/strip-literal-0.4.0.tgz",
@ -5149,6 +5611,21 @@
      "integrity": "sha512-h9atBP/bsZohWpHnr+2sic8Iecb60GxftXsWNLLLSqewgIsGzByd2gcIID4nXcG+3tNe4GQG3dLcff3kXupdRA==",
      "dev": true
    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q=="
+    },
+    "wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
@ -5161,6 +5638,11 @@
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
      "dev": true
    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
    "yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmmirror.com/yallist/-/yallist-4.0.0.tgz",
@ -5172,6 +5654,33 @@
      "resolved": "https://registry.npmmirror.com/yaml/-/yaml-1.10.2.tgz",
      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
      "dev": true
+    },
+    "yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "requires": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -10,11 +10,13 @@
  },
  "dependencies": {
    "element-plus": "^2.2.14",
+    "qrcode": "^1.5.1",
    "vue": "^3.2.37",
    "vue-router": "4"
  },
  "devDependencies": {
    "@types/node": "^18.7.13",
+    "@types/qrcode": "^1.5.0",
    "@vitejs/plugin-vue": "^3.0.3",
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
--- a/src/assets/Icons/chevron-right.png
+++ b/src/assets/Icons/chevron-right.png
--- a/src/assets/Icons/copyAdress.png
+++ b/src/assets/Icons/copyAdress.png
--- a/src/assets/Icons/index.ts
+++ b/src/assets/Icons/index.ts
@ -4,5 +4,20 @@ import filter_none from './filter_none.png'
 import info from './info.png'
 import check_circle from './check-circle.png'
 import cancel from './cancel.png'
+import copyAddress from './copyAdress.png'
+import qrCode from './qrCode.png'
+import viewContact from './viewContact.png'
+import chevron_right from './chevron-right.png'

-export { label, footer_logo, filter_none, info, check_circle, cancel }
+export {
+  label,
+  footer_logo,
+  filter_none,
+  info,
+  check_circle,
+  cancel,
+  copyAddress,
+  qrCode,
+  viewContact,
+  chevron_right,
+}
--- a/src/assets/Icons/qrCode.png
+++ b/src/assets/Icons/qrCode.png
--- a/src/assets/Icons/viewContact.png
+++ b/src/assets/Icons/viewContact.png
--- a/src/assets/bg/Mask-group-bg.png
+++ b/src/assets/bg/Mask-group-bg.png
--- a/src/components/icons/index.vue
+++ b/src/components/icons/index.vue
@ -24,16 +24,34 @@ defineProps({
 .w-14-icon {
  width: 14px;
 }
+.w-16-icon {
+  width: 16px;
+}
 .w-24-icon {
  width: 24px;
 }
+.w-30-icon {
+  width: 30px;
+}
+.w-32-icon {
+  width: 32px;
+}
 .h-12-icon {
  height: 12px;
 }
 .h-14-icon {
  height: 14px;
 }
+.h-16-icon {
+  height: 16px;
+}
 .h-24-icon {
  width: 24px;
 }
+.h-30-icon {
+  height: 30px;
+}
+.h-32-icon {
+  height: 32px;
+}
 </style>
--- a/src/components/table/constant.ts
+++ b/src/components/table/constant.ts
@ -162,3 +162,30 @@ export const transactDetailsCollocate = {
    false,
  ], // 是否可复制
 }
+// tokensTable 表配置
+export const tokensTableCollocate = {
+  labels: ['serial number', 'Token', 'Adress', 'Total Supply', 'Holders Count'], // 表头
+  sequence: ['serialNumber', 'token', 'adress', 'totalSupply', 'holdersCount'], // 对应数据的变量名称
+  // 数据颜色
+  colorSequence: ['', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''],
+}
+// detailsbkTable表配置
+export const tokensDetailsCollocate = {
+  labels: [
+    'Balance',
+    'Tokens',
+    'Transactions',
+    'Transfers',
+    'Gas Used',
+    'Last Balance Update',
+  ], // 表头
+  sequence: [
+    'balance',
+    'tokens',
+    'transactions',
+    'transfers',
+    'gasUsed',
+    'lastBalanceUpdate',
+  ], // 对应数据的变量名称
+  colorSequence: ['', '', 'text-blue-65B5FF', 'text-blue-65B5FF', '', ''], // 数据颜色
+}
--- a/src/components/table/dBase/tHeader.vue
+++ b/src/components/table/dBase/tHeader.vue
@ -1,7 +1,7 @@
 <template>
  <div
-    :class="bgColor || ''"
    class="flex flex-1 flex-col rounded-t-[10px] px-[34px]"
+    :class="bgColor || ''"
  >
    <div class="flex flex-1 flex-row items-center py-[24px]">
      <div
--- a/src/components/table/dBase/tokensDetailsRow.vue
+++ b/src/components/table/dBase/tokensDetailsRow.vue
@ -0,0 +1,86 @@
+<template>
+  <div
+    class="flex desktop:flex-row desktop:py-[16px] mobile:flex-col mobile:items-start mobile:py-[18px]"
+    :class="valueColor ? 'desktop:py-[10px]' : ''"
+  >
+    <div class="flex flex-1 flex-row max-w-[255px] items-center">
+      <Icons url="info" :size="14" />
+      <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 mobile: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]"
+          :key="index"
+          :label="item + 'token'"
+          :value="item"
+          class="text-white"
+        />
+      </el-select>
+    </div>
+    <div
+      class="flex flex-1 flex-row justify-start items-center mobile:mt-[15px] text-white"
+      v-else
+    >
+      <p
+        :class="
+          valueColor
+            ? 'py-[6px] px-[12px] bg-black-006 rounded-[4px] text-blue-65B5FF'
+            : ''
+        "
+        class="text-[15px] font-normal leading-[24px]"
+      >
+        {{ value }}
+      </p>
+    </div>
+  </div>
+  <div
+    :class="isLast ? 'desktop:hidden' : ''"
+    style="border-bottom: 1px solid #3b3b3c"
+  />
+</template>
+
+<script setup lang="ts">
+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,
+  valueColor: String,
+  isCopy: Boolean,
+  isLast: Boolean,
+})
+
+onMounted(() => {
+  console.log(props.title)
+  if (props.title === 'Tokens') {
+    list.value = props.value
+  }
+})
+
+const list = ref<string | number[]>([])
+const active = ref('1token')
+</script>
+
+<style lang="scss">
+.tokens-select {
+  .el-input__wrapper {
+    background: #19191a;
+    .el-input__inner {
+      color: #fff;
+    }
+  }
+  .el-select .el-input.is-focus .el-input__wrapper {
+    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
+  }
+  .el-select .el-input__wrapper.is-focus {
+    box-shadow: 0 0 0 1px var(--el-select-border-color-hover) inset !important;
+  }
+}
+</style>
--- a/src/components/table/dBase/transactDetailsRow.vue
+++ b/src/components/table/dBase/transactDetailsRow.vue
@ -21,7 +21,8 @@
      v-if="title === 'Result'"
    >
      <div
-        class="flex flex-row items-center rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D"
+        class="flex flex-row items-center rounded-[4px] px-[12px] py-[4px] bg-green-2EAA7D w-[87px]"
+        :class="value === 'Success' ? 'bg-green-2EAA7D' : 'bg-red-C4403E'"
      >
        <Icons
          :url="value === 'Success' ? 'check_circle' : 'cancel'"
--- a/src/components/table/desktop/tokensDetails.vue
+++ b/src/components/table/desktop/tokensDetails.vue
@ -0,0 +1,104 @@
+<template>
+  <div
+    class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[34px] pt-[12px] pb-[16px]"
+  >
+    <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>
+      <div class="flex flex-row">
+        <Icons :url="'copyAddress'" :size="32" />
+        <div @click="open">
+          <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
+        </div>
+      </div>
+    </div>
+    <tokens-details-row
+      v-for="(item, index) in invariable.labels"
+      :key="index + item"
+      :title="item"
+      :value="data[invariable.sequence[index]]"
+      :value-color="invariable.colorSequence[index]"
+      :is-last="index === invariable.labels.length - 1"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch } 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: [1, 2, 3, 4],
+      transactions: '123321',
+      transfers: '123321',
+      gasUsed: '123321',
+      lastBalanceUpdate: '123321',
+    }
+  }, 0)
+})
+const data = ref<any>({
+  balance: '123321',
+  tokens: [1, 2],
+  transactions: '123321',
+  transfers: '123321',
+  gasUsed: '123321',
+  lastBalanceUpdate: '123321',
+})
+const invariable = {
+  ...tokensDetailsCollocate,
+}
+
+const qrURL = ref('https://example.com')
+onMounted(async () => {
+  qrURL.value = await Qrcode.toDataURL('https://baidu.com')
+})
+
+let open = () => {
+  // 二维码生成之后
+  ElMessageBox.alert(`<img src="${qrURL.value}" class="w-[318px]" />`, {
+    showClose: false,
+    closeOnClickModal: true,
+    dangerouslyUseHTMLString: true,
+    confirmButtonText: 'close',
+    confirmButtonClass: 'text-white btn_modal',
+    customClass: 'bg-modal-wrap',
+  })
+}
+</script>
+
+<style lang="scss">
+.bg-modal-wrap {
+  background: #2e2e31 !important;
+  border-radius: 28px !important;
+  border: none !important;
+  padding: 13px 186px 56px !important;
+  max-width: 100% !important;
+  width: 720px !important;
+  .el-message-box__btns {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 36px;
+    .btn_modal {
+      padding: 10px 28px 10px;
+      background: #8659ff;
+      border-radius: 8px;
+      border: none !important;
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+}
+</style>
--- a/src/components/table/desktop/tokensTable.vue
+++ b/src/components/table/desktop/tokensTable.vue
@ -0,0 +1,85 @@
+<template>
+  <div class="rounded-[10px] bg-black-19191A pb-[47px] rounded-b-[10px]">
+    <div class="bg-black-006 pt-[23px] pl-[34px]">
+      <div class="w-[368px]">
+        <el-input
+          v-model="input"
+          class="bg-black-006 h-[40px] pl-[16px] text-[12px] rounded-[8px] overflow-hidden hp-input-wrapper border-[1px] border-gray-555"
+          placeholder="Token name or symbol"
+          :prefix-icon="Search"
+          :input-style="{ background: '#262626' }"
+        />
+      </div>
+    </div>
+
+    <t-header
+      :list="invariable.labels"
+      bg-color="bg-black-006 rounded-t-[0px]"
+      textColor="text-white"
+    />
+    <div
+      v-for="(item, index) in currentData"
+      :key="item?.token + index"
+      @click="routerLink(item.token)"
+    >
+      <!-- :values="{ ...item, serialNumber: index + 1 }" -->
+      <bk-row
+        :sequence="invariable.sequence"
+        :values="item"
+        :colorSequence="invariable.colorSequence"
+      />
+    </div>
+
+    <div
+      class="bk-pagination flex flex-row items-center justify-end pt-[32px] pr-[34px]"
+    >
+      <el-pagination
+        :page-size="invariable.pageSize"
+        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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, reactive, ref } 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 router from '@src/routes'
+
+const props = defineProps({
+  data: Array as any,
+})
+const invariable = {
+  ...tokensTableCollocate,
+  pageSize: 10, // 每一页的数量
+}
+const paginationState = reactive({
+  totalPage:
+    Math.floor(props?.data.length / invariable.pageSize + 1) *
+    invariable.pageSize, // 总页数
+  totalData: dimensionalUpgrade(props?.data, invariable.pageSize), // 所有的分页数据
+})
+
+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]
+}
+// 路由跳转
+const routerLink = (id: string | number) =>
+  router.push(`/TableBlock/tokens/${id}`)
+</script>
+
+<style lang="scss">
+@import './zExtraStyle.scss';
+</style>
--- a/src/pages/BitcNFt/cards.vue
+++ b/src/pages/BitcNFt/cards.vue
@ -0,0 +1,70 @@
+<template>
+  <div class="flex flex-row">
+    <div
+      class="flex flex-col px-[34px] py-[24px] bg-black-19191A rounded-[10px] w-[698px]"
+    >
+      <p class="text-white text-[26px] font-medium">{{ title }}</p>
+      <div
+        class="flex flex-1 flex-row justify-between items-center pt-[20px] pb-[28px] border-b border-black-3B3B3C"
+      >
+        <p class="text-white">{{ value }}</p>
+        <div class="flex flex-row">
+          <Icons :url="'copyAddress'" :size="32" />
+          <div>
+            <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
+          </div>
+        </div>
+      </div>
+      <div class="flex flex-1 flex-row py-[24px] border-b border-black-3B3B3C">
+        <p
+          v-for="(item, index) in options"
+          class="text-white text-[15px]"
+          :class="index == 0 ? '' : 'ml-[72px]'"
+        >
+          {{ `${item?.value} ${item?.key}` }}
+        </p>
+      </div>
+      <div class="flex flex-1 flex-row pt-[24px] items-center">
+        <Icons url="viewContact" :size="30" />
+        <p class="text-blue-65B5FF ml-[12px]">View Contact</p>
+      </div>
+    </div>
+    <div
+      class="w-[462px] h-[282px] mack-bg ml-[40px]"
+      :class="url ? 'hidden' : ''"
+    >
+      <div
+        class="flex flex-1 flex-col w-full h-full bg-cover bg-center bg-no-repeat bg-mack-group pt-[52px] pl-[40px]"
+      >
+        <p class="text-white font-semibold text-[18px]">Total Supply</p>
+        <p class="text-white font-semibold text-[32px] mt-[36px]">
+          2689 bitcNFT
+        </p>
+      </div>
+    </div>
+    <div
+      class="w-[462px] h-[282px] py-[42px] px-[39px] bg-black-19191A rounded-[10px] ml-[40px]"
+      :class="url ? '' : 'hidden'"
+    >
+      <img class="w-full h-full" :src="url" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icons from '@src/components/icons/index.vue'
+defineProps({
+  title: String,
+  value: String,
+  options: Array as any,
+  url: String,
+})
+</script>
+
+<style lang="scss" scoped>
+.mack-bg {
+  background: linear-gradient(230.77deg, #733efb 8.52%, #4917c1 72.48%);
+  box-shadow: 0px 3.5px 5.5px rgba(0, 0, 0, 0.02);
+  border-radius: 10px;
+}
+</style>
--- a/src/pages/BitcNFt/centerContent.vue
+++ b/src/pages/BitcNFt/centerContent.vue
@ -0,0 +1,53 @@
+<template>
+  <div
+    class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
+  >
+    <Cards :title="'BitcNFt'" :value="value" :options="options" />
+    <div
+      class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
+    >
+      <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]">
+              <p class="text-white text-[14px] font-normal opacity-80">
+                There are no transactions for this Token Transfers.
+              </p>
+            </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]">
+              <p class="text-white text-[14px] font-normal opacity-80">
+                There are no transactions for this Token Holders.
+              </p>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Cards from './cards.vue'
+const active = ref('tokenTransfers')
+const value = '0x5c63abfad4563327a24741ec85aa0701530444c9'
+const options = [
+  {
+    key: 'ERC721',
+    value: '',
+  },
+  {
+    key: 'Addresses',
+    value: '2',
+  },
+  {
+    key: 'Transfers',
+    value: '0',
+  },
+]
+</script>
+
+<style scoped></style>
--- a/src/pages/BitcNFt/index.vue
+++ b/src/pages/BitcNFt/index.vue
@ -0,0 +1,79 @@
+<template>
+  <div class="bg-black">
+    <div class="bg-black desktop:pt-[76px] mobile:pt-[39px]">
+      <!-- pc端显示 -->
+      <div class="mobile:hidden">
+        <div class="flex flex-row px-[120px] justify-between items-center">
+          <div class="flex flex-1 justify-start items-center">
+            <img
+              :src="iconList.label"
+              class="w-[60px] h-[33px]"
+              @click="goBack"
+            />
+            <span
+              class="text-[34px] font-semibold text-white ml-[11.5px]"
+              @click="goBack"
+              >MetaForce Scan</span
+            >
+          </div>
+          <div class="flex flex-1 h-[52px] justify-end items-center">
+            <div class="flex flex-1 max-w-[554px]">
+              <el-input
+                v-model="input"
+                class="bg-black h-[52px] pl-[33px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
+                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+                :prefix-icon="Search"
+                :input-style="{ background: '#262626' }"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]"
+        ></div>
+      </div>
+      <!-- 移动端显示 -->
+      <div class="desktop:hidden">
+        <div
+          class="bg-home-page bg-cover bg-center bg-no-repeat w-full h-[219px] pt-[25px]"
+        >
+          <div class="flex flex-1 justify-center items-center">
+            <img :src="iconList.label" class="w-[40px] h-[24px]" />
+            <span class="text-[24px] font-semibold text-white ml-[16px]"
+              >MetaForce Scan</span
+            >
+          </div>
+          <div
+            class="flex flex-1 h-[40px] justify-center items-center mt-[32px]"
+          >
+            <div class="flex flex-1 px-[20px]">
+              <el-input
+                v-model="input"
+                class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
+                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+                :prefix-icon="Search"
+                :input-style="{ background: '#262626' }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <center-content />
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import Footer from '@src/components/footer.vue'
+import { ref } from 'vue'
+import * as iconList from '../../assets/Icons/index'
+
+import centerContent from './centerContent.vue'
+
+const input = ref()
+const goBack = () => router.back()
+</script>
+
+<style scoped></style>
--- a/src/pages/HomePage/index.vue
+++ b/src/pages/HomePage/index.vue
@ -5,11 +5,13 @@
    >
      <div class="flex flex-1 justify-center items-center">
        <img
-          :src="url"
+          :src="iconList.label"
          class="desktop:w-[70px] desktop:h-[40px] mobile:w-[40px] mobile:h-[24px]"
+          @click="jumpRoute('BitcNFT')"
        />
        <span
          class="desktop:text-[50px] mobile:text-[24px] font-semibold text-white ml-[16px]"
+          @click="jumpRoute('VNFT')"
          >MetaForce Scan</span
        >
      </div>
@ -66,7 +68,7 @@
        </p>
        <div
          class="flex flex-row justify-center items-center bg-black-19191A rounded-full desktop:py-[8px] desktop:px-[14px] mobile:py-[6px] mobile:px-[15px] cursor-pointer"
-          @click="jumpRoute"
+          @click="jumpRoute('TableBlock')"
        >
          <p
            class="text-white font-medium desktop:text-[14px] mobile:text-[12px]"
@ -97,31 +99,17 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from '@vue/runtime-core'
+<script setup lang="ts">
 import { Search, Right } from '@element-plus/icons-vue'
 import hpCard from '@src/components/base/hp_card.vue'
 import * as iconList from '../../assets/Icons/index'
 import router from '@src/routes'
 import HpTable from '@src/components/table/desktop/hpTable.vue'
 import Footer from '../../components/footer.vue'
+import { ref } from 'vue'

-export default defineComponent({
-  components: {
-    Search,
-    Right,
-    hpCard,
-    HpTable,
-    Footer,
-  },
-  setup() {
-    return {
-      Search: Search,
-      url: iconList.label,
-      footer_logo: iconList.footer_logo,
-      input: '',
 // 中间顶部渲染的数据
-      overview: [
+const overview = [
  {
    label: 'Block',
    value: '5880',
@ -138,9 +126,9 @@ export default defineComponent({
    label: 'Tokens',
    value: '5880',
  },
-      ],
+]
 // 表格数据
-      tableData: [
+const tableData = [
  {
    txnHash: '0123123',
    from: '0xshd......hhhh6',
@ -155,16 +143,9 @@ export default defineComponent({
    time: '2022-08-10 09:50:17',
    fee: '0.0000021',
  },
-      ],
-    }
-  },
-  methods: {
-    jumpRoute() {
-      // router.push({ name: 'TableBlock', params: {} })
-      router.push('TableBlock')
-    },
-  },
-})
+]
+const input = ref()
+const jumpRoute = (route: string) => router.push(route)
 </script>

 <style lang="sass">
--- a/src/pages/TableBlock/Tokens/details.vue
+++ b/src/pages/TableBlock/Tokens/details.vue
@ -12,11 +12,11 @@
      <span
        class="desktop:text-[26px] mobile:text-[18px] text-white font-medium desktop:ml-[12px] mobile:ml-[8px] cursor-pointer"
        @click="goBack"
-        >Block Details</span
+        >Adress Details</span
      >
    </div>
    <div class="mobile:hidden mt-[38px]">
-      <transact-details />
+      <token-details />
    </div>
    <div class="desktop:hidden mt-[38px]">
      <bk-mobile-details />
@ -27,20 +27,31 @@
    >
      <div class="details-tabs w-full">
        <el-tabs v-model="active" class="w-full">
-          <el-tab-pane label="Transactions" name="Block">
+          <el-tab-pane label="Transactions" name="transactions">
            <div class="flex flex-1 justify-center items-center h-[210px]">
              <p class="text-white text-[14px] font-normal opacity-80">
-                There are no transactions for this block.
+                There are no transactions for this Transactions.
              </p>
            </div>
          </el-tab-pane>
          <!-- 待扩展 -->
-          <!-- <el-tab-pane label="Transactions" name="Transactions">
-            <Transactions />
+          <el-tab-pane label="Token Transfers" name="tokenTransfers">
+            <div class="flex flex-1 justify-center items-center h-[210px]">
+              <p class="text-white text-[14px] font-normal opacity-80">
+                There are no transactions for this Token Transfers.
+              </p>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane
+            label="Internal transactions"
+            name="internalTransactions"
+          >
+            <div class="flex flex-1 justify-center items-center h-[210px]">
+              <p class="text-white text-[14px] font-normal opacity-80">
+                There are no transactions for this block.
+              </p>
+            </div>
          </el-tab-pane>
-          <el-tab-pane label="Tokens" name="Tokens">
-            <Tokens />
-          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
@ -49,13 +60,13 @@

 <script setup lang="ts">
 import { ArrowLeftBold } from '@element-plus/icons-vue'
-import transactDetails from '@src/components/table/desktop/transactDetails.vue'
+import TokenDetails from '@src/components/table/desktop/tokensDetails.vue'
 import BkMobileDetails from '@src/components/table/mobile/bkTableDetails.vue'

 import router from '@src/routes'
 import { ref } from 'vue'

-const active = ref('Block')
+const active = ref('internalTransactions')

 // 路由回退
 const goBack = () => router.back()
--- a/src/pages/TableBlock/Tokens/index.vue
+++ b/src/pages/TableBlock/Tokens/index.vue
@ -1,15 +1,114 @@
 <template>
-  <div class="h-[600px] w-full"></div>
+  <div class="w-full desktop:pt-[23px] mobile:pt-[13px]">
+    <div class="mobile:hidden">
+      <desktop-tokens-table :data="tableData" />
+    </div>
+    <div class="desktop:hidden">
+      <mobile-transact-table :data="tableData" />
+    </div>
+  </div>
 </template>

-<script lang="ts">
-import { defineComponent } from 'vue'
+<script setup lang="ts">
+import DesktopTokensTable from '@src/components/table/desktop/tokensTable.vue'
+import MobileTransactTable from '@src/components/table/mobile/transactTable.vue'
+import { onMounted, ref } from 'vue'

-export default defineComponent({
-  setup() {
-    return {}
+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)
+// })
 </script>

 <style scoped></style>
--- a/src/pages/TableBlock/Transactions/details.vue
+++ b/src/pages/TableBlock/Transactions/details.vue
@ -36,17 +36,19 @@
          </el-tab-pane>
          <!-- logs -->
          <el-tab-pane label="Logs" name="logs">
-            <div class="flex flex-1 flex-col px-[34px] pb-[30px]">
+            <div
+              class="flex flex-1 flex-col desktop:px-[34px] mobile:px-[20px] pb-[30px]"
+            >
              <p
-                class="flex flex-1 text-[22px] font-semibold text-white py-[26px]"
+                class="flex flex-1 desktop:text-[22px] mobile:text-[16px] font-semibold text-white desktop:py-[26px] mobile:py-[14px]"
              >
                Logs
              </p>
              <div
-                class="bg-black-2B2B2C text-white text-[15px] px-[34px] py-[16px] rounded-[10px]"
+                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 flex-row px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+                  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">
@ -54,33 +56,39 @@
                  </p>
                </div>
                <div
-                  class="flex flex-1 flex-row px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+                  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>
+                    <p class="break-all">
                      [1]
                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
                    </p>
-                    <p class="mt-[16px]">
+                    <p class="mt-[16px] break-all">
                      [1]
                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
                    </p>
-                    <p class="mt-[16px]">
+                    <p class="mt-[16px] break-all">
                      [1]
                      0xddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef
                    </p>
                  </div>
                </div>
                <div
-                  class="flex flex-1 flex-row px-[20px] py-[16px] border-b-[1px] border-b-black-3B3B3C"
+                  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>0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342</p>
+                  <p class="break-all">
+                    0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342
+                  </p>
                </div>
-                <div class="flex flex-1 flex-row px-[20px] py-[16px]">
+                <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>0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342</p>
+                  <p class="break-all">
+                    0x6c4bb7121d1cf8d395a3d295d1d9e5fa85f3a342
+                  </p>
                </div>
              </div>
              <upper-lower-switch :current="'page'" />
--- a/src/pages/VNFT/centerContent.vue
+++ b/src/pages/VNFT/centerContent.vue
@ -0,0 +1,94 @@
+<template>
+  <div
+    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'"
+    />
+    <div
+      class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"
+    >
+      <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 flex-col pt-[36px] px-[34px]">
+              <p class="text-white text-[22px] font-semibold">
+                Token Transfers
+              </p>
+              <div
+                class="mt-[10px] bg-black-2B2B2C rounded-[10px] px-[34px] py-[30px]"
+              >
+                <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>
+              <upper-lower-switch :current="'page1'" />
+            </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]">
+              <p class="text-white text-[14px] font-normal opacity-80">
+                There are no transactions for this Token Holders.
+              </p>
+            </div>
+          </el-tab-pane> -->
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Cards from '../BitcNFt/cards.vue'
+import transfersRow from './transfersRow.vue'
+import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
+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',
+  },
+]
+</script>
+
+<style scoped></style>
--- a/src/pages/VNFT/index.vue
+++ b/src/pages/VNFT/index.vue
@ -0,0 +1,82 @@
+<template>
+  <div class="bg-black">
+    <div class="bg-black desktop:pt-[76px] mobile:pt-[39px]">
+      <!-- pc端显示 -->
+      <div class="mobile:hidden">
+        <div class="flex flex-row px-[120px] justify-between items-center">
+          <div class="flex flex-1 justify-start items-center">
+            <img
+              :src="iconList.label"
+              class="w-[60px] h-[33px]"
+              @click="goBack"
+            />
+            <span
+              class="text-[34px] font-semibold text-white ml-[11.5px]"
+              @click="goBack"
+              >MetaForce Scan</span
+            >
+          </div>
+          <div class="flex flex-1 h-[52px] justify-end items-center">
+            <div class="flex flex-1 max-w-[554px]">
+              <el-input
+                v-model="input"
+                class="bg-black h-[52px] pl-[33px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
+                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+                :prefix-icon="Search"
+                :input-style="{ background: '#262626' }"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="bg-home-page bg-cover bg-center bg-no-repeat w-[1440px] h-[535.5px]"
+        ></div>
+      </div>
+      <!-- 移动端显示 -->
+      <div class="desktop:hidden">
+        <div
+          class="bg-home-page bg-cover bg-center bg-no-repeat w-full h-[219px] pt-[25px]"
+        >
+          <div class="flex flex-1 justify-center items-center">
+            <img :src="iconList.label" class="w-[40px] h-[24px]" />
+            <span class="text-[24px] font-semibold text-white ml-[16px]"
+              >MetaForce Scan</span
+            >
+          </div>
+          <div
+            class="flex flex-1 h-[40px] justify-center items-center mt-[32px]"
+          >
+            <div class="flex flex-1 px-[20px]">
+              <el-input
+                v-model="input"
+                class="bg-black h-[40px] pl-[15.69px] text-[12px] rounded-[100px] overflow-hidden hp-input-wrapper"
+                placeholder="Search by Address/Token symbol/Name/Transaction hash/Bock number"
+                :prefix-icon="Search"
+                :input-style="{ background: '#262626' }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <center-content />
+
+    <Footer />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import Footer from '@src/components/footer.vue'
+import router from '@src/routes'
+import { ref } from 'vue'
+import * as iconList from '../../assets/Icons/index'
+
+import centerContent from './centerContent.vue'
+
+const input = ref()
+
+const goBack = () => router.back()
+</script>
+
+<style scoped></style>
--- a/src/pages/VNFT/transfersRow.vue
+++ b/src/pages/VNFT/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,
+  value1: String,
+  value2: String,
+  value3: String,
+  state: String,
+})
+</script>
+
+<style scoped></style>
--- a/src/routes.ts
+++ b/src/routes.ts
@ -1,9 +1,14 @@
 import * as VueRouter from 'vue-router'
 import HomePage from './pages/HomePage/index.vue'
+
 import TableBlock from './pages/TableBlock/index.vue'
 import TableBlockIndex from './pages/TableBlock/Tabs.vue'
 import BlockDetails from './pages/TableBlock/Block/details.vue'
 import transactDetails from './pages/TableBlock/Transactions/details.vue'
+import tokensDetails from './pages/TableBlock/Tokens/details.vue'
+
+import BitcNFT from './pages/BitcNFt/index.vue'
+import AliasVNFT from './pages/VNFT/index.vue'

 const routes: VueRouter.RouteRecordRaw[] = [
  {
@ -13,6 +18,7 @@ const routes: VueRouter.RouteRecordRaw[] = [
  {
    path: '/TableBlock',
    component: TableBlock,
+    redirect: '/TableBlock/index',
    children: [
      {
        path: '/TableBlock/index',
@ -26,12 +32,24 @@ const routes: VueRouter.RouteRecordRaw[] = [
        path: '/TableBlock/tx/:id',
        component: transactDetails,
      },
+      {
+        path: '/TableBlock/tokens/:id',
+        component: tokensDetails,
+      },
    ],
  },
+  {
+    path: '/BitcNFT',
+    component: BitcNFT,
+  },
+  {
+    path: '/VNFT',
+    component: AliasVNFT,
+  },
 ]

 const router = VueRouter.createRouter({
-  // 通过 createWebHistory() 创建 History 模式。
+  // 创建 History 模式。
  history: VueRouter.createWebHistory(),
  routes,
 })
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -23,6 +23,7 @@ module.exports = {
        'gray-BBB': '#BBBBBB',
        'gray-7D7D7E': '#7D7D7E',
        'gray-C1C0C0': '#C1C0C0',
+        'gray-555': '#555555',
        'green-1DE9B6': '#1DE9B6',
        'green-2EAA7D': '#2EAA7D',
        'blue-65B5FF': '#65B5FF',
@ -35,6 +36,7 @@ module.exports = {
    screens: {},
    backgroundImage: {
      'home-page': "url('/src/assets/bg/homepage-topbg.png')",
+      'mack-group': "url('/src/assets/bg/Mask-group-bg.png')",
    },
  },
  plugins: [],
--- a/yarn.lock
+++ b/yarn.lock