<template>
  <view class="step-container">
    <view class="step-item" :class="{ done: index < current, active: index == current }"
      v-for="(item, index) in stepList" :key="index">
      <!-- 节点圆圈 -->
      <view class="step-circle">{{ index + 1 }}</view>
      <!-- 文字 -->
      <view class="step-text">{{ item }}</view>
      <!-- 连接线（最后一个不显示） -->
      <view class="step-line" v-if="index !== stepList.length - 1"></view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 步骤列表
const stepList = ref(['创建', '审核', '绑定', '完成'])
// 当前进度（0开始）
const current = ref(2)
</script>

<style scoped>
/* 整体容器 */
.step-container {
  display: flex;
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
}

/* 单个步骤 */
.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 节点圆圈 */
.step-circle {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: #cdd4e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  z-index: 10;
}

/* 文字 */
.step-text {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #999;
}

/* 连接线 */
.step-line {
  position: absolute;
  top: 20rpx;
  left: 50%;
  width: 100%;
  height: 4rpx;
  background: #cdd4e0;
  z-index: 1;
}

/* ============= 状态样式 ============= */
/* 已完成 */
.step-item.done .step-circle {
  background: #07c160;
}

.step-item.done .step-line {
  background: #07c160;
}

.step-item.done .step-text {
  color: #07c160;
}

/* 当前激活 */
.step-item.active .step-circle {
  background: #465bfd;
}

.step-item.active .step-text {
  color: #465bfd;
  font-weight: bold;
}
</style>