examtest/test_server/crm/templates/index2.html

227 lines
5.9 KiB
HTML

<!DOCTYPE html>
<!-- saved from url=(0082)https://fushe.chinansc.cn/open/cert-view?guid=8F1C280D-04CF-6D25-9C1E-252394AF2CC4 -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="webkit">
<title>
报告单
</title>
</head>
<body>
<div class="toolbar" id="print_area">
<div class="handle">
<button class="btn-print" type="button" onclick="printPage();"> 打印 </button>
</div>
</div>
<div class="paper">
<div class="cell">
<div class="cert active" id="cert"
style="position: relative; ;background:url(/media/default/bg2.jpg); background-size: cover; width: 210mm; height: 297mm; font-size: 10pt; zoom: 1;">
<div id="div1">
医学放射工作人员
</div>
<div id="div2">
培训合格证书
</div>
<div id="div3">
证书编号:{{candidate.number}}
</div>
<div id="div4">
姓名:{{candidate.consumer_name}}
</div>
<div id="div5">
工作单位:{{candidate.company_name}}
</div>
<div id="div6">
<p>于{{candidate.date1}}至{{candidate.date2}}参加{{candidate.train_name}},经考试合格,特授予培训合格证书。</p>
<p>有效期两年。</p>
</div>
<div id="div7">
国检集团-湖南华科检测技术有限公司
</div>
<div id="div8">
{{candidate.date3}}
</div>
</div>
</div>
</div>
<style>
#div1 {
position: absolute;
top: 56mm;
left: 52mm;
letter-spacing: 0.8mm;
color:rgb(1, 134, 216);
font-size: 36pt;
font-weight: bold;
font-family:STFangsong;
}
#div2 {
position: absolute;
top: 74mm;
left: 62mm;
letter-spacing: 2mm;
color:rgb(1, 134, 216);
font-size: 36pt;
font-weight: bold;
font-family:STFangsong;
}
#div3 {
position: absolute;
top: 100mm;
left: 72mm;
font-size: 16pt;
}
#div4 {
position: absolute; left: 50%;
top: 120mm;
transform: translate(-50%, -50%);
font-size: 18pt;
}
#div5 {
position: absolute; left: 50%;
top: 134mm;
transform: translate(-50%, -50%);
font-size: 18pt;
}
#div6 {
position: absolute;
top: 146mm;
left: 30mm;
right: 30mm;
text-indent:14mm;
font-size: 18pt;
line-height: 12mm;
}
#div7 {
position: absolute;
bottom: 64mm;
left: 30mm;
right: 30mm;
text-align: right;
font-size: 16pt;
font-family: YouYuan;
}
#div8 {
position: absolute;
bottom: 54mm;
left: 30mm;
right: 30mm;
text-align: right;
font-size: 16pt;
font-family: YouYuan;
}
body {
margin: 0 auto;
-webkit-print-color-adjust: exact;
}
.paper>.cell {
display: flex;
justify-content: center;
}
.toolbar {
position: fixed;
top: 0;
left: 0;
background: rgba(255, 255, 255, .9);
font-size: 16px;
width: 100%;
padding: 10px;
z-index: 9;
}
.toolbar select {
font: inherit;
padding: 5px;
font-size: 14px;
}
.toolbar .handle {
position: absolute;
right: 30px;
}
.btn-print {
font-size: 20px;
padding: 5px 20px;
cursor: pointer;
background: #3676D9;
color: white;
border: 1px solid #333;
}
.btn-print:hover {
background: #3091ff;
}
.paper>.cell {
page-break-after: always;
padding: 70pt;
margin: 0 auto;
}
@page {
size: auto;
margin: -1px;
}
@media print {
.paper>.cell {
max-width: auto;
padding: 0pt;
}
.toolbar {
display: none;
}
/**
不打印背景图background:transparent
打印背景图:background-color:transparent
*/
.cert {
background: transparent;
}
}
</style>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> -->
<script type="text/javascript">
// $(document).ready(function() {
// });
console.log(window.location.href)
// new QRCode(document.getElementById("qrcode"), {
// text: window.location.href,
// width: 100,
// height: 100});
function init() {
// $('select').change(function() {
// $('form').submit();
// });
if (navigator.userAgent.match(/mobile/i)) {
// $('#print_area').hide();
document.querySelector('#print_area').style.display = 'none';
}
}
function printPage() {
setTimeout(function () {
window.print();
}, 200);
}
</script>
</body>
</html>