<script>
|
export default {
|
props: {
|
active: {
|
type: Number,
|
default: 0
|
}
|
},
|
name: "index"
|
}
|
</script>
|
|
<template>
|
<view class="steps">
|
<view class="num" :class="active >= 0 ? 'active' : ''">
|
<view class="future"></view>
|
<view class="str">第一步</view>
|
</view>
|
<view class="num " :class="active >= 1 ? 'active' : ''">
|
<view class="future" style="margin: auto"></view>
|
<view class="str" style="text-align: center">第二步</view>
|
</view>
|
<view class="num " style="position: relative" :class="active >= 2 ? 'active' : ''">
|
<view style="display: flex;justify-content: end;flex-direction: row"> <view class="future" ></view></view>
|
<view class="str" style="text-align: right">第三步</view>
|
</view>
|
</view>
|
|
</template>
|
|
<style scoped lang="scss">
|
.steps {
|
background: white;
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
display: flex;
|
flex-direction: row;
|
padding: 40rpx ;
|
position: relative;
|
&:after{
|
content: '';
|
position: absolute;
|
width: calc( 100% - 144rpx );
|
height: 4rpx;
|
background: #E7E9ED;
|
top: calc( 50% - 22rpx);
|
left: calc( 94rpx);
|
z-index: 2;
|
}
|
.num{
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
text-align: center;
|
}
|
.future{
|
width: 55rpx;
|
height: 55rpx;
|
display: inline-block;
|
background: white;
|
border-radius: 50%;
|
z-index: 40;
|
position: relative;
|
&::after{
|
position: absolute;
|
content: '';
|
width: 20rpx;
|
height: 20rpx;
|
z-index: 9;
|
background: #AAAAAA;
|
border-radius: 50%;
|
top: calc( 50% - 10rpx);
|
left: calc( 50% - 10rpx);
|
}
|
}
|
.str{
|
|
color: #AAAAAA;
|
font-size: 24rpx;
|
font-weight: 700;
|
margin-top: 14rpx;
|
}
|
|
|
.active{
|
.future{
|
width: 55rpx;
|
height: 55rpx;
|
background: #2865F2;
|
position: relative;
|
z-index: 52;
|
&::after{
|
position: absolute;
|
content: '';
|
width: 20rpx;
|
height: 20rpx;
|
background: white;
|
border-radius: 50%;
|
top: calc( 50% - 10rpx);
|
left: calc( 50% - 10rpx);
|
}
|
}
|
.str{
|
color: #2865F2;
|
}
|
}
|
}
|
|
</style>
|
