284 lines
14 KiB
HTML
284 lines
14 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Label</title>
|
||
<style>
|
||
@page {
|
||
size: 100mm 150mm; /* Page size */
|
||
margin: 0; /* No margin */
|
||
}
|
||
body {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh; /* 设置为全屏高度，确保居中 */
|
||
margin: 0;
|
||
font-family: Arial;
|
||
}
|
||
.label-content {
|
||
width: 100mm;
|
||
height: 150mm;
|
||
overflow: hidden;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
-webkit-box-shadow: 0 0 10px #000;
|
||
-moz-box-shadow: 0 0 10px #000;
|
||
box-shadow: 0 0 10px #000;
|
||
position: relative;
|
||
margin: auto; /* 添加这个属性 */
|
||
}
|
||
.custom-drop {
|
||
position: absolute;
|
||
left: 5px;
|
||
right: 5px;
|
||
top: 5px;
|
||
bottom: 5px;
|
||
cursor: default;
|
||
border: 1px solid #e0e0e0;
|
||
z-index: 2;
|
||
}
|
||
.dropitem {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
width: auto;
|
||
line-height: 1;
|
||
font-size: 12px;
|
||
text-align: left;
|
||
overflow: visible;
|
||
max-width: 100%;
|
||
z-index: 1;
|
||
border: blue 1px solid;/*边框，测试调距*/
|
||
padding: 0;
|
||
color: #000000;
|
||
}
|
||
.dropitem.linetype {
|
||
box-sizing: border-box;
|
||
overflow: inherit;
|
||
}
|
||
.dropitem .title {
|
||
padding-right: 5px;
|
||
font-family: Arial;
|
||
text-align: left;
|
||
}
|
||
.dropitem i {
|
||
padding-right: 3px;
|
||
}
|
||
.dropitem.barcode {
|
||
text-align: center;
|
||
overflow: visible;
|
||
}
|
||
.dropitem.barcode img {
|
||
max-width: 100%;
|
||
min-width: 100px;
|
||
min-height: 28px;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
.dropitem.barcode .codemunber {
|
||
font-family: Arial;
|
||
padding-top: 2px;
|
||
display: block;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
.dropitem.onlineimage img {
|
||
max-height: 100%;
|
||
max-width: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
.dropitem.address .detail.block > span {
|
||
display: block;
|
||
font-family: Monospace;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="label-content">
|
||
<div class="custom-drop ui-droppable">
|
||
<!-- 画线 -->
|
||
<div class="dropitem linetype" style="width: 2px; border-left: 2px solid rgb(0, 0, 0); height: 555px; margin: 0 auto auto 0; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 2px; border-left: 2px solid rgb(0, 0, 0); height: 555px; margin: 0 auto auto 364px; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 0 auto auto 0; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 553px auto auto 0; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 39px auto auto 0; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 78px auto auto 0; opacity: 1;">
|
||
<div class="dropitem linetype" style="width: 10%; border: 1px solid rgb(0, 0, 0); height: 40px; margin: -40px auto auto 0; opacity: 1;text-align: center;">
|
||
<span class="detail" style="font-size: 18px;width:100%; line-height: 40px;">
|
||
<span>1A</span>
|
||
</span>
|
||
</div><div class="dropitem linetype" style="width: 20%; border: 1px solid rgb(0, 0, 0); height: 40px; margin: -40px auto auto 10%; opacity: 1;text-align: center;">
|
||
<span class="detail" style="font-size: 18px;width:100%; line-height: 40px;">
|
||
<span>2AAAA</span>
|
||
</span>
|
||
</div><div class="dropitem linetype" style="width: 20%; border: 1px solid rgb(0, 0, 0); height: 40px; margin: -40px auto auto 30%; opacity: 1;text-align: center">
|
||
<span class="detail" style="font-size: 18px;width:100%; line-height: 40px;">
|
||
<span>3AAAA</span>
|
||
</span>
|
||
</div><div class="dropitem linetype" style="width: 40%; border: 1px solid rgb(0, 0, 0); height: 40px; margin: -40px auto auto 50%; opacity: 1;text-align: center;background-color: black;">
|
||
<span class="detail" style="font-size: 18px;width:100%; line-height: 40px;color:white">
|
||
<span>4AAAAAAAA</span>
|
||
</span>
|
||
</div><div class="dropitem linetype" style="width: 10%; border: 1px solid rgb(0, 0, 0); height: 40px; margin: -40px auto auto 90%; opacity: 1;text-align: center">
|
||
<span class="detail" style="font-size: 18px;width:100%; line-height: 40px;">
|
||
<span>5A</span>
|
||
</span>
|
||
</div>
|
||
</div><div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 415px auto auto 0; opacity: 1;"></div>
|
||
<div class="dropitem linetype" style="width: 366px; border-top: 2px solid rgb(0, 0, 0); height: 2px; margin: 300px auto auto 0px; opacity: 1;"></div>
|
||
|
||
<!-- LOGO -->
|
||
<div class="dropitem character onlineimage" style="width:149px;height:35px;opacity:1;margin:5px auto auto 5px;text-align:left">
|
||
<strong class="title" style="font-weight:700;font-size:28px">Economy</strong>
|
||
</div>
|
||
<!-- 右上角，仓库 -->
|
||
<div class="dropitem character active" style="width: 190px; margin: 8px auto auto 170px; opacity: 1; height: 25px; text-align: center;">
|
||
<span class="detail" style="font-size: 36px; line-height: 20px; font-weight: 700;">
|
||
<span th:text="${orderDetailInfo.dcCode}">ORD-FK</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- From -->
|
||
<div class="dropitem character" style="width: 75px; margin: 345px auto auto 5px; opacity: 1; height: 18px; font-family: Monospace;font-size: 14px; line-height: 14px;">
|
||
<span class="detail" style="white-space:nowrap">SHIP FROM：</span>
|
||
</div>
|
||
<div class="dropitem character address" data-title="发件人地址" style="width: 170px; margin: 345px auto auto 85px; opacity: 1; height: 12px;">
|
||
<span class="detail block" style="font-size: 14px; line-height: 14px;">
|
||
|
||
<span class="name"><span th:text="${orderDetailInfo.senderName}">Sender Name</span></span>
|
||
|
||
|
||
|
||
|
||
|
||
</span>
|
||
</div>
|
||
|
||
<div class="dropitem character address" data-title="发件人地址" style="width: 250px; margin: 370px auto auto 5px; opacity: 1; height: 35px;">
|
||
<span class="detail block" style="font-size: 14px; line-height: 14px;">
|
||
|
||
|
||
<span class="street"><span th:text="${orderDetailInfo.senderAddress}">sender Address</span></span>
|
||
<span class="area" style="white-space:nowrap;margin:4px auto auto auto">
|
||
|
||
<span th:text="${orderDetailInfo.senderCity}">senderCity</span>.
|
||
<span th:text="${orderDetailInfo.senderState}">IL</span>,
|
||
<span th:text="${orderDetailInfo.senderZip}">201101</span>
|
||
</span>
|
||
|
||
|
||
|
||
</span>
|
||
</div><!-- To -->
|
||
<div class="dropitem character" style="width: 60px;margin: 90px auto auto 5px;font-size: 14px;font-family: Monospace;line-height: 14px;opacity: 1;height: 21px;">
|
||
<span class="detail" style="font-weight: 100;white-space:nowrap">SHIP TO：</span>
|
||
|
||
|
||
</div>
|
||
<div class="dropitem character address" data-title="收件人地址" style="width: 270px; margin: 90px auto auto 80px; opacity: 1; height: 20px;">
|
||
<span class="detail block" style="line-height: 14px; font-size: 14px;font-weight:700">
|
||
|
||
<span class="name"><span th:text="${orderDetailInfo.recipientName}">Recipient Name</span></span>
|
||
|
||
|
||
|
||
|
||
|
||
</span>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="dropitem character address" data-title="收件人地址" style="width: 340px; margin: 125px auto auto 10px; opacity: 1; height: 38px;">
|
||
<span class="detail block" style="line-height: 14px; font-size: 14px;">
|
||
|
||
|
||
<span class="street" style="font-size:24px;font-weight:700"><span th:text="${orderDetailInfo.recipientAddress}">Recipient Address</span></span>
|
||
<span class="area" style="margin: 9px auto auto auto;">
|
||
<span th:text="${orderDetailInfo.recipientCity}">City</span>,
|
||
<span th:text="${orderDetailInfo.recipientState}">State</span>,
|
||
<span class="detail">
|
||
<span th:text="${orderDetailInfo.recipientZip}">90106</span>
|
||
</span>
|
||
</span>
|
||
<span class="country_code" style="display: none;">
|
||
<span th:text="${orderDetailInfo.recipientCountry}">GB</span>
|
||
</span>
|
||
<span class="postcode" style="display: none;">
|
||
<span th:text="${orderDetailInfo.recipientZip}">90106</span>
|
||
</span>
|
||
|
||
</span>
|
||
</div><!-- 分拣码 -->
|
||
<div class="dropitem character" style="width: 340px; margin: 170px auto auto 10px; opacity: 1; height: 25px;text-align: right;">
|
||
<span class="detail" style="font-weight: 700; font-size: 24px; line-height: 24px;">
|
||
<span th:text="${orderDetailInfo.sortCode}">A2-IL-DD02</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 中部条码部分 -->
|
||
<div class="dropitem character" style="width: 108px; margin: 275px auto auto 30px; opacity: 1; height: 17px;">
|
||
<span class="detail">Tracking Number：</span>
|
||
</div>
|
||
<div class="dropitem barcode" data-minwidth="142" style="width: 300px; height: 60px; margin: 208px auto auto 32px; opacity: 1;">
|
||
<span><img th:src="'data:image/png;base64,' + ${barcodeBase64}"></span>
|
||
<span class="codemunber" style="font-weight: 700; font-size: 18px;">
|
||
<span th:text="${orderDetailInfo.orderNo}">TE000</span>
|
||
</span>
|
||
</div>
|
||
<!-- QR二维码 -->
|
||
<div class="dropitem character" style="width: 100px;height: 100px; margin: 310px auto auto 262px; line-height: 18px; opacity: 1;">
|
||
<span><img th:src="'data:image/png;base64,' + ${qrCodeBase64}"></span>
|
||
</div>
|
||
|
||
<!-- 底部，ReferenceNo -->
|
||
<div class="dropitem character" data-title="客户单号" style="width: 247px; margin: 310.6px auto auto 7.58752px; height: 21px; opacity: 1;">
|
||
|
||
<span class="detail" style="line-height: 21px; font-size: 20px;">
|
||
<span th:text="${orderDetailInfo.referenceNo}">Reference</span>
|
||
</span>
|
||
</div>
|
||
<div class="dropitem character" data-title="打印时间" style="width: 120px; margin: 526px auto auto 5px; opacity: 1; height: 24px;text-align:center">
|
||
<strong class="title"></strong>
|
||
<span class="detail" style="font-size: 18px; line-height: 18px;">
|
||
<span th:text="${#dates.format(orderDetailInfo.createTime, 'yyyy-MM-dd')}">yyyy-MM-dd</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 右下角，渠道 -->
|
||
<div class="dropitem character" data-title="客户代码" style="width:205px; margin: 525px auto auto 155px; opacity: 1; height: 25px; text-align: right;">
|
||
<span class="detail" style="font-size: 24px; line-height: 24px; font-weight: 700;">
|
||
<span th:text="${orderDetailInfo.channelCode}">Channel</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- 内容、数量、重量（隐藏） -->
|
||
<!-- <div class="dropitem character" data-type="character" data-title="英文品名"-->
|
||
<!-- style="width: 106px; margin: 452px auto auto 250px; overflow: hidden; opacity: 1; height: 27px;display: none;">-->
|
||
<!-- <strong class="title"></strong>-->
|
||
<!-- <span class="detail">-->
|
||
<!-- <span th:text="${orderDetailInfo.description}">英文品名</span>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="dropitem character" data-type="character" data-title="SKU*数量"-->
|
||
<!-- style="width: 104px; margin: 477px auto auto 250px; overflow: hidden; opacity: 1; height: 26px;display: none;">-->
|
||
<!-- <strong class="title"></strong>-->
|
||
<!-- <span class="detail">-->
|
||
<!-- <span th:text="${orderDetailInfo.quantity}">数量</span>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="dropitem character" data-type="character" data-title="重量"-->
|
||
<!-- style="width: 87px; margin: 503px auto auto 250px; opacity: 1; height: 17px;display: none;">-->
|
||
<!-- <strong class="title"></strong>-->
|
||
<!-- <span class="detail">-->
|
||
<!-- <span th:text="${orderDetailInfo.volume}">0.2KG</span>-->
|
||
<!-- </span>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</body>
|
||
</html> |