.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; | |
} |