{
user-select: none;
}
.hb-module {
width: 100%;
height: calc(100vh - 1px - var(--logo-height));
position: relative;
background: #0f1115;
overflow: hidden !important;
.canvas-container {
background: #0f1115;
position: relative;
}canvasContainer {
overflow: inherit !important;
border: 0 !important;
}
.hc-re {
position: absolute;
top: 20px;
right: 20px;
z-index: 8;
height: calc(100% - 20px);
min-height: calc(260px + 48px + 40px + 35px);
}
.hc-zoom {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 8;
// bottom: 0px;
height: 35px;
}
.to-back {
position: absolute;
left: 10px;
top: 10px;
z-index: 8;
div {width: 74px; height: 40px; background: #1d2129; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
}
.image-matting {
display: flex;
align-items: center;
width: 100%;
position: relative;
justify-content: center;
.image {width: 100%; height: 500px; background-size: 100% 100% !important;
}
}
}
.dialog-draggable-resizable {
width: 80%;
height: 85%;
padding: 20px 20px 0 20px;
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
background: #2a2e33;
border: 1px solid #484d53;
border-radius: 20px;
.heading {
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 16px;
height: 28px;
margin-bottom: 20px;
.heading__close {background: url('../../assets/img/close3.png') no-repeat center; display: flex; width: 28px; height: 28px; background-size: 100% 100% !important; cursor: pointer; opacity: 0.7; &:hover { opacity: 1; }
}
.btn-options {position: absolute; z-index: 99; left: 50%; transform: translate(-50%, 0); display: flex; height: 40px; background: #1d2129; border-radius: 6px; display: flex; align-items: center; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); padding: 4px; .btn-img { width: 32px; height: 32px; border-radius: 4px; &:hover { background: #323942; } span { cursor: pointer; display: flex; width: 32px; height: 32px; background-size: 20px 20px !important; } span + span { margin-left: 8px; } .revoke-piont { background: url('../../assets/img/cs.png') no-repeat center; } .clear-piont { background: url('../../assets/img/qkhb.png') no-repeat center; } }
}
}
.caijian {
width: 100%;
// 28+20+92
height: calc(100% - 140px);
position: relative;
}
// 28+40+90
.parent-draggable-resizable {
width: 100%;
height: calc(100% - 158px);
position: relative;
}
.h-bottom-resizable {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
.img-size {width: 664px; height: 90px; // background: #1d2129; border-radius: 10px; padding: 16px; .scale-mode { display: flex; .proportion { width: 64px; height: 58px; background: #404853; border-radius: 10px; margin-right: 8px; font-size: 12px; font-family: PingFang SC, PingFang SC-400; font-weight: 400; color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; .px-img2 { display: flex; width: 20px; height: 20px; background-size: 100% 100% !important; } .bl-1 { background: url('../../assets/img/zyms.png') no-repeat center; } .bl-2 { background: url('../../assets/img/bl.png') no-repeat center; } .bl-3 { background: url('../../assets/img/1v1.png') no-repeat center; } .bl-4 { // 9:16 background: url('../../assets/img/bl-2.png') no-repeat center; } .bl-5 { // 16:9 background: url('../../assets/img/bl-3.png') no-repeat center; } .bl-6 { background: url('../../assets/img/bl-4.png') no-repeat center; } .bl-7 { background: url('../../assets/img/bl-5.png') no-repeat center; } } .proportion-bg { background: #696e76 !important; } .el-button { width: 128px; height: 58px; line-height: 58px; background: linear-gradient(90deg, #0066ff, #00b2ff 100%); border-radius: 10px; font-size: 14px; } }
}
}
.dialog-footer2 {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%, 0);
display: flex;
justify-content: center;
align-items: center;
.h-btn {width: 72px; height: 40px; border-radius: 6px; font-size: 14px; color: #ffffff; display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.h-btn + .h-btn {margin-left: 8px;
}
.btn-cancel {background: #394147; &:hover { background: #485157; }
}
.btn-confirm {background: #0066ff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25); &:hover { background: #247bff; }
}
}
:deep(.htm-custom-loading) {
border-radius: 20px;
}
}