jennisonzhang/LabelChange-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传源代码版本

Browse Source
This commit is contained in:
Im-Jenisson
2026-06-01 16:30:29 +08:00
commit b2a9b7d3c2
462 changed files with 104365 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
NEW-Template.html Normal file
View File

@@ -0,0 +1,284 @@
<!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>