前端项目实战贰-兼容条形打印机移动端单位用毫米设定(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

相关文章
|
30天前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
2月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
36 1
|
2月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
37 1
|
2月前
|
移动开发 前端开发 JavaScript
惊!这些前端技术竟然能让你的网站在移动端大放异彩!
随着互联网技术的发展,移动设备成为主要的上网工具。本文介绍了几种关键的前端技术,包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计,帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
40 3
|
2月前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
2月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
71 2
|
2月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
52 2
|
3月前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
3月前
|
存储 缓存 算法
前端算法:优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法:优化与实战技巧的深度探索
33 1
|
2月前
|
缓存 监控 前端开发
前端性能优化实战:从加载速度到用户体验
前端性能优化实战:从加载速度到用户体验