
<template>
<div class="box">
    <el-pagination
        background
        layout="->,prev, total,pager, next,jumper"
        :total="1000"
        :page-size="3"
        :pager-count="5"
        small
        >
</el-pagination>
</div>
</template>

<script>
export default {
  name: '',
  components: {},
  data () {
    return {
    }
  },
  created () { },
  mounted () { },
  methods: { },
  computed: {}
}
</script>
<style scoped lang='scss'>
.box{
   background-color: transparent !important;

}

::v-deep .el-pagination.is-background .btn-prev{
 background-color: transparent !important;
   border: 1px solid #123864;
   color: #579ACF;
}
::v-deep  .el-pagination.is-background .btn-next{
     background-color: transparent !important;
   border: 1px solid #123864;
   color: #579ACF;
}
::v-deep  .el-pagination.is-background .el-pager li{
  background-color: transparent !important;
   border: 1px solid #123864;
   color: #579ACF;
}

::v-deep .el-pagination.is-background.el-pager li:not(.disabled).active{
  background: rgba(20,131,242,0.2) !important;
  border: 1px solid #1483F2;
  border-radius: 4px;
  color:#fff;
}
::v-deep .el-pagination__jump{
    margin: 0;
    color: #2668D6;
    .el-input__inner{
        background-color: transparent !important;
        border: 1px solid #123864;
        color: #2668D6;

    }
}
::v-deep .el-pagination__total{
        color: #2668D6;

}
::v-deep .el-pagination.is-background .el-pager li:hover{
   background: rgba(20,131,242,0.2) !important;
   border: 1px solid #1483F2;
   border-radius: 4px;
   
 }
 ::v-deep .el-pager li.active{
   background: rgba(20,131,242,0.2) !important;
   border: 1px solid #1483F2;
   border-radius: 4px;

 }


  
</style>
