转盘小游戏vue

- html部分

<!-- 转盘 -->
<template>
  <div>
    <div class="outside">
      <ul class="gift-container" :style="rotdeg">
        <li
          v-for="(item, index) in prizeList"
          :key="index"
          :style="{'transform': `rotate(${index * 360 / prizeList.length}deg)`,'background':`url(${item.Pictures}) no-repeat top center`}"
        >
          <span>{{item.Name}}</span>
          <i :style="{'background':`url(${item.iconpic}) no-repeat center`}"></i>
          <!-- <img :src="item.Pictures || DiscImg" alt /> -->
        </li>
      </ul>
      <img src="../assets/img/Game/zhizhen.png" alt class="zhizhen" @click="move"/>
      <!-- <div class="disc-list" :style="{transform:rotateAngle,transition:tranInof}"></div> -->
    </div>
  </div>
</template>

**

• js:

**

<script>
export default {
  data() {
    return {
      prizeList: [
        {
          length: 8,
          Name: "1",
          Pictures: require("../assets/img/Game/zp1.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "2",
          Pictures: require("../assets/img/Game/zp2.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "3",
          Pictures: require("../assets/img/Game/zp3.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "4",
          Pictures: require("../assets/img/Game/zp1.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "5",
          Pictures: require("../assets/img/Game/zp2.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "6",
          Pictures: require("../assets/img/Game/zp3.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "7",
          Pictures: require("../assets/img/Game/zp1.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "8",
          Pictures: require("../assets/img/Game/zp2.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
        {
          length: 8,
          Name: "6",
          Pictures: require("../assets/img/Game/zp3.png"),
          iconpic:require("../assets/img/Game/iqiy.png")
        },
      ],
      DiscImg: require("../assets/img/Game/zp1.png"),
      rotdeg:0,
      x:0
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods:{
    move:function(){
      var deg = 0;
      deg = this.x + 920;
      this.x=deg;
      this.rotdeg="-webkit-transform:rotate("+deg+"deg)"||"-moz-transform:rotate("+deg+"deg)"||"-o-transform:rotate("+deg+"deg)"||"transform:rotate("+deg+"deg)"
    }
  }
};
</script>

- css:

<style scoped>
/* @import url(); 引入css类 */
@import '../assets/css/sprite.css';
.gift-container {
  width: 15em;
  height: 15em;
  display: block;
  margin: 0 auto;
  transition: all 10s cubic-bezier(0.5, 1, 0.1, 1);
  -moz-transition: all 10s cubic-bezier(0.5, 1, 0.1, 1); /* Firefox 4 */
  -webkit-transition: all 10s cubic-bezier(0.5, 1, 0.1, 1); /* Safari 和 Chrome */
  -o-transition: all 10s cubic-bezier(0.5, 1, 0.1, 1); /* Opera */
  -ms-transition: all 10s cubic-bezier(0.5, 1, 0.1, 1);
  background: steelblue;
  border-radius: 50%;
}
.gift-container > li {
  width: 15em;
  height: 15em;
  position: absolute;
  background-size: 5.2em auto !important;
}

.gift-container > li > i {
  width: 1em;
  height: 1em;
  display: block;
  margin: 0 auto;
  margin-top: 1.5em;
  background-size: 100% auto !important;
}
.zhizhen {
  position: absolute;
  width: 20%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.outside {
  position: relative;
}
</style>

老规矩文章中用到的图片我放云盘里：
链接: https://pan.baidu.com/s/1sbTqhvDXvZD_e2TJjK60EQ 密码: mlaf