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.
102 lines
2.4 KiB
102 lines
2.4 KiB
<template>
|
|
<a-steps direction="vertical" :current="size">
|
|
<template v-for="(item, index) in dataSource" :key="index">
|
|
<a-step title="">
|
|
<template #icon>
|
|
<ns-icon size="24" :name="item.src" />
|
|
</template>
|
|
<template #description>
|
|
<div class="card">
|
|
<div class="card-title">
|
|
<div class="name">{{ item.realName }}</div>
|
|
<a-tag
|
|
class="card-title-tag"
|
|
:style="{
|
|
'background-color': item.bgColor,
|
|
border: '1px solid ' + item.color,
|
|
color: item.color,
|
|
}"
|
|
>{{ item.stateName }}
|
|
</a-tag>
|
|
<div class="time">{{ item.createTime }}</div>
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
max-height: 35px;
|
|
overflow-y: scroll;
|
|
padding: 7px 0px;
|
|
">
|
|
{{ item.remarks }}</div
|
|
>
|
|
</div>
|
|
</template>
|
|
</a-step>
|
|
</template>
|
|
</a-steps>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { toRefs } from 'vue';
|
|
|
|
type Props = {
|
|
dataSource: any;
|
|
size: any;
|
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const { dataSource } = toRefs(props);
|
|
const { size } = toRefs(props);
|
|
|
|
defineExpose({});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.ant-steps-vertical {
|
|
margin-left: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
.card {
|
|
width: 450px;
|
|
height: 90px;
|
|
background: rgba(191, 205, 226, 0.1);
|
|
border-radius: 4px; /* 设置圆角半径 */
|
|
padding: 12px;
|
|
margin-left: 8px;
|
|
.card-title {
|
|
width: 100%;
|
|
height: 30px;
|
|
display: flex;
|
|
position: relative;
|
|
.card-title-tag {
|
|
width: 50px;
|
|
height: 24px;
|
|
text-align: center;
|
|
line-height: 24px;
|
|
margin-left: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.name {
|
|
left: 12px;
|
|
top: -2px;
|
|
font-size: 16px;
|
|
color: rgba(153, 153, 153, 1);
|
|
}
|
|
.time {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: -2px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
}
|
|
:deep(.ant-steps-item-tail) {
|
|
position: absolute !important;
|
|
// top: -10px !important;
|
|
left: 16px !important;
|
|
width: 1px !important;
|
|
height: 120% !important;
|
|
}
|
|
:deep(.ant-steps-item) {
|
|
margin-top: 20px !important;
|
|
}
|
|
</style>
|
|
|