<template>
<view class="step_box">
<view class="top" style="margin-bottom: 20rpx">
<text class="item" v-for="(item,index) in list" :key="index">{{item.label}}</text>
</view>
<view class="progress">
<view class="dot_box" :class="{active: handleIndex(index)}" v-for="(item,index) in list" :key="index">
<view class="dot" :class="{active: current >= index}">
</view>
</view>
</view>
<view class="top">
<text class="item" v-for="(item,index) in list" :key="index">{{item.text}}</text>
</view>
</view>
</template>
<script>
export default {
name: "steps",
props: {
current: {
type: Number | String,
default: 0
}
},
data() {
return {
list: [{
text: '打开空仓',
label: '第一步'
}, {
text: '归还旧电池',
label: '第二步'
}, {
text: '更新新电池',
label: '第三步'
}, {
text: '完成换电',
label: '第四步'
}]
};
},
methods: {
handleIndex(i) {
let cur = this.current
return cur === 0 ? false : cur - 1 >= i;
}
}
}
</script>
<style lang="scss" scoped>
.step_box {
width: 100%;
padding: 40rpx 0;
.progress {
margin-bottom: 20rpx;
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
.dot_box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&:not(:last-child)::after {
content: '';
width: 100%;
height: 16rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 15rpx);
background-color: #D8D8D8;
z-index: 0;
}
&:first-child::after {
content: '';
width: 100%;
height: 16rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 15rpx);
background-color: #D8D8D8;
}
&:not(:last-child)::before {
content: '';
width: 0%;
height: 16rpx;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 15rpx);
// background-color: #D8D8D8;
z-index: 1;
transition: .5s;
}
&.active {
&::before {
width:100%;
background-color: #37AA4A;
}
}
.dot {
width: 38rpx;
height: 38rpx;
border-radius: 92px;
background: #D8D8D8;
position: relative;
z-index: 4;
&.active {
transition-delay: 0.5s;
background: #37AA4A;
}
}
}
}
.top {
display: flex;
align-items: center;
justify-content: space-around;
.item {
font-family: Source Han Sans;
font-size: 32rpx;
font-weight: bold;
line-height: normal;
letter-spacing: 0em;
font-feature-settings: "kern" on;
color: #3D3D3D;
}
}
}
</style>
自适应动画的步骤条CSS3
于 2024-01-18 14:05:26 首次发布