style: 全局 UI 主题皮肤重构与样式模块化
引入 Element Plus 主题定制和主题皮肤 composable,将全局 样式拆分为组件级独立 CSS 文件(侧边栏、顶栏、工作台等), 统一色彩变量和间距规范,重构所有视图和组件样式以适配新 主题系统,优化图表和知识图谱组件视觉表现,提取审计和差 旅报销相关子组件。
This commit is contained in:
@@ -16,8 +16,8 @@
|
||||
}
|
||||
|
||||
.opinion-wrap textarea:focus {
|
||||
border-color: #10b981;
|
||||
box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
|
||||
border-color: var(--theme-primary);
|
||||
box-shadow: 0 0 0 3px var(--theme-focus-ring);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -55,8 +55,8 @@
|
||||
.risk-total span { font-weight: 750; }
|
||||
|
||||
.risk-total.high {
|
||||
background: #fee2e2;
|
||||
color: #dc2626;
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger-hover);
|
||||
}
|
||||
|
||||
.risk-total.high strong { font-size: 16px; font-weight: 900; }
|
||||
@@ -87,8 +87,8 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.risk-row.high .risk-icon { background: #fef2f2; color: #ef4444; }
|
||||
.risk-row.medium .risk-icon { background: #fff7ed; color: #f97316; }
|
||||
.risk-row.high .risk-icon { background: var(--danger-soft); color: var(--danger); }
|
||||
.risk-row.medium .risk-icon { background: var(--warning-soft); color: var(--warning-active); }
|
||||
|
||||
.risk-text {
|
||||
flex: 1;
|
||||
@@ -105,8 +105,8 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.risk-level.high { background: #fef2f2; color: #ef4444; }
|
||||
.risk-level.medium { background: #fff7ed; color: #f97316; }
|
||||
.risk-level.high { background: var(--danger-soft); color: var(--danger); }
|
||||
.risk-level.medium { background: var(--warning-soft); color: var(--warning-active); }
|
||||
|
||||
/* ── Side Dual ── */
|
||||
.side-dual {
|
||||
@@ -134,7 +134,7 @@
|
||||
|
||||
.reminder-list li i {
|
||||
margin-top: 2px;
|
||||
color: #f59e0b;
|
||||
color: var(--warning);
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -195,35 +195,35 @@
|
||||
|
||||
.action-btn.supplement {
|
||||
background: #fff;
|
||||
border-color: #fed7aa;
|
||||
color: #ea580c;
|
||||
border-color: var(--warning-line);
|
||||
color: var(--warning-active);
|
||||
}
|
||||
|
||||
.action-btn.supplement:hover {
|
||||
background: #fff7ed;
|
||||
box-shadow: 0 4px 12px rgba(234, 88, 12, .12);
|
||||
background: var(--warning-soft);
|
||||
box-shadow: 0 4px 12px rgba(var(--warning-rgb), .12);
|
||||
}
|
||||
|
||||
.action-btn.reject {
|
||||
background: #fff;
|
||||
border-color: #fecaca;
|
||||
color: #ef4444;
|
||||
border-color: var(--danger-line);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.action-btn.reject:hover {
|
||||
background: #fef2f2;
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, .12);
|
||||
background: var(--danger-soft);
|
||||
box-shadow: 0 4px 12px rgba(var(--danger-rgb), .12);
|
||||
}
|
||||
|
||||
.action-btn.approve {
|
||||
background: #059669;
|
||||
background: var(--theme-primary);
|
||||
color: #fff;
|
||||
box-shadow: 0 4px 16px rgba(5, 150, 105, .25);
|
||||
box-shadow: 0 4px 16px var(--theme-primary-shadow);
|
||||
}
|
||||
|
||||
.action-btn.approve:hover {
|
||||
background: #047857;
|
||||
box-shadow: 0 8px 24px rgba(5, 150, 105, .30);
|
||||
background: var(--theme-primary-active);
|
||||
box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), .30);
|
||||
}
|
||||
|
||||
.action-btn:active { transform: scale(.97); }
|
||||
|
||||
Reference in New Issue
Block a user