diff --git a/src/views/forum/index.module.css b/src/views/forum/index.module.css
index 53cf91c..5cd586a 100644
--- a/src/views/forum/index.module.css
+++ b/src/views/forum/index.module.css
@@ -1,12 +1,80 @@
-.selfStatus{
-    width:25%;
-    height:45%;
-    position: absolute;
-    right:0%;
-    top:0%;
-    
+/* index.module.css */
+.container {
+    width: 100%;
+    height: 100%;
+    position: relative; /* 新增 */
 }
-.container{
+.up{
+    width: 100%;
+    height: 50%;
+    position: relative; /* 新增 */
+    top: 0%;
+    display: flex;
+    flex-direction: row;
+    border-radius: 8px;
+}
+
+.down{
+    height:48%;
+    width:100%;
+    bottom:0%;
+    display:flex;
+    flex-direction:row;
+}
+
+
+.upright{
+    width:25%;
+}
+.upleft{
+    height:100%;
+    width:75%;
+    margin:5px;
+    display:flex;
+    flex-direction:column;
+}
+
+.upcontent{
+    display:flex;
+    flex-direction: row;
     width:100%;
     height:100%;
+}
+
+.advertisements {
+    width:40%;
+    margin: 5px;
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.adImage {
+    width: 100%;
+    height: 99%;
+    object-fit: fill;
+    border-radius: 8px;
+}
+
+
+.hotPosts{
+    width:60%;
+    margin:5px;
+}
+
+
+.selfStatus {
+    width: 100%;
+    height: 100%;
+    position: relative; /* 改为绝对定位 */
+    
+    border-radius: 8px;
+}
+
+.newPost,
+.likePost,
+.forsalePost {
+
+    flex:1;
+    margin:5px;
+    border-radius: 8px;
 }
\ No newline at end of file
diff --git a/src/views/forum/index.tsx b/src/views/forum/index.tsx
index dbceffd..345f880 100644
--- a/src/views/forum/index.tsx
+++ b/src/views/forum/index.tsx
@@ -3,14 +3,65 @@
 import SelfStatus from "@/components/selfStatus/selfStatus";
 
 import style from "./index.module.css";
+import Navbar from "@/components/navbar/navbar";
+import PostsPanel from "@/components/postsPanel/postsPanel";
+import { hotPosts } from "@/api/post";
+import { Carousel } from 'antd';
+import ad1 from '&/assets/ad1.png'
+import ad2 from '&/assets/ad2.png'
+import { useEffect } from "react";
 
 export default function Forum() {
+    useEffect(() => {
+        // 禁止滚动
+        document.body.style.overflow = 'hidden';
 
-
+        // 组件卸载时恢复滚动
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+    
+    
     return (
         <div className={style.container}>
-            <div className={style.selfStatus}>
-                <SelfStatus />
+            <div className={style.up}>
+               <div className={style.upleft}>
+                <div className={style.navbar}>
+                    <Navbar/>
+                </div>
+                <div className={style.upcontent}>
+                    <div className={style.advertisements}>
+                        <Carousel arrows infinite={false}>
+                            <div>
+                                <img src={ad1} alt="广告1" className={style.adImage} />
+                            </div>
+                            <div>
+                                <img src={ad2} alt="广告2" className={style.adImage} />
+                            </div>
+                        </Carousel>
+                    </div>
+                    <div className={style.hotPosts}>
+                        <PostsPanel name='热门种子' url={hotPosts} limit={5}/>
+                    </div>
+                </div>
+               </div>
+                <div className={style.upright}>
+                    <div className={style.selfStatus}>
+                        <SelfStatus />
+                    </div>
+                </div> 
+            </div>
+            <div className={style.down}>
+                <div className={style.newPost}>
+                    <PostsPanel name='最新发布' url={hotPosts} limit={5}/>
+                </div>
+                <div className={style.likePost}>
+                    <PostsPanel name='猜你喜欢' url={hotPosts} limit={5}/>
+                </div>
+                <div className={style.forsalePost}>
+                    <PostsPanel name='促销种子' url={hotPosts} limit={5}/>
+                </div>
             </div>
         </div>
     );