diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
index 6998e84..bc11b17 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
@@ -101,16 +101,17 @@ onUnmounted(() => {
 <style scoped>
 .notice-board {
     position: relative;
-    background-color: #5aa76f;
+    background-color: rgb(90, 167, 111,0.8);
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-start; /* 顶部对齐 */
-    width: 500px; /* 固定宽度 */
-    height: 350px; /* 固定高度 */
-    overflow: hidden; /* 防止图片溢出 */
-    padding: 10px; /* 内边距 */
-    box-sizing: border-box; /* 包括内边距在宽高内 */
+    justify-content: flex-start;
+    width: 100%;
+    height: 100%;
+    min-width: 220px;
+    max-width: 700px;
+    overflow: hidden;
+    box-sizing: border-box;
 }
 
 .notice-title {
@@ -127,20 +128,24 @@ onUnmounted(() => {
     justify-content: center;
     position: relative;
     width: 100%;
-    height: calc(100% - 60px); /* 除去标题和指示器的高度 */
+    height: calc(100% - 60px); /* 保证展示区高度 */
+    min-height: 120px;
 }
 
 .notice-item {
-    text-align: center;
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .notice-image {
     width: 100%;
     height: 100%;
-    object-fit: cover; /* 让图片适应公告栏 */
+    object-fit: cover;
     border-radius: 8px;
+    display: block;
 }
 
 .notice-empty {
@@ -184,7 +189,7 @@ onUnmounted(() => {
     justify-content: center;
     align-items: center;
     margin-top: 10px;
-    gap: 8px; /* 按钮之间的间距 */
+    gap: 8px; 
 }
 
 .indicator-button {
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
index db7388b..3888c34 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="post-page-container">
-        <!-- 左侧分类按钮 -->
-        <div class="category-buttons">
+        <!-- 顶部横向分类按钮 -->
+        <div class="category-buttons-horizontal" ref="categoryBarRef">
             <button
                 v-for="(category, index) in categories"
                 :key="index"
@@ -13,7 +13,7 @@
             </button>
         </div>
 
-        <!-- 右侧帖子列表 -->
+        <!-- 帖子列表 -->
         <div class="post-list">
             <div
                 v-for="(post, index) in postListStore.posts"
@@ -21,18 +21,44 @@
                 class="post-item"
                 @click="goToPostDetail(post.id)"
             >
+                <!-- 头像+用户名 -->
                 <div class="post-header">
-                    <img :src="post.avatar" :alt="头像" class="post-avatar" />
-                    <h3 class="post-title">{{ post.title }}</h3>
+                    <img 
+                        :src="(post.userName === '匿名用户' || post?.status === 1) 
+                            ? require('@/assets/default-avatar/boy_4.png') 
+                            : post.avatar || require('@/assets/default-avatar/boy_1.png')" 
+                        alt="头像" 
+                        class="post-avatar" 
+                    />
+                    <span class="post-username">{{ post.userName }}</span>
                 </div>
-                <p class="post-summary">{{ post.summary }}</p>
+                <!-- 标题 -->
+                <div class="post-title">{{ post.title }}</div>
+                <!-- 图片 -->
+                <div v-if="post.image" class="post-image-wrapper">
+                    <img :src="post.image" alt="帖子图片" class="post-image" />
+                </div>
+                <!-- 统计信息 -->
                 <div class="post-stats">
                     <span>👁 {{ post.viewCount }}</span>
                     <span>🗨 {{ post.comments }}</span>
                     <span>♥ {{ post.likes }}</span>
                 </div>
+                <!-- 发布时间 -->
+                <div class="post-time">
+                    {{ post.createTime ? post.createTime.slice(0, 10) : '' }}
+                </div>
             </div>
         </div>
+
+        <!-- 回到顶部按钮 -->
+        <button
+            v-if="showBackToTop"
+            class="back-to-top-btn"
+            @click="scrollToTop"
+        >
+            🔝
+        </button>
     </div>
 </template>
 
@@ -41,7 +67,6 @@ import { ref, onMounted, onUnmounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { usePostListStore } from '@/stores/postlist.js';
 
-// 分类名与id映射
 const categoryMap = [
   { name: '全部', id: null },
   { name: '校园活动', id: 1 },
@@ -54,23 +79,32 @@ const selectedCategory = ref('全部');
 const postListStore = usePostListStore();
 const router = useRouter();
 
-// 分类切换
+const categoryBarRef = ref(null);
+const showBackToTop = ref(false);
+
 const selectCategory = async (categoryName) => {
   selectedCategory.value = categoryName;
   postListStore.resetList();
-  // 找到对应的id
   const categoryObj = categoryMap.find(item => item.name === categoryName);
   await postListStore.getList(categoryObj ? categoryObj.id : null);
 };
 
-// 跳转详情
 const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
 };
 
-// 滚动触底加载
 const handleScroll = async () => {
   const scrollContainer = document.documentElement;
+  // 判断分类栏底部是否已经滚出视口
+  const bar = categoryBarRef.value;
+  if (bar) {
+    const rect = bar.getBoundingClientRect();
+    showBackToTop.value = rect.bottom < 0;
+  } else {
+    // 兜底：滚动超过200px也显示
+    showBackToTop.value = scrollContainer.scrollTop > 200;
+  }
+  // 触底加载
   if (
     scrollContainer.scrollTop + window.innerHeight >= scrollContainer.scrollHeight - 10 &&
     !postListStore.loading &&
@@ -81,8 +115,11 @@ const handleScroll = async () => {
   }
 };
 
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
+
 onMounted(async () => {
-  // 首次加载
   await postListStore.getList();
   window.addEventListener('scroll', handleScroll);
 });
@@ -91,115 +128,175 @@ onUnmounted(() => {
   window.removeEventListener('scroll', handleScroll);
 });
 
-// 分类切换时自动滚动到顶部
 watch(selectedCategory, () => {
   window.scrollTo(0, 0);
 });
 </script>
 
 <style scoped>
-/* 页面整体布局 */
 .post-page-container {
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: 20px;
+    background-color: rgba(249, 227, 238, 0.8);
+    flex-direction: column;
+    align-items: stretch;
+    padding: 5px 0;
     box-sizing: border-box;
-    gap: 20px;
+    gap: 1px;
+    width: 100%;
 }
 
-/* 左侧分类按钮样式 */
-.category-buttons {
+/* 顶部横向分类按钮样式 */
+.category-buttons-horizontal {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 0;
-    width: 200px;
+    width: 100%;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #eee;
+    background: rgba(218, 213, 213, 0.6);
+    padding-bottom: 2px;
 }
 
 .category-button {
-    padding: 10px 20px;
+    padding: 10px 24px;
     font-size: 14px;
-    border: 1px solid #ccc;
-    border-bottom: none;
-    background-color: #f9f9f9;
+    border: none;
+    background-color: transparent;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
-}
-
-.category-button:last-child {
-    border-bottom: 1px solid #ccc;
+    color: #333;
+    border-bottom: 2px solid transparent;
+    outline: none;
 }
 
 .category-button.active {
-    background-color: #5aa76f;
-    color: white;
-    border-color: #5aa76f;
+    background-color: #f6fff8;
+    color: #5aa76f;
+    border-bottom: 2px solid #5aa76f;
+    font-weight: bold;
 }
 
 .category-button:hover {
-    background-color: #e0e0e0;
+    background-color: #f0f0f0;
 }
 
-/* 右侧帖子列表样式 */
+/* 帖子列表区域占满父容器，左右margin为10px */
 .post-list {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    gap: 15px;
+    padding: 10px; 
     flex: 1;
+    width: 100%;
+    box-sizing: border-box;
 }
 
+/* 帖子卡片自适应宽度和高度 */
 .post-item {
-    position: relative; /* 设置为相对定位 */
-    width: 300px;
-    height: 150px;
+    position: relative;
     padding: 15px;
     border: 1px solid #ccc;
     border-radius: 8px;
     background-color: #ffffff;
     cursor: pointer;
     transition: box-shadow 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    width: 100%;
+    height: 280px;
+    max-width: 100%;
+    overflow: hidden;
 }
 
-.post-item:hover {
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* 帖子头部样式 */
+/* 头像+用户名 */
 .post-header {
     display: flex;
     align-items: center;
     gap: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 6px;
 }
 
 .post-avatar {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%; /* 设置为圆形 */
-    object-fit: cover; /* 确保图片按比例填充 */
+    width: 36px;
+    height: 36px;
+    border-radius: 50%; 
+    object-fit: cover;
 }
 
+.post-username {
+    font-size: 15px;
+    color: #5aa76f;
+    font-weight: bold;
+}
+
+/* 标题 */
 .post-title {
     font-size: 18px;
+    text-align: left;
     font-weight: bold;
-    margin: 0;
+    margin: 0 0 8px 0;
+    color: #333;
+    word-break: break-all;
+    padding-left: 30px;
 }
 
-/* 帖子摘要样式 */
-.post-summary {
-    font-size: 14px;
-    color: #666;
+/* 图片展示 */
+.post-image-wrapper {
+    width: 100%;
+    height: 160px; 
+    display: flex;
+    align-items: center;
+    justify-content: center;
     margin-bottom: 10px;
+    overflow: hidden;
+}
+.post-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain; 
+    display: block;
 }
 
 /* 帖子统计信息样式 */
 .post-stats {
     display: flex;
-    gap: 15px; /* 图标之间的间距 */
-    font-size: 12px;
+    gap: 15px;
+    font-size: 16px;
     color: #999;
-    position: absolute; /* 绝对定位 */
-    bottom: 10px; /* 距离卡片底部 10px */
-    left: 15px; /* 距离卡片左侧 15px */
+    position: absolute;
+    bottom: 5px;
+    left: 15px;
+}
+
+/* 发布时间（右下角） */
+.post-time {
+    position: absolute;
+    bottom: 5px;
+    right: 15px;
+    font-size: 13px;
+    color: #bbb;
+}
+
+/* 回到顶部按钮样式 */
+.back-to-top-btn {
+    position: fixed;
+    right: 32px;
+    bottom: 48px;
+    z-index: 999;
+    background: #d5e9da;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    font-size: 36px;
+    box-shadow: 0 2px 8px rgba(90,167,111,0.15);
+    cursor: pointer;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+}
+.back-to-top-btn:hover {
+    opacity: 1;
+    background: #388e3c;
 }
 </style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
index fc37a3d..ce6a069 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
@@ -90,8 +90,12 @@ initializeDate();
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
-    width: 300px;
-    height: 350px;
+    width: 100%;
+    height: 100%;
+    min-width: 180px;
+    min-height: 220px;
+    max-width: 300px;
+    max-height: 300px;
     margin: 0 auto;
     border: 1px solid #ccc;
     border-radius: 8px;
@@ -108,7 +112,7 @@ initializeDate();
     font-weight: bold;
     color: #5aa76f;
     text-align: center;
-    margin-bottom: 20px;
+    margin-bottom: 1px;
 }
 
 .welcome-body {
@@ -116,7 +120,7 @@ initializeDate();
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    margin-bottom: 20px;
+    margin-bottom: 1px;
 }
 
 .month-column,
@@ -124,17 +128,19 @@ initializeDate();
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: bold;
     color: #333;
-    gap: 2px; /* 紧凑排列 */
+    gap: 2px; 
 }
 
 .day-row {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 180px; /* 日期号字体放大 */
+    font-size: 10vw; /* 用vw自适应字体大小 */
+    min-font-size: 40px;
+    max-font-size: 120px;
     font-weight: bold;
     color: #5aa76f;
     flex: 1; /* 占据中间空间 */
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js
index 2901758..a2230b4 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/stores/postlist.js
@@ -6,7 +6,7 @@ export const usePostListStore = defineStore('postList', {
     posts: [], // 帖子列表
     total: 0, // 帖子总数
     page: 1, // 当前页码
-    pageSize: 10, // 每页帖子数
+    pageSize: 6, // 每页帖子数
     lastVal: Date.now(), // 用于滚动分页的时间戳
     offset: 0, // 偏移量
     loading: false, // 加载状态
@@ -37,7 +37,6 @@ export const usePostListStore = defineStore('postList', {
               image: post.image,
               avatar: post.userAvatar || require('@/assets/default-avatar/boy_1.png'),
               title: post.title,
-              summary: post.content ? post.content.slice(0, 40) + (post.content.length > 40 ? '...' : '') : '',
               viewCount: post.viewCount || 0,
               likes: post.likeCount || 0,
               comments: post.commentCount || 0,
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
index 2333cc2..2dfe95a 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
@@ -1,17 +1,12 @@
 <template>
     <div>
         <div class="top-container">
-            <NoticeBoard />
-            <WelcomeCalendar />
+            <NoticeBoard class="notice-flex"/>
+            <WelcomeCalendar class="calendar-flex"/>
         </div>
-         
         <div class="post-container">
             <PostPage />
         </div>
-        <!-- <UserPage />  -->
-        
-        <!-- <PostDetail /> -->
-        
     </div>
 </template>
 
@@ -19,33 +14,29 @@
 import NoticeBoard from '@/components/NoticeBoard.vue';
 import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
 import PostPage from '@/components/PostPage.vue';
-// import UserPage from './UserPage.vue';
-// import PostDetail from './PostDetail.vue';
 </script>
 
 <style scoped>
 .top-container {
     display: flex;
-    justify-content: center; /* 居中排列 */
-    align-items: center; /* 顶部对齐 */
-    padding: 10px;
-    gap: 10px; /* 设置较小的间距 */
-    width: 820px; /* 固定宽度 */
-    height: 350px; /* 固定高度 */
-    margin:20px auto 0; /* 上边距20px，左右居中 */
-    overflow: hidden; /* 防止溢出 */
-    box-sizing: border-box; /* 包括内边距在宽高内 */
+    align-items: stretch;
+    gap: 16px;
+    width: 100%;
+    max-width: 1000px;
+    height: 300px;
+    margin: 0 auto;
 }
-.top-container > * {
-    flex-shrink: 0;
+.notice-flex, .calendar-flex {
+    height: 100%;
 }
 .post-container {
     display: flex;
-    justify-content: center; /* 居中排列 */
-    align-items: center; /* 顶部对齐 */
+    justify-content: center;
+    align-items: flex-start;
     padding: 10px;
-    width: 820px; /* 固定宽度 */
-    margin: 20px auto; /* 上边距20px，左右居中 */
-    box-sizing: border-box; /* 包括内边距在宽高内 */
+    width: 100%;
+    max-width: 1000px;
+    margin: 10px auto;
+    box-sizing: border-box;
 }
 </style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
index e50d23d..7aeb158 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
@@ -2,11 +2,13 @@
     <div class="post-detail-container">
         <!-- 作者信息栏 -->
         <div class="author-info" v-if="author && author.userName">
-           <img 
-                :src="author.userAvatar || require('@/assets/default-avatar/boy_1.png')" 
+            <img 
+                :src="(author.userName === '匿名用户' || postDetailStore.post?.status === 1 ) 
+                ? require('@/assets/default-avatar/boy_4.png') 
+                : author.userAvatar|| require('@/assets/default-avatar/boy_1.png') "  
                 alt="头像" 
                 class="author-avatar"
-                :style="{ cursor: postDetailStore.post?.status === 1 ? 'not-allowed' : 'pointer' }"
+                :style="{ cursor: (author.userName === '匿名用户' || postDetailStore.post?.status === 1 )  ? 'not-allowed' : 'pointer' }"
                 @click="handleAuthorAvatarClick"
             />
             <div class="author-details">
@@ -18,128 +20,138 @@
             </div>
         </div>
 
-        <!-- 帖子内容 -->
-        <div class="post-content">
-            <img
-                v-if="postDetailStore.post?.image"
-                :src="postDetailStore.post.image"
-                alt="帖子封面"
-                class="post-cover"
-            />
-            <h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
-            <p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
-            <div class="post-stats">
-                <span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
-                <span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
-                <span>
-                    <button
-                        @click="postDetailStore.PostLike"
-                        class="like-btn"
-                        :class="{ liked: postDetailStore.isLike }"
-                    >
-                        <span v-if="!postDetailStore.isLike">♡</span>
-                        <span v-else>♥</span>
-                        {{ postDetailStore.post?.likeCount ?? 0 }}
-                    </button>
-                </span>
-            </div>
-            <div class="post-time">
-                发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
+        <!-- 主内容区：帖子内容+评论区+发送评论 -->
+        <div class="main-content">
+            <!-- 帖子内容 -->
+            <div class="post-content">
+                <img
+                    v-if="postDetailStore.post?.image"
+                    :src="postDetailStore.post.image"
+                    alt="帖子封面"
+                    class="post-cover"
+                />
+                <h1 class="post-title">{{ postDetailStore.post?.title || '' }}</h1>
+                <p class="post-body">{{ postDetailStore.post?.content || '' }}</p>
+                <div class="post-stats">
+                    <span> 👁 {{ postDetailStore.post?.viewCount ?? 0 }}</span>
+                    <span> 🗨 {{ postDetailStore.post?.commentCount ?? 0 }}</span>
+                    <span>
+                        <button
+                            @click="postDetailStore.PostLike"
+                            class="like-btn"
+                            :class="{ liked: postDetailStore.isLike }"
+                        >
+                            <span v-if="!postDetailStore.isLike">♡</span>
+                            <span v-else>♥</span>
+                            {{ postDetailStore.post?.likeCount ?? 0 }}
+                        </button>
+                    </span>
+                </div>
+                <div class="post-time">
+                    发布时间：{{ postDetailStore.post?.createTime ? formatTime(postDetailStore.post.createTime) : '' }}
+                </div>
             </div>
-        </div>
-
-        <!-- 评论区 -->
-        <div class="comments-section">
-            <h2 class="comments-title">评论</h2>
-            <ul class="comments-list">
-                <li v-for="comment in postDetailStore.comments" :key="comment.id" class="comment-item">
-                    <img 
-                        :src="comment.userAvatar || require('@/assets/default-avatar/boy_1.png')" 
-                        alt="评论者头像" 
-                        class="comment-avatar"
-                        @click="goUserHome(comment.userId)" 
-                        style="cursor: pointer;"
-                    />
-                    <div class="comment-content">
-                        <p class="comment-name">{{ comment.userName || '匿名用户' }}</p>
-                        <p class="comment-text">{{ comment.content || '' }}</p>
-                        <div class="comment-meta">
-                            <span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
-                            <button
-                                @click="postDetailStore.CommentLike(comment)"
-                                :class="['like-btn', { liked: comment.isLike }]"
-                            >
-                                <span v-if="!comment.isLike">♡</span>
-                                <span v-else>♥</span>
-                                {{ comment.likeCount ?? 0 }}
-                            </button>
-                            <span v-if="comment.replyCount > 0">
-                            <button @click="loadReplies(comment)">
-                                {{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
-                            </button>
-                            </span>
-                            <button class="reply-btn" @click="startReply(comment)">回复</button>
+            <!-- 评论区 -->
+             <div class="comments-section">
+                <h2 class="comments-title">评论</h2>
+                <ul class="comments-list">
+                    <li v-if="postDetailStore.comments.length === 0" class="comments-finished-tip">
+                        暂时没有评论哦，快来发表吧！！！
+                    </li>
+                    <li v-for="comment in postDetailStore.comments" :key="comment.id" class="comment-item">
+                        <img 
+                            :src="comment.userAvatar || require('@/assets/default-avatar/boy_1.png')" 
+                            alt="评论者头像" 
+                            class="comment-avatar"
+                            @click="goUserHome(comment.userId)" 
+                            style="cursor: pointer;"
+                        />
+                        <div class="comment-content">
+                            <p class="comment-name">{{ comment.userName || '匿名用户' }}</p>
+                            <p class="comment-text">{{ comment.content || '' }}</p>
                             <button 
                                 class="delete-btn" 
                                 v-if="String(comment.userId) === String(userStore.userInfo?.userid)"
                                 @click="handleDelete(comment)"
-                            >删除</button>
-                        </div>
-                        <!-- 子评论列表 -->
-                        <ul v-if="comment.showReplies && comment.replies && comment.replies.length > 0" class="replies-list">
-                            <li v-for="reply in comment.replies" :key="reply.id" class="comment-item reply-item">
-                                <img 
-                                    :src="reply.userAvatar || require('@/assets/default-avatar/boy_1.png')" 
-                                    alt="评论者头像" 
-                                    class="comment-avatar"
-                                    @click="goUserHome(reply.userId)"
-                                    style="cursor: pointer;" 
-                                    />
-                                <div class="comment-content">
-                                    <p class="comment-name">
-                                        {{ reply.userName || '匿名用户' }}
-                                        <span v-if="reply.replyUserName" class="reply-user">回复 @{{ reply.replyUserName }}</span>
-                                    </p>
-                                    <p class="comment-text">{{ reply.content || '' }}</p>
-                                    <div class="comment-meta">
-                                        <span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
-                                        <button
-                                            @click="postDetailStore.CommentLike(reply)"
-                                            :class="['like-btn', { liked: reply.isLike }]"
-                                        >
-                                            <span v-if="!reply.isLike">♡</span>
-                                            <span v-else>♥</span>
-                                            {{ reply.likeCount ?? 0 }}
-                                        </button>
-                                        <button class="reply-btn" @click="startReply(reply)">回复</button>
+                            >✖</button>
+                            <div class="comment-meta">
+                                <span class="comment-time">{{ comment.createTime ? formatTime(comment.createTime) : '' }}</span>
+                                <button class="reply-btn" @click="startReply(comment)">回复</button>
+                                <span v-if="comment.replyCount > 0">
+                                <button @click="loadReplies(comment)" class="expand-reply-btn">
+                                    {{ comment.showReplies> 0 ? '收起回复' : '展开回复' }} ({{ comment.replyCount }})
+                                </button>
+                                </span>
+                                <button
+                                    @click="postDetailStore.CommentLike(comment)"
+                                    :class="['like-btn', { liked: comment.isLike }]"
+                                >
+                                    <span v-if="!comment.isLike">♡</span>
+                                    <span v-else>♥</span>
+                                    {{ comment.likeCount ?? 0 }}
+                                </button>
+                            </div>
+                            <!-- 子评论列表 -->
+                            <ul v-if="comment.showReplies && comment.replies && comment.replies.length > 0" class="replies-list">
+                                <li v-for="reply in comment.replies" :key="reply.id" class="comment-item reply-item">
+                                    <img 
+                                        :src="reply.userAvatar || require('@/assets/default-avatar/boy_1.png')" 
+                                        alt="评论者头像" 
+                                        class="comment-avatar"
+                                        @click="goUserHome(reply.userId)"
+                                        style="cursor: pointer;" 
+                                        />
+                                    <div class="comment-content">
+                                        <p class="comment-name">
+                                            {{ reply.userName || '匿名用户' }}
+                                            <span v-if="reply.replyUserName" class="reply-user">回复 @{{ reply.replyUserName }}</span>
+                                        </p>
+                                        <p class="comment-text">{{ reply.content || '' }}</p>
                                         <button 
                                             class="delete-btn" 
                                             v-if="String(reply.userId) === String(userStore.userInfo?.userid)"
                                             @click="handleDelete(reply)"
-                                        >删除</button>
+                                        >✖</button>
+                                        <div class="comment-meta">
+                                            <span class="comment-time">{{ reply.createTime ? formatTime(reply.createTime) : '' }}</span>
+                                            <button class="reply-btn" @click="startReply(reply)">回复</button>
+                                            <button
+                                                @click="postDetailStore.CommentLike(reply)"
+                                                :class="['like-btn', { liked: reply.isLike }]"
+                                            >
+                                                <span v-if="!reply.isLike">♡</span>
+                                                <span v-else>♥</span>
+                                                {{ reply.likeCount ?? 0 }}
+                                            </button> 
+                                        </div>
                                     </div>
-                                </div>
-                            </li>
-                            <li v-if="comment.repliesLoading" class="reply-loading">加载中...</li>
-                            <li v-if="comment.repliesFinished" class="reply-finished">没有更多回复了</li>
-                        </ul>
-                    </div>
-                </li>
-            </ul>
-        </div>
+                                </li>
+                                <li v-if="comment.repliesLoading" class="reply-loading">加载中...</li>
+                                <li v-if="comment.repliesFinished" class="reply-finished">没有更多回复了</li>
+                            </ul>
+                        </div>
+                    </li>
+                    <li v-if="postDetailStore.comments.length > 0 && postDetailStore.commentsFinished" class="comments-finished-tip">
+                        没有更多评论啦......
+                    </li>
+                </ul>
+            </div>
 
-        <!-- 发送评论 -->
-        <div class="comment-box">
-            <div v-if="replyingComment" class="replying-tip">
-                正在回复 @{{ replyingComment.userName || '匿名用户' }}
-                <button class="cancel-reply-btn" @click="cancelReply">取消回复</button>
+            <!-- 发送评论 -->
+            <div class="comment-box">
+                <div v-if="replyingComment" class="replying-tip">
+                    正在回复 @{{ replyingComment.userName || '匿名用户' }}
+                    <button class="cancel-reply-btn" @click="cancelReply">取消回复</button>
+                </div>
+                <div style="position:relative;">
+                    <textarea
+                        v-model="newComment"
+                        placeholder="写下你的评论..."
+                        class="comment-input"
+                    ></textarea>
+                    <button @click="sendComment" class="send-button" style="position:absolute; right:16px; bottom:16px;">发送</button>
+                </div>
             </div>
-            <textarea
-                v-model="newComment"
-                placeholder="写下你的评论..."
-                class="comment-input"
-            ></textarea>
-            <button @click="sendComment" class="send-button">发送</button>
         </div>
     </div>
 </template>
@@ -280,15 +292,14 @@ onUnmounted(() => {
 .post-detail-container {
     display: grid;
     grid-template-areas:
-        "post-content author-info"
-        "comments-section author-info"
-        "comment-box author-info";
-    grid-template-columns: 3fr 1fr; /* 左侧内容占 3/4，右侧作者信息占 1/4 */
+        "main-content author-info";
+    grid-template-columns: 3fr 1fr;
     gap: 20px;
     padding: 20px;
     box-sizing: border-box;
-    max-width: 1200px; /* 设置页面最大宽度 */
-    margin: 0 auto; /* 居中页面并添加左右留白 */
+    max-width: 1200px;
+    margin: 0 auto;
+    height: 100vh;
 }
 
 .author-info {
@@ -344,10 +355,20 @@ onUnmounted(() => {
     background-color: #4a8a5a;
 }
 
+.main-content {
+    grid-area: main-content;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap:20px;
+    min-width: 0;
+    min-height: 0;
+}
+
 .post-content {
     grid-area: post-content;
     background-color: #ffffff;
-    padding: 20px;
+    padding: 5px;
     border: 1px solid #ccc;
     border-radius: 8px;
     position: relative; /* 为绝对定位的元素提供参考 */
@@ -365,15 +386,18 @@ onUnmounted(() => {
 }
 
 .post-title {
-    font-size: 24px;
+    font-size: 32px;
     margin-bottom: 10px;
-    text-align: left; /* 设置居左 */
+    text-align: left;
+    padding-left: 5px; 
 }
 
 .post-body {
     font-size: 16px;
     line-height: 1.5;
     margin-bottom: 20px;
+    text-align: left;
+    padding-left: 16px; 
 }
 
 .post-stats {
@@ -387,18 +411,20 @@ onUnmounted(() => {
 
 .post-time {
     position: absolute;
-    bottom: 20px; /* 距离底部 20px */
+    bottom: 5px; /* 距离底部 20px */
     right: 20px; /* 距离右侧 20px */
     font-size: 12px;
     color: #999;
 }
 
 .comments-section {
-    grid-area: comments-section;
+    flex: 1 1 0;
+    min-height: 0;
     background-color: #ffffff;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 8px;
+    overflow-y: auto;
 }
 
 .comments-title {
@@ -434,6 +460,7 @@ onUnmounted(() => {
     flex: 1;
     display: flex;
     flex-direction: column;
+    padding-left: 12px; 
 }
 
 .comment-name {
@@ -445,6 +472,7 @@ onUnmounted(() => {
     margin: 0;
     font-size: 14px;
     color: #333;
+    text-align: left;
 }
 
 .comment-meta {
@@ -459,32 +487,50 @@ onUnmounted(() => {
     font-size: 12px;
     color: #666;
 }
-
+.expand-reply-btn {
+    background: none;
+    border: none;
+    color: #409eff;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 2px 8px;
+    z-index: 1;
+}
 .comment-likes {
     font-size: 12px;
     color: #666;
 }
-
+.comments-finished-tip {
+    color: #999;
+    font-size: 14px;
+    text-align: center;
+    padding: 16px 0 8px 0;
+    letter-spacing: 1px;
+}
 .comment-box {
-    grid-area: comment-box;
     display: flex;
     flex-direction: column;
     gap: 10px;
+    background: #fff;
+    padding: 6px 24px 12px 24px;
+    box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
+    border-radius: 8px;
 }
 
 .comment-input {
     width: 100%;
     height: 80px;
-    padding: 10px;
+    padding: 10px 80px 32px 10px; /* 右下留空间给按钮 */
     border: 1px solid #ccc;
     border-radius: 8px;
     resize: none;
     font-size: 14px;
+    box-sizing: border-box;
 }
 
 .send-button {
-    align-self: flex-end;
-    padding: 10px 20px;
+    /* 位置已由内联style控制 */
+    padding: 8px 20px;
     background-color: #5aa76f;
     color: white;
     border: none;
@@ -508,7 +554,7 @@ onUnmounted(() => {
 
 .replies-list {
     list-style: none;
-    padding-left: 48px; /* 更明显的缩进 */
+    padding-left: 48px; 
     margin: 8px 0 0 0;
     border-left: 2px solid #e0e0e0;
 }
@@ -576,17 +622,23 @@ onUnmounted(() => {
   border: none;
   color: #f56c6c;
   cursor: pointer;
-  font-size: 13px;
+  font-size: 18px;
   margin-left: 10px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
 }
 .delete-btn:hover {
-  text-decoration: underline;
+  color: #ff2222;
+  background: #f9eaea;
+  border-radius: 50%;
 }
 .like-btn {
   margin-left: 8px;
   background: none;
   border: none;
-  color: #409eff;
+  color: #222323;
   cursor: pointer;
   font-size: 14px;
 }