From bca5417227a6f1af82e2138e6507c8b1a3a32b97 Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Mon, 19 Oct 2026 13:33:57 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E4=B8=8E=E6=88=90=E5=91=98=E9=A1=B5=E9=9D=A2=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E3=80=81=E5=88=86=E6=A0=8F=E6=AF=94=E4=BE=8B?=
 =?UTF-8?q?=E4=B8=8E=E5=8D=A1=E7=89=87=E5=B1=82=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProjectManagement/ProjectManagement.css   | 195 ++++++++++--------
 1 file changed, 108 insertions(+), 87 deletions(-)

diff --git a/frontend/src/views/ProjectManagement/ProjectManagement.css b/frontend/src/views/ProjectManagement/ProjectManagement.css
index 5c51b71..f33810d 100644
--- a/frontend/src/views/ProjectManagement/ProjectManagement.css
+++ b/frontend/src/views/ProjectManagement/ProjectManagement.css
@@ -14,8 +14,8 @@
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 24px;
-  padding-bottom: 18px;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
   border-bottom: 1px solid #f1f5f9;
 }
 
@@ -36,16 +36,17 @@
 
 .project-layout {
   display: grid;
-  grid-template-columns: 280px minmax(0, 1fr);
-  gap: 24px;
+  grid-template-columns: 300px minmax(0, 1fr);
+  gap: 20px;
   align-items: stretch;
   width: 100%;
+  min-height: calc(100dvh - 210px);
 }
 
 .project-directory {
   display: flex;
   flex-direction: column;
-  padding: 18px;
+  padding: 16px;
   background: #f8fafc;
   border: 1px solid #e2e8f0;
   border-radius: 14px;
@@ -57,6 +58,11 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .project-toolbar {
@@ -68,9 +74,15 @@
   margin-bottom: 14px;
 }
 
-.project-toolbar h3 {
+.project-directory .project-toolbar {
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #edf2f7;
+}
+
+.project-directory .project-toolbar h3 {
   margin: 0;
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 700;
   color: #1e293b;
 }
@@ -83,7 +95,7 @@
 
 .project-title h3 {
   margin: 0;
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 700;
   color: #0f172a;
 }
@@ -94,12 +106,19 @@
   font-family: ui-monospace, monospace;
 }
 
+.project-members > .project-toolbar {
+  padding-bottom: 16px;
+  border-bottom: 1px solid #f1f5f9;
+  margin-bottom: 16px;
+}
+
 .project-list {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  margin: 12px 0 16px;
-  max-height: 480px;
+  margin: 4px 0 16px;
+  flex: 1;
+  max-height: calc(100dvh - 350px);
   overflow-y: auto;
   padding-right: 2px;
 }
@@ -113,7 +132,7 @@
   width: 100%;
   padding: 12px 14px;
   border: 1px solid #e2e8f0;
-  border-radius: 12px;
+  border-radius: 10px;
   background: #ffffff;
   color: #334155;
   text-align: left;
@@ -139,8 +158,8 @@
   content: "";
   position: absolute;
   left: 0;
-  top: 10px;
-  bottom: 10px;
+  top: 8px;
+  bottom: 8px;
   width: 4px;
   border-radius: 0 4px 4px 0;
   background: #315aaa;
@@ -174,21 +193,21 @@
 
 .project-grant-form {
   display: grid;
-  grid-template-columns: minmax(200px, 1fr) 180px 110px;
+  grid-template-columns: minmax(180px, 1fr) 180px 110px;
   align-items: end;
   gap: 12px;
-  margin: 18px 0 22px;
-  padding: 18px;
+  margin: 0 0 16px;
+  padding: 14px 16px;
   background: #f8fafc;
-  border: 1px solid #e2e8f0;
-  border-radius: 14px;
+  border: 1px solid #e8edf4;
+  border-radius: 12px;
 }
 
 .project-grant-form label {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: #334155;
 }
@@ -202,8 +221,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  height: 22px;
-  line-height: 22px;
+  height: 20px;
+  line-height: 20px;
 }
 
 .project-management input,
@@ -211,13 +230,13 @@
 .project-management select {
   box-sizing: border-box;
   width: 100%;
-  height: 40px;
-  padding: 8px 12px;
+  height: 38px;
+  padding: 7px 12px;
   border: 1px solid #cbd5e1;
-  border-radius: 10px;
+  border-radius: 8px;
   color: #1e293b;
   background: #ffffff;
-  font-size: 14px;
+  font-size: 13px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
 
@@ -230,7 +249,7 @@
 .project-management textarea:focus,
 .project-management select:focus {
   border-color: #315aaa;
-  box-shadow: 0 0 0 3px rgba(49, 90, 170, 0.15);
+  box-shadow: 0 0 0 3px rgba(49, 90, 170, 0.12);
   outline: none;
 }
 
@@ -239,13 +258,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 40px;
-  padding: 8px 16px;
+  height: 38px;
+  padding: 7px 14px;
   border: 1px solid #cbd5e1;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #ffffff;
   color: #334155;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.15s ease;
@@ -266,18 +285,18 @@
   border-color: #315aaa;
   background: #315aaa;
   color: #ffffff;
-  box-shadow: 0 4px 12px rgba(49, 90, 170, 0.2);
+  box-shadow: 0 2px 6px rgba(49, 90, 170, 0.15);
 }
 
 .project-management .project-primary:hover:not(:disabled) {
-  background: #25488a;
-  border-color: #25488a;
+  border-color: #254688;
+  background: #254688;
   color: #ffffff;
 }
 
 .project-management .project-danger {
   border-color: #fca5a5;
-  background: #fff;
+  background: #ffffff;
   color: #dc2626;
 }
 
