个人空间动态部分

src/views/space/spacePost.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="post-container">
+        <div class="post" v-for="post in posts" :key="post.id">
+            <div class="post-header">
+              <img :src="post.avatarurl" alt="" />
+              <div class="post-info">
+                <h2>{{ post.username }}</h2>
+                <h3>{{ post.timestamp }}</h3>
+                <p>{{ post.content }}</p>
+              </div>
+            </div>
+            <div class="post-img">
+              <img :src="post.imageurl" alt="" />
+            </div>
+            <div class="post-footer">
+              <div class="reactions">
+                <div class="Like">
+                  <span @click="increaseCount(post.id, 'like')" :class="{'liked': post.isLiked}">
+                    <span v-if="post.isLiked">❤️</span>
+                    <span v-else>🤍</span>
+                  </span>
+                  {{ post.likeCount }}
+                </div>
+                <div class="comment">
+                  <span @click="increaseCount(post.id, 'comment')">
+                    💬
+                  </span>
+                  {{ post.commentCount }}
+                </div>
+              </div>
+              <div class="comments">
+                <!-- 评论内容可以在这里渲染 -->
+              </div>
+            </div>
+         </div>
+    </div>
+</template>
+
+<script>
+import axios from '@/utils/axiosConfig';
+
+export default {
+  name: 'spaceIndex',
+  data() {
+    return {
+      posts: [
+        {
+          id: 1,
+          avatarurl:require("../../assets/pictures/space/post1.png"),
+          username: "默认用户名",
+          timestamp: "2024-01-01",
+          content: "默认内容",
+          imageurl: require("../../assets/pictures/space/post2.png"),
+          likeCount: 0,
+          commentCount: 0,
+          isLiked: false,
+        }
+      ],
+    };
+  },
+  methods: {
+    async fetchPosts() {
+      try {
+        const response = await axios.get(`http://10.133.6.46:8082/loveforest/posts/userid=1`);
+        this.posts = response.map(post => ({
+          id: post.postid,
+          avatarurl:post.avatarurl,
+          username: post.username,
+          timestamp: post.timestamp,
+          content: post.content,
+          imageurl: post.imageurl,
+          likeCount: post.likecount,
+          commentCount: post.commentcount,
+          isLiked: false,
+        }));
+      } catch (error) {
+        console.error("获取帖子信息失败:", error);
+        // 如果需要，可在此处重置为默认帖子
+      }
+    },
+    increaseCount(postId, type) {
+      const post = this.posts.find(p => p.id === postId);
+      if (type === 'like') {
+        post.isLiked =!post.isLiked;
+        post.likeCount += post.isLiked? 1 : -1;
+      } 
+    },
+  },
+  mounted() {
+    this.fetchPosts();
+  },
+};
+</script>
+
+<style scoped>
+
+.post-container {
+  font-family: Arial, sans-serif;
+  display: flex;
+  flex-direction: column;
+  /* align-items: center; */
+  background: rgba(255, 255, 255, 0.8);
+  height: 680px;
+  margin: 30px auto;
+  border-radius: 30px;
+  width: 750px;
+  padding: 20px;
+  overflow-y: auto;
+}
+.post {
+  margin-left: 0;
+  margin-top: 150px;
+  height: 150px;
+  width: 680px;
+  position: relative; /* 使得子元素可以相对移动 */
+  margin-bottom: 70px;
+}
+
+.post-header {
+  display: flex;
+  margin-top:-160px;
+  margin-left: 30px;
+  padding: 10px;
+  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: -12px;
+  padding-left: 12px;
+  font-size: 14px;
+  font-weight: normal;
+  font-family: Italic;
+  font-style: ABeeZee;
+  white-space: nowrap;
+}
+
+.post-info p {
+  margin: 0;
+  font-size: 18px;
+  white-space: nowrap;
+  margin-left: 80px;
+}
+
+.post-img {
+  display: flex;
+  left: 220px;
+  width: 329px;
+  height: 163px;
+  position: relative;
+}
+
+.post-footer {
+  padding: 10px;
+}
+
+/* 图标的样式 */
+.reactions span {
+  font-size: 24px;
+  cursor: pointer;
+  margin: 0 2px;
+  display: inline-block;
+  transition: transform 0.3s;
+}
+
+/* 点赞图标选中时的样式 */
+.liked {
+  color: red; /* 红色表示已点赞 */
+  transform: scale(1.2); /* 点击时稍微放大 */
+}
+
+/* 图标悬停时的效果 */
+.reactions span:hover {
+  transform: scale(1.1); /* 悬停时稍微放大 */
+}
+
+/* 增加点赞和评论数值的可读性 */
+.reactions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 20px;
+  padding: 6px 10px;
+}
+
+.comment{
+  display: flex;
+  align-items: center;
+  margin-right: 120px;
+}
+
+.Like{
+  margin-left: 220px;
+}
+/* .reactions span img {
+  padding-left: 230px;
+  padding-top: 10px;
+} */
+
+.reactions .count {
+  font-size: 21px;
+  color: #666;
+  padding-left: 8px;
+}
+
+</style>