前端项目实战叁-兼容条形打印机移动端单位用毫米设定(div版)

 大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识

样式

#customers {
    padding: 1mm 0;
    width: 40mm;
    height: 50mm;
    text-align: center;
    box-sizing: border-box;
}
#customers div {
    height: 7mm;
}
/*id为customers 的标签里面的td标签和th标签的样式*/
#customers span {
    font-size: 16px;
    font-family: "黑体";
    font-weight: "bold";
}
.imgData {
    display: block;
    width: 40mm;
    height: 6mm;
}

骨架

 <div id='customers'>
                        <div>
                            <span>日期</span>:<span>{item?.date}</span>
                        </div>
                        <div>
                            <span>制单</span>:<span>{item?.manufactureCode}</span>
                        </div>
                        <div>
                            <span>款号</span>:<span>{item?.style}</span>
                        </div>
                        <div>
                            <span>颜色</span>:<span>{item?.color}</span>
                        
                        </div>
                        <div>
                            <span>尺码</span>:<span>{item?.size}</span>
                        </div>
                        <div>
                            <span>数量</span>:<span>{item?.total}</span>
                        </div>
                        <img className='imgData' src={`data:image/jpeg;base64,${item?.base64}`}></img> 
                    </div>

运行结果