dos

Public/static/css/index.css

@@ -75,6 +75,38 @@ input::-webkit-input-placeholder {
   font-family: 'font';
 } */
 
+/* home-page */
+
+.home-page {
+  z-index: 8;
+}
+
+.home-page .candle-block.animate {
+  animation: fadeInOut 1s ease infinite;
+  -webkit-animation: fadeInOut 1s ease infinite;
+}
+
+.home-page .candle {
+  opacity: 0;
+}
+
+.home-page .btn-next.animate {
+  animation: fadeInOut 1s ease infinite;
+  -webkit-animation: fadeInOut 1s ease infinite;
+}
+
+@keyframes fadeInOut {
+
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
 /* page1 */
 .page1 {
   z-index: 7;

Public/static/js/common.js

@@ -50,21 +50,16 @@ if ($('div').length > 0) {
 
 
 preloadimages(preloadImageList, function () {
-    // $('.page1').fadeIn(300);
+    $('.home-page').fadeIn(300);
+    $('.home-page .candle-block').addClass('animate');
+    $('.home-page .btn-next').addClass('animate');
     // $('.poster-page').fadeIn(300);
-    createPoster();
-    setTimeout(() => {
-        showPosterPage();
-    }, 1000);
 
 
 }, function (progress) {
 
 });
 
-// $('input[name=tel]').attr('type','tel');
-// $('input[name=tel]').attr('maxlength',11);
-
 const flag = [
     '升职加薪',
     '早日暴富',
@@ -153,11 +148,11 @@ let decorateList = [
 ];
 
 //用户选择的flag列表
-let flagStack = flag; //debug
+let flagStack = [];
 //用户选择的小装饰src
-let checkedDecorate = decorateList[0]; //debug
+let checkedDecorate = "";
 //用户署名
-let signature = "张三"; //debug
+let signature = "";
 //用户选择的色条index
 let colorIndex = 4;
 //用户选择的背景色
@@ -247,6 +242,10 @@ $(document).ready(function () {
         }
     });
 
+
+    //跳转到page1
+    $('home-page .btn-next').on('click', showPage1);
+    //跳转到flag选择页面
     $('.page1 .btn-next').on('click', showFlagPage);
     //换一换按钮点击
     $('.flag-page .btn-change').on('click', changeFlag);
@@ -316,6 +315,15 @@ $(document).ready(function () {
     $('.suggest-page .btn-next').on('click', showCountDownPage);
 });
 
+function showPage1() {
+    $('.home-page .candle').css('opacity', 1);
+    $('.home-page .btn-next').removeClass('animate');
+    setTimeout(function () {
+        $('.home-page').fadeOut(300);
+        $('.page1').show();
+    }, 2000);
+}
+
 function createPoster() {
     $('.poster-list-page').show();
     $('.poster-page .poster-canvas-block').append($('<img class="posterImg" src="" />'));