frontend: add community
Change-Id: I929c21d82ddab39d8b210b229ff7559320c1d853
diff --git "a/src/app/community/thread-detail/\133threadId\135/thread.scss" "b/src/app/community/thread-detail/\133threadId\135/thread.scss"
new file mode 100644
index 0000000..b2524f0
--- /dev/null
+++ "b/src/app/community/thread-detail/\133threadId\135/thread.scss"
@@ -0,0 +1,201 @@
+.thread-detail {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 2rem;
+
+ // 帖子头部
+ .thread-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+
+ .user-info {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ .user-meta {
+ h3 {
+ margin: 0;
+ font-size: 1.25rem;
+ color: #2d3748;
+ }
+
+ span {
+ color: #718096;
+ font-size: 0.875rem;
+ }
+ }
+ }
+
+ .post-time {
+ color: #718096;
+ font-size: 0.875rem;
+ }
+ }
+
+ // 帖子内容
+ .thread-content {
+ h1 {
+ font-size: 2rem;
+ color: #1a202c;
+ margin-bottom: 1.5rem;
+ }
+
+ .content-body {
+ .thread-image {
+ width: 100%;
+ height: auto;
+ border-radius: 0.5rem;
+ margin-bottom: 1.5rem;
+ }
+
+ .thread-image {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ p {
+ font-size: 1rem;
+ line-height: 1.75;
+ color: #4a5568;
+ margin-bottom: 2rem;
+ }
+ }
+
+ .thread-actions {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+
+ .like-button {
+ &.liked {
+ background: #f49c79;
+ }
+ }
+ }
+ }
+
+ // 评论区域
+ .comments-section {
+ .comments-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ h2 {
+ font-size: 1.5rem;
+ color: #2d3748;
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ // 评论输入区
+ .comments-input {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+
+ .p-inputtext {
+ flex: 1; // 输入框占据剩余空间
+ height: 3rem;
+ }
+
+ .p-button {
+ height: 3rem;
+ }
+ }
+
+ // 评论列表
+ .comments-list {
+ display: flex;
+ flex-direction: column;
+ margin-top: 1rem;
+ gap: 0.5rem;
+
+ .comment-item {
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+
+ .comment-user {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+
+ .comment-meta {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: space-between;
+ gap: 0.5rem;
+
+ .comment-time {
+ justify-content: space-between;
+ gap: 0.75rem
+ }
+
+ .username {
+ margin-left: 0.5rem;
+ font-weight: 600;
+ color: #2d3748;
+ }
+
+ .floor {
+ color: #718096;
+ margin-right: 0.75rem;
+ font-size: 0.875rem;
+ }
+
+ .time {
+ color: #a0aec0;
+ font-size: 0.875rem;
+ }
+ }
+ }
+
+ .comment-content {
+ padding-left: 3.5rem;
+
+ .reply-to {
+ display: inline-block;
+ color: #93C4C1;
+ font-size: 0.875rem;
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ color: #4a5568;
+ margin: 0;
+ line-height: 1.5;
+ }
+ }
+ }
+ }
+ }
+}
+
+.p-sidebar-header,
+.p-sidebar-custom-header {
+ padding: 10px !important;
+}
+
+.p-overlaypanel-content {
+ padding: 0 !important;
+}
+
+.reply {
+
+ .reply-input {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-self: center;
+ gap: 3rem;
+ padding: 1rem;
+ }
+}
\ No newline at end of file