<template>
|
<div class="form-container">
|
<div class="certContent" @click="getPdf()">
|
<div class="certNo">{{info.companyName}}</div>
|
<div class="main-content">
|
{{info.name}}
|
</div>
|
<div class="name-content">
|
{{info.stuName}}
|
</div>
|
<div class="num-content">
|
{{info.number}}
|
</div>
|
<div class="dep-content">
|
{{info.companyName}}
|
</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(()=>{
|
if(route.query.type == 'inter'){
|
data.info.name = route.query.paperName
|
data.info.stuName = route.query.personName
|
data.info.number = route.query.certifity
|
data.info.companyName = route.query.companyName
|
}else {
|
data.info = route.query
|
}
|
console.log(' data.info', data.info)
|
nextTick(()=>{
|
getPdf()
|
})
|
})
|
|
function getPdf() {
|
let title = data.info.stuName + '_' + 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;
|
top: 230px;
|
font-size: 1.3rem;
|
font-weight: 600;
|
color: rgb(10,38,140);
|
font-family: 'fangzhengKT';
|
}
|
|
.main-content{
|
position: absolute;
|
top: 365px;
|
font-size: 1.3rem;
|
font-weight: 600;
|
color: rgb(10,38,140);
|
font-family: 'fangzhengKT';
|
}
|
.name-content{
|
position: absolute;
|
top: 566px;
|
font-size: 1.0rem;
|
font-weight: 600;
|
font-family: 'fangzhengKT';
|
left: 715px;
|
}
|
.num-content{
|
position: absolute;
|
top: 628px;
|
font-size: 1.0rem;
|
font-weight: 600;
|
font-family: 'fangzhengKT';
|
left: 715px;
|
}
|
.dep-content{
|
position: absolute;
|
top: 688px;
|
font-size: 1.0rem;
|
font-weight: 600;
|
font-family: 'fangzhengKT';
|
left: 715px;
|
}
|
|
}
|
}
|
</style>
|
