zhgkpt-datav/components/BasicPagination/index.vue

<script>
import {Pagination as ElPagination } from 'element-ui'

export default {
  name: 'BasicPagination',
  components: {
    ElPagination
  }
}
</script>

<template >
  <el-pagination
  background
  popper-class="page-number"
  class="basic-pagination"
  v-bind="$attrs"
  v-on="$listeners"
  >
</el-pagination>
</template>

<style lang='less'>

.basic-pagination.el-pagination.is-background {
  .el-pagination__jump,.el-pagination__total{
    color: #fff !important;
  }
  .el-pagination__jump .el-input__inner{
    border: 1px solid rgba(0, 213, 255, .60);
    background-color: #4167A0 !important;
    color: #fff !important;
  }
  .el-pagination__sizes .el-input__inner{
    border: 1px solid rgba(0, 213, 255, .60);
    background-color: #4167A0 !important;
    color: #fff !important;
  }
  .el-pager li:not(.disabled).active {
    background-color: #2F7DF2 !important; 
    color: #fff !important;
  }
  .el-pager li.number,li.more {
    background-color: #4167A0 !important;
    border: 1px solid rgba(0, 213, 255, .60);
    color: #fff !important;
  }
  .btn-prev,.btn-next {
    background-color: #4167A0 !important;
    border: 1px solid rgba(0, 213, 255, .60);
  }
  .btn-prev:not(.disabled),.btn-next:not(.disabled) {
    color: #fff !important;
    border: 1px solid rgba(0, 213, 255, .60);
  }
}

.el-select-dropdown.el-popper.page-number{
  background-color: #4167A0 ;
}
.el-select-dropdown.el-popper.page-number .popper__arrow::after{
  border-bottom-color: #4167A0 ;
}
.el-select-dropdown.el-popper.page-number {
  border: 1px solid rgba(0, 213, 255, .60) !important;
}
.el-select-dropdown.el-popper.page-number li.el-select-dropdown__item span {
  color: #fff ;
}
.el-select-dropdown.el-popper.page-number li.el-select-dropdown__item.selected span {
  color: #2F7DF2 ;
}
.el-select-dropdown.el-popper.page-number .el-select-dropdown__item.hover {
  background-color: #2F7DF2;
}
.el-select-dropdown.el-popper.page-number li.el-select-dropdown__item.hover.selected span {
  color: #fff !important;
}

</style>