Modify the el-pagination pagination style

frame comes in color

 modified style

 the code

  <!-- 分页 -->
      <div class="pagination">
        <span style="font-size: 14px; color: #000000; margin-right: 8px"
          >共 {
   
   { total }} 条记录, 当前显示第 {
   
   { transfers.page }} 页</span
        >
        <el-pagination

          :background="isBackground"    //修改背景颜色
          @current-change="handleCurrentChange"
          :current-page.sync="transfers.page"
          :page-size="10"
          layout=" prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>


// data中定义

data({
     isBackground:true   //设置为true
    })

css style code

//  分页 前文字+分页
.pagination {
  margin-top: 23px;
  text-align: center;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Page box modification

<style>
/* 修改分页样式 */

.el-pagination.is-background .el-pager li {
  /* width: 32px;
  height: 32px !important;
  line-height: 32px; */
  /* font-family: ".PingFang SC"; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  color: #000000;
  border: 1px solid #e5e5ea;
}
/* 激活后的样式 */
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ffffff;
  color: #0366ed;
  border: 1px solid #0366ed;
  text-align: center;
}
/* 修改左右箭头样式 */
.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  /* background-color: red; */
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  background-color: #fff;
  color: #e5e5ea;
  border: 1px solid #e5e5ea;
}
</style>

There will also be some problems that the width and height are not square, which can be modified like this

/* 解决分页小问题 */
.el-pager {
  height: 35.5px !important;
}
.number,
.el-icon {
  height: 35.5px !important;
  line-height: 35.5px !important;
}