<template>
|
<div class="form-container">
|
<div class="certContent" @click="getPdf()">
|
<div class="certNo">证书编号：新应急（{{ info.bigClassifyName }}）- {{info.id?.toString().padStart(5, '0')}}</div>
|
<div class="main-content">
|
兹聘任{{info.name}}同志为自治区应急管理厅安全生产{{info.domain}}领域{{info.ratingLevel == 1?'一级':info.ratingLevel == 2?'二级':info.ratingLevel == 3?'三级':''}}专家，聘任期为{{info.employmentDateStart?.substring(0,4)}}年{{info.employmentDateStart?.substring(5,7)}}月至{{info.employmentDateEnd?.substring(0,4)}}年{{info.employmentDateEnd?.substring(5,7)}}月。
|
</div>
|
<div class="main-content">
|
特发此证！
|
</div>
|
<div class="footer-content">
|
新疆维吾尔自治区应急管理厅<br/>
|
{{info.employmentDateStart?.substring(0,4)}}年{{info.employmentDateStart?.substring(5,7)}}月
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup>
|
import {reactive, ref, toRefs, onMounted, nextTick} from 'vue'
|
import {ElMessage, ElMessageBox} from "element-plus"
|
import htmlToPdf from '@/utils/htmlToPdf';
|
import { useRoute } from 'vue-router'
|
const { proxy } = getCurrentInstance();
|
const route = useRoute();
|
const data = reactive({
|
info: {}
|
})
|
const {info} = toRefs(data)
|
onMounted(()=>{
|
data.info = route.query
|
nextTick(()=>{
|
getPdf()
|
})
|
})
|
|
function getPdf() {
|
let title = data.info.name + '专家聘书'
|
htmlToPdf(title);
|
}
|
|
onMounted(()=>{
|
|
})
|
</script>
|
|
<style scoped lang="scss">
|
@font-face {
|
font-family: "fangzhengKT";
|
src: url("@/assets/styles/font/fangzhengKT.ttf");
|
font-style: normal;
|
font-weight: normal;
|
}
|
.form-container{
|
padding: 20px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.certContent{
|
width: calc(1920px * 0.8);
|
height: calc(1280px * 0.8);
|
background: url("@/assets/images/certBg.jpg") no-repeat center;
|
background-size: contain;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 420px 300px 120px;
|
color: #333;
|
position: relative;
|
|
.certNo{
|
position: absolute;
|
left: 235px;
|
top: 130px;
|
}
|
|
.main-content{
|
width: 100%;
|
font-size: 2.5rem;
|
text-align: left;
|
line-height: 1.8;
|
text-indent: 5rem;
|
letter-spacing: 2px;
|
font-family: 'fangzhengKT';
|
}
|
|
.footer-content{
|
font-size: 1.8rem;
|
transform: translate(250px,50px);
|
text-align: center;
|
line-height: 1.8;
|
}
|
}
|
}
|
</style>
|
