@cmstops/pro-compo/es/imageCrop/style/imageCropper.less

[物料平台文档中心](https://arco.design/docs/material/guide)

.image-crop-modal-wrapper {
  .arco-modal-footer {
    padding: 0;
  }
}
.image-crop-modal-body {
  height: calc(100vh - 16vh - 114px);
  padding: 0;
  overflow: hidden;
  background: var(--color-fill-3);

  .image-cropper {
    height: 100%;

    .edit {
      height: calc(100% - 86px);
      padding: 24px;
      text-align: center;

      &.fullHeight {
        height: 100%;
      }

      .edit-cropper {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);

        #cropper_img {
          display: block;
          max-width: 100%;
          max-height: 100%;

          &.position {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .cropper-bg {
          background: none !important;
        }
      }
    }

    .tool {
      width: 100%;
      height: 86px;
      line-height: 86px;
      text-align: center;
      background: #fff;

      .btn {
        display: inline-block;
        margin: 0 30px;
        color: #474747;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        letter-spacing: 0;
        vertical-align: middle;
        border: 1px solid #333;
        cursor: pointer;
        opacity: 0.8;

        &.btn1 {
          width: 41px;
          height: 33px;
          line-height: 33px;
          border: 1px dashed #333;
        }

        &.btn2 {
          width: 35px;
          height: 35px;
          line-height: 35px;
        }

        &.btn3 {
          width: 46px;
          height: 33px;
          line-height: 33px;
        }

        &.btn4 {
          width: 34px;
          height: 47px;
          line-height: 47px;
        }

        &.btn5 {
          width: 59px;
          height: 33px;
          line-height: 33px;
        }

        &.btn6 {
          width: 33px;
          height: 59px;
          line-height: 59px;
        }

        &:hover,
        &.active {
          color: #4886ff;
          border-color: #4886ff;
        }
      }
    }
  }
}

.image-crop-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
  overflow: hidden;
  border-top: solid 1px var(--color-border-1);
  .cropper-btn {
    padding: 6px !important;
    font-size: 18px;
  }
  .cropper-btn + .cropper-btn {
    margin-left: 10px;
  }
}