移动端步骤3 自动伸缩

<template >
  <div
    class="pt80 mt10 f14 cor3 pr10 pl10"
    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"
          :style="{ backgroundColor: setColor(item.status, index)[0] }"
        >
          <span v-if="item.status == 4">
            <i class="iconfont icon-ticketgou1"></i>
          </span>
          <span v-if="item.status == 3">
            <i class="iconfont icon-ticketshanchu2"></i>
          </span>
        </div>
        <div
          :class="{
            activeLine: stepList[index + 1].status != 1,
          }"
          v-if="index != stepList.length - 1"
          class="item-line"
        ></div>
      </div>
      <div
        class="item-right pl10"
        :style="{
          opacity: item.status == 1 ? 0.7 : 1,
        }"
      >
        <div>测试数据</div>
        <div class="bgf">
          <div class="mt10 p10">1</div>
        
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  components: {
  },

  data() {
    return {
      stepList: [{ status: 2 }, { status: 2 }, { status: 1 }, { status: 1 }],
    };
  },
  created() {},
  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;
}
.red {
  color: #e65b54;
  background-color: #e65b54;
}
.green {
  color: #4caf5f;
  background-color: #4caf5f;
}

.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;
      border-radius: 50%;
      position: relative;
      z-index: 10;
      transform: scale(1.2);
    }
    .item-line {
      margin: 0 auto;
      width: 8px;
      // min-height: 60px;
      height: 100%;
      // height: calc(100% + 50px);
      background-color: #e0e5f7;
      // background-color: #eaeaea;
    }
  }
  .item-right {
    flex: 1;
    // display: flex;
    // justify-content: space-between;
    position: relative;
    top: -15px;
    min-height: 60px;
    // background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
  }
}

.main {
  position: relative;
  .header {
    // height: 50px;
    line-height: 50px;
    position: fixed;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 100;
  }
  .content {
    height: calc(100%);
    background: #f5f8f8;
    padding-top: 50px;
    padding-bottom: 70px;
    overflow: auto;
    .contentTitle {
      background: #fff;
      height: 50px;
      border-bottom: 1px solid #ddd;
      div:nth-child(2) {
        line-height: 50px;
      }
      div:nth-child(3) {
        height: 16px;
        margin-top: 20px;
      }
    }
    .contentForm {
      .formList {
        background: #fff;
        border-bottom: 1px solid #ddd;
      }
    }
  }
  .formList \deep\ .van-field--error .van-field__control,
  .van-field--error .van-field__control::placeholder {
    color: #c8c9cc;
  }
  .footer {
    // height: 50px;
    padding: 5px 0;
    position: fixed;
    background: #fff;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    & > span {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .iconfont {
      font-size: 20px;
    }
  }
}
.index-btn {
  .van-button {
    width: 70px;
  }
}
</style>