<template>
  <div class="pagination">
    <p>每页&nbsp;{{ pageSize }}&nbsp;条，共&nbsp;{{ total }}&nbsp;条记录</p>
    <el-pagination
      background
      :page-size="pageSize"
      :total="total"
      :current-page="1"
      prev-text="上一页"
      next-text="下一页"
      layout="prev, pager, next, jumper, ->, slot"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'Elpagination',
  data () {
    return {
      // 分页组件
      pageSize: 5,
      total: 100
    }
  },
  methods: {
    // 预警统计内分页组件切换分页
    changePage (currPage) {
      console.log('切换分页事件', currPage)
    }
  }
}
</script>

<style lang="scss" scoped>
// 该组件封装完毕
.pagination ::v-deep {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  background-color: rgba(96, 255, 246, 0.05);
  border: 1px solid rgba(65, 130, 148, 0.4);
  p {
    color: #fff;
    font-size: 14px;
  }
  .el-pagination {
    .btn-prev {
      background-color: rgba(55, 204, 196, 0.6);
      span {
        padding: 0 20px;
        color: #fff;
        font-size: 14px;
      }
    }
    .btn-next {
      background-color: rgba(55, 204, 196, 0.6);
      span {
        padding: 0 20px;
        color: #fff;
        font-size: 14px;
      }
    }
    input {
      background-color: rgba(96, 255, 246, 0.12) !important;
      border: 1px solid #2792a0;
      color: #fff;
    }
    .el-pagination__jump {
      color: #fff;
    }
    li {
      background-color: rgba(96, 255, 246, 0.12) !important;
      color: #fff !important;
      font-size: 14px;
    }
    .btn-prev:disabled,
    .btn-next:disabled {
      span {
        color: rgb(99, 99, 99) !important;
      }
    }
    .active {
      background-color: rgba(55, 204, 196, 0.6) !important;
    }
    li:hover {
      color: rgba(55, 204, 196, 1) !important;
    }
  }
}
</style>
