1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <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>
|