搜索

package.json

@@ -9,7 +9,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@33cn/chain33-rpc-api": "^1.5.29",
+    "@element-plus/icons": "^0.0.11",
     "axios": "^0.21.4",
+    "element-plus": "^1.1.0-beta.16",
     "vue": "^3.2.11",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",

src/App.vue

@@ -1,12 +1,18 @@
 <template>
   <router-view v-slot="{ Component }">
     <keep-alive :include="includeList">
-      <component :is="Component"></component>
+      <div id="layout">
+        <Header/>
+        <component :is="Component"></component>
+        <Footer/>
+      </div>
     </keep-alive>
   </router-view>
 </template>
 
 <script lang="ts" setup>
+import Footer from '@/components/Footer'
+import Header from '@/components/Header'
 import { ref, watch } from 'vue'
 import { RouteLocationNormalizedLoaded, useRoute } from 'vue-router'
 
@@ -21,7 +27,29 @@ watch(route, (to: RouteLocationNormalizedLoaded) => {
 </script>
 
 <style lang="less">
+* {
+  padding: 0;
+  margin: 0;
+}
+
 body {
-  background: #f7f8fa;
+  font-size: 14px;
+}
+
+#layout {
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+    min-height: calc(100vh - 164px);
+  }
+}
+
+.wrap {
+  width: 1200px;
+  margin: 0 auto;
+}
+
+.breadcrumb {
+  padding: 32px 0;
 }
 </style>

src/api/index.ts

@@ -1,7 +1,8 @@
 import auth from './interfaces/auth'
 import user from './interfaces/user'
-
+import block from './interfaces/block'
 export {
     auth,
-    user
+    user,
+    block
 }

src/api/interfaces/block.ts

@@ -0,0 +1,3 @@
+import Chain33Rpc from '@33cn/chain33-rpc-api'
+
+export default new Chain33Rpc('http://explorer.cnskl.com/api', null)

