效果图如下：

HTML代码：

<template> <div class="luckDraw"> <title-bar :title="title"></title-bar> <div class="container"> <div class="turntable-wrapper"> <div class="luck-wrapper"> <p class="integral">我的积分: <span>1000</span></p> <ul class="nineGrid"> <li class="row"> <div v-for="(n, key) in 3" :key="n" :class="index === key ? `active` : ``"> <div class="wrapper"> <img src="../../assets/luck-icon.png" alt=""> <p>8金转</p> </div> <div class="mask"></div> </div> </li> <li class="row"> <div :class="index === 7 ? 'active': ''"> <div class="wrapper"> <img src="../../assets/luck-icon.png" alt=""> <p>128金转</p> </div> <div class="mask"></div> </div> <div class="getLuck" @click="startLottery"> <p>立即<br>抽奖</p> </div> <div :class="index === 3 ? 'active': ''"> <div class="wrapper"> <img src="../../assets/luck-icon.png" alt=""> <p>128金转</p> </div> <div class="mask"></div> </div> </li> <li class="row"> <div v-for="(n, key) in 3" :key="n" :class="index === 6-key ? `active` : ``"> <div class="wrapper"> <img src="../../assets/luck-icon.png" alt=""> <p>256金转</p> </div> <div class="mask"></div> </div> </li> </ul> </div>  <p class="share">分享领积分 <i class="icon-go"></i></p>  <div class="rule"> <p class="rule-title">活动规则</p> <ul class="rule-main"> <li>1、活动时间：2017年9月8日起；</li> <li>2、活动期间，股事汇用户每次抽奖消耗20积分，抽奖次数不限</li> <li>3、金钻可用于向投顾提问、送礼、赞赏；</li> <li>4、积分赚取：每日签到、分享文章/问答/直播间、点赞、金钻充值均可获得积分哦</li> <li>5、活动最终解释权归股事汇所有。</li> </ul> </div>  <div></div> </div>  <LuckToast :showToast="showToast" :toastType="toastType" @closeToast="closeToast" @startLottery="startLottery"></LuckToast> </div> </div></template>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

SCSS样式：

@import "~base"; .luckDraw {  .turntable-wrapper { padding: 0 px3rem(38); position: relative; @include background-cover("background-luck.png"); padding-top: px3rem(121);  .luck-wrapper { width: px3rem(300); height: px3rem(377); margin: 0 auto; position: relative; @include background-cover("background-turntable.png");  .integral { width: 100%; color: #6d2d00; font-size: px3rem(16); font-weight: normal; text-align: center; position: absolute; top: px3rem(58);  span { font-weight: 600; color: #ff2f4d; } }  .nineGrid { position: absolute; top: px3rem(86); left: 50%; margin-left: px3rem(-130); width: px3rem(260); height: px3rem(260);  li { height: px3rem(80); display: flex; margin-top: px3rem(5);  > div { flex: 1; margin-right: px3rem(5); height: 100%; text-align: center; position: relative;  .wrapper { width: 100%; height: 100%; margin: 0; @include background-cover("background-grid.png"); }  img { width: px3rem(46); height: px3rem(38); vertical-align: middle; margin-top: px3rem(8); }  .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; border-radius: px3rem(10); background-color: #000; display: none; } }  > div.active { .mask { display: block; } }  > div:first-child { margin-left: px3rem(5); }  > div.getLuck { @include background-cover("background-getLuck.png"); font-size: 0;  p { font-size: px3rem(20); font-weight: 600; color: #fff; line-height: 1.1; margin-top: px3rem(11); } } }  li:last-child { margin-bottom: px3rem(5); } } }  .share { width: px3rem(160); height: px3rem(42); margin: 0 auto; text-align: center; line-height:px3rem(42); @include background-cover("luckShrae.png"); margin-top: px3rem(22); color: #6d2d00; font-size: px3rem(16); font-weight: 600;  .icon-go { @include size(30); @include background-cover("goShare-icon.png");  display: inline-block; vertical-align: middle; margin-bottom: px3rem(2); } }  .rule { margin-top: px3rem(14); color: #fff; font-size: px3rem(14); padding-bottom: px3rem(39);  .rule-title { text-align: center; position: relative; font-size: px3rem(16); margin-bottom: px3rem(14); }  .rule-title:before, .rule-title:after { content: ''; position: absolute; top: 52%; background: #fff; width: 30%; height: px3rem(1); }  .rule-title:before { left: 0; }  .rule-title:after { right: 0; } } }}

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

JS代码：

// import Utils from 'utils'import TitleBar from 'components/TitleBar.vue'import LuckToast from 'components/luckToast.vue' export default { name: 'luckDraw',  components: { TitleBar, LuckToast, },  data () { return { title: '积分转盘', index: -1, // 当前转动到哪个位置，起点位置 count: 8, // 总共有多少个位置 timer: 0, // 每次转动定时器 speed: 200, // 初始转动速度 times: 0, // 转动次数 cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节 prize: -1, // 中奖位置 click: true, showToast: false, toastType: 'luck', } },  props: {  },   methods: { // 开始抽奖 startLottery () { if (!this.click) { return } this.closeToast() this.speed = 200 this.click = false this.startRoll() },  // 开始转动 startRoll () { this.times += 1 // 转动次数 this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化  // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置 if (this.times > this.cycle + 10 && this.prize === this.index) { clearTimeout(this.timer) // 清除转动定时器，停止转动 this.prize = -1 this.times = 0 this.click = true this.showToast = true this.toastType = 'comeOn' console.log('你已经中奖了') } else { if (this.times < this.cycle) { this.speed -= 10 // 加快转动速度 } else if (this.times === this.cycle) { // 随机获得一个中奖位置 const index = parseInt(Math.random() * 10, 0) || 0 this.prize = index if (this.prize > 7) { this.prize = 7 } console.log(`中奖位置${this.prize}`) } else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index + 1)) { this.speed += 110 } else { this.speed += 20 }  if (this.speed < 40) { this.speed = 40 } this.timer = setTimeout(this.startRoll, this.speed) } },  // 每一次转动 oneRoll () { let index = this.index // 当前转动到哪个位置 const count = this.count // 总共有多少个位置 index += 1 if (index > count - 1) { index = 0 } this.index = index },  // 关闭弹出框 closeToast () { this.showToast = false }, },  beforeMount () {  },  created () {  },  beforeDestroy () {  },}

对前端全栈工程师感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的前端全栈工程师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！