@cmstops/pro-compo 0.1.13 → 0.1.15

package/lib/imageCrop/style/cropper.less

@@ -0,0 +1,291 @@
+.cropper-container {
+  position: relative;
+  font-size: 0;
+  line-height: 0;
+  direction: ltr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
+}
+
+.cropper-container img {
+  display: block;
+  width: 100%;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: 100%;
+  min-height: 0 !important;
+  max-height: none !important;
+  image-orientation: 0deg;
+}
+
+.cropper-canvas,
+.cropper-crop-box,
+.cropper-drag-box,
+.cropper-modal,
+.cropper-wrap-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.cropper-canvas,
+.cropper-wrap-box {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+}
+
+.cropper-dashed {
+  position: absolute;
+  display: block;
+  border: 0 dashed #eee;
+  opacity: 0.5;
+}
+
+.cropper-dashed.dashed-h {
+  top: 33.33333%;
+  left: 0;
+  width: 100%;
+  height: 33.33333%;
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.cropper-dashed.dashed-v {
+  top: 0;
+  left: 33.33333%;
+  width: 33.33333%;
+  height: 100%;
+  border-right-width: 1px;
+  border-left-width: 1px;
+}
+
+.cropper-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0;
+  height: 0;
+  opacity: 0.75;
+}
+
+.cropper-center::after,
+.cropper-center::before {
+  position: absolute;
+  display: block;
+  background-color: #eee;
+  content: ' ';
+}
+
+.cropper-center::before {
+  top: 0;
+  left: -3px;
+  width: 7px;
+  height: 1px;
+}
+
+.cropper-center::after {
+  top: -3px;
+  left: 0;
+  width: 1px;
+  height: 7px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  opacity: 0.1;
+}
+
+.cropper-face {
+  top: 0;
+  left: 0;
+  background-color: #fff;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  top: 0;
+  right: -3px;
+  width: 5px;
+  cursor: e-resize;
+}
+
+.cropper-line.line-n {
+  top: -3px;
+  left: 0;
+  height: 5px;
+  cursor: n-resize;
+}
+
+.cropper-line.line-w {
+  top: 0;
+  left: -3px;
+  width: 5px;
+  cursor: w-resize;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  left: 0;
+  height: 5px;
+  cursor: s-resize;
+}
+
+.cropper-point {
+  width: 5px;
+  height: 5px;
+  background-color: #39f;
+  opacity: 0.75;
+}
+
+.cropper-point.point-e {
+  top: 50%;
+  right: -3px;
+  margin-top: -3px;
+  cursor: e-resize;
+}
+
+.cropper-point.point-n {
+  top: -3px;
+  left: 50%;
+  margin-left: -3px;
+  cursor: n-resize;
+}
+
+.cropper-point.point-w {
+  top: 50%;
+  left: -3px;
+  margin-top: -3px;
+  cursor: w-resize;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  left: 50%;
+  margin-left: -3px;
+  cursor: s-resize;
+}
+
+.cropper-point.point-ne {
+  top: -3px;
+  right: -3px;
+  cursor: ne-resize;
+}
+
+.cropper-point.point-nw {
+  top: -3px;
+  left: -3px;
+  cursor: nw-resize;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  left: -3px;
+  cursor: sw-resize;
+}
+
+.cropper-point.point-se {
+  right: -3px;
+  bottom: -3px;
+  width: 20px;
+  height: 20px;
+  cursor: se-resize;
+  opacity: 1;
+}
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    width: 15px;
+    height: 15px;
+  }
+}
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    width: 10px;
+    height: 10px;
+  }
+}
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    width: 5px;
+    height: 5px;
+    opacity: 0.75;
+  }
+}
+
+.cropper-point.point-se::before {
+  position: absolute;
+  right: -50%;
+  bottom: -50%;
+  display: block;
+  width: 200%;
+  height: 200%;
+  background-color: #39f;
+  opacity: 0;
+  content: ' ';
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

package/lib/imageCrop/style/css.js

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.css");

package/lib/imageCrop/style/imageCropper.less

@@ -0,0 +1,133 @@
+.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;
+  }
+}
+
+