From 34d9a8662da32afd2c4e6dc2c5514321ed6121ca Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 26 Oct 2021 15:47:35 +0800
Subject: [PATCH] +打印保安证

---
 src/views/securityGuard/securityCertificate.vue |   24 +++++++++++++++++++++---
 1 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/views/securityGuard/securityCertificate.vue b/src/views/securityGuard/securityCertificate.vue
index fdad0c8..5ce12c6 100644
--- a/src/views/securityGuard/securityCertificate.vue
+++ b/src/views/securityGuard/securityCertificate.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="securityCertificate">
-    <div class="security_main">
+  <div class="securityCertificate" id="securityCertificate">
+    <div class="security_main" ref="securityCertificate">
       <div class="security_m_left">
         <div class="security_m_l_up">
           <span class="security_m_l_u_fixed">{{ data.realName }}</span>
@@ -39,12 +39,29 @@
         </div>
       </div>
     </div>
+    <span slot="footer" class="dialog-footer no-print PrintBut">
+      <el-button type="primary" @click="Print">打 印</el-button>
+    </span>
   </div>
 </template>
 
 <script>
 export default {
   props: ["data"],
+  methods: {
+    Print() {
+      var printDom = document.getElementById("securityCertificate");
+      printDom.style.position = "fixed";
+      printDom.style.left = "-10%";
+      printDom.style.width = "120%";
+      printDom.style.height = "100%";
+      this.$Print(this.$refs.securityCertificate);
+      printDom.style.position = "relative";
+      printDom.style.left = "0";
+      printDom.style.width = "100%";
+      printDom.style.height = "calc(100% - 100px)";
+    },
+  },
 };
 </script>
 
@@ -57,6 +74,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
 }
 .security_main {
   width: 800px;
@@ -65,7 +83,7 @@
   display: flex;
   align-items: center;
   justify-content: space-around;
-  background-image: url(/img/securityCertificate/123.png);
+  background-image: url(/img/securityCertificate/保安证书.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }

--
Gitblit v1.9.3