【uniapp】自定义步骤条样式实现

news2025/1/17 3:42:37

效果图

在这里插入图片描述

实现

<!-- 步骤条 -->
<view class="progress-wrap">
  <view class="progress-box">
    <view :class="['normal-number', active > 0 ? 'active-number' : '']">1</view>
    <view :class="['normal-desc', active > 0 ? 'active-desc' : '']">学生认证</view>
  </view>
  <view class="progress-box">
    <view :class="['normal-number', active > 1 ? 'active-number' : '']">2</view>
    <view :class="['normal-desc', active > 1 ? 'active-desc' : '']">信息核实</view>
  </view>
  <view class="progress-box">
    <view :class="['normal-number', active > 2 ? 'active-number' : '']">3</view>
    <view :class="['normal-desc', active > 2 ? 'active-desc' : '']">发放权益</view>
  </view>
  <view :class="['progress-line', active < 3 ? 'bg1' : 'bg2']">
    <block v-if="active < 3">
      <view :class="['dot', 'left1', active > 1 ? 'w4' : 'w1']"></view>
      <view :class="['dot', 'w2', active > 1 ? 'left4' : 'left2']"></view>
      <view :class="['dot', 'w3', active > 1 ? 'left5' : 'left3']"></view>
    </block>
  </view>
</view>

data() {
  return {
    active: 1, // 步骤条， 1-学生认证 2-信息核实 3-发放权益
  }
}

.progress-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
  padding: 0 60rpx;
  position: relative;
  
  .progress-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 96rpx;
    
    .normal-number {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: #fff;
      color: #aaacae;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      margin-bottom: 12rpx;
    }
    .normal-desc {
      font-size: 24rpx;
      line-height: 40rpx;
      color: #aaacae;
    }
    .active-number {
      background: #fe7777;
      color: #fff;
    }
    .active-desc {
      color: #2d2f37;
    }
  }
  
  .progress-line {
    position: absolute;
    left: 108rpx;
    right: 108rpx;
    top: 16rpx;
    width: 534rpx;
    height: 8rpx;
    border-radius: 4rpx;
    z-index: -2;
  }
  .bg1 {
    background: transparent;
  }
  .bg2 {
    background: #fe7777;
  }
  .dot {
    position: absolute;
    top: 0;
    height: 8rpx;
    border-radius: 4rpx;
    background: #fe7777;
    z-index: -1;
  }
  .w1 {
    width: 110rpx;
  }
  .w2 {
    width: 16rpx;
  }
  .w3 {
    width: 12rpx;
  }
  .w4 {
    width: 378rpx;
  }
  .left1 {
    left: 0;
  }
  .left2 {
    left: 126rpx;
  }
  .left3 {
    left: 158rpx;
  }
  .left4 {
    left: 394rpx;
  }
  .left5 {
    left: 426rpx;
  }
}