diff --git a/src/components/Personal/ActionCard.jsx b/src/components/Personal/ActionCard.jsx
index 7d3cd4f..0a62b1b 100644
--- a/src/components/Personal/ActionCard.jsx
+++ b/src/components/Personal/ActionCard.jsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+// import React from 'react';
+// import PropTypes from 'prop-types';
 
-const ActionCard = ({ title, subtitle, icon, onClick }) => {
-  return (
-    <div className="action-card" onClick={onClick}>
-      {icon && <div className="action-icon">{icon}</div>}
-      <div className="action-content">
-        <h3>{title}</h3>
-        <p>{subtitle}</p>
-      </div>
-    </div>
-  );
-};
+// const ActionCard = ({ title, subtitle, icon, onClick }) => {
+//   return (
+//     <div className="action-card" onClick={onClick}>
+//       {icon && <div className="action-icon">{icon}</div>}
+//       <div className="action-content">
+//         <h3>{title}</h3>
+//         <p>{subtitle}</p>
+//       </div>
+//     </div>
+//   );
+// };
 
-ActionCard.propTypes = {
-  title: PropTypes.string.isRequired,
-  subtitle: PropTypes.string,
-  icon: PropTypes.node,
-  onClick: PropTypes.func
-};
+// ActionCard.propTypes = {
+//   title: PropTypes.string.isRequired,
+//   subtitle: PropTypes.string,
+//   icon: PropTypes.node,
+//   onClick: PropTypes.func
+// };
 
