| | |
| | | /* 上半部分:左右布局 */ |
| | | .top-section { |
| | | display: flex; |
| | | flex-direction: row; |
| | | align-items: flex-start; |
| | | justify-content: flex-start; |
| | | flex-grow: 1; |
| | | margin-bottom: 4vh; |
| | | flex-wrap: nowrap; |
| | | margin-bottom: 4vh; |
| | | } |
| | | |
| | | .left-section { |
| | | width: 40%; /* 再缩小 */ |
| | | width: 32%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | |
| | | |
| | | /* 右边工单状态部分 */ |
| | | .right-section { |
| | | width: 28%; /* 再缩小 */ |
| | | margin-left: 2vw; /* 只留很小的间隔 */ |
| | | width: 24%; |
| | | margin-left: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: flex-start; |
| | | justify-content: flex-start; |
| | | text-align: center; |
| | | flex-wrap: wrap; |
| | | align-content: flex-start; |
| | | text-align: left; |
| | | } |
| | | |
| | | .status-title { |
| | |
| | | } |
| | | |
| | | .status-circle { |
| | | width: 11vw; |
| | | /* Enlarged status circle */ |
| | | height: 11vw; |
| | | background-color: #00A2E9; |
| | | border-radius: 50%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| | | width: 7vw; |
| | | height: 7vw; |
| | | min-width: 60px; |
| | | min-height: 60px; |
| | | } |
| | | |
| | | .status-input { |
| | |
| | | |
| | | /* 让右侧工单号输入框变长 */ |
| | | .status-title input.status-title { |
| | | width: 110%; /* 或 100%,根据实际需求调整 */ |
| | | min-width: 320px; /* 可选,保证最小宽度 */ |
| | | font-size: 2vw; |
| | | box-sizing: border-box; |
| | | min-width: 120px; |
| | | width: 100%; |
| | | } |
| | | |
| | | .button, |