+打印保安证

liuyg

2021-10-26 34d9a8662da32afd2c4e6dc2c5514321ed6121ca

 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;
}