说明
开发进度条的过程中为了工整对齐的效果:文字和进度点竖直方向对齐,进度线和进度点轴线对齐
注意:这里使用了vue 、less,代码里的相关图片样式根据需求替换
预览效果
<template>
<view class="staps_block">
<view v-for="(item,index) in orderStatus" class="steps_item">
<view class="flex_row_center" style="height: 60rpx;">
<view v-if="active-1==index" class="gouxuan flex_row">
<image src="../static/images/gouxuan.png"></image>
</view>
<view v-else-if="active-1>index" class="passed"></view>
<view v-else-if="active-1<index" class="todo"></view>
</view>
<view class="flex_row_center" style="height: 40rpx;line-height: 40rpx;">
<view :class="[active>index?'done_text':'todo_text']">{{item}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
orderStatus: ['已支付', '待发货', '已发货', '待收货', '已完成'],//所有进度
active:1,//当前进度
};
}
}
</script>
<style lang="less" scoped>
.staps_block {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: inherit;
.steps_item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.gouxuan {
height: 32rpx;
width: 32rpx;
border-radius: 50%;
overflow: hidden;
image{
height: 100%;
width: 100%;
z-index: 2;
}
}
.passed {
width: 26rpx;
height: 26rpx;
background: var(--theme-color);
border-radius: 50%;
z-index: 2;
}
.todo {
width: 22rpx;
height: 22rpx;
background: rgba(223, 223, 223, 1);
border-radius: 50%;
z-index: 2;
}
.passed::after,
.gouxuan::after {
content: '';
width: 24%;
height: 4rpx;
background: var(--theme-color);
position: absolute;
top: 28rpx;
z-index: 0;
}
.todo::after {
content: '';
width: 24%;
height: 4rpx;
background: #DFDFDF;
position: absolute;
top: 28rpx;
z-index: 0;
}
.steps_item:last-child .passed::after,
.steps_item:last-child .gouxuan::after,
.steps_item:last-child .todo::after {
content: '';
width: 0;
height: 0;
}
.done_text {
font-size: 28rpx;
color: #333333;
}
.todo_text {
font-size: 24rpx;
color: #999999;
}
}
</style>