diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
index 8a60b7b..7fa7e7f 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
@@ -1,19 +1,18 @@
 <!-- 模板部分，生成HTML -->
 <template>
   <div id="app">
-    <AppHeader />
-    <router-view/>
+    <MainPage />
   </div>
 </template>
 
 <!-- 控制模板数据与行为 -->
 <script>
-import AppHeader from './components/Header.vue';
+import MainPage from './components/MainPage.vue';
 
 export default {
   name: 'App',
   components: {
-    AppHeader
+    MainPage
   }
 }
 </script>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_1.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_1.png
new file mode 100644
index 0000000..6f3e15d
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_1.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_2.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_2.png
new file mode 100644
index 0000000..bf11200
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_2.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_3.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_3.png
new file mode 100644
index 0000000..6c0cae2
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_3.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_4.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_4.png
new file mode 100644
index 0000000..0021b67
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/boy_4.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_1.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_1.png
new file mode 100644
index 0000000..6d3f3fe
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_1.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_2.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_2.png
new file mode 100644
index 0000000..f1c2e81
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_2.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_3.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_3.png
new file mode 100644
index 0000000..0ae55f0
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_3.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_4.png b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_4.png
new file mode 100644
index 0000000..5af3461
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/default-avatar/girl_4.png differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu1.jpg b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu1.jpg
new file mode 100644
index 0000000..b49228f
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu1.jpg differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu2.jpg b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu2.jpg
new file mode 100644
index 0000000..ba2aaaf
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu2.jpg differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu3.jpg b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu3.jpg
new file mode 100644
index 0000000..326d0bd
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu3.jpg differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu4.jpg b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu4.jpg
new file mode 100644
index 0000000..ea156e5
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu4.jpg differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu5.jpg b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu5.jpg
new file mode 100644
index 0000000..c80bcb4
Binary files /dev/null and b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/assets/whu5.jpg differ
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
index 1d51210..0980084 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Header.vue
@@ -20,7 +20,14 @@
       </router-link>
     </div>
 
-    <!-- 导航部分：登录/注册按钮,后续可添加更多功能 -->
+    <!-- 导航按钮部分 -->
+    <div class="nav-buttons">
+      <router-link to="/" class="nav-btn">首页</router-link>
+      <a href="https://www.whu.edu.cn/" target="_blank" class="nav-btn">校内网址</a>
+      <router-link to="/feedback" class="nav-btn">反馈站</router-link>
+    </div>
+
+    <!-- 登录/注册按钮 -->
     <div class="nav-section">
       <button @click="showModal" class="login-btn">登录/注册</button>
     </div>
@@ -61,17 +68,22 @@ export default {
 /* 头部容器样式 */
 .header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 15px;
+  align-items: center; /* 垂直居中 */
+  padding: 0 15px; /* 水平内边距 */
   border-bottom: 2px solid #e0e0e0;
   background: white;
+  margin: 5px; 
+  position: fixed; /* 固定在页面顶部 */
+  top: 2px; 
+  width: 98%; /* 占满页面宽度 */
+  z-index: 1000; /* 确保在其他内容之上 */
 }
 
 /* Logo 区域样式 */
 .logo-section {
   display: flex;
   align-items: center;
+  margin-right: 20px; /* 与导航按钮之间的间距 */
 }
 
 /* Logo 链接样式 */
@@ -125,7 +137,36 @@ export default {
   color: #666;
 }
 