@@ -288,12 +307,12 @@
 }
 
 .project-member-table {
-  max-height: 480px;
+  flex: 1;
   overflow: auto;
-  border: 1px solid #e2e8f0;
-  border-radius: 14px;
+  border: 1px solid #e8edf4;
+  border-radius: 12px;
   background: #ffffff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+  min-height: 180px;
 }
 
 .project-member-table table {
@@ -301,18 +320,18 @@
   table-layout: fixed;
   border-collapse: collapse;
   text-align: left;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .project-member-table th {
   position: sticky;
   top: 0;
   z-index: 1;
-  padding: 12px 16px;
+  padding: 10px 14px;
   background: #f8fafc;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid #e8edf4;
   color: #475569;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   text-align: left;
   letter-spacing: 0.02em;
@@ -326,18 +345,18 @@
 
 .project-member-table th.col-status,
 .project-member-table td.col-status {
-  width: 22%;
+  width: 20%;
   text-align: left;
 }
 
 .project-member-table th.col-roles,
 .project-member-table td.col-roles {
-  width: 40%;
+  width: 42%;
   text-align: left;
 }
 
 .project-member-table td {
-  padding: 14px 16px;
+  padding: 12px 14px;
   border-bottom: 1px solid #f1f5f9;
   color: #334155;
   text-align: left;
@@ -367,7 +386,7 @@
 .project-status-badge {
   display: inline-flex;
   align-items: center;
-  padding: 3px 8px;
+  padding: 2px 7px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 600;
@@ -403,23 +422,23 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 10px;
-  border-radius: 8px;
+  padding: 3px 8px;
+  border-radius: 6px;
   background: #f1f5f9;
   border: 1px solid #e2e8f0;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   color: #334155;
 }
 
 .project-role button {
-  height: 24px;
-  padding: 2px 8px;
+  height: 22px;
+  padding: 1px 6px;
   border: 1px solid #cbd5e1;
-  border-radius: 6px;
+  border-radius: 4px;
   background: #ffffff;
   color: #64748b;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 500;
 }
 
@@ -433,27 +452,29 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  margin-top: 16px;
-  font-size: 13px;
+  gap: 8px;
+  margin-top: 14px;
+  font-size: 12px;
   color: #64748b;
 }
 
 .project-pagination button {
-  height: 32px;
-  padding: 4px 10px;
+  height: 30px;
+  padding: 2px 8px;
   font-size: 12px;
+  border-radius: 6px;
 }
 
 .project-pagination select {
-  height: 32px;
-  padding: 2px 8px;
+  height: 30px;
+  padding: 1px 6px;
   font-size: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
 }
 
 .project-member-pagination {
-  justify-content: flex-end;
+  margin-top: 14px;
+  justify-content: space-between;
   gap: 12px;
 }
 
@@ -462,53 +483,52 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  margin-right: auto;
   white-space: nowrap;
 }
 
 .member-page-size-label select {
   width: auto;
-  min-width: 68px;
+  min-width: 64px;
 }
 
 .project-empty {
-  padding: 48px 16px;
+  padding: 40px 16px;
   color: #94a3b8;
   text-align: center;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .project-error {
-  margin: 12px 0;
-  padding: 10px 14px;
-  border-radius: 10px;
+  margin: 10px 0;
+  padding: 9px 12px;
+  border-radius: 8px;
   background: #fef2f2;
   border: 1px solid #fecaca;
   color: #dc2626;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .project-notice {
-  margin: 12px 0;
-  padding: 10px 14px;
-  border-radius: 10px;
+  margin: 10px 0;
+  padding: 9px 12px;
+  border-radius: 8px;
   background: #f0fdf4;
   border: 1px solid #bbf7d0;
   color: #16a34a;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .project-confirm {
   display: flex;
   align-items: center;
   gap: 12px;
-  margin: 14px 0;
-  padding: 14px 16px;
-  border-radius: 12px;
+  margin: 12px 0;
+  padding: 12px 14px;
+  border-radius: 10px;
   background: #fffbeb;
   border: 1px solid #fde68a;
   color: #92400e;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .project-editor {
@@ -516,31 +536,31 @@
   grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
   align-items: end;
   gap: 16px;
-  margin-bottom: 24px;
-  padding: 20px;
+  margin-bottom: 20px;
+  padding: 18px;
   border: 1px solid #e2e8f0;
-  border-radius: 16px;
+  border-radius: 14px;
   background: #f8fafc;
 }
 
 .project-editor h3 {
   grid-column: 1 / -1;
   margin: 0;
-  font-size: 18px;
+  font-size: 16px;
   font-weight: 700;
   color: #0f172a;
 }
 
 .project-editor .project-actions {
   grid-column: 1 / -1;
-  margin-top: 8px;
+  margin-top: 6px;
 }
 
 .project-editor label {
   display: flex;
   flex-direction: column;
   gap: 6px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: #334155;
 }
@@ -549,8 +569,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 15px;
+  height: 15px;
   border-radius: 50%;
   background: #e2e8f0;
   color: #64748b;
@@ -562,6 +582,7 @@
 @media (max-width: 1024px) {
   .project-layout {
     grid-template-columns: 1fr;
+    min-height: auto;
   }
 
   .project-grant-form {
@@ -571,4 +592,4 @@
   .project-editor {
     grid-template-columns: 1fr;
   }
-}
+}
\ No newline at end of file