caimei-authentic-www/components/SimplePagination/index.vue

<template>
  <div class="simple-pagination p-2">
    <van-pagination
      v-model="currentPage"
      :total-items="total"
      :items-per-page="pageItems"
      :show-page-size="6"
      :force-ellipses="true"
      :mode="mode"
      @change="$emit('change', currentPage)"
    />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    pageItems: {
      type: Number,
      default: 10,
    },
  },
  data() {
    return {
      currentPage: 1,
    }
  },
  computed: {
    ...mapGetters(['isPc']),
    mode() {
      return this.isPc ? 'multi' : 'simple'
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .simple-pagination {
    display: flex;
    justify-content: center;

    .van-pagination {
      ::v-deep {
        .van-pagination__item {
          margin-left: 4px;
          margin-right: 4px;
          color: #bc1724;

          &:active {
            color: #fff;
            background-color: #bc1724;
          }
        }

        .van-pagination__prev,
        .van-pagination__next {
          background: transparent !important;
          color: #101010;
          &::after {
            border-color: transparent !important;
          }

          &:hover {
            color: #bc1724;
          }
        }

        .van-pagination__item--active {
          background-color: #bc1724 !important;
          color: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .van-pagination {
    ::v-deep {
      .van-pagination__prev,
      .van-pagination__next {
        color: #101010;
        &::after {
          border-color: transparent !important;
        }

        &:active {
          color: #fff;
          background-color: #bc1724;
        }
      }
    }
  }
}
</style>