<template>
|
<div class="form-container">
|
<div class="certContent" @click="getPdf()">
|
<div class="main-content">
|
兹聘任{{info.name}}同志为自治区应急管理厅专家，聘任期为{{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.updateTime?.substring(0,4)}}年{{info.updateTime?.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(()=>{
|
|
})
|
|
defineExpose({
|
getPdf
|
})
|
</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: 1920px;
|
height: 1280px;
|
background: url("@/assets/images/certBg.jpg") no-repeat center;
|
background-size: contain;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 550px 380px 80px;
|
color: #9e0500;
|
|
.main-content{
|
width: 100%;
|
font-size: 50px;
|
text-align: left;
|
line-height: 1.8;
|
text-indent: 100px;
|
letter-spacing: 2px;
|
font-family: 'fangzhengKT';
|
}
|
|
.footer-content{
|
font-size: 36px;
|
transform: translate(200px,120px);
|
text-align: center;
|
line-height: 1.8;
|
}
|
}
|
}
|
</style>
|
