| | |
| | | class="large-selection-table" @selection-change="selectionChange"> |
| | | <uni-tr> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 100px;">工序</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 120px;">工单号</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 120px;">产品编码</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 140px;">工单号</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 260px;">产品编码</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 260px;">产品名称</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 260px;">规格</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 80px;">已生产数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 80px;">未生产数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 80px;">派工数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 80px;">工单数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 100px;">工单状态</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 100px;">报工人</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 100px;">选择</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 200px;">规格</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 70px;">已生产数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 70px;">未生产数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 70px;">派工数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 70px;">工单数量</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 90px;">工单状态</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 90px;">报工人</uni-th> |
| | | <uni-th align="center" class="th" style="color: #FFFFFF; width: 90px;">选择</uni-th> |
| | | </uni-tr> |
| | | <uni-tr v-for="(item, index) in tableData" |
| | | :key="index" |
| | |
| | | transition: background 0.2s; |
| | | } |
| | | |
| | | .th { |
| | | background-color: lightskyblue; |
| | | height: 6vh; |
| | | font-size: 2vw; |
| | | /* Increased font size for table headers */ |
| | | } |
| | | .th { |
| | | background-color: lightskyblue; |
| | | height: 6vh; |
| | | font-size: 2vw; |
| | | font-size: 2.6vw; /* 字体更大 */ |
| | | /* Increased font size for table headers */ |
| | | } |
| | | |
| | | .form-input { |
| | | font-size: 1.8vw; |
| | |
| | | } |
| | | |
| | | /* 底部保存和取消按钮 */ |
| | | .bottom-section { |
| | | display: flex; |
| | | justify-content: space-around; |
| | | margin-bottom: 2vh; |
| | | padding: 2vh 1vw; |
| | | } |
| | | .bottom-section { |
| | | display: flex; |
| | | justify-content: space-around; |
| | | margin-bottom: 2vh; |
| | | padding: 2vh 1vw; |
| | | margin-top: 40px; // 新增:让按钮整体下移 |
| | | } |
| | | |
| | | .save-btn, |
| | | .cancel-btn { |
| | |
| | | } |
| | | } |
| | | |
| | | .uni-td, .uni-th, td, th { |
| | | word-break: break-all; |
| | | white-space: normal; |
| | | /* 可选:设置最大宽度,防止撑破表格 */ |
| | | max-width: 180px; |
| | | overflow-wrap: break-word; |
| | | .uni-td, |
| | | td { |
| | | white-space: normal !important; // 允许自动换行 |
| | | word-break: break-all !important; // 单词/中文都能断行 |
| | | line-height: 1.4; // 行高适当,便于多行显示 |
| | | text-align: center; // 居中显示(如需左对齐可改为 left) |
| | | vertical-align: middle; // 垂直居中 |
| | | max-width: 180px; // 保持单元格最大宽度 |
| | | overflow-wrap: break-word; // 兼容性更好 |
| | | } |
| | | |
| | | // 放大弹窗内表格字体(表头和内容) |
| | |
| | | .popup .large-selection-table .uni-td, |
| | | .popup .large-selection-table input.form-input { |
| | | font-size: 2.2vw !important; // 可根据实际需求调整 |
| | | } |
| | | |
| | | .select-btn { |
| | | width: 180px; // 更宽 |
| | | height: 80px; // 更高 |
| | | font-size: 1.8vw; // 字体也略大 |
| | | border-radius: 10px; |
| | | background-color: #f5f5f5; |
| | | color: #007aff; |
| | | border: 2px solid #007aff; |
| | | margin: 0 auto; |
| | | display: block; |
| | | } |
| | | |
| | | /* 放大表头和表格内容字体 */ |
| | | .th, |
| | | .uni-th, |
| | | th { |
| | | font-size: 1.7vw !important; |
| | | font-weight: bold; |
| | | letter-spacing: 2px; |
| | | } |
| | | |
| | | /* 针对1280x800的平板使用媒体查询进行适配 */ |
| | |
| | | font-size: 20px; |
| | | } |
| | | } |
| | | |
| | | .select-btn { |
| | | width: 180px; // 更宽 |
| | | height: 80px; // 更高 |
| | | font-size: 1.8vw; // 字体也略大 |
| | | border-radius: 10px; |
| | | background-color: #f5f5f5; |
| | | color: #007aff; |
| | | border: 2px solid #007aff; |
| | | margin: 0 auto; |
| | | display: block; |
| | | } |
| | | |
| | | </style> |