用vue写出一个抽奖页面

好的，以下是一个简单的抽奖页面示例：

<template>
  <div class="lottery">
    <div class="prizes">
      <div class="prize" v-for="(prize, index) in prizes" :key="index">
        {{ prize.name }}
      </div>
    </div>
    <button class="btn" @click="startLottery" :disabled="isRunning">
      {{ isRunning ? '抽奖中...' : '开始抽奖' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prizes: [
        { name: '一等奖', color: '#FF6B6B' },
        { name: '二等奖', color: '#FFE66D' },
        { name: '三等奖', color: '#6BFFB8' },
        { name: '参与奖', color: '#B8B8B8' }
      ],
      isRunning: false,
      timer: null,
      currentIndex: 0,
      maxIndex: 30
    };
  },
  methods: {
    startLottery() {
      // 防止重复点击
      if (this.isRunning) return;

      // 开始抽奖
      this.isRunning = true;
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.maxIndex) {
          clearInterval(this.timer);
          this.isRunning = false;
          this.currentIndex = 0;
          const prizeIndex = Math.floor(Math.random() * this.prizes.length);
          alert(`恭喜您获得${this.prizes[prizeIndex].name}!`);
        }
      }, 50);
    }
  }
};
</script>

<style>
.lottery {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.prizes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.prize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  margin: 10px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background-color: #FF6B6B;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  outline: none;
}

.btn:disabled {
  background-color: #B8B8B8;
  cursor: not-allowed;
}
</style>

这个页面包含一个奖项列表和一个开始抽奖的按钮。点击按钮后，页面会启动一个定时器，每隔一段时间更新当前选中的奖项位置，直到达到最大位置时停止定时器，并随机选取一项奖品作为中奖奖品。在这个示例中，我们使用了定时器和简单的动画效果来模拟转盘的效果。