.post-detail-page { | |
background: #333; | |
font-family: 'Helvetica Neue', sans-serif; | |
color: #333; | |
} | |
.post-detail { | |
background-color: #e9ded2; | |
border-radius: 16px; | |
max-width: 960px; | |
margin: 0 auto; | |
padding: 24px 32px; | |
/* 卡片居中 */ | |
margin: 0 auto; | |
margin-top: 40px; | |
} | |
.post-detail h1 { | |
font-size: 24px; | |
margin-bottom: 16px; | |
color: #4A3B34; | |
} | |
.post-meta { | |
display: flex; | |
justify-content: space-between; | |
font-size: 14px; | |
color: #755e50; | |
margin-bottom: 16px; | |
} | |
.post-content { | |
font-size: 20px; | |
line-height: 1.7; | |
margin-bottom: 20px; | |
color: #4A3B34; | |
} | |
/* 多图排列 */ | |
.post-content img { | |
max-width: 180px; | |
height: auto; | |
border-radius: 8px; | |
margin: 8px; | |
} | |
.post-actions { | |
display: flex; | |
gap: 16px; | |
margin-bottom: 24px; | |
justify-content: flex-end; /*靠右对齐*/ | |
} | |
.icon-btn { | |
display: flex; | |
align-items: center; | |
gap: 6px; | |
border: none; | |
background: none; | |
cursor: pointer; | |
color: #4A3B34; | |
transition: transform 0.2s ease; | |
} | |
.icon-btn:hover { | |
background: none !important; | |
color: inherit; | |
outline: none; | |
box-shadow: none; | |
} | |
.comments-section { | |
margin-top: -12px; | |
padding: 24px 24px 16px; | |
border-radius: 12px; | |
} | |
.comments-section h3 { | |
margin-bottom: 16px; | |
font-size: 20px; | |
color: #4A3B34; | |
background-color: #c4b3a3; | |
padding: 6px 12px; | |
border-radius: 8px; | |
display: inline-block; | |
} | |
.comment { | |
border-bottom: 1px solid #eee; | |
padding: 12px 0; | |
} | |
.comment-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
font-size: 0.9rem; | |
color: #555; | |
} | |
.comment-user { | |
font-weight: bold; | |
} | |
.comment-content { | |
margin: 6px 0; | |
font-size: 1rem; | |
} | |
.comment-time { | |
font-size: 0.85rem; | |
color: #999; | |
} | |
.reply-btn { | |
background: none; | |
border: none; | |
color: #2196F3; | |
cursor: pointer; | |
} | |
.reply-btn:hover { | |
color: #2196F3; /* 不变色 */ | |
background: none; /* 确保没有背景色 */ | |
text-decoration: underline; /* 你可以保留这个,或也删除 */ | |
} | |
.reply-form, | |
.add-comment-form { | |
margin-top: 12px; | |
} | |
textarea { | |
width: 100%; | |
padding: 12px; | |
resize: vertical; | |
min-height: 80px; | |
border: 1px solid #bbb; | |
border-radius: 10px; | |
font-size: 14px; | |
background-color: #fffefb; | |
color: #333; | |
} | |
.comment-options { | |
margin-top: 8px; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.comment-options label { | |
font-size: 14px; | |
color: #555; | |
} | |
.comment-options button { | |
justify-content: flex-end; /*靠右对齐*/ | |
padding: 6px 14px; | |
background-color: #BA929A; | |
color: #fff; | |
border: none; | |
border-radius: 6px; | |
font-size: 14px; | |
cursor: pointer; | |
} | |
.comment-options button:hover { | |
background-color: #5F4437; | |
} | |
.error-text { | |
color: #f00; | |
text-align: center; | |
} | |
.post-images { | |
display: flex; | |
flex-wrap: wrap; | |
justify-content: center; | |
} | |