236 lines
7.2 KiB
SCSS
236 lines
7.2 KiB
SCSS
@import '~@/uni_modules/lime-style/index.scss';
|
|
$prefix: l !default;
|
|
$clipper: #{$prefix}-clipper;
|
|
|
|
@font-face {
|
|
font-family: clipper-icon;
|
|
src: url('https://at.alicdn.com/t/c/font_4769200_ijsa6pjss7d.ttf?t=1733274494453')
|
|
// src: url('data:application/octet-stream;base64,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');
|
|
}
|
|
|
|
|
|
$clipper-edge-border-width: create-var(clipper-edge-border-width, 6rpx); //6rpx !default;
|
|
$clipper-confirm-color: create-var(clipper-confirm-color, #07c160); //#07c160 !default;
|
|
$clipper-z-index: create-var(clipper-z-index, 99); //99 !default;
|
|
$clipper-mask-color: create-var(clipper-mask-color, rgba(0, 0, 0, 0.5)); //99 !default;
|
|
|
|
.flex-auto {
|
|
flex: auto
|
|
}
|
|
|
|
.bg-transparent {
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
transition-duration: 0.35s;
|
|
}
|
|
|
|
.lime-clipper {
|
|
width: 100%;
|
|
// height: calc(100vh - var(--window-top));
|
|
bottom: 0;
|
|
/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
top: 0;
|
|
/* #endif */
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
top: var(--window-top);
|
|
/* #endif */
|
|
|
|
background-color: rgba(0, 0, 0, 0.9);
|
|
position: fixed;
|
|
|
|
left: 3000%;
|
|
z-index: $clipper-z-index;
|
|
|
|
&.open {
|
|
left: 0;
|
|
}
|
|
|
|
&-mask {
|
|
position: relative;
|
|
z-index: 2;
|
|
overflow: visible;
|
|
flex: 1;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
pointer-events: none;
|
|
/* #endif */
|
|
}
|
|
&__content {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
|
|
box-sizing: border-box;
|
|
// box-shadow: $clipper-mask-color 0 0 0 80rpx;
|
|
box-shadow: 0 0 0 800rpx $clipper-mask-color ;
|
|
background: transparent;
|
|
overflow: visible;
|
|
// transition-duration 0.35s
|
|
// transition-property left,top
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
border: 1rpx solid rgba(255,255,255,.3);
|
|
&::before,&::after {
|
|
content: '';
|
|
position: absolute;
|
|
border: 1rpx dashed rgba(255,255,255,.3);
|
|
}
|
|
|
|
&::before {
|
|
width: 100%;
|
|
top: 33.33%;
|
|
height: 33.33%;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
&::after {
|
|
width: 33.33%;
|
|
left: 33.33%;
|
|
height: 100%;
|
|
border-top:none;
|
|
border-bottom: none;
|
|
}
|
|
/* #endif */
|
|
|
|
}
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
&__edge {
|
|
overflow: visible;
|
|
position: absolute;
|
|
// left 6rpx
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
// background: red;
|
|
border: $clipper-edge-border-width solid #ffffff;
|
|
pointer-events: auto;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background-color: transparent;
|
|
}
|
|
&:nth-child(1) {
|
|
left: calc(#{$clipper-edge-border-width} * -1);
|
|
top: calc(#{$clipper-edge-border-width} * -1);
|
|
border-bottom-width: 0 !important;
|
|
border-right-width: 0 !important;
|
|
&:before {
|
|
top: -50%;
|
|
left: -50%;
|
|
}
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
right: calc(#{$clipper-edge-border-width} * -1);
|
|
top: calc(#{$clipper-edge-border-width} * -1);
|
|
border-bottom-width: 0 !important;
|
|
border-left-width: 0 !important;
|
|
&:before {
|
|
top: -50%;
|
|
left: 50%;
|
|
}
|
|
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
left: calc(#{$clipper-edge-border-width} * -1);
|
|
bottom: calc(#{$clipper-edge-border-width} * -1);
|
|
border-top-width: 0 !important;
|
|
border-right-width: 0 !important;
|
|
&:before {
|
|
bottom: -50%;
|
|
left: -50%;
|
|
}
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
right: calc(#{$clipper-edge-border-width} * -1);
|
|
bottom: calc(#{$clipper-edge-border-width} * -1);
|
|
border-top-width: 0 !important;
|
|
border-left-width: 0 !important;
|
|
&:before {
|
|
bottom: -50%;
|
|
left: 50%;
|
|
}
|
|
}
|
|
}
|
|
/* #endif */
|
|
&-image {
|
|
width: 100%;
|
|
border-style: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
transform-origin: center;
|
|
/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
|
|
max-width: inherit;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
/* #endif */
|
|
|
|
}
|
|
|
|
&-canvas {
|
|
position: fixed;
|
|
z-index: 100;
|
|
left: -200%;
|
|
top: -200%;
|
|
pointer-events: none;
|
|
|
|
// left:0;
|
|
// top:50%;
|
|
// background-color: red;
|
|
}
|
|
|
|
&-tools {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 10px;
|
|
width: 100%;
|
|
z-index: 99;
|
|
&__btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding: 20rpx 40rpx;
|
|
box-sizing: border-box;
|
|
.text {
|
|
color: #fff;
|
|
min-width: 60rpx;
|
|
// #ifndef UNI-APP-X
|
|
display: block;
|
|
// #endif
|
|
}
|
|
.cancel {
|
|
font-weight: bold;
|
|
width: 112rpx;
|
|
height: 60rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.confirm {
|
|
font-weight: bold;
|
|
width: 112rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: $clipper-confirm-color;
|
|
border-radius: 6rpx;
|
|
text-align: center;
|
|
}
|
|
.rotate,.photo {
|
|
font-family: clipper-icon;
|
|
font-size: 60rpx;
|
|
}
|
|
// image {
|
|
// // display: block;
|
|
// width: 60rpx;
|
|
// height: 60rpx;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|