.postCenterContainer { | |
min-height: 100vh; | |
background-color: #f5f5f5; | |
} | |
.headerNav { | |
background: white; | |
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
padding: 0 24px; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
height: 64px; | |
position: sticky; | |
top: 0; | |
z-index: 100; | |
} | |
.categoryMenu { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
} | |
.categoryButton { | |
border: none; | |
box-shadow: none; | |
font-weight: 500; | |
padding: 8px 16px; | |
border-radius: 6px; | |
transition: all 0.3s ease; | |
color: #000000; | |
font-weight: bold; | |
} | |
.categoryButton:hover { | |
background: #888888; | |
color: #666; | |
font-weight: bold; | |
border: 1px solid #888888; | |
} | |
.searchContainer { | |
flex: 1; | |
display: flex; | |
justify-content: center; | |
max-width: 400px; | |
margin: 0 24px; | |
} | |
.userCenter { | |
display: flex; | |
align-items: center; | |
gap: 12px; | |
} | |
.carouselContainer { | |
margin: 24px; | |
border-radius: 12px; | |
overflow: hidden; | |
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
} | |
.carouselSlide { | |
position: relative; | |
display: flex !important; | |
align-items: center; | |
justify-content: center; | |
min-height: 300px; | |
} | |
.carouselOverlay { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); | |
color: white; | |
padding: 40px 40px 24px; | |
text-align: left; | |
} | |
.carouselTitle { | |
font-size: 28px; | |
font-weight: bold; | |
margin: 0 0 12px 0; | |
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
} | |
.carouselSummary { | |
font-size: 16px; | |
margin: 0 0 16px 0; | |
opacity: 0.9; | |
line-height: 1.5; | |
} | |
.carouselMeta { | |
display: flex; | |
gap: 24px; | |
font-size: 14px; | |
opacity: 0.8; | |
} | |
.postsSection { | |
padding: 24px; | |
} | |
.categoryTitle { | |
margin-bottom: 24px; | |
text-align: center; | |
} | |
.categoryTitle h2 { | |
font-size: 24px; | |
margin: 0 0 8px 0; | |
color: #1890ff; | |
} | |
.categoryTitle p { | |
margin: 0; | |
color: #666; | |
font-size: 14px; | |
} | |
.postsRow { | |
margin-bottom: 32px; | |
} | |
.postCol { | |
display: flex; | |
height: 480px; /* 固定卡片高度 */ | |
} | |
.postCol > * { | |
width: 100%; | |
} | |
.emptyState { | |
text-align: center; | |
padding: 60px 0; | |
color: #999; | |
font-size: 16px; | |
} | |
.paginationContainer { | |
display: flex; | |
justify-content: center; | |
margin-top: 32px; | |
} | |
/* 响应式设计 */ | |
@media (max-width: 768px) { | |
.headerNav { | |
flex-direction: column; | |
height: auto; | |
padding: 12px; | |
gap: 12px; | |
} | |
.categoryMenu { | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |
.searchContainer { | |
margin: 0; | |
max-width: 100%; | |
} | |
.carouselContainer { | |
margin: 12px; | |
} | |
.carouselOverlay { | |
padding: 20px; | |
} | |
.carouselTitle { | |
font-size: 20px; | |
} | |
.carouselSummary { | |
font-size: 14px; | |
} | |
.carouselMeta { | |
flex-direction: column; | |
gap: 8px; | |
} | |
.postsSection { | |
padding: 12px; | |
} | |
} |