.layout { display: flex; align-items: center; justify-content: center; } #no_data_title { width: 100%; height: 200px; flex-direction: column; justify-content: space-evenly; margin-top: 2%; } #search-info { border-width: 1px; margin-bottom: 10px; } .title { width: 100%; height: 30px; justify-content: start; } .title p { font-size: 14px; font-weight: bold; } span.required { color: red; margin-left: 4px; font-weight: bold; line-height: 1.8em; top: 6px; right: 5px; } .upload-file { flex-direction: column; justify-content: space-around; width: 200px; height: 120px; } blockquote { display: flex; align-items: center; } #test2 { width: 120px; height: 100px; background-color: rgb(240, 240, 240); display: flex; align-items: center; justify-content: center; cursor: pointer; } .uploader-list { margin-left: -15px; max-width: calc(100% - 200px); } .uploader-list .handle { position: relative; background-color: red; color: white; filter: alpha(Opacity=80); -moz-opacity: 0.5; opacity: 1; /*width: 212px;*/ text-align: right; height: 18px; width: 18px; border-radius: 18px; display: flex; align-items: center; justify-content: center; left: 87%; margin-bottom: -12px; /*display: none;*/ } .uploader-list .handle p { font-size: 18px; color: #fff; cursor: pointer; } .uploader-list .handle i { margin-right: 5px; } .uploader-list .handle i:hover { cursor: pointer; } .uploader-list .file-iteme { margin: 0 0 0 10px; padding: 1px; float: left; } .layui-upload-list { margin: 0; } #dispatch-car-table2{ margin-top: 10px; } .classTable { width: 100%; table-layout: fixed; text-align: center; border-collapse: collapse; border-spacing: 1px; box-sizing: border-box; } .classTable tr td, .classTable tr th { height: 50px; box-sizing: border-box; border: 1px solid #ddd; padding: 10px 20px; text-align: left; word-break: break-word; } .classTable tr th { background-color: #f2f2f2; } #baseTable tr td, #baseTable tr th { text-align: center; } /* 表格样式 start */ .table { width: 100%; overflow-x: auto; cursor: pointer; table-layout: fixed !important; word-break: break-all; } .layui-table-cell { line-height: 20px; } .layui-table-cell a { color: #2F82FB; font-size: 15px; text-decoration: none; cursor: pointer; } .splitLine { color: #D9D9D9; margin: 0 6px; vertical-align: top; display: inline-block; } .layui-table-view .layui-table th { font-size: 18px; color: #262626; letter-spacing: 1px; } .layui-table, .layui-table-view { margin: 0 0 10px 0; } .layui-table-view .layui-table td { font-size: 15px; color: #262626; letter-spacing: 1px; } .layui-table thead tr { background-color: #f0f0f0; height: 50px; font-size: 18px; color: #262626 !important; } .layui-table-header { background-color: transparent; } .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin="line"], .layui-table[lay-skin="row"] { border: none; } .layui-table td { border-bottom: 1px solid #d9d9d9; } .layui-table tbody tr { background-color: #fff; height: 50px; } #layui-table-page1 { float: right !important; } #layui-table-page2 { float: right !important; } .layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: #1890FF; } .layui-laypage a:hover { color: #1890FF; } .layui-laypage input:focus, .layui-laypage select:focus { border-color: #1890FF !important } .layui-laypage-default a, .layui-laypage-default span { font-size: 16px; color: #262626 !important; } .layui-table-page select { height: 24px; padding: 0; } .layui-laypage input, .layui-laypage select { border-color: #d9d9d9 !important; background-color: transparent; color: #262626 !important; } .layui-table-page .layui-laypage button { background: transparent; color: #262626; border: 1px solid #d9d9d9; } .layui-table-body { margin-bottom: 0px; } .layui-table-cell { height: auto; white-space: normal; } /* 表格样式 end */ /**自定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px } ::-webkit-scrollbar-track { background-color: transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; } ::-webkit-scrollbar-thumb { background-color: #9c9da0; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em } /* 表格输入框美化核心样式 */ .classTable input.form-control { width: 100%; min-width: 80px; max-width: 120px; height: 30px; padding: 0 6px; border: 1px solid #e5e6eb; border-radius: 3px; background-color: #fafafa; font-size: 12px; color: #333; box-sizing: border-box; text-align: right; transition: all 0.2s ease; } /* 输入框聚焦时的高亮效果 */ .classTable input.form-control:focus { outline: none; border-color: #409eff; background-color: #fff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); } /* 数字输入框禁用默认箭头 */ .classTable input[type="number"] { -moz-appearance: textfield; } .classTable input[type="number"]::-webkit-inner-spin-button, .classTable input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* 表格单元格优化 */ .classTable td, .classTable th { padding: 6px 8px; vertical-align: middle; white-space: nowrap; } /* 超出内容自动省略 */ .classTable input.form-control { overflow: hidden; text-overflow: ellipsis; } /* ===================== 车辆表格专属优化样式 ===================== */ /* 表格整体布局与基础样式 */ #dispatch-car-table { table-layout: fixed; /* 固定列宽布局,避免内容撑开列宽 */ width: 100%; border-collapse: collapse; /* 合并边框,避免双线条 */ border-spacing: 0; font-size: 12px; color: #333; background-color: #fff; box-sizing: border-box; } /* 表头样式:统一行高 + 禁止折行 + 背景色 */ #dispatch-car-table th { padding: 0 8px; height: 40px; line-height: 40px; /* 垂直居中,统一行高 */ text-align: center; white-space: nowrap; /* 禁止文字折行 */ overflow: hidden; text-overflow: ellipsis; /* 超长表头省略显示 */ background-color: #F2F2F2; border: 1px solid #DDDDDD; vertical-align: middle; } /* 内容单元格样式:统一内边距 + 边框 + 垂直居中 */ #dispatch-car-table td { padding: 6px 8px; text-align: center; vertical-align: middle; /* 关键:输入框/文字垂直居中 */ border: 1px solid #DDDDDD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 列宽精细化分配(修复语法错误 + 匹配HTML行内样式) */ #dispatch-car-table th:nth-child(1) { width: 5% !important; } /* 类型(匹配HTML 5%) */ #dispatch-car-table th:nth-child(2) { width: 6% !important; } /* 车型(匹配HTML 6%) */ #dispatch-car-table th:nth-child(3) { width: 6% !important; } /* 型号(匹配HTML 6%) */ #dispatch-car-table th:nth-child(4) { width: 7% !important; } /* 车牌(匹配HTML 7%) */ #dispatch-car-table th:nth-child(5) { width: 6% !important; } /* 吨位(匹配HTML 6%) */ #dispatch-car-table th:nth-child(6) { width: 7% !important; } /* 货物名称(匹配HTML 7%) */ #dispatch-car-table th:nth-child(7) { width: 7% !important; } /* 起运地(匹配HTML 7%) */ #dispatch-car-table th:nth-child(8) { width: 7% !important; } /* 目的地(匹配HTML 7%) */ #dispatch-car-table th:nth-child(9) { width: 5% !important; } /* 预估公里数(匹配HTML 5%) */ #dispatch-car-table th:nth-child(10){ width: 5% !important; } /* 实际公里数(匹配HTML 5%) */ #dispatch-car-table th:nth-child(11){ width: 6% !important; } /* 单价(匹配HTML 6%) */ #dispatch-car-table th:nth-child(12){ width: 6% !important; } /* 预估金额(匹配HTML 6%) */ #dispatch-car-table th:nth-child(13){ width: 10%!important; } /* 附件(匹配HTML 10%) */ #dispatch-car-table th:nth-child(14){ width: 9% !important; } /* 需求计划编号(匹配HTML 9%) */ /* 核心修复:实际公里数单元格+输入框样式 */ #dispatch-car-table td:nth-child(10) { text-overflow: clip !important; /* 彻底禁用省略号 */ overflow: visible !important; /* 允许内容正常显示,不截断 */ min-width: 80px; /* 保底宽度,避免列宽过小 */ } #dispatch-car-table td:nth-child(10) input.form-control { width: calc(100% - 8px) !important; /* 适配单元格内边距,不溢出 */ min-width: unset !important; /* 去掉最小宽度限制 */ max-width: unset !important; /* 去掉最大宽度限制 */ text-align: center !important; /* 数字居中,视觉更协调 */ } /* 输入框样式:统一尺寸 + 视觉风格 */ #dispatch-car-table input.form-control { width: 100%; min-width: 70px; max-width: 100px; height: 28px; padding: 0 6px; border: 1px solid #e5e6eb; border-radius: 2px; background-color: #fff; font-size: 12px; color: #333; box-sizing: border-box; text-align: right; /* 数字右对齐,符合财务习惯 */ outline: none; margin: 0; /* 清除默认外边距,避免错位 */ display: inline-block; } /* 输入框聚焦高亮:提升交互反馈 */ #dispatch-car-table input.form-control:focus { border-color: #409eff; box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1); background-color: #fff; } /* 金额/数字列右对齐:统一视觉规范 */ #dispatch-car-table td:nth-child(11), /* 单价 */ #dispatch-car-table td:nth-child(12), /* 预估金额 */ #dispatch-car-table td:nth-child(13) { /* 出入场金额 */ text-align: right; } /* 超长文本列(起运地/目的地)特殊处理 */ #dispatch-car-table td:nth-child(7), /* 起运地 */ #dispatch-car-table td:nth-child(8) { /* 目的地 */ max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 附件链接样式:统一颜色,提升点击感 */ #dispatch-car-table td a { color: #409eff; text-decoration: none; cursor: pointer; } #dispatch-car-table td a:hover { color: #66b1ff; text-decoration: underline; } /* ===================== 计划表格专属优化样式 ===================== */ /* 表格整体布局与基础样式 */ #plan-detail-table { table-layout: fixed; /* 固定列宽布局,避免内容撑开列宽 */ width: 100%; border-collapse: collapse; /* 合并边框,避免双线条 */ border-spacing: 0; font-size: 12px; color: #333; background-color: #fff; box-sizing: border-box; } /* 表头样式:统一行高 + 禁止折行 + 背景色 */ #plan-detail-table th { padding: 0 8px; height: 40px; line-height: 40px; /* 垂直居中,统一行高 */ text-align: center; white-space: nowrap; /* 禁止文字折行 */ overflow: hidden; text-overflow: ellipsis; /* 超长表头省略显示 */ background-color: #F2F2F2; border: 1px solid #DDDDDD; vertical-align: middle; } /* 内容单元格样式:统一内边距 + 边框 + 垂直居中 */ #plan-detail-table td { padding: 6px 8px; text-align: center; vertical-align: middle; /* 关键:输入框/文字垂直居中 */ border: 1px solid #DDDDDD; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }