<template>
<div class="maindiv">
<el-row>
<el-col :span="6" v-for="(item, index) in currentPageData" :key="index" style="padding: 3px;">
<el-card :body-style="{ padding: '0px' }">
<img v-if="item.image" :src="item.image" class="image">
<div style="padding: 14px;">
<span>{{ item.title }}</span>
<div class="bottom clearfix">
<time class="time">{{ item.time }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
<!--添加Pagination组件-->
<div class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[4, 8, 12]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: "FileView",
data() {
return {
currentPage: 1,
pageSize: 8,
total: 10,
items: [
{
image:"https://img0.baidu.com/it/u=3558402622,3525872153&fm=253&fmt=auto&app=138&f=JPEG?w=718&h=500",
title:"好吃的汉堡",
time:"2024-03-25"
}
]
};
},
computed: {
currentPageData() {
return this.items.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.currentPage = 1;
},
handleCurrentChange(val) {
this.currentPage = val;
}
}
};
</script>
<style scoped>
.time {
font-size: 13px;
color: #999;
}
.bottom {
margin-top: 13px;
line-height: 12px;
}
.button {
padding: 0;
float: right;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.image {
width: 100%;
display: block;
}
.maindiv {
position: relative;
height: 580px;
}
.pagination-container {
position: absolute;
bottom: 10px;
right: 10px;
}
</style>