| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: flex-start; |
| | | gap: 4px; |
| | | margin-bottom: 0.5vh; |
| | | width: 99vw; |
| | | max-width: 1920px; |
| | | align-items: center; |
| | | gap: 12px; |
| | | margin-bottom: 2vh; |
| | | width: 99vw; /* 原95vw,改为99vw */ |
| | | max-width: 1920px; /* 原1600px,改为1920px */ |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | padding: 8px 12px; |
| | | padding: 12px; |
| | | background: #f8f9fa; |
| | | border-radius: 8px; |
| | | border: 1px solid #e9ecef; |
| | | font-size: 18px; |
| | | font-size: 32px; |
| | | } |
| | | |
| | | /* 表单行样式优化 */ |
| | | .form-row { |
| | | display: flex; |
| | | flex-direction: row; |
| | | justify-content: flex-start; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | width: 100%; |
| | | margin-bottom: 4px; |
| | | gap: 0; |
| | | margin-bottom: 12px; |
| | | } |
| | | |
| | | .form-row:last-child { |
| | |
| | | .form-cell { |
| | | display: flex; |
| | | align-items: center; |
| | | flex-basis: 0; |
| | | flex-grow: 1; |
| | | max-width: 33.33%; /* 三等分 */ |
| | | min-width: 0; |
| | | margin-right: 0; |
| | | /* 让每个单元格宽度自适应,右侧单元格更宽 */ |
| | | margin: 0 8px; |
| | | } |
| | | |
| | | .form-cell:nth-child(1) { |
| | | flex: 0 0 28%; |
| | | min-width: 220px; |
| | | } |
| | | |
| | | .form-cell:nth-child(2) { |
| | | flex: 0 0 32%; |
| | | min-width: 220px; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .form-cell:nth-child(3) { |
| | | flex: 1 1 0; |
| | | min-width: 180px; |
| | | justify-content: flex-end; |
| | | } |
| | | |
| | | .form-label { |
| | | width: 80px; |
| | | width: 120px; |
| | | font-weight: bold; |
| | | font-size: 16px !important; |
| | | font-size: 32px !important; /* 原18/22px,调大 */ |
| | | color: #333; |
| | | white-space: nowrap; |
| | | margin-right: 4px; |
| | | margin-right: 12px; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .input { |
| | | padding: 4px 8px; |
| | | font-size: 14px !important; |
| | | padding: 14px 20px; |
| | | font-size: 30px !important; /* 原16/20px,调大 */ |
| | | border: 1px solid #dcdfe6; |
| | | flex: 1; |
| | | margin-right: 0; |
| | | border-radius: 4px; |
| | | background: #fff; |
| | | min-width: 0; |
| | | height: 28px !important; |
| | | height: 56px !important; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .input.small-font { |
| | | font-size: 13px !important; |
| | | font-size: 28px !important; /* 原15/19px,调大 */ |
| | | } |
| | | |
| | | .input:disabled { |
| | |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | .input-with-unit { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | } |
| | | |
| | | .input-with-unit .input { |
| | | flex: 1; |
| | | margin-right: 2px; |
| | | } |
| | | |
| | | .unit-text { |
| | | color: #666; |
| | | font-size: 12px !important; |
| | | white-space: nowrap; |
| | | width: 14px; |
| | | } |
| | | |
| | | .btn-blue, .btn-blue.large-btn { |
| | | .btn-blue { |
| | | background-color: #1890ff; |
| | | color: white; |
| | | border: none; |
| | | padding: 4px 12px; |
| | | padding: 14px 32px; |
| | | border-radius: 4px; |
| | | cursor: pointer; |
| | | font-size: 15px !important; |
| | | font-size: 32px !important; /* 原16/22px,调大 */ |
| | | font-weight: 500; |
| | | white-space: nowrap; |
| | | height: 32px !important; |
| | | height: 70px !important; |
| | | box-sizing: border-box; |
| | | transition: all 0.3s; |
| | | flex-shrink: 0; |
| | | min-width: 60px; |
| | | margin-left: 12px; |
| | | min-width: 140px; |
| | | } |
| | | |
| | | .btn-blue.large-btn { |
| | | margin-left: 24px; |
| | | } |
| | | |
| | | .btn-blue:hover { |
| | | background-color: #40a9ff; |
| | |
| | | .button-row { |
| | | display: flex; |
| | | justify-content: center; |
| | | gap: 8px; |
| | | margin: 0.5vh 0; |
| | | gap: 32px; |
| | | margin: 2vh 0; |
| | | } |
| | | |
| | | .save-btn, .cancel-btn { |
| | | width: auto; |
| | | min-width: 80px; |
| | | padding: 6px 0; |
| | | width: 28%; |
| | | padding: 1.5vh; |
| | | background-color: #00A2E9; |
| | | color: white; |
| | | font-size: 15px; |
| | | font-size: 1.8vw; /* 原1.2vw,调大 */ |
| | | border: none; |
| | | text-align: center; |
| | | border-radius: 6px; |
| | |
| | | cursor: not-allowed; |
| | | } |
| | | |
| | | /* 表格样式(略紧凑) */ |
| | | /* 弹窗样式 */ |
| | | .dialog-overlay { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0,0,0,0.18); |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .dialog { |
| | | background: #fff; |
| | | padding: 3vh 3vw; |
| | | border-radius: 18px; |
| | | width: 90vw; |
| | | max-width: 1600px; |
| | | min-height: 70vh; |
| | | max-height: 85vh; |
| | | box-sizing: border-box; |
| | | box-shadow: 0 8px 32px rgba(0,0,0,0.12); |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .form-group { |
| | | display: flex; |
| | | gap: 12px; |
| | | align-items: center; |
| | | margin-bottom: 2vh; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .form-group .input { |
| | | flex: 1; |
| | | min-width: 300px; |
| | | border-radius: 6px; |
| | | background: #f8f8f8; |
| | | } |
| | | |
| | | .tool-list { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin: 1vh 0; |
| | | flex: 1; |
| | | overflow-y: auto; |
| | | gap: 12px; |
| | | align-content: flex-start; |
| | | } |
| | | |
| | | .tool-btn { |
| | | flex: 0 0 calc(20% - 10px); |
| | | box-sizing: border-box; |
| | | padding: 10px 12px; |
| | | background: #f5f5f5; |
| | | border: 1px solid #d0d0d0; |
| | | border-radius: 8px; |
| | | cursor: pointer; |
| | | color: #333; |
| | | text-align: left; |
| | | font-size: 22px; /* 原13/18px,调大 */ |
| | | min-height: 50px; |
| | | transition: background 0.15s, color 0.15s; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | line-height: 1.4; |
| | | } |
| | | |
| | | .tool-btn.active { |
| | | background: #00A2E9; |
| | | color: #fff; |
| | | font-weight: bold; |
| | | border: 1.5px solid #0086c2; |
| | | } |
| | | |
| | | .dialog-actions { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | margin-top: 2vh; |
| | | padding-top: 2vh; |
| | | border-top: 1px solid #eee; |
| | | flex-shrink: 0; |
| | | } |
| | | |
| | | .dialog-actions > div:first-child { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 24px; |
| | | } |
| | | |
| | | .dialog-actions > div:last-child { |
| | | display: flex; |
| | | flex-direction: row; |
| | | gap: 18px; |
| | | align-items: center; |
| | | } |
| | | |
| | | .dialog-actions .btn-blue { |
| | | padding: 10px 24px; |
| | | font-size: 28px !important; /* 原16/22px,调大 */ |
| | | min-width: 120px; |
| | | } |
| | | |
| | | .btn-disabled { |
| | | background: #f2f2f2; |
| | | color: #999; |
| | | border: none; |
| | | padding: 10px 24px; |
| | | border-radius: 4px; |
| | | font-size: 28px !important; /* 原16/22px,调大 */ |
| | | font-weight: 500; |
| | | cursor: not-allowed; |
| | | box-shadow: none; |
| | | min-width: 120px; |
| | | } |
| | | |
| | | /* 表格样式 */ |
| | | .table-section { |
| | | display: flex; |
| | | justify-content: center; |
| | | margin: 0.5vh 0; |
| | | margin: 1vh 0; |
| | | overflow-x: auto; |
| | | } |
| | | |
| | | table.styled-table { |
| | | max-width: 1200px; |
| | | width: 90vw; |
| | | max-width: 1600px; |
| | | width: 95vw; |
| | | margin: 0 auto; |
| | | border-collapse: separate; |
| | | border-spacing: 0; |
| | | border: 1px solid #bfbfbf; |
| | | border: 2px solid #bfbfbf; |
| | | background: #fff; |
| | | border-radius: 8px; |
| | | border-radius: 12px; |
| | | overflow: hidden; |
| | | box-shadow: 0 1px 6px rgba(0,0,0,0.04); |
| | | box-shadow: 0 2px 12px rgba(0,0,0,0.06); |
| | | } |
| | | |
| | | table.styled-table thead th { |
| | | background: #fafafa; |
| | | border-bottom: 1px solid #bfbfbf; |
| | | padding: 6px 4px; |
| | | border-bottom: 2px solid #bfbfbf; |
| | | padding: 16px 10px; |
| | | font-weight: bold; |
| | | font-size: 13px; |
| | | font-size: 1.6vw; /* 原1.2vw,调大 */ |
| | | text-align: center; |
| | | } |
| | | |
| | | table.styled-table tbody td { |
| | | border-bottom: 1px solid #e8e8e8; |
| | | padding: 4px 4px; |
| | | font-size: 12px; |
| | | padding: 14px 10px; |
| | | font-size: 1.4vw; /* 原1.1vw,调大 */ |
| | | vertical-align: middle; |
| | | text-align: center; |
| | | } |
| | | |
| | | .table-section table th:first-child, .table-section table td:first-child { |
| | | border-left: 1px solid #bfbfbf; |
| | | border-left: 2px solid #bfbfbf; |
| | | } |
| | | |
| | | .table-section table th:last-child, .table-section table td:last-child { |
| | | border-right: 1px solid #bfbfbf; |
| | | border-right: 2px solid #bfbfbf; |
| | | } |
| | | |
| | | .row-odd { |
| | |
| | | |
| | | .left { |
| | | text-align: left; |
| | | padding-left: 4px; |
| | | padding-left: 8px; |
| | | } |
| | | |
| | | .warn-cell { |
| | |
| | | display: inline-block; |
| | | background: #ff4d4f; |
| | | color: #fff; |
| | | padding: 1px 3px; |
| | | border-radius: 2px; |
| | | padding: 2px 6px; |
| | | border-radius: 3px; |
| | | font-weight: bold; |
| | | font-size: 12px; |
| | | font-size: 1.4vw; /* 原0.9/1.2vw,调大 */ |
| | | } |
| | | |
| | | /* 带单位的输入框样式 */ |
| | | .input-with-unit { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | } |
| | | |
| | | .input-with-unit .input { |
| | | flex: 1; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | .unit-text { |
| | | color: #666; |
| | | font-size: 28px !important; /* 原14/18px,调大 */ |
| | | white-space: nowrap; |
| | | width: 28px; |
| | | } |
| | | |
| | | /* 响应式调整 */ |
| | | @media (max-width: 1200px) { |
| | | .form-cell { |
| | | margin: 0 2px; |
| | | margin: 0 4px; |
| | | } |
| | | |
| | | .form-label { |
| | | width: 50px; |
| | | font-size: 13px !important; |
| | | width: 90px; |
| | | font-size: 22px !important; /* 原16/18px,调大 */ |
| | | } |
| | | |
| | | .input { |
| | | font-size: 12px !important; |
| | | padding: 4px 6px; |
| | | font-size: 20px !important; /* 原14/17px,调大 */ |
| | | padding: 10px 14px; |
| | | } |
| | | |
| | | .btn-blue { |
| | | padding: 4px 8px; |
| | | font-size: 13px !important; |
| | | padding: 10px 18px; |
| | | font-size: 22px !important; /* 原14/18px,调大 */ |
| | | } |
| | | } |
| | | |
| | | /* 让“使用上限”“寿命比预警值”输入框变窄 */ |
| | | /* 新增大按钮样式 */ |
| | | .btn-blue.large-btn { |
| | | padding: 14px 32px; |
| | | font-size: 32px !important; /* 原16/22px,调大 */ |
| | | height: 70px !important; |
| | | min-width: 140px; |
| | | } |
| | | |
| | | /* 调整表单单元格布局以适应按钮 */ |
| | | .form-row .form-cell:last-child { |
| | | justify-content: center; |
| | | flex: 0 0 auto; |
| | | min-width: 140px; |
| | | } |
| | | |
| | | /* 新增:让“设置使用上限”“寿命比预警值”输入框变窄 */ |
| | | .input-life-warn { |
| | | width: 60px !important; |
| | | width: 120px !important; |
| | | min-width: 0 !important; |
| | | margin-right: 2px; |
| | | margin-right: 8px; |
| | | } |
| | | |
| | | .input-use-limit { |
| | | width: 50px !important; |
| | | width: 100px !important; |
| | | min-width: 0 !important; |
| | | margin-right: 4px; |
| | | margin-right: 16px; |
| | | color: #1890ff !important; |
| | | border-color: #1890ff !important; |
| | | } |
| | | |
| | | .input-tool-model { |
| | | width: 60px !important; |
| | | width: 100px !important; |
| | | min-width: 0 !important; |
| | | margin-right: 4px; |
| | | margin-right: 16px; |
| | | } |
| | | |
| | | .input-tool-name { |
| | | width: 70px !important; |
| | | width: 120px !important; |
| | | min-width: 0 !important; |
| | | margin-right: 4px; |
| | | margin-right: 16px; |
| | | } |
| | | |
| | | .highlight-label { |