style: 优化项目与成员页面整体布局、分栏比例与卡片层次
Some checks are pending
Some checks are pending
This commit is contained in:
parent
6efa4ac90f
commit
bca5417227
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user