footer修改

components.d.ts

@@ -10,8 +10,6 @@ declare module '@vue/runtime-core' {
     BkRow: typeof import('./src/components/table/dBase/bkRow.vue')['default']
     BkTable: typeof import('./src/components/table/desktop/bkTable.vue')['default']
     BkTableDetails: typeof import('./src/components/table/desktop/bkTableDetails.vue')['default']
-    Card: typeof import('./src/components/table/base/card.vue')['default']
-    ColRow: typeof import('./src/components/table/mBase/colRow.vue')['default']
     DetailsRow: typeof import('./src/components/table/dBase/detailsRow.vue')['default']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -19,8 +17,6 @@ declare module '@vue/runtime-core' {
     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']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     Footer: typeof import('./src/components/footer.vue')['default']
@@ -32,7 +28,6 @@ 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']
-    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']
@@ -41,7 +36,6 @@ 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']
-    TRow: typeof import('./src/components/table/base/tRow.vue')['default']
     UpperLowerSwitch: typeof import('./src/components/base/UpperLowerSwitch.vue')['default']
   }
 }

src/App.vue

@@ -1,10 +1,17 @@
 <template>
-  <div>
+  <div class="bg-black w-full max-w-[1440px]">
     <!-- <router-link to="/">首页</router-link>&nbsp;
     <router-link to="/TableBlock">block</router-link>&nbsp;
     <hr /> -->
     <router-view></router-view>
   </div>
+  <div
+    class="w-full flex items-center justify-center bg-black-19191A desktop:mt-[108px] mobile:mt-[48px]"
+  >
+    <Footer />
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Footer from '@src/components/footer.vue'
+</script>
 <style scoped></style>

src/components/footer.vue

@@ -1,21 +1,44 @@
 <template>
   <div
-    class="bg-black-19191A desktop:mt-[108px] desktop:pt-[42px] desktop:px-[120px] mobile:mt-[48px] mobile:px-[20px] mobile:pt-[28px] pb-[26px]"
+    class="bg-black-19191A desktop:w-[1440px] desktop:pt-[42px] desktop:px-[120px] mobile:px-[20px] mobile:pt-[28px] pb-[26px]"
   >
     <div class="flex flex-1 desktop:flex-row mobile:flex-col justify-between">
       <!-- 左侧 -->
-      <div class="flex flex-row">
+      <div class="flex flex-row text-[15px] text-gray-BBB">
         <div class="w-[134px]">
-          <p class="pb-[22px] text-[15px] text-white">Tokens</p>
-          <p class="pb-[22px] text-[15px] text-gray-BBB">NFT</p>
-          <p class="pb-[22px] text-[15px] text-gray-BBB">VNFT</p>
-          <p class="pb-[22px] text-[15px] text-gray-BBB">KNFT</p>
-          <p class="pb-[22px] text-[15px] text-green-1DE9B6">More</p>
+          <p
+            class="pb-[22px] cursor-pointer text-white"
+            @click="jumpRoute('BitcNFT')"
+          >
+            Tokens
+          </p>
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">NFT</p>
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
+            VNFT
+          </p>
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
+            KNFT
+          </p>
+          <p
+            class="pb-[22px] cursor-pointer text-green-1DE9B6"
+            @click="jumpRoute('VNFT')"
+          >
+            More
+          </p>
         </div>
         <div class="w-[134px]">
-          <p class="pb-[22px] text-[15px] text-white">Blockchain</p>
-          <p class="pb-[22px] text-[15px] text-gray-BBB">View Blocks</p>
-          <p class="pb-[22px] text-[15px] text-gray-BBB">View Txs</p>
+          <p
+            class="pb-[22px] cursor-pointer text-white"
+            @click="jumpRoute('VNFT')"
+          >
+            Blockchain
+          </p>
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
+            View Blocks
+          </p>
+          <p class="pb-[22px] cursor-pointer" @click="jumpRoute('VNFT')">
+            View Txs
+          </p>
         </div>
       </div>
       <!-- 右侧 -->
@@ -43,6 +66,11 @@
 
 <script setup lang="ts">
 import * as iconList from '@src/assets/Icons/index'
+import router from '@src/routes'
+
+const jumpRoute = (route: string) => {
+  router.push(route)
+}
 </script>
 
 <style lang="scss" scoped></style>

src/components/table/desktop/tokensDetails.vue

