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

miniprogram/components/word-card/word-card.less

@@ -4,7 +4,7 @@
     // width: 324rpx;
     height: 100rpx;
     border-radius: 16rpx;
-    background-color: #EEFCFC;
+    background-color: #eefcfc;
     align-items: center;
     box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
 
@@ -15,6 +15,21 @@
         background-color: #ff0000;
         margin-left: 20rpx;
         border: 1rpx solid #141414;
+
+        position: relative;
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 200%;
+            height: 200%;
+            border-radius: 50%;
+            border: 1px solid #141414;
+            transform: scale(0.5);
+            transform-origin: 0 0;
+            box-sizing: border-box;
+        }
     }
 
     .word-box {
@@ -31,7 +46,6 @@
             font-size: 28rpx;
             color: #141414;
             text-align: center;
-
         }
     }
 
@@ -40,4 +54,4 @@
         margin-right: 8rpx;
         color: #141414;
     }
-}
+}

miniprogram/components/word-card/word-card.ts

@@ -6,7 +6,15 @@ Component({
      * 组件的属性列表
      */
     properties: {
-        extClass: {
+        key: {
+            type: Number,
+            value: 0,
+        },
+        word: {
+            type: String,
+            value: '',
+        },
+        color: {
             type: String,
             value: '',
         },
@@ -15,7 +23,8 @@ Component({
      * 组件的初始数据
      */
     data: {
-        displayStyle: '',
+        word: '',
+        color: '',
     },
     lifetimes: {
         attached() {},
@@ -23,5 +32,10 @@ Component({
     /**
      * 组件的方法列表
      */
-    methods: {},
+    methods: {
+        onDelete() {
+            const { key, word } = this.data;
+            this.triggerEvent('onDelete', { key, word });
+        },
+    },
 });

miniprogram/components/word-card/word-card.wxml

@@ -1,9 +1,9 @@
 <view class="word-card">
-    <view class="color-box"></view>
-    <view class="word-box">
-        <text class="word-content">文</text>
+    <view class="color-box" style="background-color: {{color}};"></view>
+    <view class="word-box border-1px">
+        <text class="word-content">{{word}}</text>
     </view>
-    <view class="delete-icon">
+    <view class="delete-icon" bindtap="onDelete">
         <van-icon name="delete" custom-class="delete-icon-inner" size="44rpx" />
     </view>
-</view>
+</view>