97 lines
1.8 KiB
Vue
97 lines
1.8 KiB
Vue
<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> |