debug

data/resource/mobile/festival/newYear/css/style.css

@@ -67,6 +67,32 @@ img {
     width: 1px;
     background: #f6d8b4;
 }
+.loading_page {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 999;
+    background: #ffffff;
+}
+
+.loading {
+    display: table;
+    width: 100%;
+    height: 100%;
+}
+
+.loading p {
+    display: table-cell;
+    font-size: 32px;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.loading p .progress_num {
+    padding-left: 20px;
+}
 .container {
     width: 750px;
     height: 100%;
@@ -233,7 +259,7 @@ img {
     width: 108px;
     height: 90px;
     background: url(../image/page1/small-cloud.png) no-repeat left top;
-    -webkit-animation: slideInRight 3s ease-in 1.8s forwards;
+    -webkit-animation: slideInRight .3s ease-in 1.8s forwards;
 }
 .page1 .big-cloud {
     top: 812px;
@@ -253,6 +279,8 @@ img {
     height: 112px;
     background: url(../image/page1/btn.png) no-repeat;
     background-size: 100% 100%;
+    opacity: 0;
+    -webkit-animation: zoomIn .5s ease-in 2.8s forwards;
 }
 .page1 .text {
     z-index: 13;
@@ -322,23 +350,29 @@ img {
     top: 12px;
     width: 164px;
     height: 112px;
+    visibility: hidden;
     background: url(../image/page3/share.png) no-repeat;
     background-size: 100% 100%;
+    -webkit-animation: slideInRight .5s ease-in 2.3s forwards;
 }
 .page3 .text-bg {
     z-index: 12;
     top: 192px;
     width: 146px;
     height: 146px;
+    opacity: 0;
 }
 .page3 .text-bg1 {
     left: 140px;
+    -webkit-animation: rollIn .5s ease-in 1.3s forwards;
 }
 .page3 .text-bg2 {
     left: 292px;
+    -webkit-animation: rollIn .5s ease-in 1.8s forwards;
 }
 .page3 .text-bg3 {
     left: 446px;
+    -webkit-animation: rollIn .5s ease-in 2.3s forwards;
 }
 .page3 .wish1,
 .page3 .wish2,
@@ -346,15 +380,19 @@ img {
     position: absolute;
     z-index: 15;
     top: 516px;
+    opacity: 0;
 }
 .page3 .wish1 {
     right: 516px;
+    -webkit-animation: flip .5s ease-in 2.3s forwards;
  }
 .page3 .wish2 {
     right: 300px;
+    -webkit-animation: flip .5s ease-in 2.8s forwards;
 }
 .page3 .wish3 {
     right: 82px;
+    -webkit-animation: flip .5s ease-in 3.3s forwards;
 }
 
 /*头彩*/
@@ -550,6 +588,9 @@ img {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    opacity: 0;
+    -webkit-animation: jackInTheBox .5s ease-in 2.3s forwards;
+
 }
 .page3 .user-info .year-bg {
     display: inline-block;
@@ -568,7 +609,9 @@ img {
     width: 452px;
     height: 244px;
     background: url('../image/page3/btn.png') no-repeat;
+    opacity: 0;
     background-size: 100% 100%;
+    -webkit-animation: pulse 2.5s ease-in 2.3s infinite alternate;
 }
 .page3 .jl {
     position: absolute;
@@ -579,6 +622,33 @@ img {
     height: 96px;
     background: url('../image/page3/jl.png') no-repeat;
     background-size: 100% 100%;
+    opacity: 0;
+    -webkit-animation: fishFadeInUp 1.5s ease-in 2.5s infinite alternate;
+}
+.page3 .bonus-up {
+    position: absolute;
+    z-index: 999;
+    left: 30px;
+    top: 200px;
+    width: 656px;
+    height: 812px;
+    visibility: hidden;
+    background: url('../image/page3/bonus.png') no-repeat;
+    background-size: 100% 100%;
+
+}
+.page3 .bonus-up.animation {
+    -webkit-animation: slideInDown .5s ease-in forwards;
+}
+.page3 .popup {
+    display: none;
+    position: absolute;
+    z-index: 99;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,.6);
 }
 
 
@@ -660,6 +730,19 @@ img {
         opacity: 1;
     }
 }
+@-webkit-keyframes slideInDown {
+    from {
+        -webkit-transform: translate3d(0, -100%, 0);
+        transform: translate3d(0, -100%, 0);
+        visibility: visible;
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        visibility: visible;
+    }
+}
 @-webkit-keyframes slideInLeft {
     from {
         -webkit-transform: translate3d(-100%, 0, 0);
@@ -743,3 +826,112 @@ img {
         transform-origin: left top;
     }
 }
+@-webkit-keyframes rollIn {
+    from {
+        opacity: 0;
+        -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+        transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+    }
+
+    to {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@-webkit-keyframes flip {
+    from {
+        opacity: 1;
+        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, -360deg);
+        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    40% {
+        opacity: 1;
+        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -190deg);
+        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -190deg);
+        -webkit-animation-timing-function: ease-out;
+        animation-timing-function: ease-out;
+    }
+
+    50% {
+        opacity: 1;
+        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -170deg);
+        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
+        rotate3d(0, 1, 0, -170deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    80% {
+        opacity: 1;
+        -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, 0deg);
+        transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, 0deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+
+    to {
+        opacity: 1;
+        -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
+        rotate3d(0, 1, 0, 0deg);
+        transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
+        -webkit-animation-timing-function: ease-in;
+        animation-timing-function: ease-in;
+    }
+}
+@-webkit-keyframes pulse {
+    from {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        opacity: 1;
+    }
+
+    50% {
+        -webkit-transform: scale3d(1.05, 1.05, 1.05);
+        transform: scale3d(1.05, 1.05, 1.05);
+        opacity: 1;
+    }
+
+    to {
+        -webkit-transform: scale3d(1, 1, 1);
+        transform: scale3d(1, 1, 1);
+        opacity: 1;
+    }
+}
+@-webkit-keyframes jackInTheBox {
+    from {
+        opacity: 0;
+        -webkit-transform: scale(0.1) rotate(30deg);
+        transform: scale(0.1) rotate(30deg);
+        -webkit-transform-origin: center bottom;
+        transform-origin: center bottom;
+    }
+
+    50% {
+        opacity: 1;
+        -webkit-transform: rotate(-10deg);
+        transform: rotate(-10deg);
+    }
+
+    70% {
+        opacity: 1;
+        -webkit-transform: rotate(3deg);
+        transform: rotate(3deg);
+    }
+
+    to {
+        opacity: 1;
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}

data/resource/mobile/festival/newYear/js/newYear.js

@@ -49,27 +49,27 @@ Page.prototype = {
             item: '.item',
             lastLocate: false,
             noslide: [0, 1, 2],
+            // index: 2,
             loadingImgs: self.loadImages,
             onloading: function (data) {
-                // console.log(self.loadImages.length,data);
-//                var loadImg = loadImages.length;
-//                if (loadImg <= 0) {
-//                    $('.loading_page').hide();
-//                    return;
-//                }
-//                var progress = data;
-//                var progress_num = parseInt(progress / loadImg * 100);
-//                if (progress_num > 100) {
-//                    progress_num = 100;
-//                }
-//                setTimeout(function () {
-//                    $('.progress_num').text(progress_num);
-//                }, 200);
-//                if (progress_num >= 100) {
-//                    setTimeout(function () {
-//                        $('.loading_page').hide();
-//                    }, 500);
-//                }
+               var loadImg = self.loadImages.length;
+               if (loadImg <= 0) {
+                   $('.loading_page').hide();
+                   return;
+               }
+               var progress = data;
+               var progress_num = parseInt(progress / loadImg * 100);
+               if (progress_num > 100) {
+                   progress_num = 100;
+               }
+               setTimeout(function () {
+                   $('.progress_num').text(progress_num);
+               }, 200);
+               if (progress_num >= 100) {
+                   setTimeout(function () {
+                       $('.loading_page').hide();
+                   }, 500);
+               }
             },
             onslide: function (index) {
                 if (index == 0) {
@@ -114,7 +114,8 @@ Page.prototype = {
     },
     pageOneStart: function () {
         var self = this;
-        $('.page1 .btn').on('click', function () {
+        $('.page1').on('click','.btn', function () {
+            console.log(11111);
             if (self.fromApp) {
                 self.appInit();
             }
@@ -148,10 +149,17 @@ Page.prototype = {
         $('.page3 .user-name').text(self.nickname);
         $('.page3 .content').addClass(classname);
 
+        $('.page3').on('click', '.bonus-up.animation' ,function () {
+            location.href = 'https://a.lrlz.com/mobile/index.php?act=bonusex&op=open&client_type=wap&type_sn=44261545875786320384'
+        });
         $('.page3 .btn').on('click', function () {
-            alert('开红包');
+            self.bonusUp();
         });
     },
+    bonusUp: function () {
+        $('.page3 .popup').fadeIn();
+        $('.page3 .bonus-up').addClass('animation');
+    },
     randomResult: function () {
         var index = Math.round(Math.random() * 5) + 1;
         return index;

mobile/control/control.php

@@ -331,9 +331,9 @@ class mbMemberControl extends mobileControl
 
 function bonus_version()
 {
-    return "v=2018122606";
+    return "v=2018122701";
 }
 function shop_version()
 {
-    return "v=2018122606";
+    return "v=2018122701";
 }

mobile/templates/default/festival/newYear/index.php

@@ -14,6 +14,12 @@ $info = $output['info'];
 
 <body>
 <div class="container">
+    <div class="loading_page">
+        <div class="loading">
+            <p>加载中...
+                <span class="progress_num">0</span>%</p>
+        </div>
+    </div>
     <div class="wrap">
         <div class="item page1">
             <div class="place-wrap">
@@ -70,6 +76,8 @@ $info = $output['info'];
                     <div class="wish3"></div>
                     <div class="btn"></div>
                     <div class="jl"></div>
+                    <div class="bonus-up"></div>
+                    <div class="popup"></div>
                 </div>
             </div>
         </div>