移动端步骤4

 

 

<template>
  <div>
    <div class="bdr10 bxs ml10 mr10 bgf">
      <div class="pt20 mt10 f14 cor3 pr10" v-if="stepList && stepList.length">
        <div class="step-item" v-for="(item, index) in stepList" :key="index">
          <div class="item-left">
            <div
              class="item-index"
              :class="{
                activeLine: item.bizStatus != '1002',
              }"
            ></div>
            <div
              :class="{
                activeLine: stepList[index + 1].bizStatus != '1002',
              }"
              v-if="index != stepList.length - 1"
              class="item-line"
            ></div>
          </div>
          <div
            class="item-right pl10"
            :style="{
              opacity: item.bizStatus == '1002' ? 0.7 : 1,
            }"
            :class="{ rightActive: item.bizStatus == '1003' }"
          >
            <div class="flexa">
              <div>测试</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      stepList: [{ status: 2 }, { status: 2 }, { status: 1 }, { status: 1 }],
    };
  },

  created() {},
  mounted() {},

  methods: {
    setColor(status, index) {
      switch (status) {
        case 1:
          return ["#E0E5F7", "#bfbfbf"];
          break;
        case 2:
          return ["#2e7cf9", "#333"];
          break;
        case 4:
          return ["#4caf5f", "#4caf5f"];
          break;
        case 3:
          return ["#e65b54", "#e65b54"];
          break;
        default:
          return ["#e7e7e7", "#bfbfbf"];
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.activeLine {
  background-color: #2e7cf9 !important;
  color: #fff;
}

.step-item {
  display: flex;
  justify-content: flex-start;
  .item-left {
    width: 40px;
    .item-index {
      margin: -1px auto;
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      font-size: 16px;
      // color: #fff;
      // background-color: #2e7cf9;
      background-color: #e0e5f7;
      border-radius: 50%;
      position: relative;
      z-index: 10;
      transform: scale(1.2);
    }
    .item-line {
      margin: 0 auto;
      width: 8px;
      height: 60px;
      background-color: #e0e5f7;
      // background-color: #eaeaea;
    }
  }
  .item-right {
    flex: 1;
    display: flex;
    justify-content: space-between;
    position: relative;
    top: -20px;
    height: 60px;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #f4f4f6;
    color: #999;
  }
  .rightActive {
    background-color: #2e7cf9 !important;
    color: #fff !important;
    font-weight: bold;
    border-radius: 8px;
  }
}
</style>