-export default ActionCard;
\ No newline at end of file
+// export default ActionCard;
\ No newline at end of file
diff --git a/src/components/Personal/Exchange.jsx b/src/components/Personal/Exchange.jsx
index 1e5b2e8..f6766ae 100644
--- a/src/components/Personal/Exchange.jsx
+++ b/src/components/Personal/Exchange.jsx
@@ -88,7 +88,7 @@
     return (
       <div className="subpage-container">
         <button className="back-button" onClick={handleBack}>
-          ← 返回个人中心
+      返回个人中心
         </button>
         <div className="error">错误: {error}</div>
       </div>
@@ -98,7 +98,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">兑换区</h2>
diff --git a/src/components/Personal/Exchange.test.jsx b/src/components/Personal/Exchange.test.jsx
index 20fe641..31abe48 100644
--- a/src/components/Personal/Exchange.test.jsx
+++ b/src/components/Personal/Exchange.test.jsx
@@ -125,7 +125,7 @@
     );
 
     await waitFor(() => {
-      const backButton = screen.getByText(/← 返回个人中心/);
+      const backButton = screen.getByText(/返回个人中心/);
       fireEvent.click(backButton);
       
       expect(mockNavigate).toHaveBeenCalledWith('/personal', {
diff --git a/src/components/Personal/Notice.jsx b/src/components/Personal/Notice.jsx
index 55bc955..05198f9 100644
--- a/src/components/Personal/Notice.jsx
+++ b/src/components/Personal/Notice.jsx
@@ -1,57 +1,106 @@
-import React from 'react';
-import { useNavigate,useLocation } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { notificationApi } from '../../api/notification';
 import './personalSubpage.css';
 
 const Notice = ({ onLogout }) => {
   const navigate = useNavigate();
   const location = useLocation();
-  // 模拟数据
-  const [notices] = React.useState([
-    { 
-      id: 1, 
-      title: '积分奖励到账', 
-      content: '您上传的资源《盗梦空间》获得100积分奖励',
-      date: '2023-10-20',
-      read: false
-    },
-    { 
-      id: 2, 
-      title: '系统通知', 
-      content: '服务器将于今晚2:00-4:00进行维护',
-      date: '2023-10-18',
-      read: true
+  const [notices, setNotices] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // 获取当前用户ID（根据你的实际应用获取方式）
+  const userId = localStorage.getItem('username') || 'default-user-id';
+
+  // 获取通知列表
+  const fetchNotifications = async () => {
+    try {
+      setLoading(true);
+      const response = await notificationApi.getNotifications(userId);
+      setNotices(response.data.notifications || []);
+    } catch (err) {
+      setError('获取通知失败，请稍后重试');
+      console.error(err);
+    } finally {
+      setLoading(false);
     }
-  ]);
+  };
+
+  useEffect(() => {
+    fetchNotifications();
+  }, [userId]);
 
   const handleBack = () => {
-    // 返回个人中心，并携带来源标记
     navigate('/personal', { 
       state: { 
-        fromSubpage: true,  // 标记来自子页面
-        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
+        fromSubpage: true,
+        dashboardTab: location.state?.dashboardTab
       },
-      replace: true  // 替换当前历史记录
+      replace: true
     });
   };
 
+  // 标记为已读处理
+  const handleMarkAsRead = async (id) => {
+    try {
+      const result = await notificationApi.markNotificationAsRead(id);
+      
+      if (result.success) {
+        // 使用后端返回的更新后通知替换本地状态
+        setNotices(prevNotices => 
+          prevNotices.map(notice => 
+            notice.id === id ? result.notification : notice
+          )
+        );
+      } else {
+        setError(result.message || '标记为已读失败');
+      }
+    } catch (err) {
+      console.error('标记为已读失败:', err);
+      setError('标记为已读失败，请稍后重试');
+    }
+  };
+
+  const handleItemClick = (notice) => {
+    if (!notice.isRead) {
+      handleMarkAsRead(notice.id);
+    }
+    // 这里可以添加其他点击逻辑，比如展开详情等
+  };
+
   return (
     <div className="subpage-container">
-      <button className="back-button" onClick={(handleBack)}>
-        ← 返回个人中心
+      <button className="back-button" onClick={handleBack}>
+      返回个人中心
       </button>
 
       <h2 className="page-title">消息通知</h2>
       
+      {loading && <div className="loading-message">加载中...</div>}
+      {error && <div className="error-message">{error}</div>}
+      
       <div className="notice-list">
-        {notices.map(notice => (
-          <div key={notice.id} className={`list-item ${!notice.read ? 'unread' : ''}`}>
-            <div className="notice-header">
-              <h3>{notice.title}</h3>
-              <span className="notice-date">{notice.date}</span>
+        {notices.length === 0 && !loading ? (
+          <div className="empty-notice">暂无通知</div>
+        ) : (
+          notices.map(notice => (
+            <div 
+              key={notice.id} 
+              className={`list-item ${!notice.isRead ? 'unread' : ''}`}
+              onClick={() => handleItemClick(notice)}
+            >
+              <div className="notice-header">
+                <h3>{notice.title}</h3>
+                <span className="notice-date">
+                  {new Date(notice.date).toLocaleDateString()}
+                  {!notice.isRead && <span className="unread-badge">未读</span>}
+                </span>
+              </div>
+              <p className="notice-content">{notice.content}</p>
             </div>
-            <p className="notice-content">{notice.content}</p>
-          </div>
-        ))}
+          ))
+        )}
       </div>
     </div>
   );
diff --git a/src/components/Personal/Personal.css b/src/components/Personal/Personal.css
index 28a1adb..69006d2 100644
--- a/src/components/Personal/Personal.css
+++ b/src/components/Personal/Personal.css
@@ -1,217 +1,95 @@
-/* Personal.css */
+/* Personal.css - 现代化设计 */
 .personal-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-  
-  .back-button {
-    background: none;
-    border: none;
-    color: #1890ff;
-    cursor: pointer;
-    font-size: 16px;
-    margin-bottom: 20px;
-    padding: 5px 0;
-  }
-  
-  .profile-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .profile-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 20px;
-  }
-  
-  .profile-avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    margin-right: 20px;
-    object-fit: cover;
-  }
-  
-  .profile-info {
-    flex-grow: 1;
-  }
-  
-  .username {
-    font-size: 24px;
-    margin: 0 0 5px;
-  }
-  
-  .user-meta {
-    display: flex;
-    gap: 15px;
-    color: #666;
-    font-size: 14px;
-  }
-  
-  .stats-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 15px;
-  }
-  
-  .stat-item {
-    background: #f5f5f5;
-    border-radius: 6px;
-    padding: 15px;
-    text-align: center;
-  }
-  
-  .stat-label {
-    font-size: 14px;
-    color: #666;
-    margin-bottom: 5px;
-  }
-  
-  .stat-value {
-    font-size: 18px;
-    font-weight: bold;
-  }
-  
-  .quota-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-  }
-  
-  .quota-card h3 {
-    margin-top: 0;
-    margin-bottom: 15px;
-  }
-  
-  .quota-info {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-  }
-  
-  .quota-used {
-    color: #1890ff;
-  }
-  
-  .quota-remaining {
-    color: #52c41a;
-  }
-  
-  .progress-bar {
-    height: 10px;
-    background: #f0f0f0;
-    border-radius: 5px;
-    margin-bottom: 10px;
-    overflow: hidden;
-  }
-  
-  .progress-fill {
-    height: 100%;
-    background: #1890ff;
-    border-radius: 5px;
-    transition: width 0.3s ease;
-  }
-  
-  .quota-total {
-    text-align: right;
-    color: #666;
-    font-size: 14px;
-  }
-  
-  .action-cards {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 15px;
-  }
-  
-  .action-card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 20px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-    cursor: pointer;
-    transition: transform 0.2s ease;
-  }
-  
-  .action-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  }
-  
-  .action-card h3 {
-    margin-top: 0;
-    color: #1890ff;
-  }
-  
-  .action-card p {
-    color: #666;
-    margin-bottom: 0;
-  }
-
-  .subpage-container {
-    margin-top: 20px;
-    border-top: 1px solid #f0f0f0;
-    padding-top: 20px;
-  }
-
-
-  /* Personal.css */
-/* ... 其他已有样式 ... */
-
-/* 下载进度卡片样式 */
-.progress-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 25px;
+  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  animation: fadeIn 0.5s ease-out forwards;
 }
 
