| | |
| | | } |
| | | |
| | | .paper-form { |
| | | border-top: 1px solid #d0d3db; |
| | | border-left: 1px solid #d0d3db; |
| | | background: #fff; |
| | | /* 超宽屏限制表单最大宽度,右侧留白,避免字段分布过开 */ |
| | | max-width: 1400px; |
| | | } |
| | | |
| | | .paper-form >>> .form-row { |
| | | display: flex; |
| | | width: 100%; |
| | | border-top: 1px solid #d0d3db; |
| | | /* 上移1px与上一行的border-bottom重叠,两行之间只显示一条1px细线 */ |
| | | margin-top: -1px; |
| | | } |
| | | .paper-form >>> .form-row:first-child { |
| | | margin-top: 0; |
| | | } |
| | | |
| | | /* 行尾空白填充:不满整行的右侧自动补一个空白格子,网格保持闭合(右侧适当留白) */ |
| | | .paper-form >>> .form-row::after { |
| | | content: ""; |
| | | flex: 1 1 0; |
| | | min-height: 42px; |
| | | background: linear-gradient(to left, #d0d3db 1px, transparent 1px), |
| | | linear-gradient(to top, #d0d3db 1px, transparent 1px); |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .paper-form >>> .el-form-item { |
| | |
| | | .paper-form >>> .col-full { flex: 0 0 100%; } |
| | | |
| | | .paper-form >>> .el-form-item__label { |
| | | flex: 0 0 120px; |
| | | width: 120px !important; |
| | | flex: 0 0 150px; |
| | | width: 150px !important; |
| | | float: none; |
| | | padding: 0 8px !important; |
| | | background: #f3f5f9; |
| | | background: #ecf5ff; |
| | | border-right: 1px solid #d0d3db; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | font-weight: 600; |
| | | color: #2c3038; |
| | | line-height: 1.3; |
| | | white-space: normal; |
| | | word-break: break-all; |
| | | white-space: nowrap; |
| | | } |
| | | .paper-form >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before { |
| | | color: #f56c6c; |
| | |
| | | min-height: 42px; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | /* 控件宽度适中,不铺满整格(内容短时输入框不再拉得很长) */ |
| | | .paper-form >>> .el-form-item__content .el-input, |
| | | .paper-form >>> .el-form-item__content .el-select, |
| | | .paper-form >>> .el-form-item__content .el-cascader { |
| | | width: 220px; |
| | | max-width: 100%; |
| | | } |
| | | .paper-form >>> .el-form-item__content .el-date-editor { |
| | | width: 240px; |
| | | max-width: 100%; |
| | | } |
| | | .paper-form >>> .el-form-item__content .el-range-editor { |
| | | width: 360px; |
| | | max-width: 100%; |
| | | } |
| | | </style> |