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

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

.jimu-swipemove {
  .touch-layout {
    position: absolute;
    height: 20px;
    width: 60px;
    background: @fill-base;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    border: 1px solid @border-color-base;
    left: 50%;
    z-index: 90;
    .touch-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      width: 15px;
      height: 6px;
    }
    .touch-icon:after,
    .touch-icon:before {
      content: "";
      position: absolute;
      top: 0;
      height: 2px;
      width: 100%;
      background: @fill-btn-default;
    }
    .touch-icon:after {
      top: auto;
      bottom: 0;
    }
  }
  .touch-content {
    position: fixed;
    background: @fill-base;
    z-index: 101
  }
  .touch-scroll {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
  }
}

.jimu-left .touch-layout .touch-icon,
.jimu-right .touch-layout .touch-icon {
  transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg)
}

.jimu-left,
.jimu-right {
  .touch-layout {
    top: 50%;
    height: 60px;
    width: 20px;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
  }
}

.jimu-top .touch-layout {
  bottom: -20px;
  border-top: 0;
  border-radius: 0 0 4px 4px
}

.jimu-bottom .touch-layout {
  top: -20px;
  border-bottom: 0;
  border-radius: 4px 4px 0 0
}

.jimu-left .touch-layout {
  left: auto;
  right: -20px;
  border-left: 0;
  border-radius: 0 4px 4px 0
}

.jimu-right .touch-layout {
  left: -20px;
  border-right: 0;
  border-radius: 4px 0 0 4px
}