会拐弯的步骤条

子组件html部分

js部分 

 

css部分

<style lang='scss' scoped>

.my-step {

  width: fit-content;

  max-width: 100%;

  height: 100%;

  padding: 100px;

  background-color: #fff;

  .step-icon {

    position: relative;

    width: 30px;

    height: 30px;

    background-color: #fff;

    z-index: 10;

    .top-title {

      position: absolute;

      bottom: 30px;

      width: 100px;

      text-align: center;

      font-weight: 600;

      font-size: 17px;

    }

    .bottom-title {

      position: absolute;

      top: 40px;

      width: 200px;

    }

  }

  .myarrow-right::before {

    position: absolute;

    bottom: -6px;

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 50%, 100% 100%, 100% 0);

    background-color: #000;

  }

  .myarrow-left::before {

    position: absolute;

    bottom: -6px;

    right: -2px;

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 0, 0% 100%, 100% 50%);

    background-color: #000;

  }

  .myarrow-right {

    position: absolute;

    width: 180px;

    top: 16px;

    left: 26.5px;

    border-radius: 0 5px 5px 0;

    border: 2px solid #000;

    border-left-color: rgba(0, 0, 0, 0) !important;

  }

  .myarrow-left {

    position: absolute;

    width: 157px;

    left: -160px;

    top: 15px;

    border-radius: 5px 0px 0px 5px;

    border: 2px solid #000;

    border-right-color: rgba(0, 0, 0, 0) !important;

  }

  .myarrow-row-right,

  .myarrow-row-left {

    height: 2px;

    // background-color: #000;

    background-color: rgba(0, 0, 0, 0.3);

    transform: translateY(-15px);

  }

  .myarrow-row-right::before {

    position: absolute;

    bottom: -4px;

    content: '';

    right: 0;

    width: 10px;

    height: 10px;

    clip-path: polygon(0 0, 0% 100%, 100% 50%);

    background-color: currentColor;

  }

  .myarrow-row-left::before {

    position: absolute;

    bottom: -4px;

    left: 30px;

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 50%, 100% 100%, 100% 0);

    background-color: currentColor;

  }

  .activeColor {

    background-color: #5cb8b2;

  }

  .grayColor {

    background-color: rgba(0, 0, 0, 0.6);

  }

  .activeBorderColor {

    border-color: #5cb8b2;

  }

  .activeGrayColor {

    border-color: rgba(0, 0, 0, 0.6);

  }

  .activeColor::before {

    color: #5cb8b2 !important;

  }

  .activeBorderColor::before {

    background-color: #5cb8b2 !important;

  }

}

.mb100 {

  margin-bottom: 85px;

}

.ml100 {

  margin-left: 100px;

}

</style>

父组件html

 js部分

 css

<style lang="scss" scoped>

/deep/.iconCss {

  border: none !important;

  padding: 0px 0px 0px 2px;

}

/deep/.el-drawer__header {

  color: #ffffff;

  margin-bottom: 32px;

  background-color: #5cb8b2;

  padding: 10px;

  height: 10px;

  display: flex !important;

  font-size: 13px;

}

/deep/.el-drawer__close-btn {

  font-size: 11px !important;

}

/deep/.el-icon-edit {

  font-weight: 600 !important;

  font-size: 25px !important;

  color: rgba(0, 0, 0, 0.3);

}

/deep/.el-icon-circle-check {

  font-weight: 600 !important;

  font-size: 25px !important;

  color: #5cb8b2;

}

//  -----------------------

/deep/.my-step {

  position: relative;

  /* width: 90%;

  height: 100%;

  padding-left: 100px; */

  padding: 100px 0px 100px 160px !important;

  background-color: #fff;

  .step-icon {

    position: relative;

    width: 30px;

    height: 30px;

    background-color: #fff;

    z-index: 10;

    .top-title {

      position: absolute;

      bottom: 30px;

      font-size: 13px !important;

    }

    .bottom-title {

      position: absolute;

      top: 30px;

      width: 118px;

      .operationCss {

        text-align: center;

        color: rgba(0, 0, 0, 0.3);

        font-weight: 600;

        font-size: 12px;

      }

      .openCss {

        text-align: center;

        font-size: 15px;

        font-weight: 600;

      }

      .elseOpenCss {

        text-align: center;

        font-size: 15px;

        font-weight: 600;

        color: rgba(0, 0, 0, 0.3);

      }

    }

  }

  .myarrow-right::before {

    position: absolute;

    bottom: -5px;

    // right: -11px;

    // transform: translate(-5px,105px);

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 50%, 100% 100%, 100% 0);

    background-color: #000;

  }

  .myarrow-left::before {

    position: absolute;

    bottom: -5px;

    right: 0px;

    // transform: translate(-5px,105px);

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 0, 0% 100%, 100% 50%);

    background-color: #000;

  }

  .myarrow-right {

    position: absolute;

    width: 100px;

    // height: 115px;

    top: 15px;

    left: 30px;

    border-radius: 0 5px 5px 0;

    border: 1px solid #000;

    border-left-color: rgba(0, 0, 0, 0);

  }

  .myarrow-left {

    position: absolute;

    width: 100px;

    // height: 115px;

    left: -100px;

    top: 15px;

    border-radius: 5px 0px 0px 5px;

    border: 1px solid #000;

    border-right-color: rgba(0, 0, 0, 0);

  }

  .myarrow-row-right,

  .myarrow-row-left {

    height: 1px;

    background-color: #000;

    transform: translateY(-15px);

    width: 220px !important;

  }

  .myarrow-row-right::before {

    position: absolute;

    bottom: -5px;

    content: '';

    right: 0;

    width: 10px;

    height: 10px;

    clip-path: polygon(0 0, 0% 100%, 100% 50%);

    background-color: currentColor;

  }

  .myarrow-row-left::before {

    position: absolute;

    bottom: -5px;

    left: 30px;

    content: '';

    width: 10px;

    height: 10px;

    clip-path: polygon(0 50%, 100% 100%, 100% 0);

    background-color: #000;

  }

  .activeColor {

    background-color: #5cb8b2;

  }

  .grayColor {

    background-color: rgba(0, 0, 0, 0.6);

  }

  .activeBorderColor {

    border-color: #5cb8b2;

  }

  .activeGrayColor {

    border-color: rgba(0, 0, 0, 0.6);

  }

  .activeColor::before {

    color: #5cb8b2 !important;

  }

  .activeBorderColor::before {

    background-color: #5cb8b2 !important;

  }

}

.mb100 {

  margin-bottom: 85px;

}

.ml100 {

  margin-left: 100px;

}

.f-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

.f-base {

  display: flex;

  flex-flow: row wrap;

  align-content: flex-start;

}

.f-baseX {

  display: flex !important;

  align-items: center;

}

// .f-space {

//     flex-grow: 1;

// }

</style>