34 lines
869 B
Vue
34 lines
869 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
timeLineList: {
|
|
type: Array, // 类型校验
|
|
required: true, // 必传
|
|
},
|
|
currentStep: {
|
|
type: Number,
|
|
default: 0, // 默认值
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-between items-center">
|
|
<div v-for="(item, index) in props.timeLineList" :key="index" class="flex items-center text-[18px]">
|
|
<div
|
|
:style="props.currentStep >= item.index ? { border: '2px solid #203df5' } : {}"
|
|
class="w-[40px] h-[40px] rounded-full bg-[#eee] text-center flex items-center justify-center"
|
|
>
|
|
{{ item.index }}
|
|
</div>
|
|
<div
|
|
class="ml-2 flex items-center font-bold"
|
|
:style="props.currentStep >= item.index ? { color: '#203df5' } : {}"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style></style>
|