
:popper-class="'popperClass'"
<el-pagination
class="pagination"
:popper-class="'popperClass'"
v-show="total > 0"
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[5, 10, 20, 30, 50]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<style lang="scss">
/*分页样式**/
.pagination {
.el-select__wrapper,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled,
.btn-prev,
.el-pagination.is-background .el-pager li,
.el-button--danger.is-plain {
box-shadow: #377fc7 0px 0px 0px 1px inset !important;
background: #001939 !important;
}
.el-checkbox__inner {
background: transparent;
}
.el-checkbox__inner::after {
color: #00e4ff;
}
.el-range-input,
.el-pagination__jump {
color: #fff;
}
.el-tag {
background-color: transparent;
border: none;
color: #fff;
}
.btn-prev,
.btn-next {
box-shadow: #377fc7 0px 0px 0px 1px inset !important;
background: #001939 !important;
color: #fff;
}
.el-button--primary,
.el-button + .el-button,
.el-select,
.el-pagination .el-select,
.el-select__wrapper {
background: #05379b;
}
.el-pagination.is-background .el-pager li.is-active {
color: #00e4ff;
}
.el-input__wrapper,
.el-select__wrapper,
.el-form-item__content,
.el-input {
box-shadow: #377fc7 0px 0px 0px 1px inset;
background: #062a4c;
}
.el-input__inner,
.el-pager li,
.el-pagination__total,
.el-select__suffix,
.el-select__placeholder {
color: #fff;
}
.el-select-dropdown__item.is-selected {
color: #00e4ff;
background: #062a4c;
}
.el-select-dropdown__item {
color: #fff;
}
.el-select-dropdown__item.hover {
background: #062a4c;
}
}
//分页下拉框样式
.popperClass {
background: #062a4c;
color: #fff;
box-shadow: #377fc7 0px 0px 0px 1px inset !important;
border: transparent !important;
//选中
.el-select-dropdown__item.is-hovering {
// color: #00e4ff;
color: #fff;
background: rgba(0, 0, 0, 0.3);
}
.el-select__popper.el-popper .el-popper__arrow::before {
border: 1px solid #001939;
}
.el-select-dropdown__item.is-selected{
color: #00e4ff;
}
}
</style>