路由

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {  path: '/home',    component: resolve => require(['../components/home'], resolve) },
    {  path: '/coin',    component: resolve => require(['../components/game/coin'], resolve) },
    {  path: '/onedice', component: resolve => require(['../components/game/onedice'], resolve)    },
    {  path: '/twodice', component: resolve => require(['../components/game/twodice'], resolve),    },
    {  path: '/roller',  component: resolve => require(['../components/game/roller'], resolve),    },
    {  path: '/questions',component: resolve => require(['../components/questions/questions'], resolve), },
  ]
})

onedice

<template>
  <div class="dice_wrap">
    <div class="title">
      <img src="/static/images/dice_white.png" alt="">
      <span>One Dice</span>
    </div>
    <div class="wrap">
      <div class="dice" v-for="(item,index) in dices" :key="item.id" :class="item.active ? 'active' : ''" @click="chooseOptions(index)"></div>
    </div>
    <p>Choose the dice number(s) to bet on </p>
  </div>
</template>

<script>
  import myUtils from '../../utils'
  export default {
    name: 'number',
    data() {
      return {
        score: 0,
        dices: [     
          {           
            id: 1,
            active: true
          },
          {
            id: 2,
            active: false
          },
          {
            id: 3,
            active: false
          },
          {
            id: 4,
            active: false
          },
          {
            id: 5,
            active: false
          },
          {
            id: 6,
            active: false
          },
        ]
      }
    },
    mounted () {},
    methods:{
      chooseOptions(index) {
        this.dices.map((item,i) => {
          if(index === i) {
             if(item.active) {
               item.active = false;
               this.score--;
             }else {
               if(this.score < 5) {
                 item.active = true;
                 this.score++;
               }
             }
          }
        });
      },
    },
  }
</script>


<style scoped lang="scss">
  * {
    box-sizing: border-box;
  }
  .dice_wrap {
    margin: 20px 0 40px 0;
    .title {
      margin: 20px 0 40px 0;
      img {
        width: 33px;
        height: 33px;
      }
      span {
        font-size: 42px;
        color: #ffffff;
      }
    }
    p{
      font-size: 12px;
      margin-top: 30px;
    }
    .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 200px;
      margin-left: 50px;
      .dice {
        display: flex;
        margin-top: 20px;
        margin-right: 10px;
        width: 49px;
        height: 49px;
        cursor: pointer;
        background-size: contain;
        border: 1px dashed #ffffff;
        transition: all .3s;
        &:nth-child(3n + 0) {
          margin-right: 0;
        }
        &:nth-child(1) {
          background-image: url("/static/images/dice1_op.png");
        }
        &:nth-child(1).active {
          background-image: url("/static/images/dice1_bg.png");
        }
        &:nth-child(2) {
          background-image: url("/static/images/dice2_op.png");
        }
        &:nth-child(2).active {
          background-image: url("/static/images/dice2_bg.png");
        }
        &:nth-child(3) {
          background-image: url("/static/images/dice3_op.png");
        }
        &:nth-child(3).active {
          background-image: url("/static/images/dice3_bg.png");
        }
        &:nth-child(4) {
          background-image: url("/static/images/dice4_op.png");
        }
        &:nth-child(4).active {
          background-image: url("/static/images/dice4_bg.png");
        }
        &:nth-child(5) {
          background-image: url("/static/images/dice5_op.png");
        }
        &:nth-child(5).active {
          background-image: url("/static/images/dice5_bg.png");
        }
        &:nth-child(6) {
          background-image: url("/static/images/dice6_op.png");
        }
        &:nth-child(6).active {
          background-image: url("/static/images/dice6_bg.png");
        }
      }
    }
  }

</style>