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 {
    @include useTheme() {
      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: fetch('color');

              &:active {
                color: #fff;
                background-color: fetch('color');
              }
            }

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

              &:hover {
                color: fetch('color');
              }
            }

            .van-pagination__item--active {
              background-color: fetch('color') !important;
              color: #fff;
            }
          }
        }
      }
    }
  }
}

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

            &:active {
              color: #fff;
              background-color: fetch('color');
            }
          }
        }
      }

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

            &:active {
              color: rgb(236, 216, 216);
              background-color: #000;
            }
          }
        }
      }
    }
  }
}
</style>