mall-web-ssr/components/common/page/pageComponent.vue

<template>
  <page :total="total" :page-size="pageSize" :current="current"
        show-elevator v-on:on-change="listenPage"></page>
</template>

<script>
  import Page from 'iview/src/components/page'
  import 'iview/dist/styles/iview.css'
  export default {
    props: {
      current: {
        default: 1
      },
      total: {
        default: 100
      },
      pageSize: {
        default: 10
      },
      showType: {
        default: 'show-elevator'
      }
    },
    methods: {
      listenPage: function (changedPage) {
        this.$emit('childEvent', changedPage)
      }
    },
    components: {
      Page
    }
  }
</script>

<style>
  .ivu-page{
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    float: right;
  }
  .ivu-page >li{
    margin: 0!important;
  }
  .ivu-page >li:hover{
    color: #23527c;
    background-color: #eee;
  }

  .ivu-page-item-jump-next, .ivu-page-item, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
    width: 33.64px;
    height: 30.8px!important;
    font-family: normal!important;
    border: 1px solid #ddd!important;
    border-radius: 0px!important;
  }
  .ivu-page >li >a{
    color: #337ab7;
    font-size: 12px;
  }

  .ivu-page-item-active{
    background-color: #5078cb!important;
    border-color: #5078cb!important;
    cursor: default!important;
  }
  .ivu-page-item-active >a{
    color: #fff!important;
    cursor: default!important;
  }
  .ivu-page-options-elevator input {
    width: 33.64px!important;
    height: 30.8px!important;
    text-align: center;

  }

</style>