-.download-task {
-  margin-bottom: 15px;
+/* 返回按钮 - 渐变风格 */
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
 }
 
-.task-info {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 5px;
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
-.task-id {
-  font-size: 14px;
-  color: #666;
+.back-button::before {
+  content: "←";
 }
 
-.task-progress {
-  font-size: 14px;
-  font-weight: bold;
-  color: #1890ff;
-}
-
-.progress-bar {
-  height: 8px;
-  background: #f0f0f0;
-  border-radius: 4px;
+/* 用户资料卡片 - 3D效果 */
+.profile-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  transition: transform 0.3s, box-shadow 0.3s;
+  position: relative;
   overflow: hidden;
 }
 
-.progress-fill {
-  height: 100%;
-  background: #1890ff;
-  border-radius: 4px;
-  transition: width 0.3s ease;
+.profile-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
 }
 
+.profile-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 25px;
+}
+
+.profile-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-right: 25px;
+  object-fit: cover;
+  border: 4px solid rgba(30, 60, 114, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s;
+}
+
+.profile-avatar:hover {
+  transform: scale(1.05);
+}
+
+.username {
+  font-size: 28px;
+  margin: 0 0 10px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+}
+
+.user-meta {
+  display: flex;
+  gap: 20px;
+}
 
 .user-meta span {
-  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 15px;
   color: #666;
 }
 
@@ -219,3 +97,221 @@
   color: #ff9800;
   font-weight: bold;
 }
