<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>小票打印</title>
<style type="text/css">
* {padding:0;margin:0;}
h1 {font-size:20px;}
h3 {font-size:16px;}
.left {float:left;}
.right {float:right;}
.clearfix {clear:both;}
ul {list-style:none;}
.print_container {padding:20px;width:188px;}
.section1 {}
.section2 label {display:block;}
.section3 label {display:block;}
.section4 {}
.section4 .total label {display: block;}
.section4 .other_fee {border-bottom:1px solid #DADADA;}
.section5 label {display:block;}
</style>
</head>
<body style="background-color:#fff;">
<div class="print_container">
<h1 align="center">给顾客用</h1>
<span>**************************</span>
<div class="section1">
<h3 align="center">未央区李四小吃店</h3>
</div>
<span>**************************</span>
<div class="section2">
<label>预计送达时间:20:18</label>
<label>订单备注:少辣</label>
</div>
<span>**************************</span>
<div class="section3">
<label>订单编号:24087981913692379</label>
<label>下单时间:2024-08-21 18:54:06</label>
</div>
<span>**************************</span>
<div class="section4">
<div style="border-bottom: 1px solid #DADADA;">
<table style="width: 100%;">
<thead>
<tr>
<td width="60%">商品名称</td>
<td width="20%">商品数量</td>
<td width="20%">价格小计</td>
</tr>
</thead>
<tbody>
<tr>
<td>木须肉盖饭</td>
<td>1 </td>
<td>18.00 </td>
</tr>
</tbody>
</table>
</div>
<div class="other_fee">
<div class="canh">
<label class="left">发票:</label>
<label class="left">无需发票</label>
<div class="clearfix"></div>
<div class="peis">
<label class="left">配送费:</label>
<label class="right">8.00</label>
<div class="clearfix"></div>
</div>
<div class="manj">
<label class="left">立减优惠:</label>
<label class="left">12</label>
<div class="clearfix"></div>
</div>
</div>
<div class="total">
<label class="left">合计</label>
<label class="right">14.00</label>
<div class="clearfix"></div>
</div>
<div style="text-align: right;">
<label>线上付款</label>
</div>
<span>**************************</span>
</div>
<div class="section5">
<label>收货人姓名: 白鸽</label>
<label>联系电话:02988888888<br />13888888888</label>
<label>收货人地址:未央路XX小区1号楼一单元101 </label>
</div>
<span>**************************</span>
</div>
</div>
</body>
</html>
最终效果: