| .container { |
| width: 100%; |
| height: 100%; |
| display: flex; |
| flex-direction: row; |
| position: relative; |
| } |
| |
| .left { |
| flex: 3; |
| display: flex; |
| flex-direction: column; |
| margin: 5px; |
| } |
| |
| .navbar { |
| height: 60px; |
| background-color: #f5f5f5; |
| border-bottom: 1px solid #ddd; |
| border-radius: 8px; |
| } |
| |
| .content { |
| flex: 1; |
| overflow-y: auto; /* 允许垂直滚动 */ |
| padding: 10px; |
| background-color: #fff; |
| border-radius: 8px; |
| border: 1px solid #ddd; |
| } |
| |
| .contentItem { |
| position: relative; |
| margin-bottom: 15px; |
| padding: 10px; |
| border: 1px solid #ddd; |
| border-radius: 5px; |
| background-color: #f9f9f9; |
| } |
| |
| .contentItem h3 { |
| margin: 0 0 5px; |
| font-size: 18px; |
| color: #333; |
| } |
| |
| .contentItem p { |
| margin: 0; |
| font-size: 14px; |
| color: #666; |
| } |
| |
| .contentItem .createDate { |
| position: absolute; |
| top: 10px; |
| right: 10px; |
| font-size: 12px; |
| color: #999; |
| } |
| |
| .noData { |
| text-align: center; |
| color: #999; |
| margin-top: 20px; |
| } |
| |
| .right { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| margin: 5px; |
| } |
| |
| .selfStatus { |
| margin-bottom: 20px; |
| background-color: #fff; |
| border-radius: 8px; |
| border: 1px solid #ddd; |
| padding: 10px; |
| } |
| |
| .filter { |
| flex: 1; |
| background-color: #fff; |
| border: 1px solid #ddd; |
| border-radius: 8px; |
| padding: 10px; |
| } |