@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
134 lines (114 loc) • 2.46 kB
text/less
.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 ;
}
}
}
.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 ;
font-size: 18px;
}
.cropper-btn + .cropper-btn {
margin-left: 10px;
}
}