1 <template>
 2   <div class='container'>
 3         <div class="wheel">
 4             <!-- 背景圖 -->
 5           <img class="bj-img" src="../assests/draw_swipebox.png" alt="">
 6           <div class="wheel-pan">
 7               <!-- wheel-bg 就是要轉動的轉盤 我的是直接一張大圖 沒有分開 要是分開一張張圖就是下面的 prize-item和prize-icon-->
 8
 
             <div class="wheel-bg" :class="{freeze: freeze}" :style="`transform: rotate(${wheelDeg}deg)`">
 9                 <div class="prize-list">
10                     <div class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
11                         <div class="prize-item" :style="`transform: rotate(${(360/ prizeList.length) * index}deg)`">
12
 
                             <!-- <div class="prize-name"></div> -->
13                             <div class="prize-icon">
14                               <!-- <span v-show="!item.icon">{{ item.name }}</span> -->
15                               <!-- <img v-show="!item.name" :src="item.icon"> -->
16
 
                             </div>
17                         </div>
18                     </div>
19                 </div>
20             </div>
21             <!-- //   指標 -->
22             <div class="wheel-pointer" @click="onClickRotate"></div>
23           </div>
24         </div>
25   </div>
26 </template>

<scripttype="text/ecmascript-6"scoped> exportdefault{ name:'index', data(){ return{ active:'', freeze:false, clickType:true, wheelDeg:0, prizeNumber:10, prizeListOrigin:[], prizeList:[ { name:'大片點播劵', id:1 }, { name:'VR眼鏡', id:2 }, { name:'50元聯通話費', id:3 }, { name:'1個月會員包', id:4 }, { name:'愛奇藝電視果', id:5 }, { name:'2個月會員包', id:6 }, //{ //name:'50元聯通話費', //id:3 //}, //{ //name:'50元聯通話費', //id:3 //}, ] }; }, methods:{ post(){
}, onClickRotate(){ const{wheelDeg,prizeList}=this; constrandom=Math.round(Math.random()*(prizeList.length)-1); this.wheelDeg=wheelDeg-wheelDeg%360+prizeList.length*360+(360-360/prizeList.length*random)+20; console.log('prize',prizeList[random].name) } }, watch:{ prizeNumber(){ this.freeze=true this.wheelDeg=0
setTimeout(()=>{ this.freeze=false },0) } }, created(){ } } </script>
<stylelang='scss'scoped> .container{ width:100%; background:#F7F7F7; position:relative; .banner-bj{ display:block; width:100%; } .activity{ position:absolute; top:0; left:0; width:100%; height:auto; } .title-img{ width:5.64px; height:2.04px; display:block; margin:.5pxauto0; } .wheel{ width:600px; height:650px; display:flex; margin:0auto; justify-content:center; align-items:center; position:relative; .bj-img{ display:block; width:100%; } .wheel-pan{ position:absolute; width:460px; height:460px; left:89px; top:89px; overflow:hidden; } }

} .wheel-pointer{ width:120px; height:140px; border-radius:1000px; //background:yellow; //指標 background-image:url("../assests/fast_draw.png"); background-size:100%100%; position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); text-align:center; line-height:60px; z-index:8; } .wheel-bg{ width:100%; height:100%; border-radius:1000px; overflow:hidden; transition:transform3.5sease; // background-image:url("../assests/draw_jp.png"); background-size:100%100%; }
.freeze{ transition:none; //background:red; }
.prize-list{ width:100%; height:100%; position:relative; text-align:center; }
.prize-item-wrapper{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:2.7px; height:2.7px; }
.prize-item{ width:100%; height:100%; transform-origin:bottom; }
.prize-name{ padding:.2px0; }
.prize-icon{ img{ width:1px; height:1px; } span{ display:block; width:.3px; margin:0auto; line-height:.3px; font-size:.28px; color:#02464c; font-weight:bold; text-align:center; } } .activ{ width:7px; display:block; margin:0auto; background:rgba(255,150,166,0.5); padding:.4px.4px.4px.46px; position:relative; div{ text-align:center; //background-image:url("../assets/images/title.png"); background-size:100%100%; width:2.76px; height:.6px; margin:0auto; font-size:.4px; color:#f64a43; line-height:.6px; //font-weight:bold; } h2{ font-size:.3px; color:#fff; line-height:.34px; font-weight:bold; margin-top:.45px; } P{ font-size:.26px; color:#fff; line-height:.34px; margin-top:.1px; } .box{ width:4.5px; } img{ width:2.25px; height:2.23px; position:absolute; bottom:-.6px; right:-.1px; } } </style>