diff --git a/src/app/reward/page.tsx b/src/app/reward/page.tsx
new file mode 100644
index 0000000..59abf97
--- /dev/null
+++ b/src/app/reward/page.tsx
@@ -0,0 +1,263 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from "react";
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+import { Card } from 'primereact/card';
+import { Image } from 'primereact/image';
+// 页面跳转
+import { useRouter } from 'next/navigation';
+// 分页
+import { Paginator, type PaginatorPageChangeEvent } from 'primereact/paginator';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 发布帖子
+import { Dialog } from 'primereact/dialog';
+import { FileUpload } from 'primereact/fileupload';
+import { InputTextarea } from 'primereact/inputtextarea';
+// 接口传输
+import axios from 'axios';
+// 防抖函数
+import { debounce } from 'lodash';
+import { TabView, TabPanel } from 'primereact/tabview';
+// 样式
+import './reward.scss';
+
+// 悬赏列表数据
+interface Reward {
+    rewardId: number;
+    userId: number;
+    rewardPicture: string;
+    rewardName: string;
+    createAt: string;
+    rewardDescription: string;
+    price: number;
+}
+interface RewardList {
+    total: number; // 总记录数
+    records: Reward[];
+}
+
+
+// 社区详情页面
+export default function RewardDetailPage() {
+    // 页面跳转
+    const router = useRouter();
+    // 帖子列表数据
+    const [rewards, setRewards] = useState<Reward[]>([]);
+    const [totalRewards, setTotalRewards] = useState<number>(0);
+    const [activeOption, setActiveOption] = useState<number>(0); // 0表示"赏金最高"，1表示"最新发布"
+    const options = ["赏金最高", "最新发布"];
+    // 搜索框
+    const [searchValue, setSearchValue] = useState("");
+    const debouncedSearch = useRef(
+        debounce((value: string) => {
+            setSearchValue(value);
+        }, 600)
+    ).current;
+    // 消息提醒
+    const toast = useRef<Toast>(null);
+    // 分页
+    const [first, setFirst] = useState(0);
+    const [rows, setRows] = useState(5);
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    // 获取悬赏列表
+    useEffect(() => {
+        fetchRewards();
+    }, [first, rows, searchValue, activeOption]);
+
+    const fetchRewards = async () => {
+        try {
+            const pageNumber = first / rows + 1;
+            console.log("当前页" + pageNumber + "size" + rows + "搜索内容" + searchValue + "排序方式" + activeOption);
+            const response = await axios.get<RewardList>(
+                process.env.PUBLIC_URL + `/reward`, {
+                params: { pageNumber, rows, searchValue, option: options[activeOption] }
+            }
+            );
+            console.log('获取悬赏列表:', response.data.records);
+            setRewards(response.data.records);
+            setTotalRewards(response.data.total); // 假设返回的总数
+        } catch (err) {
+            console.error('获取悬赏失败', err);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '获取悬赏失败' });
+        }
+    };
+
+    // 发布悬赏弹窗
+    const [visible, setVisible] = useState(false);
+    const [formData, setFormData] = useState({
+        rewardName: '',
+        rewardDescription: '',
+        rewardPicture: '',
+        price: ''
+    });
+    // 图片上传消息通知
+    const onUpload = () => {
+        toast.current?.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    // 发布悬赏接口
+    const handleSubmit = async () => {
+        try {
+            const currentDate = new Date().toISOString();
+            const postData = {
+                userId: 22301145, // 记得用户登录状态获取
+                rewardPicture: formData.rewardPicture,
+                rewardName: formData.rewardName,
+                rewardDescription: formData.rewardDescription,
+                createdAt: currentDate,
+                price: formData.price
+            };
+            // 发送POST请求
+            const response = await axios.post(process.env.PUBLIC_URL + '/reward', postData);
+
+            if (response.status === 200) {
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: '悬赏发布成功' });
+                // 发帖成功
+                setVisible(false);
+                // 重置表单
+                setFormData({
+                    rewardName: '',
+                    rewardDescription: '',
+                    rewardPicture: '',
+                    price: ''
+                });
+                // 可以刷新帖子列表
+                fetchRewards();
+            }
+        } catch (error) {
+            console.error('发布悬赏失败:', error);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '悬赏发布失败' });
+        }
+    };
+    return (
+        <div className="reward">
+            <Toast ref={toast}></Toast>
+            {/* 悬赏标题和介绍 */}
+            <div className="reward-header">
+                <div className="title-section">
+                    <h1>悬赏排行</h1>
+                </div>
+                <div className="input">
+                    <div className="searchBar">
+                        <i className="pi pi-search" />
+                        <InputText type="search" className="search-helper" placeholder="搜索你的目标悬赏" onChange={(e) => { const target = e.target as HTMLInputElement; debouncedSearch(target.value); }} />
+                    </div>
+                    <div className="reward-buttons">
+                        <Button label="我的悬赏" onClick={() => router.push(`/user/悬赏`)} />
+                        <Button label="发布悬赏" onClick={() => setVisible(true)} />
+                    </div>
+                </div>
+            </div>
+
+            {/* 悬赏列表 */}
+            <TabView activeIndex={activeOption} onTabChange={(e) => setActiveOption(e.index)}>
+                <TabPanel header={options[0]} >
+                    <div className="rewards-list">
+                        {rewards.map((reward) => (
+                            <Card key={reward.rewardId} className="rewards-list-card" onClick={() => router.push(`/reward/reward-detail/${reward.rewardId}`)}>
+                                <Image alt="avatar" src={process.env.NEXT_PUBLIC_NGINX_URL + "rewards/" + reward.rewardPicture} className="reward-avatar" width="250" height="140" />
+                                <div className="reward-header">
+                                    <div className="reward-content">
+                                        <h3>{reward.rewardName}</h3>
+                                    </div>
+                                    <div className="reward-states">
+                                        <span className="price">$: {reward.price}</span>
+                                        <Button label="提交悬赏" />
+                                    </div>
+                                </div>
+                            </Card>
+                        ))}
+                        {totalRewards > 5 && <Paginator className="Paginator" first={first} rows={rows} totalRecords={totalRewards} rowsPerPageOptions={[5, 10]} onPageChange={onPageChange} />}
+                    </div>
+                </TabPanel>
+                <TabPanel header={options[1]}>
+                    <div className="rewards-list">
+                        {rewards.map((reward) => (
+                            <Card key={reward.rewardId} className="rewards-list-card" onClick={() => router.push(`/reward/reward-detail/${reward.rewardId}`)}>
+                                <Image alt="avatar" src={process.env.NEXT_PUBLIC_NGINX_URL + reward.rewardPicture} className="reward-avatar" width="250" height="140" />
+                                <div className="reward-header">
+                                    <div className="reward-content">
+                                        <h3>{reward.rewardName}</h3>
+                                    </div>
+                                    <div className="reward-states">
+                                        <span className="price">$: {reward.price}</span>
+                                        <Button label="提交悬赏" />
+                                    </div>
+                                </div>
+                            </Card>
+                        ))}
+                        {totalRewards > 5 && <Paginator className="Paginator" first={first} rows={rows} totalRecords={totalRewards} rowsPerPageOptions={[5, 10]} onPageChange={onPageChange} />}
+                    </div>
+                </TabPanel>
+            </TabView>
+            {/* 发布悬赏弹窗 */}
+            <Dialog
+                header="发布新悬赏"
+                visible={visible}
+                onHide={() => setVisible(false)}
+                className="publish-dialog"
+                modal
+                footer={
+                    <div className="dialog-footer">
+                        <Button label="发布" icon="pi pi-check" onClick={handleSubmit} autoFocus />
+                        <Button label="取消" icon="pi pi-times" onClick={() => setVisible(false)} className="p-button-text" />
+                    </div>
+                }
+            >
+                <div className="publish-form">
+                    <div className="form-field">
+                        <label htmlFor="title">标题</label>
+                        <InputText
+                            id="title"
+                            value={formData.rewardName}
+                            onChange={(e) => setFormData(prev => ({ ...prev, title: e.target.value }))}
+                            placeholder="请输入悬赏标题"
+                            className="w-full"
+                        />
+                    </div>
+
+                    <div className="form-field">
+                        <label htmlFor="content">内容</label>
+                        <InputTextarea
+                            id="content"
+                            value={formData.rewardDescription}
+                            onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
+                            rows={5}
+                            placeholder="请输入悬赏需求"
+                            className="w-full"
+                        />
+                    </div>
+                    <div className="form-field">
+                        <label htmlFor="price">赏金</label>
+                        <InputText
+                            id="price"
+                            value={formData.price}
+                            onChange={(e) => setFormData(prev => ({ ...prev, price: e.target.value }))}
+                            placeholder="请输入赏金金额"
+                            className="w-full"
+                        />
+                    </div>
+                    <div className="form-field">
+                        <label>封面图片</label>
+                        <FileUpload
+                            mode="basic"
+                            name="thread-image"
+                            url={process.env.PUBLIC_URL +"/file"} // 与后端交互的URL
+                            accept="image/*"
+                            maxFileSize={10000000000}
+                            chooseLabel="选择悬赏封面"
+                            className="w-full"
+                            onUpload={onUpload}
+                        />
+                    </div>
+                </div>
+            </Dialog>
+        </div>
+    );
+}
\ No newline at end of file
diff --git "a/src/app/reward/reward-detail/\133rewardId\135/page.tsx" "b/src/app/reward/reward-detail/\133rewardId\135/page.tsx"
new file mode 100644
index 0000000..fb8f8b1
--- /dev/null
+++ "b/src/app/reward/reward-detail/\133rewardId\135/page.tsx"
@@ -0,0 +1,364 @@
+'use client';
+
+import React, { useEffect, useState, useRef } from 'react';
+import { Image } from 'primereact/image';
+import { Avatar } from 'primereact/avatar';
+import { Button } from 'primereact/button';
+import { InputText } from "primereact/inputtext";
+// 页面跳转
+import { useParams } from 'next/navigation'
+// 接口传输
+import axios from 'axios';
+// 回复评论
+import { OverlayPanel } from 'primereact/overlaypanel';
+import { Sidebar } from 'primereact/sidebar';
+// 分页
+import { Paginator, type PaginatorPageChangeEvent } from 'primereact/paginator';
+// 消息提醒
+import { Toast } from 'primereact/toast';
+// 样式
+import './reward-detail.scss';
+
+
+// 评论信息
+interface Comment {
+    commentId: number;
+    userId: number | null;
+    replyId: number;
+    resourceId: number;
+    reawardId: number;
+    content: string;
+    createAt: string;
+}
+// 评论列表
+interface CommentList {
+    total: number;         // 评论总数
+    records: Comment[];      // 当前页评论数组
+}
+// 悬赏信息
+interface RewardInfo {
+    rewardId: number;
+    userId: number;
+    rewardPicture: string;
+    rewardName: string;
+    rewardDescription: string;
+    price: number;
+    createAt: string;
+    lastUpdateAt: string;
+    commentNumber: number;
+    communityId: number;
+}
+// 用户信息
+interface UserInfo {
+    userId: number;
+    username: string;
+    avatar: string;
+    signature: string;
+}
+// 新评论接口
+interface NewComment {
+    userId: number;
+    threadId: number;
+    resourceId: number;
+    rewardId: number;
+    replyId: number;
+    content: string;
+    createAt: string;
+}
+
+
+//帖子详情界面
+export default function RewardDetailPage() {
+    // 获取URL参数，页面跳转
+    const params = useParams<{ rewardId: string }>()
+    const rewardId = decodeURIComponent(params.rewardId); // 防止中文路径乱码
+    // 消息提醒
+    const toast = useRef<Toast>(null);
+    // 帖子信息
+    const [rewardInfo, setRewardInfo] = useState<RewardInfo | null>(null);
+    // 发帖人信息
+    const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+    // 评论人信息
+    const [commentUserInfos, setCommentUserInfos] = useState<Map<number, UserInfo>>(new Map());
+    //评论
+    const [comments, setComments] = useState<Comment[]>([]);
+    const [commentValue, setCommentValue] = useState<string>('');
+    const [totalComments, setTotalComments] = useState<number>(0);
+    // 回复
+    const [replyValue, setReplyValue] = useState<string>('');
+    const [visibleReply, setVisibleReply] = useState<boolean>(false);// 回复评论可视
+    // 评论选择框
+    const ops = useRef<OverlayPanel[]>([]);
+
+    // 分页
+    const [first, setFirst] = useState<number>(0);
+    const [rows, setRows] = useState<number>(5);
+    const onPageChange = (event: PaginatorPageChangeEvent) => {
+        setFirst(event.first);
+        setRows(event.rows);
+    };
+
+    // 获取帖子信息
+    useEffect(() => {
+        fetchRewardInfo();
+    }, [rewardId, rewardInfo]);
+
+    const fetchRewardInfo = async () => {
+        try {
+            const { data } = await axios.get(process.env.PUBLIC_URL +`/reward/info?rewardId=${rewardId}`);
+            setRewardInfo(data);
+        } catch (err) {
+            console.error(err);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '获取悬赏信息失败' });
+        }
+    };
+
+    // 获取发帖人
+    useEffect(() => {
+        if (!rewardInfo) return;
+        // 发帖人
+        axios.get(process.env.PUBLIC_URL +`/user/info?userId=${rewardInfo.userId}`)
+            .then(res => setUserInfo(res.data))
+            .catch(console.error);
+    }, [rewardInfo]);
+
+
+    // 当 rewardId 或分页参数变化时重新拉评论
+    useEffect(() => {
+        if (!rewardId) return;
+
+        fetchComments();
+    }, [rewardId, first, rows]);
+
+
+    //通过评论ID获取评论人信息
+    const getReplyUserName = (replyId: number) => {
+        if (replyId == null || replyId == 0) return '';
+        const replyComment = comments.find(comment => comment.commentId === replyId);
+        if (!replyComment?.userId) return '匿名用户';
+        return "回复 " + commentUserInfos.get(replyComment.userId)?.username || '匿名用户';
+    };
+
+    // 获取评论列表
+    const fetchComments = async () => {
+        try {
+            const pageNumber = first / rows + 1;
+            console.log("当前页" + pageNumber + "size" + rows);
+            const response = await axios.get<CommentList>(
+                process.env.PUBLIC_URL +`/comments`, {
+                params: { id: rewardId, pageNumber, rows, type: 'reward' }
+            }
+            );
+            console.log('获取评论列表:', response.data.records);
+            setComments(response.data.records);
+            setTotalComments(response.data.total);
+            // 拉取评论对应用户信息
+            response.data.records.forEach(comment => {
+                if (comment.userId != null && !commentUserInfos.has(comment.userId)) {
+                    axios.get<UserInfo>(
+                        process.env.PUBLIC_URL +`/user/info`,
+                        { params: { userId: comment.userId } }
+                    ).then(res => {
+                        setCommentUserInfos(prev => new Map(prev).set(comment.userId!, res.data));
+                    });
+                }
+            });
+        } catch (err) {
+            console.error('获取评论失败', err);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '获取评论失败' });
+        }
+    };
+
+    // 回复评论接口
+    const publishReply = async (commentId: number) => {
+        if (!replyValue.trim() || !rewardInfo) return;
+        console.log('发布评论:', commentId);
+        try {
+            const newComment: NewComment = {
+                userId: 22301145,
+                rewardId: rewardInfo.rewardId,
+                threadId: 0,
+                resourceId: 0,
+                replyId: commentId,
+                content: commentValue,
+                createAt: new Date().toISOString().slice(0, 19).replace('T', ' ')
+            };
+
+            const response = await axios.post(process.env.PUBLIC_URL +'/comment', newComment);
+
+            if (response.status === 200) {
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: '回复成功' });
+                // 更新评论列表
+                fetchComments();
+                setVisibleReply(false)
+                // 清空输入框
+                setReplyValue('');
+            }
+        } catch (error) {
+            console.error('发布评论失败:', error);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '回复失败' });
+        }
+    };
+
+    // 发布评论接口
+    const publishComment = async () => {
+        if (!commentValue.trim() || !rewardInfo) return;
+
+        try {
+            const newComment: NewComment = {
+                userId: 22301145,
+                rewardId: rewardInfo.rewardId,
+                threadId: 0,
+                resourceId: 0,
+                replyId: 0, // 直接评论，不是回复
+                content: commentValue,
+                createAt: new Date().toISOString().slice(0, 19).replace('T', ' ')
+            };
+
+            const response = await axios.post(process.env.PUBLIC_URL +'/comment', newComment);
+
+            if (response.status === 200) {
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: '评论成功' });
+                // 更新评论列表
+                fetchComments();
+                // 清空输入框
+                setCommentValue('');
+            }
+        } catch (error) {
+            console.error('发布评论失败:', error);
+            toast.current?.show({ severity: 'error', summary: 'error', detail: '发布评论失败' });
+        }
+    };
+
+    // 删除评论接口
+    const deleteComment = async (commentId: number) => {
+        if (!rewardInfo) return;
+
+        try {
+            // 调用 DELETE 接口，URL 中最后一段是要删除的 commentId
+            const response = await axios.delete(
+                process.env.PUBLIC_URL +`/comment?commentId=${commentId}`
+            );
+
+            if (response.status === 200) {
+                fetchComments();
+                toast.current?.show({ severity: 'success', summary: 'Success', detail: '删除评论成功' });
+            } else {
+                toast.current?.show({ severity: 'error', summary: 'error', detail: '删除评论失败' });
+                console.error('删除评论失败，状态码：', response.status);
+            }
+        } catch (error) {
+            console.error('删除评论接口报错:', error);
+        }
+    };
+
+    const ReplyHeader = (
+        <div className="flex align-items-center gap-1">
+            <h3>回复评论</h3>
+        </div>
+    );
+    if (!rewardInfo || !userInfo) return <div>Loading...</div>;
+    return (
+        <div className="reward-detail">
+            <Toast ref={toast}></Toast>
+            {/* 帖子头部 */}
+            <div className="reward-header">
+                <h1>{rewardInfo.rewardName}</h1>
+                <span className="post-time">{"最新更新时间：" + rewardInfo.lastUpdateAt}</span>
+            </div>
+
+            {/* 帖子内容 */}
+            <div className="reward-content">
+                <div className="reward-info-container">
+                    <div className="user-info">
+                        <Avatar image={process.env.NEXT_PUBLIC_NGINX_URL + "users/" + userInfo.avatar} size="large" shape="circle" />
+                        <div className="user-meta">
+                            <h3>{userInfo.username}</h3>
+                            <span>{userInfo.signature}</span>
+                        </div>
+                    </div>
+
+                    {/* 左侧文字内容 */}
+                    <div className="reward-info">
+                        <p>{rewardInfo.rewardDescription}</p>
+                    </div>
+                </div>
+
+
+                {/* 右侧图片+价格+按钮 */}
+                <div className="reward-media">
+                    <Image
+                        src={process.env.NEXT_PUBLIC_NGINX_URL + "rewards/" + rewardInfo.rewardPicture}
+                        alt={rewardInfo.rewardName}
+                        width="500"
+                        height="400"
+                    />
+                    <div className="reward-actions">
+                        <span className="reward-price">¥{rewardInfo.price}</span>
+                        <Button className="submit-bounty">提交悬赏</Button>
+                    </div>
+                </div>
+            </div>
+            {/* 评论列表 */}
+            <div className="comments-section">
+                <div className="comments-header">
+                    <h2>评论 ({totalComments})</h2>
+                </div>
+                <div className="comments-input">
+                    <Avatar image={process.env.NEXT_PUBLIC_NGINX_URL + "users/" + userInfo.avatar} size="large" shape="circle" />
+                    <InputText value={commentValue} placeholder="发布你的评论" onChange={(e) => setCommentValue(e.target.value)} />
+                    <Button label="发布评论" onClick={publishComment} disabled={!commentValue.trim()} />
+                </div>
+                <div className="comments-list">
+                    {comments.map((comment, index) => (
+                        <div key={comment.commentId} className="comment-item">
+                            <div className="comment-user">
+                                <Avatar
+                                    image={comment.userId ? process.env.NEXT_PUBLIC_NGINX_URL + "users/" + commentUserInfos.get(comment.userId)?.avatar : '/default-avatar.png'}
+                                    size="normal"
+                                    shape="circle"
+                                />
+                                <div className="comment-meta">
+                                    <span className="username">
+                                        {comment.userId ? commentUserInfos.get(comment.userId)?.username : '匿名用户'}
+                                    </span>
+                                    <div className="comment-time">
+                                        <span className="floor">#{index + 1}楼</span>
+                                        <span className="time">{comment.createAt}</span>
+                                    </div>
+                                </div>
+                                <i className='pi pi-ellipsis-v' onClick={(e) => ops.current[index].toggle(e)} />
+                            </div>
+                            <div className="comment-content">
+                                {<span className="reply-to">{getReplyUserName(comment.replyId)}</span>}
+                                <p>{comment.content}</p>
+                            </div>
+                            <OverlayPanel       // 回调 ref：把实例放到 ops.current 对应的位置
+                                ref={el => {
+                                    if (el) ops.current[index] = el;
+                                }}>
+                                <Button label="回复" text size="small" onClick={() => setVisibleReply(true)} />
+                                {comment.userId === 22301145 &&
+                                    <Button
+                                        label="删除"
+                                        text
+                                        size="small"
+                                        onClick={() => { console.log('Deleting comment:', comment.commentId, 'by user:', comment.userId); deleteComment(comment.commentId) }}
+                                    />
+                                }
+                            </OverlayPanel>
+                            <Sidebar className='reply' header={ReplyHeader} visible={visibleReply} position="bottom" onHide={() => setVisibleReply(false)}>
+                                <div className="reply-input">
+                                    <Avatar image={process.env.NEXT_PUBLIC_NGINX_URL + "users/" + userInfo.avatar} size="large" shape="circle" />
+                                    <InputText value={replyValue} placeholder="发布你的评论" onChange={(e) => setReplyValue(e.target.value)} />
+                                    <Button label="发布评论" onClick={() => publishReply(comment.commentId)} disabled={!replyValue.trim()} />
+                                </div>
+                            </Sidebar>
+                        </div>
+                    ))}
+                    {totalComments > 5 && (<Paginator className="Paginator" first={first} rows={rows} totalRecords={totalComments} rowsPerPageOptions={[5, 10]} onPageChange={onPageChange} />)}
+                </div>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git "a/src/app/reward/reward-detail/\133rewardId\135/reward-detail.scss" "b/src/app/reward/reward-detail/\133rewardId\135/reward-detail.scss"
new file mode 100644
index 0000000..a38cd0a
--- /dev/null
+++ "b/src/app/reward/reward-detail/\133rewardId\135/reward-detail.scss"
@@ -0,0 +1,93 @@
+.reward-detail {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  // 把标题和用户信息、发布时间都放到同一个 flex 容器里
+  .reward-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+
+    h1 {
+      order: 1;
+      font-size: 2rem;
+      color: #1a202c;
+      margin: 0;
+    }
+
+    .post-time {
+      order: 3;
+      color: #718096;
+      font-size: 0.875rem;
+    }
+  }
+
+  // 贴子正文，文本在左，图片 + 价格 + 按钮在右
+  .reward-content {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-top: 1rem;
+
+
+    .reward-info-container {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 50%;
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+
+      // 文本部分
+      .reward-info {
+
+        p {
+          font-size: 1rem;
+          line-height: 1.75;
+          color: #4a5568;
+          margin-bottom: 2rem;
+        }
+      }
+    }
+
+
+
+
+    // 右侧媒体区：图片、价格、提交按钮
+    .reward-media {
+      display: flex;
+      width: 50%;
+      flex-direction: column;
+      justify-content: flex-end;
+      align-items: flex-end;
+      gap: 2rem;
+
+      img {
+        margin-top: 1rem;
+        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
+      }
+
+      .reward-actions {
+        min-width: 120px;
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        margin-bottom: 2rem;
+
+        .reward-price {
+          font-size: 2rem;
+          font-weight: bold;
+          color: #2c3e50;
+          margin-bottom: 0.5rem;
+        }
+
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/reward/reward.scss b/src/app/reward/reward.scss
new file mode 100644
index 0000000..377e588
--- /dev/null
+++ b/src/app/reward/reward.scss
@@ -0,0 +1,249 @@
+@import '../globals.scss';
+
+.reward {
+    padding: 2rem;
+    position: relative;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    cursor: pointer;
+    .reward-header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .title-section {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            align-items: flex-start;
+
+            h1 {
+                font-size: 3rem;
+                margin: 0;
+                margin-top: 64px;
+            }
+
+            .subtitle {
+                margin: 0;
+                color: #718096;
+                font-size: 1rem;
+            }
+
+            .reward-states {
+                display: flex;
+                gap: 2rem;
+                align-items: center;
+
+                .state-item {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
+                    color: #666;
+
+                    span {
+                        font-size: 0.9rem;
+                    }
+                }
+            }
+        }
+
+        .input {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: flex-end;
+            margin-top: 2rem;
+
+            .reward-buttons {
+                display: flex;
+                gap: 1rem;
+
+                .p-button {
+                    width: 150px;
+                    font-size: 0.9rem;
+                    padding: 0.5rem 1rem;
+                    border-radius: 8px;
+                }
+            }
+        }
+
+        .searchBar {
+            max-width: 100%;
+            position: relative;
+
+            .pi-search {
+                position: absolute;
+                left: 1rem;
+                top: 50%;
+                transform: translateY(-50%);
+                z-index: 1;
+            }
+
+            .search-helper {
+                width: 316px;
+                height: 3rem;
+                border-radius: 10px 10px 10px 10px;
+                font-size: 1.1rem;
+                border: 1px solid #ddd;
+            }
+        }
+
+        .select-dropdown {
+            width: 100px;
+            height: 48px;
+            border-radius: 0px 10px 10px 0px;
+
+            .p-dropdown-items {
+                max-height: 20px;
+            }
+        }
+
+    }
+
+    // 全部社区样式
+    .rewards-list {
+        width: 100%;
+        padding: 1rem;
+
+        &-card {
+            height: 140px;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            border-radius: 0.5rem;
+            transition: transform 0.3s ease;
+            box-shadow: none !important; // 取消阴影
+
+            //填充卡片
+            &.p-card.p-component {
+                padding: 0;
+            }
+
+            .p-card-body {
+                padding: 0;
+            }
+
+            &:hover {
+                transform: translateY(-3px);
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            }
+
+            .p-card-content {
+                height: 140px;
+                display: flex;
+                justify-content: space-between;
+                padding: 0;
+            }
+
+            img {
+                border-radius: 0.5rem 0 0 0.5rem;
+                object-fit: cover;
+            }
+
+            .reward-header {
+                display: flex;
+                flex: 1;
+                max-width: 800px;
+                padding-left: 20px;
+                padding-right: 20px;
+                margin-bottom: 20px;
+            }
+
+
+            .reward-avatar {
+                width: 80px;
+                height: 80px;
+                border-radius: 8px;
+                object-fit: cover;
+            }
+
+            .reward-content {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+
+                h3 {
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    color: #2c3e50;
+                }
+
+                .reward-introduction {
+                    color: #666;
+                    font-size: 1rem;
+                    margin-bottom: 0;
+                }
+            }
+
+            .reward-states {
+                min-width: 120px;
+                display: flex;
+                flex-direction: column;
+                justify-content: flex-end;
+                align-items: flex-end;
+                gap: 1rem;
+
+                .price {
+                    font-size: 1.25rem;
+                    font-weight: bold;
+                    color: #526665;
+                }
+            }
+        }
+    }
+}
+
+// ========== 弹窗发布样式 ==========
+
+.publish-dialog {
+    width: 600px !important;
+    max-width: 90vw;
+
+    .p-dialog-header {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: $heading-color;
+        padding-bottom: 0.5rem;
+    }
+
+    .p-dialog-content {
+        padding-top: 0;
+        padding-bottom: 0;
+
+        .publish-form {
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            margin-top: 1rem;
+
+            .form-field {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+
+                label {
+                    font-weight: 600;
+                    color: $heading-color;
+                }
+
+                input,
+                textarea {
+                    padding: 0.75rem 1rem;
+                    border-radius: 8px;
+                    font-size: 1rem;
+                    color: #2d3748;
+                }
+
+
+                .p-fileupload {
+                    .p-button {
+                        width: 100%;
+                        justify-content: center;
+                        border: none;
+                        margin-bottom: 1rem;
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file