+
+/* 统计数据网格 - 卡片式设计 */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+}
+
+.stat-item {
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+  border-radius: 10px;
+  padding: 20px;
+  text-align: center;
+  transition: transform 0.3s;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+}
+
+.stat-item:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+.stat-label {
+  font-size: 15px;
+  color: #666;
+  margin-bottom: 10px;
+}
+
+.stat-value {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1e3c72;
+}
+
+/* 下载额度卡片 - 渐变色 */
+.quota-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.quota-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.quota-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 15px;
+  font-size: 15px;
+}
+
+.quota-used {
+  color: #ff4d4f;
+  font-weight: 600;
+}
+
+.quota-remaining {
+  color: #52c41a;
+  font-weight: 600;
+}
+
+.progress-bar {
+  height: 12px;
+  background: #f0f2f5;
+  border-radius: 6px;
+  margin-bottom: 15px;
+  overflow: hidden;
+}
+
+.progress-fill {
+  height: 100%;
+  border-radius: 6px;
+  transition: width 0.5s ease;
+}
+
+.quota-total {
+  text-align: right;
+  color: #666;
+  font-size: 14px;
+}
+
+/* 下载进度卡片 */
+.progress-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  margin-bottom: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.progress-card h3 {
+  margin-top: 0;
+  margin-bottom: 20px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.download-task {
+  margin-bottom: 20px;
+}
+
+.task-info {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.task-id {
+  font-size: 15px;
+  color: #666;
+}
+
+.task-progress {
+  font-size: 15px;
+  font-weight: 600;
+  color: #1890ff;
+}
+
+/* 功能卡片区 - 网格布局 */
+.action-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.action-card {
+  background: white;
+  border-radius: 12px;
+  padding: 25px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: all 0.3s;
+  border: 1px solid rgba(30, 60, 114, 0.1);
+  text-align: center;
+}
+
+.action-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  border-color: rgba(30, 60, 114, 0.2);
+}
+
+.action-card h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  color: #1e3c72;
+  font-size: 20px;
+}
+
+.action-card p {
+  color: #666;
+  margin-bottom: 0;
+  font-size: 15px;
+}
+
+/* 子页面容器 */
+.subpage-container {
+  margin-top: 30px;
+  border-top: 2px solid #f0f2f5;
+  padding-top: 30px;
+}
+
+/* 加载和错误状态 */
+.loading, .error {
+  text-align: center;
+  padding: 50px;
+  font-size: 18px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  margin: 20px 0;
+}
+
+.error {
+  color: #ff4d4f;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .personal-container {
+    padding: 15px;
+  }
+  
+  .profile-header {
+    flex-direction: column;
+    text-align: center;
+  }
+  
+  .profile-avatar {
+    margin-right: 0;
+    margin-bottom: 15px;
+  }
+  
+  .user-meta {
+    justify-content: center;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .action-cards {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file
diff --git a/src/components/Personal/Personal.jsx b/src/components/Personal/Personal.jsx
index 8c60baf..8199b4b 100644
--- a/src/components/Personal/Personal.jsx
+++ b/src/components/Personal/Personal.jsx
@@ -141,7 +141,7 @@
     <div className="personal-container">
       {/* 返回按钮 */}
       <button className="back-button" onClick={handleBack}>
-        &larr; 返回
+      返回
       </button>
       
       {/* 用户基本信息卡片 */}
diff --git a/src/components/Personal/Setting.jsx b/src/components/Personal/Setting.jsx
index 9ba07e8..5b6f730 100644
--- a/src/components/Personal/Setting.jsx
+++ b/src/components/Personal/Setting.jsx
@@ -87,7 +87,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">个人设置</h2>
diff --git a/src/components/Personal/Setting.test.jsx b/src/components/Personal/Setting.test.jsx
index e8b1cc0..02011be 100644
--- a/src/components/Personal/Setting.test.jsx
+++ b/src/components/Personal/Setting.test.jsx
@@ -149,7 +149,7 @@
       </MemoryRouter>
     );
 
-    const backButton = screen.getByText(/← 返回个人中心/);
+    const backButton = screen.getByText(/返回个人中心/);
     fireEvent.click(backButton);
     
     expect(mockNavigate).toHaveBeenCalledWith('/personal', {
diff --git a/src/components/Personal/Upload.jsx b/src/components/Personal/Upload.jsx
index 2d91b30..336f721 100644
--- a/src/components/Personal/Upload.jsx
+++ b/src/components/Personal/Upload.jsx
@@ -112,7 +112,7 @@
   return (
     <div className="subpage-container">
       <button className="back-button" onClick={handleBack}>
-        ← 返回个人中心
+      返回个人中心
       </button>
 
       <h2 className="page-title">上传记录</h2>
diff --git a/src/components/Personal/personalSubpage.css b/src/components/Personal/personalSubpage.css
index 2ba8687..ff587e2 100644
--- a/src/components/Personal/personalSubpage.css
+++ b/src/components/Personal/personalSubpage.css
@@ -1,336 +1,553 @@
+/* personalSubpage.css - 现代化设计 */
+
 /* 上传记录表格样式 */
 .uploads-table {
   width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 25px;
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .uploads-table th, .uploads-table td {
-  padding: 12px 15px;
+  padding: 15px;
   text-align: left;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid #f0f2f5;
 }
 
 .uploads-table th {
-  background-color: #f5f5f5;
+  background-color: #1e3c72;
+  color: white;
   font-weight: 600;
+  text-transform: uppercase;
+  font-size: 14px;
 }
 
-.list-item:hover {
-  background-color: #f9f9f9;
+.uploads-table tr:last-child td {
+  border-bottom: none;
+}
+
+.uploads-table tr:hover td {
+  background-color: #f9fafc;
 }
 
 /* 操作按钮样式 */
 .action-btn {
-  padding: 6px 12px;
+  padding: 8px 16px;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
-  transition: background-color 0.2s;
+  font-weight: 600;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
 }
 
 .delete-btn {
-  background-color: #ff4d4f;
+  background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
   color: white;
 }
 
 .delete-btn:hover {
-  background-color: #ff7875;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
 }
 
 /* 分页控件样式 */
 .pagination {
-  margin-top: 20px;
+  margin-top: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 15px;
-}
-
-.pagination button {
-  padding: 6px 12px;
-  border: 1px solid #d9d9d9;
-  background-color: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.pagination button:disabled {
-  color: #d9d9d9;
-  cursor: not-allowed;
-}
-
-.pagination button:not(:disabled):hover {
-  border-color: #1890ff;
-  color: #1890ff;
-}
-
-/* 分页控件样式 */
-.pagination {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
 .page-nav, .page-number {
-  padding: 6px 12px;
+  padding: 8px 16px;
   border: 1px solid #d9d9d9;
-  background-color: #fff;
-  border-radius: 4px;
+  background-color: white;
+  color:#333;
+  border-radius: 6px;
   cursor: pointer;
-  min-width: 32px;
+  min-width: 40px;
   text-align: center;
+  transition: all 0.3s;
+  font-weight: 600;
 }
 
 .page-nav:disabled, .page-number:disabled {
-  color: #d9d9d9;
+  color: #070202;
   cursor: not-allowed;
 }
 
 .page-nav:not(:disabled):hover, 
 .page-number:not(:disabled):hover {
-  border-color: #1890ff;
-  color: #1890ff;
+  border-color: #1e3c72;
+  color: #1e3c72;
+  transform: translateY(-2px);
 }
 
 .page-number.active {
-  background-color: #1890ff;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
-  border-color: #1890ff;
+  border-color: #1e3c72;
 }
 
 .ellipsis {
-  padding: 0 8px;
+  padding: 0 12px;
 }
 
 .page-info {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-left: 15px;
+  gap: 10px;
+  margin-left: 20px;
 }
 
 .page-info input {
-  width: 50px;
-  padding: 4px;
+  width: 60px;
+  padding: 8px;
   border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  border-radius: 6px;
   text-align: center;
+  font-weight: 600;
 }
 
 .page-info input:focus {
   outline: none;
-  border-color: #1890ff;
-}
-
-/* 调整表格列宽 */
-.uploads-table th:nth-child(1),
-.uploads-table td:nth-child(1) {
-  width: 30%;
-}
-
-.uploads-table th:nth-child(2),
-.uploads-table td:nth-child(2) {
-  width: 15%;
-}
-
-.uploads-table th:nth-child(3),
-.uploads-table td:nth-child(3) {
-  width: 20%;
-}
-
-.uploads-table th:nth-child(4),
-.uploads-table td:nth-child(4) {
-  width: 15%;
-  text-align: center;
-}
-
-.uploads-table th:nth-child(5),
-.uploads-table td:nth-child(5) {
-  width: 20%;
-  text-align: center;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
 }
 
 /* 兑换区样式 */
 .exchange-section {
-  margin-top: 20px;
-  padding: 20px;
-  background-color: #f9f9f9;
-  border-radius: 8px;
+  margin-top: 30px;
+  padding: 25px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .exchange-card {
-  margin-bottom: 20px;
-  padding: 15px;
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-bottom: 25px;
+  padding: 20px;
+  background: #f9fafc;
+  border-radius: 10px;
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s;
+}
+
+.exchange-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
 .exchange-card h4 {
   margin-top: 0;
-  color: #333;
+  color: #1e3c72;
+  font-size: 18px;
 }
 
 .exchange-card p {
   color: #666;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
+  font-size: 15px;
 }
 
 .exchange-btn {
-  padding: 8px 16px;
-  background-color: #1890ff;
+  padding: 10px 20px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 6px;
   cursor: pointer;
-  transition: background-color 0.3s;
+  font-weight: 600;
+  transition: all 0.3s;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }
 
 .exchange-btn:hover {
-  background-color: #40a9ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
 }
 
 .exchange-btn:disabled {
-  background-color: #d9d9d9;
+  background: #d9d9d9;
   cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 .exchange-input-group {
   display: flex;
-  gap: 10px;
-  margin-top: 10px;
+  gap: 15px;
+  margin-top: 15px;
 }
 
 .exchange-input-group input {
   flex: 1;
-  padding: 8px;
+  padding: 10px;
   border: 1px solid #d9d9d9;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-size: 15px;
+}
+
+.exchange-input-group input:focus {
+  outline: none;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
 }
 
 .invite-code-list {
-  margin-top: 20px;
+  margin-top: 25px;
 }
 
 .invite-code-list ul {
   list-style: none;
   padding: 0;
+  margin: 0;
 }
 
 .invite-code-list li {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
-  border-bottom: 1px solid #eee;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #f0f2f5;
+  transition: all 0.3s;
+}
+
+.invite-code-list li:hover {
+  background-color: #f9fafc;
 }
 
 .invite-code-list .code {
   font-family: monospace;
+  font-size: 16px;
+  color: #1e3c72;
 }
 
 .invite-code-list .status {
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .invite-code-list .status.available {
-  background-color: #f6ffed;
-  color: #52c41a;
-  border: 1px solid #b7eb8f;
+  background: linear-gradient(135deg, #52c41a 0%, #a0d911 100%);
+  color: white;
 }
 
 .invite-code-list .status.used {
+  background: linear-gradient(135deg, #ff4d4f 0%, #f5222d 100%);
+  color: white;
+}
+
+/* 设置页面样式 */
+.setting-section {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 25px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+}
+
+.user-info-card, .password-form-card {
+  background: #f9fafc;
+  border-radius: 10px;
+  padding: 25px;
+  margin-bottom: 25px;
+  border: 1px solid #f0f2f5;
+}
+
+.info-item {
+  display: flex;
+  margin-bottom: 15px;
+  align-items: center;
+}
+
+.info-item label {
+  font-weight: 600;
+  width: 150px;
+  color: #1e3c72;
+}
+
+.info-item span {
+  flex: 1;
+  color: #333;
+}
+
+.info-note {
+  color: #666;
+  font-size: 14px;
+  margin-top: 15px;
+  line-height: 1.6;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #1e3c72;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  box-sizing: border-box;
+  font-size: 15px;
+  transition: all 0.3s;
+}
+
+.form-group input:focus {
+  outline: none;
+  border-color: #1e3c72;
+  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.2);
+}
+
+.submit-button {
+  padding: 12px 24px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.3s;
+}
+
+.submit-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.submit-button:disabled {
+  background: #d9d9d9;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.error-message {
+  color: #ff4d4f;
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #fff2f0;
+  border-radius: 6px;
+  border: 1px solid #ffccc7;
+}
+
+.success-message {
+  color: #52c41a;
+  margin-bottom: 20px;
+  padding: 10px;
+  background: #f6ffed;
+  border-radius: 6px;
+  border: 1px solid #b7eb8f;
+}
+
+.subpage-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 25px;
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+.back-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s;
+  margin-bottom: 30px;
+  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.2);
+}
+
+.back-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.3);
+}
+
+.back-button::before {
+  content: "←";
+}
+
+.page-title {
+  font-size: 24px;
+  margin: 0 0 25px;
+  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 800;
+  padding-bottom: 10px;
+  border-bottom: 2px solid #f0f2f5;
+}
+
+.loading-message, .error-message {
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.loading-message {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.error-message {
   background-color: #fff2f0;
   color: #ff4d4f;
   border: 1px solid #ffccc7;
 }
 
-
-/* personalSubpage.css 中添加以下样式 */
-
-.setting-section {
-  max-width: 600px;
-  margin: 0 auto;
-  padding: 20px;
+.notice-list {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
 }
 
-.user-info-card, .password-form-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.info-item {
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.info-item label {
-  font-weight: bold;
-  width: 100px;
-}
-
-.info-item span {
-  flex: 1;
-}
-
-.info-note {
+.empty-notice {
+  text-align: center;
+  padding: 50px 20px;
   color: #666;
-  font-size: 0.9em;
-  margin-top: 10px;
-}
-
-.form-group {
-  margin-bottom: 15px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-.form-group input {
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-
-.submit-button {
-  background-color: #4CAF50;
-  color: white;
-  padding: 10px 15px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
   font-size: 16px;
 }
 
-.submit-button:hover {
-  background-color: #45a049;
+.list-item {
+  padding: 20px;
+  border-bottom: 1px solid #f0f2f5;
+  transition: all 0.3s;
+  cursor: pointer;
 }
 
-.submit-button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
+.list-item:last-child {
+  border-bottom: none;
 }
 
-.error-message {
-  color: #f44336;
-  margin-bottom: 15px;
+.list-item:hover {
+  background-color: #f9fafc;
+  transform: translateX(5px);
 }
 
-.success-message {
-  color: #4CAF50;
-  margin-bottom: 15px;
+.list-item.unread {
+  background-color: #f0f7ff;
+}
+
+.notice-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.notice-header h3 {
+  margin: 0;
+  font-size: 18px;
+  color: #1e3c72;
+  font-weight: 600;
+}
+
+.notice-date {
+  font-size: 14px;
+  color: #888;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.unread-badge {
+  background: #ff4d4f;
+  color: white;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-weight: 500;
+}
+
+.notice-content {
+  margin: 0;
+  color: #333;
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .uploads-table {
+    display: block;
+    overflow-x: auto;
+  }
+  
+  .exchange-input-group {
+    flex-direction: column;
+  }
+  
+  .info-item {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .info-item label {
+    width: 100%;
+    margin-bottom: 5px;
+  }
+  
+  .pagination {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .page-info {
+    margin-left: 0;
+    margin-top: 15px;
+  }
+  .subpage-container {
+    padding: 15px;
+  }
+  
+  .notice-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+  }
+  
+  .list-item:hover {
+    transform: none;
+  }
 }
\ No newline at end of file