【CSS】静态螺纹进度条和静态流程布局

最新推荐文章于 2022-12-11 23:07:28 发布

NAMECZ

最新推荐文章于 2022-12-11 23:07:28 发布

阅读量794

点赞数 2

分类专栏： CSS 文章标签：条纹进度条流程螺纹进度条斜纹进度条

本文链接：https://blog.csdn.net/NAMECZ/article/details/83622049

版权

CSS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

为了方便复用，在此记录一下！

效果如图所示

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

希望这些冗杂的布局代码能够节约你们宝贵的开发时间！