feat: 工作流审批页面-头像右下角状态icon本体颜色与背景色调整优化

pull/586/MERGE
GoldenZqqq 2024-11-14 10:00:48 +08:00
parent 0db0b66051
commit 2719541462
1 changed files with 14 additions and 19 deletions

View File

@ -16,9 +16,10 @@
<img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" /> <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
<div <div
v-if="showStatusIcon" v-if="showStatusIcon"
class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
:style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
> >
<el-icon :size="12" :color="getApprovalNodeColor(activity.status)"> <el-icon :size="12" color="#fff">
<component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" /> <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
</el-icon> </el-icon>
</div> </div>
@ -105,13 +106,10 @@
<!-- 信息任务 ICON --> <!-- 信息任务 ICON -->
<div <div
v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)" v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
:style="{ backgroundColor: statusIconMap2[task.status]?.color }"
> >
<Icon <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
:size="12"
:icon="statusIconMap2[task.status]?.icon"
:color="statusIconMap2[task.status]?.color"
/>
</div> </div>
</div> </div>
</div> </div>
@ -142,13 +140,10 @@
<!-- 信息任务 ICON --> <!-- 信息任务 ICON -->
<div <div
v-if="showStatusIcon" v-if="showStatusIcon"
class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px" class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
:style="{ backgroundColor: statusIconMap2['-1']?.color }"
> >
<Icon <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
:size="12"
:icon="statusIconMap2['-1']?.icon"
:color="statusIconMap2['-1']?.color"
/>
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +185,7 @@ const statusIconMap2 = {
// //
'-1': { color: '#909398', icon: 'ep-clock' }, '-1': { color: '#909398', icon: 'ep-clock' },
// //
'0': { color: '#e5e7ec', icon: 'ep:loading' }, '0': { color: '#00b32a', icon: 'ep:loading' },
// //
'1': { color: '#448ef7', icon: 'ep:loading' }, '1': { color: '#448ef7', icon: 'ep:loading' },
// //
@ -210,7 +205,7 @@ const statusIconMap2 = {
const statusIconMap = { const statusIconMap = {
// //
'-1': { color: '#909398', icon: Clock }, '-1': { color: '#909398', icon: Clock },
'0': { color: '#e5e7ec', icon: Clock }, '0': { color: '#00b32a', icon: Clock },
// //
'1': { color: '#448ef7', icon: Loading }, '1': { color: '#448ef7', icon: Loading },
// //
@ -229,9 +224,9 @@ const statusIconMap = {
const nodeTypeSvgMap = { const nodeTypeSvgMap = {
// //
[NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg }, [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
// //
[NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg }, [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
// //
[NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg }, [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
// //