frontend-uniapp/src/components/FeedStep.vue

<script setup lang="ts">
const props = withDefaults(defineProps<{
  list: Array<{
    step: number
    title: string
  }>
  stage: number
}>(), {
  stage: -1,
})
</script>

<template>
  <view v-for="(item, index) in props.list" :key="index">
    <view class="flex">
      <view class="flex items-center justify-center text-[white]" :class="props.stage === index ? 'step_select' : props.stage === -1 ? 'step' : 'step step_left' ">
        {{ item.step }}
      </view>
      <view class="ml-1 font-pingfangsc tracking-[0.8px]" :class="props.stage === index ? 'step_title_select' : 'step_title' ">
        {{ item.title }}
      </view>
    </view>
    <view v-if="index !== props.list.length - 1" class="w-[1px] h-[13px] bg-[#999] mt-1 mb-1 step_line" :class="props.stage === -1 ? 'step_line' : 'step_line_select' " />
  </view>
</template>

<style scoped>
.step{
  background: #999999;
  width: 21px;
  height: 21px;
  border-radius: 30px;
}
.step_left{
  margin-left: 3px;
}
.step_select{
  background: #0052D9;
  width: 27px;
  height: 27px;
  border-radius: 20px;
}
.step_title{
  color: #999999;
  font-size:16px;
}
.step_title_select{
  color: #151515;
  font-size: 20px;
}
.step_line{
  margin-left: 10px;
}
.step_line_select{
  margin-left: 13px;
}
</style>