保安证书+

liuyg

2021-09-07 d941e5581706cf2df4fa959b0b4832b1da45e7e3

保安证书+

 public/img/securityCertificate/123.png

 public/img/securityCertificate/QQ截图.png

 public/img/securityCertificate/bj.jpeg

 public/img/securityCertificate/bj2.jpeg

 src/views/securityGuard/securityCertificate.vue

New file
@@ -0,0 +1,161 @@
<template>
  <div class="securityCertificate">
    <div class="security_main">
      <div class="security_m_left">
        <div class="security_m_l_up">
          <span class="security_m_l_u_fixed">{{ data.realName }}</span>
          经国家保安员考试审查合格。特颁此证。
        </div>
        <div class="security_m_l_center">
          发证公安机关&nbsp;（印章）<br />
          发证日期 &nbsp;{{ data.paperTime.slice(0, 10) }}
        </div>
        <div class="security_m_l_down">
          证件编号 &nbsp;{{ data.securitynumber }}
        </div>
      </div>
      <div class="security_m_right">
        <div class="security_m_r_img">
          <div v-if="!data.avatar">暂无照片</div>
          <img :src="data.avatar" alt="" v-else />
        </div>
        <div class="security_m_r_once">
          <span class="security_m_r_o_left">姓名</span>
          <span class="security_m_r_o_right">{{ data.realName }}</span>
        </div>
        <div class="security_m_r_once">
          <span class="security_m_r_o_left">出生年月</span>
          <span class="security_m_r_o_right">{{ data.birthday }}</span>
        </div>
        <div class="security_m_r_once security_m_r_odizhi">
          <span class="security_m_r_o_left security_m_r_o_l_ups">地址</span>
          <span class="security_m_r_o_right security_m_r_o_l_r">
            {{ data.address }}
          </span>
        </div>
        <div class="security_m_r_once">
          <div class="security_m_r_o_left">公民身份证号码</div>
          <div class="security_m_r_o_right">{{ data.cardid }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
};
</script>

<style lang="scss" scoped>
//保安证  本子
.securityCertificate {
  width: 100%;
  height: 90%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.security_main {
  width: 800px;
  height: 560px;
  //   border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-image: url(/img/securityCertificate/123.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.security_m_left,
.security_m_right {
  width: 380px;
  height: 540px;
  //   background-color: rgb(226, 226, 226);
  padding: 70px 40px;
  box-sizing: border-box;
  position: relative;
  //   background-image: url(/img/securityCertificate/bj2.jpeg);
  //   background-size: 100% 100%;
  //   background-repeat: no-repeat;
}
.security_m_left {
  padding-left: 70px;
  padding-right: 10px;
}
.security_m_l_up {
  font-size: 22px;
  width: 100%;
  margin-bottom: 150px;
  text-indent: 12rem;
  letter-spacing: 0.5rem;
  line-height: 2.5rem;
  // height: ;
}
.security_m_l_u_fixed {
  position: absolute;
  width: auto;
  left: -80px;
}
.security_m_l_center {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 40px;
}
.security_m_l_down {
  font-size: 22px;
}
.security_m_r_img {
  width: 100%;
  height: 210px;
  display: flex;
  //   align-items: center;
  justify-content: center;
}
.security_m_r_img img {
  width: 125px;
  height: 160px;
}
.security_m_r_once {
  position: relative;
  widows: 100%;
  font-size: 20px;
  margin-bottom: 10px;
  height: auto;
}
.security_m_r_o_left {
  width: 100px;
  height: auto;
  display: inline-block;
  text-align: justify;
  text-align-last: justify;
  margin-right: 10px;
  //   display: flex;
  //   justify-content: space-around;
}
.security_m_r_o_right {
  width: 190px;
  height: auto;
  display: inline-block;
}
.security_m_r_o_l_ups {
  position: absolute;
  //   bottom: 1.7rem;
  //   height: 3rem;
}
.security_m_r_o_l_r {
  position: relative;
  left: 110px;
}
.security_m_r_odizhi {
  height: 60px;
  overflow: hidden;
}
// .security_m_r_o_left:after {
//   display: inline-block;
//   content: "";
//   padding-left: 100%;
// }
</style>

 src/views/securityGuard/securityGuardDetail.vue

@@ -81,6 +81,9 @@
        </div>
      </div>
    </span>
    <span v-else-if="typeTABS.prop === 'tab5'">
      <securityCertificate :data="obj0"></securityCertificate>
    </span>
  </div>
</template> 

@@ -108,8 +111,12 @@
} from "@/api/performance/performance";

// import vueQr from "vue-qr";
import securityCertificate from "./securityCertificate.vue";

export default {
  components: {
    securityCertificate: securityCertificate,
  },
  data() {
    return {
      typeTABS: {}, //标签页
@@ -136,6 +143,11 @@
            label: "保安员证",
            prop: "tab4",
          },
          {
            // icon: "el-icon-info",
            label: "保安员证书",
            prop: "tab5",
          },
        ],
      },
      current: 1,