style：证书预览

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-08-10 13:43:32
+ * @LastEditTime: 2023-08-16 10:37:13
 -->
 <template>
   <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
@@ -124,21 +124,27 @@
         const image = new Image();
         image.onload = () => {
           context.drawImage(image, 0, 0);
-          context.font = '18px 楷体';
+          context.font = '14px 楷体';
           context.fillStyle = '#000000';
           context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
           context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
           context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
           context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
-          context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97);
-          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
-          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
-          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 138, 223);
-          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
-          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
-          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
-          context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
-          context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
+          context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 129, 97);
+          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 129, 136);
+
+
+          // context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 129, 170);
+
+
+
+
+          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 129, 223);
+          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 129, 263);
+          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 129, 303);
+          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 129, 346);
+          context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
+          context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 129, 429);
           // qlqtzk
           const maxWidth = 280; // 最大宽度限制
           let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
@@ -158,12 +164,12 @@
             }
             arr.push(currentLine);
             arr.forEach((line, index) => {
-              context.fillText(line, 138, y + (index * 20)); // 调整行高
+              context.fillText(line, 129, y + (index * 20)); // 调整行高
             })
           })
           let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split(' ') : [];
           lines1.forEach((line, index) => {
-            const y = 100 + (index * 37); // 每行文本的垂直位置
+            const y = 100 + (index * 27); // 每行文本的垂直位置
             let currentLine = '';
             let arr = [];
             for (let word of line) {
@@ -182,6 +188,53 @@
             })
           })
 
+
+
+          let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
+          if (lines2.length > 22) {
+            lines2.forEach((line, index) => {
+              const y = 170 + (index * 27); // 每行文本的垂直位置
+              let currentLine = '';
+              let arr = [];
+              for (let word of line) {
+                const testLine = currentLine + word;
+                const lineWidth = context.measureText(testLine).width;
+                if (lineWidth <= 360) {
+                  currentLine = testLine;
+                } else {
+                  arr.push(currentLine);
+                  currentLine = word;
+                }
+              }
+              arr.push(currentLine);
+              arr.forEach((line, index) => {
+                context.fillText(line, 129, y + (index * 20)); // 调整行高
+              })
+            })
+          } else {
+            lines2.forEach((line, index) => {
+              const y = 180 + (index * 27); // 每行文本的垂直位置
+              let currentLine = '';
+              let arr = [];
+              for (let word of line) {
+                const testLine = currentLine + word;
+                const lineWidth = context.measureText(testLine).width;
+                if (lineWidth <= 360) {
+                  currentLine = testLine;
+                } else {
+                  arr.push(currentLine);
+                  currentLine = word;
+                }
+              }
+              arr.push(currentLine);
+              arr.forEach((line, index) => {
+                context.fillText(line, 129, y + (index * 20)); // 调整行高
+              })
+            })
+
+          }
+
+
         }
         image.src = this.imgSrc
       },