dos

Public/static/css/index.css

@@ -68,7 +68,7 @@ input::-webkit-input-placeholder {
 
 /* page1 */
 .page1 {
-  z-index: 4;
+  z-index: 5;
 }
 
 .page1 .red-line {
@@ -84,7 +84,7 @@ input::-webkit-input-placeholder {
 
 /* flag-page */
 .flag-page {
-  z-index: 3;
+  z-index: 4;
   animation: all 0.3s linear forwards;
   -webkit-animation: all 0.3s linear forwards;
 }
@@ -152,7 +152,7 @@ input::-webkit-input-placeholder {
   transform-origin: 0% 0%;
   background: #fcfcfd;
   transform: scale(0);
-  z-index: 2;
+  z-index: 3;
 }
 
 .flag-page .flag-list-content {
@@ -248,7 +248,7 @@ input::-webkit-input-placeholder {
   background: #e5382a;
   transition: all linear .3s;
   -webkit-transition: all linear .3s;
-  z-index: 2;
+  z-index: 3;
 }
 
 .personal-page .decorate-img {
@@ -346,7 +346,7 @@ input::-webkit-input-placeholder {
 
 /* suggest-page */
 .suggest-page {
-  z-index: 1;
+  z-index: 2;
 }
 
 input[name=signature] {
@@ -367,6 +367,21 @@ input[name=signature]::-webkit-input-placeholder {
   -webkit-animation: flicker 1s ease infinite;
 }
 
+.suggest-wrap.animate {
+  animation: wrapScale 1s linear forwards;
+  -webkit-animation: wrapScale 1s linear forwards;
+}
+
+@keyframes wrapScale {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
 @keyframes flicker {
 
   0%,

Public/static/js/common.js

@@ -284,8 +284,17 @@ $(document).ready(function () {
     $('.suggest-page input[name=signature]').on('touchstart', checkAgree);
     //同意点击
     $('.suggest-page .agree').on('click', agreeSuggest);
+    //完成署名
+    $('.suggest-page .btn-next').on('click', showCountDownPage);
 });
 
+function showCountDownPage() {
+    $('.suggest-page .suggest-wrap').addClass('animate');
+    setTimeout(function () {
+        $('.suggest-page').fadeOut(300);
+    }, 500);
+}
+
 function agreeSuggest() {
     $('.suggest-page .agree').hide();
     $('.suggest-page .agree-active').show();
@@ -325,7 +334,7 @@ function backToFlag() {
     $('.flag-page').animate({
         'opacity': 1
     }, 300, '', function () {
-        $('.flag-page').css('z-index', '3');
+        $('.flag-page').css('z-index', '4');
     });
 }
 
@@ -449,7 +458,7 @@ function showPersonalPage() {
     $('.flag-page').animate({
         'opacity': 0
     }, 300, '', function () {
-        $('.flag-page').css('z-index', '1');
+        $('.flag-page').css('z-index', '2');
     });
     $('.personal-page').fadeIn(300);
     // 创建个性化页面的flag列表