tijiao

src/components/QrCode/index.vue

@@ -6,7 +6,9 @@
     destroy-on-close
     :close-on-click-modal="false"
   >
-    <div id="qrcodetemplate" ref="qrcodetemplateModal" />
+    <div id="qrcodetemplate-conatiner" :style="styles">
+      <div id="qrcodetemplate" ref="qrcodetemplateModal" />
+    </div>
     <span slot="footer" class="dialog-footer" />
   </el-dialog>
 </template>
@@ -17,6 +19,10 @@ export default {
     title: {
       type: String,
       default: '二维码'
+    },
+    styles: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -47,9 +53,17 @@ export default {
 }
 </script>
 <style lang="scss">
-#qrcodetemplate{
-  width: 200px;
-  height: 200px;
-  margin: 0 auto;
+#qrcodetemplate-conatiner{
+    width: 220px;
+    height: 220px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  #qrcodetemplate{
+    width: 200px;
+    height: 200px;
+  }
 }
+
 </style>

src/views/goaf/qrcode/components/GoafInfo.vue

@@ -59,7 +59,7 @@
     </el-row>
     <goaf ref="goaf" @formSuccess="getData" />
     <detail ref="detail" />
-    <QrCode ref="qrcode" />
+    <QrCode ref="qrcode" styles="background-color: #fff;border-radius:10px;" />
     <div id="qrcode" ref="qrcodeModal" style="position:fixed;top:-9999px;" />
   </div>
 </template>