源码：

<template>
  <swiper class="game-main" ref="mySwiper" :options="swiperOption">
    <swiper-slide v-for="i in 3" :key='i' class="item-group">
      <ul class="game-main-swiper">
        <li v-for="j in 28" :key='j'>
          <div class='item'
              :class="[sum(i, j) <= term
              ? [sum(i, j) <= finishedterm ? 'btn3' : 'btn2']
              : 'btn1']"
              ref="btn"
              v-show="sum(i, j) <= 82"
              @click="selectAnswer(sum(i, j))">
            <span class="num" v-show="sum(i, j) <= term">
              {{sum(i, j)}}
            </span>
          </div>
        </li>
      </ul>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'game', // 不能为 swiper

  components: {
    swiper,
    swiperSlide
  },

  data () {
    return {
      term: 10,  // 当前期数
      finishedterm: 5, // 该用户当前已完成的期数
    
      swiperOption: {
        pagination: {
          el: '.swiper-pagination'
        }
      }
    }
  },

  mounted() {
    // 跳转到哪一页
    this.$refs.mySwiper.swiper.slideTo(1, 1000, true)
  },

  methods: {
    sum(i, j) {
      return (i-1)*28 + j
    },
    selectAnswer(id) {
      console.log(id)
    }
  },
}
</script>

<style lang="scss" scoped>
.game-main{
  width: 750px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 32px;
  .game-main-swiper{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 15px;
    margin-top: 15px;
  }
  .item{
    width: 152px;
    height: 128px;
    border: 1px solid transparent;
    margin: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .num{
    color: #BA4C10;
    font-size: 53px;
    font-weight: bold;
    margin-bottom: 15px;
  }
  .btn1{
    background: url(https://upload-images.jianshu.io/upload_images/2163136-f079e7b5eab5404d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat;
    background-size: 100% 100%;
  }
  .btn2{
    background: url(https://upload-images.jianshu.io/upload_images/2163136-ca0488e0838affba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat;
    background-size: 100% 100%;
  }
  .btn3{
    background: url(https://upload-images.jianshu.io/upload_images/2163136-07029e41dd7df7d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) no-repeat;
    background-size: 100% 100%;
  }
}

.item-group{
  height: 1160px;
}
</style>

效果图