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

fix

Browse Source
This commit is contained in:
X1627315083
2023-12-04 11:48:17 +08:00
parent c2399fd4e4
commit bcb6483ce0
25 changed files with 148 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/component/HomePage/layoutMobile.vue
View File

@@ -68,6 +68,12 @@
</div>
</div>
</div>
<div class="layout_right">
<div class="layout_right_text">
{{ $t('DesignPrintOperation.Scale') }}
</div>
<input type="text">
</div>
<!-- <div class="layout_right">
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
@@ -488,22 +494,23 @@ export default defineComponent({
//移动图片
translate:{
mounted (el,layout:any,binding) {
el.addEventListener('mousedown',(e: MouseEvent)=>{
el.addEventListener('touchstart',(e:any)=>{
e.stopPropagation()
let elParent = el.parentNode.parentNode
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
let mouseX = e.offsetX //鼠标点击位置到domleft距离
let mouseY = e.offsetY
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.clientY - e.offsetY - el.offsetTop
let mouseX = e.changedTouches[0].pageX - el.parentNode.getBoundingClientRect().left //鼠标点击位置到domleft距离
let mouseY = e.changedTouches[0].pageY - el.parentNode.getBoundingClientRect().top
let domX = e.changedTouches[0].pageX - mouseX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
let domY = e.changedTouches[0].pageY - mouseY - el.offsetTop
let mouse = true
document.onmousemove = function(e:any){
let touchMove = function(e:any){
if(mouse){
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
let left = ( e.changedTouches[0].pageX-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
let top = (e.changedTouches[0].pageY-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
el.style.left = left
el.style.top = top;
el.previousSibling.style.top = top
@@ -539,33 +546,39 @@ export default defineComponent({
}
}
}
document.onmouseup = function(){
mouse = false
}
el.parentNode.addEventListener('touchmove',touchMove ,false);
document.addEventListener('touchend', () => {
mouse = false;
el.parentNode.removeEventListener('touchmove',touchMove );
el.parentNode.children.forEach((v:any) =>{
v.classList.remove('eventNode')
})
});
})
},
},
modelImg:{
mounted(el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
},
updated (el) {
let parentNode = el.parentNode
if(parentNode.offsetHeight > parentNode.offsetWidth){
el.style.height = 100+'%'
el.style.width = 'auto'
}else{
el.style.width = 100+'%'
el.style.height = 'auto'
}
}
// mounted(el) {
// let parentNode = el.parentNode
// if(parentNode.offsetHeight > parentNode.offsetWidth){
// el.style.height = 100+'%'
// el.style.width = 'auto'
// }else{
// el.style.width = 100+'%'
// el.style.height = 'auto'
// }
// },
// updated (el) {
// let parentNode = el.parentNode
// if(parentNode.offsetHeight > parentNode.offsetWidth){
// el.style.height = 100+'%'
// el.style.width = 'auto'
// }else{
// el.style.width = 100+'%'
// el.style.height = 'auto'
// }
// }
}
},
methods: {
@@ -774,8 +787,8 @@ export default defineComponent({
li{
cursor: pointer;
// border-radius: 50%;
width: 1rem;
height: 1rem;
width: 2rem;
height: 2rem;
background-color: rgb(20, 188, 255);
position: absolute;
z-index: 1049;
@@ -826,8 +839,8 @@ export default defineComponent({
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%,-50%) ;
width: 1.5rem;
height: 1.5rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.layout_translate{
@@ -839,8 +852,8 @@ export default defineComponent({
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: .8rem;
height: .8rem;
width: 2rem;
height: 2rem;
}
.layout_angle_tr{
right: 0%;
@@ -952,6 +965,39 @@ export default defineComponent({
}
}
}
.layout_right{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 5rem;
overflow-x: hidden;
// background-color: #000;
width: 8%;
height: 50%;
&.layout_left::-webkit-scrollbar {
display: none;
}
.layout_left_text{
font-size: var(--aida-fsize1-6);
margin-bottom: 1rem;
color: #000;
}
.layout_left_items{
width: 100%;
height: 6rem;
display: flex;
align-content: space-between;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
margin-bottom: 2rem;
cursor: pointer;
.layout_left_item{
box-sizing: border-box;
border: 1px solid #000;
}
}
}
.submit_button {
margin: 2rem auto 0;
}