sannongzixunwang_web/components/home/Pagination.vue

<template>
    <div class="pagination">
        <el-pagination size="small" background layout="prev, pager, next" :total="50" class="mt-4" prev-text="上一页"
            next-text="下一页" />
    </div>
</template>

<script setup>
import { ElPagination } from 'element-plus'
</script>

<style lang="less" scoped>
.pagination {
    width: 508px;
    height: 34px;

    /deep/.el-pagination.is-background .btn-next,
    /deep/.el-pagination.is-background .btn-prev {
        width: 70px;
        height: 34px;
        margin: 0px 10px;
        border-radius: 4px;
    }

    /deep/.el-pagination.is-background .el-pager li {
        margin: 0px 10px;
        width: 38px;
        height: 34px;
        border-radius: 4px;
    }

    /deep/.el-pagination.is-background .btn-next.is-active,
    /deep/.el-pagination.is-background .btn-prev.is-active,
    /deep/.el-pagination.is-background .el-pager li.is-active {
        background-color: #028e21;
        color: #fff;
    }

    /deep/.el-pager li.is-active,
    /deep/.el-pager li:hover {
        color: #028e21;
    }

    /deep/.el-pagination button.is-active,
    /deep/.el-pagination button:hover {
        color: #028e21;
    }
}
</style>