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

修改部分bug和调整布局

Browse Source
This commit is contained in:
X1627315083
2024-10-08 17:03:22 +08:00
parent d2d3cf856d
commit 982bbee122
27 changed files with 351 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/component/HomePage/ExportModel.vue
View File

@@ -198,11 +198,12 @@
<div class="exportCanvasBox_center">
<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
</div>
<div class="exportCanvasBox_scroll">
<div></div>
</div>
</div>
<!-- <div v-if="isMoible" class="exportCanvasBox_scroll">
<div></div>
</div> -->
<div class="exportCanvasBox_bottom">
<div class="exportCanvasBox_left_btn Guide_1_38">
@@ -308,6 +309,7 @@ import { useI18n } from "vue-i18n";
import {isMoible,calculateGradientCoordinate,base64ToFile} from '@/tool/util'
import publish from "@/component/WorksPage/publish.vue";
import liquefaction from "@/component/modules/liquefaction.vue";
import { getMousePosition } from "@/tool/mdEvent";
export default defineComponent({
components: {
@@ -631,6 +633,69 @@ export default defineComponent({
driverObj__.moveNext()
}
let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
let mouseDownOperation = (event)=>{//按下
console.log(canvasWH.value.height , canvasBoxDom.offsetHeight,canvasBoxDom.offsetHeight , height);
let position = {
y:event.screenY,
top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
}
// let top =
let scrollMousemove = (e)=>{
let height = scrollBox.style.height.split('px')[0]*1
let offsetTop = position.top+e.screenY - position.y
offsetTop = offsetTop <= 0? 0 : offsetTop
offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
scrollBox.style.marginTop = offsetTop+'px'
canvasBoxDom.scroll({
top: offsetTop*scale, // 纵向滚动距离
left: 0, // 横向滚动距离
});
}
let mouseMove = function(event){
let e = getMousePosition(event,false)
scrollMousemove(e)
}
let touchmove = function(event){
let e = getMousePosition(event,true)
scrollMousemove(e)
}
let mouseup = function(){
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseup)
document.removeEventListener('touchend',mouseup)
//移动端
}
document.addEventListener('mousemove', mouseMove);
document.addEventListener('touchmove', touchmove);
document.addEventListener('mouseup', mouseup);
document.addEventListener('touchend', mouseup);
// document.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
}
canvasBoxDom.addEventListener('scroll', function() {
const scrollTop = canvasBoxDom.scrollTop;
scrollBox.style.marginTop = scrollTop/scale+'px'
});
let mousedown = function(event){
let e = getMousePosition(event,false)
mouseDownOperation(e)
}
let touchstart = function(event){
let e = getMousePosition(event,true)
mouseDownOperation(e)
}
scrollBox.addEventListener('mousedown',mousedown)
scrollBox.addEventListener('touchstart',touchstart)
// scrollBox.removeEventListener('touchstart',mousedown)
// scrollBox.addEventListener('touchstart',mousedown)
});
};
@@ -2096,57 +2161,24 @@ export default defineComponent({
}
},
watch: {
// 'canvasWH.height':{
// handler(newVal,oldVal){
// if(!this.isMoible){
// return
// }
// return
// let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
// let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
// canvasBox.scroll({
// top: 0, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// scrollBox.style.marginTop = 0+'px'
// let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
// scrollBox.style.height = height +'px'
// let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
// let mousedown = (event)=>{//按下
// let position = {
// y:event.touches[0].screenY,
// top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
// }
// // let top =
// let scrollMousemove = (e)=>{
// let height = scrollBox.style.height.split('px')[0]*1
// let offsetTop = position.top+e.touches[0].screenY - position.y
// offsetTop = offsetTop <= 0? 0 : offsetTop
// offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
// scrollBox.style.marginTop = offsetTop+'px'
// canvasBox.scroll({
// top: offsetTop*scale, // 纵向滚动距离
// left: 0, // 横向滚动距离
// });
// }
// let mouseup = ()=>{//抬起
// window.removeEventListener('touchmove',scrollMousemove)
// scrollBox.removeEventListener('touchend',mouseup)
// }
// window.addEventListener('touchmove',scrollMousemove)
// scrollBox.addEventListener('touchend',mouseup)
// }
// scrollBox.removeEventListener('touchstart',mousedown)
// scrollBox.addEventListener('touchstart',mousedown)
// }
// },
'canvasWH.height':{
handler(newVal,oldVal){
let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
if(!canvasBox || !scrollBox)return
canvasBox.scroll({
top: 0, // 纵向滚动距离
left: 0, // 横向滚动距离
});
scrollBox.style.marginTop = 0+'px'
let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
scrollBox.style.height = height +'px'
}
},
},
mounted() {},
mounted() {
},
methods: {
@@ -2456,6 +2488,7 @@ export default defineComponent({
height: 100%;
overflow-y: auto;
overflow-x: hidden;
// overflow: hidden;
position: relative;
.editFrontBack_pencilbtn{
position: absolute;
@@ -2465,31 +2498,18 @@ export default defineComponent({
pointer-events: none;
transform: translate(-50%,-50%);
}
&.exportCanvasBox_center::-webkit-scrollbar-button:single-button{
}
&.exportCanvasBox_center::-webkit-scrollbar {
/* 竖轴的宽度 */
width: 2rem;
/* 横轴的高度 */
height: 1rem;
transition: all .3s;
}
/* 进度 */
&.exportCanvasBox_center::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: #543087;
}
/* 轨道 */
&.exportCanvasBox_center::-webkit-scrollbar-track {
border-radius: 1rem;
background: rgba(84, 48, 135,.2);
// background: rgba(238, 238, 244, 0);
display: none
}
}
.exportCanvasBox_scroll{
height: 100%;
width: 2rem;
background: #d6cfe3;
position: absolute;
right: 0;
top: 0;
border-radius: 1rem;
div{
background: #543087;