dos

Public/static/css/index.css

@@ -441,14 +441,18 @@ input[name=signature]::-webkit-input-placeholder {
 }
 
 .poster-page .poster-list {
-  background-image: url(../image2/posterlist-bg.png) left top repeat-y;
-  background-size: auto 100%;
+  background: url(../image2/posterlist-bg.png) left top repeat-y;
+  background-size: 100% auto;
+  height: auto;
+  min-height: 20.2rem;
+  padding: 1.75rem 4.45rem 3rem 3.5rem;
+  width: 24.05rem;
 }
 
 .poster-page .flag-item {
   position: relative;
   display: flex;
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 }
 
 .poster-page .flag-no {

Public/static/js/common.js

@@ -204,6 +204,10 @@ let agreeTimer;
 let countDownCanvas;
 let countDownCtx;
 
+//海报canvas
+let posterCanvas;
+let posterCtx;
+
 //记录初始状态下fontsize
 const fontSize = parseFloat($('html').css('fontSize'));
 
@@ -218,11 +222,12 @@ $('input[name=customize-flag]').attr('placeholder', '也能在这里写你的fla
 $('input[name=signature]').attr('placeholder', '准备好了，就在此署名吧').attr('id', 'signature');
 
 //倒计时canvas定义
-
 let canvasinfo = initCanvas('.countdown-canvas', 'countDownCanvas', 254, 254, true);
 countDownCanvas = canvasinfo[0];
 countDownCtx = canvasinfo[1];
 
+
+
 //初始化小装饰
 initDecorate();
 
@@ -333,6 +338,25 @@ function createPoster() {
     for (let i = 0; i < flagStack.length; i++) {
         createList('.poster-page .poster-list', flagStack[i], i + 1);
     }
+
+    const flagListHeight = $('.poster-page .poster-list').height();
+    let topHalfHeight = pxToRem(389);
+    let bottomHalfHeight = pxToRem(368);
+    let posterCanvasHeight = 0;
+
+    if (flagListHeight < pxToRem(383)) {
+        posterCanvasHeight = topHalfHeight + pxToRem(383) + bottomHalfHeight;
+    } else {
+        posterCanvasHeight = topHalfHeight + flagListHeight + bottomHalfHeight;
+    }
+
+    let canvasinfo = initCanvas('.poster-canvas-block', 'posterCanvas', 640, posterCanvasHeight, true);
+    posterCanvas = canvasinfo[0];
+    posterCtx = canvasinfo[1];
+
+    posterCtx.fillStyle = bgColor;
+    posterCtx.fillRect(0, 0, posterCanvas.width, posterCanvas.height);
+
 }
 
 function showPosterPage() {
@@ -700,8 +724,8 @@ function fadeInTextUp(text, fadeTime, divName) {
 
 function initCanvas(target, id, canvasWidth, canvasHeight, useRem = false) {
     if (useRem) {
-        canvasWidth = (canvasWidth / 20) * fontSize;
-        canvasHeight = (canvasHeight / 20) * fontSize;
+        canvasWidth = pxToRem(canvasWidth);
+        canvasHeight = pxToRem(canvasHeight);
     }
     $(target).html('<canvas id="' + id + '" width="' + canvasWidth + '" height="' + canvasHeight + '"></canvas>');
     canvas = $('#' + id)[0];
@@ -782,3 +806,7 @@ function checkIt(bind, maxNum) {
         $("#" + bind).val('');
     }
 }
+
+function pxToRem(px) {
+    return (px / 20) * fontSize;
+}
\ No newline at end of file