jimu-mobile/src/styles/jimu-rule.less

积木组件库助力移动端开发

/*  StepSlider 组件  */

.jimu-step-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 15px;
  background: @fill-base;
  .jimu-slider-rule {
    position: relative;
    .line-bg,
    .line-light {
      height: 1px;
      position: absolute;
      top: 0;
      left: 0;
      background: #ebebeb;
      width: 100%;
    }
    .line-light {
      width: 50%;
      z-index: 999;
      position: relative;
      background: @color-icon-base;
      .pole-btn {
        position: absolute;
        width: 0px;
        height: 0px;
        overflow: hidden;
        border-top: 6px solid @color-icon-base;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: 0;
        right: 0;
        margin-right: -6px;
      }
    }
  }
  .step-wrap {
    height: 30px;
    position: relative;
    overflow: hidden;
    .step-line {
      width: 10000000px;
      position: relative;
      left: 0;
      top: 0;
      li {
        position: absolute;
        width: 1px;
        background: #ebebeb;
        height: 5px;
        top: 0;
        left: 0;
      }
      .over {
        background: @color-icon-base
      }
      .disabled {
        background: @fill-disabled
      }
    }
    .step-name {
      width: 10000000px;
      position: relative;
      left: 0;
      top: 0;
      li {
        position: absolute;
        width: 1px;
        background: @fill-btn-default;
        height: 10px;
        top: 0;
        left: 0;
        font-size: @font-size-base;
        color: @color-text-disabled;
        span.step-title {
          position: absolute;
          width: 60px;
          top: 15px;
          left: -30px;
          text-align: center;
        }
      }
      li:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0px;
        width: 1px;
        height: 10px;
        background: #ebebeb
      }
      .over {
        color: @color-icon-base
      }
      .over:after {
        background: @color-icon-base
      }
      .disabled {
        color: @color-text-disabled
      }
      .disabled:after {
        background: @fill-disabled
      }
    }
    .step-touch {
      position: absolute;
      top: 0;
      left: 0;
      width: 10000000px;
      height: 100%;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/*  StepSlider 组件  */

.jimu-car-stepSlider {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
  background: @fill-base;
  .jimu-slider {
    .slider-bnt {
      opacity: 0;
      z-index: 1000;
    }
    .line-bg,
    .line-light,
    .line-def {
      height: 1px;
    }
    .line-light {
      width: 50%;
      z-index: 999;
    }
    .line-light:after {
      content: "";
      position: absolute;
      display: inline-block;
      width: 15px;
      height: 15px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      border-radius: 50% 50% 50% 0;
      background: @fill-base;
      right: -7px;
      top: -8px;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
    }
    .line-def {
      left: 50%;
      position: relative;
      z-index: 100;
      background: @color-link-danger;
      top: 14px;
    }
  }
  .step-wrap {
    height: 50px;
    .step-list {
      width: 10000000px;
      position: relative;
      li {
        float: left;
        text-align: center;
        z-index: 99;
        position: relative;
        padding-top: 20px;
        span.home-title {
          font-size: @font-size-caption-sm;
        }
        i.rule-line {
          b {
            position: absolute;
            width: 1px;
            height: 6px;
            background: #999;
            top: 4px;
            transform: scaleX(.5);
            -webkit-transform: scaleX(.5);
          }
          b:first-child {
            display: none;
          }
          b.step-line-over {
            background: @color-icon-base
          }
          b.step-line-disabled {
            background: @fill-btn-default
          }
          b.rule-end-line {
            height: 10px;
            top: 0;
            left: auto;
            right: -1px;
            z-index: 10;
          }
        }
        .price-line {
          position: absolute;
          top: -16px;
          left: 0;
          width: 100%;
          height: 1px;
          background: #fa8919;
          z-index: 10;
        }
      }
      li:first-child i b:first-child {
        display: block;
        height: 10px;
        top: 0;
      }
      .step-over,
      .step-on {
        color: @color-icon-base;
      }
      li.step-current {
        color: @color-icon-base;
      }
      li:last-child i:after {
        background: @fill-btn-default
      }
    }
    .step-line-list {
      position: relative;
      height: 10px;
      .lines-layout {
        b {
          position: absolute;
          width: 1px;
          background: @color-text-light;
          height: 6px;
          top: 6px;
          left: auto;
          transform: scaleX(.5);
          -webkit-transform: scaleX(.5);
          right: -1px;
          z-index: 10;
        }
      }
    }
    .type-home-layout {
      position: relative;
      padding-top: 20px;
      .home-list {
        color: @color-text-base;
        position: absolute;
        width: 0px;
        text-align: center;
        .home-name {
          margin: 0 auto;
          font-size: @font-size-caption-sm;
          position: relative;
          width: 0px;
          .vert-name {
            top: 18px;
            position: absolute;
            width: 40px;
            left: -20px;
          }
          .vert-img {
            top: -5px;
            position: absolute;
            height: 20px;
            left: -10px;
          }
        }
        .pos-lf .vert-name {
          left: -37px;
        }
        .pos-rt .vert-name {
          left: -3px;
        }
        .home-on {
          color: @color-icon-base
        }
        .home-over {
          color: #fa8919;
        }
        .home-name:after {
          content: "";
          position: absolute;
          width: 1px;
          background: @color-text-light;
          height: 10px;
          top: -18px;
          left: auto;
          left: 0px;
          z-index: 10;
        }
        .home-on:after {
          background: @color-icon-base
        }
        .home-over:after {
          background: #fa8919;
          z-index: 10;
        }
        .home-disabled {
          color: @color-text-light;
          display: none;
        }
        .home-disabled::after {
          height: 0px;
        }
      }
    }
  }
}

.jimu-car-stepSlider:after,
.jimu-car-stepSlider:before,
.jimu-step-slider:after,
.jimu-step-slider:before {
  width: 100px;
  height: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 80%, #FFFFFF 95%, #FFFFFF 100%);
}

.jimu-car-stepSlider:before,
.jimu-step-slider:before {
  left: auto;
  right: 0;
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}