<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">
|
发证公安机关 （印章）<br />
|
发证日期 {{ data.paperTime.slice(0, 10) }}
|
</div>
|
<div class="security_m_l_down">
|
证件编号 {{ 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>
|
