/* 帖子详情页面容器 */ | |
.post-detail { | |
max-width: 800px; | |
margin: 0 auto; | |
background: #fff; | |
min-height: 100vh; | |
display: flex; | |
flex-direction: column; | |
} | |
/* 加载状态 */ | |
.loading-container { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
padding: 60px 20px; | |
color: #666; | |
} | |
.loading-spinner { | |
width: 40px; | |
height: 40px; | |
border: 3px solid #f3f3f3; | |
border-top: 3px solid #ff4757; | |
border-radius: 50%; | |
animation: spin 1s linear infinite; | |
margin-bottom: 20px; | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
/* 错误状态 */ | |
.error-container { | |
text-align: center; | |
padding: 60px 20px; | |
color: #666; | |
} | |
.error-container h2 { | |
margin-bottom: 16px; | |
color: #333; | |
} | |
/* 顶部导航栏 */ | |
.post-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 16px 20px; | |
border-bottom: 1px solid #eee; | |
background: #fff; | |
position: sticky; | |
top: 0; | |
z-index: 100; | |
} | |
.back-btn { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
padding: 8px 16px; | |
border: none; | |
background: #f8f9fa; | |
border-radius: 20px; | |
cursor: pointer; | |
transition: background-color 0.2s; | |
font-size: 14px; | |
color: #333; | |
} | |
.back-btn:hover { | |
background: #e9ecef; | |
} | |
.header-actions { | |
display: flex; | |
gap: 8px; | |
} | |
.action-btn { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 40px; | |
height: 40px; | |
border: none; | |
background: #f8f9fa; | |
border-radius: 50%; | |
cursor: pointer; | |
transition: background-color 0.2s; | |
color: #666; | |
} | |
.action-btn:hover { | |
background: #e9ecef; | |
} | |
.action-btn.active { | |
background: #ff4757; | |
color: white; | |
} | |
/* 主要内容区 */ | |
.post-content { | |
flex: 1; | |
padding: 20px; | |
} | |
.post-title { | |
font-size: 24px; | |
font-weight: 700; | |
line-height: 1.4; | |
margin-bottom: 20px; | |
color: #333; | |
} | |
/* 帖子元信息 */ | |
.post-meta { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 20px; | |
padding-bottom: 16px; | |
border-bottom: 1px solid #f0f0f0; | |
} | |
.author-info { | |
display: flex; | |
align-items: center; | |
gap: 12px; | |
} | |
.avatar { | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background: #ff4757; | |
color: white; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-weight: 600; | |
font-size: 16px; | |
} | |
.author-details { | |
display: flex; | |
flex-direction: column; | |
gap: 2px; | |
} | |
.author-name { | |
font-weight: 600; | |
color: #333; | |
font-size: 14px; | |
} | |
.post-date { | |
font-size: 12px; | |
color: #666; | |
} | |
.post-stats { | |
display: flex; | |
gap: 16px; | |
} | |
.stat-item { | |
display: flex; | |
align-items: center; | |
gap: 4px; | |
font-size: 14px; | |
color: #666; | |
} | |
/* 标签 */ | |
.post-tags { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 8px; | |
margin-bottom: 20px; | |
} | |
.tag { | |
padding: 4px 12px; | |
background: #f8f9fa; | |
border-radius: 16px; | |
font-size: 12px; | |
color: #666; | |
border: 1px solid #e9ecef; | |
} | |
/* 帖子正文 */ | |
.post-body { | |
margin-bottom: 24px; | |
line-height: 1.6; | |
color: #333; | |
font-size: 16px; | |
} | |
.post-body p { | |
margin-bottom: 16px; | |
} | |
/* 类别信息 */ | |
.post-category { | |
margin-bottom: 20px; | |
padding: 12px; | |
background: #f8f9fa; | |
border-radius: 8px; | |
font-size: 14px; | |
} | |
.category-label { | |
color: #666; | |
font-weight: 500; | |
} | |
.category-name { | |
color: #333; | |
font-weight: 600; | |
} | |
/* 评论区 */ | |
.comments-section { | |
margin-top: 32px; | |
padding-top: 24px; | |
border-top: 1px solid #eee; | |
} | |
.comments-header { | |
margin-bottom: 20px; | |
} | |
.comments-toggle { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
padding: 10px 16px; | |
border: 1px solid #e9ecef; | |
background: #f8f9fa; | |
border-radius: 8px; | |
cursor: pointer; | |
transition: background-color 0.2s; | |
font-size: 14px; | |
color: #333; | |
} | |
.comments-toggle:hover { | |
background: #e9ecef; | |
} | |
.comments-content { | |
margin-top: 16px; | |
} | |
/* 评论表单 */ | |
.comment-form { | |
margin-bottom: 24px; | |
padding: 16px; | |
background: #f8f9fa; | |
border-radius: 8px; | |
} | |
.comment-input { | |
width: 100%; | |
padding: 12px; | |
border: 1px solid #dee2e6; | |
border-radius: 6px; | |
resize: vertical; | |
font-family: inherit; | |
font-size: 14px; | |
margin-bottom: 12px; | |
outline: none; | |
transition: border-color 0.2s; | |
} | |
.comment-input:focus { | |
border-color: #ff4757; | |
} | |
.comment-submit { | |
padding: 8px 16px; | |
background: #ff4757; | |
color: white; | |
border: none; | |
border-radius: 6px; | |
cursor: pointer; | |
font-size: 14px; | |
transition: background-color 0.2s; | |
} | |
.comment-submit:hover { | |
background: #e84c4a; | |
} | |
/* 评论列表 */ | |
.comments-list { | |
display: flex; | |
flex-direction: column; | |
gap: 16px; | |
} | |
.no-comments { | |
text-align: center; | |
color: #666; | |
font-style: italic; | |
padding: 32px 0; | |
} | |
.comment-item { | |
padding: 16px; | |
background: #fff; | |
border: 1px solid #e9ecef; | |
border-radius: 8px; | |
} | |
.comment-author { | |
display: flex; | |
align-items: center; | |
gap: 8px; | |
margin-bottom: 8px; | |
} | |
.comment-avatar { | |
width: 32px; | |
height: 32px; | |
border-radius: 50%; | |
background: #6c757d; | |
color: white; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-weight: 600; | |
font-size: 14px; | |
} | |
.comment-name { | |
font-weight: 600; | |
color: #333; | |
font-size: 14px; | |
} | |
.comment-time { | |
font-size: 12px; | |
color: #666; | |
margin-left: auto; | |
} | |
.comment-content { | |
font-size: 14px; | |
line-height: 1.5; | |
color: #333; | |
margin-left: 40px; | |
} | |
/* 底部操作栏 */ | |
.post-footer { | |
padding: 16px 20px; | |
border-top: 1px solid #eee; | |
background: #fff; | |
position: sticky; | |
bottom: 0; | |
} | |
.action-bar { | |
display: flex; | |
justify-content: space-around; | |
align-items: center; | |
max-width: 400px; | |
margin: 0 auto; | |
} | |
.action-button { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
gap: 4px; | |
padding: 8px 12px; | |
border: none; | |
background: transparent; | |
cursor: pointer; | |
transition: color 0.2s; | |
color: #666; | |
font-size: 12px; | |
} | |
.action-button:hover { | |
color: #333; | |
} | |
.action-button.liked { | |
color: #ff4757; | |
} | |
.action-button.bookmarked { | |
color: #ffa502; | |
} | |
/* 响应式设计 */ | |
@media (max-width: 768px) { | |
.post-detail { | |
margin: 0; | |
} | |
.post-content { | |
padding: 16px; | |
} | |
.post-title { | |
font-size: 20px; | |
} | |
.post-meta { | |
flex-direction: column; | |
align-items: flex-start; | |
gap: 12px; | |
} | |
.post-stats { | |
align-self: flex-end; | |
} | |
.action-bar { | |
max-width: none; | |
} | |
.comment-content { | |
margin-left: 0; | |
margin-top: 8px; | |
} | |
} |