You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.2 KiB
90 lines
2.2 KiB
<template>
|
|
<div class="rounded-[10px] bg-black-19191A pb-[20px] rounded-b-[10px]">
|
|
<transact-card
|
|
v-for="(item, index) in currentData"
|
|
:key="index"
|
|
:card-data="item"
|
|
/>
|
|
<div
|
|
class="bk-pagination flex flex-row items-center justify-center pt-[32px]"
|
|
>
|
|
<el-pagination
|
|
:page-size="invariable.pageSize"
|
|
layout="prev, pager, next"
|
|
v-model:current-page="currentPage"
|
|
:total="paginationState.totalPage"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { defineProps, reactive, ref } from 'vue'
|
|
import TransactCard from '../mBase/transactCard.vue'
|
|
import { dimensionalUpgrade } from '../tool'
|
|
|
|
const props = defineProps({
|
|
data: Array as any,
|
|
})
|
|
const invariable = {
|
|
pageSize: 5, // 每一页的数量
|
|
}
|
|
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]) // 当前页的数据
|
|
|
|
const handleCurrentChange = (page: number) => {
|
|
currentData.value = paginationState.totalData[page - 1]
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bk-pagination {
|
|
.el-pagination {
|
|
.btn-prev,
|
|
.btn-next {
|
|
background: #19191a;
|
|
}
|
|
.el-pager {
|
|
.number,
|
|
.btn-quicknext {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30px;
|
|
width: 30px;
|
|
margin: 0px 8px;
|
|
box-sizing: border-box;
|
|
background: #19191a;
|
|
border: 1px solid #ffffff;
|
|
border-radius: 5px;
|
|
color: #ffffff;
|
|
}
|
|
.is-active {
|
|
background: #8659ff;
|
|
border: 1px solid #8659ff;
|
|
}
|
|
}
|
|
.el-pagination__jump {
|
|
color: #ffffff;
|
|
}
|
|
.el-input__wrapper {
|
|
background: #19191a;
|
|
.el-input__inner {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.el-input__wrapper.is-focus {
|
|
box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
|
|
inset;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|