@charset "utf-8";
@include ns(steps){ position: relative; display: inline-block;
  .steps-item{ float: left; text-align: center; width: 150px; position: relative; z-index: 2; color: #333;
    .steps-line-icon{position: relative;
      &:after{width: 100%;height: 1px;position: absolute;left: 0;top: 50%;content: '';border-bottom: 2px solid #333}
    }
    .steps-icon{ display: block; width: 50px; height: 50px;line-height: 50px; font-style: normal; font-size: 30px; background: #fff; font-weight: 700; margin: 0 auto 10px;position: relative;z-index: 2;
      span{border: 1px solid #333; border-radius: 50%; width: 100%;display: block;box-sizing: border-box}
    }
    .steps-title{ font-size: 16px; display: block; }
    .steps-intro{ font-size: 12px;line-height: 18px }
    /*当前状态*/
    &.active{ color: #f00;
      .steps-line-icon{
        &:after{border-color: #f00}
      }
      .steps-icon span{ border-color: #f00 }
      .steps-title{ }
      .steps-intro{}
    }
    /*已完成*/
    &.completed{color: #999;
      .steps-line-icon{
        &:after{border-color: #999}
      }
      .steps-icon{ border-color: #999 }
      .steps-title{}
      .steps-intro{}
    }
  }
}
