SOURCE

function rotateCircle(num) {
    console.log('1111');
                let that = this;
                let pieces = 8; //转盘等分数
                let degree = 360 * 5 + (360 * num) / pieces;
                if (that.isRunning) return;
                that.isRunning = true;
                anime({
                    targets: "#circle",
                    rotate: degree + "deg",
                    duration: 3000,
                    easing: "easeInOutQuint",
                    complete: function () {
                        document.querySelector("#circle").style.cssText =
                            "transform: " + "rotate(" + (degree % 360) + "deg)";
                        that.isRunning = false;
                        that.isDrawing = false;
                    }
                });
            }

<div>
	<div class="cjSection">
		<div class="cj">
			<div id="circle">
				<ul>
					<li class="draw-item" :class="['draw-item-0' + (index + 1), 'lottery-unit-' + index]" v-for="(item,index) in prizeList" :key="index">
						<!-- <%--                                        <p>{{item.name}}</p>--%> -->
							<!-- <%--                                        <img :src="item.showImage" alt="">--%> -->
					</li>
				</ul>
			</div>
			<span @click="rotateCircle(1.5)" class="cjbtn"> </span>
                        </div>
                    <!-- </div>
                    <%--                    <prize-popup--%>
                    <%--                            v-show="popupIndex == 3"--%>
                    <%--                            :draw-ok="drawInfo.drawOk"--%>
                    <%--                            :draw-type="drawInfo.drawInfoType"--%>
                    <%--                            :address-id="drawInfo.addressId"--%>
                    <%--                            :draw-name="drawInfo.name"--%>
                    <%--                            @close-popup="popupIndex = 0"--%>
                    <%--                    ></prize-popup>--%> -->
                </div>

.cjSection {
    width: 7rem;
    height: 8.02rem;
    margin-top: 6.6rem;
    position: relative;
}
.cj {
    width: 16rem;
    height: 17.02rem;
    position: relative;
    overflow: hidden;
}
.cj #circle {
    width: 15.85rem;
    height: 15.85rem;
    border-radius: 50%;
    position: relative;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/160543/7/5187/80186/601765c9E789dc9a6/a25835723f3348e1.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.cjbtn {
    width: 4.49rem;
    height: 5.86rem;
    background-size: 100% 100%;
    background-image: url("//img10.360buyimg.com/imgzone/jfs/t1/150868/30/18123/8805/601765c9E7a8427c1/3e8b802729743f5f.png");
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 5rem;
    left: 5.75rem;
}
.cj #circle ul{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
}
.cj #circle .draw-item{
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
}
.cj #circle .draw-item p{
    width: 100%;
    text-align: center;
    font-size: 0.2rem;
}
.cj #circle .draw-item img{
    width: 1rem;
    height: auto;
    margin-top: 0.2rem;
}
.draw-item-01{
    top:0.6rem;
    left: 2.5rem;
}
.draw-item-02{
    top:1rem;
    left: 1.1rem;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.draw-item-03{
    top:2.5rem;
    left: 0.5rem;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.draw-item-04{
    top:4rem;
    left: 1.1rem;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.draw-item-05{
    top:4.5rem;
    left: 2.5rem;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.draw-item-06{
    top:3.9rem;
    left: 3.9rem;
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
}
.draw-item-07{
    top:2.5rem;
    left: 4.2rem;
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    -o-transform: rotate(-270deg);
    transform: rotate(-270deg);
}
.draw-item-08{
    top:1.2rem;
    left: 3.9rem;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    -o-transform: rotate(-315deg);
    transform: rotate(-315deg);
}