You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.0 KiB
119 lines
2.0 KiB
<template> |
|
<view class="task-info-view"> |
|
<view class="task-item" v-for="item in taskList" :key="item.nid"> |
|
<view class="task-item-date"> |
|
{{$moment(item.operateTime).format('YYYY-MM-DD HH:mm')}} |
|
</view> |
|
<view class="task-item-circle"> |
|
<view class="task-item-circle-bg"> |
|
|
|
</view> |
|
</view> |
|
<view class="task-item-name"> |
|
{{item.approvalInfo}} |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
name: "task-info", |
|
props: { |
|
taskInfoList: { |
|
type: Object, |
|
default: () => ({}) |
|
} |
|
}, |
|
computed: { |
|
taskList() { |
|
return Object.entries(this.taskInfoList).map(item => item[1]) |
|
} |
|
}, |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.task-info-view { |
|
.task-item { |
|
height: 80px; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
position: relative; |
|
|
|
&-date { |
|
width: 90px; |
|
text-align: right; |
|
color: #5E6F8A; |
|
position: absolute; |
|
right: calc(50% + 24px); |
|
} |
|
|
|
&-name { |
|
color: #363F4D; |
|
font-weight: bold; |
|
background: rgba(0, 102, 255, 0.1); |
|
padding: 6px 12px; |
|
position: absolute; |
|
left: calc(50% + 24px); |
|
max-width: 125px; |
|
} |
|
|
|
&-circle { |
|
position: relative; |
|
width: 20px; |
|
height: 20px; |
|
border-radius: 50%; |
|
margin: 0 12px; |
|
background: conic-gradient(from 0deg at 50% 50%, #2663BF 0%, rgba(38, 99, 191, 0) 100%); |
|
|
|
&-bg { |
|
width: 16px; |
|
height: 16px; |
|
background: #ffffff; |
|
position: absolute; |
|
left: 2px; |
|
top: 2px; |
|
border-radius: 50%; |
|
} |
|
|
|
&::after { |
|
content: ''; |
|
display: block; |
|
width: 12px; |
|
height: 12px; |
|
border-radius: 50%; |
|
background: #2663BF; |
|
position: absolute; |
|
left: 4px; |
|
top: 4px; |
|
} |
|
|
|
&::before { |
|
content: ''; |
|
display: block; |
|
width: 0px; |
|
height: 53px; |
|
border: 1px dashed #2663BF; |
|
position: absolute; |
|
left: 9px; |
|
top: 22px; |
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
&:last-child { |
|
.task-item-circle { |
|
&::before { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |