console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="content">
<div id="element-order-detail">
<div class="printBox" style="page-break-after: always" v-for="(page, j) in printList?.items" :key="j">
<div class="w-375 border border-black mb-4">
<div class="flex flex-row p-2">
<div class="flex flex-1 flex-col justify-center items-center">
<img class="w-[100px]" :src="fullUrl(page?.waybill.channel.logo_url)" />
</div>
<div class="flex flex-1 flex-col justify-center items-center">
<strong style="font-family: Arial, Helvetica, sans-serif" class="text-xl">
{{ page?.waybill.channel.name }}
</strong>
</div>
</div>
<div class="w-full border-t-1 border-gray-500 mb-2"></div>
<div class="flex flex-row justify-center items-center mb-2">
<img :src="page?.customer_contact_barcode" fit="cover" width="320" />
</div>
<div class="w-full border-t-1 border-gray-500 mb-2"></div>
<div class="flex flex-row mb-2">
<div class="flex flex-1 flex-col p-2">
<label class="font-semibold">SHIP FROM:</label>
<p class="text-lg">
{{
page?.waybill.addresses[0].first_name +
' ' +
page?.waybill.addresses[0].last_name +
' +' +
page?.waybill.addresses[0].mobile_code +
' ' +
page?.waybill.addresses[0].mobile
}}<br />
{{
page?.waybill.addresses[0].address_line_1 +
' ' +
page?.waybill.addresses[0].address_line_2 +
' ' +
page?.waybill.addresses[0].address_line_3
}}<br />
{{ page?.waybill.addresses[0].district }}<br v-if="page?.waybill.addresses[0].district" />
{{ page?.waybill.addresses[0].city }}<br v-if="page?.waybill.addresses[0].city" />
{{ page?.waybill.addresses[0].province }}<br v-if="page?.waybill.addresses[0].province" />
{{ page?.waybill.addresses[0].zip_code }}<br v-if="page?.waybill.addresses[0].zip_code" />
</p>
</div>
<div class="flex flex-1 flex-col p-2">
<label class="font-semibold">SHIP TO:</label>
<p class="text-lg">
{{
page?.waybill.addresses[1].first_name +
' ' +
page?.waybill.addresses[1].last_name +
' +' +
page?.waybill.addresses[1].mobile_code +
' ' +
page?.waybill.addresses[1].mobile
}}<br />
{{ page?.waybill.country.name }}<br />
{{
page?.waybill.addresses[1].province +
' ' +
page?.waybill.addresses[1].city +
' ' +
page?.waybill.addresses[1].district +
' ' +
page?.waybill.addresses[1].address_line_1 +
' ' +
page?.waybill.addresses[1].address_line_2 +
' ' +
page?.waybill.addresses[1].address_line_3 +
page?.waybill.addresses[1].zip_code
}}
</p>
</div>
</div>
<div class="w-full border-t-1 border-gray-500 mb-2"></div>
<div class="flex flex-row justify-center items-center mb-2">
<div class="flex flex-1 flex-col p-2">
<p class="font-semibold">增值服务：</p>
<div class="label-content">
<span v-for="(services, key) in servicesList" :key="key">
<strong style="color: #666">{{ key }}:</strong>
<p v-for="(value, v) in services" :key="v" style="margin: 5px">
<span>{{ value.name }}</span>
<span>{{ value.price }}</span>
</p>
</span>
</div>
</div>
</div>
<div class="w-full border-t-1 border-gray-500 mb-2"></div>
<div class="flex flex-row">
<div class="flex flex-1 flex-col p-2">
<p class="font-semibold">
Waybill No.：<span class="font-normal">{{ page?.order_box_no }}</span>
</p>
<p class="font-semibold">
Created:<span class="font-normal ml-2">{{ page?.create_date }}</span>
</p>
</div>
<div class="flex flex-1 flex-col items-center p-2">
<img :src="page?.customer_contact_qr_code" fit="cover" width="120" class="border" />
</div>
</div>
<div class="flex flex-row justify-center">
<span class="text-base">
{{ page.serial_number }}
</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html,
body,
#app {
overflow: visible !important;
background: white !important;
}
.content{
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
}
.printBox {
margin: 20px auto;
width: 375px;
background: white;
}
.w-375{
width: 375px;
}
.border {
border-width: 1px;
}
.border-black {
--tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity)) ;
}
.mb-4 {
margin-bottom: 1rem ;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.flex-1 {
flex: 1 1 0%;
}
.p-2 {
padding: 0.5rem ;
}
.justify-center {
justify-content: center;
}
.items-center {
align-items: center;
}
.text-xl {
font-size: 1.25rem ;
line-height: 1.75rem ;
}
.w-full {
width: 100%;
}
.border {
border-width: 1px;
}
.border-t-1{
border-top-width: 1px;
}
.border-gray-500 {
--tw-border-opacity: 1;
border-color: rgb(107 114 128 / var(--tw-border-opacity)) ;
}
.mb-2 {
margin-bottom: 0.5rem ;
}
.font-semibold {
font-weight: 600;
}
.font-normal {
font-weight: 400;
}
.text-lg {
font-size: 1.125rem ;
line-height: 1.75rem ;
}
.ml-2 {
margin-left: 0.5rem ;
}
.text-base {
font-size: 1rem ;
line-height: 1.5rem ;
}
.label-content {
display: flex;
flex-direction: column;
padding-left: 12px;
}