92 lines
2.4 KiB
HTML
92 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<title>包装码标签-A4打印版</title>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<style>
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-size: 10pt;
|
|
font-family: SimSun, Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.label-page {
|
|
width: 210mm;
|
|
height: 297mm;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
page-break-after: always;
|
|
position: relative;
|
|
}
|
|
|
|
.label-page:last-child {
|
|
page-break-after: auto;
|
|
}
|
|
|
|
.label-content {
|
|
width: 600px;
|
|
height: 400px;
|
|
transform-origin: center center;
|
|
transform: scale(calc(210mm / 600px));
|
|
}
|
|
|
|
table {
|
|
width: 600px;
|
|
height: 400px;
|
|
border: 3px solid #000;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th, td {
|
|
border: 3px solid #000;
|
|
}
|
|
|
|
.div-with-border {
|
|
border-bottom: 3px solid #000;
|
|
padding: 18px;
|
|
text-align: left;
|
|
width: 320px;
|
|
display: block;
|
|
vertical-align: middle
|
|
}
|
|
|
|
.qrcode {
|
|
width: 260px;
|
|
height: 260px;
|
|
margin: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="label-page" th:each="item, iterStat : ${list}">
|
|
<div class="label-content">
|
|
<table>
|
|
<tr>
|
|
<td style="text-align: center;">
|
|
<img alt="" class="qrcode" th:src="${item.qrCode}"/>
|
|
<div style="font-size: 16pt" th:text="${item.no}">NFLG-QZ-002</div>
|
|
</td>
|
|
<td style="text-align: left;vertical-align: top">
|
|
<div class="div-with-border">包装名称: <span th:text="${item.name}">NFLG-QZ-002 测试包装名称</span></div>
|
|
<div class="div-with-border">包装类型: <span th:text="${item.typeName}">托盘</span></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |