From bda7f5f3c581dcb4224b6c2f93f9bd5cae3ab9bb Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 03 Nov 2021 15:55:33 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.0.105:10010/r/zhba_enterprises
---
src/views/securityGuard/securityCertificate copy 2.vue | 271 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 271 insertions(+), 0 deletions(-)
diff --git a/src/views/securityGuard/securityCertificate copy 2.vue b/src/views/securityGuard/securityCertificate copy 2.vue
new file mode 100644
index 0000000..793d92c
--- /dev/null
+++ b/src/views/securityGuard/securityCertificate copy 2.vue
@@ -0,0 +1,271 @@
+<template>
+ <div class="securityCertificate" id="securityCertificate">
+ <div class="security_main" ref="securityCertificate">
+ <!-- 标题 -->
+ <div class="security_main_backImge no-print"></div>
+ <div class="security_main-title no-print">
+
+ <span style="letter-spacing: 0px">____________</span>
+ 经国家<br />保安员考试审查合格。<br />特颁此证。
+ </div>
+ <div class="security_m_l_center no-print">
+ 发证公安机关 （印章）<br />
+ 发证日期
+ 年 月
+ </div>
+ <div class="security_m_l_down no-print">证件编号</div>
+ <div class="security_m_r_a no-print">姓名</div>
+ <div class="security_m_r_b no-print">出生年月</div>
+ <div class="security_m_r_c no-print">地址</div>
+ <div class="security_m_r_d no-print">公民身份<br />号码</div>
+ <!-- 内容 -->
+ <div class="security_m_r_imgs no-print">
+ <div v-if="!data.avatar">暂无照片</div>
+ <img :src="data.avatar" alt="" v-else />
+ </div>
+ <div class="security_m_l_titleName">{{ data.realName }}</div>
+ <div class="security_m_l_titlepaperTimenian">
+ {{ data.paperTime.slice(0, 4) }}
+ </div>
+ <div class="security_m_l_titlepaperTimeyue">
+ {{ data.paperTime.slice(5, 7) }}
+ </div>
+ <div class="security_m_l_titlepaperTimeri">
+ {{ data.paperTime.slice(8, 10) }}
+ </div>
+ <div class="security_m_l_downsecuritynumber">
+ {{ data.securitynumber }}
+ </div>
+ <div class="security_m_r_o_right">{{ data.realName }}</div>
+ <div class="security_m_r_o_rightbirthday">{{ data.birthday }}</div>
+ <div class="security_m_r_o_rightaddress security_m_r_o_l_r">
+ {{ data.address }}
+ </div>
+ <div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
+ </div>
+ <span slot="footer" class="dialog-footer no-print PrintBut">
+ <el-button type="primary" @click="Print">打 印</el-button>
+ </span>
+ </div>
+</template>
+
+<script>
+import dictVertical from "../util/demo/dict-vertical.vue";
+export default {
+ components: { dictVertical },
+ 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>
+
+<style lang="scss" scoped>
+//保安证 本子
+.securityCertificate {
+ width: 100%;
+ height: 90%;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+.security_main {
+ width: 630px;
+ height: 512px;
+ // border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
+ // display: flex;
+ // align-items: center;
+ // justify-content: space-around;
+ // background-image: url(/img/securityCertificate/bazsss.png);
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat;
+ position: relative;
+}
+// 标题
+$upTop: 55px;
+$downTop: 280px;
+//经国家保安员考试审查合格。<br />特颁此证。
+.security_main-title {
+ position: absolute;
+ top: $upTop;
+ left: 39px;
+ line-height: 45px;
+ font-size: 22px;
+ font-weight: 300;
+ letter-spacing: 3px;
+}
+//发证公安机关 （印章）
+.security_m_l_center {
+ position: absolute;
+ top: $downTop;
+ left: 39px;
+ font-size: 18px;
+ line-height: 40px;
+}
+//证件编号
+.security_m_l_down {
+ position: absolute;
+ top: 421px;
+ left: 39px;
+ font-size: 24px;
+}
+
+$rightLeft: 343px;
+$rightFontSize: 18px;
+$rightWidth: 77px;
+
+$lineHigeht: 30px;
+//姓名
+.security_m_r_a {
+ position: absolute;
+ top: $downTop;
+ left: $rightLeft;
+ font-size: $rightFontSize;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//出生年月
+.security_m_r_b {
+ position: absolute;
+ top: $downTop + $lineHigeht * 1;
+ left: $rightLeft;
+ font-size: $rightFontSize;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//地址
+.security_m_r_c {
+ position: absolute;
+ top: $downTop + $lineHigeht * 2;
+ left: $rightLeft;
+ font-size: $rightFontSize;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//公民身份证
+.security_m_r_d {
+ position: absolute;
+ top: $downTop + $lineHigeht * 4;
+ left: $rightLeft;
+ font-size: $rightFontSize;
+ width: $rightWidth;
+ text-align: justify;
+ text-align-last: justify;
+}
+//照片
+// width: calc(358px / 22px);
+// height: calc(441px / 22px);
+.security_m_r_imgs {
+ width: calc(358px / 3);
+ height: calc(441px / 3);
+ position: absolute;
+ top: $upTop;
+ left: 421px;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+}
+// 内容
+// 抬头名字
+.security_m_l_titleName {
+ position: absolute;
+ top: 46px;
+ left: 85px;
+ line-height: 45px;
+ font-size: 22px;
+ font-weight: 300;
+ letter-spacing: 3px;
+}
+//发证时间
+$timeTop: 320px;
+//年
+.security_m_l_titlepaperTimenian {
+ position: absolute;
+ top: $timeTop;
+ left: 123px;
+ font-size: 18px;
+ line-height: 40px;
+}
+//月
+.security_m_l_titlepaperTimeyue {
+ position: absolute;
+ top: $timeTop;
+ left: 192px;
+ font-size: 18px;
+ line-height: 40px;
+}
+//日
+.security_m_l_titlepaperTimeri {
+ position: absolute;
+ top: $timeTop;
+ left: 253px;
+ font-size: 18px;
+ line-height: 40px;
+}
+//证件编号
+.security_m_l_downsecuritynumber {
+ position: absolute;
+ top: 421px;
+ left: 160px;
+ font-size: 24px;
+}
+// 姓名
+$centerLeft: 430px;
+.security_m_r_o_right {
+ position: absolute;
+ top: $downTop;
+ left: $centerLeft;
+ font-size: $rightFontSize;
+ // width: $rightWidth;
+}
+// 生日
+.security_m_r_o_rightbirthday {
+ position: absolute;
+ top: $downTop + $lineHigeht * 1;
+ left: $centerLeft;
+ font-size: $rightFontSize;
+ // width: $rightWidth;
+}
+// 地址
+.security_m_r_o_rightaddress {
+ position: absolute;
+ top: $downTop + $lineHigeht * 2;
+ left: $centerLeft;
+ font-size: $rightFontSize;
+ width: 160px;
+}
+// 身份证
+.security_m_r_o_rightcardid {
+ position: absolute;
+ top: $downTop + $lineHigeht * 4 +10px;
+ left: $centerLeft;
+ font-size: $rightFontSize;
+ // width: $rightWidth;
+}
+//背景图
+.security_main_backImge {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-image: url(/img/securityCertificate/bazsss.png);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3