.postCardWrapper { | |
width: 100%; | |
height: 100%; | |
} | |
.postCard { | |
height: 100%; | |
display: flex; | |
flex-direction: column; | |
border-radius: 12px; | |
overflow: hidden; | |
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
transition: all 0.3s ease; | |
background: white; | |
} | |
.postCard:hover { | |
transform: translateY(-4px); | |
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |
} | |
.coverContainer { | |
width: 100%; | |
height: 200px; | |
overflow: hidden; | |
position: relative; | |
background: #f5f5f5; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.coverImage { | |
width: 100%; | |
height: 100%; | |
object-fit: contain; | |
object-position: center; | |
transition: transform 0.3s ease; | |
background: #f5f5f5; | |
} | |
.postCard:hover .coverImage { | |
transform: scale(1.02); | |
} | |
.promotionBadge { | |
position: absolute; | |
top: 8px; | |
right: 8px; | |
background: linear-gradient(45deg, #ff6b6b, #ffa500); | |
color: white; | |
padding: 4px 8px; | |
border-radius: 12px; | |
font-size: 11px; | |
font-weight: bold; | |
display: flex; | |
align-items: center; | |
gap: 4px; | |
z-index: 10; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
} | |
.cardContent { | |
flex: 1; | |
display: flex; | |
flex-direction: column; | |
height: 100%; | |
} | |
.postTitle { | |
font-size: 16px; | |
font-weight: 600; | |
margin: 0 0 12px 0; | |
line-height: 1.4; | |
color: #262626; | |
display: -webkit-box; | |
-webkit-line-clamp: 2; | |
-webkit-box-orient: vertical; | |
overflow: hidden; | |
height: 44px; | |
} | |
.postMeta { | |
display: flex; | |
align-items: center; | |
font-size: 12px; | |
color: #8c8c8c; | |
margin-bottom: 12px; | |
height: 20px; | |
} | |
.authorName { | |
font-weight: 500; | |
color: #595959; | |
} | |
.publishTime { | |
color: #8c8c8c; | |
} | |
.tagsContainer { | |
margin-bottom: 12px; | |
height: 24px; | |
display: flex; | |
flex-wrap: wrap; | |
gap: 4px; | |
overflow: hidden; | |
} | |
.tag { | |
font-size: 11px; | |
padding: 2px 6px; | |
margin: 0; | |
border-radius: 4px; | |
} | |
.postSummary { | |
flex: 1; | |
font-size: 13px; | |
color: #595959; | |
line-height: 1.5; | |
margin-bottom: 16px; | |
display: -webkit-box; | |
-webkit-line-clamp: 3; | |
-webkit-box-orient: vertical; | |
overflow: hidden; | |
height: 60px; | |
} | |
.postFooter { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
margin-top: auto; | |
padding-top: 12px; | |
border-top: 1px solid #f0f0f0; | |
height: 32px; | |
} | |
.stats { | |
display: flex; | |
gap: 16px; | |
} | |
.statItem { | |
display: flex; | |
align-items: center; | |
gap: 4px; | |
font-size: 12px; | |
color: #8c8c8c; | |
} | |
.statItem .anticon { | |
font-size: 12px; | |
} | |
.readMoreBtn { | |
padding: 0; | |
font-size: 12px; | |
color: #1890ff; | |
font-weight: 500; | |
} | |
.readMoreBtn:hover { | |
color: #40a9ff; | |
} | |
/* 响应式设计 */ | |
@media (max-width: 768px) { | |
.coverContainer { | |
height: 160px; | |
} | |
.postTitle { | |
font-size: 14px; | |
height: 40px; | |
} | |
.postSummary { | |
font-size: 12px; | |
-webkit-line-clamp: 2; | |
height: 36px; | |
} | |
.stats { | |
gap: 12px; | |
} | |
.statItem { | |
font-size: 11px; | |
} | |
} |