为了方便复用,在此记录一下!
效果如图所示
css核心代码:
.active{
background-color:#fea6a2;
background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
}
流程布局如图所示:
颜色,图标,数量,进度条长度可根据自身业务需求变更
代码如下:
wxml:
<view class='headBox'>
<view class='head flex align-items-center justify-content-center'>
<view>
<image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/pindan.png"></image>
</view>
<view>
<image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/yaoqinghaoyou.png"></image>
</view>
<view>
<image mode='widthFix' src="{{img_dir}}/mod/coupon/assets/cityjia_img/zhongjiang2.png"></image>
</view>
</view>
<view class='progress-grey'></view>
<view class='head flex align-items-center justify-content-center font-size-10 color-black'>
<view>
<text>拼单</text>
</view>
<view>
<text>邀请好友</text>
</view>
<view>
<text>拼单成功</text>
</view>
</view>
<view class='progress'></view>
<view class='activeBox flex align-items-center justify-content-center'>
<view>
<view class='circle circle-active'></view>
</view>
<view style='padding-top:16rpx;'>
<view class='triangle'></view>
</view>
<view>
<view class='circle circle-grey'></view>
</view>
</view>
</view>
为了提高工作效率,上图中一些常用class,例如 flex align-items-center 等都是引用的,大家应该都能从这些class的名字中得到有效代码。这里的css中没有重复写出,如果用到,请将这些class根据其名称转化为有效的css代码
css:
.headBox {
position: relative;
background-color: white;
}
.head {
width: 100%;
padding: 5rpx 0;
}
.head image {
width: 45rpx;
}
.head>view {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.progress-grey {
width: 100%;
height: 5rpx;
background-color: #ddd;
border-radius: 10rpx;
margin:5rpx 0;
}
.progress {
position: absolute;
top: 57rpx;
left: 0;
width: 50%;
height: 7rpx;
background-color:#fea6a2;
background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
border-radius: 20rpx;
}
.activeBox{
width: 100%;
height: 15rpx;
position: absolute;
top: 50rpx;
left: 0rpx;
}
.activeBox>view{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
width: 12rpx;
height: 12rpx;
border-radius: 50%;
}
.circle-grey{
background-color: #ddd;
}
.circle-active{
background-color:#fea6a2;
background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem);
}
.triangle{
border: 10rpx solid #FE7672;
border-bottom: 10rpx solid transparent;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
}
希望这些冗杂的布局代码能够节约你们宝贵的开发时间!