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, 0.6);
    background-color: #4167a0 !important;
    color: #fff !important;
  }
  .el-pagination__sizes .el-input__inner {
    border: 1px solid rgba(0, 213, 255, 0.6);
    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, 0.6);
    color: #fff !important;
  }
  .btn-prev,
  .btn-next {
    background-color: #4167a0 !important;
    border: 1px solid rgba(0, 213, 255, 0.6);
  }
  .btn-prev:not(.disabled),
  .btn-next:not(.disabled) {
    color: #fff !important;
    border: 1px solid rgba(0, 213, 255, 0.6);
  }
}

.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, 0.6) !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>