1. 优化打印

src/views/tourism/membershipManagement/physicalCard/formBox/physicalCardTemplateForm.vue

@@ -2,7 +2,7 @@
   <el-dialog 
   :title="title" 
   :visible.sync="open" 
-  width="80%" 
+  width="90%" 
   append-to-body 
   :close-on-click-modal="false"
     @close="cancel">
@@ -581,13 +581,13 @@ export default {
 <style lang="scss" scoped>
 .form-dialog-box {
   padding: 0 30px;
-  min-height: 50vh;
+  min-height: 60vh;
   max-height: 65vh;
   overflow-y: auto;
 
   >div {
     width: 100%;
-    min-height: 50vh;
+    min-height: 60vh;
   }
 
   .form-title {
@@ -742,11 +742,11 @@ export default {
   --crad-fm: none;
   // --crad-w: 860px;
   // --crad-h: 540px;
-  --crad-w: 460px;
-  --crad-h: 288px;
+  --crad-w: 600px;
+  --crad-h: 376px;
   .form-make_zm {
     display: flex;
-    height: 350px;
+    height: 420px;
     .form-make_zm-title {
       width: 20px;
       height: 100%;
@@ -803,7 +803,7 @@ export default {
 
   .form-make_fm {
     display: flex;
-    height: 350px;
+    height: 420px;
     .form-make_fm-title {
       width: 20px;
       height: 100%;

src/views/tourism/membershipManagement/physicalCard/formBox/printForm.vue

@@ -2,7 +2,7 @@
   <el-dialog 
   :title="title" 
   :visible.sync="open" 
-  width="80%" 
+  width="90%" 
   append-to-body 
   :close-on-click-modal="false"
     @close="cancel">
@@ -165,14 +165,14 @@ export default {
           if(child.getAttribute('replace')) {
             if(child.getAttribute('replace').indexOf('qr_') != -1){
               let content = child.getAttribute('replace').replace('qr_','').replace('${','').replace('}','')
-              child.innerHTML = `<img id="img_${child.getAttribute('id')}" style="width:100%;hright:100%" />`
+              child.innerHTML = `<img id="img_${child.getAttribute('id')}" style="width:100%;hright:${child.style.height};box-sizing: border-box;" />`
               //实例化
               this.$nextTick(()=>{
                 JsBarcode(`#img_${child.getAttribute('id')}`, this.formCopy[content], {
                     format: "CODE39",  //条形码的格式
                     // lineColor: "#0aa",  //线条颜色
                     width:1, //线宽
-                    height:Number(child.style.height.replace('px','')),  //条码高度 
+                    height:Number(child.style.height.replace('px',''))/2-10,  //条码高度 
                     fontOptions: 'bold',// 设置条形码文本的粗体和斜体样式 bold / italic / bold italic
                     margin: 5,
                     fontSize: 12,
@@ -190,7 +190,7 @@ export default {
           if(child.getAttribute('replace')) {
             if(child.getAttribute('replace').indexOf('qr_') != -1){
               let content = child.getAttribute('replace').replace('qr_','').replace('${','').replace('}','')
-              child.innerHTML = `<img id="img_${child.getAttribute('id')}" style="width:100%;hright:100%" />`
+              child.innerHTML = `<img id="img_${child.getAttribute('id')}" style="width:100%;hright:${child.style.height};box-sizing: border-box;" />`
               console.log('child===',child.style.height)
               //实例化
               this.$nextTick(()=>{
@@ -198,9 +198,13 @@ export default {
                     format: "CODE39",  //条形码的格式
                     // lineColor: "#0aa",  //线条颜色
                     width:1, //线宽
-                    height:Number(child.style.height.replace('px','')) - 20,  //条码高度
+                    height:Number(child.style.height.replace('px',''))/2-10,  //条码高度
                     fontOptions: 'bold',// 设置条形码文本的粗体和斜体样式 bold / italic / bold italic
-                    margin: 5,
+                    margin: 0,
+                    marginTop: 2,
+                    marginLeft: 5,
+                    marginRight: 5,
+                    marginBottom: 2,
                     fontSize: 12,
                     // displayValue: false //是否显示文字信息
                 });
@@ -387,13 +391,13 @@ export default {
 <style lang="scss" scoped>
 .form-dialog-box {
   padding: 0 30px;
-  min-height: 50vh;
+  min-height: 60vh;
   max-height: 65vh;
   overflow-y: auto;
 
   >div {
     width: 100%;
-    min-height: 50vh;
+    min-height: 60vh;
   }
 
   .form-title {
@@ -544,15 +548,15 @@ export default {
   justify-content: space-between;
   width: 100%;
   height: 100%;
+  --crad-zm: none;
+  --crad-fm: none;
   // --crad-w: 860px;
   // --crad-h: 540px;
-  --crad-w: 460px;
-  --crad-h: 288px;
+  --crad-w: 600px;
+  --crad-h: 376px;
   .form-make_zm {
     display: flex;
-    height: 350px;
-    --crad-zm: none;
-    --crad-fm: none;
+    height: 420px;
     .form-make_zm-title {
       width: 20px;
       height: 100%;
@@ -587,13 +591,11 @@ export default {
         .form-make_zm-style-bgm {
           width: 100%;
           height: 100%;
-          //background-image: var(--crad-zm);
+          background-image: var(--crad-zm);
           background-size: 100% 100%;
           background-repeat: no-repeat;
           border-radius: 20px;
-          position: absolute;
-          z-index: 1;
-          img{
+          img {
             width: 100%;
             height: 100%;
             display: block;
@@ -616,9 +618,7 @@ export default {
 
   .form-make_fm {
     display: flex;
-    height: 350px;
-    --crad-zm: none;
-    --crad-fm: none;
+    height: 420px;
     .form-make_fm-title {
       width: 20px;
       height: 100%;
@@ -653,11 +653,11 @@ export default {
         .form-make_fm-style-bgm {
           width: 100%;
           height: 100%;
-          //background-image: var(--crad-zm);
+          background-image: var(--crad-zm);
           background-size: 100% 100%;
           background-repeat: no-repeat;
           border-radius: 20px;
-          img{
+          img {
             width: 100%;
             height: 100%;
             display: block;
@@ -681,41 +681,6 @@ export default {
 
 
 
-</style>
-<style>
-.custom-class-box {
-  z-index: 999999 !important;
-}
-.form-make_zm-style-item {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-  color: #000;
-  font-size: 16px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background-color: rgba(255, 255, 255, 1);
-}
-.form-make_fm-style-item {
-  position: absolute;
-  top: 30px;
-  left: 30px;
-  color: #000;
-  font-size: 16px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  background-color: rgba(255, 255, 255, 1);
-}
-
-
 </style>
 <style>
 .custom-class-box {