style(web): 更新审批中心、审计、员工管理、请求列表、差旅报销创建、差旅请求详情等页面的样式文件
This commit is contained in:
caoxiaozhu
@@ -85,10 +85,16 @@
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
table { width: 100%; min-width: 1180px; border-collapse: collapse; table-layout: fixed; }
|
||||
|
||||
th, td {
|
||||
|
||||
@@ -318,12 +318,19 @@
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.table-state,
|
||||
.detail-inline-state {
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -331,6 +338,7 @@
|
||||
padding: 28px 24px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.detail-inline-state {
|
||||
|
||||
@@ -332,10 +332,16 @@
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.list-foot {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
@@ -455,6 +461,7 @@
|
||||
}
|
||||
|
||||
.table-state {
|
||||
width: 100%;
|
||||
min-height: 220px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -462,6 +469,7 @@
|
||||
padding: 28px 20px;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.table-state i {
|
||||
|
||||
@@ -291,11 +291,24 @@
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #fcfefd 0%, #f4f8f6 100%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.table-wrap.is-empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 让表格在flex容器中正常显示 */
|
||||
.table-wrap table {
|
||||
width: 100%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.table-state {
|
||||
width: 100%;
|
||||
min-height: 260px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
@@ -304,6 +317,7 @@
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
background: linear-gradient(180deg, #fcfffd 0%, #f5f9f7 100%);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.table-state .mdi {
|
||||
|
||||
@@ -1062,7 +1062,7 @@
|
||||
}
|
||||
|
||||
.insight-head.review-mode {
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.insight-head-eyebrow {
|
||||
@@ -1092,6 +1092,74 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.review-insight-title-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.review-insight-title-copy h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.review-insight-tools {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(203, 213, 225, 0.92);
|
||||
background: rgba(248, 250, 252, 0.96);
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
flex: 0 0 auto;
|
||||
transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn.available {
|
||||
border-color: rgba(245, 158, 11, 0.28);
|
||||
background: rgba(255, 247, 237, 0.94);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn.active {
|
||||
border-color: rgba(217, 119, 6, 0.42);
|
||||
background: rgba(254, 243, 199, 0.98);
|
||||
color: #b45309;
|
||||
box-shadow: 0 6px 14px rgba(245, 158, 11, 0.16);
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn.risk.available {
|
||||
border-color: rgba(239, 68, 68, 0.28);
|
||||
background: rgba(254, 242, 242, 0.96);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn.risk.active {
|
||||
border-color: rgba(220, 38, 38, 0.42);
|
||||
background: rgba(254, 226, 226, 0.98);
|
||||
color: #b91c1c;
|
||||
box-shadow: 0 6px 14px rgba(239, 68, 68, 0.16);
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.review-insight-switch-icon-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 1;
|
||||
color: #cbd5e1;
|
||||
background: rgba(248, 250, 252, 0.9);
|
||||
}
|
||||
|
||||
.intent-pill {
|
||||
min-height: 30px;
|
||||
display: inline-flex;
|
||||
@@ -1583,6 +1651,10 @@
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.review-ticket-drawer {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.review-document-switch-head {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -1700,6 +1772,18 @@
|
||||
background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
|
||||
}
|
||||
|
||||
.review-document-preview-card.clickable {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.review-document-preview-card.clickable img {
|
||||
transition: transform 0.18s ease;
|
||||
}
|
||||
|
||||
.review-document-preview-card.clickable:hover img {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.review-document-preview-card.image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -2261,81 +2345,16 @@
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(251, 248, 243, 0.82) 100%);
|
||||
}
|
||||
|
||||
.review-alert-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.review-alert-chip-row.subtle {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.review-alert-chip {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 10px;
|
||||
border-radius: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.review-alert-chip.warning {
|
||||
background: rgba(255, 247, 237, 0.94);
|
||||
border-color: #fdba74;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.review-alert-chip.danger {
|
||||
background: rgba(255, 241, 242, 0.96);
|
||||
border-color: #fda4af;
|
||||
color: #e11d48;
|
||||
}
|
||||
|
||||
.review-alert-chip.success {
|
||||
background: rgba(240, 253, 244, 0.96);
|
||||
border-color: #86efac;
|
||||
color: #047857;
|
||||
}
|
||||
/* 已删除：review-alert-chip-row 相关样式（冗余气泡） */
|
||||
/* 已删除：主对话框中的风险提示（与右侧边栏重复，已移除） */
|
||||
|
||||
/* 风险提示样式已统一到 review-pending-item */
|
||||
.review-risk-brief-list {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
display: none; /* 隐藏原有的独立风险提示列表 */
|
||||
}
|
||||
|
||||
.review-risk-brief {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||||
background: rgba(255, 255, 255, 0.84);
|
||||
}
|
||||
|
||||
.review-risk-brief strong {
|
||||
color: #0f172a;
|
||||
font-size: 12px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.review-risk-brief p {
|
||||
margin: 0;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.review-risk-brief.warning {
|
||||
border-color: rgba(251, 146, 60, 0.22);
|
||||
background: rgba(255, 247, 237, 0.88);
|
||||
}
|
||||
|
||||
.review-risk-brief.high {
|
||||
border-color: rgba(248, 113, 113, 0.26);
|
||||
background: rgba(254, 242, 242, 0.92);
|
||||
display: none; /* 隐藏原有的独立风险提示项 */
|
||||
}
|
||||
|
||||
.review-pending-list {
|
||||
@@ -2386,10 +2405,29 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 风险级别的图标样式（已删除主对话框中的风险提示，保留样式备用） */
|
||||
.review-pending-icon.high {
|
||||
background: rgba(254, 226, 226, 0.95);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.review-pending-icon.warning {
|
||||
background: rgba(255, 237, 213, 0.95);
|
||||
color: #ea580c;
|
||||
}
|
||||
|
||||
.review-pending-list.plain .review-pending-icon {
|
||||
background: rgba(236, 253, 245, 0.62);
|
||||
}
|
||||
|
||||
.review-pending-list.plain .review-pending-icon.high {
|
||||
background: rgba(254, 226, 226, 0.62);
|
||||
}
|
||||
|
||||
.review-pending-list.plain .review-pending-icon.warning {
|
||||
background: rgba(255, 237, 213, 0.62);
|
||||
}
|
||||
|
||||
.review-pending-copy {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
@@ -3385,6 +3423,7 @@
|
||||
}
|
||||
|
||||
.composer-files-head,
|
||||
.review-insight-title-row,
|
||||
.review-document-stage-head,
|
||||
.review-document-switch-head {
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -650,6 +650,68 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.attachment-recognition {
|
||||
margin-top: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.attachment-recognition-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.attachment-recognition-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.type {
|
||||
background: #f8fafc;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.pass {
|
||||
background: #ecfdf5;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.medium {
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
}
|
||||
|
||||
.attachment-recognition-pill.high {
|
||||
background: #fef2f2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.attachment-recognition-message {
|
||||
margin: 8px 0 0;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.attachment-recognition-fields {
|
||||
margin: 8px 0 0;
|
||||
padding-left: 16px;
|
||||
color: #475569;
|
||||
font-size: 11px;
|
||||
line-height: 1.5;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.icon-action,
|
||||
.risk-inline-tag {
|
||||
display: inline-flex;
|
||||
|
||||
Reference in New Issue
Block a user