dos

Public/static/css/index.css

@@ -68,7 +68,7 @@ input::-webkit-input-placeholder {
 
 /* page1 */
 .page1 {
-  z-index: 5;
+  z-index: 7;
 }
 
 .page1 .red-line {
@@ -84,7 +84,7 @@ input::-webkit-input-placeholder {
 
 /* flag-page */
 .flag-page {
-  z-index: 4;
+  z-index: 6;
   animation: all 0.3s linear forwards;
   -webkit-animation: all 0.3s linear forwards;
 }
@@ -248,7 +248,7 @@ input::-webkit-input-placeholder {
   background: #e5382a;
   transition: all linear .3s;
   -webkit-transition: all linear .3s;
-  z-index: 3;
+  z-index: 5;
 }
 
 .personal-page .decorate-img {
@@ -346,7 +346,7 @@ input::-webkit-input-placeholder {
 
 /* suggest-page */
 .suggest-page {
-  z-index: 2;
+  z-index: 4;
 }
 
 input[name=signature] {
@@ -396,6 +396,10 @@ input[name=signature]::-webkit-input-placeholder {
 
 /* countdown-page */
 
+.countdown-page {
+  z-index: 3;
+}
+
 .countdown-page canvas {
   transform: rotate(-90deg);
 }
@@ -424,4 +428,9 @@ input[name=signature]::-webkit-input-placeholder {
     transform: scale(1.1);
     opacity: 0;
   }
+}
+
+/* effect-page */
+.effect-page {
+  z-index: 2;
 }
\ No newline at end of file

Public/static/js/common.js

@@ -316,6 +316,7 @@ function showCountDownPage() {
         $('.suggest-page').fadeOut(300);
         countDown(function () {
             $('.countdown-page').fadeOut(300);
+            $('.effect-page').show();
         });
     }, 500);
 }
@@ -335,7 +336,6 @@ function countDown(callback) {
             countdown--;
             if (countdown == 0) {
                 clearInterval(timer);
-                // $('.countdown-num').removeClass('animate');
                 callback();
 
             } else {
@@ -386,7 +386,7 @@ function backToFlag() {
     $('.flag-page').animate({
         'opacity': 1
     }, 300, '', function () {
-        $('.flag-page').css('z-index', '4');
+        $('.flag-page').css('z-index', '6');
     });
 }
 
@@ -511,7 +511,7 @@ function showPersonalPage() {
     $('.flag-page').animate({
         'opacity': 0
     }, 300, '', function () {
-        $('.flag-page').css('z-index', '2');
+        $('.flag-page').css('z-index', '4');
     });
     $('.personal-page').fadeIn(300);
     // 创建个性化页面的flag列表