pay-customer/src/components/hs-steps/hs-steps.vue

<template>
  <view class="StepsContent">
    <template v-for="(i, index) in props?.items" :key="index">
      <view
        v-if="index === 0"
        :class="
          props?.current > 0
            ? 'StepsItems StepsItemsRightActive'
            : 'StepsItems StepsItemsRightDefault'
        "
      >
        <view class="StepsDotContent">
          <view class="StepsDot" :style="index <= props?.current?getStyleBgInfo():{}">
            {{ index + 1 }}
          </view>
          <view class="label" :style="index <= props?.current?getStyleColorInfo():{}"> {{ i }} </view>
        </view>
        <view class="StepsItemsDivider DividerRight" :style="props?.current > 0?{backgroundColor:getStyleColorValueInfo()}:{}"> </view>
      </view>
      <view
        v-else
        :class="
          index < props?.current
            ? 'StepsItems StepsItemsAllActive'
            : index === props?.current
              ? 'StepsItems StepsItemsLeftActive'
              : 'StepsItems'
        "
      >
        <view class="StepsItemsDivider DividerLeft" :style="index === props?.current?{backgroundColor:getStyleColorValueInfo()}:{}"></view>
        <view class="StepsDotContent">
          <view class="StepsDot" :style="index <= props?.current?getStyleBgInfo():{}">
            {{ index + 1 }}
          </view>
          <view class="label" :style="index <= props?.current?getStyleColorInfo():{}"> {{ i }} </view>
        </view>
        <view v-if="index < props?.items?.length - 1" class="StepsItemsDivider DividerRight"></view>
      </view>
    </template>
  </view>
</template>
<script lang="ts" setup>
import { getStyleBgInfo ,getStyleColorInfo,getStyleColorValueInfo} from '@/common/libraries/getPageConfig'
const OnlineItems = ['创建', '生成', '签署', '交房', '完成']
const OfflineItems = ['创建', '生成', '交房', '完成']
const props = defineProps({
  current: {
    type: Number,
    default: 0
  },
  items: {
    type: Array,
    default: ['创建', '生成', '签署', '交房', '完成']
  },
  data: {
    type: Object,
    default: {}
  }
})
</script>
<style lang="scss" scoped>
.StepsContent {
  width: 100%;
  position: relative;
  padding: 30rpx 0;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 26rpx;
  background-color: #fff;
  .StepsDotContent {
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;
    padding: 0 10px;
    z-index: 10;
  }
  .StepsItems {
    position: relative;
    color: #999;
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .label {
      background-color: #fff;
      padding: 0 5rpx 0 20rpx;
      font-size: 30rpx;
    }
    .StepsItemsDivider {
      position: absolute;
      width: 50%;
      height: 1rpx;
      top: 0;
      margin-top: 35rpx;
      background-color: #d8d8d8;
      z-index: 1;
    }
    .DividerLeft {
      left: 0;
    }
    .DividerRight {
      right: 0;
    }
    .StepsDot {
      width: 60rpx;
      height: 60rpx;
      border: 1px solid #cbcbcb;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      background-color: #cbcbcb;
      color: #fff;

      font-size: 30rpx;
      .StepsDotSolid {
        background-color: #2a7efb;
        width: 22rpx;
        height: 22rpx;
        border-radius: 100%;
      }
    }
  }
  .StepsItemsAllActive {
    color: #333;
    .DividerLeft,
    .DividerRight {
      background-color: #2a7efb;
    }
    .StepsDot {
      border: 1px solid #2a7efb;
      background-color: #2a7efb;
    }
    .label {
      font-weight: 500;
      color: #2a7efb;
    }
  }
  .StepsItemsLeftActive {
    color: #333;
    .DividerLeft {
      background-color: #2a7efb;
    }
    .StepsDot {
      border: 1px solid #2a7efb;
      background-color: #2a7efb;
    }
    .label {
      font-weight: 500;
      color: #2a7efb;
    }
  }
  .StepsItemsRightActive {
    color: #333;
    .DividerRight {
      background-color: #2a7efb;
    }
    .StepsDot {
      border: 1px solid #2a7efb;
      background-color: #2a7efb;
    }
    .label {
      font-weight: 500;
      color: #2a7efb;
    }
  }
  .StepsItemsRightDefault {
    color: #333;
    .DividerRight {
      background-color: #d8d8d8;
    }
    .StepsDot {
      border: 1px solid #2a7efb;
      background-color: #2a7efb;
    }
    .label {
      font-weight: 500;
      color: #2a7efb;
    }
  }
}
</style>