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

简介: 前端项目实战贰-兼容条形打印机移动端单位用毫米设定(table版)
#customers {
    margin: 0;
    padding: 0;
    padding: 1mm 0;
    width: 40mm;
    height: 50mm;
    text-align: center;
    box-sizing: border-box;
}
#customers tr{
    display: block;
    height: 6mm;
    border: 1px solid #ccc;
}
td{
    font-family: "黑体";
    font-weight: "bold";
}
.imgData{
    display: block;
}

骨架

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

运行结果

image.png

相关文章
|
11天前
|
前端开发 安全 UED
【项目实战】从终端到浏览器:实现 ANSI 字体在前端页面的彩色展示
在学习和工作中,我们经常需要使用日志来记录程序的运行状态和调试信息。而为了更好地区分不同的日志等级,我们可以使用不同的颜色来呈现,使其更加醒目和易于阅读。 在下图运行结果中,我们使用了 colorlog 库来实现彩色日志输出。通过定义不同日志等级对应的颜色,我们可以在控制台中以彩色的方式显示日志信息。例如,DEBUG 级别的日志使用白色,INFO 级别的日志使用绿色,WARNING 级别的日志使用黄色,ERROR 级别的日志使用红色,CRITICAL 级别的日志使用蓝色。
|
8天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
14天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
32 1
|
14天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
35 1
|
6天前
|
前端开发 安全 JavaScript
前端工程化实战 - 日程管理
前端工程化实战 - 日程管理
7 0
|
19天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
30 0
|
2月前
|
Web App开发 前端开发 UED
前端开发之移动端体验优化
在一个前端项目中,面对移动端网页加载慢的问题,团队使用Chrome开发者工具和Lighthouse进行性能分析,发现资源加载、重绘回流和首屏空白是瓶颈。通过压缩图片和视频、使用懒加载、优化CSS样式、预加载内容及利用阿里云CDN,成功提升加载速度,改善用户体验,强调了前端性能优化的关键性。
97 0
前端开发之移动端体验优化
|
2月前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
2月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
2月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目