feat:完成生成打印纸的步骤

miniprogram/pages/index/index.less

@@ -1,10 +1,10 @@
 page {
-    background-color: #F6F6F6;
+    background-color: #f6f6f6;
 }
 
 .page-container {
-    background-color: #F6F6F6;
-    padding: 24rpx;
+    background-color: #f6f6f6;
+    padding: 0 24rpx;
     box-sizing: border-box;
 
     .wrapper {
@@ -23,8 +23,16 @@ page {
             font-weight: bold;
             text-align: center;
         }
+
+        &.hidden {
+            visibility: hidden;
+        }
     }
 
+    // #previewWrapper {
+    //     margin-bottom: 200rpx;
+    // }
+
     .word-card-box {
         margin-top: 30rpx;
     }
@@ -35,4 +43,29 @@ page {
         justify-content: space-between;
         margin-bottom: 24rpx;
     }
-}
+
+    .empty {
+        height: 190rpx;
+    }
+}
+
+.canvas-wrapper {
+    margin-top: 20rpx;
+    width: 100%;
+    border: 1rpx solid #141414;
+    background-color: #fff;
+    box-sizing: border-box;
+}
+
+.btn-area {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 190rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.25);
+}