diff --git a/src/assets/css/community/community.css b/src/assets/css/community/community.css
index ff94d122..ee93ecf4 100644
--- a/src/assets/css/community/community.css
+++ b/src/assets/css/community/community.css
@@ -1,4 +1,38 @@
 
+/* 设置进入和离开的过渡效果 */
+
+.post-list .fade-leave-active {
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+.post-list .fade-enter-active {
+  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+/* 元素进入时，缩放并渐变 */
+.post-list .fade-leave-to /* .fade-leave-active in Vue 2.x */ {
+  opacity: 0;
+  transform: scale(0.5); /* 初始状态为缩小 */
+}
+.post-list .fade-enter{
+  opacity: 0;
+  transform: scale(0.5); /* 初始状态为缩小 */
+}
+
+/* 元素进入时恢复到原尺寸 */
+.post-list .fade-enter-to {
+  opacity: 1;
+  transform: scale(1); /* 变大恢复正常尺寸 */
+}
+
+/* 元素离开时，继续保持缩小状态 */
+.post-list .fade-leave-to {
+  opacity: 0;
+  transform: scale(0.5); /* 离开时缩小 */
+}
+
+
+
 .communitybase
 {
   height: 100vh;
@@ -22,10 +56,10 @@
 .leftinfo
 {
       background-color: rgba(255,255,255,0.8);
-      width: 15%;
+      width: 14%;
       position: fixed;
       left:0%;
-      border: 3px solid  orchid;
+      /* border: 3px solid  orchid; */
       height:100%;
         
 }
@@ -36,7 +70,7 @@
     position: fixed;
     right:0%;
     width: 15%;
-    border: 3px solid  orchid;
+    /* border: 3px solid  orchid; */
     height:100%;
     
 }
@@ -71,10 +105,26 @@
   left:50%;
   transform: translateX(-50%);
   width: 65%;
-  border: 3px solid  orchid;
   height:100%;
   z-index:1;
 }
+.follows {
+  cursor: pointer;
+  transition: background-color 0.3s ease;  
+}
+
+.follows:hover {
+  background-color: #d0d0d0;  
+}
+.follows.selected {
+  background-color: rgba(255,255,255,0.8);  
+  font-weight: bold;  
+  color: orchid;  
+}
+.alldongtai:hover{
+  background-color: #d0d0d0;  
+  cursor: pointer;
+}
 .post-list {
    
   }
diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue
index 0b2a69fa..c99fa2d5 100644
--- a/src/components/PostCard.vue
+++ b/src/components/PostCard.vue
@@ -1,49 +1,60 @@
 <template>
-    <div class="post-card">
-      <div class="post-header">
-        <img :src="avatarUrl" alt="avatar" class="avatar" />
-        <div class="user-info">
-          <strong>{{ username }}</strong>
-          <span>{{ timestamp }}</span>
-        </div>
-      </div>
-      <div class="post-content">
-        <p>{{ content }}</p>
-          <div style="display: flex;justify-content: center;">
-          <img v-if="imageUrl" :src="imageUrl" alt="post image" />
+  <div class="post-card">
+    <div class="post-header">
+      <img :src="avatarUrl" alt="avatar" class="avatar" />
+      <div class="user-info">
+        <strong>{{ username }}</strong>
+
+        <button class="followsbutto followsbuttonani" @click="followsbutton" :class="{ active: followsbuttonActive }">
+          <div v-if="followsbuttonActive">
+            你关注了他
+          </div>
+
+          <div v-else>
+            关注
           </div>
-      </div>
-      <div class="post-footer">
-        <button @click="increaseLikeCount" :class="{'liked': isLiked}">
-          <span v-if="isLiked">❤️</span>
-          <span v-else>🤍</span> 
-          {{ likeCount }}
-        </button>
-       
-        <button @click="toggleCommentsVisibility">
-          {{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
-          💬
-          {{ commentCount }}
         </button>
+
+        <span>{{ timestamp }}</span>
       </div>
-  
-      <!-- 评论区的过渡动画 -->
-      <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
-        <div v-if="isCommentsVisible" class="comments-section">
-          <div v-for="(comment, index) in comments" :key="index" class="comment">
-            <p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
-          </div>
-  
-          <!-- 发布评论 -->
-          <CommentInput @submitComment="addComment" />
-        </div>
-      </transition>
     </div>
-  </template>
-  
-  <script>
+    <div class="post-content">
+      <p>{{ content }}</p>
+      <div style="display: flex;justify-content: center;">
+        <img v-if="imageUrl" :src="imageUrl" alt="post image" />
+      </div>
+    </div>
+    <div class="post-footer">
+      <button @click="increaseLikeCount" :class="{'liked': isLiked}">
+        <span v-if="isLiked">❤️</span>
+        <span v-else>🤍</span>
+        {{ likeCount }}
+      </button>
+
+      <button @click="toggleCommentsVisibility">
+        {{ isCommentsVisible ? '隐藏评论' : '查看评论' }}
+        💬
+        {{ commentCount }}
+      </button>
+    </div>
+
+    <!-- 评论区的过渡动画 -->
+    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
+      <div v-if="isCommentsVisible" class="comments-section">
+        <div v-for="(comment, index) in comments" :key="index" class="comment">
+          <p><strong>{{ comment.username }}:</strong> {{ comment.text }}</p>
+        </div>
+
+        <!-- 发布评论 -->
+        <CommentInput @submitComment="addComment" />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
   import CommentInput from './CommentInput.vue';
-  
+
   export default {
     components: { CommentInput },
     props: {
@@ -57,7 +68,33 @@
       isCommentsVisible: Boolean,
       comments: Array,  // 接收评论列表
     },
+    data() {
+      return {
+        isActive: false,
+        isLiked: false,
+        isClicked: false,
+        followsbuttonActive: false
+      };
+    },
     methods: {
+      followsbutton() {
+        // 设置为 active，触发动画
+        this.followsbuttonActive = !this.followsbuttonActive;
+
+      },
+
+      triggerAnimation() {
+        this.isActive = true; // 添加动画类
+        // 动画完成后移除 active 类，恢复到原始状态
+        setTimeout(() => {
+          this.isActive = false; // 移除动画类
+        }, 300); // 300ms 后移除，确保与动画时长一致
+      },
+
+      handleClick() {
+        this.$message("aaa");
+        this.isClicked = true;
+      },
       increaseLikeCount() {
         this.$emit('updateLikeCount', this.likeCount + 1);
         this.isLiked = !this.isLiked;
@@ -87,10 +124,10 @@
       }
     }
   };
-  </script>
-  
-  <style scoped>
-button {
+</script>
+
+<style scoped>
+  button {
     background: none;
     border: none;
     font-size: 1rem;
@@ -99,24 +136,70 @@ button {
     padding: 0;
   }
 
-/* 点赞后的红色样式 */
-@keyframes scaleAnimation {
-  0% {
-    transform: scale(1);
+  .followsbutto {
+    margin-left: 10px;
+    margin-right: 10px;
+    position: relative;
+    width: 70px;
+    height: 30px;
+    line-height: 30px;
+    /* 修改 line-height 为与高度一致 */
+    border: none;
+    border-radius: 30px;
+    background: #FE4E96;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+    overflow: hidden;
+    /* 确保动画效果不超出按钮 */
+    font-size: 14px;
+    /* 可根据需要调整字体大小 */
+  }
+
+
+  .followsbuttonani {
+    z-index: 1;
   }
-  50% {
-    transform: scale(1.2);
+
+  .followsbuttonani::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: scaleX(0);
+    transform-origin: 50%;
+    background: #FEB2D7;
+    border-radius: 5px;
+    transition: transform .3s ease-out;
   }
-  100% {
-    transform: scale(1);
+
+  .followsbuttonani.active::before {
+    transform: scaleX(1);
   }
-}
 
-/* .liked 类，应用动画 */
-.liked {
-  color: red;
-  animation: scaleAnimation 0.5s ease-in-out;
-}
+  /* 点赞后的红色样式 */
+  @keyframes scaleAnimation {
+    0% {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(1.2);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  /* .liked 类，应用动画 */
+  .liked {
+    color: red;
+    animation: scaleAnimation 0.5s ease-in-out;
+  }
 
   .post-card {
     opacity: 0.95;
@@ -126,48 +209,50 @@ button {
     border-radius: 8px;
     background-color: #fff;
   }
-  
+
   .post-header {
     display: flex;
     align-items: center;
   }
-  
+
   .avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     margin-right: 10px;
   }
-  
+
   .user-info {
     font-size: 14px;
   }
-  
+
   .post-footer {
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
   }
-  
+
   .comments-section {
     margin-top: 15px;
     padding: 10px;
     background-color: #f9f9f9;
     border-radius: 8px;
-    overflow: hidden;  /* 确保在 max-height 动画过程中隐藏溢出的内容 */
+    overflow: hidden;
+    /* 确保在 max-height 动画过程中隐藏溢出的内容 */
   }
-  
+
   .comment {
     margin-bottom: 10px;
   }
-  
+
   /* 过渡效果 */
-  .fade-enter-active, .fade-leave-active {
+  .fade-enter-active,
+  .fade-leave-active {
     transition: max-height 0.3s ease-in-out;
   }
-  .fade-enter, .fade-leave-to {
+
+  .fade-enter,
+  .fade-leave-to {
     max-height: 0;
   }
-  </style>
-
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/community/Postform.vue b/src/views/community/Postform.vue
new file mode 100644
index 00000000..21ffd55e
--- /dev/null
+++ b/src/views/community/Postform.vue
@@ -0,0 +1,238 @@
+<template>
+  <div class="animate-card animate-card-50" :class="{ 'active': showForm }" :style="{ height: componentHeight }"
+    style="width: 100%;">
+    <!-- 下拉按钮 -->
+    <el-button class="animate-card__layer" type="primary" @click="toggleForm">
+      <el-icon v-if="showForm">
+        <ArrowUp />
+      </el-icon>
+      <div v-else>
+        <el-icon>
+          <ArrowDown />
+        </el-icon>
+        发帖
+      </div>
+    </el-button>
+
+    <!-- 表单部分，使用 v-show 控制显示 -->
+    <div class="animate-card__sublayer" style="align-items: center; width: 100%;">
+      <el-form v-show="showForm" :model="form" ref="formRef" class="form-container">
+        <el-form-item label="内容" prop="content" :rules="[{ required: true, message: '请输入内容', trigger: 'blur' }]"
+          style="width: 80%;">
+          <el-input v-model="form.content" type="textarea" placeholder="有什么新鲜事..." rows=4 />
+        </el-form-item>
+
+      
+          <div>
+            <el-upload action="#" list-type="picture" :auto-upload="false" :limit="1" :on-exceed="handleExceed"
+              style="position: fixed; left: 12%;display: flex; align-items: center;" >
+                  
+              
+              <el-icon size="30px">
+                <Picture />
+              </el-icon>图片
+              <br>
+              
+
+            </el-upload>
+
+          </div>
+          
+          <el-radio-group v-model="radio" fill="#FE4E96" size="small" > 
+            <el-radio-button label="日常动态" ></el-radio-button>
+            <el-radio-button label="家族故事" ></el-radio-button>
+          </el-radio-group>
+
+          
+        
+         
+
+          <div class="button-container">
+            <el-button type="primary" @click="submitPost" :disabled="!form.content.trim()"
+              style="position:fixed; right:11% ;background-color:#FE4E96">发布</el-button>
+          </div>
+       
+      </el-form>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import { defineComponent } from 'vue';
+  
+  
+
+  
+  export default defineComponent({
+    name: 'PostForm',
+    components: {
+  
+      
+    },
+    data() {
+      return {
+        showForm: false,  // 控制表单是否显示
+        radio: '1',
+        radio4:'1',
+        form: {
+          content: ''
+        },
+        fileList: [],
+        imageUrl: '',
+        componentHeight: '3%'
+      };
+    },
+    methods: {
+      handleExceed()
+      {
+        this.$message.error("目前仅支持添加一张图片");
+      },
+      // 切换表单显示/隐藏
+      toggleForm() {
+        this.showForm = !this.showForm;
+        if (this.componentHeight == '3%')
+          this.componentHeight = '25%';
+        else
+          this.componentHeight = '3%';
+      },
+      beforeUpload(file) {
+        const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isImage) {
+          this.$message.error('只能上传JPG/PNG格式的图片');
+        }
+        return isImage;
+      },
+      handleUploadSuccess(response, file, fileList) {
+        this.imageUrl = URL.createObjectURL(file.raw); // 创建临时 URL 以预览图片
+        this.fileList = fileList;
+      },
+      handleRemove(file, fileList) {
+        this.imageUrl = ''; // 删除时清空图片预览
+        this.fileList = fileList;
+      },
+      submitPost() {
+        if (!this.form.content.trim()) {
+          this.$message.error('内容不能为空');
+          return;
+        }
+        const newPost = {
+          postId: Date.now(),
+          username: '用户',
+          avatarUrl: 'https://via.placeholder.com/50',
+          timestamp: new Date().toLocaleString(),
+          content: this.form.content,
+          imageUrl: this.imageUrl,
+          likeCount: 0,
+          commentCount: 0,
+          comments: [],
+          liked: false
+        };
+        this.$emit('post-submitted', newPost);
+        this.form.content = '';
+        this.imageUrl = '';
+        this.fileList = [];
+      },
+    }
+  });
+</script>
+
+<style scoped>
+/* 覆盖选中时的颜色 */
+.el-radio.is-checked .el-radio__inner {
+  border-color: #FE4E96 !important;
+}
+
+.el-radio.is-checked .el-radio__label {
+  color: #FE4E96 !important;
+}
+
+.el-radio .el-radio__inner {
+  border-color: #FE4E96 !important;
+}
+
+.el-radio .el-radio__label {
+  color: #FE4E96 !important;
+}
+  .form-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+  }
+
+  .el-upload-list__item-thumbnail {
+    width: 60px;
+    /* 修改为你想要的缩略图宽度 */
+    height: 60px;
+    /* 修改为你想要的缩略图高度 */
+    object-fit: cover;
+    /* 保证缩略图不会变形 */
+  }
+
+
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+
+  .upload-demo {
+    margin-top: 10px;
+  }
+
+  .animate-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .animate-card-50 {
+    display: flex;
+    height: 10%;
+    justify-content: center;
+    /* 横向居中 */
+    transition: height 0.7s ease-in-out;
+  }
+
+  .animate-card__layer {
+    height: 5%;
+    width: 5%;
+    background-color: #FE4E96;
+    border: none;
+  }
+
+  .animate-card__layer:hover {
+    transform: translateY(50%);
+    background-color: #FEB2D7;
+  }
+
+  .animate-card-50 .animate-card__sublayer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+
+    transform: translateY(-100%);
+    text-align: center;
+    background-color: #fff;
+    color: #000;
+    opacity: 0;
+
+  }
+
+  /* 点击后触发动画 */
+  .animate-card-50.active .animate-card__layer {
+    position: relative;
+    transform: scale(0.9) translateY(800%);
+    border: 6px solid rgba(255, 255, 255, 0.9);
+    z-index: 9;
+  }
+
+  .animate-card-50.active .animate-card__sublayer {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+</style>
\ No newline at end of file
diff --git a/src/views/community/trends.vue b/src/views/community/trends.vue
index dd974e63..6ee4b6fc 100644
--- a/src/views/community/trends.vue
+++ b/src/views/community/trends.vue
@@ -1,122 +1,150 @@
 <template>
   <div class=communitybase>
-    
+
     <div class=leftinfo>
-        <div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
+      <div class=focus style="position: absolute; font-weight: bold; font-size: 18px; left:8%;top:1%">
         你的关注
+      </div>
+      <div class=num style="position:absolute; font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
+        {{myfollows.weidu}}条新动态
+      </div>
+      <div style="top:6%;position: absolute;width: 100%;">
+        <div class="alldongtai"
+          style="display: flex; flex-direction: row;justify-content:center;  align-items: center;position: relative;"
+          @click="alldongtai">
+          <el-icon color="#45D4CF" size="30px">
+            <Grid />
+          </el-icon>
+          <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
         </div>
-        <div class=num style="position:absolute;  font-size: 14px; right:20%; top:1.5%; color: #45D4CF;">
-          {{myfollows.weidu}}条新动态
-          </div>
-          <div class=followslist style="position:absolute;display: flex;flex-direction: column;top:7%;width:100%;gap:7%">
-            <div>
-              <div class= "alldongtai" style="display: flex; flex-direction: row;justify-content:center;  position: relative; align-items: center;">
-                <el-icon color="#45D4CF" size="30px"> <Grid /></el-icon>
-                <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">全部动态</div>
-              </div>
-              <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 3%;">
-            </div>
-            <div v-for="(follow, index) in myfollows.list" :key="index" style="margin-top: 8%;">
-              <div class="follows" style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;width: 100%;">
-                <img class="touxiang" src="../../assets/pictures/touxiang.png" style="width: 18%; height: auto;" />
-                <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
-              </div>
-              <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 5%;">
-            </div>
-            
-            
-          </div>
-    </div>
-    <div class=middle>
-        
-          <div class="post-list">
-            <div
-              v-for="(post, index) in posts"
-              :key="index"
-              class="post-card"
-            >
-              <PostCard
-                :avatarUrl="post.avatarUrl"
-                :username="post.username"
-                :timestamp="post.timestamp"
-                :content="post.content"
-                :imageUrl="post.imageUrl"
-                :likeCount="post.likeCount"
-                :commentCount="post.commentCount"
-                :isCommentsVisible="post.isCommentsVisible"
-                :comments="post.comments"
-                @updateLikeCount="updateLikeCount(index, $event)"
-                @updateCommentCount="updateCommentCount(index, $event)"
-                @toggleCommentsVisibility="toggleCommentsVisibility(index)"
-                @addComment="addComment(index, $event)"
-              />
-            </div>
+        <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8;margin-top: 1%;">
+      </div>
+
+      <div class=followslist
+        style="position:absolute;display: flex;flex-direction: column;top:10%;width:100%;height: 100%;gap:2%; ">
+
+        <div v-for="(follow, index) in myfollows.list" :key="index" style="width: 100%;">
+          <div class="follows"
+            style="display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative;height: 120%;"
+            @mouseover="hoverIndex = index" @mouseleave="hoverIndex = -1" @click="fllowsClick(follow.userid,index)"
+            :class="{'selected': selectedIndex === index}">
+            <img class="touxiang" src="../../assets/pictures/touxiang.png" style="left:20%;width: 15%; height: auto;" />
+            <div style="margin-left: 40px; font-weight: bold; font-size: 16px;">{{ follow.name }}</div>
           </div>
-      
-      
-    </div>
-    <div class=rightheat style="display: flex;flex-direction:column;">
+          <hr style="width: 100%; height: 0.001px; background-color: #D8D8D8; margin-top: 1%;">
+        </div>
+
 
-      <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
-        <el-icon color="red" size="30px"><Odometer /></el-icon>
-        <div style="font-weight:550; font-size: 18px;">热门动态</div>
       </div>
-     <div class= heatlist style="margin-top:20px;display: flex;flex-direction:row;">
-        <div style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:11px">
-            <div class=Hotsearchnum style="background-color:red;">1</div>
-            <div class=Hotsearchnum style="background-color:#FF7E38;">2</div>
-            <div class=Hotsearchnum style="background-color:#FFC74F;">3</div>
-            <div class=Hotsearchnum style="background-color:gray;">4</div>
-            <div class=Hotsearchnum style="background-color:gray;">5</div>
-            <div class=Hotsearchnum style="background-color:gray;">6</div>
-            <div class=Hotsearchnum style="background-color:gray;">7</div>
-        </div>
-        <div style=" font-size: 14px;font-weight:500;margin-left: 30px;display: flex;flex-direction:column;gap:17px">
-          <li style="list-style-type: none;" v-for="(item, index) in HotsearchList" :key="index">{{ item }}</li>
-        </div>
-        
+    </div>
+
+    <div class="middle">
+      <PostForm @post-submitted="addPost" />
+      <div class="post-list">
+        <!-- 使用 transition-group 来包裹 v-for 渲染的元素 -->
+        <transition-group name="fade" tag="div">
+          <div v-for="(post, index) in filteredPosts" :key="post.id" class="post-card">
+            <PostCard :avatarUrl="post.avatarUrl" :username="post.username" :timestamp="post.timestamp"
+              :content="post.content" :imageUrl="post.imageUrl" :likeCount="post.likeCount"
+              :commentCount="post.commentCount" :isCommentsVisible="post.isCommentsVisible" :comments="post.comments"
+              @updateLikeCount="updateLikeCount(index, $event)" @updateCommentCount="updateCommentCount(index, $event)"
+              @toggleCommentsVisibility="toggleCommentsVisibility(index)" @addComment="addComment(index, $event)" />
+          </div>
+        </transition-group>
       </div>
-      <div style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px"></div>
-      <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
-        <el-icon color="#FEB7D9" size="25px"><Notebook /></el-icon>
-        <div style="font-weight:550; font-size: 18px;">热门家族故事</div>
+  </div>
+
+
+  <div class=rightheat style="display: flex;flex-direction:column;">
+
+    <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
+      <el-icon color="red" size="30px">
+        <Odometer />
+      </el-icon>
+      <div style="font-weight:550; font-size: 18px;">热门动态</div>
+    </div>
+    <div class=heatlist style="margin-top:20px;display: flex;flex-direction:row;">
+      <div
+        style="position:relative; display: flex;flex-direction:column;  color: white; font-weight: bold;margin-left: 20px ;gap:51px">
+        <div class=Hotsearchnum style="background-color:red;">1</div>
+        <div class=Hotsearchnum style="background-color:#ff8e51;">2</div>
+        <div class=Hotsearchnum style="background-color:#ffc74fd2;">3</div>
+        <div class=Hotsearchnum style="background-color:gray;">4</div>
+        <div class=Hotsearchnum style="background-color:gray;">5</div>
+      
       </div>
-      <div class="familystorelist" style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
-        <div v-for="(story, index) in familystories" :key="index" class="familystore" style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;">
-          <img class="touxiang" src="../../assets/pictures/touxiang.png" />
-          <div class="familytitle">{{ story.title }}</div>
-          <div class="familycontent">{{ story.content }}</div>
-        </div>
+      <div 
+  style="font-size: 14px; font-weight: 500; margin-left: 30px; display: flex; flex-direction: column; gap: 17px;">
+  <div  
+    style="list-style-type: none; width: 95%; height: 20%; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;"
+    v-for="(Hotsearch, index) in HotsearchList" 
+    :key="index"
+    @click="checkbypostid(Hotsearch.postid)">
+    {{ Hotsearch.content }}
+    {{ Hotsearch.postid }}
+  </div>
+</div>
+
+    </div>
+    <div
+      style="width: 100%; height: 1px; background: linear-gradient(to right, transparent, gray, transparent);margin-top: 20px">
+    </div>
+    <div style="position:relative; top:1%; display: flex;flex-direction:row;justify-content:center;gap:15px">
+      <el-icon color="#FEB7D9" size="25px">
+        <Notebook />
+      </el-icon>
+      <div style="font-weight:550; font-size: 18px;">热门家族故事</div>
+    </div>
+    <div class="familystorelist"
+      style="margin-top: 20px; display: flex; justify-content: center; flex-direction: column; gap: 10px;">
+      <div v-for="(story, index) in familystories" :key="index" class="familystore"
+        style="width: 95%; height: 70px; background-color: rgba(255, 225, 240, 0.7); border-radius: 10%; position: relative;">
+        <img class="touxiang" src="../../assets/pictures/touxiang.png" />
+        <div class="familytitle">{{ story.username }}</div>
+        <div class="familycontent">{{ story.content }}</div>
       </div>
-      
-      
     </div>
 
+
   </div>
-  
+
+  </div>
+
 </template>
 <script>
-import PostCard from '../../components/PostCard.vue';
-export default {
-  name: 'CommunityIndex', // 添加组件名称
-  components: { PostCard },
-  // 其他组件选项
-  data() {
-    return {
-      isLiked: false, 
-      HotsearchList: ["麦琳爱吃烧鸡","马思唯收官战","国足绝杀","再见爱人","杨子黄圣依","黄磊的豆角","邪恶栀子花计划"],
-      familystories: [
-      { title: '我是怎么起家的', content: '我的父母来自于印度，后面通过自己的打拼...' },
-      { title: '我的祖父', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
-      { title: '我竟然是皇室成员！', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
-      
+  import PostCard from '../../components/PostCard.vue';
+  import PostForm from './Postform.vue';
+  export default {
+    name: 'CommunityIndex', // 添加组件名称
+    components: { PostCard, PostForm },
+    // 其他组件选项
+    data() {
+      return {
+        HotsearchList: [{postid: 1,username:"麦琳",content:"啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊", }, 
+        {username:"马思唯",content:"黑马季节收官战无敌", postid: 7,}, 
+         {username:"马思唯",content:"黑马季节收官战无敌", postid: 7,}, {username:"马思唯",content:"黑马季节", postid:7},
+         {username:"马思唯",content:"黑马季hdsajkdhkashjd", postid:3}],
+        familystories: [
+          { username: '查理一世', content: '我的父母来自于印度，后面通过自己的打拼...' },
+          { username: '亨利二世', content: '我的祖父曾经参加过二战，有一次在诺曼底...' },
+          { username: '查理九世', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
+          { username: '伊丽莎白', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
+          { username: '莎士比亚', content: '在我的18岁生日上，妈妈告诉我祖母其实是...' },
 
-    ],
-    myfollows:{weidu:7,list:[{name:'乔一鱼'},{name:'邓紫棋'},{name:'马思唯'},{name:'陶喆'}]},
-    posts: [
+
+        ],
+        myfollows: { weidu: 7, list: [{ name: '乔一鱼', userid: 1 }, { name: '邓紫棋', userid: 2 }, { name: '马思唯', userid: 3 }, { name: '陶喆', userid: 5 }] },
+        hoverIndex: -1,
+        selectedIndex: -1,
+        selecteduserid: 0,
+        selectedbyuserid:false,
+        selectedbypostid:false,
+        posts: [
           {
+            userid: 1,
+            postid: 1,
             avatarUrl: 'https://via.placeholder.com/40',
-            username: '小明',
+            username: '乔一鱼',
             timestamp: '1小时前',
             content: '今天的天气真好，适合出去玩！',
             imageUrl: 'https://via.placeholder.com/400x200',
@@ -126,6 +154,8 @@ export default {
             comments: []  // 存储评论
           },
           {
+            userid: 2,
+            postid: 2,
             avatarUrl: 'https://via.placeholder.com/40',
             username: '小红',
             timestamp: '2小时前',
@@ -136,18 +166,119 @@ export default {
             isCommentsVisible: false,
             comments: []  // 存储评论
           },
+
+          {
+            userid: 3,
+            postid: 3,
+            avatarUrl: 'https://via.placeholder.com/40',
+            username: '马思唯',
+            timestamp: '1小时前',
+            content: '敬请期待我的新专辑《乐透人生》',
+            imageUrl: 'https://via.placeholder.com/400x200',
+            likeCount: 24,
+            commentCount: 6,
+            isCommentsVisible: false,
+            comments: []  // 存储评论
+          },
+          {
+            userid: 3,
+            postid: 4,
+            avatarUrl: 'https://via.placeholder.com/40',
+            username: '马思唯',
+            timestamp: '1小时前',
+            content: '我在阿姆斯特丹当个画家虽然口袋里钱不多，就在梵高博物馆外等她从我身边路过',
+            imageUrl: 'https://via.placeholder.com/400x200',
+            likeCount: 24,
+            commentCount: 6,
+            isCommentsVisible: false,
+            comments: []  // 存储评论
+          },
+          {
+            userid: 4,
+            postid: 5,
+            avatarUrl: 'https://via.placeholder.com/40',
+            username: '邓紫棋',
+            timestamp: '1小时前',
+            content: '诶呀！！！！！！！！',
+            imageUrl: 'https://via.placeholder.com/400x200',
+            likeCount: 24,
+            commentCount: 6,
+            isCommentsVisible: false,
+            comments: []  // 存储评论
+          },
+          {
+            userid: 5,
+            postid: 6,
+            avatarUrl: 'https://via.placeholder.com/40',
+            username: '陶喆',
+            timestamp: '1小时前',
+            content: '啊啊哦哦诶诶啊啊',
+            imageUrl: 'https://via.placeholder.com/400x200',
+            likeCount: 24,
+            commentCount: 6,
+            isCommentsVisible: false,
+            comments: []  // 存储评论
+          },
+
+          {
+            userid: 3,
+            postid: 7,
+            avatarUrl: 'https://via.placeholder.com/40',
+            username: '马思唯',
+            timestamp: '1小时前',
+            content: '黑马季节收官战无敌',
+            imageUrl: 'https://via.placeholder.com/400x200',
+            likeCount: 24,
+            commentCount: 6,
+            isCommentsVisible: false,
+            comments: []  // 存储评论
+          },
         ]
-    };
-  },
-  methods: {
+      };
+    },
+    computed: {
+      // 计算属性：过滤帖子数据，依据 showUser3Posts 的值
+      filteredPosts() {
+        if (this.selectedbyuserid) {
+          return this.posts.filter(post => post.userid === this.selecteduserid);
+        }
+        else if(this.selectedbypostid){
+          return this.posts.filter(post => post.postid === this.selectedpostid);
+        }
+        return this.posts;
+      }
+    },
+    methods: {
+      checkbypostid(postid){
+          // 打印出来检查
+        this.selectedbyuserid =false;
+        this.selectedbypostid = true;
+        console.log('点击事件触发，postid:', this.selectedpostid);
+        this.selectedpostid=postid;
+      },
+      alldongtai() {
+        this.selectedbyuserid = true;
+        this.selecteduserid = 0;
+        this.selectedIndex = -1;
+        this.$message("查看全部动态");
+      },
+
+      fllowsClick(userid, index) {
+        this.$message("查看userid:" + userid);
+        this.selectedbyuserid = true;
+        this.selectedIndex = index;  // 点击后设置选中的项
+        this.selecteduserid = userid;
+
+      },
       updateLikeCount(index, newLikeCount) {
-        this.posts[index].likeCount = newLikeCount;
+        this.filteredPosts[index].likeCount = newLikeCount;
       },
       updateCommentCount(index, newCommentCount) {
-        this.posts[index].commentCount = newCommentCount;
+        this.filteredPosts[index].commentCount = newCommentCount;
       },
       toggleCommentsVisibility(index) {
-        this.posts[index].isCommentsVisible = !this.posts[index].isCommentsVisible;
+        this.$message("haha" + index);
+        this.filteredPosts[index].isCommentsVisible = !this.filteredPosts[index].isCommentsVisible;
       },
       addComment(index, commentText) {
         this.posts[index].comments.push({
@@ -157,7 +288,7 @@ export default {
         this.posts[index].commentCount += 1;
       }
     }
-}
+  }
 </script>
 
 <style scoped>