aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2023-11-27-dist

Browse Source
This commit is contained in:
X1627315083
2023-11-27 11:11:07 +08:00
parent e05b159c5a
commit 1f52565aad
9 changed files with 1087 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/component/HomePage/layout.vue
View File

@@ -376,79 +376,83 @@ export default defineComponent({
let eX:any
let eY:any
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
if (mouse) {
if(angle.value == 'right'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'top'){
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'left'){
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
let mouseMove = (e:MouseEvent)=>{
// console.log(e.x,el.getBoundingClientRect().left);
// if(){
// }
if (mouse) {
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
eX = elParent.offsetWidth - e.offsetX
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
}else if(angle.value == 'bottom'){
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
// el.style.left = e.offsetX /2 +'px'
// el.style.top = e.offsetY /2+'px'
if(100 - 100 * mouseSide/elParentSide <= 50){
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.left = 'auto'
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.left = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
el.style.top = 'auto'
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
}
}else{
if(angle.value == 'right'){
el.parentNode.style.borderTopLeftRadius = 50+'%'
elParent.style.borderTopLeftRadius = 50+'%'
}else if(angle.value == 'top'){
el.parentNode.style.borderTopRightRadius = 50+'%'
elParent.style.borderTopRightRadius = 50+'%'
}else if(angle.value == 'bottom'){
el.parentNode.style.borderBottomRightRadius = 50+'%'
elParent.style.borderBottomRightRadius = 50+'%'
}else if(angle.value == 'left'){
el.parentNode.style.borderBottomLeftRadius = 50+'%'
elParent.style.borderBottomLeftRadius = 50+'%'
}
}
}
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
document.removeEventListener('mousemove',mouseMove)
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
}
});
// 添加鼠标松开事件监听器
document.addEventListener('mouseup', () => {
mouse = false;
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
el.parentNode.addEventListener('mousemove', mouseMove);
});
})
}
},
//移动图片