src/components/Banner.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="banner">
+    <div class="left-trans">
+      <!--      <div class="animation-area flex-between-stright">-->
+      <!--        <img src="../../../assets/img/computer/henxian-zuo.gif" class="line-left" alt="">-->
+      <!--        <img src="../../../assets/img/computer/box.png" class="box-left" alt="">-->
+      <!--        <div class="circle-area">-->
+      <!--          <img src="../../../assets/img/computer/cicle-out.png" class="left-out-cicle" alt="">-->
+      <!--          <img src="../../../assets/img/computer/cicle-inner.png" class="left-inner-cicle" alt="">-->
+      <!--        </div>-->
+      <!--      </div>-->
+    </div>
+    <div class="middle">
+      <div class="search-box">
+        <h1>区块链浏览器</h1>
+        <div class="search-component">
+          <input
+              type="text"
+              class="search-input"
+              placeholder="地址/哈希/区块高度"
+              v-model="searchKey"
+              @keyup.enter="onSearch"
+          >
+          <div class="search-btn" @click="onSearch">搜索</div>
+        </div>
+      </div>
+      <!-- <chain-info></chain-info> -->
+    </div>
+    <div class="right-trans">
+      <!--      <div class="animation-area flex-between-stright">-->
+      <!--        <div class="circle-area">-->
+      <!--          <img src="../../../assets/img/computer/cicle-out.png" class="right-out-cicle" alt="">-->
+      <!--          <img src="../../../assets/img/computer/cicle-inner.png" class="right-inner-cicle" alt="">-->
+      <!--        </div>-->
+      <!--        <img src="../../../assets/img/computer/box.png" class="box-right" alt="">-->
+      <!--        <img src="../../../assets/img/computer/henxian-you.gif" class="line-right" alt="">-->
+      <!--      </div>-->
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { block } from '@/api'
+import router from '@/router'
+import { useStore } from '@/store'
+import { ElMessage } from 'element-plus'
+import { computed, ref } from 'vue'
+
+const store = useStore()
+const searchKey = ref<string>('')
+const maxHeight = computed(() => store.getters.maxHeight)
+
+const onSearch = () => {
+  searchKey.value = searchKey.value.trim()
+
+  if (searchKey.value === '') {
+    return ElMessage({
+      message: '请输入 地址/哈希/区块高度',
+      type: 'warning',
+      offset: 300
+    })
+  }
+
+  const reg = /^[0-9]*[1-9][0-9]*$/
+  if (reg.test(searchKey.value)) {
+    let h = Number(searchKey.value)
+    if (h > 0 && h <= maxHeight.value) {
+      block.getBlockHash(h).then(res => {
+        if (res.error == null) {
+          router.push({ name: 'BlockDetail', params: { hash: res.result.hash } })
+        } else {
+          return ElMessage({
+            message: res.error,
+            type: 'warning',
+            offset: 300
+          })
+        }
+      }).catch(err => {
+        return ElMessage({
+          message: err.message,
+          type: 'warning',
+          offset: 300
+        })
+      }).finally(() => {
+        searchKey.value = ''
+      })
+    } else {
+      ElMessage({
+        message: '输入的区块高度有误',
+        type: 'warning',
+        offset: 300
+      })
+    }
+  } else if (searchKey.value.length == 66 || searchKey.value.length == 64) {
+    let value = searchKey.value.length === 64 ? '0x' + searchKey.value : searchKey.value
+
+    block.queryTransaction(value).then(res => {
+      if (res.error == null) {
+        console.log(res)
+        router.push({ name: 'TradeDetail', params: { hash: res.result.tx.hash } })
+      } else {
+        block.getBlockOverview(value).then(data => {
+          if (data.error == null) {
+            router.push({ name: 'BlockDetail', params: { hash: data.result.head.hash } })
+          } else {
+            return ElMessage({
+              message: res.error,
+              type: 'warning',
+              offset: 300
+            })
+          }
+        })
+      }
+    }).catch(err => {
+      return ElMessage({
+        message: err.message,
+        type: 'warning',
+        offset: 300
+      })
+    }).finally(() => {
+      searchKey.value = ''
+    })
+  } else {
+    block.getAddrOverview(searchKey.value).then(res => {
+      if (res.error == null) {
+        router.push({ name: 'Address', params: { address: searchKey.value } })
+      } else {
+        return ElMessage({
+          message: res.error,
+          type: 'warning',
+          offset: 300
+        })
+      }
+    }).catch(err => {
+      return ElMessage({
+        message: err.message,
+        type: 'warning',
+        offset: 300
+      })
+    }).finally(() => {
+      searchKey.value = ''
+    })
+  }
+}
+</script>
+
+<style scoped lang="less">
+.banner {
+  height: 556px;
+  background: #2458cd;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .middle {
+    height: 556px;
+    position: relative;
+    width: 1000px;
+    flex-shrink: 0;
+    background: url("/assets/images/ball.png") center center no-repeat;
+
+    .search-box {
+      width: 700px;
+      margin: 220px auto 0;
+      text-align: center;
+
+      h1 {
+        font-size: 56px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 74px;
+      }
+
+      .search-component {
+        margin-top: 41px;
+        position: relative;
+
+        .search-input {
+          box-sizing: border-box;
+          width: 700px;
+          height: 50px;
+          background: #FFFFFF;
+          border-radius: 39px;
+          border: none;
+          font-size: 16px;
+          padding: 0 150px 0 22px;
+          color: #838b9e;
+
+          &:focus {
+            outline: none;
+          }
+        }
+
+        .search-btn {
+          position: absolute;
+          right: 3px;
+          top: 3px;
+          width: 132px;
+          height: 44px;
+          line-height: 44px;
+          background: linear-gradient(90deg, #3892f4, #1a59e5);
+          border-radius: 39px;
+          font-size: 16px;
+          font-weight: 400;
+          color: #FFFFFF;
+          cursor: pointer;
+          transition: 0.3s;
+        }
+
+        .search-btn:hover {
+          opacity: 0.9;
+        }
+
+        .search-btn:active {
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/Footer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="footer ">
+    <div class="wrap">
+      @2021 域展科技 All Rights Reserved.Powered by 哈尔滨域展科技有限公司
+      黑ICP备19007143号-2
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style scoped lang="less">
+.footer {
+  height: 100px;
+  background-color: #409eff;
+  color: #FFFFFF;
+  text-align: center;
+  display: flex;
+  align-items: center;
+}
+</style>

src/components/Header.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="header">
+    <div class="wrap">
+      <div class="logo" @click="router.push({name: 'Home'})">
+        LOGO
+      </div>
+      <Nav/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRouter } from 'vue-router'
+import Nav from './Nav'
+
+const router = useRouter()
+</script>
+
+<style scoped lang="less">
+.header {
+  background-color: #2055ca;
+  z-index: 100;
+  position: relative;
+  color: #FFF;
+  display: flex;
+  border-bottom: 1px solid #6886d2;
+
+  .wrap {
+    display: flex;
+    justify-content: space-around;
+
+    .nav {
+      width: 600px;
+    }
+
+    .logo {
+      align-items: center;
+      display: flex;
+      margin-right: 32px;
+      height: 64px;
+      cursor: pointer;
+    }
+
+  }
+}
+</style>

src/components/Nav.vue

@@ -0,0 +1,85 @@
+<template>
+  <ul class="nav">
+    <li v-for="(item,index) in navList" :key="index" class="flex-center-stright">
+      <div class="nav-trans" @click="linkTo(item.route)">
+        <span :data-title="item.title">{{ item.title }}</span>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+// region 导航
+const navList = ref([
+  {
+    title: '首页',
+    route: 'Home'
+  },
+  {
+    title: '查看区块',
+    route: 'Block'
+  },
+  {
+    title: '查看数据',
+    route: 'Trade'
+  },
+  {
+    title: '解析数据',
+    route: 'Analytical'
+  },
+  {
+    title: '广播数据',
+    route: 'Broadcast'
+  }
+])
+const linkTo = (name) => {
+  router.push({ name })
+}
+// endregion
+</script>
+
+<style scoped lang="less">
+ul.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  cursor: pointer;
+  list-style: none;
+  height: 64px;
+
+  li {
+
+    .nav-trans {
+      overflow: hidden;
+      position: relative;
+      height: 30px;
+    }
+
+    span {
+      height: 30px;
+      line-height: 30px;
+      transition: all ease-out 0.3s;
+      display: inline-block;
+    }
+
+    span:after {
+      display: inline-flex;
+      position: absolute;
+      left: 0;
+      content: attr(data-title);
+      transform: translateY(100%);
+    }
+  }
+
+  li:hover {
+    span {
+      color: #EDCB17;
+      transform: translateY(-100%);
+    }
+  }
+}
+</style>

src/main.ts

@@ -1,3 +1,5 @@
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
@@ -5,6 +7,7 @@ import store, { key } from './store'
 
 const app = createApp(App)
 
+app.use(ElementPlus)
 app.use(store, key)
 app.use(router)
 app.mount('#app')

src/router/index.ts

@@ -2,6 +2,7 @@ import vuex from '@/store'
 import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router'
 import { createRouter, createWebHistory } from 'vue-router'
 import auth from './routers/auth'
+import block from './routers/block'
 import user from './routers/user'
 
 /**
@@ -19,6 +20,7 @@ const routes: MyRouteRecordRaw[] = [
         component: () => import(/* webpackChunkName: "home" */ '@/views/Home/index.vue')
     },
     ...auth,
+    ...block,
     ...user,
     {
         path: '/404',
@@ -48,12 +50,12 @@ const router = createRouter({
  * 路由守卫
  */
 router.beforeEach((to, from, next) => {
-    typeof to.meta !== 'undefined' && setDocumentTitle(<MyRouteMeta>to.meta)
+    typeof to.meta !== 'undefined' && setDocumentTitle(<MyRouteMeta>to.meta!)
 
     const isAuthenticated: string = vuex.getters.isLogin
 
     if (to.name !== 'AuthLogin' && to.meta.requiresAuth && !isAuthenticated) {
-        next({ name: 'AuthLogin', query: { to: to.path }})
+        next({ name: 'AuthLogin', query: { to: to.path } })
     } else if (isAuthenticated && (to.name == 'AuthLogin' || to.name == 'AuthRegister')) {
         next({ name: 'User' })
     } else {
@@ -65,8 +67,8 @@ router.beforeEach((to, from, next) => {
  * 设置文档标题
  * @param meta MyRouteMeta
  */
-function setDocumentTitle(meta: MyRouteMeta) {
-    document.title = meta?.title
+function setDocumentTitle (meta: MyRouteMeta) {
+    document.title = process.env.VUE_APP_TITLE + ' ' + meta?.title
     const ua = navigator.userAgent
     const regex = /\bMicroMessenger\/([\d.]+)/
     if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {

src/router/routers/block.ts

@@ -0,0 +1,82 @@
+import type { MyRouteRecordRaw } from '@/types/router'
+
+export default [
+    {
+        path: '/blocks',
+        name: 'Block',
+        meta: {
+            title: '查看区块',
+            keepAlive: true,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Block/index.vue')
+    },
+    {
+        path: '/blocks/:hash',
+        name: 'BlockDetail',
+        meta: {
+            title: '区块详情',
+            keepAlive: false,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Block/detail.vue')
+    },
+    {
+        path: '/trades',
+        name: 'Trade',
+        meta: {
+            title: '查看数据',
+            keepAlive: true,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Trade/index.vue')
+    },
+    {
+        path: '/trades/:hash',
+        name: 'TradeDetail',
+        meta: {
+            title: '数据详情',
+            keepAlive: true,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Trade/detail.vue')
+    },
+    {
+        path: '/analytical',
+        name: 'Analytical',
+        meta: {
+            title: '解析数据',
+            keepAlive: true,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Other/analytical.vue')
+    },
+    {
+        path: '/broadcast',
+        name: 'Broadcast',
+        meta: {
+            title: '广播数据',
+            keepAlive: true,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Other/broadcast.vue')
+    },
+    {
+        path: '/address/:address',
+        name: 'Address',
+        meta: {
+            title: '地址信息',
+            keepAlive: false,
+            requiresAuth: false,
+            showTabBar: true
+        },
+        component: () => import(/* webpackChunkName: "auth" */ '@/views/Address/index.vue')
+    }
+] as MyRouteRecordRaw[]
+

src/store/index.ts

@@ -16,6 +16,7 @@ export interface State {
     tokenType: string
     openId: string
     loginAt: number
+    maxHeight: number
     user: BaseInfo
     auth?: AuthState
     refresh?: RefreshState
@@ -29,6 +30,7 @@ export default createStore<State>({
         tokenType: '',
         openId: '',
         loginAt: 0,
+        maxHeight:110,
         user: {} as BaseInfo
     },
     getters: {
@@ -40,6 +42,9 @@ export default createStore<State>({
         },
         userInfo: (state: State): BaseInfo => {
             return state.user
+        },
+        maxHeight: (state: State): number => {
+            return state.maxHeight
         }
     },
     mutations: {
@@ -63,7 +68,10 @@ export default createStore<State>({
         },
         cleanUserInfo: (state: State): void => {
             state.user = {} as BaseInfo
-        }
+        },
+        setMaxHeight: (state: State, height: number): void => {
+            state.maxHeight = height
+        },
     },
     actions: {
         setUserInfo: ({ commit }, info: BaseInfo): void => {
@@ -71,6 +79,9 @@ export default createStore<State>({
         },
         setOpenId: ({ commit }, openId: string): void => {
             commit('setOpenId', openId)
+        },
+        setMaxHeight: ({ commit }, height: number): void => {
+            commit('setMaxHeight', height)
         }
     },
     modules: {

src/store/modules/auth.ts

@@ -45,7 +45,7 @@ export default {
                 auth.logout().then(() => {
                     commit('cleanAccessToken', null, { root: true })
                     commit('cleanUserInfo', null, { root: true })
-                    localStorage.removeItem(PERSISTED_KEY)
+                    localStorage.removeItem(PERSISTED_KEY as string)
                     resolve(true)
                 }).catch(err => {
                     reject(err.message)

src/views/Address/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>地址信息</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/Block/detail.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ name: 'Block' }">全部区块</el-breadcrumb-item>
+      <el-breadcrumb-item>区块详情</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/Block/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="container">
+    <div class="breadcrumb">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>全部区块</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
+    <div class="page-header">
+      <div class="title">
+        全部区块（28个区块）
+      </div>
+      <el-pagination
+          background
+          v-model:currentPage="currentPage"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="20"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+      >
+      </el-pagination>
+    </div>
+
+    <el-table :data="blocks" stripe class="table">
+      <template #empty>
+        <el-empty description="暂无数据"></el-empty>
+      </template>
+
+      <el-table-column prop="date" label="高度" width="100" align="center"/>
+      <el-table-column prop="date" label="区块哈希"/>
+      <el-table-column prop="date" label="数据量" width="180" align="center"/>
+      <el-table-column prop="date" label="上链时间" width="180" align="center"/>
+    </el-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+.page-header {
+  display: flex;
+  justify-content: space-between;
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #53657a;
+  }
+}
+
+.table {
+  margin-top: 20px;
+  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
+  border-radius: 2px;
+  font-size: 12px;
+}
+</style>

src/views/Home/index.vue

@@ -1,20 +1,11 @@
 <template>
-  <div class="home">
-    我是首页
-  </div>
+  <Banner/>
 </template>
 
 <script lang="ts" setup>
-import { useStore } from '@/store'
-import { BaseInfo } from '@/types/user'
-import { computed } from 'vue'
-
-const store = useStore()
-const info = computed<BaseInfo>(() => {
-  return store.getters.userInfo
-})
-</script>
-
-<style scoped>
+import Banner from '@/components/Banner'</script>
 
+<style scoped lang="less">
+.home {
+}
 </style>

src/views/Other/analytical.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>解析数据</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/Other/broadcast.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>广播数据</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/Trade/detail.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item :to="{ name: 'Trade' }">全部交易</el-breadcrumb-item>
+      <el-breadcrumb-item>交易详情</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+
+</style>

src/views/Trade/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="breadcrumb">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ name: 'Home' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>全部区块</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+
+  <div class="page-header">
+    <div class="title">
+      全部数据（65条数据）
+    </div>
+    <el-pagination
+        background
+        v-model:currentPage="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+    >
+    </el-pagination>
+  </div>
+
+  <el-table :data="blocks" stripe class="table">
+    <template #empty>
+      <el-empty description="暂无数据"></el-empty>
+    </template>
+
+    <el-table-column prop="date" label="高度" width="100" align="center"/>
+    <el-table-column prop="date" label="区块哈希"/>
+    <el-table-column prop="date" label="数据量" width="180" align="center"/>
+    <el-table-column prop="date" label="上链时间" width="180" align="center"/>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+
+import { ref } from 'vue'
+
+const blocks = ref([])
+</script>
+
+<style scoped lang="less">
+.page-header {
+  display: flex;
+  justify-content: space-between;
+
+  .title {
+    font-size: 16px;
+    font-weight: 500;
+    color: #53657a;
+  }
+}
+
+.table {
+  margin-top: 20px;
+  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
+  border-radius: 2px;
+  font-size: 12px;
+}
+</style>

yarn.lock

@@ -2,6 +2,13 @@
 # yarn lockfile v1
 
 
+"@33cn/chain33-rpc-api@^1.5.29":
+  version "1.5.29"
+  resolved "https://registry.yarnpkg.com/@33cn/chain33-rpc-api/-/chain33-rpc-api-1.5.29.tgz#767938f08b633079b4b110191ad7fc07bdbe51ce"
+  integrity sha512-6jpbI6aNIuFfSOPvgZvP4uw6JJVfXeMSWvACyQH9DBkIlb14WrP/p+zpw2i+2ZOLBeKnIs3vG8Mlp225VYWE5A==
+  dependencies:
+    json-bigint "^0.3.0"
+
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.14.5", "@babel/code-frame@^7.8.3":
   version "7.14.5"
   resolved "https://registry.nlark.com/@babel/code-frame/download/@babel/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
@@ -903,6 +910,11 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@element-plus/icons@^0.0.11":
+  version "0.0.11"
+  resolved "https://registry.yarnpkg.com/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
+  integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.nlark.com/@hapi/address/download/@hapi/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
@@ -978,6 +990,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.10.1":
+  version "2.10.1"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
+  integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.8.0"
   resolved "https://registry.nlark.com/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.8.0.tgz#84751d82a93019d5c92c0cf0e45ac59087cd2240"
@@ -1628,6 +1645,21 @@
   resolved "https://registry.nlark.com/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha1-trQKdiVCnSvXwigd26YB7QXcfxo=
 
+"@vueuse/core@~6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-6.1.0.tgz#8137c291cf49b11c2deda4d5079096e55b36fc28"
+  integrity sha512-6KienU5QOWKuDqvHytep14274IGKyLlACzXjifOrgDQMkqvWZIUnDhpckT/1+O8n8DN59d5wzzICZI/2sfGCyg==
+  dependencies:
+    "@vueuse/shared" "6.1.0"
+    vue-demi "*"
+
+"@vueuse/shared@6.1.0":
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-6.1.0.tgz#1375fd41acefe52f9a1842f3c6a8a348786535ba"
+  integrity sha512-teW0TUQryGnEprHeOI6oH8NPVJBirknxksEiNCtdEjIi8W7JSTg8JPO+e1XlGI6ly24NDlDXUDYaHJayiaXjuw==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.nlark.com/@webassemblyjs/ast/download/@webassemblyjs/ast-1.9.0.tgz?cache=0&sync_timestamp=1625473368618&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40webassemblyjs%2Fast%2Fdownload%2F%40webassemblyjs%2Fast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -2032,6 +2064,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.nlark.com/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
 
+async-validator@^3.4.0:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/async-validator/-/async-validator-3.5.2.tgz#68e866a96824e8b2694ff7a831c1a25c44d5e500"
+  integrity sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ==
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.nlark.com/async/download/async-2.6.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync%2Fdownload%2Fasync-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -2197,6 +2234,11 @@ big.js@^5.2.2:
   resolved "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
   integrity sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=
 
+bignumber.js@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.0.1.tgz#8d7ba124c882bfd8e43260c67475518d0689e4e5"
+  integrity sha512-IdZR9mh6ahOBv/hYGiXyVuyCetmGJhtYkqLBpTStdhEGjegpPlUawydyaF3pbIOFynJTpllEs+NP+CS9jKFLjA==
+
 binary-extensions@^1.0.0:
   version "1.13.1"
   resolved "https://registry.nlark.com/binary-extensions/download/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
@@ -3272,6 +3314,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.nlark.com/debug/download/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -3600,6 +3647,20 @@ electron-to-chromium@^1.3.830:
   resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.839.tgz?cache=0&sync_timestamp=1631671407431&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.839.tgz#27a5b21468e9fefb0e328a029403617f20acec9c"
   integrity sha1-J6WyFGjp/vsOMooClANhfyCs7Jw=
 
+element-plus@^1.1.0-beta.16:
+  version "1.1.0-beta.16"
+  resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.1.0-beta.16.tgz#4409d9e33d005693f6039f5ed1fe05e301b3170d"
+  integrity sha512-4BZEldnIfFZs5A/saRqaWE4PwTot4p3YZU7qsDr3ev2zp35pcCL9TtpWMLIvNTMxvxKew0HTDPTk9fAWIZFQrQ==
+  dependencies:
+    "@popperjs/core" "^2.10.1"
+    "@vueuse/core" "~6.1.0"
+    async-validator "^3.4.0"
+    dayjs "^1.10.7"
+    lodash "^4.17.21"
+    memoize-one "^5.2.1"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.1"
+
 elliptic@^6.5.3:
   version "6.5.4"
   resolved "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -5467,6 +5528,13 @@ jsesc@~0.5.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
   integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
+json-bigint@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/json-bigint/-/json-bigint-0.3.1.tgz#0c1729d679f580d550899d6a2226c228564afe60"
+  integrity sha512-DGWnSzmusIreWlEupsUelHrhwmPPE+FiQvg+drKfk2p+bdEYa5mp4PJ8JsCWqae0M2jQNb0HPvnwvf1qOTThzQ==
+  dependencies:
+    bignumber.js "^9.0.0"
+
 json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.nlark.com/json-parse-better-errors/download/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
@@ -5834,6 +5902,11 @@ memfs@^3.1.2:
   dependencies:
     fs-monkey "1.0.3"
 
+memoize-one@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.nlark.com/memory-fs/download/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -6232,6 +6305,11 @@ normalize-url@^3.0.0:
   resolved "https://registry.nlark.com/normalize-url/download/normalize-url-3.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fnormalize-url%2Fdownload%2Fnormalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.nlark.com/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -7507,6 +7585,11 @@ requires-port@^1.0.0:
   resolved "https://registry.nlark.com/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.nlark.com/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -8834,6 +8917,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.nlark.com/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha1-eGQcSIuObKkadfUR56OzKobl3aA=
 
+vue-demi@*:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
+  integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A==
+
 vue-eslint-parser@^7.0.0, vue-eslint-parser@^7.10.0:
   version "7.11.0"
   resolved "https://registry.nlark.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"