| | |
|---|
| | | <template> |
|---|
| | | <div class="group-list-panel"> |
|---|
| | | <div class="panel-header"> |
|---|
| | | <div> |
|---|
| | | <div class="header-title"> |
|---|
| | | <h3>设备组列表</h3> |
|---|
| | | <p>选择一个设备组进行编排测试</p> |
|---|
| | | </div> |
|---|
| | |
|---|
| | | .panel-header { |
|---|
| | | display: flex; |
|---|
| | | justify-content: space-between; |
|---|
| | | align-items: center; |
|---|
| | | align-items: flex-start; |
|---|
| | | gap: 16px; |
|---|
| | | flex-wrap: wrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .header-title { |
|---|
| | | flex: 0 0 auto; |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel-header h3 { |
|---|
| | | margin: 0; |
|---|
| | | font-size: 18px; |
|---|
| | | white-space: nowrap; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .panel-header p { |
|---|
| | | margin: 2px 0 0; |
|---|
| | | color: #909399; |
|---|
| | | font-size: 13px; |
|---|
| | | white-space: nowrap; |
|---|
| | | word-break: keep-all; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .actions { |
|---|
| | | display: flex; |
|---|
| | | align-items: center; |
|---|
| | | gap: 12px; |
|---|
| | | flex-shrink: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-input { |
|---|
| | | width: 240px; |
|---|
| | | min-width: 200px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 小屏幕时，操作区域换行 */ |
|---|
| | | @media (max-width: 768px) { |
|---|
| | | .panel-header { |
|---|
| | | flex-direction: column; |
|---|
| | | align-items: stretch; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .actions { |
|---|
| | | width: 100%; |
|---|
| | | justify-content: flex-end; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .search-input { |
|---|
| | | flex: 1; |
|---|
| | | min-width: 0; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | |
|---|
| | | .group-table { |
|---|
