倒计时

src/assets/css/LuckDraw.css

@@ -189,41 +189,5 @@
     border-radius: 50%;
     transition:  all linear 1.5s;
     background-color: red;
-}
-.head_move1{
-    top: 300%;
-    width: 150px;
-    height: 150px;
-}
-.head_move2{
-    left: 300%;
-    width: 150px;
-    height: 150px;
-}
-.head_move3{
-    left: 300%;
-    top: 60%;
-    width: 150px;
-    height: 150px;
-}
-.head_move4{
-    left: initial;
-    right: 300%;
-    top: 60%;
-    width: 150px;
-    height: 150px;
-}
-.head_move5{
-    left: initial;
-    right: 300%;
-    top: 50%;
-    width: 150px;
-    height: 150px;
-}
-.head_move6{
-    left: initial;
-    right: 300%;
-    top: 70%;
-    width: 150px;
-    height: 150px;
+    animation: head_move1 4s infinite ease;
 }
\ No newline at end of file

src/components/CountDown.vue

+<template>
+  <div class="bg_box" :style="{position: 'relative', width: `${videInfo.width}px`, height: `${videInfo.height}px`, left: `${videInfo.offsetX}px`, top: `${videInfo.offsetY}px`, transform: `scale(${videInfo.transformScale1}, ${videInfo.transformScale2})`}">
+    <div class="bg_video_box">
+      <video src="/static/video/daojishi.mp4" autoplay="autoplay"  id="homeBGvideo"></video>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'index',
+  data () {
+    return {
+      initSize: {
+        width: 1813,
+        height: 1020
+      },
+      videInfo: {
+        width: 1813,
+        height: 1020,
+        offsetX: 0,
+        offsetY: 0,
+        transformScale1: 0,
+        transformScale2: 0
+      }
+    }
+  },
+  activated () {
+    var video = document.getElementById('homeBGvideo')
+    video.play()
+  },
+  created () {
+    this.windowResize()
+  },
+  mounted () {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        that.windowResize()
+      })()
+    }
+  },
+  methods: {
+    windowResize: function () {
+      let WindowW = window.innerWidth
+      let WindowH = window.innerHeight
+      this.videInfo.transformScale1 = WindowW / this.initSize.width
+      this.videInfo.transformScale2 = WindowH / this.initSize.height
+      this.videInfo.offsetX = (WindowW - this.initSize.width) * 0.5
+      this.videInfo.offsetY = (WindowH - this.initSize.height) * 0.5
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import "../assets/css/index.css";
+</style>

src/components/playGame/LuckDraw.vue

@@ -151,17 +151,14 @@ export default {
     headMove: function () {
       let $this = this
       setTimeout(x=>{
-        $this.dataList2[$this.moveIndex].class = `head1 head_move${$this.classIndex}`
+        $this.dataList2[$this.moveIndex].class = `head1 stylie${$this.classIndex}`
         $this.classIndex++
-        if ($this.classIndex > 6 ){
+        if ($this.classIndex > 8 ){
           $this.classIndex = 1
         }
-        if ($this.moveIndex!==0) {
-          $this.dataList2[$this.moveIndex-1].class = `head1`
-        }
         $this.moveIndex++
         $this.headMove()
-      }, 500)
+      }, 100)
     },
     // 启动抽奖
     awardGo: function () {