| .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: #000000; | |
| cursor: pointer; | |
| } | |
| .reply-btn:hover { | |
| color: #000000; /* 不变色 */ | |
| 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; | |
| } | |