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

<template>
  <div class="simple-pagination p-2" :class="'theme-' + themeType">
    <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,
    },
    themeType: {
      type: String,
      default: 'red',
    },
  },
  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;

    &.theme-black {
      .van-pagination {
        ::v-deep {
          .van-pagination__item {
            margin-left: 4px;
            margin-right: 4px;
            color: #000;

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

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

            &:hover {
              color: #000;
            }
          }

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

    &.theme-red {
      .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) {
  .simple-pagination {
    &.theme-red {
      ::v-deep {
        .van-pagination__prev,
        .van-pagination__next {
          color: #101010;
          &::after {
            border-color: transparent !important;
          }

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

    &.theme-black {
      ::v-deep {
        .van-pagination__prev,
        .van-pagination__next {
          color: #101010;
          &::after {
            border-color: transparent !important;
          }

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