diff --git a/src/views/Block/index.vue b/src/views/Block/index.vue
index 188dbf5..2c67fd1 100644
--- a/src/views/Block/index.vue
+++ b/src/views/Block/index.vue
@@ -13,10 +13,13 @@
       </div>
       <el-pagination
           background
-          :page-sizes="[10, 20, 30, 40]"
-          :page-size="20"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="400"
+          v-model:currentPage="currentPage"
+          :page-sizes="[10, 20, 40]"
+          :page-size="pageSize"
+          layout="prev,pager,next,sizes,jumper"
+          :total="maxHeight"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
       >
       </el-pagination>
     </div>
@@ -50,16 +53,15 @@
 import { block } from '@/api'
 import { useStore } from '@/store'
 import { computed, onBeforeUnmount, ref } from 'vue'
-import { useRouter } from 'vue-router'
 
 const store = useStore()
-const router = useRouter()
 const maxHeight = computed(() => store.getters.maxHeight)
 
 const start = maxHeight.value - 19
 const blockList = ref([])
 
-const interval = ref(0)
+// eslint-disable-next-line no-undef
+const interval = ref<NodeJS.Timeout | null>()
 
 interval.value = setInterval(() => {
   block.getLastHeader().then(res => {
@@ -72,12 +74,23 @@ interval.value = setInterval(() => {
 }, 1000)
 
 onBeforeUnmount(() => {
-  clearInterval(interval.value)
+  clearInterval(Number(interval.value))
 })
 
 block.getHeaders(start, maxHeight.value, false).then(res => {
   blockList.value = res.result.items.reverse()
 })
+
+const currentPage = ref<number>(1)
+const pageSize = ref<number>(20)
+
+const handleSizeChange = (e: number) => {
+  pageSize.value = e
+}
+const handleCurrentChange = (e) => {
+  currentPage.value = e
+}
+
 </script>
 
 <style scoped lang="less">