兴趣小组、好友动态
Change-Id: I7aa713600dea31eb2cd5b32ecc4e257b2bbd8be1
diff --git a/src/pages/FriendMoments/FriendMoments.css b/src/pages/FriendMoments/FriendMoments.css
index 4f0a801..cca399f 100644
--- a/src/pages/FriendMoments/FriendMoments.css
+++ b/src/pages/FriendMoments/FriendMoments.css
@@ -180,3 +180,241 @@
color: #fff;
}
+
+.feed-author {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 10px;
+}
+
+.feed-title {
+ font-size: 1.2em;
+ font-weight: bold;
+ margin-bottom: 8px;
+}
+
+.feed-content {
+ margin-bottom: 12px;
+ line-height: 1.5;
+}
+
+.feed-images {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.feed-images img {
+ width: 100%;
+ height: 120px;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.feed-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-top: 12px;
+}
+
+.like-container {
+ display: flex;
+ gap: 15px;
+}
+
+.icon-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: #555;
+}
+
+.delete-btn {
+ background: none;
+ border: none;
+ color: #f44336;
+ cursor: pointer;
+}
+
+.comment-box {
+ margin-top: 12px;
+}
+
+.comment-input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ margin-bottom: 8px;
+ resize: vertical;
+}
+
+.submit-comment-btn {
+ background-color: #ce6178;
+ color: white;
+ border: none;
+ padding: 6px 12px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.comments-container {
+ margin-top: 16px;
+ padding-top: 16px;
+ border-top: 1px solid #ba8989;
+}
+
+.comments-list {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.comment-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 4px;
+}
+
+.comment-user {
+ font-weight: bold;
+ color: #333;
+}
+
+.comment-time {
+ font-size: 0.8em;
+ color: #888;
+}
+
+.comment-content {
+ margin-bottom: 6px;
+ line-height: 1.4;
+}
+
+.reply-prefix {
+ color: #666;
+ font-weight: bold;
+}
+
+.reply-btn {
+ background: none;
+ border: none;
+ color: #2196F3;
+ font-size: 0.9em;
+ cursor: pointer;
+ padding: 0;
+}
+
+.nested-replies {
+ margin-top: 8px;
+ padding-left: 16px;
+ border-left: 2px solid #eee;
+}
+
+.reply-item {
+ margin-bottom: 8px;
+}
+
+.reply-content {
+ margin-bottom: 4px;
+ line-height: 1.4;
+}
+
+.modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.modal-dialog {
+ background-color: white;
+ border-radius: 8px;
+ padding: 20px;
+ width: 90%;
+ max-width: 500px;
+}
+
+.modal-dialog h3 {
+ margin-top: 0;
+ margin-bottom: 16px;
+}
+
+.modal-dialog input,
+.modal-dialog textarea {
+ width: 100%;
+ padding: 8px;
+ margin-bottom: 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+
+.file-label {
+ display: inline-block;
+ background-color: #f0f0f0;
+ color: #333;
+ padding: 8px 12px;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-bottom: 12px;
+}
+
+.cf-preview {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.cf-preview img {
+ width: 80px;
+ height: 80px;
+ object-fit: cover;
+ border-radius: 4px;
+}
+
+.modal-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 10px;
+}
+
+.btn {
+ padding: 8px 16px;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.cancel {
+ background-color: #f0f0f0;
+ color: #333;
+ border: 1px solid #ddd;
+}
+
+.submit {
+ background-color: #4CAF50;
+ color: white;
+ border: none;
+}
+
+.loading-message,
+.error-message,
+.login-prompt,
+.empty-message {
+ text-align: center;
+ padding: 20px;
+ color: #555;
+}
+