添加了postsPanel作为通用帖子显示板，增加了对jest测试的配置，添加了论坛主页，设定了论坛全局框架，设定了论坛基础主题色及主题切换、字号切换逻辑
Change-Id: I9fad0cf577088adb00c9850d405ccd23e6072413
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>
);