YG-Soft/X-Financial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(web): update view styles

Browse Source 
- audit-view.css: update audit view styles
- requests-view.css: update requests view styles
- travel-reimbursement-create-view.css: update travel form styles
- travel-request-detail-view.css: update travel detail view styles
This commit is contained in:
caoxiaozhu
2026-05-13 03:24:49 +00:00
parent cea8239370
commit 99231f30f1
4 changed files with 357 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
web/src/assets/styles/views/travel-request-detail-view.css
View File

@@ -101,7 +101,8 @@
}
.risk-pill,
.state-pill {
.state-pill,
.approval-pill {
width: max-content;
padding: 5px 10px;
border-radius: 6px;
@@ -109,10 +110,47 @@
font-weight: 850;
}
.risk-pill.high { background: #fee2e2; color: #ef4444; }
.risk-pill.medium { background: #ffedd5; color: #f97316; }
.risk-pill.low { background: #dcfce7; color: #059669; }
.state-pill { background: #dbeafe; color: #2563eb; }
.state-pill.info,
.approval-pill.info,
.risk-pill.info {
background: #eff6ff;
color: #2563eb;
}
.state-pill.success,
.approval-pill.success,
.risk-pill.success,
.risk-pill.low {
background: #dcfce7;
color: #059669;
}
.state-pill.warning,
.approval-pill.warning,
.risk-pill.warning,
.risk-pill.medium {
background: #fff7ed;
color: #ea580c;
}
.state-pill.danger,
.approval-pill.danger,
.risk-pill.danger,
.risk-pill.high {
background: #fef2f2;
color: #dc2626;
}
.state-pill.draft,
.approval-pill.draft {
background: #fffbeb;
color: #d97706;
}
.risk-pill.neutral {
background: #f1f5f9;
color: #475569;
}
.countdown {
display: inline-flex;
@@ -195,7 +233,7 @@
.progress-line {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(var(--progress-columns, 5), minmax(0, 1fr));
}
.progress-step {
@@ -369,6 +407,18 @@
line-height: 1.5;
}
.detail-note {
min-height: 84px;
padding: 12px 14px;
border: 1px solid #d7e0ea;
border-radius: 8px;
background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
color: #334155;
font-size: 13px;
line-height: 1.7;
white-space: pre-wrap;
}
.detail-expense-table {
min-width: 0;
overflow-x: auto;
@@ -407,13 +457,49 @@
.detail-expense-table th:nth-child(2),
.detail-expense-table td:nth-child(2) { width: 12%; }
.detail-expense-table th:nth-child(3),
.detail-expense-table td:nth-child(3) { width: 23%; }
.detail-expense-table td:nth-child(3) { width: 21%; }
.detail-expense-table th:nth-child(4),
.detail-expense-table td:nth-child(4) { width: 10%; }
.detail-expense-table th:nth-child(5),
.detail-expense-table td:nth-child(5) { width: 18%; }
.detail-expense-table td:nth-child(5) { width: 16%; }
.detail-expense-table th:nth-child(6),
.detail-expense-table td:nth-child(6) { width: 25%; }
.detail-expense-table td:nth-child(6) { width: 21%; }
.detail-expense-table th:nth-child(7),
.detail-expense-table td:nth-child(7) { width: 8%; }
.cell-editor {
display: grid;
gap: 6px;
}
.editor-stack {
grid-template-columns: minmax(0, 1fr);
}
.editor-input,
.editor-select {
width: 100%;
min-height: 34px;
padding: 0 10px;
border: 1px solid #d7e0ea;
border-radius: 8px;
background: #fff;
color: #0f172a;
font-size: 12px;
}
.editor-input:focus,
.editor-select:focus {
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
outline: none;
}
.cell-editor span {
color: #64748b;
font-size: 11px;
line-height: 1.45;
}
.expense-time strong,
.expense-type strong,
@@ -498,11 +584,33 @@
font-weight: 800;
}
.inline-action.primary {
border-color: #10b981;
background: #10b981;
color: #fff;
}
.inline-action:hover {
border-color: rgba(16, 185, 129, .36);
color: #047857;
}
.inline-action.primary:hover {
border-color: #059669;
background: #059669;
color: #fff;
}
.expense-action-cell {
min-width: 84px;
}
.row-action-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.risk-inline-tag.low { background: #ecfdf5; color: #059669; }
.risk-inline-tag.medium { background: #fff7ed; color: #ea580c; }
.risk-inline-tag.high { background: #fef2f2; color: #dc2626; }
@@ -574,6 +682,13 @@
font-weight: 760;
}
.detail-actions button:disabled,
.inline-action:disabled {
cursor: not-allowed;
opacity: .58;
box-shadow: none;
}
.back-action {
min-width: 104px;
border: 1px solid #d7e0ea;
@@ -597,17 +712,66 @@
}
.reject-action {
min-width: 86px;
min-width: 98px;
border: 1px solid #fecaca;
background: #fff;
color: #ef4444;
}
.supplement-action {
min-width: 86px;
border: 1px solid #fed7aa;
background: #fff;
color: #ea580c;
.detail-action-hint {
color: #64748b;
font-size: 13px;
line-height: 1.6;
}
.validation-card {
border: 1px solid #e6f0eb;
background: linear-gradient(180deg, #fcfffd 0%, #f7fbf9 100%);
}
.validation-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 8px;
}
.validation-pill {
min-height: 26px;
display: inline-flex;
align-items: center;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.validation-pill.ready {
background: #dcfce7;
color: #047857;
}
.validation-pill.pending {
background: #fff7ed;
color: #c2410c;
}
.validation-summary {
margin: 0;
color: #475569;
font-size: 13px;
line-height: 1.6;
}
.validation-list {
display: grid;
gap: 6px;
margin-top: 12px;
padding-left: 18px;
color: #b45309;
font-size: 13px;
line-height: 1.55;
}
.detail-overlay {