diff --git a/front/src/AdminPage.js b/front/src/AdminPage.js
index f063c09..218bc9a 100644
--- a/front/src/AdminPage.js
+++ b/front/src/AdminPage.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";
+import "./AdminPage.css";
 
 // 示例数据
 const initialConfig = {
@@ -117,106 +118,108 @@
     }, []);
 
     return (
-        <div style={{ padding: 40, maxWidth: 900, margin: "0 auto" }}>
-            <h1 style={{ textAlign: "center", marginBottom: 32 }}>管理员页面</h1>
-            {/* 参数设置 */}
-            <div style={{ marginBottom: 32, padding: 18, background: "#f7faff", borderRadius: 12, display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}>
-                <b>系统参数：</b>
-                <span>FarmNumber: {config.FarmNumber}</span>
-                <span>FakeTime: {config.FakeTime}</span>
-                <span>BegVote: {config.BegVote}</span>
-                <span>CheatTime: {config.CheatTime}</span>
-            </div>
-            {/* 作弊用户 */}
-            <div style={{ marginBottom: 32 }}>
-                <h2 style={{ color: "#e53935" }}>作弊用户</h2>
-                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 18 }}>
-                    <thead>
-                        <tr style={{ background: "#f5f5f5" }}>
-                            {/* <th>user_id</th> */}
-                            <th>email</th>
-                            <th>username</th>
-                            <th>account_status</th>
-                            <th>操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {cheatUsers.map((u) => (
-                            <tr key={u.userid}>
-                                {/* <td>{u.userid}</td> */}
-                                <td>{u.email}</td>
-                                <td>{u.username}</td>
-                                <td style={{ color: "#e53935" }}>
-                                    {"封禁"}
-                                </td>
-                                <td>
-                                    <button
-                                        style={{ background: "#13F31E", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
-                                        onClick={() => handleUnban(u)}
-                                    >
-                                        解封
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-            {/* 可疑用户 */}
-            <div style={{ marginBottom: 32 }}>
-                <h2 style={{ color: "#ff9800" }}>可疑用户</h2>
-                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff" }}>
-                    <thead>
-                        <tr style={{ background: "#f5f5f5" }}>
-                            {/* <th>user_id</th> */}
-                            <th>email</th>
-                            <th>username</th>
-                            <th>account_status</th>
-                            <th>操作</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {suspiciousUsers.map((u) => (
-                            <tr key={u.user_id}>
-                                {/* <td>{u.user_id}</td> */}
-                                <td>{u.email}</td>
-                                <td>{u.username}</td>
-                                <td style={{ color: u.account_status === 1 ? "#e53935" : "#43a047" }}>
-                                    {u.account_status === 1 ? "封禁" : "正常"}
-                                </td>
-                                <td>
-                                    <button
-                                        style={{ background: "#e53935", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
-                                        onClick={() => handleBan(u)}
-                                    >
-                                        封禁
-                                    </button>
-                                </td>
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-            {/* 跳转按钮 */}
-            <div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
-                <button
-                    style={{ background: "#1976d2", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/appeal-review")}
-                >
-                    用户申诉
-                </button>
-                <button
-                    style={{ background: "#43a047", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/migration-review")}
-                >
-                    用户迁移
-                </button>
-                <button
-                    style={{ background: "#ff9800", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
-                    onClick={() => navigate("/seed-promotion")}
-                >
-                    促销管理
-                </button>
+        <div className="admin-page-container">
+            <div className="admin-main-content">
+                <h1 className="admin-title">管理员页面</h1>
+                {/* 参数设置 */}
+                <div className="admin-config-card">
+                    <span className="admin-config-label">系统参数：</span>
+                    <span className="admin-config-item">FarmNumber: {config.FarmNumber}</span>
+                    <span className="admin-config-item">FakeTime: {config.FakeTime}</span>
+                    <span className="admin-config-item">BegVote: {config.BegVote}</span>
+                    <span className="admin-config-item">CheatTime: {config.CheatTime}</span>
+                </div>
+                {/* 作弊用户 */}
+                <div className="admin-section">
+                    <h2 className="admin-section-title cheat">作弊用户</h2>
+                    <div className="admin-table-container">
+                        <table className="admin-table">
+                            <thead>
+                                <tr>
+                                    <th>邮箱</th>
+                                    <th>用户名</th>
+                                    <th>账户状态</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {cheatUsers.map((u) => (
+                                    <tr key={u.userid}>
+                                        <td>{u.email}</td>
+                                        <td>{u.username}</td>
+                                        <td className="status-banned">
+                                            封禁
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="admin-btn admin-btn-unban"
+                                                onClick={() => handleUnban(u)}
+                                            >
+                                                解封
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                {/* 可疑用户 */}
+                <div className="admin-section">
+                    <h2 className="admin-section-title suspicious">可疑用户</h2>
+                    <div className="admin-table-container">
+                        <table className="admin-table">
+                            <thead>
+                                <tr>
+                                    <th>邮箱</th>
+                                    <th>用户名</th>
+                                    <th>账户状态</th>
+                                    <th>操作</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {suspiciousUsers.map((u) => (
+                                    <tr key={u.user_id}>
+                                        <td>{u.email}</td>
+                                        <td>{u.username}</td>
+                                        <td className={u.account_status === 1 ? "status-banned" : "status-normal"}>
+                                            {u.account_status === 1 ? "封禁" : "正常"}
+                                        </td>
+                                        <td>
+                                            <button
+                                                className="admin-btn admin-btn-ban"
+                                                onClick={() => handleBan(u)}
+                                            >
+                                                封禁
+                                            </button>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                {/* 跳转按钮 */}
+                <div className="admin-nav-buttons">
+                    <button
+                        className="admin-nav-btn appeal"
+                        onClick={() => navigate("/appeal-review")}
+                    >
+                        用户申诉
+                    </button>
+                    <button
+                        className="admin-nav-btn migration"
+                        onClick={() => navigate("/migration-review")}
+                    >
+                        用户迁移
+                    </button>
+                    <button
+                        className="admin-nav-btn promotion"
+                        onClick={() => navigate("/seed-promotion")}
+                    >
+                        促销管理
+                    </button>
+                </div>
             </div>
         </div>
     );