+保安证书新样式

liuyg

2021-11-02 94c4afe0e082b50fb60ebf5c7fb594af3cc0770b

+保安证书新样式

 src/views/securityGuard/securityCertificate copy.vue

New file
@@ -0,0 +1,179 @@
<template>
  <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>
          经国家保安员考试审查合格。特颁此证。
        </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>
    <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>

<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: 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/bazsss.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: calc(358px / 2.2);
  height: calc(441px / 2.2);
}
.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/securityCertificate.vue

@@ -1,43 +1,46 @@
<template>
  <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>
          经国家保安员考试审查合格。特颁此证。
        </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 class="security_main-title">
        &nbsp;&nbsp;&nbsp;
        <span style="letter-spacing: 0px">____________</span>
        经国家<br />保安员考试审查合格。<br />特颁此证。
      </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 class="security_m_l_center">
        发证公安机关&nbsp;（印章）<br />
        发证日期
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月
      </div>
      <div class="security_m_l_down">证件编号</div>
      <div class="security_m_r_a">姓名</div>
      <div class="security_m_r_b">出生年月</div>
      <div class="security_m_r_c">地址</div>
      <div class="security_m_r_d">公民身份<br />号码</div>
      <!-- 内容 -->
      <div class="security_m_r_imgs">
        <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>
@@ -46,7 +49,9 @@
</template>

<script>
import dictVertical from "../util/demo/dict-vertical.vue";
export default {
  components: { dictVertical },
  props: ["data"],
  methods: {
    Print() {
@@ -77,103 +82,180 @@
  flex-direction: column;
}
.security_main {
  width: 800px;
  height: 560px;
  width: 630px;
  height: 512px;
  //   border: 1px solid rgba($color: #a5a5a5, $alpha: 0.5);
  display: flex;
  align-items: center;
  justify-content: space-around;
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
  background-image: url(/img/securityCertificate/bazsss.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 {
// 标题
$upTop: 55px;
$downTop: 280px;
//经国家保安员考试审查合格。<br />特颁此证。
.security_main-title {
  position: absolute;
  width: auto;
  left: -80px;
  top: $upTop;
  left: 39px;
  line-height: 45px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 3px;
}
//发证公安机关&nbsp;（印章）
.security_m_l_center {
  position: absolute;
  top: $downTop;
  left: 39px;
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 40px;
}
//证件编号 &nbsp;
.security_m_l_down {
  font-size: 22px;
  position: absolute;
  top: 421px;
  left: 39px;
  font-size: 24px;
}
.security_m_r_img {
  width: 100%;
  height: 210px;
  display: flex;
  //   align-items: center;
  justify-content: center;
}
.security_m_r_img img {
  width: calc(358px / 2.2);
  height: calc(441px / 2.2);
}
.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;

$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;
  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 {
//出生年月
.security_m_r_b {
  position: absolute;
  //   bottom: 1.7rem;
  //   height: 3rem;
  top: $downTop + $lineHigeht * 1;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
}
.security_m_r_o_l_r {
  position: relative;
  left: 110px;
//地址
.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_odizhi {
  height: 60px;
  overflow: hidden;
//公民身份证
.security_m_r_d {
  position: absolute;
  top: $downTop + $lineHigeht * 4;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
}
// .security_m_r_o_left:after {
//   display: inline-block;
//   content: "";
//   padding-left: 100%;
// }
//照片
// 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 * 5 - 7px;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
}
</style>