baigl #92
|
@ -112,16 +112,14 @@
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
<Modal
|
|
||||||
v-model:visible="classWorkTaskVisible"
|
<el-dialog v-model="classWorkTaskVisible" append-to-body :show-close="false" width="70%">
|
||||||
:width="880"
|
|
||||||
>
|
|
||||||
<QuestToPPTist
|
<QuestToPPTist
|
||||||
class="class-work-task-modal"
|
class="class-work-task-modal"
|
||||||
@close="classWorkTaskVisible = false"
|
@close="classWorkTaskVisible = false"
|
||||||
@update="data => { onhtml2canvas(data); classWorkTaskVisible = false }"
|
@update="data => { onhtml2canvas(data); classWorkTaskVisible = false }"
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</el-dialog>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -363,7 +361,7 @@ const toggleNotesPanel = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.class-work-task-modal{
|
.class-work-task-modal{
|
||||||
height: 80vh;
|
height: 70vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (width <= 1200px) {
|
@media screen and (width <= 1200px) {
|
||||||
|
|
|
@ -154,13 +154,15 @@ const topImgWrapperPositionStyle = computed(() => {
|
||||||
const topImgPositionStyle = computed(() => {
|
const topImgPositionStyle = computed(() => {
|
||||||
const bottomWidth = imgPosition.value.width
|
const bottomWidth = imgPosition.value.width
|
||||||
const bottomHeight = imgPosition.value.height
|
const bottomHeight = imgPosition.value.height
|
||||||
|
console.log("底层图片位置大小(遮罩区域图片)", imgPosition.value)
|
||||||
|
|
||||||
const { top, left, width, height } = topImgWrapperPosition.value
|
const { top, left, width, height } = topImgWrapperPosition.value
|
||||||
|
console.log("width", ((bottomWidth / width * 100) - (left * (100 / width))) + '%')
|
||||||
|
console.log("height", bottomHeight / height * 100 + '%')
|
||||||
return {
|
return {
|
||||||
left: -left * (100 / width) + '%',
|
left: -left * (100 / width) + '%',
|
||||||
top: -top * (100 / height) + '%',
|
top: -top * (100 / height) + '%',
|
||||||
width: bottomWidth / width * 100 + '%',
|
width: ((bottomWidth / width * 100) - (left * (100 / width))) + '%' ,
|
||||||
height: bottomHeight / height * 100 + '%',
|
height: bottomHeight / height * 100 + '%',
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -228,6 +230,7 @@ const updateRange = () => {
|
||||||
width: parseInt(topImgPositionStyle.value.width),
|
width: parseInt(topImgPositionStyle.value.width),
|
||||||
height: parseInt(topImgPositionStyle.value.height),
|
height: parseInt(topImgPositionStyle.value.height),
|
||||||
}
|
}
|
||||||
|
console.log('retPosition', retPosition)
|
||||||
|
|
||||||
const widthScale = 100 / retPosition.width
|
const widthScale = 100 / retPosition.width
|
||||||
const heightScale = 100 / retPosition.height
|
const heightScale = 100 / retPosition.height
|
||||||
|
@ -475,7 +478,7 @@ const scaleClipRange = (e: MouseEvent, type: OperateResizeHandlers) => {
|
||||||
isMouseDown = false
|
isMouseDown = false
|
||||||
document.onmousemove = null
|
document.onmousemove = null
|
||||||
document.onmouseup = null
|
document.onmouseup = null
|
||||||
|
console.log('----------------------------------')
|
||||||
updateRange()
|
updateRange()
|
||||||
|
|
||||||
setTimeout(() => isSettingClipRange.value = false, 0)
|
setTimeout(() => isSettingClipRange.value = false, 0)
|
||||||
|
|
|
@ -68,7 +68,7 @@ defineExpose({
|
||||||
|
|
||||||
.page-resource {
|
.page-resource {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
height: calc(100% - 55px);
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
Loading…
Reference in New Issue