一个小票打印模版(外卖模版)

某某小分队

已于 2024-08-27 15:27:45 修改

阅读量94

点赞数 1

文章标签： javascript 前端 css

于 2024-08-27 15:26:26 首次发布

本文链接：https://blog.csdn.net/f455179157/article/details/141604167

版权

<!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&nbsp;</td>
                        <td>18.00&nbsp;</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>收货人姓名：&nbsp;白鸽</label>
            <label>联系电话：02988888888<br />13888888888</label>
            <label>收货人地址：未央路XX小区1号楼一单元101&nbsp;</label>
        </div>
        <span>**************************</span>
    </div>
</div>
</body>
</html>

最终效果：