顺丰html面单 - 走看看

zoukankan html css js c++ java

顺丰html面单

<html moznomarginboxes mozdisallowselectionprint>

<head>
<style>
@media print {
@page {
size: auto;
margin: 1cm;
}

#printBtnWrapper {
display: none;
}

.printTitleHide {
display: none;
}
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

.clearfix {
display: inline-table;
}

* {
box-sizing: border-box;
}

body {
font-family: '思源宋体';
font-size: 18px;
}

/*css reset*/
body,
h2,
p {
margin: 0;
padding: 0;
}

h2,
b {
font-weight: normal;
}

ul,
ol,
li {
margin: 0;
padding: 0;
list-style: none;
}

.printBtn {
150px;
height: 30px;
background-color: #35aa47;
color: #ffffff;
font-size: 14px;
border: none;
}

.wrapper {
position: relative;
10cm;
height: 21cm;
margin: 0 auto;
}

.logo {
text-align: center;
margin-bottom: 30px;
}

.user-info {
500px;
}

.user-info .title {
padding-bottom: 10px;
border-bottom: 1px solid #000;
}

.user-info .name {
margin-top: 10px;
}

.inof-rig-ma {
position: absolute;
top: 95px;
right: 50px;
text-align: center;
}

.drug {
padding: 10px 0;
}

.drug h2 {
font-size: 18px;
}
.drug-list{
color:#616262;
margin-left:-20px;
}
.drug-list li{
float:left;
margin-bottom:10px;
margin-left:20px;
padding: 2px;
border:1px solid #000;
color: #000;
}
.drug-product-list {
100%;
color: #616262;
margin-left: -20px;
}

.drug-product-list li {
100%;
margin-bottom: 10px;
margin-left: 20px;
padding: 2px;
color: #000;
}
.drug-product-list li .drug-product-ingredients {
/*font-weight: bold;*/
}

.drug-product-list li .drug-product-name {
margin-top: 6px;
color: #777878;
font-size: 14px;
}

.drug-product-list li .drug-product-other {
100%;
text-align: right;
margin-top: 6px;
margin-right: 20px;
font-size: 16px;
}

.herb-list {
100%;
border-collapse: collapse;
font-size: 22px;
}

.herb-list tr {
display: flex;
flex-flow: row wrap;
flex-direction: row;
}

.herb-list td {
display: flex;
align-items: center;
justify-content: center;
flex: none;
33.33%;
padding: 10px;
border: 1px solid #000;
}

.delay-drug label {
color: #777878;
margin-left: 30px;
}

.delay-drug label:first-of-type {
margin-left: 0;
}

.delay-drug label input {
display: none;
}

.delay-drug label a {
display: inline-block;
10px;
height: 10px;
border: solid 1px #0b0306;
position: relative;
margin-right: 5px;
}

.delay-drug label input:checked+a:after {
/*display: block;
content: '';
30px;
height:30px;
position:absolute;
left:0;
top:-10px;
background:url("./images/checked.png") no-repeat;
background-size:30px 30px;*/
}

td>div {
text-align: right;
}

