diff --git a/front/src/AppealPage.js b/front/src/AppealPage.js
index dfbe307..0f168c3 100644
--- a/front/src/AppealPage.js
+++ b/front/src/AppealPage.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { API_BASE_URL } from "./config";
+import "./AppealPage.css";
 
 // State for appeals fetched from backend
 export default function AppealPage() {
@@ -30,8 +31,8 @@
         fetchAppeals();
     }, []);
 
-    if (loading) return <div>加载中...</div>;
-    if (error) return <div>加载失败：{error}</div>;
+    if (loading) return <div className="appeal-loading">加载中...</div>;
+    if (error) return <div className="appeal-error">加载失败：{error}</div>;
     const selectedAppeal = appeals.find(a => a.appealid === selectedId) || {};
 
     // Approve selected appeal and refresh
@@ -66,34 +67,25 @@
     };
 
     return (
-        <div style={{ display: "flex", minHeight: "100vh", background: "#f7faff" }}>
+        <div className="appeal-page-container">
             {/* 侧栏 */}
-            <div style={{ width: 180, background: "#fff", borderRight: "1px solid #e0e7ff", padding: 0 }}>
-                <h3 style={{ textAlign: "center", padding: "18px 0 0 0", color: "#1976d2" }}>申诉列表</h3>
-                <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
+            <div className="appeal-sidebar">
+                <h3 className="appeal-sidebar-title">申诉列表</h3>
+                <div className="appeal-list-container">
                     {appeals.map(a => (
                         <div
                             key={a.appealid}
                             onClick={() => setSelectedId(a.appealid)}
-                            style={{
-                                margin: "0 12px",
-                                padding: "16px 10px",
-                                borderRadius: 8,
-                                background: selectedId === a.appealid ? "#e3f2fd" : "#fff",
-                                border: `2px solid ${a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"}`,
-                                color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935",
-                                fontWeight: 600,
-                                cursor: "pointer",
-                                boxShadow: selectedId === a.appealid ? "0 2px 8px #b2d8ea" : "none",
-                                transition: "all 0.2s"
-                            }}
+                            className={`appeal-list-item ${
+                                selectedId === a.appealid ? 'selected' : ''
+                            } ${
+                                a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+                            }`}
                         >
                             {a.user.username}
-                            <span style={{
-                                float: "right",
-                                fontSize: 12,
-                                color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"
-                            }}>
+                            <span className={`appeal-status-label ${
+                                a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+                            }`}>
                                 {a.status === 1 || a.status === 2 ? "已审核" : "未审核"}
                             </span>
                         </div>
@@ -101,52 +93,34 @@
                 </div>
             </div>
             {/* 申诉详情 */}
-            <div style={{ flex: 1, padding: "40px 48px" }}>
-                <h2 style={{ marginBottom: 24, color: "#1976d2" }}>申诉详情</h2>
-                <div style={{ background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 32 }}>
-                    <div style={{ marginBottom: 18 }}>
+            <div className="appeal-main-content">
+                <h2 className="appeal-detail-title">申诉详情</h2>
+                <div className="appeal-detail-card">
+                    <div className="appeal-detail-item">
                         <b>申诉ID：</b>{selectedAppeal.appealid}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>用户ID：</b>{selectedAppeal.user.userid}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>申诉内容：</b>{selectedAppeal.content}
                     </div>
-                    <div style={{ marginBottom: 18 }}>
+                    <div className="appeal-detail-item">
                         <b>申诉文件：</b>
                         <FileViewer url={selectedAppeal.fileURL} />
                     </div>
                 </div>
                 {/* 审核按钮 */}
-                <div style={{ display: "flex", gap: 32, justifyContent: "center" }}>
+                <div className="appeal-buttons-container">
                     <button
-                        style={{
-                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#43a047",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: 8,
-                            padding: "10px 38px",
-                            fontWeight: 600,
-                            fontSize: 18,
-                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
-                        }}
+                        className={`appeal-btn appeal-btn-approve`}
                         disabled={selectedAppeal.status === 1}
                         onClick={handleApprove}
                     >
                         通过
                     </button>
                     <button
-                        style={{
-                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#e53935",
-                            color: "#fff",
-                            border: "none",
-                            borderRadius: 8,
-                            padding: "10px 38px",
-                            fontWeight: 600,
-                            fontSize: 18,
-                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
-                        }}
+                        className={`appeal-btn appeal-btn-reject`}
                         disabled={selectedAppeal.status === 1}
                         onClick={handleReject}
                     >
@@ -163,15 +137,15 @@
     if (!url) return <div>无附件</div>;
     if (url.endsWith(".pdf")) {
         return (
-            <iframe
-                src={url}
-                title="PDF预览"
-                width="100%"
-                height="400px"
-                style={{ border: "1px solid #ccc", borderRadius: 8 }}
-            />
+            <div className="file-viewer-container">
+                <iframe
+                    src={url}
+                    title="PDF预览"
+                    className="file-viewer-iframe"
+                />
+            </div>
         );
     }
     // 这里只做PDF示例，实际可扩展为DOC等
-    return <a href={url} target="_blank" rel="noopener noreferrer">下载附件</a>;
+    return <a href={url} target="_blank" rel="noopener noreferrer" className="file-download-link">下载附件</a>;
 }
\ No newline at end of file