From c7744fddff5336a946cadb0752d0b58492fac64e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E4=B8=BD=E5=BD=A4?= <3131266284@qq.com>
Date: Sun, 15 Dec 2024 23:02:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E7=A9=BA=E9=97=B4=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/space/space.vue | 306 +++++++++++---------------------------
 1 file changed, 83 insertions(+), 223 deletions(-)

diff --git a/src/views/space/space.vue b/src/views/space/space.vue
index d5991f74..8cde03bc 100644
--- a/src/views/space/space.vue
+++ b/src/views/space/space.vue
@@ -65,118 +65,42 @@
       </div>
 
         <div class="post-container">
-          <div class="heade"> 
-          <div class="left-header">
-             <span :class="{ 'active': selectedTab === 'all' }" @click="selectedTab = 'all'">全部</span>
-             <hr v-if="selectedTab === 'all'" />
-          </div>
-          <div class="right-header">家族故事</div>
-          </div>
-
-    <div class="post">
-      <div class="post-header">
-        <img src="../../assets/pictures/space/post1.png" alt="" />
-        <div class="post-info">
-          <h3>Devon Lane @johndue · 23s</h3>
-          <p>Tom is in a big hurry.</p>
-        </div>
-      </div>
-      <div class="post-img">
-        <img src="../../assets/pictures/space/post2.png" alt="" />
-      </div>
-      <div class="post-footer">
-        <div class="reactions">
-    <!-- 爱心图标，用于点赞 -->
-     <div class="Like">
-      <span @click="increaseCount('like')" :class="{'liked': isLiked}">
-      <span v-if="isLiked">❤️</span>
-      <span v-else>🤍</span>
-    </span>
-    {{ likeCount }}
-     </div>
-    <!-- 评论图标 -->
-     <div class="comment">
-      <span @click="increaseCount('comment')">
-      💬
-      </span>
-      {{ commentCount }}
-     </div>
-  </div>
-        <div class="comment-section">
-          <img src="../../assets/pictures/space/post1.png" alt="">
-          <input type="text" placeholder="Tweet your answer" />
-          <button class="answer-btn">Answer</button>
-        </div>
-        <div class="comments">
-          <div class="comment-item">
-            <img src="../../assets/pictures/space/post1.png" alt="Angela Arden's Profile Picture" />
-            <div class="comment-content">
-              <h4>Angela Arden @angela_arden</h4>
-              <p>Concordo...</p>
-              <div class="comment-actions">
-                <span class="comment">
-                  <img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
-                  <span class="comment-count">2</span>
-                </span>
-                <span class="clockwise">
-                  <img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
-                  <span class="clockwise-count">1</span>
-                </span>
-                <span class="like">
-                  <img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
-                  <span class="like-count">3</span>
-                </span>
+          <div class="post" v-for="post in posts" :key="post.id">
+            <div class="post-header">
+              <img src="../../assets/pictures/space/post1.png" alt="" />
+              <div class="post-info">
+                <h2>{{ post.name || "哈哈哈"}}</h2>
+                <h3>{{ post.date || "2024-01-01" }}</h3>
+                <p>{{ post.text  || "测试测试"}}</p>
               </div>
             </div>
-          </div>
-          <div class="comment-item">
-            <img src="../../assets/pictures/space/post1.png" alt="Julia Stone's Profile Picture" />
-            <div class="comment-content">
-              <h4>Julia Stone @julia</h4>
-              <p>Olha, faz sentido!</p>
-              <div class="comment-actions">
-                <span class="comment">
-                  <img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
-                  <span class="comment-count">2</span>
-                </span>
-                <span class="clockwise">
-                  <img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
-                  <span class="clockwise-count">1</span>
-                </span>
-                <span class="like">
-                  <img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
-                  <span class="like-count">3</span>
-                </span>
-              </div>
+            <div class="post-img">
+              <img :src="post.postImageUrl || defaultImage " alt="" />
             </div>
-          </div>
-          <div class="comment-item">
-            <img src="../../assets/pictures/space/post1.png" alt="Joey Tribiani's Profile Picture" />
-            <div class="comment-content">
-              <h4>Joey Tribiani @joey</h4>
-              <p>Parabéns pelo progresso!</p>
-              <div class="comment-actions">
-                <span class="comment">
-                  <img src="../../assets/pictures/space/Vector.png" style="width: 16px;">
-                  <span class="comment-count">2</span>
-                </span>
-                <span class="clockwise">
-                  <img src="../../assets/pictures/space/ArrowsClockwise.png" style="width: 16px;">
-                  <span class="clockwise-count">1</span>
-                </span>
-                <span class="like">
-                  <img src="../../assets/pictures/space/Heart.png" style="width: 16px;">
-                  <span class="like-count">3</span>
-                </span>
+            <div class="post-footer">
+              <div class="reactions">
+                <div class="Like">
+                  <span @click="increaseCount('like')" :class="{'liked': isLiked}">
+                    <span v-if="isLiked">❤️</span>
+                    <span v-else>🤍</span>
+                  </span>
+                  {{ likeCount }}
+                </div>
+                <div class="comment">
+                  <span @click="increaseCount('comment')">
+                    💬
+                  </span>
+                  {{ commentCount }}
+                </div>
+              </div>
+              <div class="comments">
+                <!-- 评论内容可以在这里渲染 -->
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
   </div>
-      </div>
-    </div>
+  </div>
   </template>
   
   <script>
@@ -188,6 +112,7 @@
         likeCount: 0,
         isLiked:false,
         commentCount:0,