-/* 登录按钮样式 */
+/* 导航按钮部分样式 */
+.nav-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0; /* 无间隙排列 */
+  margin-left: 20px; /* 确保与 Logo 有一定间距 */
+}
+
+/* 导航按钮样式 */
+.nav-btn {
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #333;
+  font-size: 15px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.nav-btn:hover {
+  background-color: #f0f0f0;
+  color: #6FBD87;
+}
+
+/* 登录按钮部分样式 */
+.nav-section {
+  margin-left: auto; /* 将登录按钮推到最右侧 */
+}
+
 .login-btn {
   height: 30px;
   padding: 0px 10px;
@@ -137,7 +178,6 @@ export default {
   transition: color 0.3s;
 }
 
-/* 登录按钮悬停效果 */
 .login-btn:hover {
   color: #6FBD87;
   background: #f0f0f0;
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/MainPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/MainPage.vue
new file mode 100644
index 0000000..af65cb5
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/MainPage.vue
@@ -0,0 +1,63 @@
+<template>
+    <div>
+        <Header />
+        <div class="top-container">
+            <NoticeBoard />
+            <WelcomeCalendar />
+        </div>
+         
+        <div class="post-container">
+            <PostPage />
+        </div>
+        <!-- <UserPage />  -->
+        
+        <!-- <PostDetail /> -->
+        
+    </div>
+</template>
+
+<script>
+import Header from './Header.vue';
+import NoticeBoard from './NoticeBoard.vue';
+import WelcomeCalendar from './WelcomeCalendar.vue';
+import PostPage from './PostPage.vue';
+//import UserPage from './UserPage.vue';
+// import PostDetail from './PostDetail.vue';
+export default {
+    components: {
+        Header,
+        NoticeBoard,
+        WelcomeCalendar,
+        PostPage,
+        //UserPage,
+        // PostDetail
+    }
+};
+</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; /* 包括内边距在宽高内 */
+}
+.top-container > * {
+    flex-shrink: 0;
+}
+.post-container {
+    display: flex;
+    justify-content: center; /* 居中排列 */
+    align-items: center; /* 顶部对齐 */
+    padding: 10px;
+    width: 820px; /* 固定宽度 */
+    margin: 20px auto; /* 上边距20px，左右居中 */
+    box-sizing: border-box; /* 包括内边距在宽高内 */
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
new file mode 100644
index 0000000..2c83b86
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
@@ -0,0 +1,182 @@
+<template>
+    <div class="notice-board">
+        <h2 class="notice-title">公告栏</h2>
+        <div class="notice-list">
+            <!-- 左箭头按钮 -->
+            <button class="arrow-button left-arrow" @click="prevImage">←</button>
+            <div class="notice-item">
+                <img
+                    :src="images[currentIndex].src"
+                    :alt="images[currentIndex].alt"
+                    class="notice-image"
+                />
+            </div>
+            <!-- 右箭头按钮 -->
+            <button class="arrow-button right-arrow" @click="nextImage">→</button>
+        </div>
+        <!-- 圆形按钮 -->
+        <div class="indicator-container">
+            <button
+                v-for="(image, index) in images"
+                :key="index"
+                class="indicator-button"
+                :class="{ active: currentIndex === index }"
+                @click="goToImage(index)"
+            ></button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export default {
+    name: 'NoticeBoard',
+    setup() {
+        const images = ref([
+            { src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
+            { src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
+            { src: require('@/assets/whu3.jpg'), alt: '公告图片3' },
+            { src: require('@/assets/whu4.jpg'), alt: '公告图片4' },
+            { src: require('@/assets/whu5.jpg'), alt: '公告图片5' },       
+        ]);
+
+        const currentIndex = ref(0);
+
+        // 切换到下一张图片
+        const nextImage = () => {
+            currentIndex.value = (currentIndex.value + 1) % images.value.length;
+        };
+
+        // 切换到上一张图片
+        const prevImage = () => {
+            currentIndex.value =
+                (currentIndex.value - 1 + images.value.length) % images.value.length;
+        };
+
+        // 跳转到指定图片
+        const goToImage = (index) => {
+            currentIndex.value = index;
+        };
+
+        // 定时器
+        let interval = null;
+
+        onMounted(() => {
+            // 初始化定时器
+            interval = setInterval(nextImage, 5000);
+        });
+
+        onUnmounted(() => {
+            // 清除定时器
+            clearInterval(interval);
+        });
+
+        return {
+            images,
+            currentIndex,
+            nextImage,
+            prevImage,
+            goToImage,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.notice-board {
+    position: relative;
+    background-color: #5aa76f;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* 顶部对齐 */
+    width: 500px; /* 固定宽度 */
+    height: 350px; /* 固定高度 */
+    overflow: hidden; /* 防止图片溢出 */
+    padding: 10px; /* 内边距 */
+    box-sizing: border-box; /* 包括内边距在宽高内 */
+}
+
+.notice-title {
+    font-size: 24px;
+    color: white;
+    text-align: center;
+    margin: 0; /* 去掉默认外边距 */
+    padding-bottom: 10px; /* 与图片保持间距 */
+}
+
+.notice-list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: calc(100% - 60px); /* 除去标题和指示器的高度 */
+}
+
+.notice-item {
+    text-align: center;
+    width: 100%;
+    height: 100%;
+}
+
+.notice-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* 让图片适应公告栏 */
+    border-radius: 8px;
+}
+
+.arrow-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(255, 255, 255, 0.7);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    cursor: pointer;
+    z-index: 10;
+}
+
+.left-arrow {
+    left: 10px; /* 左侧按钮距离公告栏左边缘 10px */
+}
+
+.right-arrow {
+    right: 10px; /* 右侧按钮距离公告栏右边缘 10px */
+}
+
+.arrow-button:hover {
+    background-color: rgba(255, 255, 255, 1);
+}
+
+.indicator-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+    gap: 8px; /* 按钮之间的间距 */
+}
+
+.indicator-button {
+    width: 12px;
+    height: 12px;
+    border: none;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.indicator-button.active {
+    background-color: rgba(255, 255, 255, 1); /* 高亮当前按钮 */
+}
+
+.indicator-button:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostDetail.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostDetail.vue
new file mode 100644
index 0000000..4ffe0a7
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostDetail.vue
@@ -0,0 +1,377 @@
+<template>
+    <div class="post-detail-container">
+        <!-- 作者信息栏 -->
+        <div class="author-info">
+            <img :src="author.avatar" alt="头像" class="author-avatar" />
+            <div class="author-details">
+                <h3 class="author-name">{{ author.name }}</h3>
+                <p class="author-stats">粉丝数：{{ author.followers }}</p>
+                <button @click="toggleFollow" class="follow-button">
+                    {{ isFollowing ? '取消关注' : '关注' }}
+                </button>
+            </div>
+        </div>
+
+        <!-- 帖子内容 -->
+        <div class="post-content">
+            <img :src="author.avatar" alt="作者头像" class="post-author-avatar" />
+            <h1 class="post-title">{{ postTitle }}</h1>
+            <p class="post-body">{{ postContent }}</p>
+            <div class="post-stats">
+                <span> 热度 {{ postStats.likes }}</span>
+                <span> 点赞 {{ postStats.favorites }}</span>
+                <span> 评论 {{ postStats.comments }}</span>
+            </div>
+            <div class="post-time">
+                发布时间：{{ postTime }}
+            </div>
+        </div>
+
+        <!-- 评论区 -->
+        <div class="comments-section">
+            <h2 class="comments-title">评论</h2>
+            <ul class="comments-list">
+                <li v-for="(comment, index) in comments" :key="index" class="comment-item">
+                    <img :src="comment.avatar" alt="评论者头像" class="comment-avatar" />
+                    <div class="comment-content">
+                        <p class="comment-name">{{ comment.name }}</p> <!-- 评论者名字 -->
+                        <p class="comment-text">{{ comment.text }}</p>
+                        <div class="comment-meta">
+                            <span class="comment-time">{{ comment.time }}</span>
+                            <span class="comment-likes">赞 {{ comment.likes }}</span>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+        <!-- 发送评论 -->
+        <div class="comment-box">
+            <textarea
+                v-model="newComment"
+                placeholder="写下你的评论..."
+                class="comment-input"
+            ></textarea>
+            <button @click="sendComment" class="send-button">发送</button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default {
+    name: 'PostDetail',
+    setup() {
+        const route = useRoute();
+        const postId = ref(route.params.id);
+        const postTitle = ref('');
+        const postContent = ref('');
+        const newComment = ref('');
+
+        // 作者信息
+        const author = ref({
+            avatar: require('@/assets/default-avatar/boy_4.png'),
+            name: '珈人1号',
+            followers: 1234,
+        });
+
+        // 帖子统计信息
+        const postStats = ref({
+            likes: 1200,
+            favorites: 300,
+            comments: 45,
+        });
+
+        // 发布时间
+        const postTime = ref('2025年4月20日 14:30');
+
+        // 评论数据
+        const comments = ref([
+            {
+                avatar: require('@/assets/default-avatar/girl_1.png'),
+                name: '评论者1', // 新增评论者名字
+                text: '这是第一条评论。',
+                time: '2025年4月20日 15:00',
+                likes: 10,
+            },
+            {
+                avatar: require('@/assets/default-avatar/boy_2.png'),
+                name: '评论者2', // 新增评论者名字
+                text: '这是第二条评论。',
+                time: '2025年4月20日 15:30',
+                likes: 5,
+            },
+        ]);
+
+        const isFollowing = ref(false);
+
+        const toggleFollow = () => {
+            isFollowing.value = !isFollowing.value;
+        };
+
+        const sendComment = () => {
+            if (newComment.value.trim()) {
+                comments.value.push({
+                    avatar: require('@/assets/default-avatar/boy_1.png'),
+                    name: '新评论者', // 评论者名字
+                    text: newComment.value,
+                    time: new Date().toLocaleString(),
+                    likes: 0,
+                });
+                newComment.value = '';
+            }
+        };
+
+        onMounted(() => {
+            postTitle.value = `帖子标题 ${postId.value}`;
+            postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
+        });
+
+        return {
+            postTitle,
+            postContent,
+            comments,
+            newComment,
+            sendComment,
+            author,
+            postStats,
+            postTime,
+            isFollowing,
+            toggleFollow,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.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 */
+    gap: 20px;
+    padding: 20px;
+    box-sizing: border-box;
+    max-width: 1200px; /* 设置页面最大宽度 */
+    margin: 0 auto; /* 居中页面并添加左右留白 */
+}
+
+.author-info {
+    grid-area: author-info;
+    display: flex;
+    flex-direction: row; /* 水平排列头像和详情 */
+    align-items: flex-start;
+    background-color: #f5f5f5;
+    padding: 20px;
+    border: 1px solid #ccc;
+    max-height: 200px;
+    border-radius: 8px;
+}
+
+.author-avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 15px; /* 与作者详情的间距 */
+}
+
+.author-details {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.author-name {
+    font-size: 18px;
+    margin: 0;
+    }
+
+.author-stats {
+    font-size: 14px;
+    color: #666;
+    margin: 5px 0;
+    text-align: left; /* 设置居左 */
+}
+
+.follow-button {
+    margin-top: 10px;
+    padding: 8px 16px;
+    background-color: #5aa76f;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.follow-button:hover {
+    background-color: #4a8a5a;
+}
+
+.post-content {
+    grid-area: post-content;
+    background-color: #ffffff;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    position: relative; /* 为绝对定位的元素提供参考 */
+}
+
+.post-author-avatar {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #ccc;
+}
+
+.post-title {
+    font-size: 24px;
+    margin-bottom: 10px;
+    text-align: left; /* 设置居左 */
+}
+
+.post-body {
+    font-size: 16px;
+    line-height: 1.5;
+    margin-bottom: 20px;
+}
+
+.post-stats {
+    display: flex;
+    gap: 15px; /* 图标之间的间距 */
+    font-size: 14px;
+    color: #666;
+    margin-top: 20px;
+    text-align: left; /* 设置居左 */
+}
+
+.post-time {
+    position: absolute;
+    bottom: 20px; /* 距离底部 20px */
+    right: 20px; /* 距离右侧 20px */
+    font-size: 12px;
+    color: #999;
+}
+
+.comments-section {
+    grid-area: comments-section;
+    background-color: #ffffff;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+.comments-title {
+    font-size: 20px;
+    margin-bottom: 10px;
+    text-align: left; /* 设置居左 */
+    }
+
+.comments-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.comment-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+    font-size: 14px;
+    position: relative;
+}
+
+.comment-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-right: 10px;
+}
+
+.comment-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.comment-name {
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.comment-text {
+    margin: 0;
+    font-size: 14px;
+    color: #333;
+}
+
+.comment-meta {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+    font-size: 12px;
+    color: #999;
+}
+
+.comment-time {
+    font-size: 12px;
+    color: #666;
+}
+
+.comment-likes {
+    font-size: 12px;
+    color: #666;
+}
+
+.comment-box {
+    grid-area: comment-box;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.comment-input {
+    width: 100%;
+    height: 80px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    resize: none;
+    font-size: 14px;
+}
+
+.send-button {
+    align-self: flex-end;
+    padding: 10px 20px;
+    background-color: #5aa76f;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.send-button:hover {
+    background-color: #4a8a5a;
+}
+
+.comment-name {
+    
+    font-size: 14px;
+    font-weight: bold;
+    margin: 0 0 5px 0; /* 与评论内容分隔 */
+    text-align: left; /* 设置居左 */
+    color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
new file mode 100644
index 0000000..e740454
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
@@ -0,0 +1,222 @@
+<template>
+    <div class="post-page-container">
+        <!-- 左侧分类按钮 -->
+        <div class="category-buttons">
+            <button
+                v-for="(category, index) in categories"
+                :key="index"
+                class="category-button"
+                :class="{ active: selectedCategory === category }"
+                @click="selectCategory(category)"
+            >
+                {{ category }}
+            </button>
+        </div>
+
+        <!-- 右侧帖子列表 -->
+        <div class="post-list">
+            <div
+                v-for="(post, index) in filteredPosts"
+                :key="index"
+                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>
+                </div>
+                <p class="post-summary">{{ post.summary }}</p>
+                <div class="post-stats">
+                    <span>热度 {{ post.likes }}</span>
+                    <span>评论 {{ post.comments }}</span>
+                    <span>赞 {{ post.favorites }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    name: 'PostPage',
+    setup() {
+        const categories = ref(['全部', '学习', '娱乐', '二手交易']);
+        const selectedCategory = ref('全部');
+        const posts = ref([
+            {
+                id: 1,
+                category: '学习',
+                title: '如何高效学习？',
+                summary: '分享一些学习技巧...',
+                avatar: require('@/assets/default-avatar/boy_1.png'),
+                likes: 1200,
+                comments: 10,
+                favorites: 100,
+            },
+            {
+                id: 2,
+                category: '娱乐',
+                title: '最近的热门电影推荐',
+                summary: '看看这些电影吧...',
+                avatar: require('@/assets/default-avatar/girl_1.png'),
+                likes: 800,
+                comments: 5,
+                favorites: 50,
+            },
+            {
+                id: 3,
+                category: '二手交易',
+                title: '出售二手书籍',
+                summary: '价格优惠，欢迎咨询...',
+                avatar: require('@/assets/default-avatar/boy_2.png'),
+                likes: 300,
+                comments: 2,
+                favorites: 20,
+            },
+            {
+                id: 4,
+                category: '学习',
+                title: '考研经验分享',
+                summary: '考研路上的一些心得...',
+                avatar: require('@/assets/default-avatar/girl_3.png'),
+                likes: 1500,
+                comments: 20,
+                favorites: 200,
+            },
+        ]);
+
+        const filteredPosts = ref(posts.value);
+
+        const selectCategory = (category) => {
+            selectedCategory.value = category;
+            filteredPosts.value =
+                category === '全部'
+                    ? posts.value
+                    : posts.value.filter((post) => post.category === category);
+        };
+
+        const goToPostDetail = (postId) => {
+            const url = `/post/${postId}`;
+            console.log('Opening URL:', url);
+            window.open(`/post/${postId}`, '_blank');
+        };
+
+        return {
+            categories,
+            selectedCategory,
+            filteredPosts,
+            selectCategory,
+            goToPostDetail,
+        };
+    },
+};
+</script>
+
+<style scoped>
+/* 页面整体布局 */
+.post-page-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 20px;
+    box-sizing: border-box;
+    gap: 20px;
+}
+
+/* 左侧分类按钮样式 */
+.category-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    width: 200px;
+}
+
+.category-button {
+    padding: 10px 20px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-bottom: none;
+    background-color: #f9f9f9;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.category-button:last-child {
+    border-bottom: 1px solid #ccc;
+}
+
+.category-button.active {
+    background-color: #5aa76f;
+    color: white;
+    border-color: #5aa76f;
+}
+
+.category-button:hover {
+    background-color: #e0e0e0;
+}
+
+/* 右侧帖子列表样式 */
+.post-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    flex: 1;
+}
+
+.post-item {
+    position: relative; /* 设置为相对定位 */
+    width: 300px;
+    height: 150px;
+    padding: 15px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: box-shadow 0.3s;
+}
+
+.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;
+}
+
+.post-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%; /* 设置为圆形 */
+    object-fit: cover; /* 确保图片按比例填充 */
+}
+
+.post-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0;
+}
+
+/* 帖子摘要样式 */
+.post-summary {
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+/* 帖子统计信息样式 */
+.post-stats {
+    display: flex;
+    gap: 15px; /* 图标之间的间距 */
+    font-size: 12px;
+    color: #999;
+    position: absolute; /* 绝对定位 */
+    bottom: 10px; /* 距离卡片底部 10px */
+    left: 15px; /* 距离卡片左侧 15px */
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/UserPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/UserPage.vue
new file mode 100644
index 0000000..f63c8be
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/UserPage.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="user-page-container">
+    <!-- 左侧内容 -->
+    <div class="left-container">
+      <!-- 用户信息卡片 -->
+      <div class="user-info-card">
+        <div class="user-avatar">
+          <img src="@/assets/default-avatar/boy_4.png" alt="用户头像" />
+        </div>
+        <div class="user-details">
+          <h2 class="username">cp3</h2>
+          <p class="user-status">ONLINE</p>
+          <p class="user-motto">不经巨大的困难，不会有伟大的事业</p>
+        </div>
+      </div>
+
+      <!-- 帖子列表 -->
+      <div class="user-posts">
+        <h3>你的帖子</h3>
+        <div class="post-item" v-for="(post, index) in posts" :key="index">
+          <h4 class="post-title">{{ post.title }}</h4>
+          <p class="post-summary">{{ post.summary }}</p>
+          <div class="post-stats">
+            <span>热度 {{ post.likes }}</span>
+            <span>评论 {{ post.comments }}</span>
+            <span>赞 {{ post.favorites }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右侧内容 -->
+    <div class="right-container">
+      <!-- 个人统计信息卡片 -->
+      <div class="user-stats-card">
+        <h3>cp3 个人信息</h3>
+        <div class="stats">
+          <div class="stat-item">
+            <span>发帖数</span>
+            <span>5</span>
+          </div>
+          <div class="stat-item">
+            <span>粉丝</span>
+            <span>123</span>
+          </div>
+          <div class="stat-item">
+            <span>你关注的人数</span>
+            <span>456K</span>
+          </div>
+          <div class="stat-item">
+            <span>获赞数</span>
+            <span>789</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'UserPage',
+  setup() {
+    const posts = ref([
+      {
+        title: '雷霆连续两场或20分钟逆转什么水平',
+        summary: '今天保罗带领雷霆完成逆转',
+        likes: 1200,
+        comments: 10,
+        favorites: 100,
+      },
+      {
+        title: '一个普通人需要多大努力才能考上985',
+        summary: 'mmmmmmmm',
+        likes: 2200,
+        comments: 20,
+        favorites: 200,
+      },
+    ]);
+
+    return {
+      posts,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* 页面整体布局 */
+.user-page-container {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  padding: 20px;
+  background-color: #f5f5f5;
+  max-width: 1200px; /* 设置最大宽度 */
+  margin: 0 auto; /* 居中并在两边留白 */
+  box-sizing: border-box;
+}
+
+/* 左侧内容 */
+.left-container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  flex: 3;
+}
+
+/* 右侧内容 */
+.right-container {
+  flex: 1;
+}
+
+/* 用户信息卡片样式 */
+.user-info-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.user-avatar img {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
+
+.user-details {
+  display: flex;
+  flex-direction: column;
+}
+
+.username {
+  font-size: 24px;
+  margin: 0;
+}
+
+.user-status {
+  color: green;
+  font-weight: bold;
+}
+
+.user-motto {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 个人统计信息卡片样式 */
+.user-stats-card {
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+}
+
+/* 帖子列表样式 */
+.user-posts {
+  padding: 20px;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.post-item {
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
+}
+
+.post-item:last-child {
+  border-bottom: none;
+}
+
+.post-title {
+  font-size: 18px;
+  margin: 0;
+}
+
+.post-summary {
+  color: #666;
+  font-size: 14px;
+}
+
+.post-stats {
+  display: flex;
+  gap: 10px;
+  font-size: 12px;
+  color: #999;
+}
+</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
new file mode 100644
index 0000000..8ce04cd
--- /dev/null
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
@@ -0,0 +1,163 @@
+<template>
+    <div class="welcome-container">
+        <!-- 上部分：欢迎文字 -->
+        <div class="welcome-header">
+            欢迎来到珞珈岛，珈人
+        </div>
+
+        <!-- 中间部分：月份、日期、星期 -->
+        <div class="welcome-body">
+            <div class="month-column">
+                <span v-for="(char, index) in currentMonthText" :key="index">{{ char }}</span>
+            </div>
+            <div class="day-row">
+                <span>{{ currentDay }}</span>
+            </div>
+            <div class="weekday-column">
+                <span v-for="(char, index) in currentWeekday" :key="index">{{ char }}</span>
+            </div>
+        </div>
+
+        <!-- 下部分：打卡按钮 -->
+        <div class="welcome-footer">
+            <button
+                class="check-in-button"
+                :class="{ checked: isCheckedIn }"
+                @click="checkIn"
+            >
+                {{ isCheckedIn ? '今日已打卡' : '打卡' }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+    name: 'WelcomeCalendar',
+    setup() {
+        const today = new Date();
+
+        // 当前日期信息
+        const currentMonthText = ref(['一', '月']); // 默认值
+        const currentDay = ref(today.getDate()); // 当前日期号
+        const currentWeekday = ref('星','期','日'); // 当前星期完整文字
+
+        // 打卡状态
+        const isCheckedIn = ref(false);
+
+        // 初始化日期信息
+        const initializeDate = () => {
+            const months = [
+                '一月', '二月', '三月', '四月', '五月', '六月',
+                '七月', '八月', '九月', '十月', '十一月', '十二月',
+            ];
+            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+            currentMonthText.value = months[today.getMonth()].split('');
+            currentDay.value = today.getDate();
+            currentWeekday.value = weekdays[today.getDay()].split('');
+        };
+
+        // 打卡功能
+        const checkIn = () => {
+            isCheckedIn.value = true;
+        };
+
+        // 初始化
+        initializeDate();
+
+        return {
+            currentMonthText,
+            currentDay,
+            currentWeekday,
+            isCheckedIn,
+            checkIn,
+        };
+    },
+};
+</script>
+
+<style scoped>
+.welcome-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: 300px;
+    height: 350px;
+    margin: 0 auto;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    overflow: hidden;
+    font-family: Arial, sans-serif;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.welcome-header {
+    font-size: 20px;
+    font-weight: bold;
+    color: #5aa76f;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.welcome-body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.month-column,
+.weekday-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    gap: 2px; /* 紧凑排列 */
+}
+
+.day-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 180px; /* 日期号字体放大 */
+    font-weight: bold;
+    color: #5aa76f;
+    flex: 1; /* 占据中间空间 */
+    text-align: center;
+}
+
+.welcome-footer {
+    width: 100%;
+    text-align: center;
+}
+
+.check-in-button {
+    width: 100px;
+    padding: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: white;
+    background-color: #5aa76f;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.check-in-button.checked {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+
+.check-in-button:hover:not(.checked) {
+    background-color: #4a8a5a;
+}
+</style>
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/main.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/main.js
index 01433bc..e3a256f 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/main.js
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/main.js
@@ -1,4 +1,8 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router'; // 确保引入了 router
 
-createApp(App).mount('#app')
+const app = createApp(App);
+
+app.use(router); // 注册 vue-router
+app.mount('#app');
\ No newline at end of file
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
index 6dff987..b999b47 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/router/index.js
@@ -1,13 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import Home from '../views/Home.vue';
 import Login from '../components/Login.vue';
 import Register from '../components/Register.vue';
+import PostDetail from '@/components/PostDetail.vue';
+import MainPage from '@/components/MainPage.vue';
+
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'MainPage',
+    component: MainPage
   },
   {
     path: '/user/login',
@@ -18,11 +20,17 @@ const routes = [
     path: '/user/register',
     name: 'Register',
     component: Register
-  }
+  },
+  { 
+    path: '/post/:id', 
+    name: 'PostDetail', 
+    component: PostDetail 
+  },
+
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(/*process.env.BASE_URL*/),
   routes
 });
 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/Home.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/HomePage.vue
similarity index 100%
rename from 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/Home.vue
rename to 珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/HomePage.vue