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>
|