+        defaultImage:require("../../assets/pictures/space/post2.png"),
         userInfo: {
           name: "", // 用户姓名
           avatar:"",
@@ -197,6 +122,12 @@
           expectation: "", // 择偶期望
           career: "", // 职业
         },
+        posts:{
+          name:"掌声",
+          date:"2024-01-01",
+          text:"测试文本",
+          postImageUrl:"",
+        },
         defaultAvatar: "https://via.placeholder.com/150", // 默认头像占位符
       };
   },
@@ -246,7 +177,23 @@
           // alert("无法加载用户信息，请稍后重试！");
         }
       },
-      selectTab(tab) {
+      async fetchPostInfo() {
+      try {
+        // 调用后端接口获取帖子日期信息
+        const postResponse = await axios.get("/api/getPostDate", {
+          params: {
+            postId: "POST_ID_HERE", // 传递帖子 ID
+          },
+        });
+        this.postDate = postResponse.data.date;
+        this.postText = postResponse.data.text;
+        this.postImgUrl = postResponse.data.imageUrl;
+      } catch (error) {
+        console.error("获取帖子信息失败:", error);
+        // 可以在这里添加一些提示用户的逻辑，比如弹出提示框告知获取信息失败等
+      }
+    },
+    selectTab(tab) {
         this.selectedTab = tab;
       },
       showMoreInfo() {
@@ -418,43 +365,23 @@
   .post-container {
   font-family: Arial, sans-serif;
   display: flex;
+  flex-direction: column;
   /* align-items: center; */
   background: rgba(255, 255, 255, 0.8);
-  height: 620px;
+  height: 680px;
   margin: 30px auto;
   border-radius: 30px;
   width: 750px;
   padding: 20px;
-}
-.heade{
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-  padding-left: 180px; 
-  white-space: nowrap;
-}
-.left-header span {
-  cursor: pointer;
-}
-
-.left-header .active {
-  color: #1DA1F2;
-}
-
-.left-header hr {
-  border-color:#1DA1F2;
-  width: 100px;
-  margin-left: -32px;
-  margin-top: 5px;
-}
-.right-header {
-  padding-left: 280px;
+  overflow-y: auto;
 }
 .post {
-  margin-left: -600px;
-  margin-top: 200px;
-  border-radius: 10px;
-  margin-bottom: 20px;
+  margin-left: 0;
+  margin-top: 150px;
+  height: 150px;
+  width: 680px;
+  position: relative; /* 使得子元素可以相对移动 */
+  margin-bottom: 70px;
 }
 
 .post-header {
@@ -465,15 +392,32 @@
   position: relative;
 }
 
+.post-header::before {
+  content: '';
+  position: absolute;
+  left: 30px; /* 根据需要调整左侧位置 */
+  top: -10px; /* 调整横线的位置 */
+  width: calc(100% - 60px); /* 横线宽度，减去左右边距 */
+  height: 1px; /* 横线的高度 */
+  background-color: #d1cccc; /* 横线颜色 */
+}
+
 .post-header img {
+    margin-top: 10px;
     width: 56px; 
     height: 56px;
     border-radius: 50%; 
 }
+.post-info h2{
+  font-weight: normal;
+  font-size: 20px;
+  padding-left: 10px;
+  margin-top: 9px;
+}
 
 .post-info h3 {
-  margin-top:6px;
-  padding-left: 20px;
+  margin-top: -12px;
+  padding-left: 12px;
   font-size: 14px;
   font-weight: normal;
   font-family: Italic;
@@ -526,17 +470,17 @@
   align-items: center;
   justify-content: space-between;
   font-size: 20px;
-  padding: 0 10px;
+  padding: 6px 10px;
 }
 
 .comment{
   display: flex;
   align-items: center;
-  margin-right: 70px;
+  margin-right: 120px;
 }
 
 .Like{
-  margin-left: 170px;
+  margin-left: 220px;
 }
 /* .reactions span img {
   padding-left: 230px;
@@ -548,88 +492,4 @@
   color: #666;
   padding-left: 8px;
 }
-
-.comment-section {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  padding-left: 120px;
-  /* border-bottom: 1px solid #ccc; */
-}
-.comment-section img {
-  width: 46px;
-  padding-bottom: 10px;
-  padding-top: 10px;
-}
-.comment-section input {
-  flex: 1;
-  height: 40px;
-  width: 380px;
-  border-radius: 5px;
-  border: none;
-  font-size: 16px;
-  padding-left: 14px;
-}
-
-.answer-btn {
-  background-color: #f077a8;
-  color: white;
-  border: none;
-  border-radius: 50px;
-  padding: 5px 10px;
-  margin-right: -80px;
-  font-size: 15px;
-  cursor: pointer;
-}
-
-.comments {
-  padding-left: 120px;
-  max-height: 220px;
-  width: 550px;
-  overflow: auto;
-}
-
-.comment-item {
-  display: flex;
-  align-items: center;
-  border-top: 1px solid #ccc;
-}
-
-.comment-item img {
-  width: 46px;
-  border-radius: 50%;
-  margin-right: 10px;
-  padding-bottom: 10px;
-}
-
-.comment-content h4 {
-  margin: 0;
-  padding-top: 10px;
-  padding-bottom: 6px;
-  font-size: 12px;
-}
-
-.comment-content p {
-  margin: 0;
-  font-size: 12px;
-  color: #666;
-}
-
-.comment-actions {
-  display: flex;
-  justify-content: space-between;
-  align-content: center;
-  font-size: 12px;
-  color: #666;
-}
-
-.comment-actions span {
-  display: flex;
-  align-content: center;
-  padding-top: 10px;
-  padding-left: 5px;
-}
-.comment-actions span span{
-  padding-top: 2px;
-}
   </style>
\ No newline at end of file