@@ -39,7 +39,7 @@ onMounted(() => {
   setTimeout(() => {
     data.value = {
       balance: '123321',
-      tokens: [1, 2, 3, 4],
+      tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
       transactions: '123321',
       transfers: '123321',
       gasUsed: '123321',
@@ -49,7 +49,7 @@ onMounted(() => {
 })
 const data = ref<any>({
   balance: '123321',
-  tokens: [1, 2],
+  tokens: '0x5c63abfad4563327a24741ec85aa0701530444c9',
   transactions: '123321',
   transfers: '123321',
   gasUsed: '123321',
@@ -59,14 +59,10 @@ const invariable = {
   ...tokensDetailsCollocate,
 }
 
-const qrURL = ref('https://example.com')
-onMounted(async () => {
-  qrURL.value = await Qrcode.toDataURL('https://baidu.com')
-})
-
-let open = () => {
+let open = async () => {
+  const res = await Qrcode.toDataURL('https://baidu.com' as string)
   // 二维码生成之后
-  ElMessageBox.alert(`<img src="${qrURL.value}" class="w-[318px]" />`, {
+  ElMessageBox.alert(`<img src="${res}" class="w-[318px]" />`, {
     showClose: false,
     closeOnClickModal: true,
     dangerouslyUseHTMLString: true,

src/pages/BitcNFt/cards.vue

@@ -10,7 +10,7 @@
         <p class="text-white">{{ value }}</p>
         <div class="flex flex-row">
           <Icons :url="'copyAddress'" :size="32" />
-          <div>
+          <div @click="open">
             <Icons :url="'qrCode'" :size="32" class="ml-[16px]" />
           </div>
         </div>
@@ -53,12 +53,28 @@
 
 <script setup lang="ts">
 import Icons from '@src/components/icons/index.vue'
-defineProps({
+import { ElMessageBox } from 'element-plus'
+import Qrcode from 'qrcode'
+const props = defineProps({
   title: String,
   value: String,
   options: Array as any,
   url: String,
+  qrcodeurl: String,
 })
+
+let open = async () => {
+  const res = await Qrcode.toDataURL(props?.qrcodeurl as string)
+  // 二维码生成之后
+  ElMessageBox.alert(`<img src="${res}" class="w-[318px]" />`, {
+    showClose: false,
+    closeOnClickModal: true,
+    dangerouslyUseHTMLString: true,
+    confirmButtonText: 'close',
+    confirmButtonClass: 'text-white btn_modal',
+    customClass: 'bg-modal-wrap',
+  })
+}
 </script>
 
 <style lang="scss" scoped>

src/pages/BitcNFt/centerContent.vue

@@ -2,7 +2,12 @@
   <div
     class="tableBlock-tabs desktop:mt-[-435.5px] mobile:mt-[-51px] desktop:px-[120px] mobile:px-[20px]"
   >
-    <Cards :title="'BitcNFt'" :value="value" :options="options" />
+    <Cards
+      :title="'BitcNFt'"
+      :value="value"
+      :options="options"
+      :qrcodeurl="'https://baidu.com'"
+    />
     <div
       class="flex flex-1 w-full bg-black-19191A mt-[56px] rounded-[10px] overflow-hidden"
     >

src/pages/BitcNFt/index.vue

@@ -60,15 +60,14 @@
       </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 router from '@src/routes'
 
 import centerContent from './centerContent.vue'
 

src/pages/HomePage/index.vue

@@ -7,11 +7,9 @@
         <img
           :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>
@@ -94,8 +92,6 @@
         </div>
       </div>
     </div>
-    <!-- footer -->
-    <Footer />
   </div>
 </template>
 
@@ -105,7 +101,6 @@ 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'
 
 // 中间顶部渲染的数据

src/pages/TableBlock/index.vue

@@ -50,7 +50,6 @@
       </div>
     </div>
     <router-view></router-view>
-    <Footer />
   </div>
 </template>
 
@@ -58,7 +57,6 @@
 import { defineComponent } from '@vue/runtime-core'
 import { Search } from '@element-plus/icons-vue'
 import Block from './Block/index.vue'
-import Footer from '@src/components/footer.vue'
 import Transactions from './Transactions/index.vue'
 import Tokens from './Tokens/index.vue'
 import type { TabsPaneContext } from 'element-plus'
@@ -70,7 +68,6 @@ export default defineComponent({
     Block,
     Transactions,
     Tokens,
-    Footer,
   },
   setup() {
     return {

src/pages/VNFT/centerContent.vue

@@ -7,6 +7,7 @@
       :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'"
     />
     <div
       class="flex flex-1 w-full bg-black-19191A mt-[56px] pb-[28px] rounded-[10px] overflow-hidden"

src/pages/VNFT/index.vue

@@ -60,14 +60,11 @@
       </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'

src/style.scss

@@ -30,6 +30,7 @@ body {
   // place-items: center;
   // min-width: 320px;
   // min-height: 100vh;
+  background: #000000;
 }
 
 h1 {
@@ -61,8 +62,11 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1440px;
+  // max-width: 1440px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 0;
 }