| | |
| | | background: #f8f9fa; |
| | | border-radius: 8px; |
| | | padding: 12px 16px; |
| | | border-top: 3px solid #1a6fb8; |
| | | } |
| | | |
| | | .negotiation-header { |
| | |
| | | .progress-dot-wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | flex: 1; |
| | | justify-content: flex-start; |
| | | } |
| | | |
| | | .progress-dot-wrapper.last { |
| | | flex: 0; |
| | | } |
| | | |
| | | /* 进度点 */ |
| | | /* 进度短横线 */ |
| | | .progress-dot { |
| | | width: 10px; |
| | | height: 10px; |
| | | border-radius: 50%; |
| | | width: 16px; |
| | | height: 4px; |
| | | border-radius: 2px; |
| | | background: #d9d9d9; |
| | | flex-shrink: 0; |
| | | transition: background 0.3s; |
| | | margin-left: 5px; |
| | | } |
| | | |
| | | .progress-dot-wrapper:first-child .progress-dot { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .progress-dot.active { |
| | |
| | | /* 连接线 */ |
| | | .progress-line { |
| | | flex: 1; |
| | | height: 3px; |
| | | height: 2px; |
| | | background: #d9d9d9; |
| | | margin: 0 2px; |
| | | margin: 0 4px; |
| | | transition: background 0.3s; |
| | | } |
| | | |