移动端步骤2

 

<template>
  <!-- 新计划预约 -->
  <div>
    <div class="bdr10 bxs ml10 mr10">
      <div class="pt50 mt10 f14 cor3" 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
              class="cor9"
              :style="{ color: setColor(item.status, index)[1] }"
            >
              <div>xxxx</div>
              <div class="f12 cor9">xxxx</div>
            </div>
            <div class="index-btn">
              <van-button type="info" class="mr10" size="mini">
                <span>去修改</span>
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getBeforeWork,
} from "@/api/workRail/workRail";

export default {
  name: "endStep",
  components: {},
  data () {
    return {
      stepList: [
        { status: 2, },
        { status: 2, },
        { status: 1, },
        { status: 1, }
      ],
    };
  },

  created () {
    // this.getBeforeWork();
  },
  mounted () { },

  methods: {
    // 开始接卸
    async startWorkSureFn () {
      const result = await createWorkFPSOplan(datVal);
      if (result.code == 200) {

      }
    },
    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;
      }
    },
    async getBeforeWork () {
      const res = await getBeforeWork({
        planId: this.$route.query.planInfoId,
      });
      if (res.code == 200) {
        // this.stepList = res.data.list;

      }
    },

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