Merge branch 'master' of http://gitlab.oytour.com/huaguohao/newyearparty

src/components/playGame/Money.vue

 <style>
-.shuMoney {
+.shuchaopiao .shuMoney {
   width: 100%;
   height: 100%;
   background: url(../../../static/image/shuqian/money_bg.png) no-repeat center;
@@ -9,12 +9,12 @@
   top: 0;
   left: 0;
 }
-.shuMoney-disk {
+.shuchaopiao .shuMoney-disk {
   width: 100%;
   position: absolute;
   margin-top: 0;
 }
-.shuMoney-diskImg {
+.shuchaopiao .shuMoney-diskImg {
   margin: 0 auto;
   width: 472px;
   height: 265px;
@@ -23,7 +23,7 @@
   -webkit-animation: diskImg 0 infinite linear;
   animation-play-state: running;
 }
-.shuMoney-curtain {
+.shuchaopiao .shuMoney-curtain {
   width: 100%;
   height: 100%;
   background: url(../../../static/image/shuqian/money_bg_curtain.png) no-repeat
@@ -94,7 +94,7 @@
       -webkit-transform: scale(-1, 1) rotate(-50deg)
   }
 }
-.Number_prompt{
+.shuchaopiao .Number_prompt{
     width: 100%;
     height: 310px;
     background: url(../../../static/image/shuqian/Number_prompt6.png) no-repeat center;
@@ -103,11 +103,11 @@
     z-index: 700;
     top: 35%;
 }
-.Number_prompt_div{
+.shuchaopiao .Number_prompt_div{
   margin-top:120px;
   text-align: center;
 }
-.Numberpro_number{
+.shuchaopiao .Numberpro_number{
   font-size: 38px;
   position: relative;
   padding-left: 155px;
@@ -115,7 +115,7 @@
   text-shadow: 4px 2px 6px #000;
   color: #ffd24d;
 }
-.Numberpro_left{
+.shuchaopiao .Numberpro_left{
   position: absolute;
   left: 0;
   top: 0;
@@ -126,13 +126,13 @@
   height: 52px;
 }
 
-.Numberpro_number .game_join_total {
+.shuchaopiao .Numberpro_number .game_join_total {
     color: #ffff73;
     text-shadow: 0 0 35px #d15c16, 0 0 40px #dc5e0b, 0 0 50px #9d430e, 0 0 75px #ba4b0d;
     font-weight: bold;
     -webkit-text-fill-color: currentColor;
 }
-.Numberpro_right {
+.shuchaopiao .Numberpro_right {
     position: absolute;
     right: 0;
     top: 0;
@@ -142,13 +142,13 @@
     width: 31px;
     height: 52px;
 }
-.prompt_img {
+.shuchaopiao .prompt_img {
     width: 790px;
     margin: 20px auto 0 auto;
     position: relative;
     height: 70px;
 }
-.prompt_img span {
+.shuchaopiao .prompt_img span {
     margin-left: 10px;
     margin-right: 10px;
     width: 70px;
@@ -160,13 +160,13 @@
     line-height: 70px;
     /* position: absolute; */
 }
-.prompt_img span img {
+.shuchaopiao .prompt_img span img {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     margin-top: 5px;
 }
-.hd-game-btn-container{
+.shuchaopiao .hd-game-btn-container{
     position: absolute;
     bottom: 5px;
     right: .5%;
@@ -181,7 +181,7 @@
     justify-content: center;
     align-items: center;
 }
-.hd-game-btn-container .hd-game-btn {
+.shuchaopiao .hd-game-btn-container .hd-game-btn {
     min-width: 70px;
     max-width: 100px;
     width: 100px;
@@ -229,7 +229,7 @@
     width: 883px;
     height: 392px;
 }
-.shu-num-box {
+.shuchaopiao .shu-num-box {
     font-size: 150px;
     line-height: 150px;
     height: 150px;
@@ -256,20 +256,20 @@
         opacity: 0
     }
 }
-.fireworks {
+.shuchaopiao .fireworks {
     width: 100%;
     height: 100%;
     position: relative
 }
-.fireworks_left{
+.shuchaopiao .fireworks_left{
   top: 38%;
   left: 25%;
 }
-.fireworks_right {
+.shuchaopiao .fireworks_right {
     top: 28%;
     right: 23%
 }
-.fireworks_left, .fireworks_right {
+.shuchaopiao .fireworks_left, .shuchaopiao  .fireworks_right {
     width: 200px;
     height: 200px;
     background: url(../../../static/image/shuqian/fk.png) no-repeat center;
@@ -386,32 +386,32 @@
     -webkit-transition-duration: 10s;
     -o-transition-duration: 10s;
 }
-.shu-rank-list{
+.shuchaopiao .shu-rank-list{
     position: absolute;
     bottom: 90px;
     width: 100%;
     text-align: center;
 }
-.shu-rank-item {
+.shuchaopiao .shu-rank-item {
     width: 106px;
     margin-right: 30px;
     position: relative;
     display: inline-block;
     z-index: 2;
 }
-.shu-rank-item-head{
+.shuchaopiao .shu-rank-item-head{
     background: url(../../../static/image/shuqian/shu033.png);
     height: 22px;
 }
-.shu-rank-item-body{
+.shuchaopiao .shu-rank-item-body{
     background: url(../../../static/image/shuqian/shu022.png);
 }
-.shu-rank-item-footer {
+.shuchaopiao .shu-rank-item-footer {
     background: url(../../../static/image/shuqian/shu011.png);
     height: 8px;
     width: 100%;
 }
-.shu-rank-item-info {
+.shuchaopiao .shu-rank-item-info {
     text-align: center;
     font-size: 20px;
     position: absolute;
@@ -419,13 +419,13 @@
     width: 138px;
     left: -15px;
 }
-.shu-rank-item-info img {
+.shuchaopiao .shu-rank-item-info img {
     width: 75px;
     height: 75px;
     border-radius: 50%;
     border: 6px solid #fdbe23;
 }
-.shu-rank-item-info .ranking {
+.shuchaopiao .shu-rank-item-info .ranking {
     display: block;
     position: absolute;
     bottom: 108px;
@@ -470,7 +470,7 @@
     background: url(../../../static/image/shuqian/first_few.png);
 }
 
-.number-ani-box {
+.shuchaopiao .number-ani-box {
     padding: 107px 50px 0 40px;
     text-align: center;
     width: 422px;
@@ -488,14 +488,14 @@
     background-size: 100% 100%
 }
 
-.number-ani-box .imgNumberImg {
+.shuchaopiao .number-ani-box .imgNumberImg {
     position: absolute;
     left: 100px;
     top: 175px;
     width: 178px
 }
 
-.number-ani-box .imgNumberImg2 {
+.shuchaopiao .number-ani-box .imgNumberImg2 {
     position: absolute;
     right: 110px;
     top: 175px;
@@ -800,13 +800,6 @@
     top:0;
     overflow: hidden;
 }
-/* .game-cover-manCircle {
-    width: 1000px;
-    height: 1000px;
-    margin: 16% auto 0;
-    position: relative
-}
- */
 .winnerRipple {
     position: absolute;
     top: 0;
@@ -824,7 +817,7 @@
 </style>
 
 <template>
-  <div>
+  <div class="shuchaopiao">
     <template v-if="showFirst">
         <div class="game-cover-man">
             <div class="game-cover-manTop">
@@ -902,6 +895,11 @@
                 <div class="fireworks_left"></div>
                 <div class="fireworks_right"></div>
             </div>
+            <!-- 游戏开始后倒计时 -->
+            <div class="number-ani-box" ref="countBox" v-if="showThrityCount">
+                <img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
+                <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
+            </div>
             <div class="shu-rank-list" v-if="showMoney">
                 <div class="shu-rank-item">
                 <div class="shu-rank-item-info">
@@ -937,13 +935,8 @@
                     <div class="shu-rank-item-footer"></div>
                 </div>
             </div>
-            <!-- 游戏开始后倒计时 -->
-            <div class="number-ani-box" ref="countBox" v-if="showThrityCount">
-                <img class="img-num imgNumberImg" src='../../../static/image/shuqian/3.png'/>
-                <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/0.png'/>
-            </div>
             <!-- 按钮 -->
-            <div class="hd-game-btn-container">
+            <div class="hd-game-btn-container" v-show="isShowBtn">
                 <div class="hd-game-btn" @click="StartGame()">
                     <i class="iconfont icon-go"></i>
                     <span>开始</span>
@@ -967,27 +960,27 @@ export default {
       showCount: false,
       totalTime: 3,
       totalTime2: 30,
-      //显示30秒倒计时
-      showThrityCount:false,
-      //显示首页
-      showFirst:true,
-      //显示人和钱
-      showMoney:false,
+      // 显示30秒倒计时
+      showThrityCount: false,
+      // 显示首页
+      showFirst: true,
+      // 显示人和钱
+      showMoney: false,
+      isShowBtn: true
     }
   },
   mounted () {
-      
   },
   methods: {
     // 点击准备
-    getReady(){
-        this.showFirst=false;
-        this.showPeople=true;
-        this.$nextTick(function(){
-            this.init();
+    getReady () {
+      this.showFirst = false
+      this.showPeople = true
+      this.$nextTick(function () {
+        this.init()
       })
     },
-    //飘钱方法开始
+    // 飘钱方法开始
     init () {
       var a = document.getElementById('leafContainer')
       for (var b = 0; b < this.NUMBER_OF_LEAVES; b++) {
@@ -1009,7 +1002,6 @@ export default {
     createALeaf () {
       var d = document.createElement('div')
       var g = document.createElement('img')
-      // var b=Think.Games;
       g.src =
         '../../../static/image/shuqian/realLeaf' +
         this.randomInteger(1, 5) +
@@ -1029,90 +1021,67 @@ export default {
       d.append(g)
       return d
     },
-    //飘钱方法结束
-    //开始游戏
-    StartGame() {
-      this.showPeople=false;
-      this.showCount=true;
-      this.countDown();
+    // 飘钱方法结束
+    // 开始游戏
+    StartGame () {
+      this.showPeople = false
+      this.showCount = true
+      this.isShowBtn = false
+      this.countDown()
     },
     // 321倒计时
     countDown () {
       let clock = window.setInterval(() => {
         this.totalTime--
-        if (this.totalTime == 0) {
-          window.clearInterval(clock);
-          this.showCount=false;
-          this.totalTime=3;
-          this.showThrityCount=true;
-          this.showMoney=true;
-          this.countDown30();
+        if (this.totalTime === 0) {
+          window.clearInterval(clock)
+          this.showCount = false
+          this.totalTime = 3
+          this.showThrityCount = true
+          this.showMoney = true
+          this.countDown30()
         }
-      },1000)
+      }, 1000)
     },
     // 30秒倒计时
-    countDown30(){
+    countDown30 () {
       let clock = window.setInterval(() => {
         this.totalTime2--
-        let num= this.totalTime2.toString();
-        if(this.totalTime2<10){
-            num=0+''+num;
+        let num = this.totalTime2.toString()
+        if (this.totalTime2 < 10) {
+          num = 0 + '' + num
         }
-        let imgPath1=num.split('')[0];
-        let imgPath2=num.split('')[1];
-        let countHtml=`<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
+        let imgPath1 = num.split('')[0]
+        let imgPath2 = num.split('')[1]
+        let countHtml = `<img class="img-num imgNumberImg" src='../../../static/image/shuqian/${imgPath1}.png'/>
                        <img class="img-num imgNumberImg2" src='../../../static/image/shuqian/${imgPath2}.png'/>`
-         this.$refs.countBox.innerHTML=countHtml;
-        if (this.totalTime2 == -1) {
-          window.clearInterval(clock);
-          this.showThrityCount=false;
-          this.totalTime2=30;
-        }
-      },1000)
-    },
-    //生成灯笼
-    getLantern() {
-      for (let i = 0; i < 5; i++) {
-        var lantern = document.createElement("div");
-        lantern.setAttribute('class','retouching_animation');
-        lantern.style.left=0;
-        lantern.style.top=0;
-        this.$refs.shuMoney.append(lantern);
-        this.moveLantern(lantern)
+        this.$refs.countBox.innerHTML = countHtml
+        if (this.totalTime2 === -1) {
+          window.clearInterval(clock)
+          this.isShowBtn = true
+          this.showThrityCount = false
+          this.totalTime2 = 30
         }
+      }, 1000)
     },
-    //灯笼移动方法
-    moveLantern(h) {
-      h.style.opacity= 0.5;
-      h.style.scale= this.getRandom(80, 100) * 0.01
-      h.style.left= -(this.getRandom(200, -200)) + 'px'
-      h.style.top = -(this.getRandom(10, -80)) + 'px'
-      h.style.transform ='opacity:0'
-      h.style.transform ='scale(0.6)'
-      h.style.transform = 'left:'-(this.getRandom(-400, 600))+ 'px'
-      h.style.transform ='top:' -(this.getRandom(0, 600)) + 'px'
-      h.style.transitionDuration = this.getRandom(5000, 20000)
-      h.style.transform = 'easing:linear'
-      // h.style.transition.scale=0.6
-    },
-    //生成随机数
-    getRandom(d,a) {
-      var b = a - d;
-      var c = Math.random() * b + d;
+    // 生成随机数
+    getRandom (d, a) {
+      var b = a - d
+      var c = Math.random() * b + d
       return parseInt(c, 10)
     },
-    //生成圈圈
-    getCircle(){
-        var circle = document.createElement("img");
-        circle.setAttribute('class','winnerRipple');
-        circle.src='../../../static/image/shuqian/winner-quan'+this.getRandom(1,5)+'.png'
-        circle.style.scale=0;
-        circle.style.opacity=1;
-        circle.style.transform ='opacity:0'
-        circle.style.transform ='scale(2,2)'
-        circle.style.transition = "all 2.5s"
+    // 生成圈圈
+    getCircle () {
+      var circle = document.createElement('img')
+      circle.setAttribute('class', 'winnerRipple')
+      circle.src = '../../../static/image/shuqian/winner-quan' + this.getRandom(1, 5) + '.png'
+      circle.style.scale = 0
+      circle.style.opacity = 1
+      circle.style.transform = 'opacity:0'
+      circle.style.transform = 'scale(2,2)'
+      circle.style.transition = 'all 2.5s'
       circle.style.transform = 'easing:linear'
-        this.$refs.Circle.append(circle);
+      this.$refs.Circle.append(circle)
     }
   }
 }