.my-slide-layout { 
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  * {
    box-sizing: border-box;
  }  
  &.horizontal{
    .left-warp {
      height: 100%; 
      position: relative;
      float: left; 
      // width: 50%;
      // max-width: 95%; 
    }

    .right-warp {
      position: relative;
      height: 100%; 
      box-sizing: border-box;
      overflow-y: auto; 
    }

    .resize-save {
      position: absolute;
      top: 0; right: 5px; bottom: 0; left: 0; 
      overflow-x: hidden; 
    }
    .resize-bar {
      position: relative;
      height:  100%;
      resize: horizontal;
      cursor: ew-resize;
      cursor: col-resize;
      opacity: 0;
      overflow:  scroll;
      
      &:hover ~ .resize-line,
      &:active ~ .resize-line {
        border-left: 1px dashed skyblue;
      }
      &::-webkit-scrollbar {
        position:absolute;
        width: 10px;
        height: 999999px;
      }
    }
    /* 拖拽线 */
    .resize-line {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      border-right: 2px solid #eee;
      border-left: 1px solid #bbb;
      pointer-events: none;
    } 

    /* Firefox只有下面一小块区域可以拉伸 */
    @supports (-moz-user-select: none) {
      .resize-bar:hover ~ .resize-line,
      .resize-bar:active ~ .resize-line {
          border-left: 1px solid #bbb;
      }
      .resize-bar:hover ~ .resize-line::after,
      .resize-bar:active ~ .resize-line::after {
          content: '';
          position: absolute;
          width: 16px; height: 16px;
          bottom: 0; right: -8px;
          // background: url(./resize.svg);
          background-size: 100% 100%;
      }
    }
  }
  &.vertical{
    display: flex;
    flex-flow: column;
    .top-warp {
      width: 100%; 
      position: relative; 
    }

    .bottom-warp {
      position:relative;
      flex: 1;
      width: 100%;
      height: 100%;
      box-sizing: border-box; 
      overflow-y: auto; 
    }

    .resize-save {
      position: absolute;
      top: 0; right: 0px; bottom: 5px; left: 0; 
      overflow-y: hidden;  
    }
    .resize-bar {
      position: relative; 
      width:  100%;
      resize: vertical; // horizontal;
      cursor: ew-resize;
      cursor: col-resize;
      opacity: 0;
      overflow:  scroll;
      
      &:hover ~ .resize-line,
      &:active ~ .resize-line {
        border-bottom: 1px dashed skyblue;
      }
      &::-webkit-scrollbar {
        position:absolute;
        height: 10px;
        width: 999999px;
      }
    }
    /* 拖拽线 */
    .resize-line {
      position: absolute;
      right: 0; left: 0; bottom: 0;
      border-top: 2px solid #eee;
      border-bottom: 1px solid #bbb;
      pointer-events: none;
    } 

    /* Firefox只有下面一小块区域可以拉伸 */
    @supports (-moz-user-select: none) {
      .resize-bar:hover ~ .resize-line,
      .resize-bar:active ~ .resize-line {
          border-bottom: 1px solid #bbb;
      }
      .resize-bar:hover ~ .resize-line::after,
      .resize-bar:active ~ .resize-line::after {
          content: '';
          position: absolute;
          width: 16px; height: 16px;
          bottom: 0; right: -8px;
          // background: url(./resize.svg);
          background-size: 100% 100%;
      }
    }
  } 
  .content-warp{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
  }
}