dos

Public/static/css/index.css

@@ -433,4 +433,45 @@ input[name=signature]::-webkit-input-placeholder {
 /* effect-page */
 /* effect-page */
 .effect-page {
 .effect-page {
   z-index: 2;
   z-index: 2;
+}
+
+/* poster-page */
+.poster-page {
+  z-index: 1;
+}
+
+.poster-page .poster-list {
+  background-image: url(../image2/posterlist-bg.png) left top repeat-y;
+  background-size: auto 100%;
+}
+
+.poster-page .flag-item {
+  position: relative;
+  display: flex;
+  margin-top: 1rem;
+}
+
+.poster-page .flag-no {
+  font-size: 1.2rem;
+  text-align: center;
+  line-height: 2rem;
+  color: #222222;
+  display: inline-block;
+  width: 2.25rem;
+  height: 2rem;
+  background: url(../image2/flag-no.png) left top no-repeat;
+  background-size: 100% 100%;
+}
+
+.poster-page .flag-text {
+  font-size: 1.4rem;
+  color: #222222;
+  margin-left: 1rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  height: auto;
+  display: inline-block;
+  flex: 1;
+  background: url(../image2/flag-redline.png) left bottom no-repeat;
+  background-size: 100% auto;
 }
 }
\ No newline at end of file

Public/static/js/common.js

@@ -50,7 +50,8 @@ if ($('div').length > 0) {
 
 
 
 
 preloadimages(preloadImageList, function () {
 preloadimages(preloadImageList, function () {
-    $('.page1').fadeIn(300);
+    // $('.page1').fadeIn(300);
+    $('.poster-page').fadeIn(300);
 }, function (progress) {
 }, function (progress) {
 
 
 });
 });
@@ -300,6 +301,17 @@ $(document).ready(function () {
     $('.suggest-page .btn-next').on('click', showCountDownPage);
     $('.suggest-page .btn-next').on('click', showCountDownPage);
 });
 });
 
 
+function createPoster() {
+    // 创建海报页面的flag列表
+    for (let i = 0; i < flagStack.length; i++) {
+        createList('.poster-page .poster-list', flagStack[i], i + 1);
+    }
+}
+
+function showPosterPage() {
+    createPoster();
+}
+
 function showCountDownPage() {
 function showCountDownPage() {
     let val = $('.suggest-page input[name=signature]').val();
     let val = $('.suggest-page input[name=signature]').val();
     if (val.match(/^\s*$/)) {
     if (val.match(/^\s*$/)) {
@@ -317,6 +329,7 @@ function showCountDownPage() {
         countDown(function () {
         countDown(function () {
             $('.countdown-page').fadeOut(300);
             $('.countdown-page').fadeOut(300);
             $('.effect-page').css('background', bgColor).show();
             $('.effect-page').css('background', bgColor).show();
+            showPosterPage();
         });
         });
     }, 500);
     }, 500);
 }
 }
@@ -516,17 +529,17 @@ function showPersonalPage() {
     $('.personal-page').fadeIn(300);
     $('.personal-page').fadeIn(300);
     // 创建个性化页面的flag列表
     // 创建个性化页面的flag列表
     for (let i = 0; i < flagStack.length; i++) {
     for (let i = 0; i < flagStack.length; i++) {
-        createList(flagStack[i], i + 1);
+        createList('.personal-page .flag-list', flagStack[i], i + 1);
     }
     }
 }
 }
 
 
-function createList(flag, no) {
+function createList(target, flag, no) {
     let item = $('<div class="flag-item"></div>');
     let item = $('<div class="flag-item"></div>');
     item.append($('<div class="flag-no"></div>'));
     item.append($('<div class="flag-no"></div>'));
     item.append($('<div class="flag-text"></div>'));
     item.append($('<div class="flag-text"></div>'));
     item.find('.flag-no').text(no);
     item.find('.flag-no').text(no);
     item.find('.flag-text').text(flag);
     item.find('.flag-text').text(flag);
-    $('.personal-page .flag-list').append(item);
+    $(target).append(item);
 }
 }
 
 
 function addCustomizeFlag() {
 function addCustomizeFlag() {