*{margin:0;padding:0}
table{margin-top:-1px;font:12px "Microsoft YaHei",Verdana,arial,sans-serif;border-collapse:collapse;}
table.container{ 10cm;}
table td{border:1px solid #000}
table.nob{100%}
table.nob td{border:0}
table td.center{text-align:center}
table td.right{text-align:right}
table td.pl{padding-left:5px}
.font_s{font-size:10px;-webkit-transform:scale(0.84,0.84);*font-size:10px}
.font_m{font-size:14px;font-weight:bold}
.font_l{font-size:16px;font-weight:bold}
.font_xl{font-size:18px;font-weight:bold}
.font_xxl{font-size:32px;font-weight:bold}
table td img{margin-left: 5px; margin-right: 5px;}

</style>
</head>

<body id="printPage" onafterprint="afterPrintFunc()">
<div id="printBtnWrapper" style="margin: 20px 0 0 20px;">
<button class="printBtn printBtn-single">打印</button>
</div>
<div class="wrapper">
<table class="container">
<tr>
<td>
<img src="http://www.kwmzy.com:8005/admin/assets/sf/logo.png">
</td>
<td><img src="http://www.kwmzy.com:8005/admin/assets/sf/tel.png"></td>
</tr>
<tr style="font-size: 6pt;">
<td colspan="2">
<span style="margin-left: 3cm;">ZJ     打印时间 2020-05-29 19:47</span>
</td>
</tr>
</table>
<table class="container" style="height: 2.2cm;text-indent: 0;">
<tr>
<td>
<img style="height: 2cm; 7cm; margin-top: 0.3cm; margin-bottom: 0.2cm;margin-left: 0.5cm;margin-right: 0.5cm;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAegAAAAeAQMAAADdIh//AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUOI3ty8EJwEAIRFEh1wVbSQGCrQfmumArglcPcdNG5vb58KQEsZdeltlV0Fg+mZjcbicbAf1uA6gp87sTT4dQU1NTU1P/Vr8/YkxH4L6sYgAAAABJRU5ErkJggg=="/>
<p style="text-align: center;font-family: Arial; font-size: 10pt;">SF 744 440 654 8606</p>
</td>
<td><img style="height: 2cm; " src='http://www.kwmzy.com:8005/admin/assets/sf/T4.png'></td>
</tr>
</table>
<table class="container" style="height: 3cm; position: relative;">
<tr>
<td colspan="3" style="font-size: 20pt; font-weight: 600; font-family: 宋体; height: 1cm;">020</td>
</tr>
<tr>
<td width="10%"><img style=" 0.7cm; height: 0.7cm;" src="http://www.kwmzy.com:8005/admin/assets/sf/r.png"></td>
<td width="70%" style="font-size: 11pt;" class="pl">
<p>未知     136****4849</p>
<p>广东省广州市天河区热热太突然有</p>
<p style="position: absolute;top: 45%; left: 25%; color: #97a3b4; z-index: 999; font-size: 30pt;"></p>
</td>
<td width="10"> <img style="height: 1cm; " src='http://www.kwmzy.com:8005/admin/assets/sf/cod.jpg'> </td>
</tr>
</table>
<table class="container">
<tr>
<td>
<p style="text-align: center;">寄付月结</p>
<p style="font-size: 40pt; text-align: center;"></p>
</td>
<td><img style=" 3.2cm; height: 2.6cm; margin: 5px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAABvAQMAAADYCwwjAAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAmVJREFUOI2FlUGO6yAQRNvygl24gX0RJK5FNmGkuYd9lckF4it4xxaJjS1Z9FSDR5pPPPpWFnlWB4rqokPMx0A2dyGS5Uz/xextvjNvgpFM9kTO8Gbo1mJiwxzmHcWGX4LjHuYnp69r5D0wnuXE7FT2atLXKJUc8g/2C88LRF5jWqSYWRAvsWPa15FPzb8RB0yLSXwwn+cVlM9fCMFcUR4NDJ8Lnc8vlAVPGWFyFY9+X/P9L2TeuSJpLCC2524ty/6D42KlKV4cSa+KhvzRs31HLIvimQviCM8QnZqLwujeEAKAbAaPnpLs6Kiv+NUids8epxMxKOZFfeiQyUZS8zuynTR+bkU0ZGxm6A5yNOIIF3i6UYvJqbQERnKeYXq0GJ2tTcGbElEr3UEBury1ePZOUndA87iE9KXinSe9Dq7Fsr1KO09+HR7IFc5LaNmAzN9aLG7A5zCzyg/KmgZnZwnDBSLzg1gRaur6xcihmLJcpRZHPmLptVyrTOO+Rs1Th3sk+zYoHYTPd4ZsOAlzcndEZ67xLr5hl1R9vgcYK7n2xecGfTF5K8HDW39kbWcgibENijnaSja6A8VY50NuhIrdOr7eEQ5TceMYy5ARSzu5oReoJW/zEz5XVAgV8BOWPlpMEODqNRTNabOTU1EbOcJ2gfhSZHO93XByIsVM8daiDEYtHceQSWUyRBjrDQbUJZaJhFlq6hTtJcArebS4RZl1kmfkqmgWxPwhYHpdIjSo/FOcSU1eSaPdBaJywp1FSB4VMVtWRoZvl4jEriK7jM0oAZZwvqPUADGH2Zz/Gg6BNz3C3OI3XiTbkMx5f48AAAAASUVORK5CYII="></td>
<td style="font-size: 20pt;" width="10%;" class="pl">已验收</td>
<td style=" 30%;">
<p></p>
<p style="font-size: 30pt;"></p>
</td>
</tr>
</table>
<div style="height: 0.1cm;"></div>
<table class="container" style="height: 1.5cm; font-size: 11pt;">
<tr>
<td>
<img style=" 0.7cm; height: 0.7cm;" src="http://www.kwmzy.com:8005/admin/assets/sf/s.png" >
</td>
<td class="pl">
<p>**药业    020****7997</p>
<p>广东省广州市番禺区番禺区</p>
</td>
</tr>
</table>
<table class="container" style="height: 2.6cm;">
<tr>
<td width="50%" class="pl">
<p>托寄物：药品</p>
<p>订单号：833382</p>
</td>
<td class="pl">
增值服务：
</td>
</tr>
</table>
<div style="height: 0.1cm;"></div>
<table class="container" style="height: 1.7cm;">
<tr>
<td>
<p><img style="height: 0.6cm; 1.7cm;" src="http://www.kwmzy.com:8005/admin/assets/sf/logo.png"></p>
<p><img style="height: 0.6cm; 1.7cm; margin-top: 10px;" src="http://www.kwmzy.com:8005/admin/assets/sf/tel.png"></p>
</td>
<td>
<img style="height: 0.9cm; 5.4cm; margin-top: 0.3cm; margin-bottom: 0.2cm;margin-left: 0.5cm;margin-right: 0.5cm;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAegAAAAeAQMAAADdIh//AAAABlBMVEX///8AAABVwtN+AAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAEtJREFUOI3ty8EJwEAIRFEh1wVbSQGCrQfmumArglcPcdNG5vb58KQEsZdeltlV0Fg+mZjcbicbAf1uA6gp87sTT4dQU1NTU1P/Vr8/YkxH4L6sYgAAAABJRU5ErkJggg=="/>
<p style="text-align: center;font-family: Arial; font-size: 10pt;">SF 744 440 654 8606</p>
</td>
<td class="pl" width="20%">
<p>产品类型</p>
<p style="margin-top: 10px;">顺丰标快</p>
</td>
</tr>
</table>

<table class="container" style="height: 0.9cm;">
<tr>
<td style=" 10%;">
<img style=" 0.7cm; height: 0.7cm;" src="http://www.kwmzy.com:8005/admin/assets/sf/s.png" >
</td>
<td class="pl" style="font-size: 8pt;">
<p>至信药业    020****7997</p>
<p>广东省广州市番禺区番禺区</p>
</td>
</tr>
</table>

<table class="container" style="height: 0.9cm;">
<tr>
<td style=" 10%;">
<img style=" 0.7cm; height: 0.7cm;" src="http://www.kwmzy.com:8005/admin/assets/sf/r.png" >
</td>
<td class="pl" style="font-size: 8pt;">
<p>未知     136****4849</p>
<p>广东省广州市天河区热热太突然有</p>
</td>
</tr>
</table>

<table class="container" style="height: 1.8cm;">
<tr>
<td class="pl">
<p>托寄物：药品</p>
<p>订单号：833382</p>
<p>付款方式：寄付月结</p>
</td>
<td width="60%" class="pl">
代收货款金额：27.74 </td>
</tr>
</table>

<table class="container" style="height: 0.5cm;">
<tr>
<td class="pl">快递：1件</td>
<td class="pl">计费重量：</td>
<td width="30%"></td>
</tr>
</table>
</div>

<script src="http://www.kwmzy.com:8005/admin/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

var printSingleFunc = function(target) {
var $this = $(target);
$this.attr('disabled', 'disabled');
$this.css('background-color', '#cccccc');
$this.text('处理中');
window.print();
$.ajax({
type: "GET",
url: 'http://www.kwmzy.com:8005/tdadmin/pharmacy/single/print/number?ids=833382',
success: function(res) {
if (res.success) {
window.print();
} else {
alert(res.msg);
}
$this.removeAttr('disabled');
$this.css('background-color', '#35aa47');

$('#title').text('');
},
dataType: 'json'
});
};

$('.printBtn-single').on('click', function() {
printSingleFunc(this);
});

});

function afterPrintFunc() {
$('.herb-weight').show();
$('.herb-dose').show();
$(".herb-list .herb-weight .total-weight").hide();
$(".herb-list .herb-weight .weight").show();
}
</script>
</body>

</html>

查看全文

相关阅读:
有n个人围成一圈，顺序排号。从第一个人开始报数（从1到3报数），凡报到3的人退出圈子，问最后留下的是原来第几号的那位。
一球从100米高度自由落下，每次落地后反跳回原高度的一半；再落下，求它在第n次落地时，共经过多少米？第n次反弹多高？（n<=10）
【maven】Failed to execute goal org.apache.maven.plugins:maven-site-plugin:3.3:site (default-site)
【maven和jdk】报错：系统找不到指定的文件
 【maven】pom.xml中"spring-boot-maven-plugin"报红问题
 idea中注释变成繁体字
 idea使用lombok不生效
 大数据基础复习
 【编译原理】求First和Follow
【vue-08】vuex

原文地址：https://www.cnblogs.com/qiuxiaoliang/p/13094132.html